:root {

            --black: #080808;

            --black-soft: #121212;

            --cream: #f4efe5;

            --cream-dark: #e8dfd0;

            --gold: #c5a46d;

            --gold-dark: #8f713e;

            --white: #ffffff;

            --text-muted: #777;

            --border:
                rgba(8, 8, 8, .12);

        }


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        html {
            scroll-behavior: smooth;
        }


        body {

            font-family:
                'DM Sans',
                sans-serif;

            background:
                var(--cream);

            color:
                var(--black);

            overflow-x: hidden;

        }


        body.modal-open {
            overflow: hidden;
        }


        a {
            text-decoration: none;
            color: inherit;
        }


        button {
            font-family: inherit;
        }


        /* =====================================================
           NAVBAR
        ===================================================== */

        .navbar {

            position: fixed;

            top: 0;
            left: 0;

            width: 100%;

            height: 78px;

            display: flex;

            align-items: center;

            z-index: 9999;

            background:
                rgba(8, 8, 8, .92);

            backdrop-filter:
                blur(18px);

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

        }


        .nav-container {

            width: min(1200px, 92%);

            margin: auto;

            display: flex;

            align-items: center;

            justify-content: space-between;

        }


        .logo {

            display: flex;

            align-items: center;

            gap: 12px;

            color: var(--white);

            font-family:
                'Playfair Display',
                serif;

            font-size: 20px;

            font-weight: 600;

            letter-spacing: .5px;

        }


        .logo-mark {
    width: 150px;
     height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: transparent;
}

.logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


        .nav-menu {

            display: flex;

            align-items: center;

            gap: 34px;

            list-style: none;

        }


        .nav-menu a {

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

            font-size: 12px;

            font-weight: 600;

            letter-spacing: 1.2px;

            text-transform: uppercase;

            transition: .25s ease;

        }


        .nav-menu a:hover {

            color:
                var(--gold);

        }

				/* =====================================================
   NAVBAR DROPDOWN
===================================================== */

.dropdown {
    position: relative;
}


/* DROPDOWN ARROW */

.dropdown-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.dropdown-toggle i {
    font-size: 8px;
    transition: transform .3s ease;
}


/* DROPDOWN MENU */

.dropdown-menu {

    position: absolute;

    top: calc(100% + 18px);

    left: 50%;

    transform:
        translateX(-50%)
        translateY(10px);

    min-width: 210px;

    padding: 10px 0;

    list-style: none;

    background:
        rgba(8, 8, 8, .97);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

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

    border-radius: 6px;

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

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index: 99999;
}


/* GOLD LINE */

.dropdown-menu::before {

    content: '';

    position: absolute;

    top: 0;
    left: 20px;
    right: 20px;

    height: 1px;

    background:
        var(--gold);

    opacity: .7;
}


/* DROPDOWN ITEM */

.dropdown-menu li {
    width: 100%;
}


/* DROPDOWN LINK */

.dropdown-menu li a {

    display: flex !important;

    align-items: center;

    width: 100%;

    padding:
        13px 20px;

    color:
        rgba(255,255,255,.70) !important;

    font-size: 10px !important;

    letter-spacing:
        1.2px;

    white-space:
        nowrap;

    transition:
        background .25s ease,
        color .25s ease,
        padding-left .25s ease;

}


/* HOVER */

.dropdown-menu li a:hover {

    color:
        var(--gold) !important;

    background:
        rgba(197,164,109,.08);

    padding-left:
        25px;

}


/* SHOW DROPDOWN */

.dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);

}


/* ROTATE ARROW */

.dropdown:hover
.dropdown-toggle i {

    transform:
        rotate(180deg);

}


/* ACTIVE DROPDOWN PARENT */

.dropdown:has(.dropdown-menu a.active)
.dropdown-toggle {

    color:
        var(--gold);

}

        .nav-menu a {
    position: relative;
}

/* MENU AKTIF */
.nav-menu a.active {
    color: var(--gold);
}

.nav-menu a.active::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 100%;
    height: 2px;

    background: var(--gold);

    transform: scaleX(1);
    transform-origin: center;

    transition: .3s ease;
}


        .nav-toggle {

            display: none;

            border: none;

            background: none;

            color: white;

            font-size: 22px;

            cursor: pointer;

        }


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

        .hero {

            min-height: 540px;

            padding-top: 78px;

            display: flex;

            align-items: center;

            position: relative;

            overflow: hidden;

            background:
                linear-gradient(
                    120deg,
                    rgba(8,8,8,.92),
                    rgba(8,8,8,.55)
                ),
                url('../images/category/youth_2.jpg')
                center/cover no-repeat;

        }


        .hero::after {

            content: '';

            position: absolute;

            inset: 0;

            background:
                radial-gradient(
                    circle at center,
                    transparent 10%,
                    rgba(0,0,0,.45)
                );

            pointer-events: none;

        }


        .hero-container {

            width:
                min(1200px, 92%);

            margin: auto;

            position: relative;

            z-index: 2;

        }


        .hero-kicker {

            color:
                var(--gold);

            font-size: 11px;

            font-weight: 700;

            letter-spacing: 4px;

            text-transform: uppercase;

            margin-bottom: 18px;

        }


        .hero h1 {

            max-width: 850px;

            color: white;

            font-family:
                'Playfair Display',
                serif;

            font-size:
                clamp(48px, 7vw, 86px);

            line-height: .98;

            font-weight: 600;

            margin-bottom: 24px;

        }


        .hero p {

            max-width: 650px;

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

            font-size: 15px;

            line-height: 1.8;

        }


        /* =====================================================
           CATEGORY SECTION
        ===================================================== */

        .categories-section {

            padding:
                100px 0 120px;

        }


        .section-container {

            width:
                min(1200px, 92%);

            margin: auto;

        }


        .section-heading {

            margin-bottom: 48px;

        }


        .section-label {

            color:
                var(--gold-dark);

            font-size: 9px;

            font-weight: 700;

            letter-spacing: 3px;

            text-transform: uppercase;

            margin-bottom: 10px;

        }


        .section-heading h2 {

            font-family:
                'Playfair Display',
                serif;

            font-size:
                clamp(36px, 5vw, 58px);

            line-height: 1.05;

            font-weight: 600;

        }


        .section-heading p {

            max-width: 650px;

            margin-top: 16px;

            color:
                var(--text-muted);

            font-size: 14px;

            line-height: 1.8;

        }


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

        .category-grid {

            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 24px;

        }


        .category-card {

            position: relative;

            min-height: 460px;

            overflow: hidden;

            border-radius: 4px;

            cursor: pointer;

            background:
                var(--black);

        }


        .category-card-image {

            position: absolute;

            inset: 0;

            background-position: center;

            background-size: cover;

            transition:
                transform .7s ease;

        }


        .category-card:hover
        .category-card-image {

            transform:
                scale(1.06);

        }


        .category-card::after {

            content: '';

            position: absolute;

            inset: 0;

            background:
                linear-gradient(
                    to top,
                    rgba(0,0,0,.95),
                    rgba(0,0,0,.12)
                );

        }


        .category-number {

            position: absolute;

            top: 24px;
            left: 24px;

            z-index: 2;

            width: 42px;
            height: 42px;

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

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            font-size: 11px;

            font-weight: 600;

        }


        .category-content {

            position: absolute;

            left: 26px;
            right: 26px;
            bottom: 26px;

            z-index: 2;

            color: white;

        }


        .category-content h3 {

            font-family:
                'Playfair Display',
                serif;

            font-size: 34px;

            line-height: 1;

            margin-bottom: 10px;

        }

        .category-arrow {

            position: absolute;

            right: 26px;
            bottom: 28px;

            width: 42px;
            height: 42px;

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

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            z-index: 3;

            transition: .3s ease;

        }


        .category-card:hover
        .category-arrow {

            background:
                var(--gold);

            border-color:
                var(--gold);

            color:
                var(--black);

            transform:
                translateX(4px);

        }


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

        .modal {

            position: fixed;

            inset: 0;

            z-index: 10000;

            display: none;

            align-items: center;

            justify-content: center;

            padding: 30px;

            background:
                rgba(0,0,0,.78);

            backdrop-filter:
                blur(10px);

        }


        .modal.active {
            display: flex;
        }


        .modal-box {

            width:
                min(1080px, 100%);

            max-height:
                90vh;

            overflow-y:
                auto;

            background:
                var(--cream);

            border-radius: 10px;

            position: relative;

            box-shadow:
                0 30px 100px
                rgba(0,0,0,.4);

        }


        .modal-close {

            position: absolute;

            top: 18px;
            right: 18px;

            z-index: 10;

            width: 42px;
            height: 42px;

            border: none;

            border-radius: 50%;

            background:
                rgba(229, 245, 4, 0.08);

            color:
                var(--black);

            cursor: pointer;

            transition: .25s ease;

        }


        .modal-close:hover {

            background:
                var(--black);

            color:
                white;

        }


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

        .modal-top {

            display: grid;

            grid-template-columns:
                .85fr 1.15fr;

            min-height: 470px;

        }


        .modal-visual {

            min-height: 470px;

            background:
                #111;

            position: relative;

            overflow: hidden;

        }


        .modal-visual img {

            width: 100%;
            height: 100%;

            object-fit: cover;

            display: block;

        }


        .modal-visual::after {

            content: '';

            position: absolute;

            inset: 0;

            background:
                linear-gradient(
                    to top,
                    rgba(0,0,0,.6),
                    transparent 60%
                );

        }


        .modal-visual-number {

            position: absolute;

            left: 28px;
            bottom: 25px;

            z-index: 2;

            color: white;

            font-family:
                'Playfair Display',
                serif;

            font-size: 72px;

            opacity: .85;

        }


        .modal-content {

            padding:
                56px 48px 48px;

            background:
                var(--cream);

        }


        .modal-kicker {

            color:
                var(--gold-dark);

            font-size: 9px;

            font-weight: 700;

            letter-spacing: 3px;

            text-transform: uppercase;

            margin-bottom: 12px;

        }


        .modal-title {

            font-family:
                'Playfair Display',
                serif;

            font-size:
                clamp(36px, 5vw, 56px);

            line-height: 1;

            margin-bottom: 10px;

        }


        .modal-tagline {

            color:
                var(--gold-dark);

            font-size: 13px;

            font-style: italic;

            margin-bottom: 26px;

        }


        .modal-description {

            color:
                #555;

            font-size: 13px;

            line-height: 1.8;

            margin-bottom: 34px;

        }


        /* =====================================================
           QUICK INFORMATION
        ===================================================== */

        .modal-info-grid {

            display: grid;

            grid-template-columns:
                repeat(6, 1fr);

            gap: 0;

            border:
                1px solid
                rgba(8,8,8,.12);

            border-radius: 18px;

            overflow: hidden;

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

        }


        .modal-info-item {

            padding:
                24px 16px;

            text-align: center;

            min-width: 0;

            position: relative;

        }


        /* TOP ROW */

        .modal-info-item:nth-child(1),
        .modal-info-item:nth-child(2),
        .modal-info-item:nth-child(3) {

            grid-column:
                span 2;

            border-bottom:
                1px solid
                rgba(8,8,8,.10);

        }


        /* BOTTOM ROW */

        .modal-info-item:nth-child(4) {

            grid-column:
                2 / span 2;

        }


        .modal-info-item:nth-child(5) {

            grid-column:
                4 / span 2;

        }


        /* VERTICAL BORDERS */

        .modal-info-item:nth-child(1),
        .modal-info-item:nth-child(2),
        .modal-info-item:nth-child(4) {

            border-right:
                1px solid
                rgba(8,8,8,.10);

        }


        .modal-info-label {

            display: block;

            margin-bottom: 8px;

            color:
                var(--gold-dark);

            font-size: 8px;

            font-weight: 700;

            letter-spacing: 1.8px;

            line-height: 1.4;

            text-transform: uppercase;

        }


        .modal-info-value {

            display: block;

            color:
                var(--black);

            font-size: 13px;

            font-weight: 600;

            line-height: 1.45;

        }


        /* =====================================================
           REQUIREMENTS
        ===================================================== */

        .modal-requirements {

            margin-top: 38px;

        }


        .modal-section-label {

            color:
                var(--gold-dark);

            font-size: 9px;

            font-weight: 700;

            letter-spacing: 3px;

            text-transform: uppercase;

            margin-bottom: 18px;

        }


        #modalRequirements {

            display: grid;

            gap: 12px;

        }


        .requirement-item {

            display: grid;

            grid-template-columns:
                38px 1fr;

            gap: 16px;

            padding:
                18px 18px;

            border:
                1px solid
                rgba(8,8,8,.10);

            border-radius: 12px;

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

        }


        .requirement-number {

            width: 32px;
            height: 32px;

            border-radius: 50%;

            background:
                var(--black);

            color:
                var(--gold);

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 10px;

            font-weight: 700;

        }


        .requirement-title {

            font-size: 11px;

            font-weight: 700;

            letter-spacing: 1px;

            margin-bottom: 5px;

        }


        .requirement-label {

            display: inline-block;

            color:
                var(--gold-dark);

            font-size: 8px;

            font-weight: 700;

            letter-spacing: 1.2px;

            margin-bottom: 6px;

        }


        .requirement-description {

            color:
                #666;

            font-size: 12px;

            line-height: 1.7;

        }


        .empty-requirement {

            padding:
                20px;

            border:
                1px dashed
                rgba(8,8,8,.16);

            border-radius: 12px;

            color:
                #777;

            text-align: center;

            font-size: 12px;

        }


        /* =========================================
   FOOTER
========================================= */

footer {
    background: #080808;
    color: rgba(255,255,255,.75);
    padding: 80px 7% 0;
    border-top: 1px solid rgba(214,179,106,.25);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.15fr 1fr 1.25fr;
    gap: 70px;
}

/* =========================================
   FOOTER GENERAL
========================================= */

.footer-column h4 {
    font-family: 'Trade Gothic', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;

    color: #d6b36a;

    margin-bottom: 25px;
}

/* =========================================
   FOOTER ABOUT
========================================= */

.footer-logo {
    width: 185px;
    height: auto;
    display: block;

    margin-bottom: 22px;
}

.footer-about p {
    max-width: 330px;

    font-family: 'Trade Gothic', sans-serif;
    font-size: 12px;
    line-height: 1.9;

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

/* =========================================
   CONTACT
========================================= */

.contact-item {
    display: flex;
    align-items: flex-start;

    gap: 13px;
    margin-bottom: 16px;
}

.contact-item i {
    width: 18px;
    min-width: 18px;

    margin-top: 3px;

    color: #d6b36a;
    font-size: 13px;

    text-align: center;
}

.contact-item a {
    color: rgba(255,255,255,.65);

    text-decoration: none;

    font-family: 'Trade Gothic', sans-serif;
    font-size: 12px;
    line-height: 1.7;

    transition: .3s ease;
}

.contact-item a:hover {
    color: #d6b36a;
}

/* =========================================
   LOCATION
========================================= */

.footer-location p {
    font-family: 'Trade Gothic', sans-serif;

    font-size: 12px;
    line-height: 1.8;

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

    margin-bottom: 20px;
}

.map-container {
    width: 100%;
    height: 180px;

    overflow: hidden;

    border: 1px solid rgba(214,179,106,.25);

    background: #111;
}

.map-container iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;

    filter: grayscale(100%);
    opacity: .75;

    transition: .4s ease;
}

.map-container:hover iframe {
    filter: grayscale(0%);
    opacity: 1;
}

/* =========================================
   FOOTER BOTTOM
========================================= */

.footer-bottom {
    max-width: 1200px;

    margin: 60px auto 0;

    padding: 22px 0;

    border-top: 1px solid rgba(255,255,255,.09);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.footer-bottom p {
    margin: 0;

    font-family: 'Trade Gothic', sans-serif;

    font-size: 10px;
    letter-spacing: 1px;

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

.footer-bottom span {
    color: #d6b36a;
}

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

@media (max-width: 768px) {

    footer {
        padding: 60px 25px 0;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .footer-logo {
        width: 165px;
    }

    .footer-about p {
        max-width: 100%;
    }

    .map-container {
        height: 220px;
    }

    .footer-bottom {
        margin-top: 45px;

        flex-direction: column;

        text-align: center;

        gap: 8px;
    }

}


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

        @media (max-width: 950px) {

            .nav-menu {

                position: fixed;

                top: 78px;
                left: 0;

                width: 100%;

                display: none;

                flex-direction: column;

                align-items: flex-start;

                gap: 0;

                background:
                    rgba(8,8,8,.98);

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

            }


            .nav-menu.active {
                display: flex;
            }


            .nav-menu li {
                width: 100%;
            }


            .nav-menu a {

                display: block;

                width: 100%;

                padding: 18px 5%;

            }


            .nav-toggle {
                display: block;
            }


            .category-grid {

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

            }


            .modal-top {

                grid-template-columns:
                    1fr;

            }


            .modal-visual {

                min-height: 280px;

            }


            .modal-content {

                padding:
                    42px 30px 36px;

            }

        }


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

        @media (max-width: 650px) {

            .navbar {
                height: 68px;
            }


            .nav-menu {
                top: 68px;
            }


            .logo {
                font-size: 17px;
            }


            .logo-mark {

                width: 70px;
                height: auto;

            }


            .hero {

                padding-top: 68px;

                min-height:
                    500px;

            }


            .hero h1 {

                font-size:
                    48px;

            }


            .categories-section {

                padding:
                    70px 0 80px;

            }


            .category-grid {

                grid-template-columns:
                    1fr;

            }


            .category-card {

                min-height:
                    420px;

            }


            .modal {

                padding: 10px;

            }


            .modal-box {

                max-height:
                    94vh;

                border-radius:
                    8px;

            }


            .modal-visual {

                min-height:
                    230px;

            }


            .modal-content {

                padding:
                    34px 18px 28px;

            }


            .modal-title {

                font-size:
                    38px;

            }


            /* =================================================
               QUICK INFO MOBILE
            ================================================= */

            .modal-info-grid {

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

            }


            .modal-info-item:nth-child(1),
            .modal-info-item:nth-child(2),
            .modal-info-item:nth-child(3),
            .modal-info-item:nth-child(4),
            .modal-info-item:nth-child(5) {

                grid-column:
                    span 1;

                border-right:
                    1px solid
                    rgba(8,8,8,.10);

                border-bottom:
                    1px solid
                    rgba(8,8,8,.10);

            }


            .modal-info-item:nth-child(2),
            .modal-info-item:nth-child(4) {

                border-right:
                    none;

            }


            .modal-info-item:nth-child(5) {

                border-bottom:
                    none;

            }


            .modal-info-item {

                padding:
                    18px 10px;

            }


            .modal-info-label {

                font-size: 7px;

                letter-spacing:
                    1.4px;

            }


            .modal-info-value {

                font-size: 12px;

            }


            .requirement-item {

                grid-template-columns:
                    32px 1fr;

                gap: 12px;

                padding:
                    15px;

            }


            .footer-container {

                flex-direction:
                    column;

                align-items:
                    flex-start;

            }

        }


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

        @media (max-width: 420px) {

            .hero h1 {

                font-size:
                    40px;

            }


            .category-content h3 {

                font-size:
                    29px;

            }


            .modal-title {

                font-size:
                    33px;

            }

        }