/* ==========================================================================
   OMIY AI — sistem desain "Satu malam bersama Omiy"
   --------------------------------------------------------------------------
   Gagasan: halaman mengikuti jam. Pembuka = malam (Kakak tidur, Omiy kerja),
   isi halaman = siang, penutup = malam lagi.
   Aturan warna:
     tosca  = suara Omiy (gelembung, jawaban, hasil kerja)
     oranye = tindakan Kakak (tombol) dan hangatnya cahaya
     pasir  = "cara lama" / tanpa Omiy
     navy   = malam dan tinta
   Font: Nunito (judul, tombol, angka) + Plus Jakarta Sans (isi) — sesuai guide.
   ========================================================================== */

@font-face{font-family:Nunito;src:url(nunito.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Jakarta;src:url(jakarta.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  /* warna identitas */
  --tosca:#12A594;
  --oranye:#FF8A3D;
  --krem:#FFF7EE;
  --navy:#192D38;
  --malam:#0E1E27;

  /* peran warna — mode terang */
  --kertas:#FFF7EE;          /* latar halaman */
  --kertas-2:#FAEEDF;        /* pita berbayang */
  --permukaan:#FFFFFF;       /* benda: chat, nota, kartu */
  --tinta:#192D38;
  --tinta-2:#4B5E66;
  --garis:#E8DDCB;
  --tosca-tinta:#077168;     /* tosca yang aman untuk teks (>=4.5:1 di atas gelembung Omiy) */
  --tosca-lembut:#DDF0E9;
  --tosca-tua:#0B4F4A;
  --oranye-tinta:#A8480C;
  --oranye-lembut:#FFE7D4;
  --pasir:#EFE6D8;
  --pasir-tinta:#75665A;
  --gelembung:#FFFFFF;       /* chat masuk */
  --gelembung-omiy:#DDF0E9;  /* chat Omiy */
  --logo-ink:#192D38;
  --bayang:0 30px 60px -32px rgba(25,45,56,.35), 0 2px 6px rgba(25,45,56,.05);
  --bayang-kecil:0 10px 24px -14px rgba(25,45,56,.35);

  --font-judul:Nunito,"Segoe UI",system-ui,Arial,sans-serif;
  --font-isi:Jakarta,"Segoe UI",system-ui,Arial,sans-serif;

  --fs-13:.8125rem; --fs-15:.9375rem; --fs-17:1.0625rem; --fs-20:1.25rem;
  --fs-h3:clamp(1.3rem,1.12rem + .8vw,1.75rem);
  --fs-h2:clamp(2.05rem,1.2rem + 3.3vw,3.6rem);
  --fs-h1:clamp(3.5rem,1.4rem + 7.4vw,6.9rem);

  --lebar:1200px;
  --tepi:clamp(1.15rem,4.2vw,2.5rem);
  --ruang:clamp(4.5rem,9vw,8.5rem);
  --r-lg:28px; --r-md:20px; --r-sm:12px;
  color-scheme:light;
}

/* Mode gelap dan bagian "malam" memakai peran warna yang sama. */
:root[data-theme=gelap], .malam{
  --kertas:#0E1E27;
  --kertas-2:#132834;
  --permukaan:#18313D;
  --tinta:#F8F1E6;
  --tinta-2:#BFCFD4;         /* >=4.5:1 di atas gelembung Omiy gelap */
  --garis:#284350;
  --tosca-tinta:#6FE3CC;
  --tosca-lembut:#123F3D;
  --tosca-tua:#0B4F4A;
  --oranye-tinta:#FFB07A;
  --oranye-lembut:#4A2A12;
  --pasir:#223843;
  --pasir-tinta:#A9B7BB;
  --gelembung:#203B47;
  --gelembung-omiy:#0F5A53;
  --logo-ink:#F8F1E6;
  --bayang:0 30px 60px -30px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.25);
  --bayang-kecil:0 10px 24px -14px rgba(0,0,0,.7);
}
:root[data-theme=gelap]{color-scheme:dark}
.malam{color:var(--tinta)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6.5rem}
body{margin:0;background:var(--kertas);color:var(--tinta);font:400 var(--fs-17)/1.65 var(--font-isi);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,select{font:inherit;color:inherit}
button{cursor:pointer}
strong,b{font-weight:700}
summary{cursor:pointer}
::selection{background:var(--tosca);color:#fff}
/* Fokus: browser tanpa :focus-visible tetap memakai :focus (aturan kedua diabaikan di sana). */
:focus{outline:3px solid var(--oranye);outline-offset:3px;border-radius:8px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:3px solid var(--oranye);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}

.wrap{width:min(100% - var(--tepi)*2, var(--lebar));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-5rem;z-index:100;background:var(--oranye);color:#192D38;font:800 var(--fs-15) var(--font-judul);padding:.7rem 1rem;border-radius:999px;text-decoration:none}
.skip:focus{top:1rem}
.icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- tipografi ---------- */
.h1,.h2,.h3{font-family:var(--font-judul);font-weight:900;letter-spacing:-.028em;text-wrap:balance}
.h1{font-size:var(--fs-h1);line-height:.94;letter-spacing:-.04em}
.h2{font-size:var(--fs-h2);line-height:1.02}
.h2--sedang{font-size:clamp(1.95rem,1.15rem + 2.2vw,2.9rem);line-height:1.05}
.h3{font-size:var(--fs-h3);line-height:1.12;font-weight:800;letter-spacing:-.018em}
/* Judul dua baris: baris pertama = situasi Kakak, baris kedua = jawaban Omiy. */
.h2 em,.h3 em{display:block;font-style:normal;color:var(--tosca-tinta)}
.lead{font-size:var(--fs-20);line-height:1.55;color:var(--tinta-2);max-width:36rem}
.kecil{font-size:var(--fs-15);color:var(--tinta-2)}
.mini{font-size:var(--fs-13);color:var(--tinta-2);line-height:1.5}
.teks-tautan{color:var(--tosca-tinta);font-weight:600;text-underline-offset:.22em;text-decoration-thickness:1.5px}
.teks-tautan:hover{text-decoration-thickness:2.5px}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.35rem;padding:.8rem 1.5rem;border:0;border-radius:999px;background:var(--oranye);color:#192D38;font:800 1.0625rem/1.1 var(--font-judul);letter-spacing:-.005em;text-decoration:none;box-shadow:0 14px 28px -14px rgba(255,138,61,.85);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 32px -14px rgba(255,138,61,.9);background:#FF9A55}
.btn:active{transform:translateY(0)}
.btn .icon{width:1.3em;height:1.3em}
.btn--kecil{min-height:2.75rem;padding:.55rem 1.1rem;font-size:.9375rem;box-shadow:none}
.btn--terang{background:var(--krem);color:#192D38;box-shadow:0 14px 28px -16px rgba(0,0,0,.6)}
.btn--terang:hover{background:#fff;box-shadow:0 20px 32px -16px rgba(0,0,0,.65)}
.btn--garis{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--garis)}
.btn--garis:hover{background:var(--permukaan);box-shadow:inset 0 0 0 2px var(--tosca)}
.tbtn{display:inline-flex;align-items:center;gap:.55rem;padding:.35rem 0;border:0;background:none;color:var(--tinta);font:800 1rem/1.2 var(--font-judul);text-decoration:none;border-radius:8px}
.tbtn span:not(.putar){background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:.18em;transition:background-size .2s ease}
.tbtn:hover span:not(.putar){background-size:0 2px;background-position:100% 100%}
.tbtn--tosca{color:var(--tosca-tinta)}
.tbtn .putar{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;flex:none}
.tbtn .putar .icon{width:.95rem;height:.95rem;fill:currentColor;stroke:none;margin-left:2px}
.baris-tombol{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}

/* ---------- gelembung bicara Omiy (pengantar bagian) ---------- */
.kata-omiy{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;max-width:30rem}
.kata-omiy img{width:2.6rem;height:2.6rem;margin-top:.2rem}
.kata-omiy p{background:var(--gelembung-omiy);color:var(--tinta);padding:1rem 1.2rem;border-radius:6px 22px 22px 22px;font-size:1rem;line-height:1.6}
.kata-omiy b{display:block;font:800 var(--fs-13) var(--font-judul);color:var(--tosca-tinta);margin-bottom:.15rem}

/* ---------- kepala bagian ---------- */
.bagian{padding-block:var(--ruang)}
.bagian--pita{background:var(--kertas-2)}
.kepala{display:grid;gap:1.5rem 3rem;margin-bottom:clamp(2.2rem,5vw,3.75rem)}
.kepala > p:not(.lead){color:var(--tinta-2);max-width:34rem}
@media (min-width:900px){
  .kepala--dua{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end}
  .kepala--dua .kata-omiy{justify-self:end}
}

/* ==========================================================================
   HEADER — pil mengambang, selalu punya latar sendiri (aman di atas malam
   maupun siang, dengan atau tanpa JavaScript).
   ========================================================================== */
.bar{position:sticky;top:0;z-index:50;padding:.75rem var(--tepi) 0;pointer-events:none}
.bar__in{pointer-events:auto;width:min(100%,var(--lebar));margin-inline:auto;display:flex;align-items:center;gap:.75rem;padding:.5rem .55rem .5rem 1.15rem;border-radius:999px;background:var(--permukaan);background:color-mix(in srgb,var(--permukaan) 92%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 0 0 1px var(--garis),0 18px 40px -22px rgba(14,30,39,.55);box-shadow:0 0 0 1px color-mix(in srgb,var(--garis) 70%,transparent),0 18px 40px -22px rgba(14,30,39,.55)}
.merek{display:block;flex:none;line-height:0;border-radius:10px}
.merek svg{height:2.05rem;width:auto}
.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav > a,.nav summary{display:flex;align-items:center;gap:.35rem;padding:.6rem .85rem;border-radius:999px;font:700 .9375rem/1 var(--font-judul);color:var(--tinta);text-decoration:none;white-space:nowrap;list-style:none;transition:background-color .15s ease}
.nav summary::-webkit-details-marker{display:none}
.nav > a:hover,.nav summary:hover{background:var(--kertas-2)}
.nav > a[aria-current],.nav summary.kini{color:var(--tosca-tinta)}
.nav__crm{color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--garis)}
.nav__crm:hover{box-shadow:inset 0 0 0 1.5px var(--tosca)}
.nav__crm .icon{width:.8em;height:.8em}
.pil--baru{margin-left:.45rem;padding:.15rem .5rem;font-size:.6875rem;box-shadow:none;background:var(--oranye);color:#192D38;vertical-align:middle}
.produk__menu strong .pil--baru{display:inline-flex}
.nav > a[aria-current]::after{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--oranye)}
.produk{position:relative}
.produk summary .icon{width:1rem;height:1rem;transition:transform .2s ease}
.produk[open] summary .icon{transform:rotate(180deg)}
.produk[open] summary{background:var(--kertas-2)}
.produk__menu{position:absolute;top:calc(100% + .9rem);left:-.5rem;width:21rem;padding:.5rem;border-radius:var(--r-md);background:var(--permukaan);box-shadow:0 0 0 1px var(--garis),var(--bayang)}
.produk__menu a{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:center;padding:.75rem .85rem;border-radius:14px;text-decoration:none}
.produk__menu a:hover{background:var(--kertas-2)}
.produk__menu img{width:2.4rem;height:2.4rem}
.produk__menu strong{display:block;font:800 1rem/1.2 var(--font-judul)}
.produk__menu small{display:block;font-size:var(--fs-13);color:var(--tinta-2);line-height:1.4;margin-top:.1rem}
.bar__aksi{display:flex;align-items:center;gap:.4rem;flex:none}
.bulat{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--tinta);transition:background-color .15s ease}
.bulat:hover{background:var(--kertas-2)}
.tema .matahari{display:none}
:root[data-theme=gelap] .tema .matahari{display:block}
:root[data-theme=gelap] .tema .bulan{display:none}
.menu-btn{display:none}
.lbl-pendek{display:none}
.menu-btn .tutup-ikon{display:none}
.menu-btn[aria-expanded=true] .tutup-ikon{display:block}
.menu-btn[aria-expanded=true] .menu-ikon{display:none}

.nav__tema{display:none}
@media (max-width:1180px){
  .bar__in{position:relative}
  .bar__aksi{margin-left:auto}
  .menu-btn{display:grid}
  /* menu melayang di bawah pil: tidak mendorong isi halaman */
  .nav{display:none;position:absolute;top:calc(100% + .6rem);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:.6rem;border-radius:26px;background:var(--permukaan);box-shadow:0 0 0 1px var(--garis),0 34px 70px -24px rgba(14,30,39,.65);max-height:calc(100vh - 6.5rem);max-height:calc(100dvh - 6.5rem);overflow:auto;overscroll-behavior:contain}
  .nav.buka{display:flex}
  .nav > a,.nav summary,.nav__tema{padding:.95rem .9rem;font-size:1.0625rem;border-radius:16px}
  .nav summary{justify-content:space-between}
  .produk__menu{position:static;width:auto;box-shadow:none;padding:0 0 .4rem;background:transparent}
  .nav__tema{display:flex;align-items:center;gap:.6rem;margin-top:.35rem;border:0;border-top:1px solid var(--garis);border-radius:0 0 16px 16px;background:none;font:700 1.0625rem/1 var(--font-judul);color:var(--tinta-2);text-align:left}
  .nav__tema .matahari{display:none}
  :root[data-theme=gelap] .nav__tema .matahari{display:block}
  :root[data-theme=gelap] .nav__tema .bulan{display:none}
}
@media (max-width:560px){
  .lbl-panjang{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lbl-pendek{display:inline}
}
@media (max-width:420px){
  .merek svg{height:1.8rem}
  .bar__in{gap:.5rem;padding-left:.9rem}
  .bar .btn--kecil{padding-inline:.75rem;gap:.4rem}
  .bar__aksi .tema{display:none}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.kaki{padding:0 0 2.2rem;background:var(--kertas)}
.kaki__atas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2rem;padding-block:2.2rem;border-top:1px solid var(--garis)}
.kaki__tautan{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem}
.kaki__tautan a{font:700 .9375rem/1.3 var(--font-judul);text-decoration:none;color:var(--tinta-2);padding:.45rem 0;display:inline-flex;align-items:center;gap:.3rem}
.kaki__tautan a:hover{color:var(--tinta);text-decoration:underline;text-underline-offset:.25em}
.kaki__tautan .icon{width:.85em;height:.85em}
.kaki__bawah{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;font-size:var(--fs-13);color:var(--tinta-2)}
.kaki__cinta{display:inline-flex;align-items:center;gap:.35rem}
.kaki__cinta .icon{width:1em;height:1em;color:var(--oranye);fill:var(--oranye)}

/* ==========================================================================
   DIALOG (percakapan lengkap)
   ========================================================================== */
dialog:not([open]){display:none}
.dialog{width:min(100% - 1.5rem,46rem);max-height:min(88vh,56rem);padding:0;border:0;border-radius:var(--r-lg);background:var(--kertas);color:var(--tinta);box-shadow:0 50px 120px -30px rgba(0,0,0,.6);overflow:hidden}
.dialog[open]{display:flex;flex-direction:column}
/* browser tanpa <dialog>: ditampilkan sebagai panel tetap di tengah layar */
.dialog--polos[open]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:60;margin:0}
.dialog::backdrop{background:rgba(14,30,39,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.dialog__kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.4rem 1.2rem 1.1rem 1.6rem;border-bottom:1px solid var(--garis)}
.dialog__kepala h2{font:900 1.5rem/1.15 var(--font-judul);letter-spacing:-.02em}
.dialog__isi{overflow:auto;padding:1.4rem 1.6rem 2rem;overscroll-behavior:contain}
body.dialog-buka{overflow:hidden}
.naskah-intro{color:var(--tinta-2);margin-bottom:1.6rem}
.naskah-bab{padding-block:1.5rem;border-top:1px solid var(--garis)}
.naskah-bab h3{display:flex;align-items:center;gap:.7rem;font:800 1.15rem/1.2 var(--font-judul);margin-bottom:1rem}
.naskah-bab h3 span{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--tinta);color:var(--kertas);font-size:.875rem}
.naskah-chat{display:grid;gap:.5rem;padding:1rem;border-radius:var(--r-md);background:var(--kertas-2)}
.naskah-catatan{margin-top:.9rem;font-size:var(--fs-15);color:var(--tinta-2)}
.naskah-catatan strong{color:var(--tinta)}
.naskah-akhir{margin-top:1.2rem;font-size:var(--fs-13);color:var(--tinta-2)}

/* ==========================================================================
   TOMBOL KONTAK MENGAMBANG (HP)
   ========================================================================== */
.kontak-hp{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));z-index:40;display:none;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .55rem .55rem 1.15rem;border-radius:999px;background:var(--navy);color:#FFF7EE;box-shadow:0 20px 40px -14px rgba(0,0,0,.55);transform:translateY(160%);transition:transform .3s cubic-bezier(.2,.8,.2,1);font:800 .9375rem/1.2 var(--font-judul)}
.kontak-hp small{display:block;font:500 .75rem/1.3 var(--font-isi);opacity:.75}
.kontak-hp > span{min-width:0}
.kontak-hp .btn{flex:none;white-space:nowrap}
.kontak-hp.tampil{transform:none}
:root[data-theme=gelap] .kontak-hp{background:#F8F1E6;color:#192D38}
@media (max-width:760px){.kontak-hp{display:flex}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   BENDA 1 — CHAT (yang dilihat pelanggan)
   ========================================================================== */
.chat{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--permukaan);color:var(--tinta);box-shadow:0 0 0 1px var(--garis),var(--bayang);overflow:hidden}
.chat__atas{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--garis)}
.chat__atas img,.chat__avatar{width:2.5rem;height:2.5rem;flex:none}
.chat__siapa{min-width:0;line-height:1.25}
.chat__siapa strong{display:block;font:800 1rem/1.2 var(--font-judul)}
.chat__siapa span{display:block;font-size:var(--fs-13);color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat__label{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font:800 .75rem/1 var(--font-judul);color:var(--tosca-tinta);padding:.4rem .65rem;border-radius:999px;background:var(--tosca-lembut);white-space:nowrap}
.chat__label i{width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.chat__isi{display:grid;align-content:start;gap:.45rem;padding:1.1rem;background:var(--kertas-2);background:
  radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--tinta) 7%,transparent) 1px,transparent 1.5px) 0 0/18px 18px,var(--kertas-2)}
.chat__kaki{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;border-top:1px solid var(--garis);font-size:var(--fs-13);color:var(--tinta-2)}
.chat__kaki .icon{width:1rem;height:1rem;color:var(--tosca-tinta)}

.msg{justify-self:start;max-width:min(88%,27rem);padding:.65rem .9rem .55rem;border-radius:6px 20px 20px 20px;background:var(--gelembung);color:var(--tinta);font-size:.9688rem;line-height:1.5;box-shadow:0 1px 1px rgba(25,45,56,.08)}
.msg p + p{margin-top:.45rem}
.msg__siapa{display:block;font:800 .75rem/1.2 var(--font-judul);color:var(--tinta-2);margin-bottom:.2rem}
.msg__jam{display:flex;align-items:center;justify-content:flex-end;gap:.2rem;margin-top:.15rem;font-size:.6875rem;line-height:1;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.msg__jam .icon{width:.95rem;height:.95rem;color:var(--tosca)}
.msg--omiy{justify-self:end;border-radius:20px 6px 20px 20px;background:var(--gelembung-omiy)}
.msg--omiy .msg__siapa{color:var(--tosca-tinta)}
.msg--kakak{justify-self:end;border-radius:20px 6px 20px 20px;background:var(--oranye-lembut)}
.msg--kakak .msg__siapa{color:var(--oranye-tinta)}
/* Di percakapan Kakak ↔ Omiy (Assist), Omiy ada di sisi kiri. */
.chat--pribadi .msg--omiy{justify-self:start;border-radius:6px 20px 20px 20px}
.msg--sys,.jeda{justify-self:center;max-width:94%;display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem;border-radius:999px;background:var(--permukaan);background:color-mix(in srgb,var(--permukaan) 78%,transparent);color:var(--tinta-2);font-size:.75rem;line-height:1.35;text-align:center;box-shadow:0 0 0 1px var(--garis)}
.jeda .icon,.msg--sys .icon{width:.9rem;height:.9rem;flex:none}
.chat__tanggal{justify-self:center;font-size:.6875rem;color:var(--tinta-2);padding:.15rem 0 .35rem}

/* jeda yang sedang berjalan (demo diputar) */
.jeda--jalan{flex-wrap:wrap;justify-content:center;border-radius:18px;padding:.7rem 1rem;gap:.3rem .6rem}
.jeda--jalan strong{font:800 .8125rem/1.2 var(--font-judul);color:var(--tinta)}
.jeda--jalan .catat{flex:1 0 100%}
.titik{display:inline-flex;gap:3px}
.titik i{width:5px;height:5px;border-radius:50%;background:var(--tosca);animation:titik 1s infinite ease-in-out}
.titik i:nth-child(2){animation-delay:.15s}.titik i:nth-child(3){animation-delay:.3s}
@keyframes titik{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.jeda__bar{flex:1 0 100%;height:3px;border-radius:3px;background:var(--garis);overflow:hidden}
.jeda__bar i{display:block;height:100%;width:0;background:var(--tosca)}
.masuk{animation:masuk .4s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes masuk{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ==========================================================================
   BENDA 2 — NOTA (yang diterima Kakak/tim)
   ========================================================================== */
.nota{position:relative;padding:1.6rem 1.5rem 1.7rem;background:var(--permukaan);color:var(--tinta);filter:drop-shadow(0 22px 26px rgba(25,45,56,.16));
  --gigi:10px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/var(--gigi) 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/var(--gigi) 51% repeat-x;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/var(--gigi) 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/var(--gigi) 51% repeat-x}
:root[data-theme=gelap] .nota,.malam .nota{filter:drop-shadow(0 22px 26px rgba(0,0,0,.5))}
/* browser tanpa mask: nota tampil sebagai kartu bersudut, tanpa gigi */
@supports not ((mask:conic-gradient(#000,#000)) or (-webkit-mask:conic-gradient(#000,#000))){.nota{border-radius:14px;box-shadow:0 0 0 1px var(--garis)}}
.nota__judul{display:flex;align-items:center;gap:.6rem;font:800 var(--fs-13)/1.2 var(--font-judul);color:var(--tosca-tinta);margin-bottom:.8rem}
.nota__judul img{width:1.9rem;height:1.9rem}
.nota h3,.nota .nota__kepala{font:900 1.35rem/1.15 var(--font-judul);letter-spacing:-.02em;margin-bottom:1rem}
.nota dl > div{display:grid;gap:.1rem;padding:.7rem 0;border-top:1.5px dashed var(--garis)}
.nota dt{font-size:var(--fs-13);color:var(--tinta-2)}
.nota dd{font:700 1rem/1.35 var(--font-judul)}
.nota__kaki{margin-top:.8rem;padding-top:.8rem;border-top:1.5px dashed var(--garis);font-size:.75rem;color:var(--tinta-2);line-height:1.45}

/* ==========================================================================
   BENDA 3 — STEMPEL garansi
   ========================================================================== */
.stempel{width:clamp(9.5rem,20vw,12.5rem);aspect-ratio:1;color:var(--oranye-tinta);transform:rotate(-9deg);flex:none}
.stempel svg{width:100%;height:100%;overflow:visible}
.stempel text{font-family:var(--font-judul);font-weight:900;fill:currentColor}

/* ==========================================================================
   HERO — malam. Satu-satunya momen gerak otomatis di halaman.
   ========================================================================== */
.hero{position:relative;isolation:isolate;margin-top:-4.6rem;padding-top:4.6rem;background:
  radial-gradient(90rem 38rem at 82% -6rem,rgba(18,165,148,.20),transparent 62%),
  linear-gradient(180deg,#0A1820 0%,var(--malam) 46%,#10262F 100%);
  color:#F8F1E6;overflow:hidden}
.hero::before{/* bintang */content:"";position:absolute;top:0;left:0;right:0;bottom:0;inset:0;z-index:-1;opacity:.85;background:
  radial-gradient(1.4px 1.4px at 7% 18%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 16% 62%,#fff 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 27% 9%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 38% 33%,#fff 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 46% 14%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 54% 48%,#fff 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 63% 7%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 71% 27%,#fff 50%,transparent 51%),
  radial-gradient(1.3px 1.3px at 93% 41%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 88% 12%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 3% 44%,#fff 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 33% 74%,#fff 50%,transparent 51%);
  -webkit-mask:linear-gradient(#000 40%,transparent 78%);mask:linear-gradient(#000 40%,transparent 78%)}
.hero__in{display:grid;gap:3rem;padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem)}
.hero__label{display:inline-flex;align-items:center;gap:.6rem;font:700 1rem/1.35 var(--font-judul);color:#9FE9DA;margin-bottom:1.4rem}
.hero__label::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:#25D0B4;box-shadow:0 0 0 5px rgba(37,208,180,.18)}
.hero h1 .tidur{display:block;color:rgba(248,241,230,.4)}
.hero h1 .kerja{display:block;color:#7FF0D8;text-shadow:0 0 42px rgba(37,208,180,.45)}
.hero__desc{margin-top:1.7rem;max-width:35rem;font-size:clamp(1.0625rem,.98rem + .35vw,1.2rem);line-height:1.62;color:rgba(248,241,230,.82)}
.hero .baris-tombol{margin-top:2.1rem}
.hero .tbtn{color:#F8F1E6}
.hero__catatan{margin-top:1rem;font-size:var(--fs-15);color:rgba(248,241,230,.62)}
.hero__bukti{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.9rem;padding-top:1.4rem;border-top:1px solid rgba(248,241,230,.14);font:700 .9375rem/1.3 var(--font-judul);color:rgba(248,241,230,.85)}
.hero__bukti li{display:inline-flex;align-items:center;gap:.45rem}
.hero__bukti .icon{width:1.05rem;height:1.05rem;color:#25D0B4}

/* panggung kanan */
.panggung{position:relative;width:min(100%,27rem);margin-inline:auto;padding-top:5.2rem}
.jam-bulan{position:absolute;top:0;right:0;display:flex;align-items:center;gap:.9rem;text-align:right}
.jam-bulan div{line-height:1.15}
.jam-bulan strong{display:block;font:900 2.35rem/1 var(--font-judul);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#FFF1DA}
.jam-bulan span{font-size:var(--fs-13);color:rgba(248,241,230,.66)}
.jam-bulan svg{width:3.4rem;height:3.4rem;flex:none;filter:drop-shadow(0 0 18px rgba(255,214,150,.55))}
.panggung .maskot-hidup{position:absolute;top:1.15rem;left:1.1rem;width:5.2rem;height:5.2rem;z-index:2;filter:drop-shadow(0 12px 14px rgba(0,0,0,.45));transform-origin:50% 90%}
.panggung .chat{position:relative;z-index:1}
.panggung .chat__atas{padding-left:6.9rem;min-height:4.1rem}
.panggung .chat__isi{min-height:19.5rem}
.panggung .chat__kaki{padding-bottom:1.15rem}
.kartu-konteks{position:relative;z-index:3;display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;width:min(92%,21rem);margin:-.55rem 0 0 -1.2rem;padding:.85rem 1.05rem;border-radius:18px;background:#FFF7EE;color:#192D38;box-shadow:0 22px 40px -18px rgba(0,0,0,.65)}
.kartu-konteks .ikon-bulat{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:#FFE7D4;color:#A8480C}
.kartu-konteks strong{display:block;font:800 .9375rem/1.25 var(--font-judul)}
.kartu-konteks span{display:block;font-size:var(--fs-13);line-height:1.4;color:#4B5E66}
.panggung__kaki{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1rem;margin-top:1rem;font-size:var(--fs-13);color:rgba(248,241,230,.55)}
.panggung__kaki .tbtn{font-size:var(--fs-13);color:rgba(248,241,230,.85)}
.panggung__kaki .tbtn .icon{width:1rem;height:1rem}

/* wajah maskot hidup */
.maskot-hidup [data-wajah]{opacity:0;transition:opacity .25s ease}
.maskot-hidup[data-mood=halo] [data-wajah=halo],
.maskot-hidup[data-mood=mikir] [data-wajah=mikir],
.maskot-hidup[data-mood=siap] [data-wajah=siap]{opacity:1}
.maskot-hidup .mata{transform-box:fill-box;transform-origin:center;animation:kedip 5.2s infinite}
@keyframes kedip{0%,46%,50%,100%{transform:none}48%{transform:scaleY(.12)}}
.maskot-hidup[data-mood=mikir]{animation:ayun 2.4s ease-in-out infinite}
@keyframes ayun{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* urutan pembuka: lampu padam → Omiy menyala → chat berjalan */
.tunda{opacity:0;transform:translateY(10px) scale(.97)}
.muncul{animation:masuk .45s cubic-bezier(.2,.9,.3,1.2) both}
.js .hero[data-babak="0"] h1 .tidur{color:rgba(248,241,230,.92)}
.js .hero[data-babak="0"] h1 .kerja{color:rgba(248,241,230,.92);text-shadow:none}
.js .hero[data-babak="0"] .jam-bulan{opacity:0;transform:translateY(8px)}
.hero h1 .tidur,.hero h1 .kerja{transition:color 1.1s ease,text-shadow 1.1s ease}
.jam-bulan{transition:opacity .9s ease .2s,transform .9s ease .2s}

/* fajar: malam berakhir di cakrawala, halaman siang mulai */
.fajar{position:relative;margin-top:clamp(1rem,3vw,2.5rem);padding-top:clamp(5.5rem,11vw,9rem)}
.fajar::before{/* cahaya di cakrawala */content:"";position:absolute;left:50%;bottom:0;z-index:-1;width:min(150rem,230vw);height:clamp(15rem,32vw,27rem);transform:translateX(-50%);background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(255,154,85,.62),rgba(255,138,61,.26) 38%,rgba(255,138,61,.07) 62%,transparent 74%)}
.fajar::after{/* bumi: kertas krem melengkung */content:"";position:absolute;left:50%;top:clamp(2.2rem,5vw,4rem);bottom:-1px;z-index:-1;width:max(160vw,120rem);transform:translateX(-50%);border-radius:50% 50% 0 0/clamp(3.2rem,7vw,6.5rem) clamp(3.2rem,7vw,6.5rem) 0 0;background:var(--kertas);box-shadow:0 -1px 0 rgba(255,214,170,.55),0 -18px 60px rgba(255,160,90,.28)}
.fajar__in{display:grid;gap:1.6rem 3rem;align-items:center;padding-bottom:clamp(2rem,4vw,3rem);color:var(--tinta)}
.fajar__in > p{font:800 1.2rem/1.3 var(--font-judul);letter-spacing:-.01em;color:var(--tinta-2)}
.fajar__in > p strong{display:block;font-weight:900;color:var(--tinta)}
.fajar__in ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.5rem}
.fajar__in li{display:flex;align-items:center;gap:.6rem;font:700 1rem/1.3 var(--font-judul)}
.fajar__in li .icon{width:1.35rem;height:1.35rem;color:var(--tosca-tinta)}
:root[data-theme=gelap] .fajar::before{background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(37,208,180,.32),rgba(37,208,180,.1) 45%,transparent 72%)}
:root[data-theme=gelap] .fajar::after{box-shadow:0 -1px 0 rgba(127,240,216,.3),0 -18px 60px rgba(37,208,180,.14)}

@media (min-width:960px){
  .hero__in{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:4rem}
  .panggung{margin-inline:auto 0}
  .fajar__in{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr)}
  .fajar__in ul{grid-template-columns:repeat(4,auto);justify-content:space-between}
}
@media (max-width:520px){
  .fajar__in ul{grid-template-columns:1fr}
  .kartu-konteks{margin-left:-.4rem}
  .panggung .maskot-hidup{width:4.4rem;height:4.4rem;left:.8rem;top:1.7rem}
  .panggung .chat__atas{padding-left:5.8rem}
}

/* ==========================================================================
   BERANDA — bagian siang
   ========================================================================== */
.pengantar{font:800 1rem/1.3 var(--font-judul);color:var(--tosca-tinta);margin-bottom:.9rem}
.malam .pengantar{color:#7FF0D8}
.pil{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--garis);font:700 var(--fs-13)/1.2 var(--font-judul);color:var(--tinta-2);white-space:nowrap}
.pil .icon{width:.95rem;height:.95rem}
.ikon-bulat{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--oranye-lembut);color:var(--oranye-tinta);flex:none}
.ceklis{display:grid;gap:.6rem}
.ceklis li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start}
.ceklis .icon{margin-top:.2rem;width:1.15rem;height:1.15rem;color:var(--tosca-tinta);stroke-width:2.6}
.jangkar{display:block;position:relative;top:-6rem;height:0}

/* ---------- DEMO ---------- */
.demo{padding-top:clamp(3rem,6vw,5.5rem)}
.demo__pilih{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;margin-bottom:1rem}
.demo__pilih p{font:700 1.0625rem/1.4 var(--font-judul)}
.chips{display:flex;gap:.5rem;overflow-x:auto;margin-inline:calc(var(--tepi)*-1);padding:.3rem var(--tepi) 1.1rem;scrollbar-width:none;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:.5rem;flex:none;scroll-snap-align:start;min-height:3rem;padding:.6rem 1.1rem;border:0;border-radius:999px;background:var(--permukaan);box-shadow:inset 0 0 0 1.5px var(--garis);font:800 .9688rem/1 var(--font-judul);color:var(--tinta);transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
.chip .icon{width:1.1rem;height:1.1rem;color:var(--tinta-2)}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--tosca)}
.chip[aria-selected=true]{background:var(--tinta);color:var(--kertas);box-shadow:none}
.chip[aria-selected=true] .icon{color:inherit}
.chip:disabled{opacity:.6;cursor:default}

.cuplik{display:grid;gap:1.4rem;align-items:start}
.cuplik__chat .chat__isi{min-height:15rem;padding:1.4rem}
.cuplik__nota{max-width:26rem;justify-self:center;width:100%}
.cuplik__nota.terbuka{animation:nota-turun .6s cubic-bezier(.2,.8,.2,1)}
@keyframes nota-turun{from{opacity:.2;transform:translateY(-14px) rotate(0)}}
.menunggu{opacity:0;transform:translateY(8px)}
.cuplik__alat{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-top:1.3rem}
.cuplik__alat .mini{margin-left:auto}
.tbtn:disabled{opacity:.5;cursor:default}
@media (min-width:900px){
  .cuplik{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:2.5rem;align-items:center}
  .cuplik__chat{align-self:stretch}
  .cuplik__chat .chat__isi{flex:1}
  .cuplik__nota{transform:rotate(1.6deg);justify-self:end}
}

.lab{margin-top:2.2rem;border-radius:var(--r-lg);background:var(--kertas-2)}
.lab > summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding:1.25rem 1.5rem;list-style:none;border-radius:var(--r-lg)}
.lab > summary::-webkit-details-marker{display:none}
.lab__tanya{font:800 1.125rem/1.3 var(--font-judul)}
.lab__buka{display:inline-flex;align-items:center;gap:.4rem;font:800 .9688rem/1.2 var(--font-judul);color:var(--tosca-tinta)}
.lab__buka .icon{transition:transform .25s ease}
.lab[open] .lab__buka .icon{transform:rotate(180deg)}
.lab__isi{padding:.5rem 1.5rem 1.7rem}
.lab__atas{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.8rem 2rem;padding-bottom:1.4rem;margin-bottom:1.5rem;border-bottom:1px solid var(--garis)}
.lab__usaha{font:800 var(--fs-15)/1.2 var(--font-judul);color:var(--tosca-tinta);margin-bottom:.35rem}
.lab__atas .h3{max-width:34rem}
.lab__grid{display:grid;gap:1.4rem}
.tahap{display:flex;gap:.5rem;overflow-x:auto;margin-inline:-1.5rem;padding:.2rem 1.5rem .6rem;scrollbar-width:none;counter-reset:t}
.tahap::-webkit-scrollbar{display:none}
.tahap li{flex:none}
.tahap__btn{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.65rem;width:100%;padding:.6rem .95rem .6rem .6rem;border:0;border-radius:18px;background:transparent;text-align:left;box-shadow:inset 0 0 0 1.5px var(--garis);transition:background-color .15s ease,box-shadow .15s ease}
.tahap__no{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;font:900 .8125rem/1 var(--font-judul);background:var(--garis);color:var(--tinta)}
.tahap__btn img{width:2.1rem;height:2.1rem;filter:grayscale(1);opacity:.55;transition:filter .2s ease,opacity .2s ease}
.tahap__teks strong{display:block;font:800 .9688rem/1.2 var(--font-judul);white-space:nowrap}
.tahap__teks small{display:none;font-size:var(--fs-13);color:var(--tinta-2);line-height:1.35;margin-top:.12rem}
.tahap__btn:hover{box-shadow:inset 0 0 0 1.5px var(--tosca)}
.tahap__btn[aria-current=step]{background:var(--permukaan);box-shadow:inset 0 0 0 2px var(--tosca),var(--bayang-kecil)}
.tahap__btn[aria-current=step] .tahap__no{background:var(--tosca);color:#fff}
.tahap__btn[aria-current=step] img{filter:none;opacity:1}
.lab__alir{height:25rem;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.dibalik{padding:1.4rem;border-radius:var(--r-md);background:var(--permukaan);box-shadow:0 0 0 1px var(--garis)}
.dibalik__label{display:flex;align-items:center;gap:.45rem;font:800 var(--fs-13)/1.2 var(--font-judul);color:var(--tinta-2);margin-bottom:1rem}
.dibalik h4{font:900 1.35rem/1.15 var(--font-judul);letter-spacing:-.02em;margin:.9rem 0 .5rem}
.dibalik > p{color:var(--tinta-2);font-size:1rem}
.dibalik__catatan{display:flex;align-items:flex-start;gap:.5rem;margin-top:1rem;padding:.7rem .85rem;border-radius:14px;background:var(--tosca-lembut);color:var(--tinta)!important;font:700 var(--fs-15)/1.4 var(--font-judul)!important}
.dibalik__catatan .icon{color:var(--tosca-tinta);margin-top:.1rem}
.dibalik__bawah{margin-top:1.3rem;padding-top:1.1rem;border-top:1px dashed var(--garis)}
.dibalik__bawah p{font-size:var(--fs-15);color:var(--tinta-2);margin-bottom:.5rem}
.kendali{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.3rem;margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--garis)}
.kendali__lanjut{margin-left:auto}
.tempo{display:inline-flex;align-items:center;gap:.5rem;font:700 var(--fs-15)/1 var(--font-judul);color:var(--tinta-2)}
.tempo select{appearance:none;-webkit-appearance:none;padding:.55rem 2rem .55rem .85rem;border:0;border-radius:999px;background:var(--permukaan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23077168' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .65rem center/1rem no-repeat;box-shadow:inset 0 0 0 1.5px var(--garis);font:800 var(--fs-15)/1.2 var(--font-judul);color:var(--tinta)}
.lab__catatan{display:grid;gap:.4rem;margin-top:1.2rem;font-size:var(--fs-13);color:var(--tinta-2)}
.lab__catatan strong{color:var(--tinta)}
@media (min-width:1000px){
  .lab__grid{grid-template-columns:16.5rem minmax(0,1fr) 19rem;align-items:stretch}
  .tahap{flex-direction:column;overflow:visible;margin:0;padding:0}
  .tahap__teks strong{white-space:normal}
  .tahap__teks small{display:block}
  .lab__alir{height:28rem}
  .dibalik{display:flex;flex-direction:column}
  .dibalik__bawah{margin-top:auto}
}
@media (max-width:560px){
  .lab > summary,.lab__isi{padding-inline:1.1rem}
  .tahap{margin-inline:-1.1rem;padding-inline:1.1rem}
  .kendali__lanjut{margin-left:0}
}

.prinsip{display:grid;gap:1.6rem 2.5rem;margin-top:clamp(2.5rem,5vw,4rem)}
.prinsip li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.prinsip .icon{width:1.6rem;height:1.6rem;color:var(--tosca-tinta);margin-top:.15rem}
.prinsip p{color:var(--tinta-2);font-size:1rem}
.prinsip strong{display:block;font:800 1.0938rem/1.3 var(--font-judul);color:var(--tinta);margin-bottom:.15rem}
@media (min-width:820px){.prinsip{grid-template-columns:repeat(3,1fr)}}
.jembatan{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 2rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--garis)}
.jembatan p{font:800 1.25rem/1.3 var(--font-judul);letter-spacing:-.01em}
.tanpa-js{margin-top:1.5rem;padding:1rem 1.2rem;border-radius:14px;background:var(--oranye-lembut);font-size:var(--fs-15)}

/* ---------- PERAN ---------- */
.peran__kepala{display:grid;gap:1.2rem;margin-bottom:clamp(2rem,4vw,3rem)}
.peran__kepala .lead{margin-top:1rem}
.peran__maskot{width:clamp(4.2rem,8vw,6.2rem);height:auto;filter:drop-shadow(0 14px 16px rgba(18,165,148,.3));transform-origin:50% 90%}
.peran__maskot use[class^=w-]{opacity:0;transition:opacity .2s ease}
.peran__maskot[data-mood=halo] .w-halo,.peran__maskot[data-mood=siap] .w-siap,.peran__maskot[data-mood=mikir] .w-mikir{opacity:1}
.peran__maskot.lompat{animation:lompat .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes lompat{0%{transform:none}35%{transform:translateY(-12px) rotate(-5deg)}70%{transform:translateY(0) rotate(3deg)}100%{transform:none}}
@media (min-width:760px){.peran__kepala{grid-template-columns:auto 1fr;align-items:start;gap:1.8rem}}

.peran__tabs{display:grid;gap:.7rem}
.peran__tab{position:relative;display:grid;grid-template-columns:4.6rem 1fr auto;align-items:center;gap:1rem;padding:.55rem 1.1rem .55rem .55rem;border:0;border-radius:22px;background:var(--permukaan);box-shadow:inset 0 0 0 1.5px var(--garis);text-align:left;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.peran__tab picture{display:block;width:4.6rem;height:4.6rem;border-radius:16px 16px 16px 5px;overflow:hidden}
.peran__tab img{width:100%;height:100%;object-fit:cover}
.peran__tab-teks strong{display:block;font:900 1.25rem/1.15 var(--font-judul);letter-spacing:-.015em}
.peran__tab-teks span{display:block;font-size:var(--fs-15);color:var(--tinta-2);line-height:1.35;margin-top:.15rem}
.peran__radio{width:1.35rem;height:1.35rem;border-radius:50%;box-shadow:inset 0 0 0 2px var(--garis);display:grid;place-items:center}
.peran__radio::after{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--oranye);transform:scale(0);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.peran__tab:hover{box-shadow:inset 0 0 0 1.5px var(--tosca)}
.peran__tab[aria-selected=true]{background:var(--tosca-tua);color:#FFF7EE;box-shadow:var(--bayang-kecil)}
.peran__tab[aria-selected=true] .peran__tab-teks span{color:rgba(255,247,238,.78)}
.peran__tab[aria-selected=true] .peran__radio{box-shadow:inset 0 0 0 2px rgba(255,247,238,.5)}
.peran__tab[aria-selected=true] .peran__radio::after{transform:none}
@media (min-width:900px){.peran__tabs{grid-template-columns:repeat(3,1fr)}}

.peran__panel{display:grid;gap:2rem;margin-top:1.1rem;padding:clamp(1.3rem,3.2vw,2.75rem);border-radius:var(--r-lg);background:var(--permukaan);box-shadow:0 0 0 1px var(--garis),var(--bayang)}
.peran__panel.masuk-panel{animation:panel .35s ease both}
@keyframes panel{from{opacity:0;transform:translateY(8px)}}
.peran__nama{font:800 1rem/1.2 var(--font-judul);color:var(--tosca-tinta);margin-bottom:.6rem}
.peran__teks > p:not([class]){margin-top:.9rem;color:var(--tinta-2)}
.peran__teks h4{font:800 1rem/1.2 var(--font-judul);margin:1.6rem 0 .8rem}
.peran__tetap{margin-top:1.2rem;padding-top:1.1rem;border-top:1px dashed var(--garis);font-size:1rem;color:var(--tinta-2)}
.peran__tetap strong{color:var(--tinta)}
.peran__aksi{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.2rem;margin-top:1.6rem}
@media (max-width:520px){.peran__aksi .btn,.garansi__aksi .btn,.ajak__aksi .btn{width:100%}}
.peran__detail{margin-top:1.2rem}
.peran__detail .icon{width:1.1rem;height:1.1rem}

.cabang{padding:clamp(1.1rem,2.5vw,1.75rem);border-radius:var(--r-md);background:var(--kertas-2);background:
  radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--tinta) 7%,transparent) 1px,transparent 1.5px) 0 0/18px 18px,var(--kertas-2)}
.cabang figcaption{margin-bottom:1.2rem}
.cabang figcaption strong{display:block;font:800 1.125rem/1.25 var(--font-judul)}
.cabang figcaption span{font-size:var(--fs-13);color:var(--tinta-2)}
.cabang__pemicu{position:relative;display:grid;gap:.35rem;justify-items:start;padding-bottom:1.6rem}
.cabang__jam{font:900 1.35rem/1 var(--font-judul);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cabang .msg{margin:0;max-width:100%}
.msg--sys-besar{border-radius:14px!important;background:var(--tinta)!important;color:var(--kertas)!important;font-weight:600}
.cabang__dua{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
/* garis cabang dari pemicu ke dua jalur */
.cabang__dua::before{content:"";position:absolute;left:25%;right:25%;top:-1.05rem;height:1.05rem;border:2px solid var(--garis);border-bottom:0;border-radius:14px 14px 0 0}
.cabang__dua::after{content:"";position:absolute;left:1.6rem;top:-1.6rem;height:.55rem;border-left:2px solid var(--garis)}
.jalur{display:grid;align-content:start;gap:.5rem;padding:.9rem;border-radius:18px}
.jalur__kepala{display:grid;grid-template-columns:auto 1fr;column-gap:.55rem;align-items:center;margin-bottom:.35rem;line-height:1.2}
.jalur__kepala img,.jalur__mini{grid-row:span 2;width:2rem;height:2rem}
.jalur__kepala strong{font:800 .9688rem/1.2 var(--font-judul)}
.jalur__kepala span{font-size:.75rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.jalur--tanpa{background:var(--pasir);background:color-mix(in srgb,var(--pasir) 70%,transparent);box-shadow:inset 0 0 0 1.5px var(--garis)}
.jalur--tanpa .msg{background:transparent;box-shadow:none;border:1.5px dashed var(--garis);border:1.5px dashed color-mix(in srgb,var(--pasir-tinta) 55%,transparent);color:var(--pasir-tinta)}
.jalur--tanpa .msg--toko{justify-self:end;border-radius:20px 6px 20px 20px}
.jalur__cerita{font-size:var(--fs-15);line-height:1.45;color:var(--pasir-tinta);font-style:italic;padding:.2rem .15rem}
.jalur--dengan{background:var(--permukaan);box-shadow:inset 0 0 0 2px var(--tosca)}
.jalur--dengan .msg:not(.msg--omiy){background:var(--kertas-2)}
.jalur__menang{display:flex;align-items:center;gap:.45rem;margin-top:.25rem;padding:.6rem .8rem;border-radius:12px;background:var(--tosca-tua);color:#FFF7EE;font:800 var(--fs-15)/1.25 var(--font-judul)}
.jalur__menang .icon{width:1.05rem;height:1.05rem;stroke-width:3}
.peran__gabung{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.4rem;margin-top:2rem;font:700 1.0625rem/1.4 var(--font-judul);text-align:center}
@media (max-width:640px){
  .lebar-saja{display:none}
  .cabang__dua{grid-template-columns:1fr}
  .cabang__dua::before,.cabang__dua::after{display:none}
  .cabang__pemicu{padding-bottom:1rem}
}
@media (min-width:1000px){
  .peran__panel{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:3rem;align-items:center}
}

/* ---------- PENGALAMAN ---------- */
.lapangan__in{display:grid;gap:3rem}
.lapangan__teks > p:not(.pengantar){margin-top:1.2rem;color:var(--tinta-2);max-width:34rem}
.lapangan__teks > p strong{color:var(--tinta)}
.tahun{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.tahun > div{display:grid;align-content:start;gap:.5rem;padding-top:1.1rem;border-top:3px solid var(--tinta)}
.tahun dd{order:-1}
.tahun dt{font-size:var(--fs-15);color:var(--tinta-2);line-height:1.4;max-width:12rem}
.tahun dd{font:900 clamp(4rem,9vw,7rem)/.85 var(--font-judul);letter-spacing:-.05em;color:var(--tosca-tinta)}
.tahun dd span{font-size:1.125rem;letter-spacing:0;margin-left:.35rem;color:var(--tinta)}
.prinsip-omiy{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.1rem;align-items:start;margin-top:2.4rem}
.prinsip-omiy img{width:3.6rem;height:3.6rem;grid-row:span 2}
.prinsip-omiy blockquote{background:var(--gelembung-omiy);padding:1.1rem 1.3rem;border-radius:6px 24px 24px 24px;font:800 1.2rem/1.4 var(--font-judul);letter-spacing:-.01em}
.prinsip-omiy figcaption{font-size:var(--fs-13);color:var(--tinta-2);padding-left:.3rem}
@media (min-width:900px){.lapangan__in{grid-template-columns:1fr 1fr;gap:5rem;align-items:center}}

/* ---------- CARA KERJA ---------- */
.cara__in{display:grid;gap:3rem}
.cara__kiri .lead{margin-top:1.3rem}
.setelan{margin-top:2.2rem;max-width:25rem;border-radius:var(--r-md);background:var(--permukaan);box-shadow:0 0 0 1px var(--garis),var(--bayang);transform:rotate(-1.5deg);overflow:hidden}
.setelan__atas{display:flex;align-items:center;gap:.6rem;padding:.95rem 1.15rem;border-bottom:1px solid var(--garis);font:800 1rem/1.2 var(--font-judul)}
.setelan__atas .icon{color:var(--tosca-tinta)}
.setelan__atas span{margin-left:auto;font:600 .75rem/1 var(--font-isi);color:var(--tinta-2)}
.setelan dl > div{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.15rem;font-size:var(--fs-15)}
.setelan dl > div + div{border-top:1px solid var(--garis)}
.setelan dt{color:var(--tinta-2)}
.setelan dd{font:800 var(--fs-15)/1.2 var(--font-judul);padding:.4rem .7rem;border-radius:999px;background:var(--tosca-lembut);color:var(--tinta);text-align:right}
.langkah{display:grid;counter-reset:l}
.langkah li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.3rem;padding-bottom:2.3rem}
.langkah li:not(:last-child)::before{content:"";position:absolute;left:1.55rem;top:3.4rem;bottom:.3rem;border-left:2px dashed var(--garis)}
.langkah__no{display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:50% 50% 50% 8px;background:var(--tosca);color:#fff;font:900 1.35rem/1 var(--font-judul)}
.langkah h3{font:900 1.4rem/1.2 var(--font-judul);letter-spacing:-.02em;margin-top:.45rem}
.langkah p{margin-top:.5rem;color:var(--tinta-2)}
.langkah small{display:inline-block;margin-top:.8rem;padding:.35rem .75rem;border-radius:999px;background:var(--permukaan);box-shadow:inset 0 0 0 1px var(--garis);font:800 var(--fs-13)/1.2 var(--font-judul);color:var(--tosca-tinta)}
.jambi-catatan{display:grid;grid-template-columns:auto 1fr;gap:.9rem;padding:1.2rem 1.3rem;border-radius:var(--r-md);background:var(--permukaan);box-shadow:0 0 0 1px var(--garis)}
.jambi-catatan .icon{width:1.5rem;height:1.5rem;color:var(--oranye-tinta);margin-top:.1rem}
.jambi-catatan strong{font:800 1.0625rem/1.3 var(--font-judul)}
.jambi-catatan p{font-size:var(--fs-15);color:var(--tinta-2);margin-top:.2rem}
.cara__waktu{margin-top:1rem}
@media (min-width:900px){.cara__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5rem}.cara__kiri{position:sticky;top:7rem;align-self:start}}

/* ---------- LAYANAN & GARANSI ---------- */
.cakupan{display:grid;gap:0;border-top:3px solid var(--tinta)}
.cakupan article{padding:2rem 0;border-bottom:1px solid var(--garis)}
.cakupan__tahap{display:flex;align-items:center;gap:.6rem;font:800 var(--fs-15)/1.2 var(--font-judul);color:var(--tosca-tinta);margin-bottom:.7rem}
.cakupan__tahap span{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--tosca);color:#fff;font-size:.8125rem}
.cakupan article > p:not(.cakupan__tahap){margin:.7rem 0 1.3rem;color:var(--tinta-2);max-width:30rem}
.cakupan__catatan{display:grid;gap:1rem;margin-top:1.6rem;color:var(--tinta-2);font-size:1rem}
.cakupan__catatan strong{color:var(--tinta)}
@media (min-width:820px){
  .cakupan{grid-template-columns:1fr 1fr}
  .cakupan article{padding:2.4rem 3rem 2.4rem 0}
  .cakupan article + article{padding-left:3rem;padding-right:0;border-left:1px solid var(--garis)}
  .cakupan__catatan{grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
}
.lipat summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none;font:800 1rem/1.35 var(--font-judul);color:var(--tinta)}
.lipat summary::-webkit-details-marker{display:none}
.lipat p{margin-top:.7rem;font-size:var(--fs-15)}
.lipat summary i,.faq summary i{position:relative;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--garis);transition:background-color .2s ease,transform .3s ease}
.lipat summary i::before,.lipat summary i::after,.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:.75rem;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%)}
.lipat summary i::after,.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s ease}
details[open] > summary i{background:var(--tosca);color:#fff;box-shadow:none}
details[open] > summary i::after{transform:translate(-50%,-50%) rotate(0)}

.garansi{display:grid;gap:1.8rem;align-items:center;margin-top:clamp(3rem,6vw,5rem);padding:clamp(1.6rem,4vw,3.25rem);border-radius:var(--r-lg);background:var(--oranye-lembut)}
.garansi__judul{font-size:clamp(1.75rem,1.1rem + 2.4vw,2.75rem)}
.garansi__judul em{color:var(--oranye-tinta)}
.garansi .pengantar{color:var(--oranye-tinta)}
.garansi .lead{margin-top:1rem;color:var(--tinta);max-width:38rem}
.garansi__alur{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 1rem;counter-reset:g}
.garansi__alur li{counter-increment:g;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem .5rem .5rem;border-radius:999px;background:var(--permukaan);font:800 var(--fs-15)/1.2 var(--font-judul)}
.garansi__alur li::before{content:counter(g);display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--oranye);color:#192D38;font-size:.8125rem}
.garansi .mini{max-width:36rem}
.garansi__teks > .mini{margin-top:1rem}
@media (min-width:820px){.garansi{grid-template-columns:auto 1fr;gap:3.5rem}}
.ajak{display:grid;gap:1.5rem;align-items:center;margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--garis)}
.ajak p:not(.mini){color:var(--tinta-2);margin-top:.4rem;max-width:34rem}
.ajak__aksi{display:grid;gap:.7rem;justify-items:start}
@media (min-width:900px){.ajak{grid-template-columns:1fr auto;gap:3rem}.ajak__aksi{justify-items:end;text-align:right}}

/* ---------- FAQ ---------- */
.faq__in{display:grid;gap:2.5rem}
.faq__kiri > p:not(.pengantar){margin:1.2rem 0 1.4rem;color:var(--tinta-2);max-width:26rem}
.faq__daftar{border-top:3px solid var(--tinta)}
.faq__daftar details{border-bottom:1px solid var(--garis)}
.faq__daftar summary{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.35rem 0;list-style:none;font:800 clamp(1.0625rem,1rem + .3vw,1.25rem)/1.3 var(--font-judul);letter-spacing:-.01em}
.faq__daftar summary::-webkit-details-marker{display:none}
.faq__daftar summary:hover{color:var(--tosca-tinta)}
.faq__jawab{padding:0 3.2rem 1.6rem 0;color:var(--tinta-2);display:grid;gap:.7rem;max-width:42rem}
@media (min-width:900px){.faq__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5rem}.faq__kiri{position:sticky;top:7rem;align-self:start}}

/* ---------- PENUTUP — senja ke malam ---------- */
.tutup{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(7rem,14vw,12rem);padding-bottom:clamp(4rem,8vw,7rem);background:linear-gradient(180deg,#10262F 0%,var(--malam) 55%,#0A1820 100%)}
.tutup::before{/* siang yang tenggelam */content:"";position:absolute;left:50%;top:-1px;z-index:-1;width:max(160vw,120rem);height:clamp(3.2rem,7vw,6.5rem);transform:translateX(-50%);border-radius:0 0 50% 50%/0 0 100% 100%;background:var(--kertas-sebelum,var(--kertas-2));box-shadow:0 1px 0 rgba(255,214,170,.5),0 18px 60px rgba(255,160,90,.3)}
.tutup::after{content:"";position:absolute;left:50%;top:0;z-index:-2;width:min(150rem,230vw);height:clamp(14rem,30vw,24rem);transform:translateX(-50%);background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(255,154,85,.55),rgba(255,138,61,.2) 40%,transparent 72%)}
:root[data-theme=gelap] .tutup::after{background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(37,208,180,.28),rgba(37,208,180,.08) 45%,transparent 72%)}
:root[data-theme=gelap] .tutup::before{box-shadow:0 1px 0 rgba(127,240,216,.3)}
.tutup__in{display:grid;gap:2.5rem;align-items:end}
.tutup__judul{font-size:clamp(2.6rem,1.2rem + 5.6vw,5.4rem);line-height:.98}
.tutup__judul em{display:block;font-style:normal;color:#7FF0D8}
.tutup .lead{margin-top:1.5rem;color:rgba(248,241,230,.8)}
.tutup .baris-tombol{margin-top:2.2rem}
.tutup .mini{color:rgba(248,241,230,.6)}
.tutup__maskot{width:clamp(7rem,16vw,13rem);height:auto;justify-self:end;filter:drop-shadow(0 24px 30px rgba(0,0,0,.5));animation:apung 6s ease-in-out infinite}
@keyframes apung{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@media (min-width:860px){.tutup__in{grid-template-columns:1fr auto}}
.kaki.malam{background:#0A1820;padding-top:0}
.kaki.malam .kaki__atas{border-top-color:rgba(248,241,230,.12)}

/* ==========================================================================
   HALAMAN PERAN — Omiy CS / Sales / Assist
   ========================================================================== */
.remah{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-13);color:rgba(248,241,230,.6);margin-bottom:1.6rem}
.remah a{display:inline-block;padding:.3rem 0;color:inherit;text-underline-offset:.2em}
.remah a:hover{color:#F8F1E6}
.rhero__tanda{display:inline-flex;align-items:center;gap:.65rem;font:800 1.125rem/1.2 var(--font-judul);color:#9FE9DA;margin-bottom:1.1rem}
.rhero__tanda img{width:2.5rem;height:2.5rem}
.rhero__judul{font-size:clamp(2.35rem,1.2rem + 3.6vw,3.75rem);line-height:1;letter-spacing:-.035em}
.rhero__judul em{display:block;font-style:normal;color:#7FF0D8;text-shadow:0 0 42px rgba(37,208,180,.4)}
.hero__desc strong{color:#F8F1E6}
.rhero .tbtn .icon{width:1.1rem;height:1.1rem}

.rpanggung{position:relative;width:min(100%,31rem);margin-inline:auto;padding-top:0}
.foto-gelembung{position:relative;width:min(70%,21rem);margin-left:auto;aspect-ratio:84/87;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 84 87' preserveAspectRatio='none'%3E%3Cpath d='M38 8H62C78.57 8 92 21.43 92 38V52C92 68.57 78.57 82 62 82Q64 91 72 95Q59 95 50 82H38C21.43 82 8 68.57 8 52V38C8 21.43 21.43 8 38 8Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 84 87' preserveAspectRatio='none'%3E%3Cpath d='M38 8H62C78.57 8 92 21.43 92 38V52C92 68.57 78.57 82 62 82Q64 91 72 95Q59 95 50 82H38C21.43 82 8 68.57 8 52V38C8 21.43 21.43 8 38 8Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
/* browser tanpa mask: foto tetap berbentuk bulatan lembut, tanpa ekor gelembung */
@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){.foto-gelembung{border-radius:34% 34% 34% 12%;overflow:hidden}}
.foto-gelembung picture,.foto-gelembung img{display:block;width:100%;height:100%}
.foto-gelembung img{object-fit:cover;filter:saturate(.92) brightness(.9)}
.foto-gelembung::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;inset:0;background:linear-gradient(200deg,transparent 45%,rgba(14,30,39,.55) 100%)}
.rpanggung .jam-bulan{top:.6rem;left:0;right:auto;flex-direction:row-reverse;align-items:flex-start;gap:.6rem;text-align:left;max-width:29%}
.rpanggung .jam-bulan svg{width:2rem;height:2rem;margin-top:.1rem}
.rpanggung .jam-bulan strong{font-size:1.9rem}
.rpanggung .jam-bulan span{display:block;margin-top:.3rem;line-height:1.35}
.rpanggung .chat{position:relative;z-index:1;width:min(100%,25.5rem);margin-top:-8rem}
.rpanggung .kartu-konteks{margin:-.7rem 0 0 auto;margin-right:-.4rem}
.rpanggung .kartu-konteks img{width:2.5rem;height:2.5rem}
.fajar--polos{padding-top:clamp(4.6rem,9.5vw,8rem);margin-top:0}
.rhero .hero__in,.bhero .bhero__in{padding-bottom:clamp(1rem,2vw,1.5rem)}
@media (min-width:960px){
  .rhero__in{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:3.5rem}
  .rpanggung{margin-inline:auto 0}
}
@media (max-width:520px){
  .rpanggung .chat{margin-top:-6.5rem}
  .foto-gelembung{width:68%}
  .rpanggung .jam-bulan strong{font-size:1.6rem}
  .rpanggung .jam-bulan svg{display:none}
}

/* ---------- Omiy CRM: layar aplikasi sebagai benda ---------- */
.layar{display:block;border-radius:var(--r-md);overflow:hidden;background:var(--permukaan);box-shadow:0 0 0 1px var(--garis),var(--bayang);text-decoration:none;color:inherit}
.layar img{width:100%;height:auto;display:block}
.layar:hover{box-shadow:0 0 0 2px var(--tosca),var(--bayang)}
.rpanggung--layar{width:min(100%,34rem);padding-top:0}
.rpanggung--layar .layar{box-shadow:0 0 0 1px rgba(248,241,230,.12),0 40px 80px -30px rgba(0,0,0,.75)}
.rpanggung--layar .kartu-konteks{margin:-1.4rem 0 0 -1rem}
.rpanggung--layar .panggung__kaki .tbtn .icon{width:1rem;height:1rem}
.rhero--crm .hero__desc{max-width:34rem}
.ujung__layar{position:relative}
.ujung__layar figcaption{margin-top:.8rem}
.beda__layar figcaption{margin-top:.7rem}
.fitur-lain{margin-top:clamp(3rem,6vw,5rem)}
.fitur-lain .h3{margin-bottom:1rem}
.fitur-lain .kendali-kakak__daftar{border-top-color:var(--tosca)}
.fitur-lain .kendali-kakak__daftar .icon{color:var(--tosca-tinta)}
.tawaran__atas .baris-tombol{margin-top:1.2rem}
@media (min-width:900px){.fitur-lain .kendali-kakak__daftar{grid-template-columns:1fr 1fr;column-gap:3rem}.lain__daftar--tiga{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.rpanggung--layar .kartu-konteks{margin-left:0}}

/* ---------- keluhan: dunia "cara lama" berwarna pasir ---------- */
.keluh{padding-top:clamp(2.5rem,5vw,4.5rem)}
.keluh__daftar{display:grid;border-top:3px solid var(--tinta)}
.keluh__butir{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;padding:1.6rem 0;border-bottom:1px solid var(--garis)}
.keluh__butir img{width:3.6rem;height:3.6rem}
.keluh__butir h3{font:900 1.25rem/1.2 var(--font-judul);letter-spacing:-.015em}
.keluh__butir p{margin-top:.35rem;color:var(--tinta-2);font-size:1rem}
.keluh__butir--simpul{grid-column:1/-1;margin-top:1.4rem;padding:1.5rem;border:0;border-radius:var(--r-md);background:var(--pasir)}
.keluh__butir--simpul h3{font-size:1.4rem}
.keluh__butir--simpul p{color:var(--tinta);max-width:52rem}
.keluh__rasa{margin-top:2.4rem;max-width:38rem}
.keluh__rasa p{font:700 1.15rem/1.45 var(--font-judul)}
.keluh__rasa p strong{font-weight:900}
@media (min-width:820px){
  .keluh__daftar{grid-template-columns:1fr 1fr;column-gap:4rem}
  .keluh__rasa{margin-left:auto}
}

/* ---------- perbandingan tiga rute ---------- */
.banding__tanya{position:relative;display:grid;gap:.4rem;justify-items:start;max-width:40rem;padding-bottom:2.2rem}
.banding__tanya .msg{max-width:100%;font-size:1.0625rem;padding:.9rem 1.15rem .8rem;box-shadow:var(--bayang-kecil)}
.banding__rute{position:relative;display:grid;gap:1rem}
.rute{display:grid;grid-template-rows:auto 1fr auto;gap:1.2rem;padding:1.4rem;border-radius:var(--r-md);background:var(--pasir);background:color-mix(in srgb,var(--pasir) 75%,transparent);box-shadow:inset 0 0 0 1.5px var(--garis)}
.rute header{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center}
.rute header img{width:3rem;height:3rem}
.rute h3{font:900 1.25rem/1.15 var(--font-judul);letter-spacing:-.015em}
.rute header p{font-size:var(--fs-13);color:var(--tinta-2);line-height:1.35}
.rute__balas{display:grid;gap:.45rem;align-content:start}
.rute__balas .msg{max-width:100%;margin:0}
.msg--toko{justify-self:stretch;border-radius:20px 6px 20px 20px;background:transparent;box-shadow:none;border:1.5px dashed var(--garis);border:1.5px dashed color-mix(in srgb,var(--pasir-tinta) 55%,transparent);color:var(--pasir-tinta)}
.rute__hasil{padding-top:1.1rem;border-top:1.5px dashed var(--garis);border-top:1.5px dashed color-mix(in srgb,var(--pasir-tinta) 35%,transparent)}
.rute__hasil h4{font:900 1.2rem/1.2 var(--font-judul);letter-spacing:-.015em;margin:.15rem 0 .35rem}
.rute__hasil p{font-size:var(--fs-15);color:var(--tinta-2);line-height:1.5}
.rute--omiy{background:var(--permukaan);box-shadow:inset 0 0 0 2.5px var(--tosca),var(--bayang)}
.rute--omiy h3,.rute--omiy .rute__hasil h4{color:var(--tosca-tinta)}
.rute--omiy .rute__hasil{border-top-color:var(--garis)}
.banding__catatan{margin-top:1.4rem;max-width:52rem}
@media (min-width:900px){
  .banding__rute{grid-template-columns:1fr 1fr 1.12fr;gap:1.1rem;align-items:stretch}
  .banding__rute::before{content:"";position:absolute;left:16%;right:17%;top:-1.3rem;height:1.3rem;border:2px solid var(--garis);border-bottom:0;border-radius:16px 16px 0 0}
  .banding__rute::after{content:"";position:absolute;left:50%;top:-1.3rem;height:1.3rem;border-left:2px solid var(--garis)}
  .banding__tanya::after{content:"";position:absolute;left:1.8rem;bottom:1.3rem;height:.9rem;border-left:2px solid var(--garis)}
  .rute--omiy{transform:translateY(-.6rem)}
}

/* ---------- yang Omiy lakukan berbeda ---------- */
.chat--mini{border-radius:var(--r-md);box-shadow:0 0 0 1px var(--garis),var(--bayang-kecil)}
.chat--mini .chat__isi{padding:1.2rem;gap:.5rem}
.beda__daftar{display:grid;gap:clamp(3rem,6vw,5.5rem)}
.beda__butir{display:grid;gap:1.6rem;align-items:center}
.beda__teks img{width:4.2rem;height:4.2rem;margin-bottom:1rem}
.beda__teks > p:not(.beda__inti){margin-top:.8rem;color:var(--tinta-2);max-width:32rem}
.beda__inti{display:grid;grid-template-columns:auto 1fr;gap:.6rem;margin-top:1.3rem;padding-top:1.1rem;border-top:1px dashed var(--garis);font:800 1rem/1.45 var(--font-judul);max-width:32rem}
.beda__inti .icon{color:var(--tosca-tinta);margin-top:.1rem}
@media (min-width:900px){
  .beda__butir{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4.5rem}
  .beda__butir:nth-child(even) .beda__teks{order:2}
  .beda__butir:nth-child(odd) .chat--mini{transform:rotate(.8deg)}
  .beda__butir:nth-child(even) .chat--mini{transform:rotate(-.8deg)}
}

/* ---------- ujungnya ---------- */
.ujung__in{display:grid;gap:3rem}
.ujung__hasil{display:grid;margin-top:2rem;border-top:3px solid var(--tinta)}
.ujung__hasil li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.35rem 0;border-bottom:1px solid var(--garis)}
.ujung__hasil strong{display:block;font:900 1.2rem/1.25 var(--font-judul);letter-spacing:-.015em}
.ujung__hasil p{margin-top:.3rem;color:var(--tinta-2);font-size:1rem}
.ujung__jujur{margin-top:1.4rem;max-width:36rem}
.ujung__chat{position:relative;padding-top:2.6rem}
.ujung__chat > img{position:absolute;top:0;right:1.2rem;width:4.6rem;height:4.6rem;z-index:2;filter:drop-shadow(0 10px 12px rgba(25,45,56,.2))}
.ujung__chat figcaption{margin-top:.8rem}
.kutipan{margin-top:2.2rem;padding-left:1.4rem;border-left:4px solid var(--oranye)}
.kutipan p{font:800 clamp(1.2rem,1.05rem + .7vw,1.5rem)/1.35 var(--font-judul);letter-spacing:-.015em}
.kutipan footer{margin-top:.8rem;font-size:var(--fs-13);color:var(--tinta-2);line-height:1.55}
@media (min-width:900px){.ujung__in{grid-template-columns:1fr 1fr;gap:5rem;align-items:start}.ujung__kanan{position:sticky;top:7rem}}

/* ---------- tetap di tangan Kakak ---------- */
.kendali-kakak__in{display:grid;gap:2.2rem}
.kendali-kakak__kiri img{width:4.8rem;height:4.8rem;margin-bottom:1.1rem}
.kendali-kakak__kiri .lead{margin-top:1rem}
.kendali-kakak__daftar{display:grid;border-top:3px solid var(--oranye)}
.kendali-kakak__daftar li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;padding:1.25rem 0;border-bottom:1px solid var(--garis);color:var(--tinta-2)}
.kendali-kakak__daftar .icon{width:1.4rem;height:1.4rem;color:var(--oranye-tinta);margin-top:.15rem}
.kendali-kakak__daftar strong{display:block;font:900 1.125rem/1.3 var(--font-judul);color:var(--tinta);letter-spacing:-.01em;margin-bottom:.15rem}
.kendali-kakak__in .mini{margin-top:1.2rem}
@media (min-width:900px){.kendali-kakak__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5rem}}

/* ---------- mulainya sederhana ---------- */
.langkah--datar{margin-bottom:1.5rem}
@media (min-width:900px){
  .langkah--datar{grid-template-columns:repeat(3,1fr);gap:2.5rem}
  .langkah--datar li{grid-template-columns:1fr;gap:1.1rem;padding-bottom:0;align-content:start}
  .langkah--datar li:not(:last-child)::before{left:4rem;right:-1.6rem;top:1.55rem;bottom:auto;border-left:0;border-top:2px dashed var(--garis)}
}

/* ---------- tawaran (tanpa angka) ---------- */
.tawaran__atas{display:grid;gap:1.4rem 4rem;margin-bottom:0}
.tawaran__atas p{color:var(--tinta-2)}
.tawaran__atas p + p{margin-top:.9rem}
.tawaran .garansi{margin-top:clamp(2.2rem,4vw,3.2rem)}
.garansi__aksi{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.3rem;margin-top:1.6rem}
.garansi__aksi .mini{max-width:20rem}
@media (min-width:900px){.tawaran__atas{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}

/* ---------- penutup halaman peran ---------- */
.tutup--peran .tutup__judul{font-size:clamp(2.3rem,1.1rem + 4.4vw,4.4rem)}
.lain{grid-column:1/-1;margin-top:1.5rem;padding-top:2rem;border-top:1px solid rgba(248,241,230,.14)}
.lain > p{font:700 1rem/1.4 var(--font-judul);color:rgba(248,241,230,.75);margin-bottom:1rem}
.lain__daftar{display:grid;gap:.8rem}
.lain__kartu{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:.9rem 1.2rem .9rem .9rem;border-radius:20px;background:rgba(248,241,230,.06);box-shadow:inset 0 0 0 1px rgba(248,241,230,.14);text-decoration:none;color:#F8F1E6;transition:background-color .2s ease,box-shadow .2s ease}
.lain__kartu:hover{background:rgba(248,241,230,.1);box-shadow:inset 0 0 0 1.5px #25D0B4}
.lain__kartu img{width:3rem;height:3rem}
.lain__kartu strong{display:block;font:900 1.125rem/1.2 var(--font-judul)}
.lain__kartu small{display:block;font-size:var(--fs-13);color:rgba(248,241,230,.68);line-height:1.4;margin-top:.1rem}
.lain__kartu .icon{color:#7FF0D8}
@media (min-width:760px){.lain__daftar{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   HALAMAN BACA — Jambi & Privasi
   ========================================================================== */
.bhero__in{display:grid;gap:2rem;align-items:end;padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem)}
.bhero__kembali{display:flex;width:fit-content;color:rgba(248,241,230,.75)!important;font-size:var(--fs-15);margin-bottom:2rem}
.bhero .hero__label{display:flex}
.bhero__kembali .icon{width:1.1rem;height:1.1rem}
.bhero__judul{font-size:clamp(2.6rem,1.2rem + 5.2vw,5.2rem);line-height:.97}
.bhero__judul em{display:block;font-style:normal;color:#7FF0D8;text-shadow:0 0 42px rgba(37,208,180,.4)}
.bhero__maskot{width:clamp(6rem,14vw,11rem);height:auto;justify-self:end;filter:drop-shadow(0 22px 28px rgba(0,0,0,.5));animation:apung 6s ease-in-out infinite}
@media (min-width:860px){.bhero__in{grid-template-columns:1fr auto}}
@media (max-width:859px){.bhero__maskot{display:none}}
.baca{padding-top:clamp(2rem,4vw,3.5rem)}
.baca__banner{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;margin-bottom:2.5rem;padding:1.2rem 1.4rem;border-radius:var(--r-md);background:var(--tosca-lembut);font-size:1rem}
.baca__banner .icon{width:1.5rem;height:1.5rem;color:var(--tosca-tinta);margin-top:.1rem}
.baca__butir{display:grid;gap:.9rem 4rem;padding:2.2rem 0;border-top:1px solid var(--garis)}
.baca__butir:first-of-type{border-top:3px solid var(--tinta)}
.baca__butir h2{font:900 clamp(1.4rem,1.2rem + .9vw,1.9rem)/1.15 var(--font-judul);letter-spacing:-.02em;text-wrap:balance}
.baca__butir > div{display:grid;gap:1rem;color:var(--tinta-2);max-width:40rem}
.baca__butir strong{color:var(--tinta)}
.baca__butir .baris-tombol{margin-top:.6rem}
@media (min-width:900px){.baca__butir{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}

/* halaman baca tidak punya bagian penutup: senja dipasang di footer */
.hal-baca .kaki.malam{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(6rem,12vw,10rem);background:linear-gradient(180deg,#10262F 0%,#0A1820 70%)}
.hal-baca .kaki.malam::before{content:"";position:absolute;left:50%;top:-1px;z-index:-1;width:max(160vw,120rem);height:clamp(3.2rem,7vw,6.5rem);transform:translateX(-50%);border-radius:0 0 50% 50%/0 0 100% 100%;background:var(--kertas-luar);box-shadow:0 1px 0 rgba(255,214,170,.5),0 18px 60px rgba(255,160,90,.3)}
.hal-baca .kaki.malam::after{content:"";position:absolute;left:50%;top:0;z-index:-2;width:min(150rem,230vw);height:clamp(12rem,26vw,20rem);transform:translateX(-50%);background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(255,154,85,.5),rgba(255,138,61,.18) 40%,transparent 72%)}
.hal-baca .kaki.malam .kaki__atas{border-top:0}
:root{--kertas-luar:#FFF7EE}
:root[data-theme=gelap]{--kertas-luar:#0E1E27}
:root[data-theme=gelap] .hal-baca .kaki.malam::after{background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(37,208,180,.26),rgba(37,208,180,.08) 45%,transparent 72%)}
:root[data-theme=gelap] .hal-baca .kaki.malam::before{box-shadow:0 1px 0 rgba(127,240,216,.3)}