/* =====================================================
   EXPERIENCE HERO – FULL IMAGE + GLASS TEXT
===================================================== */

.experience-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* BACKGROUND IMAGE */
.experience-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* OVERLAY HALUS */
.experience-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
}

/* CONTENT */
.experience-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    padding-left: 8%;
}

/* GLASS BOX */
.experience-hero-box {
    max-width: 520px;

    background: rgba(24, 50, 38, 0.60);

    padding: 48px 44px;
    border-radius: 6px;

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

/* TITLE */
/* =====================================================
   PACKAGES HERO TITLE (ANTI BENTROK HOME.CSS)
===================================================== */

.exp-hero-title {
    font-family: 'Norwester';
    font-size: 46px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 14px;
}

/* Tablet */
@media (max-width: 991px) {
    .exp-hero-title {
        font-size: 40px;
        text-align: center;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .exp-hero-title {
        font-size: 32px;
        text-align: center;
    }
}

/* DIVIDER */
.experience-divider {
    width: 140px;
    height: 2px;
    background: #c9b458;
    margin-bottom: 26px;
}

/* DESCRIPTION */
.experience-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    line-height: 1.9;
    /* rata kiri & kanan */
    text-align: justify;
    text-justify: inter-word;
    color: rgba(255,255,255,0.9);
    margin-bottom: 18px;
}

.experience-desc:last-child {
    margin-bottom: 0;
}

/* =====================================================
   TABLET
===================================================== */
@media (max-width: 991px) {
    .experience-hero-content {
        padding-left: 6%;
        padding-right: 6%;
    }

    .experience-title {
        font-size: 44px;
    }

    .experience-hero-box {
        max-width: 100%;
    }
}

/* =====================================================
   MOBILE
===================================================== */
@media (max-width: 576px) {
    .experience-hero {
        height: auto;
        min-height: 100vh;
    }

    .experience-hero-content {
        align-items: flex-start;
        padding: 80px 20px;
    }

    .experience-hero-box {
        padding: 0px 0px;
    }

    .experience-title {
        font-size: 36px;
        text-align: center;
    }

    .experience-divider {
        margin-left: auto;
        margin-right: auto;
    }

    .experience-desc {
        text-align: justify;
        font-size: 16px;
    }
}

/* =====================================================
   DESKTOP & LAPTOP – CONTROL SIZE TEXT BOX
===================================================== */

@media (min-width: 992px) {

    .experience-hero-box {

        /* 🔥 ATUR LEBAR */
        max-width: 700px;     /* ubah bebas: 520 / 600 / 680 */

        /* 🔥 ATUR TINGGI */
        min-height: 520px;    /* tinggi minimal box */

        /* 🔥 JARAK DALAM */
        padding: 56px 52px;  /* atas-bawah | kiri-kanan */

    }

}


/* =====================================================
   DESKTOP & LAPTOP – VERTICAL POSITION CONTROL
===================================================== */

@media (min-width: 992px) {

    .experience-hero-content {

        /* 🔼 JARAK DARI ATAS IMAGE */
        padding-top: 25vh;     /* naik-turun ke bawah */

        /* 🔽 JARAK DARI BAWAH IMAGE */
        padding-bottom: 10vh;  /* jarak aman bawah */

        /* kiri tetap */
        padding-left: 8%;
    }

}



/* =====================================================
   EXPERIENCE HERO – LEFT REVEAL ANIMATION (ALL DEVICES)
===================================================== */

/* ===== INITIAL STATE ===== */
.experience-hero-box {
    opacity: 0;
    transform: translateX(-80px);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* TEXT INSIDE BOX */
.experience-title,
.experience-divider,
.experience-desc {
    opacity: 0;
    transform: translateX(-40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =====================================================
   ACTIVE STATE
===================================================== */

/* BOX MASUK DARI KIRI */
.experience-hero.is-visible .experience-hero-box {
    opacity: 1;
    transform: translateX(0);
}

/* TITLE */
.experience-hero.is-visible .experience-title {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
}

/* DIVIDER (GARIS) */
.experience-hero.is-visible .experience-divider {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.6s;
}

/* DESC PARAGRAF BERURUT */
.experience-hero.is-visible .experience-desc:nth-of-type(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.8s;
}

.experience-hero.is-visible .experience-desc:nth-of-type(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1s;
}

/* =====================================================
   MOBILE & TABLET – LEBIH RINGAN
===================================================== */

@media (max-width: 991px) {

    .experience-hero-box {
        transform: translateX(-50px);
    }

    .experience-title,
    .experience-divider,
    .experience-desc {
        transform: translateX(-25px);
    }

}




           /* ==================================================
                            THE END
              ================================================= */








/* =====================================================
   EXPERIENCE – WHITE CLEAN SECTION (FINAL CLEAN)
===================================================== */

/* ================= ROOT CONTROL ================= */

:root {
    /* SECTION PADDING */
    --section-padding-desktop: 60px;
    --section-padding-tablet: 90px;
    --section-padding-mobile: 70px;

    /* TEXT BOX PADDING */
    --box-padding-top-desktop: 80px;
    --box-padding-bottom-desktop: 36px;

    --box-padding-top-tablet: 64px;
    --box-padding-bottom-tablet: 36px;

    --box-padding-top-mobile: 48px;
    --box-padding-bottom-mobile: 32px;
}

/* =====================================================
   SECTION WRAPPER
===================================================== */

.exp-white-section {
    background: #ffffff;
    width: 100%;
}

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

.exp-white-inner {
    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 80px;
    padding: var(--section-padding-desktop) 24px;
}

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

.exp-white-image {
    position: relative;
}

.exp-white-image img {
    width: 100%;
    height: auto;
    display: block;
}

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

.exp-white-content {
    position: relative;
    background: #ffffff;

    /* 🔥 AUTO HEIGHT */
    height: auto;

    /* 🔥 PADDING DESKTOP */
    padding-top: var(--box-padding-top-desktop);
    padding-bottom: var(--box-padding-bottom-desktop);
    padding-left: 56px;
    padding-right: 56px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.199);
}

/* TITLE */
.exp-white-title {
    font-family: 'Norwester';
    font-size: 32px;
    letter-spacing: 3px;
    margin-bottom: 18px;
    color: #1f2d2b;
}

/* DESC */
.exp-white-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    line-height: 1.9;
    color: #4a4a4a;
    text-align: justify;
}

/* =====================================================
   DESKTOP ONLY (≥992px)
===================================================== */

@media (min-width: 992px) {

    /* TEXT MASUK KE IMAGE */
    .exp-white-content {
        margin-left: -150px;
        z-index: 2;

        max-width: 750px;
    }

    /* IMAGE SIZE CONTROL */
    .exp-white-image {
        max-width: 780px;
    }

    .exp-white-image img {
        height: 580px;
        object-fit: cover;
    }
}

/* =====================================================
   TABLET & MOBILE (≤991px)
===================================================== */

@media (max-width: 991px) {

    .exp-white-inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding: var(--section-padding-tablet) 20px;
    }

    /* URUTAN */
    .exp-white-content {
        order: 1;

        padding-top: var(--box-padding-top-tablet);
        padding-bottom: var(--box-padding-bottom-tablet);
        padding-left: 44px;
        padding-right: 44px;
    }

    .exp-white-image {
        order: 2;
    }

    .exp-white-title {
        font-size: 32px;
        text-align: center;
    }
}

/* =====================================================
   MOBILE (≤576px)
===================================================== */

@media (max-width: 576px) {

    .exp-white-inner {
        padding: var(--section-padding-mobile) 20px;
    }

    .exp-white-content {
        padding-top: var(--box-padding-top-mobile);
        padding-bottom: var(--box-padding-bottom-mobile);
        padding-left: 28px;
        padding-right: 28px;

        box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    }

    .exp-white-title {
        font-size: 26px;
    }

    .exp-white-desc {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .exp-white-inner {
        padding: var(--section-padding-tablet) 0px;
    }
}

@media (max-width: 576px) {
    .exp-white-inner {
        padding: var(--section-padding-mobile) 0px;
    }
}



/* =====================================================
   EXPERIENCE – SCROLL REVEAL ANIMATION
===================================================== */

/* STATE AWAL (SEMBUNYI) */
.exp-white-image,
.exp-white-content,
.exp-white-title,
.exp-white-desc {
    opacity: 0;
    will-change: transform, opacity;
}

/* IMAGE DARI KIRI */
.exp-white-image {
    transform: translateX(-120px);
    transition: 
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* TEXT BOX DARI KANAN */
.exp-white-content {
    transform: translateX(120px);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.3s; /* 🔥 muncul setelah image */
}

/* TEXT DALAM BOX */
.exp-white-title,
.exp-white-desc {
    transform: translateY(24px);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =====================================================
   SAAT AKTIF (MUNCUL)
===================================================== */

.exp-white-section.is-visible .exp-white-image {
    opacity: 1;
    transform: translateX(0);
}

.exp-white-section.is-visible .exp-white-content {
    opacity: 1;
    transform: translateX(0);
}

.exp-white-section.is-visible .exp-white-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

.exp-white-section.is-visible .exp-white-desc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}

/* =====================================================
   MOBILE & TABLET – GERAK LEBIH HALUS
===================================================== */
@media (max-width: 991px) {
    .exp-white-image {
        transform: translateX(-80px);
    }

    .exp-white-content {
        transform: translateX(80px);
    }
}

@media (max-width: 576px) {
    .exp-white-image {
        transform: translateX(-60px);
    }

    .exp-white-content {
        transform: translateX(60px);
    }
}






/* =====================================================
   EXPERIENCE – REVERSE LAYOUT (IMG KANAN)
===================================================== */

.exp-reverse .exp-white-inner {
    direction: rtl; /* 🔥 trik aman */
}

.exp-reverse .exp-white-inner > * {
    direction: ltr;
}

/* =====================================================
   TEXT BOX MASUK KE IMAGE – REVERSE SECTION (DESKTOP)
===================================================== */

@media (min-width: 992px) {

    .exp-reverse .exp-white-content {
        margin-right: -150px;   /* 🔥 MASUK KE DALAM IMAGE */
        z-index: 2;             /* pastikan di atas image */
    }

}