/* ============================================================================
   site.css — shell bersama untuk halaman BARU v1 (61/62/63).
   Dibuat 2026-09-17. Referensi token warna dari landing/index.html (--bg
   #FBFAF7 dkk, basis terang arahan Owner 16 Agu) — supaya halaman baru
   konsisten dengan homepage, BUKAN sistem 720px/--cream milik 4 artikel lama.

   ⛔ TIDAK menyentuh homepage (landing/index.html) atau 4 artikel lama —
   ketiganya tetap mandiri, tidak mereferensikan berkas ini. Ini genuinely
   berkas baru untuk rute baru saja (63 §Urutan pengerjaan langkah 1).

   ⚠️ INI BUKAN framework/build step. Static CSS biasa, dimuat lewat
   <link rel="stylesheet" href="/css/site.css"> di setiap halaman baru —
   nol dependency baru, nol perubahan cara deploy (rsync + wrangler pages
   deploy, sama persis seperti sekarang). "Komponen" di brief teknis (62 §4)
   diimplementasikan sebagai kelas CSS + markup yang konsisten di sini,
   bukan React/Vue component. Lihat catatan lengkap di 62 §header.
   =========================================================================== */

:root{
  --bg:#FBFAF7;
  --bg-2:#F3F1EA;
  --card:#FFFFFF;
  --ink:#12120F;
  --ink-2:#1C1C17;
  --on-cream:#14140F;
  --on-cream-soft:#55554A;
  --on-dark:#F6F3EC;
  --on-dark-soft:#AFAFA1;
  --accent:#E4DE62;
  --line:#E2DED2;
  --line-dark:#2E2E26;
  --wa:#1FA855;
  --radius:16px;
  --radius-lg:24px;
  --pill:999px;
  --w:1140px;
  --w-article:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0; background:var(--bg); color:var(--on-cream);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--w); margin:0 auto; padding:0 22px}
.wrap-article{max-width:var(--w-article); margin:0 auto; padding:0 20px}
h1,h2,h3{margin:0 0 .5em; line-height:1.2; letter-spacing:-.02em; font-weight:800}
h1{font-size:clamp(30px,5vw,48px)}
h2{font-size:clamp(24px,3.6vw,34px)}
h3{font-size:19px; letter-spacing:-.012em; font-weight:700}
p{margin:0 0 1.1em}
a{color:inherit}
img{max-width:100%; display:block}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent); outline-offset:3px; border-radius:6px;
}

/* ---------- eyebrow / kicker ---------- */
.eyebrow{
  display:inline-block; background:var(--accent); color:var(--ink);
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 14px; border-radius:var(--pill); margin-bottom:18px;
}

/* ---------- tombol (identik dengan homepage) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  min-height:52px; padding:14px 26px; border-radius:var(--pill);
  font-weight:700; font-size:16.5px; text-decoration:none; border:2px solid transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn-accent{background:var(--accent); color:var(--ink)}
.btn-accent:hover{background:#D8D24E}
.btn-outline{border-color:var(--line); color:var(--on-cream); background:transparent}
.btn-outline:hover{border-color:var(--ink); background:rgba(18,18,15,.04)}
.btns{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- SiteHeader — nav 5 item + Masuk + Demo, sticky ---------- */
.site-header{position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line); background:var(--bg)}
.site-header .row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0}
.site-brand{display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:800; font-size:18px; letter-spacing:-.02em; text-decoration:none; color:var(--on-cream)}
.site-brand img{width:32px; height:32px; flex:none}
.site-nav{display:none; align-items:center; gap:28px; list-style:none; margin:0; padding:0}
.site-nav a{font-weight:600; font-size:15px; text-decoration:none; color:var(--on-cream-soft)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--on-cream)}
.site-actions{display:flex; align-items:center; gap:16px}
.site-login{font-weight:600; font-size:14.5px; text-decoration:none; color:var(--on-cream-soft); display:none}
.site-login:hover{color:var(--on-cream)}
.site-actions .btn{min-height:44px; padding:10px 20px; font-size:15px}
.site-hamburger{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:transparent; cursor:pointer}
@media(min-width:860px){
  .site-nav{display:flex}
  .site-login{display:inline-flex}
  .site-hamburger{display:none}
}
.site-drawer{display:none; border-top:1px solid var(--line); background:var(--bg)}
.site-drawer.is-open{display:block}
.site-drawer ul{list-style:none; margin:0; padding:14px 0}
.site-drawer li{padding:0 22px}
.site-drawer a{display:block; padding:12px 0; font-weight:600; text-decoration:none; color:var(--on-cream); border-bottom:1px solid var(--line)}
@media(min-width:860px){ .site-drawer{display:none!important} }

/* ---------- SiteFooter ---------- */
.site-footer{border-top:1px solid var(--line); background:var(--bg-2); padding:52px 0 110px}
.site-footer .cols{display:grid; gap:32px; grid-template-columns:1fr; margin-bottom:36px}
@media(min-width:700px){ .site-footer .cols{grid-template-columns:repeat(4,1fr)} }
.site-footer h3{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--on-cream-soft); margin:0 0 14px}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin-bottom:10px}
.site-footer a{text-decoration:none; color:var(--on-cream); font-size:15px}
.site-footer a:hover{text-decoration:underline}
.site-footer .legal{border-top:1px solid var(--line); padding-top:24px; font-size:14px; color:var(--on-cream-soft)}
.site-footer .legal p{margin:0 0 6px}
.site-footer .legal a{color:inherit; text-decoration:underline; text-underline-offset:3px}

/* ---------- StickyCta (mobile) ---------- */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:var(--bg);
  border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(18,18,15,.08)}
.sticky-cta .btn{flex:1; justify-content:center; min-height:48px; font-size:15.5px}
@media(min-width:860px){ .sticky-cta{display:none} }
body.has-sticky-cta{padding-bottom:78px}
@media(min-width:860px){ body.has-sticky-cta{padding-bottom:0} }

/* ---------- CtaBlock ---------- */
.cta-block{background:var(--ink); color:var(--on-dark); padding:52px 0; border-radius:var(--radius-lg); margin:56px 0}
.cta-block .wrap{text-align:center}
.cta-block h2{color:#fff; margin-bottom:.4em}
.cta-block p{color:var(--on-dark-soft); max-width:56ch; margin:0 auto 24px}
.cta-block .btns{justify-content:center}
.cta-block .btn-outline{border-color:var(--line-dark); color:var(--on-dark)}
.cta-block .btn-outline:hover{border-color:var(--on-dark-soft); background:rgba(246,243,236,.06)}

/* ---------- section band ---------- */
section{padding:64px 0}
.sec-head{max-width:52ch; margin-bottom:32px}
.sec-head p{color:var(--on-cream-soft); font-size:18px; margin:0}

/* ---------- PricingCard (skeleton — 63 §1: JANGAN isi angka) ---------- */
.pricing-grid{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:860px){ .pricing-grid{grid-template-columns:repeat(3,1fr)} }
.pricing-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 24px; display:flex; flex-direction:column}
.pricing-card h3{margin-bottom:.3em}
.pricing-card .price{font-size:15px; color:var(--on-cream-soft); font-weight:600}
.pricing-card ul{list-style:none; margin:16px 0; padding:0; flex:1}
.pricing-card li{padding:8px 0; border-top:1px solid var(--line); font-size:14.5px; color:var(--on-cream-soft)}
.pricing-card li:first-child{border-top:0}
.pricing-card.is-featured{border-color:var(--ink); box-shadow:0 0 0 2px var(--ink)}
.pricing-card .badge{display:inline-block; background:var(--accent); color:var(--ink); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:var(--pill); margin-bottom:12px; align-self:flex-start}
.pricing-card .price-big{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:4px 0}
.pricing-card .price-note{font-size:13px; color:var(--on-cream-soft); margin-bottom:14px}

/* ---------- FeatureCard ---------- */
.feature-grid{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:640px){ .feature-grid{grid-template-columns:repeat(2,1fr)} }
.feature-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px}

/* ---------- Faq (accordion, native <details>) ---------- */
.faq-list{max-width:76ch}
.faq-list details{border-bottom:1px solid var(--line); padding:18px 0}
.faq-list summary{cursor:pointer; font-weight:700; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+"; font-weight:400; color:var(--on-cream-soft); flex:none}
.faq-list details[open] summary::after{content:"–"}
.faq-list p{margin:12px 0 0; color:var(--on-cream-soft)}

/* ---------- ScreenshotFigure ---------- */
.shot-figure{margin:0}
.shot-figure img{border-radius:var(--radius); border:1px solid var(--line)}
.shot-figure figcaption{margin-top:10px; font-size:13.5px; color:var(--on-cream-soft)}

/* ---------- dua-lapis (awam / detail teknis) — dipakai /keamanan ---------- */
.layer-detail{margin-top:8px}
.layer-detail summary{cursor:pointer; font-weight:700; color:var(--on-cream); padding:14px 0}
.layer-detail[open] summary{margin-bottom:8px}

/* ---------- ArticleCard ---------- */
.article-grid{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:700px){ .article-grid{grid-template-columns:repeat(2,1fr)} }
.article-card{display:block; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.article-card h3{margin-bottom:.4em}
.article-card p{color:var(--on-cream-soft); font-size:15px; margin:0}

/* ---------- {{PERLU ANDA}} placeholder — TAK PERNAH tampil di produksi tanpa tanda ---------- */
.perlu-anda{background:#FFF4D6; border:1px dashed #C9A227; border-radius:10px; padding:12px 16px; font-size:14.5px; color:#5A4300; margin:0 0 1.2em}
.perlu-anda b{font-weight:800}

/* ---------- StageRow — dipakai /produk/{crm,erp,workforce} (75 langkah 3):
   satu bagian per tahap alur kerja, screenshot asli + teks berdampingan,
   arah gambar berselang-seling kiri/kanan lewat .is-reverse ---------- */
.stage-row{display:grid; gap:28px; align-items:center; grid-template-columns:1fr; margin-bottom:56px}
@media(min-width:860px){
  .stage-row{grid-template-columns:1.1fr 1fr; gap:48px}
  .stage-row.is-reverse .stage-row-media{order:2}
  .stage-row.is-reverse .stage-row-text{order:1}
}
.stage-row-text .stage-no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; font-weight:700; color:var(--on-cream-soft); letter-spacing:.04em}
.stage-row-text h3{margin:.3em 0 .5em}
.stage-row-text .stage-recorded{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:14.5px; color:var(--on-cream-soft)}
.stage-row-text .stage-recorded b{color:var(--on-cream); font-weight:700}
.stage-row-media .shot-figure img{width:100%; height:auto}

/* ---------- ProductCard — 3 kartu modul di homepage §kenapa (75 langkah 3) ---------- */
.product-grid{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:700px){ .product-grid{grid-template-columns:repeat(3,1fr)} }
.product-card{display:block; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 24px; transition:border-color .2s ease}
.product-card:hover{border-color:var(--ink)}
.product-card .subdomain{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:var(--on-cream-soft); display:block; margin-bottom:10px}
.product-card h3{margin:0 0 .4em}
.product-card p{color:var(--on-cream-soft); font-size:14.5px; margin:0 0 14px}
.product-card .arrow{font-weight:700; font-size:14.5px}

/* ---------- PanduanVideo — dipakai /panduan (75 langkah 4). Video 9:16
   (rekaman layar HP), sengaja TIDAK dilebarkan penuh — dibatasi lebar
   seperti embed Reels/TikTok di desktop, tetap penuh di HP. ---------- */
.panduan-layout{display:grid; gap:32px; grid-template-columns:1fr; align-items:start}
@media(min-width:860px){ .panduan-layout{grid-template-columns:340px 1fr; gap:48px} }
.panduan-video-wrap{max-width:340px; margin:0 auto}
@media(min-width:860px){ .panduan-video-wrap{margin:0; position:sticky; top:88px} }
.panduan-video-wrap video{width:100%; height:auto; display:block; border-radius:var(--radius-lg); border:1px solid var(--line); background:#000; box-shadow:0 20px 48px rgba(18,18,15,.18)}
.toc-list{list-style:none; margin:0; padding:0; counter-reset:toc}
.toc-group{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--on-cream-soft); margin:22px 0 10px}
.toc-group:first-child{margin-top:0}
.toc-item{margin:0 0 2px}
.toc-item button{display:flex; align-items:baseline; gap:12px; width:100%; text-align:left; background:none; border:0; border-radius:10px; padding:10px 12px; cursor:pointer; font:inherit; color:var(--on-cream)}
.toc-item button:hover{background:var(--bg-2)}
.toc-item.is-active button{background:var(--accent)}
.toc-item .toc-time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; color:var(--on-cream-soft); flex:none; width:38px}
.toc-item.is-active .toc-time{color:var(--ink)}
.toc-item .toc-title{font-weight:600; font-size:15px}