/* ==========================================================================
   FetaBeauty Academy — Landing Page Katalog Kelas
   Art direction: editorial, luxury, clean beauty, modern fashion magazine
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
    --color-ink: #111111;
    --color-bg: #F7F4EF;
    --color-gold: #B88A3B;
    --color-muted: #6F6F6F;
    --color-white: #FFFFFF;

    /* Sistem background premium — layer tone & glow */
    --bg-base: #FFFDFC;
    --bg-ivory: #FAF7F3;
    --bg-cream: #F8F4F0;
    --bg-champagne: #F4ECE3;
    --bg-blush: #F6F1EC;
    --glow-gold: rgba(196, 163, 108, 0.05);
    --glow-cream: rgba(244, 232, 220, 0.14);

    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Inter", -apple-system, sans-serif;

    --text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --text-hero: clamp(3rem, 8vw, 7.5rem);
    --text-h2: clamp(2.25rem, 1.5rem + 3.5vw, 4.25rem);
    --text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);

    --space-section: clamp(5rem, 3.5rem + 7vw, 11rem);
    --space-head: clamp(2.5rem, 2rem + 3vw, 5rem);

    --radius-img: 1rem;
    --hairline: 1px solid rgba(17, 17, 17, 0.14);

    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --header-height: 5rem;
    --container-max: 82.5rem;
    --container-pad: clamp(1.25rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-padding-top: calc(var(--header-height) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    /* Layer 1-6: base putih hangat + ambient studio light yang hampir tak terlihat */
    background-color: var(--bg-base);
    background-image:
        radial-gradient(82rem 52rem at 50% -12%, rgba(250, 247, 243, 0.44), transparent 74%),
        radial-gradient(54rem 36rem at -12% 9%, var(--glow-cream), transparent 76%),
        radial-gradient(46rem 32rem at 110% 5%, rgba(244, 236, 227, 0.16), transparent 74%),
        radial-gradient(42rem 30rem at 104% 18%, var(--glow-gold), transparent 76%),
        radial-gradient(68rem 38rem at 50% 66%, rgba(248, 244, 240, 0.12), transparent 78%),
        linear-gradient(
            180deg,
            var(--bg-ivory) 0%,
            var(--bg-base) 18%,
            var(--bg-cream) 36%,
            var(--bg-base) 54%,
            var(--bg-ivory) 78%,
            var(--bg-base) 100%
        );
    background-repeat: no-repeat;
    background-position:
        50% -8rem,
        -8rem 8rem,
        calc(100% + 7rem) 4rem,
        calc(100% + 6rem) 18rem,
        50% 66%,
        0 0;
    background-size:
        82rem 52rem,
        54rem 36rem,
        46rem 32rem,
        42rem 30rem,
        68rem 38rem,
        100% 100%;
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    animation: page-background-drift 38s ease-in-out infinite alternate;
}

/* Layer 7: noise monochrome sangat tipis agar background tidak datar */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
    opacity: 0.01;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 96px 96px;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

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

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4 {
    font-weight: 500;
    line-height: 1.08;
}

:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

::selection {
    background-color: var(--color-gold);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container-narrow {
    max-width: 56rem;
}

.section {
    padding-block: calc(var(--space-section) / 2);
}

/* --------------------------------------------------------------------------
   Ritme tone antar section — perubahan 2–3%, nyaris tak terlihat.
   Section tanpa aturan di sini mengikuti gradient body (base).
   -------------------------------------------------------------------------- */
.section-peluang,
.section-pengajar,
.section-roadmap,
.section-keunggulan,
.section-faq {
    background:
        linear-gradient(180deg, rgba(255, 253, 252, 0.98), rgba(255, 255, 255, 0.99));
}

.section-solusi,
.section-compare {
    background:
        radial-gradient(60rem 28rem at 50% 0%, rgba(244, 232, 220, 0.08), transparent 72%),
        linear-gradient(180deg, rgba(248, 244, 240, 0.86), rgba(255, 253, 252, 0.9) 50%, rgba(248, 244, 240, 0.84));
}

.section-kelas {
    background:
        radial-gradient(58rem 28rem at 50% 8%, rgba(244, 236, 227, 0.11), transparent 74%),
        linear-gradient(180deg, rgba(250, 247, 243, 0.9), rgba(255, 253, 252, 0.88) 48%, rgba(250, 247, 243, 0.88));
}

.section-cerita {
    background:
        radial-gradient(54rem 28rem at 50% 0%, rgba(244, 232, 220, 0.1), transparent 72%),
        linear-gradient(180deg, rgba(246, 241, 236, 0.86), rgba(255, 253, 252, 0.82) 50%, rgba(246, 241, 236, 0.84));
}

.section-cta {
    background:
        radial-gradient(62rem 30rem at 50% 100%, rgba(244, 232, 220, 0.12), transparent 76%),
        linear-gradient(180deg, rgba(250, 247, 243, 0.94), rgba(255, 253, 252, 0.88));
    position: relative;
    isolation: isolate;
}

/* Layer 5: warm cream glow di area tengah bawah halaman */
.section-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(52rem 26rem at 50% 100%, var(--glow-cream), transparent 72%);
    animation: bg-glow-corners 38s ease-in-out infinite alternate;
}

.site-footer {
    background:
        linear-gradient(180deg, rgba(255, 253, 252, 0.96), rgba(255, 255, 255, 0.99));
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 1.25rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 500;
    line-height: 1.06;
    color: var(--color-ink);
    max-width: 20ch;
}

.section-title em {
    font-style: italic;
    font-weight: 500;
}

.section-lead {
    color: var(--color-muted);
    max-width: 46rem;
    margin-top: 1.5rem;
}

.section-head {
    margin-bottom: var(--space-head);
}

.section-head-split {
    display: grid;
    gap: 1.5rem 3rem;
}

.section-head-split .section-lead {
    margin-top: 0;
}

@media (min-width: 64rem) {
    .section-head-split {
        grid-template-columns: 7fr 5fr;
        align-items: end;
    }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.9375rem 2rem;
    border-radius: 999px;
    border: 1px solid var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        color var(--duration-fast) ease;
}

.btn-solid {
    background-color: var(--color-ink);
    color: var(--color-bg);
}

.btn-solid:hover {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-ink);
}

.btn-outline:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.btn-light {
    background-color: var(--color-bg);
    border-color: var(--color-bg);
    color: var(--color-ink);
}

.btn-light:hover {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Header / navbar
   -------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition:
        background-color var(--duration-normal) ease,
        border-color var(--duration-normal) ease;
}

.site-header.is-scrolled {
    background-color: var(--bg-base);
    border-bottom: var(--hairline);
}

.header-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4375rem;
    white-space: nowrap;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: 0.01em;
}

.brand-sub {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.site-nav {
    display: none;
    align-items: center;
    gap: 2.25rem;
}

.site-nav a {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-ink);
    position: relative;
    padding-block: 0.25rem;
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-normal) var(--ease-out);
}

.site-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header-cta {
    display: none;
    padding: 0.6875rem 1.5rem;
    font-size: 0.875rem;
}

/* Hamburger */
.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4375rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.625rem;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle-line {
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: var(--color-ink);
    transition: transform var(--duration-normal) var(--ease-out);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-line:first-child {
    transform: translateY(4.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-line:last-child {
    transform: translateY(-4.5px) rotate(-45deg);
}

/* Mobile menu */
.mobile-menu {
    background-color: var(--bg-base);
    border-bottom: var(--hairline);
    padding: 0.5rem var(--container-pad) 2rem;
}

.mobile-menu nav {
    display: flex;
    flex-direction: column;
}

.mobile-menu nav > a:not(.mobile-menu-cta) {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-ink);
    padding-block: 0.75rem;
    border-bottom: var(--hairline);
}

.mobile-menu nav > a:not(.mobile-menu-cta):last-of-type {
    border-bottom: none;
}

.mobile-menu-cta {
    margin-top: 1.25rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-bg);
}

@media (min-width: 64rem) {
    .site-nav {
        display: flex;
    }

    .header-cta {
        display: inline-flex;
    }

    .menu-toggle,
    .mobile-menu {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Hero — headline full-width ala majalah, konten kiri + foto kanan
   -------------------------------------------------------------------------- */
.hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: calc(var(--header-height) + clamp(1.5rem, 4vh, 3rem)) clamp(2.5rem, 6vh, 4rem);
    background-color: var(--bg-ivory);
    background-image:
        radial-gradient(68rem 42rem at 9% -8%, rgba(244, 232, 220, 0.18), transparent 75%),
        radial-gradient(54rem 36rem at 95% -4%, rgba(244, 236, 227, 0.18), transparent 76%),
        radial-gradient(46rem 30rem at 88% 20%, var(--glow-gold), transparent 78%),
        linear-gradient(180deg, rgba(250, 247, 243, 0.98), rgba(255, 253, 252, 0.9));
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Layer 2: ambient light besar di belakang hero */
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -12%;
    left: 50%;
    width: min(72vw, 62rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle at 46% 42%,
        rgba(244, 232, 220, 0.88) 0%,
        rgba(244, 236, 227, 0.42) 38%,
        rgba(196, 163, 108, 0.18) 52%,
        transparent 68%
    );
    filter: blur(220px);
    opacity: 0.12;
    transform: translateX(-50%);
    animation: bg-glow-hero 34s ease-in-out infinite alternate;
}

/* Layer 3 & 4: warm cream glow kiri atas + soft gold glow kanan atas */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(46rem 30rem at 6% 0%, rgba(244, 232, 220, 0.12), transparent 72%),
        radial-gradient(40rem 28rem at 94% 4%, rgba(244, 236, 227, 0.14), transparent 74%),
        radial-gradient(34rem 24rem at 86% 20%, var(--glow-gold), transparent 76%);
    animation: bg-glow-corners 40s ease-in-out infinite alternate;
}

@keyframes bg-glow-hero {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(calc(-50% + 8px)) translateY(-7px);
    }
}

@keyframes bg-glow-corners {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-7px, 6px, 0);
    }
}

@keyframes page-background-drift {
    from {
        background-position:
            50% -8rem,
            -8rem 8rem,
            calc(100% + 7rem) 4rem,
            calc(100% + 6rem) 18rem,
            50% 66%,
            0 0;
    }
    to {
        background-position:
            calc(50% + 6px) calc(-8rem + 6px),
            calc(-8rem + 7px) calc(8rem - 5px),
            calc(100% + 7rem - 6px) calc(4rem + 5px),
            calc(100% + 6rem - 5px) calc(18rem + 6px),
            calc(50% - 5px) calc(66% + 8px),
            0 0;
    }
}

@media (max-width: 64rem) {
    /* Blur lebih ringan di layar kecil demi 60fps */
    .hero::before {
        filter: blur(120px);
    }

    body {
        background-size:
            54rem 36rem,
            36rem 28rem,
            34rem 26rem,
            30rem 24rem,
            44rem 30rem,
            100% 100%;
        animation-duration: 52s;
    }
}

.hero-title {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.015em;
}

.hero-title em {
    font-style: italic;
}

.hero-grid {
    display: grid;
    gap: 2.5rem;
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
    padding-top: clamp(1.25rem, 2.5vh, 2rem);
    border-top: var(--hairline);
}

.hero-lead {
    color: var(--color-muted);
    max-width: 40rem;
    font-size: 1rem;
    line-height: 1.65;
}

.hero-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem 2rem;
    margin-top: 1.5rem;
    max-width: 36rem;
}

@media (min-width: 30rem) {
    .hero-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hero-features li {
    font-size: 0.9375rem;
    font-weight: 500;
    padding-left: 1.125rem;
    position: relative;
}

.hero-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: var(--color-gold);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.hero-figure {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-media {
    overflow: hidden;
    border-radius: var(--radius-img);
    aspect-ratio: 4 / 3;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
}

.hero-caption {
    font-size: 0.875rem;
    color: var(--color-muted);
    padding-left: 1rem;
    border-left: 1px solid var(--color-gold);
    max-width: 24rem;
}

@media (min-width: 64rem) {
    .hero-grid {
        grid-template-columns: 7fr 5fr;
        gap: 5rem;
        align-items: stretch;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hero-figure {
        align-self: stretch;
    }

    .hero-media {
        flex: 1;
        aspect-ratio: auto;
        min-height: 20rem;
    }
}

/* --------------------------------------------------------------------------
   Section scaffolding (disempurnakan per tahap)
   -------------------------------------------------------------------------- */

/* Peluang */
.peluang-list {
    display: grid;
    gap: 2.5rem;
}

.peluang-item {
    padding-top: 1.75rem;
    border-top: var(--hairline);
}

.peluang-number {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
    font-style: italic;
    color: var(--color-gold);
    line-height: 1;
}

.peluang-item h3 {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    margin-block: 1rem;
    max-width: 16ch;
}

.peluang-item p {
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.pull-quote {
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 1.2rem + 2.2vw, 2.75rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.25;
    max-width: 44rem;
    margin-top: var(--space-head);
    position: relative;
    padding-top: 1.75rem;
}

.pull-quote::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3.5rem;
    height: 1px;
    background-color: var(--color-gold);
}

@media (min-width: 48rem) {
    .peluang-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }

    .pull-quote {
        margin-left: auto;
        margin-right: clamp(0rem, 4vw, 4rem);
    }
}

/* Split (Solusi & Pengajar) */
.split-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.split-content p {
    color: var(--color-muted);
    margin-top: 1.25rem;
    max-width: 34rem;
}

.split-content p strong {
    color: var(--color-ink);
    font-weight: 600;
}

.split-figure img {
    width: 100%;
    border-radius: var(--radius-img);
    object-fit: cover;
}

[data-parallax] {
    overflow: hidden;
    border-radius: var(--radius-img);
}

.figure-arch,
.figure-arch[data-parallax] {
    border-radius: 50% 50% var(--radius-img) var(--radius-img) / 32% 32% var(--radius-img) var(--radius-img);
    overflow: hidden;
}

.figure-arch img {
    border-radius: 0;
}

.section-pengajar .figure-arch {
    aspect-ratio: 4 / 5;
    max-width: 34rem;
    margin-inline: auto;
}

.section-pengajar .figure-arch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}

.line-list {
    margin-top: 2rem;
    max-width: 34rem;
}

.line-list li {
    padding-block: 0.875rem;
    border-top: var(--hairline);
    font-weight: 500;
}

.line-list li:last-child {
    border-bottom: var(--hairline);
}

@media (min-width: 64rem) {
    .split-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
    }

    .split-grid-reverse {
        grid-template-columns: 5fr 7fr;
    }
}

/* Kelas */
.section-kelas .section-head {
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 64rem) {
    /* Lebih ringkas agar head + card + tombol checkout muat di viewport
       selama section ter-pin */
    .section-kelas .section-title {
        font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem);
        max-width: none;
    }
}

.course-list {
    display: grid;
    gap: 2.5rem;
}

.course-card {
    background-color: var(--color-white);
    border-radius: var(--radius-img);
    box-shadow: 0 30px 70px rgba(25, 20, 18, 0.05);
    overflow: hidden;
}

.course-media {
    overflow: hidden;
}

.course-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 600ms var(--ease-out);
}

.course-card:hover .course-media img {
    transform: scale(1.04);
}

.course-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.course-title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-desc {
    margin-top: 0.5rem;
    color: var(--color-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1rem;
    padding: 0.5rem 1.0625rem;
    border: 1px solid var(--color-gold);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-gold);
    background-color: transparent;
    text-decoration: none;
    transition:
        background-color var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        color var(--duration-fast) ease;
}

.course-cta::after {
    content: "\2197";
    font-size: 0.95em;
    line-height: 1;
}

.course-cta:hover {
    background-color: var(--color-gold);
    color: var(--color-white);
}

.kelas-banner {
    margin-top: var(--space-head);
    padding-top: 2rem;
    border-top: var(--hairline);
}

.kelas-banner h3 {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    max-width: 30ch;
}

.kelas-banner p {
    color: var(--color-muted);
    margin-top: 0.5rem;
}

@media (min-width: 48rem) {
    .course-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }

    .course-card {
        flex: 0 1 calc((100% - 2rem) / 2);
    }
}

@media (min-width: 64rem) {
    .course-card {
        flex: 0 1 calc((100% - 4rem) / 3);
    }
}

/* Katalog: carousel geser di mobile — hemat ruang, satu kartu fokus */
@media (max-width: 47.99rem) {
    .course-list {
        display: flex;
        grid-template-columns: none;
        gap: 0.875rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* full-bleed keluar dari padding container agar peek menyentuh tepi layar */
        margin-inline: calc(-1 * var(--container-pad));
        padding-inline: 9%;
        padding-block: 0.5rem 0.25rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .course-list::-webkit-scrollbar {
        display: none;
    }

    .course-card {
        flex: 0 0 82%;
        scroll-snap-align: center;
    }

    /* Efek fokus: kartu di tengah membesar penuh, tetangganya sedikit menyusut.
       Pakai scroll-driven animation (property `scale` agar tak bentrok reveal). */
    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: view(inline)) {
            .course-card {
                animation: courseCardFocus linear both;
                animation-timeline: view(inline);
                animation-range: cover 8% cover 92%;
            }
        }
    }

    /* Titik indikator posisi carousel */
    .course-dots:not([hidden]) {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    .course-dots button {
        width: 0.5rem;
        height: 0.5rem;
        padding: 0;
        border: none;
        border-radius: 999px;
        background-color: rgba(25, 20, 18, 0.18);
        cursor: pointer;
        transition:
            width var(--duration-normal) var(--ease-out),
            background-color var(--duration-normal) ease;
    }

    .course-dots button[aria-selected="true"] {
        width: 1.5rem;
        background-color: var(--color-gold);
    }
}

@keyframes courseCardFocus {
    0%,
    100% {
        scale: 0.9;
    }
    50% {
        scale: 1;
    }
}

/* Roadmap */
.roadmap-list {
    border-top: var(--hairline);
}

.roadmap-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: baseline;
    padding-block: 1.75rem;
    border-bottom: var(--hairline);
}

.roadmap-number {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    font-style: italic;
    color: var(--color-gold);
    line-height: 1;
}

.roadmap-body h3 {
    font-family: var(--font-display);
    font-size: var(--text-h3);
}

.roadmap-body p {
    color: var(--color-muted);
    margin-top: 0.375rem;
    max-width: 40rem;
}

@media (min-width: 64rem) {
    .roadmap-step {
        grid-template-columns: 7rem 1fr;
        gap: 3rem;
        padding-block: 2.25rem;
    }

    .roadmap-body {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: 3rem;
        align-items: baseline;
    }

    .roadmap-body h3 {
        max-width: 14ch;
    }

    .roadmap-body p {
        margin-top: 0;
    }
}

/* Komparasi */
.compare-grid {
    display: grid;
    gap: 3rem;
    border-top: var(--hairline);
    padding-top: 2.5rem;
}

.compare-col h3 {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    margin-bottom: 1.25rem;
}

.compare-col li {
    padding-block: 0.75rem;
    border-bottom: var(--hairline);
    padding-left: 1.5rem;
    position: relative;
    color: var(--color-muted);
}

.compare-offline li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--color-muted);
}

.compare-online li {
    color: var(--color-ink);
    font-weight: 500;
}

.compare-online li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-gold);
}

.compare-flag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 0.75rem;
}

@media (min-width: 48rem) {
    .compare-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .compare-offline {
        padding-right: clamp(2rem, 4vw, 4rem);
        border-right: var(--hairline);
    }

    .compare-online {
        padding-left: clamp(2rem, 4vw, 4rem);
    }
}

/* Keunggulan */
.keunggulan-grid {
    display: grid;
    gap: 2.5rem 2rem;
    border-top: var(--hairline);
    padding-top: 2.5rem;
}

.keunggulan-grid li::before {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    background-color: var(--color-gold);
    margin-bottom: 1rem;
}

.keunggulan-grid h3 {
    font-family: var(--font-display);
    font-size: var(--text-h3);
}

.keunggulan-grid p {
    color: var(--color-muted);
    font-size: 0.9375rem;
    margin-top: 0.5rem;
    max-width: 22rem;
}

@media (min-width: 30rem) {
    .keunggulan-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .keunggulan-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4rem;
    }
}

/* CTA akhir */
.cta-panel {
    background-color: var(--color-ink);
    color: var(--color-bg);
    border-radius: var(--radius-img);
    overflow: hidden;
    display: grid;
}

.cta-content {
    padding: clamp(2.5rem, 2rem + 3vw, 5rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.cta-content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 1.4rem + 2.5vw, 3.25rem);
    line-height: 1.1;
}

.cta-content p {
    color: rgba(247, 244, 239, 0.75);
    margin-top: 1.25rem;
    max-width: 30rem;
}

.cta-content .btn {
    margin-top: 2rem;
}

.cta-figure {
    min-height: 18rem;
}

.cta-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 48rem) {
    .cta-panel {
        grid-template-columns: 1fr 1fr;
    }
}

/* FAQ */
.faq-list {
    border-top: var(--hairline);
}

.faq-item {
    border-bottom: var(--hairline);
}

.faq-item summary {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
    font-weight: 500;
    padding-block: 1.5rem;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 3rem;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary {
    transition: color var(--duration-fast) ease;
}

.faq-item summary:hover {
    color: var(--color-gold);
}

.faq-answer {
    overflow: hidden;
}

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.375rem;
    color: var(--color-gold);
    transition: transform var(--duration-normal) var(--ease-out);
}

.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-answer {
    padding-bottom: 1.75rem;
    color: var(--color-muted);
    max-width: 46rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    border-top: var(--hairline);
    padding-block: clamp(3rem, 2.5rem + 3vw, 5.5rem) 2rem;
}

.footer-grid {
    display: grid;
    gap: 3rem;
}

.footer-brand p {
    color: var(--color-muted);
    font-size: 0.9375rem;
    margin-top: 1.25rem;
    max-width: 18rem;
}

.footer-social {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: var(--hairline);
    border-radius: 50%;
    color: var(--color-ink);
    transition:
        border-color var(--duration-fast) ease,
        color var(--duration-fast) ease;
}

.footer-social a:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.footer-menu h4,
.footer-contact h4 {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 1.25rem;
}

.footer-menu li,
.footer-contact li {
    padding-block: 0.375rem;
}

.footer-menu a,
.footer-contact a {
    color: var(--color-muted);
    font-size: 0.9375rem;
    transition: color var(--duration-fast) ease;
}

.footer-menu a:hover,
.footer-contact a:hover {
    color: var(--color-gold);
}

.footer-bottom {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: var(--hairline);
}

.footer-bottom sup {
    font-size: 0.55em;
    vertical-align: super;
    line-height: 0;
}

.footer-bottom-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
}

.footer-wordmark {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-ink);
}

.footer-wordmark span {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin-left: 0.25rem;
}

.footer-copyright {
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.footer-legal {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-muted);
    max-width: 48rem;
    margin-inline: auto;
}

@media (min-width: 48rem) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 4rem;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}