body.dark-scheme {
  color: var(--body-font-color-dark);
  background: var(--bg-dark-1);
}


.hero-carousel-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    /* padding: 70px 20px;
    background: #050505; */
}


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

.hero-carousel {
    width: 100%;
    /* max-width: 1400px; */
    height: 620px;
    margin: auto;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-radius: 20px; */
    /* background: #050505; */
}


/* =====================================================
   BLURRED BACKGROUND
===================================================== */

.carousel-bg {
    position: absolute;
    inset: -40px;

    background-image: url("images/slide1.jpg");
    background-size: cover;
    background-position: center;

    filter: blur(5px);
    transform: scale(1.15);

    opacity: .35;
}


/* DARK OVERLAY */

.carousel-bg::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.85),
            rgba(0,0,0,.25),
            rgba(0,0,0,.85)
        );
}


/* =====================================================
   TRACK
===================================================== */

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;

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

    perspective: 1200px;
}


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

.carousel-card {
    position: absolute;

    width: 310px;
    height: 430px;

    border-radius: 10px;
    overflow: hidden;

    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        opacity .8s ease,
        filter .8s ease,
        z-index .8s ease;

    box-shadow:
        0 25px 60px rgba(0,0,0,.45);

    opacity: 0;

    pointer-events: none;
}


/* IMAGE */

.carousel-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =====================================================
   POSITION 0 - CENTER
===================================================== */

.carousel-card.pos-center {
    opacity: 1;

    transform:
        translateX(0)
        translateZ(100px)
        scale(1);

    filter: brightness(1);

    z-index: 10;
}


/* =====================================================
   LEFT
===================================================== */

.carousel-card.pos-left {
    opacity: .8;

    transform:
        translateX(-290px)
        translateZ(-100px)
        rotateY(15deg)
        scale(.82);

    filter: brightness(.65);

    z-index: 5;
}


/* =====================================================
   RIGHT
===================================================== */

.carousel-card.pos-right {
    opacity: .8;

    transform:
        translateX(290px)
        translateZ(-100px)
        rotateY(-15deg)
        scale(.82);

    filter: brightness(.65);

    z-index: 5;
}


/* =====================================================
   FAR LEFT
===================================================== */

.carousel-card.pos-far-left {
    opacity: .45;

    transform:
        translateX(-510px)
        translateZ(-200px)
        rotateY(22deg)
        scale(.65);

    filter: brightness(.45);

    z-index: 2;
}


/* =====================================================
   FAR RIGHT
===================================================== */

.carousel-card.pos-far-right {
    opacity: .45;

    transform:
        translateX(510px)
        translateZ(-200px)
        rotateY(-22deg)
        scale(.65);

    filter: brightness(.45);

    z-index: 2;
}


/* =====================================================
   TEXT
===================================================== */

.carousel-content {
    position: absolute;

    z-index: 20;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 500px;

    text-align: center;

    color: white;

    pointer-events: none;

    text-shadow:
        0 3px 15px rgba(0,0,0,.8);
}


/* TITLE */

.carousel-content h1 {
    margin: 0;

    font-size: 34px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* SUBTITLE */

.carousel-content h2 {
    margin: 0 0 18px;

    font-size: 32px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* DESCRIPTION */

.carousel-content p {
    margin: 0;

    font-size: 15px;

    font-weight: 400;

    opacity: .85;
}


/* =====================================================
   ARROWS
===================================================== */

.carousel-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

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

    color: white;

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

    cursor: pointer;

    z-index: 30;

    transition: .3s ease;

    backdrop-filter: blur(8px);
}


.carousel-arrow:hover {
    background: rgba(255,255,255,.15);

    transform:
        translateY(-50%)
        scale(1.08);
}


.carousel-prev {
    left: 35px;
}


.carousel-next {
    right: 35px;
}


/* =====================================================
   DOTS
===================================================== */

.carousel-dots {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 30;
}


.carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    cursor: pointer;
    transition: .3s ease;
}


.carousel-dot.active {
    width: 10px;
    height: 10px;

    background: white;

    box-shadow:
        0 0 10px rgba(255,255,255,.7);
}


/* =====================================================
   TEXT ANIMATION
===================================================== */

.carousel-content.animate h1,
.carousel-content.animate h2,
.carousel-content.animate p {

    animation: textFade .7s ease;
}


@keyframes textFade {

    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 1000px) {

    .hero-carousel {
        height: 560px;
    }

    .carousel-card {
        width: 270px;
        height: 390px;
    }

    .carousel-card.pos-left {
        transform:
            translateX(-230px)
            translateZ(-100px)
            rotateY(15deg)
            scale(.78);
    }

    .carousel-card.pos-right {
        transform:
            translateX(230px)
            translateZ(-100px)
            rotateY(-15deg)
            scale(.78);
    }

    .carousel-card.pos-far-left {
        transform:
            translateX(-390px)
            translateZ(-200px)
            rotateY(22deg)
            scale(.58);
    }

    .carousel-card.pos-far-right {
        transform:
            translateX(390px)
            translateZ(-200px)
            rotateY(-22deg)
            scale(.58);
    }

}


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

@media (max-width: 600px) {

    .hero-carousel-section {
        padding: 30px 10px;
    }

    .hero-carousel {
        height: 500px;
        border-radius: 15px;
    }

    /* hanya center + sedikit card samping */

    .carousel-card {
        width: 230px;
        height: 340px;
    }

    .carousel-card.pos-center {
        transform:
            translateX(0)
            translateZ(100px)
            scale(1);
    }

    .carousel-card.pos-left {
        opacity: .45;

        transform:
            translateX(-150px)
            translateZ(-100px)
            rotateY(15deg)
            scale(.68);
    }

    .carousel-card.pos-right {
        opacity: .45;

        transform:
            translateX(150px)
            translateZ(-100px)
            rotateY(-15deg)
            scale(.68);
    }

    .carousel-card.pos-far-left,
    .carousel-card.pos-far-right {
        opacity: 0;
    }


    .carousel-content {
        width: 90%;
    }

    .carousel-content h1 {
        font-size: 25px;
        letter-spacing: 1px;
    }

    .carousel-content h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .carousel-content p {
        font-size: 13px;
    }


    .carousel-arrow {
        width: 38px;
        height: 38px;
    }

    .carousel-prev {
        left: 12px;
    }

    .carousel-next {
        right: 12px;
    }

    .carousel-dots {
        bottom: 22px;
    }

}





















.modern-gallery {
            padding: 90px 0 100px;
            background: #fff;
            margin-top: -50px;
        }

        .gallery-container {
            width: min(1280px, 94%);
            margin: auto;
        }


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

        .gallery-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;

            margin-bottom: 35px;
        }

        .gallery-heading {
            margin: 0;
            /* font-size: clamp(45px, 6vw, 82px); */
            font-size: 42px;
            font-weight: 400;
            /* line-height: .88;
            letter-spacing: -5px; */
            color: #111;
        }

        .gallery-heading span {
            display: block;
            color: #999;
        }

        .gallery-info {
            display: flex;
            align-items: center;
            gap: 12px;

            max-width: 250px;
            margin-bottom: 4px;
        }

        .gallery-info-line {
            width: 35px;
            height: 1px;
            background: #666666;
        }

        .gallery-info-text {
            font-size: 11px;
            line-height: 1.5;
            color: #666;
            margin: 0;
        }


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

        .gallery-grid {

            /*
                JANGAN UBAH GRID INI DI MOBILE

                Struktur:
                8 + 4
                4 + 4 + 4
                4 + 8
            */

            display: grid;

            grid-template-columns:
                repeat(12, minmax(0, 1fr));

            grid-template-rows:
                300px
                300px
                210px;

            gap: 7px;
        }


        /* =====================================================
           GALLERY ITEM
        ===================================================== */

        .gallery-item {

            position: relative;

            overflow: hidden;

            border-radius: 12px;

            background: #eee;

            cursor: pointer;
        }


        /* IMAGE */

        .gallery-item img {

            width: 100%;
            height: 100%;

            object-fit: cover;

            display: block;

            transition:
                transform .8s cubic-bezier(.2,.7,.2,1),
                filter .5s ease;
        }


        /* =====================================================
           HOVER
        ===================================================== */

        .gallery-item:hover img {

            transform: scale(1.07);

            filter:
                brightness(.72)
                saturate(1.08);
        }


        /* =====================================================
           OVERLAY
        ===================================================== */

        .gallery-overlay {

            position: absolute;

            inset: 0;

            display: flex;

            align-items: flex-end;
            justify-content: space-between;

            padding: 18px;

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

            opacity: 0;

            transition: .4s ease;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }


        /* NUMBER */

        .gallery-number {

            font-size: 11px;
            font-weight: 600;

            letter-spacing: 1px;

            color: #fff;
        }


        /* VIEW ICON */

        .gallery-view {

            width: 38px;
            height: 38px;

            border-radius: 50%;

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

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

            color: #111;

            font-size: 15px;

            transform: translateY(10px);

            transition: .4s ease;
        }

        .gallery-item:hover .gallery-view {

            transform: translateY(0);
        }


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

        .gallery-item-1 {

            grid-column: span 8;
            grid-row: 1;
        }

        .gallery-item-2 {

            grid-column: span 4;
            grid-row: 1;
        }

        .gallery-item-3 {

            grid-column: span 4;
            grid-row: 2;
        }

        .gallery-item-4 {

            grid-column: span 4;
            grid-row: 2;
        }

        .gallery-item-5 {

            grid-column: span 4;
            grid-row: 2;
        }

        .gallery-item-6 {

            grid-column: span 4;
            grid-row: 3;
        }

        .gallery-item-7 {

            grid-column: span 8;
            grid-row: 3;
        }


        /* =====================================================
           IMAGE POSITION
        ===================================================== */

        .gallery-item-1 img {
            object-position: center;
        }

        .gallery-item-2 img {
            object-position: center;
        }

        .gallery-item-3 img {
            object-position: center;
        }

        .gallery-item-4 img {
            object-position: center;
        }

        .gallery-item-5 img {
            object-position: center;
        }


        /* =====================================================
           LIGHTBOX
        ===================================================== */

        .gallery-lightbox {

            position: fixed;

            inset: 0;

            z-index: 99999;

            display: flex;

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

            padding: 30px;

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

            opacity: 0;
            visibility: hidden;

            transition: .35s ease;
        }

        .gallery-lightbox.active {

            opacity: 1;
            visibility: visible;
        }

        .gallery-lightbox img {

            max-width: 92vw;
            max-height: 88vh;

            object-fit: contain;

            border-radius: 10px;

            transform: scale(.94);

            transition: .4s ease;
        }

        .gallery-lightbox.active img {

            transform: scale(1);
        }


        /* CLOSE */

        .gallery-close {

            position: absolute;

            top: 25px;
            right: 30px;

            width: 48px;
            height: 48px;

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

            border-radius: 50%;

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

            color: #fff;

            font-size: 25px;

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

            cursor: pointer;

            transition: .3s ease;
        }

        .gallery-close:hover {

            background: #fff;
            color: #111;

            transform: rotate(90deg);
        }


        /* =====================================================
           TABLET
           GRID TETAP 12 KOLOM
        ===================================================== */

        @media (max-width: 991px) {

            .modern-gallery {
                margin-top: -100px;
                padding: 65px 0 70px;
            }

            .gallery-grid {

                grid-template-columns:
                    repeat(12, minmax(0, 1fr));

                grid-template-rows:
                    240px
                    240px
                    170px;

                gap: 6px;
            }

            .gallery-heading {

                font-size: 38px;
                /* letter-spacing: -4px; */
            }

        }


        /* =====================================================
           MOBILE
           GRID TIDAK BERUBAH
        ===================================================== */

        @media (max-width: 600px) {

            .modern-gallery {
                margin-top: -50px;
                padding: 45px 0 55px;
            }

            .gallery-container {

                width: calc(100% - 20px);
            }


            /* HEADER */

            .gallery-header {

                margin-bottom: 20px;

                align-items: flex-end;
            }

            .gallery-heading {

                font-size: 36px;

                /* letter-spacing: -3px;

                line-height: .9; */
            }

            .gallery-heading span {

                display: inline;
            }


            .gallery-info {

                max-width: 135px;

                gap: 7px;

                margin-bottom: 2px;
            }

            .gallery-info-line {

                width: 18px;
            }

            .gallery-info-text {

                font-size: 8px;

                line-height: 1.35;
            }


            /* ==========================================
               GRID TETAP SAMA

               8 + 4
               4 + 4 + 4
               4 + 8
            ========================================== */

            .gallery-grid {

                grid-template-columns:
                    repeat(12, minmax(0, 1fr));

                grid-template-rows:
                    175px
                    175px
                    120px;

                gap: 4px;
            }


            /* tetap */

            .gallery-item-1 {
                grid-column: span 8;
                grid-row: 1;
            }

            .gallery-item-2 {
                grid-column: span 4;
                grid-row: 1;
            }

            .gallery-item-3 {
                grid-column: span 4;
                grid-row: 2;
            }

            .gallery-item-4 {
                grid-column: span 4;
                grid-row: 2;
            }

            .gallery-item-5 {
                grid-column: span 4;
                grid-row: 2;
            }

            .gallery-item-6 {
                grid-column: span 4;
                grid-row: 3;
            }

            .gallery-item-7 {
                grid-column: span 8;
                grid-row: 3;
            }


            /* MOBILE BORDER */

            .gallery-item {

                border-radius: 7px;
            }


            /* Hide hover overlay on touch */

            .gallery-overlay {

                opacity: 1;

                padding: 8px;

                background:
                    linear-gradient(
                        to top,
                        rgba(0,0,0,.45),
                        transparent 50%
                    );
            }

            .gallery-number {

                font-size: 8px;
            }

            .gallery-view {

                width: 27px;
                height: 27px;

                font-size: 11px;

                transform: none;
            }

        }


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

        @media (max-width: 400px) {

            .gallery-heading {

                font-size: 28px;

                /* letter-spacing: -2.5px; */
            }

            .gallery-info {

                max-width: 115px;
            }

            .gallery-grid {

                grid-template-rows:
                    145px
                    145px
                    100px;
            }

        }