/* ============================================================================
   SAKURA HANAMICHI COURSE — Sistem desain bersama (EDISI TERANG / Warna Jepang)
   Dipakai oleh 3 gaya:
     · Washi Kincha 和紙金茶  — kertas washi gading, vermilion torii, emas kincha
     · Sakura Gasane 桜重     — kelopak sakura, kurenai mekar, blush kasane
     · Ai-Zome 藍染           — indigo celup, asagi, putih kapas

   PRINSIP TATA WARNA (permintaan klien):
   1. Tidak serba hitam — dasar halaman memakai warna kertas/hawa Jepang.
   2. Background SELANG-SELING: seksi terang ↔ blok warna penuh, sehingga
      halaman punya ritme saat digulir (tidak monoton satu warna).
      Kelas:  .sec (kertas) · .sec-soft (kertas tua) · .sec-alt (blok warna penuh)
   3. Blok .sec-alt menimpa variabel konteks, sehingga seluruh komponen di
      dalamnya otomatis ikut menyesuaikan tanpa aturan terpisah.
   ========================================================================= */

/* ---------- 1. TOKEN ---------- */
:root{
  /* Tipografi — display Bebas Neue (bulky condensed) + Archivo (sans tebal) */
  --f-display:'Bebas Neue','Archivo',system-ui,'Segoe UI',Roboto,sans-serif;
  --f-headline:'Bebas Neue','Archivo',system-ui,'Segoe UI',Roboto,sans-serif;
  --f-judul:'Archivo','Inter',system-ui,'Segoe UI',Roboto,sans-serif;
  --f-quote:'Cormorant Garamond','Shippori Mincho',Georgia,serif;
  --f-body:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --f-kanji:'Shippori Mincho','Cinzel',serif;

  /* Irama & ukuran */
  --maxw:1300px;
  --sec-y:clamp(4.5rem,9vw,9rem);
  --gap:clamp(.85rem,1.7vw,1.25rem);
  --radius:2px;
  --radius-card:18px;
  --radius-pill:999px;

  /* Warna dasar terang (ditimpa per tema) */
  --bg:#FAF6EE;
  --bg-2:#F1EADC;
  --bg-3:#E6DBC7;
  --surface:#FFFFFF;
  --surface-2:#F7F2E8;
  --fg:#1C1814;
  --fg-2:#4A3F35;
  --fg-3:#7A6C5D;
  --line:rgba(28,24,20,.12);
  --line-2:rgba(28,24,20,.24);
  --accent:#A82824;
  --accent-2:#851F1C;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(168,40,36,.09);

  /* Blok warna penuh (seksi .sec-alt) */
  --blok:#8C2318;
  --blok-fg:#FFF6EA;
  --blok-fg-2:#F0D6C4;
  --blok-fg-3:#D8B49C;
  --blok-line:rgba(255,246,234,.22);
  --blok-line-2:rgba(255,246,234,.38);
  --blok-surface:rgba(255,246,234,.10);
  --blok-surface-2:rgba(255,246,234,.17);
  --gold:#C9A227;

  --paper:#FFFFFF;
  --paper-ink:#1C1814;
  --footer:#3E1A14;

  /* Gerak */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.4,0,.2,1);
  --shadow:0 24px 60px -28px rgba(60,40,20,.42);
  --shadow-sm:0 8px 24px -12px rgba(60,40,20,.28);

  /* Tekstur serat kertas (pengganti butiran film gelap) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ---------- 2. DASAR ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; font-size:100%}
section[id],div[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-size:16.5px; line-height:1.7;
  font-weight:400; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0; padding:0}
::selection{background:var(--accent); color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Serat kertas halus: memberi tekstur, bukan kegelapan */
.grain::after{
  content:''; position:fixed; inset:0; z-index:70; pointer-events:none;
  background-image:var(--grain); opacity:.030; mix-blend-mode:multiply;
}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem,4.5vw,3rem)}
.narrow{max-width:840px}
.kanji{font-family:var(--f-kanji); font-feature-settings:'palt' 1}

/* ---------- 3. TIPOGRAFI DISPLAY ---------- */
/* Judul = sans tebal (Archivo) supaya terasa kokoh, bukan kurus */
.display{
  font-family:var(--f-judul); font-weight:800; line-height:1.06;
  letter-spacing:-.018em; text-wrap:balance;
}
/* Headline raksasa = Bebas Neue, padat & tebal */
.mega{
  font-family:var(--f-headline); line-height:.9; letter-spacing:.005em;
  font-size:clamp(2.7rem,7.6vw,6.2rem); text-transform:uppercase; font-weight:400;
}
.h1{font-size:clamp(2.05rem,5.2vw,4.2rem); line-height:1.06; letter-spacing:-.02em}
.h2{font-size:clamp(1.7rem,3.5vw,2.9rem); line-height:1.12; letter-spacing:-.018em}
.h3{font-size:clamp(1.12rem,1.9vw,1.5rem); line-height:1.24; letter-spacing:-.012em}
.quote{font-family:var(--f-quote); font-style:italic; font-weight:400}
.lead{font-size:clamp(1rem,1.35vw,1.145rem); line-height:1.75; color:var(--fg-2); font-weight:400}
.body-sm{font-size:.9rem; line-height:1.68; color:var(--fg-2); font-weight:400}
.body-b{font-weight:600}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.705rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
}
.eyebrow::before{content:''; width:26px; height:1px; background:currentColor; opacity:.75; flex:0 0 auto}
.sec-alt .eyebrow{color:var(--gold)}
.sec-num{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--fg-3); text-transform:uppercase;
}

/* ---------- 4. TOMBOL ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:50px; padding:.85rem 1.6rem; border-radius:var(--radius-pill);
  font-size:.875rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer;
  transition:transform .4s var(--ease), background-color .3s var(--ease-2), color .3s var(--ease-2), border-color .3s var(--ease-2), box-shadow .4s var(--ease);
}
.btn svg{width:17px; height:17px; flex:0 0 auto}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn-solid:hover{background:var(--accent-2); border-color:var(--accent-2); box-shadow:0 14px 30px -14px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-ghost{background:var(--surface); color:var(--fg); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--accent); color:var(--accent)}
.btn-wa{background:#12836F; color:#fff; border-color:#12836F}
.btn-wa:hover{background:#0C6757; border-color:#0C6757}
.btn-sm{min-height:44px; padding:.6rem 1.1rem; font-size:.79rem}
.btn-row{display:flex; flex-wrap:wrap; gap:.7rem}
/* Di dalam blok warna penuh */
.sec-alt .btn-solid,.hero .btn-solid{background:var(--gold); color:#241A05; border-color:var(--gold)}
.sec-alt .btn-solid:hover{background:#DCB84A; border-color:#DCB84A}
.sec-alt .btn-ghost{background:var(--blok-surface); color:var(--blok-fg); border-color:var(--blok-line-2)}
.sec-alt .btn-ghost:hover{background:var(--blok-surface-2); color:#fff; border-color:var(--blok-fg)}

/* Tautan garis bawah bergerak */
.link-line{
  display:inline-flex; align-items:center; gap:.6rem; padding-block:.5rem;
  border-bottom:1px solid var(--line-2); font-size:.79rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  transition:color .3s var(--ease-2), border-color .3s var(--ease-2);
}
.link-line:hover{color:var(--accent); border-color:var(--accent)}
.link-line svg{width:15px; height:15px; color:var(--accent); transition:transform .35s var(--ease)}
.link-line:hover svg{transform:translateY(3px)}
.sec-alt .link-line{border-color:var(--blok-line-2)}
.sec-alt .link-line:hover{color:var(--gold); border-color:var(--gold)}
.sec-alt .link-line svg{color:var(--gold)}
/* Chip di dalam blok warna penuh: latar digelapkan supaya label emas & teks kecil kontras */
.sec-alt .chip{background:rgba(0,0,0,.26); border-color:rgba(255,246,234,.34)}

/* ---------- 5. PITA (MARQUEE) — blok warna penuh ---------- */
.ribbon{
  border-block:1px solid var(--blok-line); padding-block:1.15rem; overflow:hidden;
  background:var(--blok); color:var(--blok-fg);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ribbon-track{display:flex; width:max-content; gap:3.5rem; animation:geser 42s linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon span{
  display:flex; align-items:center; gap:3.5rem; font-family:var(--f-headline);
  font-size:clamp(.95rem,1.6vw,1.35rem); letter-spacing:.14em; text-transform:uppercase;
  color:var(--blok-ink-2,var(--blok-fg-2)); white-space:nowrap;
}
.ribbon b{color:var(--gold); font-weight:400}
@keyframes geser{to{transform:translateX(-50%)}}

/* ---------- 6. HEADER ---------- */
.hdr{position:fixed; inset-inline:0; top:0; z-index:200; padding-block:.75rem; transition:background-color .45s var(--ease-2), backdrop-filter .45s var(--ease-2), border-color .45s var(--ease-2)}
.hdr.is-stuck{
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex; align-items:center; justify-content:space-between; gap:1rem}
/* Logo */
.brand{display:flex; align-items:center; gap:.7rem; min-width:0}
.brand-mark{
  width:42px; height:42px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center; background:var(--accent); color:var(--accent-ink);
  font-family:var(--f-kanji); font-size:1.28rem; line-height:1;
}
.hdr:not(.is-stuck) .brand-nama,.hdr:not(.is-stuck) .brand-sub{color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.7)}
.brand-txt{display:flex; flex-direction:column; line-height:1.16; min-width:0}
.brand-nama{font-family:var(--f-judul); font-weight:800; font-size:.99rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}
.brand-sub{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3)}
/* Menu pil kapsul */
.nav{display:flex; align-items:center; gap:.15rem}
.nav a{
  padding:.5rem .9rem; border-radius:var(--radius-pill); font-size:.775rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2); border:1px solid transparent;
  transition:color .3s var(--ease-2), background-color .3s var(--ease-2), border-color .3s var(--ease-2);
}
.hdr:not(.is-stuck) .nav a{color:rgba(255,255,255,.9); text-shadow:0 1px 10px rgba(0,0,0,.6)}
.nav a:hover{color:var(--fg); background:var(--surface-2); border-color:var(--line)}
.hdr:not(.is-stuck) .nav a:hover{color:#fff; background:rgba(255,255,255,.16); border-color:transparent}
.nav a[aria-current="true"]{color:var(--accent-ink); background:var(--accent); border-color:var(--accent)}
.hdr:not(.is-stuck) .nav a[aria-current="true"]{color:#fff; text-shadow:none}
.burger{
  display:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--surface); place-items:center; cursor:pointer;
}
.hdr:not(.is-stuck) .burger{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4)}
.burger span{display:block; width:17px; height:1.5px; background:var(--fg); margin:3.2px 0; transition:transform .4s var(--ease), opacity .3s}
.hdr:not(.is-stuck) .burger span{background:#fff}
.hdr-cta{display:flex; align-items:center; gap:.6rem}
.bar-top{position:fixed; top:0; left:0; height:2px; background:var(--accent); z-index:210; width:0}

/* Laci ponsel */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(88vw,380px); z-index:230;
  background:var(--bg-2); border-left:1px solid var(--line);
  transform:translateX(101%); transition:transform .55s var(--ease);
  display:flex; flex-direction:column; padding:1.5rem; overflow-y:auto;
}
.drawer.open{transform:none}
.drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem}
.drawer nav{display:flex; flex-direction:column; gap:.15rem}
.drawer nav a{
  padding:.95rem .2rem; border-bottom:1px solid var(--line); font-family:var(--f-judul); font-weight:700;
  font-size:1.06rem; letter-spacing:.06em; display:flex; align-items:center; justify-content:space-between;
}
.drawer nav a span{font-family:var(--f-mono); font-size:.68rem; color:var(--fg-3)}
.drawer .btn{margin-top:1.6rem}
.scrim{position:fixed; inset:0; z-index:225; background:rgba(30,18,10,.55); backdrop-filter:blur(4px); opacity:0; transition:opacity .45s; pointer-events:none}
.scrim.open{opacity:1; pointer-events:auto}
.x-btn{width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:none; cursor:pointer; display:grid; place-items:center}

/* ---------- 7. LAYAR PEMBUKA ---------- */
.splash{
  position:fixed; inset:0; z-index:400; background:var(--bg);
  display:grid; place-items:center; transition:opacity .8s var(--ease), visibility .8s;
}
.splash.selesai{opacity:0; visibility:hidden; pointer-events:none}
.splash-in{text-align:center; padding:2rem; display:flex; flex-direction:column; align-items:center; gap:1.1rem}
.splash-kanji{font-family:var(--f-kanji); font-size:clamp(3.4rem,11vw,7rem); line-height:1; color:var(--accent); letter-spacing:.08em}
.splash-nama{font-family:var(--f-judul); font-weight:800; font-size:clamp(1.1rem,3.2vw,2rem); letter-spacing:.26em; text-transform:uppercase}
.splash-sub{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--fg-3)}
.splash-bar{width:min(230px,62vw); height:1px; background:var(--line-2); overflow:hidden; margin-top:.6rem}
.splash-bar i{display:block; height:100%; width:0; background:var(--accent); animation:isi 1.5s var(--ease-2) forwards}
@keyframes isi{to{width:100%}}

/* ---------- 8. HERO + CAROUSEL ---------- */
.hero{position:relative; min-height:100svh; display:flex; overflow:hidden; isolation:isolate}
.hero-foto{position:absolute; inset:0; z-index:0}
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.5s var(--ease), transform 7s linear;
  transform:scale(1.02);
}
.hero-slide.aktif{opacity:1; transform:scale(1.09)}
.hero-slide img{width:100%; height:100%; object-fit:cover; object-position:center 45%; filter:saturate(1.02) contrast(1.03)}
.hero-foto::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(100deg, rgba(16,10,6,.90) 0%, rgba(16,10,6,.62) 42%, rgba(16,10,6,.20) 72%, rgba(16,10,6,.42) 100%),
    linear-gradient(180deg, rgba(16,10,6,.55) 0%, transparent 26%, transparent 62%, rgba(16,10,6,.72) 100%);
}
/* Titik penunjuk carousel */
.hero-dots{
  position:absolute; z-index:6; right:clamp(1.15rem,4.5vw,3rem); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.6rem;
}
.hero-dots button{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.75); background:transparent; transition:all .35s var(--ease);
}
.hero-dots button[aria-selected="true"]{background:var(--gold); border-color:var(--gold); height:26px; border-radius:99px}
.hero-kanji{
  position:absolute; z-index:1; right:-1vw; top:12%; font-family:var(--f-kanji);
  font-size:clamp(7rem,24vw,20rem); line-height:.82; color:#fff; opacity:.055;
  pointer-events:none; user-select:none; letter-spacing:.02em;
}
.hero-grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%; opacity:.5;
}
.hero-in{
  position:relative; z-index:5; width:100%; display:flex; flex-direction:column;
  justify-content:flex-end; padding-top:clamp(5.5rem,10vh,7.5rem); padding-bottom:clamp(1.8rem,4vh,2.8rem);
  color:#fff;
}
.hero-tag{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:1.5rem}
.chip{
  display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .95rem; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#fff;
}
.chip b{color:var(--gold); font-weight:500}
.hero-h1{max-width:15ch; color:#fff}
.hero-h1 em{font-style:normal; color:var(--gold); font-family:var(--f-quote); font-style:italic; letter-spacing:0}
.hero-sub{margin-top:1.15rem; max-width:54ch; color:#FFF4E8; font-size:clamp(1rem,1.3vw,1.13rem); text-shadow:0 2px 14px rgba(0,0,0,.8)}
.hero-aksi{margin-top:2rem}
/* Tata letak hero: teks kiri · carousel kanan */
.hero-atas{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr); gap:clamp(1.6rem,4vw,3.2rem); align-items:end}

/* Carousel hero */
.karusel{position:relative; display:flex; flex-direction:column; gap:.8rem}
.karusel-jendela{
  position:relative; aspect-ratio:4/3.1; border-radius:var(--radius-card); overflow:hidden;
  border:1px solid rgba(255,255,255,.3); background:rgba(16,10,6,.28);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow);
}
.karusel-jendela img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .95s var(--ease);
}
.karusel-jendela img.aktif{opacity:1}
.karusel-cap{
  position:absolute; inset-inline:0; bottom:0; z-index:2; padding:2.6rem 1.1rem .95rem;
  background:linear-gradient(0deg,rgba(10,6,4,.9),transparent);
  color:#fff;
}
.karusel-cap b{display:block; font-family:var(--f-judul); font-weight:700; font-size:1.02rem; letter-spacing:.03em}
.karusel-cap span{display:block; margin-top:.15rem; font-size:.775rem; color:rgba(255,255,255,.82); font-weight:400}
.karusel-nav{display:flex; align-items:center; gap:.55rem}
.kn{
  width:44px; height:44px; border-radius:50%; cursor:pointer; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.38); background:rgba(255,255,255,.13); color:#fff;
  display:grid; place-items:center; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background-color .3s var(--ease-2), border-color .3s var(--ease-2);
}
.kn:hover{background:rgba(255,255,255,.26); border-color:#fff}
.kn svg{width:17px; height:17px}
.karusel-urut{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; color:rgba(255,255,255,.85); margin-left:auto;
}
.hero-bawah{
  margin-top:clamp(2rem,4.5vh,3.2rem); padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.28);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.4rem;
  max-width:calc(100% - 60px);
}
.stat-n{font-family:var(--f-headline); font-size:clamp(1.7rem,3.3vw,2.7rem); letter-spacing:.01em; line-height:1; color:#fff}
.stat-n i{font-style:normal; color:var(--gold); font-size:.62em}
.stat-l{display:block; margin-top:.5rem; font-family:var(--f-mono); font-size:.665rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.78)}
/* Kartu kaca di dalam hero (foto gelap) */
.glass{
  background:linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.32); border-radius:var(--radius-card);
  backdrop-filter:blur(20px) saturate(1.2); -webkit-backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:var(--shadow); color:#fff;
}
.glass-pad{padding:clamp(1.15rem,2.2vw,1.7rem)}
.hero-kartu{max-width:390px}
.hero-kartu p{font-size:.925rem; line-height:1.7; color:rgba(255,255,255,.86)}
.hero-kartu .link-line{border-color:rgba(255,255,255,.4)}
.hero-kartu .link-line:hover{color:var(--gold); border-color:var(--gold)}
/* Baris kartu garansi di bawah hero */
.bar-garansi{background:var(--bg); border-bottom:1px solid var(--line); padding-block:clamp(1.6rem,3.5vw,2.4rem)}
.bar-garansi .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2rem}
.bar-garansi-judul{font-family:var(--f-judul); font-weight:800; font-size:clamp(1.15rem,2.2vw,1.55rem); letter-spacing:-.015em}
.bar-garansi p{max-width:62ch}

/* ---------- 9. SEKSI & POLA SELANG-SELING ---------- */
.sec{position:relative; padding-block:var(--sec-y); border-top:1px solid var(--line); background:var(--bg)}
/* Kertas lebih tua (variasi halus) */
.sec-soft{background:var(--bg-2)}
/* Blok warna penuh: menimpa konteks, seluruh isi ikut menyesuaikan */
.sec-alt{
  background:var(--blok); color:var(--blok-fg); border-top-color:var(--blok-line);
  --bg:var(--blok); --bg-2:var(--blok); --bg-3:color-mix(in srgb,var(--blok) 78%,#000);
  --surface:var(--blok-surface); --surface-2:var(--blok-surface-2);
  --fg:var(--blok-fg); --fg-2:var(--blok-fg-2); --fg-3:var(--blok-fg-3);
  --line:var(--blok-line); --line-2:var(--blok-line-2);
  --accent:var(--gold); --accent-2:#DCB84A; --accent-ink:#241A05;
  --accent-soft:rgba(255,246,234,.12);
  /* Token tinta blok harus gelap saat blok dibalik jadi kertas terang */
  --blok-ink:var(--blok-fg); --blok-ink-2:var(--blok-fg-2); --blok-ink-3:var(--blok-fg-3);
  --blok-ink-line:var(--blok-line); --blok-ink-line-2:var(--blok-line-2);
}
/* Varian blok yang dibalik: latar jadi kertas terang, tinta jadi gelap.
   Dipakai agar ritme halaman tetap selang-seling tanpa dua blok gelap menempel. */
.sec-alt.alun{
  background:var(--blok-aksen); color:#FFFFFF; border-top-color:rgba(255,255,255,.30);
  --blok-ink:#FFFFFF; --blok-ink-2:rgba(255,255,255,.88); --blok-ink-3:rgba(255,255,255,.74);
  --blok-ink-line:rgba(255,255,255,.30); --blok-ink-line-2:rgba(255,255,255,.48);
}
.sec-alt.alun table.tbl thead th{background:rgba(0,0,0,.14); color:#FFFFFF}
.sec-alt.alun .chip{background:rgba(0,0,0,.14); border-color:rgba(255,255,255,.34)}
.sec-head{max-width:62ch; margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.sec-head .h2{margin-top:.85rem}
.sec-head p{margin-top:1rem}
.split{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(1.6rem,4.5vw,4rem); align-items:start}
.g2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap)}
.g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
.g4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap)}
.lebar-penuh{margin-inline:calc(50% - 50vw); padding-inline:0}
.pi-kiri{position:sticky; top:118px}

/* ---------- 10. KARTU UMUM ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:clamp(1.15rem,2.3vw,1.75rem);
  transition:border-color .4s var(--ease-2), background-color .4s var(--ease-2), transform .5s var(--ease), box-shadow .4s var(--ease);
  position:relative; overflow:hidden;
}
.card:hover{border-color:var(--line-2); background:var(--surface-2); transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.card-n{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; color:var(--accent); text-transform:uppercase; display:inline-block; padding:.26rem .68rem; border-radius:var(--radius-pill); background:var(--accent-soft); border:1px solid var(--line-2)}
/* Di dalam blok warna penuh, label kecil ini berlatar chip agar kontras tetap ≥4.5 */
.sec-alt .card-n{background:rgba(0,0,0,.26); border-color:rgba(255,246,234,.32); color:var(--blok-ink,var(--blok-fg))}
.sec-alt.alun .card-n{background:rgba(0,0,0,.16); border-color:rgba(255,255,255,.34); color:#FFFFFF}
.card h3{margin-top:.85rem}
.card p{margin-top:.6rem}

/* Kartu program dengan foto */
.prog{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; background:var(--surface);
  transition:box-shadow .45s var(--ease), border-color .4s var(--ease-2);
}
.prog:hover{box-shadow:var(--shadow-sm); border-color:var(--line-2)}
.prog-foto{position:relative; min-height:290px; overflow:hidden}
.prog-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.prog:hover .prog-foto img{transform:scale(1.05)}
.prog-isi{padding:clamp(1.3rem,2.6vw,2.1rem); display:flex; flex-direction:column}
.prog-isi h3{font-family:var(--f-headline); font-size:clamp(1.55rem,2.8vw,2.15rem); letter-spacing:.005em; line-height:1}
.prog-kanji{font-family:var(--f-kanji); font-size:.9rem; letter-spacing:.2em; color:var(--accent); margin-bottom:.5rem}
/* Di dalam blok warna penuh, emas tema perlu dicerahkan agar label kanji kecil tetap ≥4.5 */
.sec-alt .prog-kanji{color:color-mix(in srgb,var(--gold) 82%,#fff)}
.daftar-tanda{list-style:none; display:grid; gap:.55rem; margin-top:1.15rem}
.daftar-tanda li{display:flex; gap:.65rem; align-items:flex-start; font-size:.9rem; line-height:1.6; color:var(--fg-2)}
.daftar-tanda li::before{
  content:''; flex:0 0 auto; width:6px; height:6px; margin-top:.52rem; border-radius:50%;
  background:var(--accent);
}
.tanda-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- 11. TABEL ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); -webkit-overflow-scrolling:touch}
table.tbl{width:100%; border-collapse:collapse; min-width:640px}
table.tbl caption{text-align:left; padding:1.1rem 1.3rem .3rem; font-family:var(--f-mono); font-size:.685rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3)}
table.tbl th,table.tbl td{padding:.95rem 1.3rem; text-align:left; vertical-align:top; font-size:.895rem; line-height:1.6; border-bottom:1px solid var(--line)}
table.tbl thead th{
  font-family:var(--f-mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-3); font-weight:500; background:var(--surface-2); position:sticky; top:0;
}
/* Di dalam blok warna penuh, latar th harus digelapkan agar teks kecil terbaca */
.sec-alt table.tbl thead th{background:rgba(0,0,0,.26); color:var(--blok-fg)}
table.tbl tbody tr:last-child th,table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl th[scope="row"],table.tbl td:first-child{font-weight:500; color:var(--fg)}
table.tbl td{color:var(--fg-2)}
table.tbl .angka{font-family:var(--f-mono); white-space:nowrap; color:var(--fg)}
tr.tbl-sorot th,tr.tbl-sorot td{background:var(--gold); color:#241A05 !important; font-weight:600}
tr.tbl-sorot .angka{color:#241A05}
.tbl-note{margin-top:1rem; font-size:.845rem; line-height:1.65; color:var(--fg-2)}
.tbl-note strong{color:var(--accent); font-weight:600}

/* ---------- 12. ALUR ---------- */
.alur{list-style:none; counter-reset:a; display:grid; gap:0}
.alur li{
  counter-increment:a; display:grid; grid-template-columns:64px minmax(0,1fr); gap:1.2rem;
  padding-block:1.15rem; border-bottom:1px solid var(--line); align-items:start;
  transition:background-color .35s var(--ease-2);
}
.alur li:last-child{border-bottom:0}
.alur li:hover{background:var(--surface-2)}
.alur li::before{
  content:counter(a,decimal-leading-zero); font-family:var(--f-mono); font-size:.78rem;
  letter-spacing:.1em; color:var(--accent); padding-top:.28rem;
}
.alur b{display:block; font-family:var(--f-judul); font-size:1.06rem; letter-spacing:-.012em; font-weight:700}
.alur span{display:block; margin-top:.3rem; font-size:.875rem; line-height:1.62; color:var(--fg-2)}

/* ---------- 13. HARGA ---------- */
.harga-hero{display:flex; flex-wrap:wrap; align-items:flex-end; gap:1rem 1.6rem}
.harga-angka{
  font-family:var(--f-headline); font-size:clamp(3.6rem,10.5vw,8rem); line-height:.86; letter-spacing:.005em;
  color:var(--accent); letter-spacing:-.01em;
}
.sec-alt .harga-angka{color:var(--gold)}
.harga-ket{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); padding-bottom:.6rem}
.fas-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.6rem 1.4rem; margin-top:1.1rem}
.fas-grid li{display:flex; gap:.6rem; align-items:flex-start; font-size:.885rem; color:var(--fg-2); list-style:none}
.fas-grid li::before{content:''; flex:0 0 auto; width:5px; height:5px; margin-top:.56rem; border-radius:50%; background:var(--accent)}
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:clamp(1.4rem,3.4vw,2.8rem);
}
.panel-gelap{
  background:linear-gradient(155deg,var(--bg-3),var(--bg-2)); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:clamp(1.4rem,3.4vw,2.8rem);
}

/* ---------- 14. GALERI (bento) ---------- */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.55rem,1.2vw,.95rem); grid-auto-rows:172px}
.gal figure{
  margin:0; position:relative; overflow:hidden; border-radius:var(--radius-card);
  border:1px solid var(--line); background:var(--bg-3); cursor:zoom-in;
  box-shadow:var(--shadow-sm);
}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform 1.15s var(--ease)}
.gal figure:hover img{transform:scale(1.055)}
.gal .s2{grid-column:span 2; grid-row:span 2}
.gal .t2{grid-row:span 2}
.gal figcaption{
  position:absolute; inset-inline:0; bottom:0; padding:1.5rem .95rem .8rem;
  display:flex; flex-direction:column; gap:.2rem;
  background:linear-gradient(180deg,transparent,rgba(20,10,6,.88));
  color:#fff; font-size:.82rem; line-height:1.42;
}
.gal figcaption b{font-family:var(--f-judul); font-weight:700; letter-spacing:-.01em; color:#fff}
.gal figcaption span{font-size:.735rem; color:rgba(255,255,255,.82)}
.gal .kanji-air{
  position:absolute; top:.7rem; right:.9rem; font-family:var(--f-kanji); font-size:1.15rem;
  color:#fff; opacity:.7; pointer-events:none;
}
.gal .kosong{cursor:default}
.gal .kosong::before{
  content:''; position:absolute; inset:0;
  border:1px dashed var(--line-2); border-radius:var(--radius-card);
  background:repeating-linear-gradient(45deg,transparent 0 12px,color-mix(in srgb,var(--fg) 4%,transparent) 12px 24px);
}

/* ---------- 15. TANYA-JAWAB ---------- */
.faq details{border-bottom:1px solid var(--line); padding-block:.3rem}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem;
  padding-block:1.25rem; cursor:pointer; list-style:none;
  font-family:var(--f-judul); font-weight:700; font-size:clamp(1rem,1.6vw,1.19rem); letter-spacing:-.012em;
  transition:color .3s var(--ease-2);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:''; flex:0 0 auto; width:13px; height:13px; margin-top:.5rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .4s var(--ease);
}
.faq details[open] summary{color:var(--accent)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .faq-isi{padding:0 0 1.4rem; max-width:80ch; font-size:.925rem; line-height:1.72; color:var(--fg-2)}

/* ---------- 16. KONTAK ---------- */
.kontak-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(1.6rem,4.5vw,3.6rem)}
.kontak-list{list-style:none; display:grid; gap:1.2rem}
.kontak-list > li{display:grid; grid-template-columns:46px minmax(0,1fr); gap:1rem; align-items:start}
.kontak-ic{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--accent);
}
.kontak-ic svg{width:19px; height:19px}
.kontak-l{display:block; font-family:var(--f-mono); font-size:.655rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3)}
.kontak-v{display:block; margin-top:.28rem; font-size:.965rem; line-height:1.6; word-break:break-word}
.kontak-v a{display:inline-block; padding-block:.3rem; border-bottom:1px solid transparent; transition:border-color .3s, color .3s}
.kontak-v a:hover{color:var(--accent); border-color:var(--accent)}
/* Formulir — di dalam blok warna memakai kertas putih agar tetap terbaca */
.form{display:grid; gap:1.05rem}
.field{display:flex; flex-direction:column; gap:.42rem}
.field label{font-family:var(--f-mono); font-size:.665rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2)}
.field input,.field select,.field textarea{
  background:var(--surface); border:1px solid var(--line-2); border-radius:10px;
  padding:.85rem .95rem; color:var(--fg); font-family:var(--f-body); font-size:.95rem;
  transition:border-color .3s var(--ease-2), background-color .3s var(--ease-2);
}
.field textarea{resize:vertical; min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); background:var(--surface-2)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#C0392B}
.field .hint{font-size:.775rem; color:var(--fg-3)}
.form-pesan{font-size:.845rem; line-height:1.55; min-height:1.4em}
.form-bar{display:flex; flex-wrap:wrap; align-items:center; gap:1rem}
/* Form di blok warna: selalu kertas putih dengan tinta gelap */
.sec-alt .form{
  background:#FFFDF9; border:1px solid var(--blok-line-2); border-radius:var(--radius-card);
  padding:clamp(1.3rem,2.8vw,2rem); box-shadow:var(--shadow);
  --surface:#FFFFFF; --surface-2:#F6F0E6; --fg:#1C1814; --fg-2:#4A3F35; --fg-3:#7A6C5D;
  --line:rgba(28,24,20,.12); --line-2:rgba(28,24,20,.26); --accent:var(--blok-blok-aksen,var(--blok-aksen, #A82824));
  color:#1C1814;
}
.sec-alt .form .btn-solid{background:var(--accent-2,#851F1C)}

/* ---------- 17. FOOTER ---------- */
.ftr{background:var(--footer); color:#F6E9DC; border-top:1px solid var(--blok-line); padding-block:clamp(3rem,6vw,4.6rem) 1.6rem}
.ftr h4{color:#D9B9A2}
.ftr ul a,.ftr li{color:#EBD7C6}
.ftr p,.ftr .body-sm{color:#EBD7C6}
.ftr a:hover{color:var(--gold)}
.ftr .brand-nama,.ftr .brand-sub{color:#F6E9DC}
.ftr-mark{
  font-family:var(--f-headline); font-size:clamp(2.9rem,14vw,11rem); line-height:.84;
  text-transform:uppercase; color:#F6E9DC; opacity:.09; user-select:none;
  white-space:nowrap; overflow:hidden; margin-bottom:1.5rem;
}
.ftr-grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(1.4rem,3.5vw,3rem)}
.ftr h4{font-family:var(--f-mono); font-size:.665rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; margin-bottom:.95rem}
.ftr ul{list-style:none; display:grid; gap:.15rem}
.ftr ul a,.ftr li{font-size:.9rem; line-height:1.6}
.ftr ul a{display:inline-block; padding-block:.32rem}
.ftr-dasar{
  margin-top:clamp(2.2rem,5vw,3.4rem); padding-top:1.3rem; border-top:1px solid var(--blok-line);
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  font-size:.775rem; color:#CDA98F;
}
.ftr-dasar a{display:inline-block; padding-block:.3rem}
.ftr-kredit{margin-top:.9rem; font-size:.735rem; line-height:1.66; color:#C39C82; max-width:96ch}
.ftr-kredit summary{cursor:pointer; font-family:var(--f-mono); font-size:.665rem; letter-spacing:.16em; text-transform:uppercase; padding-block:.4rem}
.ftr-kredit ul{margin-top:.5rem; gap:.3rem}

/* ---------- 18. PENGALIH GAYA ---------- */
body{padding-bottom:0}
.switcher{
  position:fixed; right:clamp(.75rem,2vw,1.35rem); bottom:clamp(.75rem,2vw,1.35rem); z-index:260;
  display:flex; flex-direction:column; gap:.3rem; padding:.65rem;
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  border:1px solid var(--line-2); border-radius:16px;
  box-shadow:var(--shadow); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  max-width:min(86vw,250px);
}
.sw-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:.55rem;
  background:none; border:0; padding:.62rem .3rem; cursor:pointer; width:100%; min-height:44px;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-2); font-weight:700;
}
.sw-toggle svg{width:13px; height:13px; flex:0 0 auto; transition:transform .35s var(--ease)}
.switcher.tutup{max-width:176px; padding:.35rem .45rem}
.switcher.tutup .sw-toggle{padding:.5rem .2rem; font-size:.64rem; letter-spacing:.12em}
.switcher.tutup .sw-toggle svg{transform:rotate(180deg)}
.switcher.tutup .sw-body{display:none}
.sw-body{display:flex; flex-direction:column; gap:.28rem}
.sw-label{font-family:var(--f-mono); font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2); padding:.1rem .3rem .4rem}
.switcher a{
  display:flex; align-items:center; gap:.6rem; padding:.5rem .55rem; border-radius:11px;
  min-height:44px; transition:background-color .3s var(--ease-2), transform .3s var(--ease);
}
.switcher a:hover{background:var(--accent-soft); transform:translateX(-2px)}
.sw-kanji{
  width:32px; height:32px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); font-family:var(--f-kanji); font-size:.9rem;
}
.sw-txt{display:flex; flex-direction:column; line-height:1.22; min-width:0}
.sw-txt b{font-family:var(--f-judul); font-size:.845rem; font-weight:700; letter-spacing:-.01em}
.sw-txt i{font-style:normal; font-family:var(--f-mono); font-size:.585rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3)}
.sw-home{
  display:flex; align-items:center; justify-content:center; min-height:44px; padding:.55rem;
  border-top:1px solid var(--line); font-family:var(--f-mono); font-size:.63rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2);
}
.sw-home:hover{color:var(--accent)}
@media (max-width:640px){.switcher{max-width:min(calc(100vw - 1.5rem),320px)}.sw-txt i{display:none}}

/* ---------- 19. ANIMASI MASUK (reveal) ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .95s var(--ease), transform .95s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-1{transition-delay:.07s}.rv-2{transition-delay:.14s}.rv-3{transition-delay:.21s}.rv-4{transition-delay:.28s}
.rv-poto{opacity:0; transform:scale(1.04); transition:opacity 1.2s var(--ease), transform 1.6s var(--ease)}
.rv-poto.in{opacity:1; transform:none}

/* ---------- 20. LIGHTBOX ---------- */
.lb{
  position:fixed; inset:0; z-index:350; background:rgba(20,10,6,.94);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.lb.open{opacity:1; visibility:visible}
.lb figure{margin:0; max-width:min(1100px,94vw); display:flex; flex-direction:column; gap:.85rem}
.lb img{max-height:76vh; width:auto; margin-inline:auto; border-radius:10px; border:1px solid rgba(255,255,255,.3)}
.lb figcaption{font-size:.86rem; color:#F0DFD0; text-align:center}
.lb-tutup{
  position:absolute; top:clamp(.9rem,3vw,1.6rem); right:clamp(.9rem,3vw,1.6rem);
  width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer; display:grid; place-items:center;
}
.lb-tutup:hover{border-color:var(--gold); color:var(--gold)}

/* ---------- 21. KATALOG GAYA (index.html) ---------- */
.gaya{display:grid; gap:clamp(.9rem,2vw,1.4rem); grid-template-columns:repeat(3,minmax(0,1fr))}
.gaya a{
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-card);
  overflow:hidden; background:var(--surface); transition:transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
.gaya a:hover{transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--shadow)}
.gaya-isi{padding:1.2rem 1.35rem; display:flex; flex-direction:column; gap:.55rem}
.gaya-isi h2{font-family:var(--f-judul); font-weight:800; font-size:1.28rem; letter-spacing:-.015em}
.gaya-isi p{font-size:.865rem; color:var(--fg-2); line-height:1.62}
.gaya-tpl{font-family:var(--f-kanji); font-size:1.5rem; color:var(--accent)}
.gaya-tok{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.3rem}
.gaya-tok span{font-family:var(--f-mono); font-size:.585rem; letter-spacing:.1em; text-transform:uppercase; padding:.22rem .5rem; border:1px solid var(--line); border-radius:4px; color:var(--fg-3)}
.sampul{position:relative; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line)}
.sampul .gaya-aksen{position:absolute; inset:0}
.gaya-huruf{
  position:absolute; inset:auto .9rem .7rem; font-family:var(--f-judul); font-weight:700;
  font-size:clamp(1.4rem,4.4vw,2.3rem); line-height:1; text-transform:uppercase; letter-spacing:.06em;
  color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.75);
}

/* ---------- 22. TANGGAP LAYAR ---------- */
@media (max-width:1080px){
  .hdr-cta .btn{display:none}
  .nav{display:none}
  .burger{display:grid}
  .hero-atas{grid-template-columns:1fr; align-items:start; gap:1.8rem}
  .karusel-jendela{aspect-ratio:16/9}
  .hero-bawah{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem 1.4rem; max-width:100%}
  .hero-dots{top:auto; bottom:clamp(1rem,3vh,1.6rem); right:auto; left:50%; transform:translateX(-50%); flex-direction:row}
  .hero-dots button[aria-selected="true"]{height:9px; width:26px}
}
@media (max-width:900px){
  .split,.kontak-grid{grid-template-columns:1fr}
  .pi-kiri{position:static}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prog{grid-template-columns:1fr}
  .prog-foto{min-height:230px}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .gaya{grid-template-columns:1fr}
}
@media (max-width:720px){
  .g2{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr); grid-auto-rows:148px}
  .gal .s2{grid-column:span 2; grid-row:span 1}
  .gal .t2{grid-row:span 1}
  .tanda-grid{grid-template-columns:1fr}
  .hero-grid{background-size:calc(100% / 3) 100%}
}
@media (max-width:520px){
  .hero-bawah{grid-template-columns:1fr 1fr; gap:1rem}
  .g3,.g4{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .alur li{grid-template-columns:44px minmax(0,1fr); gap:.85rem}
  .kontak-list > li{grid-template-columns:38px minmax(0,1fr); gap:.8rem}
  .kontak-ic{width:38px; height:38px}
  .karusel-nav .karusel-urut{display:none}
}

/* ---------- 23. HORMATI PREFERENSI PENGGUNA ---------- */
@media (prefers-reduced-motion:reduce){
  .rv,.rv-poto{opacity:1 !important; transform:none !important; transition:none !important}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .ribbon-track{animation:none}
  .hero-slide{transform:none !important}
}
@media print{
  .hdr,.drawer,.scrim,.lb,.splash,.bar-top,.hero-dots,.karusel-nav{display:none !important}
  body{background:#fff; color:#000; padding:0}
  .sec-alt{background:#fff !important; color:#000 !important}
}

/* ---------- 24. SOROTAN HARGA (kartu utama di seksi BIAYA) ---------- */
.harga-kartu{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.4rem,3vw,2.6rem); align-items:stretch;
  background:var(--gold); color:#2A1D06;
  border:1px solid rgba(0,0,0,.22); border-radius:var(--radius-card);
  padding:clamp(1.5rem,3.6vw,2.9rem);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.62);
  position:relative; overflow:hidden;
}
.harga-kartu::after{
  content:''; position:absolute; right:-70px; top:-70px; width:260px; height:260px;
  border-radius:50%; background:rgba(255,255,255,.22); pointer-events:none;
}
.harga-utama{display:flex; flex-direction:column; position:relative; z-index:1}
.harga-badge{
  display:inline-block; align-self:flex-start; padding:.34rem .82rem; border-radius:var(--radius-pill);
  background:rgba(42,29,6,.16); border:1px solid rgba(42,29,6,.3);
  font-family:var(--f-mono); font-size:.64rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:#2A1D06;
}
.harga-kartu .harga-hero{margin-top:1rem; gap:.9rem 1.4rem}
.harga-kartu .harga-angka{
  color:#221703; font-family:var(--f-headline);
  font-size:clamp(3.6rem,10.5vw,8rem); line-height:.86; letter-spacing:.005em;
}
.harga-kartu .harga-ket{color:rgba(42,29,6,.82); padding-bottom:.85rem}
.harga-tegas{
  margin-top:auto; padding-top:1.2rem; font-size:.93rem; line-height:1.65;
  color:rgba(42,29,6,.9); border-top:1px solid rgba(42,29,6,.2);
}
.harga-tegas strong{font-weight:800}

.harga-ringkas{
  list-style:none; display:flex; flex-direction:column; justify-content:center;
  gap:.1rem; position:relative; z-index:1;
  background:rgba(255,255,255,.30); border:1px solid rgba(42,29,6,.16);
  border-radius:var(--radius); padding:.4rem .1rem;
}
.harga-ringkas li{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.3rem .9rem; padding:.72rem 1.05rem;
  border-bottom:1px solid rgba(42,29,6,.13);
}
.harga-ringkas li:last-child{border-bottom:0}
.hr-l{
  font-family:var(--f-mono); font-size:.665rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(42,29,6,.78);
}
.hr-v{font-family:var(--f-judul); font-weight:800; font-size:1.06rem; color:#221703; letter-spacing:-.015em}
.harga-ringkas .hr-talang{background:rgba(42,29,6,.10)}
.harga-ringkas .hr-talang .hr-v{color:#7A1F12}

.biaya-detail{margin-top:clamp(2.2rem,4.6vw,3.6rem)}

/* Baris tabel penyorot: di atas blok gelap pakai emas, di kertas pakai pasir muda */
.sec-alt tr.tbl-sorot th,.sec-alt tr.tbl-sorot td{background:var(--gold) !important; color:#241A05 !important; font-weight:700}
.sec-alt tr.tbl-sorot .angka{color:#241A05 !important}
/* PENTING: seksi blok juga memakai kelas .sec, jadi varian terang harus dikecualikan
   dengan :not(.sec-alt) agar tidak menimpa emas di atas blok warna penuh. */
.sec:not(.sec-alt) tr.tbl-sorot th,.sec:not(.sec-alt) tr.tbl-sorot td{background:rgba(184,134,11,.18); color:var(--fg); font-weight:700}
.sec:not(.sec-alt) tr.tbl-sorot .angka{color:var(--fg)}

@media (max-width:900px){
  .harga-kartu{grid-template-columns:1fr}
}
@media print{
  .harga-kartu{box-shadow:none}
}

/* Menu Biaya ditonjolkan: satu-satunya item nav bergaya tombol */
.nav a.nav-sorot{
  background:var(--accent); color:var(--accent-ink) !important;
  border-color:var(--accent) !important; font-weight:600; text-shadow:none !important;
}
.nav a.nav-sorot:hover{background:var(--accent-2) !important; color:var(--accent-ink) !important}
.hdr:not(.is-stuck) .nav a.nav-sorot{
  background:rgba(255,255,255,.20); color:#fff !important;
  border-color:rgba(255,255,255,.44) !important;
}
.hdr:not(.is-stuck) .nav a.nav-sorot:hover{background:rgba(255,255,255,.32) !important}
.nav a.nav-sorot[aria-current="true"]{background:var(--accent) !important; color:var(--accent-ink) !important; border-color:var(--accent) !important}

/* ---------- 25. CHIP DI SEKSI KERTAS ----------
   Chip dasar dirancang untuk di atas foto hero (teks putih, kaca transparan).
   Di dalam seksi kertas warnanya harus dibalik agar tetap terbaca. */
.sec:not(.sec-alt) .chip{
  background:var(--surface-2); border-color:var(--line-2); color:var(--fg-2);
}
.sec:not(.sec-alt) .chip b{color:var(--accent)}
.sec:not(.sec-alt) .chip svg{color:var(--accent)}


/* ============================================================================
   26. TEMA MERAH — ADAPTASI PALET LPKGACOR1
   Pertahankan tone merah lembaga + corak Jepang (seigaiha / asanoha).
   ========================================================================= */
:root{
  --bg:#FDFBF7;
  --bg-2:#F6EFE6;
  --bg-3:#EBE0D4;
  --surface:#FFFFFF;
  --surface-2:#FAF4EC;
  --fg:#2C1E18;
  --fg-2:#5A4438;
  --fg-3:#8A7263;
  --line:rgba(44,30,24,.13);
  --line-2:rgba(44,30,24,.26);
  --accent:#8F0020;
  --accent-2:#6E0019;
  --accent-ink:#FFF8F4;
  --accent-soft:rgba(143,0,32,.09);

  --blok:#8F0020;
  --blok-fg:#FFF8F4;
  --blok-fg-2:#F3D6DC;
  --blok-fg-3:#DDAEB8;
  --blok-line:rgba(255,248,244,.22);
  --blok-line-2:rgba(255,248,244,.40);
  --blok-surface:rgba(255,248,244,.10);
  --blok-surface-2:rgba(255,248,244,.18);

  --gold:#D9A93A;
  --footer:#5A0014;
}

/* Varian terang blok (.alun) — dipakai untuk blok yang dibalik */
.sec-alt.alun{background:#F6EFE6; color:var(--fg); border-top-color:var(--line)}
.sec-alt.alun .h2,.sec-alt.alun .h3,.sec-alt.alun .display{color:var(--fg)}
.sec-alt.alun .eyebrow{color:var(--accent)}
.sec-alt.alun .lead,.sec-alt.alun .body-sm{color:var(--fg-2)}
.sec-alt.alun .card{background:#FFFFFF; border-color:var(--line)}
.sec-alt.alun .card h3{color:var(--fg)}
.sec-alt.alun .card p{color:var(--fg-2)}
.sec-alt.alun .card-n{background:var(--accent-soft); border-color:var(--line-2); color:var(--accent)}
.sec-alt.alun .tbl-wrap,.sec-alt.alun table.tbl{background:#FFFFFF}
.sec-alt.alun table.tbl thead th{background:#F6EFE6; color:var(--fg-3)}
.sec-alt.alun table.tbl th,.sec-alt.alun table.tbl td{color:var(--fg-2); border-color:var(--line)}
.sec-alt.alun table.tbl th[scope="row"],.sec-alt.alun table.tbl td:first-child{color:var(--fg)}
.sec-alt.alun .alur li{border-color:var(--line)}
.sec-alt.alun .alur b{color:var(--fg)}
.sec-alt.alun .alur span{color:var(--fg-2)}
.sec-alt.alun .faq details{border-color:var(--line)}
.sec-alt.alun .faq summary{color:var(--fg)}
.sec-alt.alun .faq .faq-isi{color:var(--fg-2)}
.sec-alt.alun .chip{background:#FFFFFF; border-color:var(--line-2); color:var(--fg-2)}
.sec-alt.alun .chip b{color:var(--accent)}
.sec-alt.alun .card-n{color:var(--accent)}
.sec-alt.alun .kontak-ic{background:#FFFFFF; border-color:var(--line-2); color:var(--accent)}
.sec-alt.alun .kontak-l{color:var(--fg-3)}
.sec-alt.alun .gal figure{border-color:var(--line)}

/* ---------------------------------------------------------------
   CORAK JEPANG: seigaiha (gelombang biru laut) & asanoha (daun rami)
   Tetap dipertahankan dari LPKGacor1 — hanya opasitasnya dilembutkan.
   --------------------------------------------------------------- */
.pat{position:relative; isolation:isolate}
.pat::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-repeat:repeat; background-position:center top;
}
.pat-seigaiha::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'><g fill='none' stroke='%238F0020' stroke-opacity='.10' stroke-width='1'><circle cx='0' cy='60' r='56'/><circle cx='0' cy='60' r='44'/><circle cx='0' cy='60' r='32'/><circle cx='0' cy='60' r='20'/><circle cx='60' cy='30' r='56'/><circle cx='60' cy='30' r='44'/><circle cx='60' cy='30' r='32'/><circle cx='60' cy='30' r='20'/><circle cx='120' cy='60' r='56'/><circle cx='120' cy='60' r='44'/><circle cx='120' cy='60' r='32'/><circle cx='120' cy='60' r='20'/></g></svg>");
  background-size:120px 60px;
  opacity:.9;
}
.pat-asanoha::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><g fill='none' stroke='%232C1E18' stroke-opacity='.075' stroke-width='1'><path d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/><path d='M28 32 L56 48 L56 80 L28 97 L0 80 L0 48 Z'/><path d='M28 0 L28 32 M0 16 L28 32 M56 16 L28 32 M0 48 L28 64 M56 48 L28 64 M28 64 L28 97'/></g></svg>");
  background-size:56px 97px;
}
.sec-alt .pat-seigaiha::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'><g fill='none' stroke='%23FFF8F4' stroke-opacity='.12' stroke-width='1'><circle cx='0' cy='60' r='56'/><circle cx='0' cy='60' r='44'/><circle cx='0' cy='60' r='32'/><circle cx='0' cy='60' r='20'/><circle cx='60' cy='30' r='56'/><circle cx='60' cy='30' r='44'/><circle cx='60' cy='30' r='32'/><circle cx='60' cy='30' r='20'/><circle cx='120' cy='60' r='56'/><circle cx='120' cy='60' r='44'/><circle cx='120' cy='60' r='32'/><circle cx='120' cy='60' r='20'/></g></svg>")}

/* Kartu sektor skill */
.sektor{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--gap); margin-top:clamp(1.4rem,3vw,2.2rem)}
.sektor a{
  display:flex; flex-direction:column; gap:.4rem; padding:1.05rem 1.2rem;
  border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface);
  transition:transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
.sektor a:hover{transform:translateY(-3px); border-color:var(--line-2); box-shadow:var(--shadow-sm)}
.sektor .kanji{font-family:var(--f-kanji); font-size:1.25rem; color:var(--accent)}
.sektor b{font-family:var(--f-judul); font-weight:700; font-size:1.02rem}
.sektor span{font-size:.83rem; color:var(--fg-3)}

/* ------------------------------------------------------------------
   SUSUNAN GAYA GEOSPHERE: komposisi hero sinematik + kartu kaca
   (disaring ke palet merah, tetap pakai corak Jepang)
   ------------------------------------------------------------------ */
.hero .hero-in{padding-top:clamp(6.5rem,13vh,9rem)}
.hero-h1{max-width:19ch}
.hero-kartu .hero-kartu-atas{display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.9rem}
.hero-kartu .kanji{font-size:1.8rem; line-height:1; color:var(--gold)}
.hero-kartu .eyebrow{color:var(--gold)}
.hero-kartu .eyebrow::before{background:var(--gold); opacity:.6}
.hero-atas{gap:clamp(1.4rem,3.4vw,2.6rem)}

/* Statistik strip hero versi Geosphere: bilah tipis transparan */
.hero-bawah{
  background:rgba(255,248,244,.06); border:1px solid rgba(255,248,244,.20);
  border-radius:var(--radius-card); padding:1.15rem 1.4rem; max-width:100%;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}

/* Seksi tanya-jawab dua kolom (mirip blok "plan" Geosphere) */
.split-tanya{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.6rem,4vw,3.4rem); align-items:start}
@media (max-width:900px){.split-tanya{grid-template-columns:1fr}}

/* Nomor bab besar di belakang judul seksi (gaya editorial Geosphere) */
.sec-head{position:relative}
.sec-num-air{
  position:absolute; right:0; top:-.35em; font-family:var(--f-headline);
  font-size:clamp(3.4rem,9vw,7.5rem); line-height:.8; letter-spacing:.01em;
  color:currentColor; opacity:.045; pointer-events:none; user-select:none;
}


/* Skip link terlihat saat difokus keyboard */
.sr:focus{
  position:fixed; top:.75rem; left:.75rem; z-index:500; width:auto; height:auto;
  padding:.72rem 1.15rem; margin:0; clip:auto; overflow:visible; white-space:nowrap;
  background:var(--accent); color:var(--accent-ink);
  border-radius:var(--radius-pill); font-family:var(--f-mono);
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}

/* Galeri: figure dapat difokus & diaktifkan via keyboard */
.gal figure[role="button"]:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.gal figure[role="button"]:focus-visible img{transform:scale(1.03)}

/* Judul mini di kartu testimoni: batasi panjang baris */
#testimoni .card h3{font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.55; max-width:44ch}