/*
 * RELIZ.AZ - KATEQORIYALAR
 * Directory UI V1
 *
 * Loaded only on /kateqoriya/
 */

/* =========================================================
   PAGE / HERO
   ========================================================= */

.site-main{
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbfc 62%,
            #ffffff 100%
        );
}

.listing-hero{
    position:relative;
    overflow:hidden;
    border-bottom:1px solid rgba(0,45,65,.08);
    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(255,132,0,.17),
            transparent 22%
        ),
        radial-gradient(
            circle at 68% 100%,
            rgba(0,113,139,.10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fbfdfd 0%,
            #edf7f9 57%,
            #fff8ef 100%
        );
}

.listing-hero::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    right:-82px;
    top:-150px;
    border:1px solid rgba(255,132,0,.20);
    border-radius:50%;
    pointer-events:none;
    animation:
        categories-float
        15s
        ease-in-out
        infinite
        alternate;
}

.listing-hero::after{
    content:"";
    position:absolute;
    width:175px;
    height:175px;
    right:18%;
    bottom:-112px;
    border-radius:50%;
    background:rgba(0,113,139,.04);
    pointer-events:none;
}

.listing-hero-inner{
    position:relative;
    z-index:1;
    padding-top:54px;
    padding-bottom:60px;
}

.listing-kicker{
    display:inline-flex;
    gap:8px;
    align-items:center;
    margin-bottom:10px;
    color:#00728b;
}

.listing-kicker::before{
    content:"";
    width:22px;
    height:3px;
    border-radius:999px;
    background:#ff8500;
}

.listing-title{
    max-width:760px;
    margin:0;
    color:#002d41;
    font-size:clamp(42px,5vw,64px);
    font-weight:850;
    line-height:1.06;
    letter-spacing:-.025em;
}

.listing-description{
    max-width:720px;
    margin-top:17px;
    color:#62757e;
    font-size:17px;
    line-height:1.65;
}


/* =========================================================
   MAIN
   ========================================================= */

.listing-main{
    min-width:0;
    padding-top:42px;
    padding-bottom:68px;
}


/* =========================================================
   CATEGORY COUNT
   ========================================================= */

.listing-summary{
    margin-bottom:18px;
}

.listing-summary > div{
    display:inline-flex;
    min-height:42px;
    gap:8px;
    align-items:center;
    padding:8px 14px;
    border:1px solid #dbe7eb;
    border-radius:999px;
    color:#61747d;
    background:#f7fbfc;
    font-size:12px;
    font-weight:700;
}

.listing-summary > div::before{
    content:"";
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:50%;
    background:#ff8500;
    box-shadow:
        0 0 0 4px
        rgba(255,133,0,.10);
}

.listing-summary strong{
    color:#002d41;
    font-size:14px;
    font-weight:900;
}


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

.category-directory{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:16px;
}

.category-directory-card{
    position:relative;
    overflow:hidden;
    display:flex;
    min-width:0;
    min-height:166px;
    flex-direction:column;
    justify-content:space-between;
    padding:23px 24px;
    border:1px solid #dce8ec;
    border-radius:18px;
    color:#002d41;
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(0,113,139,.055),
            transparent 29%
        ),
        #fff;
    box-shadow:
        0 12px 30px
        rgba(0,45,65,.045);
    text-decoration:none;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.category-directory-card::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:#00728b;
    opacity:.82;
}

.category-directory-card:nth-child(3n + 2)::before{
    background:#ff8500;
}

.category-directory-card::after{
    content:"→";
    position:absolute;
    top:18px;
    right:18px;
    display:grid;
    width:29px;
    height:29px;
    place-items:center;
    border-radius:10px;
    color:#79919a;
    background:#edf6f8;
    font-size:13px;
    font-weight:900;
    opacity:0;
    transform:translateX(-3px);
    transition:
        opacity .2s ease,
        transform .2s ease,
        color .2s ease,
        background .2s ease;
}

.category-directory-card:hover{
    transform:translateY(-4px);
    border-color:#bcd4dc;
    color:#002d41;
    box-shadow:
        0 18px 38px
        rgba(0,45,65,.085);
}

.category-directory-card:hover::after{
    opacity:1;
    color:#fff;
    background:#ff8500;
    transform:translateX(0);
}


/* =========================================================
   CATEGORY NAME
   ========================================================= */

.category-directory-name{
    position:relative;
    z-index:1;
    display:block;
    max-width:calc(100% - 38px);
    color:#002d41;
    font-size:18px;
    font-weight:850;
    line-height:1.32;
}


/* =========================================================
   RELEASE COUNT
   ========================================================= */

.category-directory-count{
    position:relative;
    z-index:1;
    display:inline-flex;
    width:max-content;
    max-width:100%;
    min-height:29px;
    align-items:center;
    margin-top:25px;
    padding:5px 10px;
    border-radius:999px;
    font-size:11.5px;
    font-weight:800;
    line-height:1;
}

.category-directory-count.has-releases{
    color:#00728b;
    background:#e8f5f7;
}

.category-directory-count.is-empty{
    color:#809098;
    background:#f1f5f6;
}


/* =========================================================
   ACTIVE CONTENT EMPHASIS
   ========================================================= */

.category-directory-card:
has(.category-directory-count.has-releases){
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(0,113,139,.07),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f9fcfd
        );
}

.category-directory-card:
has(.category-directory-count.has-releases)
.category-directory-name{
    color:#00293b;
}


/* =========================================================
   KEYBOARD
   ========================================================= */

.category-directory-card:focus-visible{
    outline:
        3px solid
        rgba(0,114,139,.22);
    outline-offset:3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:980px){

    .category-directory{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .category-directory-card{
        min-height:156px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:680px){

    .listing-hero-inner{
        padding-top:38px;
        padding-bottom:44px;
    }

    .listing-title{
        font-size:
            clamp(36px,11vw,48px);
    }

    .listing-description{
        font-size:15px;
    }

    .listing-main{
        padding-top:29px;
        padding-bottom:48px;
    }

    .category-directory{
        grid-template-columns:1fr;
        gap:13px;
    }

    .category-directory-card{
        min-height:138px;
        padding:21px 22px;
        border-radius:16px;
    }

    .category-directory-name{
        max-width:calc(100% - 36px);
        font-size:17px;
    }

    .category-directory-count{
        margin-top:20px;
    }

    .category-directory-card::after{
        opacity:1;
        width:28px;
        height:28px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:400px){

    .category-directory-card{
        padding:
            19px
            20px;
    }

    .category-directory-name{
        font-size:16px;
    }
}


/* =========================================================
   MOTION
   ========================================================= */

.category-directory-card{
    animation:
        categories-rise
        .55s
        ease
        both;
}

@keyframes categories-rise{
    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes categories-float{
    from{
        transform:
            translate3d(0,0,0);
    }

    to{
        transform:
            translate3d(-18px,18px,0);
    }
}

@media (prefers-reduced-motion:reduce){

    .listing-hero::before,
    .category-directory-card{
        animation:none;
    }

    .category-directory-card,
    .category-directory-card::after{
        transition:none;
    }
}