/* =========================================================
UAZIM DRAMA GRID
CINEMATIC AUDIO EXPERIENCE
========================================================= */

.featured-products
{
    position: relative;

    padding: 100px 0;

    background:
    radial-gradient(
        circle at top,
        rgba(124,58,237,.10),
        transparent 30%
    ),
    linear-gradient(
        180deg,
        #050816 0%,
        #091120 100%
    );

    overflow: hidden;
}


/* =========================================================
GLOBAL FIX
========================================================= */

html,
body
{
    overflow-x: hidden;
}


/* =========================================================
SECTION HEADER
========================================================= */

.section-header
{
    position: relative;

    text-align: center;

    margin-bottom: 55px;

    z-index: 2;
}

.section-tag
{
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 16px;

    margin-bottom: 18px;

    border-radius: 999px;

    background:
    rgba(124,58,237,.12);

    border:
    1px solid rgba(255,255,255,.08);

    color: #a855f7;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    backdrop-filter: blur(10px);
}

.section-header h2
{
    font-size: clamp(34px, 5vw, 58px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2px;

    color: #fff;

    margin-bottom: 16px;

    text-shadow:
    0 0 25px rgba(168,85,247,.25);
}

.section-header p
{
    max-width: 700px;

    margin: 0 auto;

    font-size: 16px;

    line-height: 1.8;

    color: rgba(255,255,255,.70);
}


/* =========================================================
FILTERS
========================================================= */

.product-filters
{
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 55px;
}

.filter-btn
{
    height: 46px;

    padding: 0 22px;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    color: rgba(255,255,255,.75);

    background:
    rgba(255,255,255,.05);

    border:
    1px solid rgba(255,255,255,.08);

    transition: .3s ease;

    backdrop-filter: blur(10px);
}

.filter-btn:hover
{
    transform: translateY(-2px);

    background:
    rgba(255,255,255,.08);
}

.filter-btn.active
{
    background:
    linear-gradient(
        135deg,
        #7c3aed,
        #2563eb
    );

    color: #fff;

    border: none;

    box-shadow:
    0 10px 30px rgba(124,58,237,.35);
}


/* =========================================================
GRID
========================================================= */

.products-grid
{
    display: grid;

    grid-template-columns:
    repeat(auto-fill,minmax(260px,1fr));

    gap: 28px;
}


/* =========================================================
CARD
========================================================= */

.product-item
{
    position: relative;
}

.product-thumb
{
    position: relative;

    width: 100%;

    padding: 0;

    border: none;

    background: transparent;

    border-radius: 24px;

    overflow: hidden;

    cursor: pointer;

    isolation: isolate;

    box-shadow:
    0 20px 50px rgba(0,0,0,.35);

    transition:
    transform .45s ease,
    box-shadow .45s ease;
}


/* hover */

.product-thumb:hover
{
    transform:
    translateY(-10px)
    scale(1.02);

    box-shadow:
    0 30px 70px rgba(0,0,0,.45);
}


/* image */

.product-thumb img
{
    width: 100%;

    aspect-ratio: 2 / 3;

    object-fit: cover;

    display: block;

    transition:
    transform 1s ease,
    filter .45s ease;

    filter:
    brightness(.82)
    contrast(1.04)
    saturate(1.02);
}

.product-thumb:hover img
{
    transform: scale(1.08);

    filter:
    brightness(.95)
    contrast(1.08)
    saturate(1.08);
}


/* overlay cinematic */

.product-thumb::after
{
    content: "";

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
        to top,
        rgba(3,7,18,.96) 0%,
        rgba(3,7,18,.35) 40%,
        rgba(0,0,0,.10) 100%
    );

    z-index: 1;
}


/* glow border */

.product-thumb::before
{
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background:
    linear-gradient(
        135deg,
        rgba(168,85,247,.45),
        rgba(37,99,235,.25),
        transparent
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    z-index: 3;

    pointer-events: none;
}


/* =========================================================
MODAL
========================================================= */

.product-modal
{
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    overflow: hidden;

    background:
    rgba(2,6,23,.82);

    backdrop-filter: blur(18px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: .35s ease;
}

.product-modal.active
{
    opacity: 1;

    visibility: visible;

    pointer-events: all;
}


/* overlay */

.product-modal-overlay
{
    position: absolute;

    inset: 0;
}


/* modal content */

.product-modal-content
{
    position: relative;

    z-index: 2;

    width:
    min(1180px,calc(100% - 20px));

    max-height: 92vh;

    overflow-y: auto;

    overflow-x: hidden;

    border-radius: 32px;

    background:
    linear-gradient(
        180deg,
        #0b1220 0%,
        #111827 100%
    );

    display: grid;

    grid-template-columns:
    1fr 1fr;

    box-shadow:
    0 40px 100px rgba(0,0,0,.55);

    animation:
    modalShow .4s ease;
}


/* animation */

@keyframes modalShow
{
    from
    {
        opacity: 0;

        transform:
        translateY(25px)
        scale(.96);
    }

    to
    {
        opacity: 1;

        transform:
        translateY(0)
        scale(1);
    }
}


/* image */

.modal-image
{
    min-height: 760px;

    overflow: hidden;
}

.modal-image img
{
    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* info */

.modal-info
{
    padding: 60px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.modal-info h3
{
    font-size: clamp(34px,4vw,56px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2px;

    color: #fff;

    margin-bottom: 24px;
}

.modal-info p
{
    font-size: 16px;

    line-height: 1.9;

    color:
    rgba(255,255,255,.72);

    margin-bottom: 38px;
}


/* button */

.modal-whatsapp-btn
{
    width: 100%;

    min-height: 64px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    color: #fff;

    background:
    linear-gradient(
        135deg,
        #7c3aed,
        #2563eb
    );

    box-shadow:
    0 18px 45px rgba(124,58,237,.35);

    transition: .35s ease;
}

.modal-whatsapp-btn:hover
{
    transform:
    translateY(-4px);

    box-shadow:
    0 26px 60px rgba(124,58,237,.45);
}


/* close */

.modal-close
{
    position: absolute;

    top: 22px;

    right: 22px;

    width: 56px;

    height: 56px;

    border: none;

    border-radius: 999px;

    background:
    rgba(255,255,255,.08);

    color: #fff;

    font-size: 28px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    backdrop-filter: blur(10px);

    transition: .3s ease;

    z-index: 10;
}

.modal-close:hover
{
    transform:
    rotate(90deg)
    scale(1.06);

    background:
    rgba(255,255,255,.12);
}


/* =========================================================
PAGINATION
========================================================= */

.pagination
{
    margin-top: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}

.pagination a
{
    width: 48px;

    height: 48px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color:
    rgba(255,255,255,.72);

    background:
    rgba(255,255,255,.05);

    border:
    1px solid rgba(255,255,255,.08);

    transition: .3s ease;
}

.pagination a:hover
{
    transform: translateY(-3px);

    background:
    rgba(255,255,255,.08);
}

.pagination a.active
{
    background:
    linear-gradient(
        135deg,
        #7c3aed,
        #2563eb
    );

    color: #fff;

    border: none;
}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 980px)
{
    .product-modal-content
    {
        grid-template-columns: 1fr;
    }

    .modal-image
    {
        min-height: 420px;
    }
}

@media (max-width: 768px)
{
    .featured-products
    {
        padding: 70px 0;
    }

    .products-grid
    {
        grid-template-columns:
        repeat(2,1fr);

        gap: 16px;
    }

    .product-modal
    {
        padding: 14px;
    }

    .modal-info
    {
        padding: 28px;
    }

    .modal-info h3
    {
        letter-spacing: -1px;
    }

    .modal-image
    {
        min-height: 300px;
    }

    .modal-whatsapp-btn
    {
        min-height: 58px;
    }
}

@media (max-width: 520px)
{
    .products-grid
    {
        grid-template-columns: 1fr 1fr;
    }

    .modal-image
    {
        min-height: 240px;
    }

    .section-header h2
    {
        line-height: 1.08;
    }
}