/* =========================================================
   AL-TAFSIR PUBLIC LANDING — L07 FINAL
   Locked DNA: dark, warm, scholarly, spacious, premium.
   Charcoal surfaces, muted antique gold accent.
   Struktur L07: nav ringan → hero cinematic → intro tunggal
   → alur riset (tiga capture produk nyata) → pre-footer
   closed beta → footer. Whitespace adalah bagian desain.
   Semua warna via token user-chat.css (html scope) agar
   tema koheren.
   ========================================================= */


/* =========================================================
   1. TIPOGRAFI EDITORIAL (scope landing saja:
   Cormorant Garamond untuk display, Inter untuk UI)

   FONT IDENTITAS DI-HOST SENDIRI (OFL, latin subset):
   Cormorant Garamond variable + italic, Inter variable.
   Font di-preload di <head> sehingga hadir sebelum paint
   pertama — tanpa FOUT, tanpa reflow saat swap (audit P2:
   dokumen pernah bergeser 92-152px saat font Google tiba).
   Stack tetap menyertakan fallback lokal untuk kasus lampir.
   ========================================================= */

@font-face {

    font-family:
        "Cormorant Garamond";

    src:
        url("/static/fonts/cormorant-garamond-latin.woff2") format("woff2");

    font-weight:
        400 600;

    font-style:
        normal;

    font-display:
        swap;

    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}


@font-face {

    font-family:
        "Cormorant Garamond";

    src:
        url("/static/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");

    font-weight:
        400;

    font-style:
        italic;

    font-display:
        swap;

    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}


@font-face {

    font-family:
        "Inter";

    src:
        url("/static/fonts/inter-latin.woff2") format("woff2");

    font-weight:
        100 900;

    font-style:
        normal;

    font-display:
        swap;

    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}


.landing-page {

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.landing-tagline,

.intro-line,

.intro-about,

.flow-title,

.prefooter-title {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;
}


.landing-tagline {

    font-weight:
        500;
}


/* Landing dipaksa dark (W10): muted-soft dinaikkan satu langkah
   agar teks kecil footer (13px) mencapai >= 4.5:1 di atas
   panel-soft (audit: 3.62:1 dengan #847A68; #99906F = 4.79:1).
   Override di scope landing saja — token workspace tak tersentuh. */

html[data-theme="dark"] {

    --muted-soft:
        #99906F;
}


/* =========================================================
   2. NAVIGATION — L07: bar ringan. Height/padding/visual
   weight dkecilkan; di atas hero nav transparan melayang
   di atas atmosfer, menyatu dengan scene. Setelah hero:
   veil hangat + hairline (bukan blok solid besar).
   ========================================================= */

.landing-nav {

    position:
        sticky;

    top:
        0;

    z-index:
        20;

    /* L07: transparan agar hero bernafas di bawahnya.
       .is-scrolled menaikkan veil tipis + hairline. */

    background:
        transparent;

    border-bottom:
        1px solid transparent;

    transition:
        background .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}


.landing-nav.is-scrolled {

    background:
        rgba(25, 21, 18, .88);

    border-bottom-color:
        var(--border-soft);

    box-shadow:
        0 10px 28px rgba(25, 21, 18, .16);
}


html[data-theme="light"] .landing-nav.is-scrolled {

    background:
        rgba(247, 241, 222, .9);

    box-shadow:
        0 10px 28px rgba(59, 36, 28, .10);
}


.landing-nav-inner {

    max-width:
        1080px;

    margin:
        0 auto;

    /* L07: padding vertikal 20px → 11px — bar terasa tipis. */

    padding:
        11px 28px;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;
}


/* L03: brand kiri = qalam mark kompak (PNG authoritative). */

.landing-brand {

    justify-self:
        start;

    display:
        inline-flex;

    align-items:
        center;

    text-decoration:
        none;
}


/* L09: brand topbar kini qalam mark rounded-rectangle (asset
   existing qalam-mark-256.png) — simetris dengan mark sidebar,
   kontras jelas di atas scene gelap. */

.landing-brand .brand-qalam-mark {

    height:
        26px;

    width:
        auto;

    display:
        block;

    border-radius:
        6px;
}


.landing-links {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

    justify-self:
        center;
}


.landing-link {

    font-size:
        14px;

    color:
        var(--muted);

    text-decoration:
        none;

    transition:
        color .2s ease;
}


.landing-link:hover {

    color:
        var(--text);
}


.landing-nav-actions {

    justify-self:
        end;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;
}


/* Menu mobile kompak (PRD §9: compact top bar + drawer).
   Desktop: tersembunyi — tautan anchor inline sudah cukup. */

.landing-menu-btn {

    display:
        none;

    min-width:
        44px;

    min-height:
        44px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 12px;

    background:
        transparent;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    font:
        inherit;

    font-size:
        13px;

    color:
        var(--text);

    cursor:
        pointer;
}


.landing-menu {

    position:
        absolute;

    top:
        56px;

    left:
        16px;

    right:
        16px;

    z-index:
        60;

    display:
        flex;

    flex-direction:
        column;

    padding:
        8px;

    background:
        var(--panel);

    border:
        1px solid var(--border);

    border-radius:
        12px;

    box-shadow:
        0 12px 32px rgba(25, 21, 18, .12);

    /* L03: reveal halus — opacity + translate pendek. */

    opacity:
        0;

    transform:
        translateY(-6px);

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.landing-menu.is-open {

    opacity:
        1;

    transform:
        translateY(0);
}


.landing-menu-cta {

    margin-top:
        6px;

    padding-top:
        14px;

    border-top:
        1px solid var(--border-soft);

    color:
        var(--accent) !important;

    font-weight:
        600;
}


.landing-menu[hidden] {

    display:
        none;
}


/* Target anchor: jangan sampai judul section tersembunyi
   di balik nav sticky yang kini lebih tipis. */

section[id] {

    scroll-margin-top:
        64px;
}


.landing-menu a {

    display:
        flex;

    align-items:
        center;

    min-height:
        44px;

    padding:
        0 14px;

    border-radius:
        8px;

    font-size:
        15px;

    color:
        var(--text);

    text-decoration:
        none;
}


.landing-menu a:hover {

    background:
        var(--panel-soft);
}


/* L07: CTA nav mengikuti bar yang tipis — visual weight
   turun; tap target tetap layak. */

.landing-nav-actions .landing-cta {

    min-height:
        38px;

    padding:
        0 18px;
}


/* =========================================================
   3. CTA
   ========================================================= */

.landing-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    font-size:
        14px;

    font-weight:
        600;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.landing-cta-solid {

    background:
        var(--accent);

    color:
        #191512;

    border:
        1px solid var(--accent);
}


.landing-cta-solid:hover {

    background:
        var(--accent-dark);

    border-color:
        var(--accent-dark);
}


.landing-cta-lg {

    padding:
        14px 30px;

    font-size:
        15px;
}


/* =========================================================
   4. MAIN CONTAINER + HERO SINEMATIK (L06, L07 tuning)
   Lapisan: perpustakaan (atmosfer) → perangkat riset (fokus)
   → kitab foreground (kedalaman transisi). Scroll menenggelamkan
   scene secara progresif: CSS menghitung semua efek dari satu
   custom property (--hero-fade) yang ditulis JS. Tanpa
   parallax, tanpa layout shift, reversible.
   ========================================================= */

/* L06: kliping di root halaman — foreground boleh melebihi
   konten namun tak pernah memicu overflow-x di level dokumen.
   overflow:clip tidak menciptakan scroll container — sticky
   nav tetap bekerja normal. Landing transparan: latar charcoal
   disediakan body sehingga scene hero (z-index -1) tidak
   tertutup wrapper. */

.landing-page {

    overflow-x:
        clip;

    background:
        transparent;
}


.landing-main {

    max-width:
        1080px;

    margin:
        0 auto;

    padding:
        0 28px;
}


/* Sticky nav butuh html sebagai clip-x, body visible —
   bukan body sebagai scroll container (regression W4). */

html {

    overflow-x:
        clip;
}


body {

    overflow-x:
        visible;
}


.landing-hero {

    position:
        relative;

    isolation:
        isolate;

    /* L07: 172px → 140px — frame produk naik ±20% lebih atas
       dikombinasi margin visual di bawah. */

    padding:
        140px 0 0;

    /* Progres tenggelamnya scene — 0 (utuh) → 1 (tenggelam).
       Ditulis JS saat scroll; tanpa JS / reduced-motion tetap 0. */

    --hero-fade:
        0;
}


.hero-scene {

    position:
        absolute;

    /* Full-bleed keluar dari konten container hingga tepi viewport
       (inset horizontal = 50% konten − 50vw). Sisa px scrollbar
       dipotong html clip-x — tidak pernah jadi overflow. */

    inset:
        -120px calc(50% - 50vw) 0;

    overflow:
        hidden;

    pointer-events:
        none;

    z-index:
        -1;

    /* L11: hero environment "ditinggalkan" — scene turun pelan
       (sink 40px) mengikuti progres fade yang sudah ada.
       Reversibel, tanpa listener baru (satu --hero-fade). */

    transform:
        translateY(calc(var(--hero-fade, 0) * 40px));
}


/* L11: jahitan hero → intro — dasar scene melebur ke charcoal
   sebelum tepi section; makin kuat saat scene tenggelam. */

.hero-scene::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        170px;

    background:
        linear-gradient(180deg,
            rgba(25, 21, 18, 0),
            #191512);

    opacity:
        calc(.3 + var(--hero-fade, 0) * .7);

    pointer-events:
        none;
}


.hero-bg {

    position:
        absolute;

    inset:
        0;

    /* Veil gelap hangat di atas foto: menyatukan foto dengan
       charcoal halaman + menjaga kontras teks. Dasar scene
       melebur ke --bg agar tepi bawah tak terlihat — inilah
       gradient transisi natural menuju intro. */

    background:
        linear-gradient(180deg,
            rgba(25, 21, 18, .26) 0%,
            rgba(25, 21, 18, .34) 45%,
            rgba(25, 21, 18, .78) 88%,
            #191512 100%),
        url("/static/assets/landing/hero-library.jpg")
            center 30% / cover no-repeat;

    opacity:
        calc(1 - var(--hero-fade) * 1);
}


/* Lapisan penggelap terpisah: mengikuti scroll, scene perlahan
   "tenggelam" ke charcoal halaman sebelum intro menyambut. */

.hero-depth {

    position:
        absolute;

    inset:
        0;

    background:
        var(--bg);

    opacity:
        calc(var(--hero-fade) * .92);
}


.landing-tagline {

    /* L08: blok teks di tengah komposisi — satu poros dengan
       intro & judul alur di bawahnya. */

    margin:
        30px auto 0;

    max-width:
        660px;

    text-align:
        center;

    font-size:
        clamp(25px, 2.9vw, 35px);

    line-height:
        1.32;

    letter-spacing:
        .2px;

    color:
        var(--text);

    text-wrap:
        balance;
}


.landing-tagline em {

    font-style:
        italic;

    color:
        var(--text);
}


/* L07: panggung produk — frame naik: margin atas 64px → 38px
   (dengan padding hero yang turun, posisi frame ±20% lebih
   tinggi dari state sebelumnya). */

.hero-visual {

    position:
        relative;

    margin:
        38px auto 0;

    max-width:
        880px;
}


.hero-visual .hero-stage-visual {

    position:
        relative;

    z-index:
        1;

    margin:
        0;

/* L18: konten hero ikut "ditinggalkan" saat scene tenggelam —
   device memudar mengikuti --hero-fade yang sama (sistem
   existing, reversibel, tanpa listener baru). Tanpa ini,
   baris capture tablet tetap terlihat di celah buku saat
   hero keluar viewport — seam hero→intro terasa kotor. */

    opacity:
        calc(1 - var(--hero-fade, 0) * 1);
}


/* Bayangan lantai di bawah perangkat — membumikan produk ke
   lantai perpustakaan di belakangnya. */

.hero-visual::after {

    content:
        "";

    position:
        absolute;

    inset:
        auto -14% -60px;

    height:
        120px;

    background:
        radial-gradient(50% 100% at 50% 32%,
            rgba(14, 12, 9, .38), transparent 72%);

    filter:
        blur(14px);

    z-index:
        0;
}


/* Foreground melebihi lebar viewport: kelompok buku hinggap di
   tepi layar, celah tengah asli asset tepat di belakang produk.
   L07: lapisan ini murni transisi hero — bukan storytelling
   section; tinggi dikurangi agar produk makin dominan. */

.hero-foreground {

    /* L09: geometri dihitung dari KONTEN asset — buku menempati
         pita y≈300..497 dari 724 (sisanya transparan, cek piksel).
         Container memuat SEMUA piksel tercatat lapisan terbesar
         sehingga tidak ada buku terpotong; lantai buku dipatok
         ~14px di atas dasar hero (terasa mengalas). */

    --books-w:
        max(1560px, 132vw);

    --books-imgh:
        calc(var(--books-w) / 3);

    position:
        absolute;

    left:
        50%;

    width:
        var(--books-w);

    height:
        calc(var(--books-imgh) * 0.63);

    bottom:
        calc(var(--books-imgh) * -0.3135 + 14px);

    overflow:
        hidden;

    transform:
        translateX(-50%);

    z-index:
        2;

    pointer-events:
        none;

    /* L18: lapisan buku foreground ikut memudar pada exit yang
       sama — buku terasa "ditinggalkan bersama ruangnya", bukan
       tertinggal melayang di atas charcoal. */

    opacity:
        calc(1 - var(--hero-fade, 0) * 1);
}


/* L08: scene kitab 3D — TIGA lapisan dari asset yang sama
   (bukan crop buatan). Kedalaman dibangun dengan skala +
   cahaya + fokus per lapisan: makin jauh makin besar, gelap,
   dan kabur (aerial perspective); makin dekat makin tajam,
   terang, dengan bayangan kontak ke perangkat. Semua lapisan
   berakar pada garis lantai yang sama sehingga terasa satu
   rak yang sama — bukan gambar tempelan. */

.hero-books-layer {

    position:
        absolute;

    left:
        50%;

    bottom:
        0;

    width:
        100%;

    transform-origin:
        50% 100%;
}


.hero-books-layer img {

    display:
        block;

    width:
        100%;

    height:
        auto;
}


/* L09: lapisan skala tentang tepi bawah — kompensasi translateY
   mematok LANTAI KONTEN buku tiap lapisan pada garis yang sama
   (nada lantai identik antar lapisan), sehingga kedalaman tetap
   terasa sementara seluruh konten tetap berada di dalam
   container: NOL buku terpotong. */

.hero-books-base {

    transform:
        translateX(-50%)
        translateY(calc(var(--books-imgh) * 0.0439))
        scale(1.14);

    filter:
        brightness(.5) saturate(.75)
        contrast(.96) blur(1.4px);

    opacity:
        calc(.85 - var(--hero-fade) * .55);
}


.hero-books-mid {

    transform:
        translateX(-50%)
        translateY(calc(var(--books-imgh) * 0.0188))
        scale(1.06);

    filter:
        brightness(.58) saturate(.88)
        blur(.4px);

    opacity:
        calc(.9 - var(--hero-fade) * .48);
}


.hero-books-front {

    transform:
        translateX(-50%);

    filter:
        brightness(.7) saturate(.98)
        drop-shadow(0 26px 30px rgba(8, 7, 5, .6));

    opacity:
        calc(.96 - var(--hero-fade) * .4);
}


/* ruang ke intro — bagian dari perjalanan scene yang tenggelam.
   L07: 120px → 88px, intro menyatu dengan hero (bukan section
   baru yang berdiri sendiri). */

/* L18: jeda napas antara panggung hero dan pernyataan intro —
   artwork selesai, ruang charcoal kosong, baru intro masuk.
   (Sebelumnya 88px; kini satu beat editorial yang jelas.) */

.landing-hero + .landing-intro {

    margin-top:
        260px;
}


/* =========================================================
   5. BINGKAI PERANGKAT (dipakai hero + flow)
   W13: presentasi iPad Air — landscape, bezel seragam
   proporsional, bodi almunium gelap netral, sudut melengkung
   konsisten dengan layar. Capture = workspace CURRENT.
   ========================================================= */

.stage-visual {

    position:
        relative;

    max-width:
        880px;

    perspective:
        1400px;
}


.stage-visual .stage-device {

    position:
        relative;

    padding:
        clamp(9px, 1.15vw, 16px);

    border-radius:
        clamp(18px, 2.1vw, 30px);

    background:
        linear-gradient(
            165deg,
            #3C332A,
            #2B241D 58%,
            #221C17
        );

    border:
        1px solid rgba(242, 234, 215, .14);

    box-shadow:
        0 40px 90px rgba(0, 0, 0, .5),
        0 4px 14px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 -1px 0 rgba(0, 0, 0, .45);
}


.stage-visual .stage-device::after {

    /* kamera depan: titik kecil di bezel atas (landscape) */

    content:
        "";

    position:
        absolute;

    top:
        clamp(3px, .45vw, 6px);

    left:
        50%;

    width:
        6px;

    height:
        6px;

    margin-left:
        -3px;

    border-radius:
        50%;

    background:
        rgba(10, 10, 12, .9);

    box-shadow:
        0 0 0 1.5px rgba(255, 255, 255, .07);
}


.stage-visual img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    /* radius layar = radius bodi − bezel, karakter iPad */

    border-radius:
        clamp(9px, 1.05vw, 15px);

    border:
        none;

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .55);
}


html[data-theme="light"] .stage-visual .stage-device {

    background:
        linear-gradient(
            165deg,
            #4A4138,
            #38312A 58%,
            #2B241D
        );

    border-color:
        rgba(242, 234, 215, .22);

    box-shadow:
        0 40px 90px rgba(59, 36, 28, .28),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}


/* kepingan kitab: latar buku di belakang capture —
   kedalaman tanpa fabricated imagery (blok warna + rule). */

.stage-visual::before,

.stage-visual::after {

    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    border:
        1px solid var(--border);

    background:
        var(--panel-soft);

    border-radius:
        10px;
}


.stage-visual::before {

    inset:
        26px -22px -26px 22px;

    transform:
        rotate(1.1deg);
}


.stage-visual::after {

    inset:
        12px -10px -12px 10px;

    transform:
        rotate(-.6deg);
}


/* =========================================================
   6. INTRO TUNGGAL (L07) — hero mengalir tanpa jeda ke
   perkenalan produk: nama, satu tagline kuat, satu kalimat
   tentang. Sisanya dipercayakan pada visual produk.
   ========================================================= */

.landing-intro {

    margin:
        96px auto 0;

    max-width:
        780px;

    text-align:
        center;
}


/* L06: heading intro — nama masuk sebelum tubuh editorial. */

/* L17: heading dikembalikan (PO) — "Al-TafsIR" sebagai heading utama. */

.intro-heading {

    margin:
        0 0 34px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(19px, 1.9vw, 24px);

    line-height:
        1.2;

    font-weight:
        500;

    letter-spacing:
        .3px;

    color:
        var(--text);
}


.intro-line {

    margin:
        0 0 34px;

    scroll-margin-top:
        120px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(24px, 3vw, 37px);

    line-height:
        1.3;

    font-weight:
        500;

    color:
        var(--text);
}


.intro-phrase {

    display:
        inline;

    color:
        var(--muted-soft);

    transition:
        color .5s ease;
}


.js .intro-phrase {

    opacity:
        .36;
}


.js .intro-phrase.is-lit {

    opacity:
        1;

    color:
        var(--text);
}


/* L09: struktur empat paragraf — kalimat, kalimat, kalimat
   inti, kalimat penutup. Satu warna off-white seragam
   (tidak ada lagi beat emas), satu center axis. */

/* L12: paragraf penutup kini SATU BAHASA dengan paragraf 1–2 —
   serif editorial yang sama, satu langkah di bawah skala yang
   sama; warna frase mengikuti sistem scroll-lit yang identik
   (dim → menyala). Motion, easing, ritme: karakter sama. */

/* L17: paragraf 3–4 naik ke TIER YANG SAMA dengan 1–2 —
   satu rangkaian editorial nyata, tanpa level yang turun.
   Ukuran kini identik dengan .intro-line (24px). */

.intro-about {

    margin:
        34px auto 0;

    font-size:
        clamp(24px, 3vw, 37px);

    line-height:
        1.3;

    letter-spacing:
        normal;

    font-weight:
        500;

    color:
        var(--text);
}


.intro-about + .intro-about {

    margin-top:
        34px;
}


.intro-about .intro-phrase {

    color:
        var(--muted-soft);
}


.js .intro-about .intro-phrase {

    opacity:
        .36;
}


.js .intro-about .intro-phrase.is-lit {

    opacity:
        1;

    color:
        var(--text);
}


/* =========================================================
   7. ALUR RISET — PRODUCT FLOW STORY (L07)
   Inti storytelling: NEW CHAT → PERTANYAAN + JAWABAN →
   JAWABAN + RUJUKAN. Tiga capture workspace CURRENT di
   bingkai tablet yang sama; copy minimal; gambar berbicara.
   ========================================================= */

.landing-flow {

    margin-top:
        190px;
}


.flow-head {

    max-width:
        none;

    text-align:
        center;
    margin-bottom: 20px;
}


.flow-kicker {

    margin:
        0;

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;

    color:
        var(--accent);
}


.flow-title {

    margin:
        18px 0 0;

    font-size:
        clamp(27px, 3vw, 38px);

    line-height:
        1.22;

    font-weight:
        500;

    color:
        var(--text);
}


/* Track vertikal: satu perjalanan ke bawah. Whitespace antar
   visual sengaja besar — ritme presentasi, bukan grid kartu.
   L15: ritme seragam — satu nilai gap untuk semua jeda beat;
   tanpa padding tambahan pada langkah mana pun. L16: ritme
   dinaikkan ke 190px agar jarak antar mockup terasa longgar
   dan SAMA di setiap jeda (PO: 02→03 menyusul 01→02, bukan
   sebaliknya). */

.flow-track {

    margin:
        88px 0 0;

    padding:
        0;

    list-style:
        none;

    display:
        flex;
    flex-direction:
        column;
    gap:
        190px;

    /* L16: ending beat — ruang kosong setelah mockup 03;
       user masih scroll sebelum pre-footer masuk. */

    padding-bottom:
        170px;
}


.flow-step {

    position:
        relative;
}


/* L10: scene lingkungan di belakang langkah kedua — foto
   perpustakaan asset existing, membentang SELEBAR VIEWPORT
   (full-bleed keluar container), bukan card dan bukan
   container; tablet tetap protagnis di atasnya. Whitespace
   ritme section tetap seperti sebelumnya. */

/* Frame flow: bingkai tablet sama dengan hero — tablet-sized
   workspace sebagai panggung utama komposisi. */

.flow-visual {

    margin:
        0 auto;

    max-width:
        980px;
}


/* =========================================================
   7b. FLOW STEP 02 — SATU COMPOSisi (L15/L17)
   Latar environmental/library milik pre-footer saja, dan
   ketiga mockup kini presentasi yang persis sama — satu ritme
   optikal di setiap jeda: inset sama, lebar sama, jarak sama.
   ========================================================= */


/* L17: ketiga langkah kini identik — satu bahasa presentasi.
   (Selector generik dipertahankan agar markup langkah tengah
   tidak perlu diubah.) */

.flow-step .flow-visual {

    margin:
        0 auto;

    max-width:
        980px;
}


.flow-visual .flow-device {

    position:
        relative;

    padding:
        clamp(10px, 1.25vw, 18px);

    border-radius:
        clamp(20px, 2.3vw, 34px);

    background:
        linear-gradient(
            165deg,
            #3C332A,
            #2B241D 58%,
            #221C17
        );

    border:
        1px solid rgba(242, 234, 215, .14);

    box-shadow:
        0 46px 100px rgba(0, 0, 0, .5),
        0 6px 18px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 -1px 0 rgba(0, 0, 0, .45);
}


.flow-visual .flow-device::after {

    content:
        "";

    position:
        absolute;

    top:
        clamp(3px, .5vw, 7px);

    left:
        50%;

    width:
        6px;

    height:
        6px;

    margin-left:
        -3px;

    border-radius:
        50%;

    background:
        rgba(10, 10, 12, .9);

    box-shadow:
        0 0 0 1.5px rgba(255, 255, 255, .07);
}


.flow-visual img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    border-radius:
        clamp(10px, 1.15vw, 17px);

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .55);
}


/* L20 — denyut "menyusun jawaban" pada beat 02 (live stage).
   Tiga titik tinta hangat di ruang kosong utas, persis di atas
   composer capture (area ini memang kosong di asset). Overlay
   di-position relatif thd device memakai persen dari layar
   capture, jadi ikut menskala dengan device di semua lebar.
   aria-hidden + pointer-events none + reduced-motion mati.
   Tidak menyentuh layout ritme: position absolute, tanpa
   pengaruh ke flow-track maupun timeline. */

.flow-stage-visual .flow-visual-activity {

    position:
        absolute;

    left:
        58.5%;

    bottom:
        20.5%;

    display:
        flex;

    gap:
        0.42%;

    width:
        4.5%;

    justify-content:
        center;

    pointer-events:
        none;
}


.flow-stage-visual .flow-visual-activity span {

    width:
        clamp(3px, 0.24vw, 5px);

    height:
        clamp(3px, 0.24vw, 5px);

    border-radius:
        50%;

    background:
        #7A5A4C;

    opacity:
        .35;

    animation:
        flow-compose 1.6s ease-in-out infinite;
}


.flow-stage-visual .flow-visual-activity span:nth-child(2) {

    animation-delay:
        .22s;
}


.flow-stage-visual .flow-visual-activity span:nth-child(3) {

    animation-delay:
        .44s;
}


@keyframes flow-compose {

    0%,
    100% {

        opacity:
            .3;

        transform:
            translateY(0);
    }

    45% {

        opacity:
            .85;

        transform:
            translateY(-2px);
    }
}


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

    .flow-stage-visual .flow-visual-activity {

        display:
            none;
    }

}


html[data-theme="light"] .flow-visual .flow-device {

    background:
        linear-gradient(
            165deg,
            #4A4138,
            #38312A 58%,
            #2B241D
        );

    border-color:
        rgba(242, 234, 215, .22);

    box-shadow:
        0 46px 100px rgba(59, 36, 28, .28),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}


/* =========================================================
   8. PRE-FOOTER CLOSED BETA (L07)
   Satu-satunya CTA beta. Bahasa visual se-rasa hero:
   charcoal hangat + sorot emas + atmosfer perpustakaan
   (veil pekat), memudar natural ke footer. Bukan card.
   ========================================================= */

.landing-prefooter {

    position:
        relative;

    isolation:
        isolate;

    /* L09: full-bleed kiri-kanan — section keluar dari container
         1080px .landing-main memakai margin negatif 50vw dengan
         guard 100vw (tanpa scrollbar overflow), lalu kontennya
         kembali ke lebar aman. Background kini menutup SELURUH
         area landscape, tanpa sisi kosong. */

    width:
        100vw;

    margin-left:
        calc(50% - 50vw);

    /* L16: jeda flow→pre-footer kini dibawa track (padding-bottom
       170px); margin section cukup 40px penyambut. */

    margin-top:
        80px;

    padding:
        170px 0 160px;

    text-align:
        center;

    overflow:
        hidden;
}


/* Scene pre-footer: LANJUTAN hero ke bawah — foto perpustakaan
   yang sama, crop lebih rendah (center 74%: rak bawah ruangan
   yang sama, seolah kamera menunduk), veil yang memunculkan
   foto di pita atas lalu kembali pekat di zona teks.
   Sorot lamplight pale-gold (identitas #E3C64F pada alpha
   sangat rendah) mengulang sumber cahaya hero dari atas.
   Tepi atas/bawah solid #191512 = latar halaman: tanpa seam
   ke story maupun footer. */

.landing-prefooter::before {

    content:
        "";

    /* KRITIS: position absolute — tanpa ini box pseudo = 0x0
       (inset diabaikan pada static) dan SELURUH scene foto
       tidak pernah terlukis (bug latent L09). */

    position:
        absolute;

    /* L09: full landscape — insek 0 (bukan inset negatif yang
         dipotong overflow:hidden). Section sendiri dibuat
         full-bleed; layer pseudo memuat seluruh area. */

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    /* L19/L21: foto paling terasa di pita 12–40% (setelah seam,
       sebelum judul, veil .58–.68 — setara band tengah hero);
       zona teks (≈47% ke bawah) terlindung veil ≥ .78; tepi
       bawah melebur penuh ke #191512 menyambung footer. */

    background:
    linear-gradient(180deg,
        #191512 0%,
        rgba(25, 21, 18, .96) 5%,
        rgba(25, 21, 18, .82) 12%,
        rgba(22, 18, 14, .58) 26%,
        rgba(22, 18, 14, .64) 38%,
        rgba(23, 19, 15, .80) 48%,
        rgba(23, 19, 15, .84) 62%,
        rgba(24, 20, 16, .92) 80%,
        #191512 100%),
    radial-gradient(90% 55% at 50% 0%,
        rgba(227, 198, 79, .07), transparent 70%),
    url("/static/assets/landing/hero-library.jpg")
        center 30% / cover no-repeat;

}


.prefooter-inner {

    max-width:
        680px;

    margin:
        0 auto;
}


.prefooter-title {

    margin:
        0;

    font-size:
        clamp(32px, 4.2vw, 50px);

    line-height:
        1.2;

    font-weight:
        500;

    color:
        var(--text);
}


.prefooter-lede {

    margin:
        20px auto 0;

    max-width:
        560px;

    font-size:
        17px;

    line-height:
        1.65;

    color:
        var(--muted);
}


.prefooter-actions {

    margin-top:
        38px;
}


/* =========================================================
   9. FOOTER
   ========================================================= */

.landing-footer {

    margin-top:
        0;

    padding:
        44px 28px 30px;

    border-top:
        1px solid var(--border);

    background:
        var(--panel-soft);
}


.landing-footer-inner {

    max-width:
        1080px;

    margin:
        0 auto;

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        space-between;

    gap:
        32px;
}


.landing-footer-logo {

    font-size:
        18px;

    font-weight:
        700;

    color:
        var(--text);
}


.landing-footer-brand p {

    margin:
        12px 0 0;

    max-width:
        420px;

    font-size:
        14px;

    line-height:
        1.6;

    color:
        var(--muted);
}


.landing-footer-nav {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.landing-footer-nav a {

    font-size:
        14px;

    color:
        var(--muted);

    text-decoration:
        none;

    transition:
        color .2s ease;
}


.landing-footer-nav a:hover {

    color:
        var(--accent);
}


.landing-footer-status {

    max-width:
        1080px;

    margin:
        34px auto 0;

    font-size:
        13px;

    color:
        var(--muted-soft);
}


/* =========================================================
   10. BRAND — WORDMARK PNG (W3)
   wordmark-primary.png adalah krem (permukaan gelap). Pada
   tema terang, tinta dikonversi via filter token bersama;
   footer panel gelap menampilkan wordmark otentik.
   ========================================================= */

img.brand-wordmark {

    height:
        22px;

    width:
        auto;

    display:
        block;
}


html[data-theme="light"] .landing-brand img.brand-wordmark,

html[data-theme="light"] .landing-footer-logo img.brand-wordmark {

    filter:
        var(--brand-ink-filter);
}


/* =========================================================
   11. FOCUS — pola workspace: outline emas
   ========================================================= */

.landing-brand:focus-visible,
.landing-link:focus-visible,
.landing-cta:focus-visible,
.landing-menu-btn:focus-visible,
.landing-menu a:focus-visible,
.landing-footer-nav a:focus-visible {

    outline:
        2px solid var(--star);

    outline-offset:
        2px;

    border-radius:
        6px;
}


.landing-cta:focus-visible {

    border-radius:
        999px;
}


/* =========================================================
   12. W6 — REVEAL FOUNDATION
   One-shot reveal via IntersectionObserver; stagger halus;
   hanya transform + opacity; hormati reduced-motion.
   Tanpa JS semua elemen tetap terlihat.
   ========================================================= */

.js [data-reveal] {

    opacity:
        0;

    transform:
        translateY(18px);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22, .61, .36, 1);

    transition-delay:
        var(--reveal-delay, 0ms);
}


.js [data-reveal].is-revealed {

    opacity:
        1;

    transform:
        none;
}


.js [data-reveal-group] > * {

    opacity:
        0;

    transform:
        translateY(18px);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22, .61, .36, 1);

    transition-delay:
        var(--reveal-delay, 0ms);
}


.js [data-reveal-group].is-revealed > * {

    opacity:
        1;

    transform:
        none;
}


/* Mobile: gerakan lebih pendek agar terasa tenang. */

@media (max-width: 860px) {

    .js [data-reveal],

    .js [data-reveal-group] > * {

        transform:
            translateY(12px);
    }

}


/* =========================================================
   12b. MOTION SYSTEM L11 — FORA-INSPIRED, AL-TAFSIR VOICE
   Hero entrance: staged (environment → tagline → produk),
   opacity + translateY + blur ringan sebagai sharpening.
   Hanya aktif dengan .js; no-JS = semuanya tampil penuh.
   ========================================================= */

@keyframes hero-rise {

    from {

        opacity:
            0;

        transform:
            translateY(20px);

        filter:
            blur(5px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }
}


.js .landing-hero .landing-tagline {

    animation:
        hero-rise .9s cubic-bezier(.22, .61, .36, 1) .25s both;
}


.js .landing-hero .hero-visual {

    animation:
        hero-rise 1s cubic-bezier(.22, .61, .36, 1) .5s both;
}


/* =========================================================
   12c. ALUR RISET — STICKY STORYTELLING (L11)
   Struktur What-You-Get: visual tetap di panggung sticky,
   scroll normal menuntun pergantian keadaan 01 → 02 → 03 —
   keadaan berikutnya menggantikan yang lama dengan tenang
   (fade + translate kecil). Kelas .is-live dipasang JS
   hanya di desktop ≥1024px dan motion diizinkan. Tanpa itu:
   mode statik L10 (track berurutan penuh).
   ========================================================= */

.flow-story {

    display:
        none;
}


.flow-story.is-live {

    display:
        block;

    position:
        relative;
}


.flow-story.is-live .flow-stage {

    position:
        sticky;

    top:
        0;

    /* panggung tinggi viewport — visual besar, fokus tunggal */

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        40px 0;

    /* L12: panggung full-bleed — visual tidak diikat container
       1080px (pola sama dengan step bleed L10 & pre-footer L09).
       Desktop lebar: whitespace kiri-kanan dari viewport, bukan
       container. */

    margin-left:
        calc(50% - 50vw);

    margin-right:
        calc(50% - 50vw);

    /* visual tidak keluar dari wrapper konten */

    overflow:
        hidden;
}


/* L13 dihapus: flow-stage-identity tidak lagi ada di markup
   (duplikat flow-head); rules-nya ikut dibersihkan. */


.flow-stage-frame {

    position:
        relative;

    width:
        100%;

    /* L12: visual lebih dominan — tinggi 100vh dipakai penuh
       (padding stage 90px→40px), lebar diikat sisa tinggi viewport
       (88px safety) lewat rasio frame 16:10, plus margin lebar
       viewport 24px per sisi. 1440×900: ~1100px (dari 980).
       Viewport pendek/sempit: rumus yang memutus — tidak pernah
       terpotong. */

    max-width:
        min(1100px, calc((100vh - 88px) * 1.6), calc(100vw - 48px));

    aspect-ratio:
        2880 / 1800;
}


.flow-stage-visual {

    position:
        absolute;

    inset:
        0;

    opacity:
        0;

    transform:
        translateY(18px);

    filter:
        blur(4px);

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

    pointer-events:
        none;
}


.flow-stage-visual.is-active {

    opacity:
        1;

    transform:
        translateY(0);

    filter:
        blur(0);

    pointer-events:
        auto;
}


.flow-stage-visual .flow-visual {

    max-width:
        none;

    margin:
        0;
}


/* scroll track: tiga beat whitespace — panjang, sengaja */

.flow-timeline {

    position:
        relative;

    height:
        300vh;
}


.flow-beat {

    height:
        33.333%;
}


/* saat panggung sticky aktif, track statik disembunyikan —
   TIDAK ADA duplikasi visual; mode fallback menampilkannya
   kembali utuh (mobile / no-JS / reduced-motion) */

.flow-story.is-live ~ .flow-track {

    display:
        none;
}


.flow-story.is-live {

    margin-top:
        88px;

    /* L17: ending beat di mode live — track statik (pembawa
       jeda akhir) disembunyikan saat sticky hidup, jadi jeda
       "settle → whitespace → pre-footer" kini dibawa di sini.
       Tanpa ini, pre-footer menyusul langsung setelah story. */

    margin-bottom:
        170px;
}


/* =========================================================
   12d. MOTION FALLBACK — no-JS / mobile / reduced-motion
   ========================================================= */

/* Tanpa JS: keduanya (story wrapper + track) hadir; story
   disembunyikan di atas. Track statik tampil normal. */

html:not(.js) .flow-story {

    display:
        none;
}


@media (max-width: 1023.5px) {

    .flow-story.is-live {

        display:
            none;
    }
}


/* =========================================================
   13. RESPONSIVE
   ========================================================= */

@media (max-width: 860px) {

    .landing-links {

        display:
            none;
    }

    /* Mobile: compact top bar — tautan inline digantikan
       menu drawer kompak. */

    .landing-menu-btn {

        display:
            inline-flex;
    }

    .landing-nav-actions .landing-cta {

        display:
            none;
    }

    .landing-nav-inner {

        /* Mobile: brand kiri, actions kanan — tanpa kolom
           tengah kosong agar bar tetap ringan dan seimbang. */

        grid-template-columns:
            1fr auto;

        padding:
            10px 16px;
    }

    .landing-main {

        padding:
            0 20px;
    }

    .landing-hero {

        padding-top:
            120px;
    }

    .hero-visual {

        margin-top:
            32px;
    }

    .landing-hero + .landing-intro {

        /* L18: proporsional dengan jeda dasar 170px. */

        margin-top:
            120px;
    }

    .hero-foreground {

        /* Mobile: lebar pita menyusut (bukan tinggi dipotong) —
             skala turun proporsional, seluruh buku tetap utuh,
             lantai tetap mengalas di dasar scene. */

        --books-w:
            132vw;
    }

    .landing-intro {

        margin-top:
            64px;
    }

    .landing-flow {

        margin-top:
            130px;
    }

    .flow-track {

        margin-top:
            64px;

        /* L16: proporsional dengan ritme dasar 190px. */

        gap:
            130px;

        padding-bottom:
            120px;
    }

    /* Bleed di layar kecil: tetap full lebar, tanpa overhang
       liar — crop tetap natural di tengah. */



    .flow-title {

        font-size:
            clamp(23px, 6vw, 30px);
    }

    .stage-visual::before,

    .stage-visual::after {

        display:
            none;
    }

    .landing-prefooter {

        margin-top:
            140px;

        padding:
            120px 0 110px;
    }

    .landing-footer {

        padding:
            36px 20px 26px;
    }
}


@media (max-width: 420px) {

    .landing-nav-actions {

        gap:
            12px;
    }

    .landing-hero {

        padding-top:
            96px;
    }

    .landing-prefooter {

        padding:
            96px 0 90px;
    }

    .landing-cta-lg {

        width:
            100%;
    }

    .flow-track {

        gap:
            100px;
    }
}


/* =========================================================
   14. REDUCED MOTION
   Hormati preferensi sistem (kontrak build §17).
   ========================================================= */

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

    .landing-cta,

    .landing-link,

    .landing-menu,

    .landing-footer-nav a {

        transition:
            none;
    }


    /* L03: drawer muncul langsung tanpa gerak. */

    .landing-menu {

        transform:
            none;
    }


    /* Reveal dimatikan penuh; scene statis penuh — kunci
       --hero-fade ke 0 (JS pun tidak memasang handler). */

    .js [data-reveal],

    .js [data-reveal-group] > * {

        opacity:
            1;

            transform:
                none;

        transition:
            none;
    }


    .landing-hero {

        --hero-fade:
            0;
    }


    .hero-foreground {

        transform:
            translateX(-50%);
    }    /* Intro: frasa tampil penuh tanpa transisi. */

    .intro-phrase {

        transition:
            none;
    }
    .js .intro-phrase {

        opacity:
            1;

        color:
            var(--text);
    }



    /* L11: story sticky, hero entrance, stage crossfade, dan
       scene sink mati penuh tanpa gerak. */

    .flow-story {

        display:
            none !important;
    }


    .js .landing-hero .landing-tagline,

    .js .landing-hero .hero-visual {

        animation:
            none;
    }


    .flow-stage-visual {

        transition:
            none;
    }

    .hero-scene {

        transform:
            none;
    }

/* W10: kursor qalam shared (qalam-cursor.css) sudah
   mematuhi reduced-motion di level nyata sendiri. */

}