/* Artikel — nebeng token & komponen dari editorial.css, cuma nambah yang khusus halaman baca panjang. */

.art-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:56px;align-items:start}

/* ---- kepala ---- */
/* editorial.css:32 nge-set `header{position:fixed}` buat bilah nav situs. `.art-head` juga
   elemen <header>, jadi kena aturan yang sama ⇒ kepala artikel nempel di viewport dan
   nimpa isi tulisan. Di-reset di sini biar nol perlu ngutak-atik editorial.css (dipakai 5 halaman lain). */
.art-head{position:static;top:auto;left:auto;right:auto;z-index:auto;transition:none;padding:118px 0 34px;border-bottom:1px solid var(--line)}
/* ⛔ .crumb itu <nav> DI DALAM <header class="art-head">, jadi di HP dia kena
   editorial.css:194 `header nav{position:fixed;transform:translateY(-130%)}` —
   aturan buat panel menu — dan breadcrumb-nya ILANG dari layar (y:-121, nol kelihatan).
   Kejadian 28 Agu di 6 halaman, ketahuan dari audit. Semua properti panel di-reset. */
.art-head .crumb,
.art-head nav.crumb{position:static;inset:auto;transform:none;flex-direction:row;background:none;
  padding:0;gap:0;margin-left:0;box-shadow:none;border-bottom:0;transition:none;width:auto}
.crumb{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.4px;margin-bottom:22px}
.art-head .crumb a{color:var(--muted);font-size:12px;padding:0;width:auto;border-bottom:0;display:inline}
.art-head .crumb a:hover{color:var(--deep,#0369A1)}
/* dibatesin ke .art-head — halaman inti punya .phero berlatar foto gelap dan
   warna breadcrumb-nya sendiri (#9FB0BD dari editorial.css:164). Tanpa pembatas ini
   kontrasnya jatuh dari 8,01 ke 3,75:1 di 4 halaman inti. */
.art-head .crumb a{color:var(--muted)}
.art-head .crumb a:hover{color:var(--deep,#0369A1)}
.crumb span{margin:0 7px;opacity:.5}
.art-head h1{font-family:var(--disp);font-size:clamp(31px,5vw,52px);line-height:1.09;letter-spacing:-.022em;max-width:19ch}
.art-sum{font-size:clamp(17px,2.2vw,20px);color:var(--muted);margin-top:20px;max-width:60ch;line-height:1.6}
.art-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:26px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.art-meta .dot{opacity:.45}

/* ---- badan tulisan ---- */
.prose{max-width:68ch;font-size:17.5px;line-height:1.75;color:#1E293B}
.prose>*+*{margin-top:1.15em}
.prose h2{font-family:var(--disp);font-size:clamp(23px,3.4vw,31px);line-height:1.22;letter-spacing:-.015em;margin-top:2.1em;color:var(--ink);scroll-margin-top:96px}
.prose h3{font-family:var(--disp);font-size:clamp(18.5px,2.5vw,22px);line-height:1.3;margin-top:1.7em;color:var(--ink);scroll-margin-top:96px}
.prose a{color:var(--deep,#0369A1);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--cyan)}
.prose strong{font-weight:700;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.35em}
.prose li+li{margin-top:.5em}
.prose li::marker{color:var(--cyan)}
.prose blockquote{border-left:3px solid var(--cyan);padding:2px 0 2px 20px;color:var(--muted);font-style:normal}
.prose img{width:100%;max-width:100%;height:auto;border-radius:14px;display:block}
.prose figure figcaption{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:9px}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;font-variant-numeric:tabular-nums}
.prose th,.prose td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--mono);font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:500}
/* Sel tabel disimpan sebagai teks polos di Sanity (biar klien gampang ngedit), jadi
   penebalan markdown di dalam sel (mis `**Cuci AC**`) nol keikut. Kolom pertama
   hampir selalu label, jadi penekanannya dibalikin lewat gaya — teksnya sendiri utuh. */
.prose td:first-child{font-weight:600;color:var(--ink)}
.prose .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* ---- daftar isi ---- */
.toc{position:sticky;top:96px;font-size:14px}
.toc h4{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:500}
.toc a{display:block;padding:7px 0 7px 13px;border-left:2px solid var(--line);color:var(--muted);line-height:1.4}
.toc a:hover{color:var(--ink);border-left-color:var(--cyan)}
.toc a.lv3{padding-left:26px;font-size:13.5px}
.toc-m{display:none}

/* ---- blok harga ---- */
.price-box{border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff}
.price-box h4{font-family:var(--disp);font-size:18px;margin-bottom:14px}
.price-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--line);font-size:15.5px}
.price-row:last-of-type{border-bottom:0}
.price-row b{font-family:var(--mono);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.price-note{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}

/* ---- FAQ: <details> bawaan browser, nol JS, nol masalah aksesibilitas ---- */
.faq{margin-top:2.2em}
.faq details{border:1px solid var(--line);border-radius:13px;background:#fff;margin-top:11px;overflow:hidden}
.faq summary{cursor:pointer;padding:17px 46px 17px 19px;font-weight:600;font-family:var(--disp);font-size:16.5px;position:relative;list-style:none;min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:19px;top:50%;width:9px;height:9px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .fa{padding:15px 19px 19px;color:#334155;font-size:16px;line-height:1.7}

/* ---- CTA di tengah tulisan ---- */
.art-cta{background:var(--ink);border-radius:18px;padding:30px 28px;margin:2.4em 0;color:#fff}
.art-cta h4{font-family:var(--disp);font-size:clamp(20px,3vw,25px);line-height:1.25;margin-bottom:9px}
.art-cta p{color:#B9C4CC;font-size:15.5px;margin-bottom:19px;max-width:46ch}
.art-cta .btn-wa{font-size:15px}

/* ---- kartu penulis ---- */
.byline{display:flex;gap:15px;align-items:center;border-top:1px solid var(--line);margin-top:3em;padding-top:26px}
.byline .av{width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-size:18px;flex:0 0 auto}
.byline b{font-family:var(--disp);font-size:16px;display:block}
.byline span{font-size:13.5px;color:var(--muted);line-height:1.5;display:block;margin-top:3px}

/* ---- artikel terkait ---- */
.rel{border-top:1px solid var(--line);margin-top:3em;padding-top:30px}
.rel h4{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:17px;font-weight:500}
.rel-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:13px}
.rel-c{border:1px solid var(--line);border-radius:13px;padding:17px 18px;background:#fff;transition:border-color .2s,transform .2s}
.rel-c:hover{border-color:var(--cyan);transform:translateY(-2px)}
.rel-c b{font-family:var(--disp);font-size:16px;line-height:1.32;display:block;color:var(--ink)}
.rel-c span{font-size:13px;color:var(--muted);display:block;margin-top:7px}

@media(max-width:980px){
  /* ⛔ `1fr` doang NOL cukup: item grid punya `min-width:auto` bawaan, jadi isi yang lebar
     (tabel, gambar 800px) MAKSA kolomnya melar. Terukur di HP 390px: .prose jadi 518px,
     scrollWidth 540 ⇒ halaman melar 150px ke kanan. Kejadian 29 Agu, boss yang nemu dari HP.
     `minmax(0,1fr)` + `min-width:0` di anaknya = kolom nurut lebar layar. */
  .art-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .art-grid > *{min-width:0}
  .art-wrap{padding:0 22px}
  .art-head{padding:96px 0 26px}
  /* TOC di HP DISEMBUNYIKAN (boss 28 Agu) — di layar kecil dia nongol sebagai kotak
     "ISI HALAMAN" tepat di atas paragraf pertama dan bikin pembaca ketemu daftar
     sebelum ketemu isinya. Di desktop TOC tetap ada (di kolom kanan, nol ganggu). */
  .toc{display:none}
  .toc-d{display:none}
  .toc-m{display:block;border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden}
  .toc-m summary{cursor:pointer;padding:14px 18px;font-family:var(--mono);font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);min-height:44px;display:flex;align-items:center}
  .toc-m .toc-list{padding:0 18px 14px}
  .prose{font-size:17px;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .faq summary::after,.rel-c{transition:none}
}

/* ---- header di halaman artikel ----
   Halaman artikel nol punya hero berfoto gelap, jadi bilah nav duduk di atas latar terang.
   Warna bawaannya putih (dirancang buat di atas foto) ⇒ nav & tombol Booking nyaris ilang.
   Dipaksa memakai tampilan `header.solid` sejak scroll 0. `:has()` dipakai supaya aturannya
   nempel cuma di halaman yang punya .art-head — nol nyentuh 5 halaman inti. */
body:has(.art-head) header{background:var(--paper);border-bottom:1px solid var(--line)}
body:has(.art-head) header .logo{color:var(--ink)}
body:has(.art-head) header nav a{color:var(--muted)}
body:has(.art-head) header nav a:hover{color:var(--ink)}
body:has(.art-head) header .book{border-color:var(--ink);color:var(--ink)}
body:has(.art-head) header .book:hover{background:var(--ink);color:#fff}
body:has(.art-head) .burger svg{color:var(--ink)}
@media(max-width:640px){
  /* panel nav mobile tetap navy ⇒ tautannya wajib putih, dan burger balik gelap pas nav ketutup */
  body:has(.art-head) header nav a{color:#fff}
  body:has(.art-head) header.nav-open .burger svg{color:var(--ink)}
  /* ⛔ editorial.css:200 `body.hero-light header:not(.solid) .logo{color:#fff}` (0,3,3)
     NGALAHIN aturan artikel (0,2,3) ⇒ logo putih di atas header putih = ILANG.
     Kejadian 28 Agu, boss yang nemu dari HP. Spesifisitasnya disamain + dilebihin. */
  body.hero-light:has(.art-head) header:not(.solid) .logo{color:var(--ink)}
  /* "AC" tetap cyan — kalau ikut di-navy-in, logonya beda sendiri dari 5 halaman inti */
  body.hero-light:has(.art-head) header:not(.solid) .logo b{color:var(--cyan)}
  body.hero-light:has(.art-head) header:not(.solid) .burger svg{color:var(--ink)}
}

/* ---- daftar artikel (editorial) ----
   ⛔ Nama class SENGAJA `.acard`, BUKAN `.pc`: `.pc` udah dipakai kartu harga di
   editorial.css:113 (latar gelap + `.pc .v{color:#fff}`). Sempat bentrok 29 Agu ⇒
   kartu harga jadi putih dan ANGKANYA ILANG (putih di putih), 'rb'-nya doang kelihatan. */
.idx-head{padding:124px 0 44px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff 0%,var(--paper) 100%)}
.idx-head h1{font-family:var(--disp);font-size:clamp(38px,7.4vw,78px);line-height:.98;
  letter-spacing:-.035em;margin-top:14px}
.idx-sum{font-size:clamp(16.5px,2.1vw,19px);color:var(--muted);max-width:52ch;margin:22px 0 6px;line-height:1.6}

/* sorotan artikel terbaru */
.feat{display:grid;grid-template-columns:1.15fr .85fr;gap:0;margin:46px 0 0;border:1px solid var(--line);
  border-radius:20px;overflow:hidden;background:#fff;transition:border-color .3s,transform .3s,box-shadow .3s}
.feat:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 18px 44px rgba(15,23,42,.09)}
.feat-img{position:relative;overflow:hidden;background:var(--ink);min-height:330px}
.feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.feat:hover .feat-img img{transform:scale(1.045)}
.feat-tx{padding:38px 38px 34px;display:flex;flex-direction:column;justify-content:center}
.feat-tag{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  background:var(--ink);color:#fff;padding:6px 12px;border-radius:999px;margin-bottom:18px}
.feat-tx h2{font-family:var(--disp);font-size:clamp(23px,2.9vw,33px);line-height:1.16;letter-spacing:-.02em;color:var(--ink)}
.feat-tx p{color:var(--muted);font-size:16px;line-height:1.62;margin-top:14px;max-width:46ch}

/* pemisah */
.idx-lbl{display:flex;align-items:center;gap:18px;margin:62px 0 22px}
.idx-lbl span{font-family:var(--mono);font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.idx-lbl i{flex:1;height:1px;background:var(--line)}

/* kartu */
.acard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:26px}
.acard{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s,box-shadow .3s}
.acard:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 16px 38px rgba(15,23,42,.08)}
.acard-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.acard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.acard:hover .acard-img img{transform:scale(1.055)}
.acard-ph{position:absolute;inset:0;background:linear-gradient(135deg,#0F172A,#1E293B)}
.acard-no{position:absolute;left:16px;bottom:12px;font-family:var(--disp);font-size:40px;font-weight:700;
  color:rgba(255,255,255,.9);line-height:1;text-shadow:0 2px 18px rgba(0,0,0,.45);pointer-events:none}
.acard-tx{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.acard-meta{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.6px;color:var(--muted);text-transform:uppercase}
.acard-meta i{opacity:.5;font-style:normal}
.acard-tx h3{font-family:var(--disp);font-size:19.5px;line-height:1.28;letter-spacing:-.012em;color:var(--ink);margin-top:11px}
.acard-tx p{color:var(--muted);font-size:14.5px;line-height:1.58;margin-top:9px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acard-go,.feat .acard-go{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;
  color:var(--deep,#0369A1);margin-top:auto;padding-top:17px}
.feat .acard-go{margin-top:20px;padding-top:0}
.acard-go svg{width:15px;height:15px;transition:transform .3s}
.acard:hover .acard-go svg,.feat:hover .acard-go svg{transform:translateX(4px)}

@media(max-width:900px){
  .feat{grid-template-columns:1fr}
  .feat-img{min-height:220px;aspect-ratio:16/9}
  .feat-tx{padding:26px 22px 28px}
  .idx-head{padding:100px 0 34px}
  .acard-grid{grid-template-columns:1fr;gap:18px}
}
@media(prefers-reduced-motion:reduce){
  .feat,.acard,.feat-img img,.acard-img img,.acard-go svg{transition:none}
  .feat:hover,.acard:hover{transform:none}
  .feat:hover .feat-img img,.acard:hover .acard-img img{transform:none}
}

/* ---- header di halaman artikel ----
   Halaman artikel nol punya hero berfoto gelap, jadi bilah nav duduk di atas latar terang.
   Warna bawaannya putih (dirancang buat di atas foto) ⇒ nav & tombol Booking nyaris ilang.
   Dipaksa memakai tampilan `header.solid` sejak scroll 0. `:has()` dipakai supaya aturannya
   nempel cuma di halaman yang punya .art-head — nol nyentuh 5 halaman inti. */
body:has(.art-head) header{background:var(--paper);border-bottom:1px solid var(--line)}
body:has(.art-head) header .logo{color:var(--ink)}
body:has(.art-head) header nav a{color:var(--muted)}
body:has(.art-head) header nav a:hover{color:var(--ink)}
body:has(.art-head) header .book{border-color:var(--ink);color:var(--ink)}
body:has(.art-head) header .book:hover{background:var(--ink);color:#fff}
body:has(.art-head) .burger svg{color:var(--ink)}
@media(max-width:640px){
  /* panel nav mobile tetap navy ⇒ tautannya wajib putih, dan burger balik gelap pas nav ketutup */
  body:has(.art-head) header nav a{color:#fff}
  body:has(.art-head) header.nav-open .burger svg{color:var(--ink)}
  /* ⛔ editorial.css:200 `body.hero-light header:not(.solid) .logo{color:#fff}` (0,3,3)
     NGALAHIN aturan artikel (0,2,3) ⇒ logo putih di atas header putih = ILANG.
     Kejadian 28 Agu, boss yang nemu dari HP. Spesifisitasnya disamain + dilebihin. */
  body.hero-light:has(.art-head) header:not(.solid) .logo{color:var(--ink)}
  /* "AC" tetap cyan — kalau ikut di-navy-in, logonya beda sendiri dari 5 halaman inti */
  body.hero-light:has(.art-head) header:not(.solid) .logo b{color:var(--cyan)}
  body.hero-light:has(.art-head) header:not(.solid) .burger svg{color:var(--ink)}
}

/* ---- daftar artikel ---- */
.alist{list-style:none;display:grid;gap:14px;max-width:860px}
.alist li a{display:block;border:1px solid var(--line);border-radius:16px;padding:24px 26px;background:#fff;transition:border-color .22s,transform .22s}
.alist li a:hover{border-color:var(--cyan);transform:translateY(-2px)}
.alist .adate{font-family:var(--mono);font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:9px}
.alist b{font-family:var(--disp);font-size:clamp(19px,2.9vw,24px);line-height:1.28;color:var(--ink);display:block;letter-spacing:-.012em}
.alist .asum{color:var(--muted);font-size:15.5px;line-height:1.6;display:block;margin-top:9px;max-width:62ch}
.alist .amore{font-family:var(--mono);font-size:12.5px;color:var(--deep,#0369A1);display:block;margin-top:15px}
@media(prefers-reduced-motion:reduce){.alist li a{transition:none}}