/* ============================================================
   skorika.com — css/page/panduan.css
   Gaya khas halaman panduan/artikel. 31 Agustus 2026.

   Dimuat SESUDAH page/about.css dan sengaja bersandar padanya:
   .wrap, .hero, .sec, .pill, .pill-row, .foot dan kawan-kawannya
   sudah didefinisikan di sana. Berkas ini hanya menambahkan yang
   khas artikel — badan teks panjang, kartu yang bisa diklik, dan
   bilah bahasa.
   ============================================================ */

/* ===== Bilah atas ===== */
.top-in{display:flex;align-items:center;gap:16px;padding:14px 0}
.top-nav{display:flex;align-items:center;gap:18px;margin-left:auto;
  font-size:15px;font-weight:600;color:var(--cream-dim)}
.top-nav a:hover{color:var(--cream)}
/* Tautan pindah bahasa dibedakan dengan garis tepi, bukan sekadar teks:
   di antara tautan lain yang seragam, tanpa pembeda ia tidak terlihat
   sebagai pilihan melainkan sebagai satu menu biasa. */
.lang-link{border:1px solid var(--line);border-radius:999px;padding:5px 13px;
  font-size:13.5px;font-weight:700;color:var(--cream-dim)}
.lang-link:hover{border-color:var(--pink);color:var(--cream)}
@media(max-width:620px){.hide-sm{display:none}}

/* ===== Kepala artikel ===== */
.eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--peach);margin-bottom:14px}
.art-hero{padding-bottom:clamp(18px,3vw,30px)}
.art-hero h1{font-size:clamp(32px,5.6vw,52px);line-height:1.08;max-width:20ch}
.crumb{display:inline-block;margin-bottom:18px;font-size:14px;font-weight:700;
  color:var(--cream-dim2)}
.crumb:hover{color:var(--pink)}
.art-meta{margin-top:18px;font-size:14px;font-weight:600;color:var(--cream-dim2)}

/* ===== Badan artikel =====
   max-width 68 karakter: baris yang lebih panjang dari itu membuat mata
   kehilangan awal baris berikutnya, dan artikel ini memang untuk dibaca
   utuh, bukan dipindai. */
.art-body{padding-bottom:clamp(30px,5vw,54px);max-width:min(100%,760px);margin-left:0}
.art-body p{margin-top:18px;font-size:17.5px;line-height:1.72;color:var(--cream-dim);
  max-width:68ch}
.art-body .lead{font-size:20px;line-height:1.62;color:var(--cream)}
.art-body h2{margin-top:clamp(34px,4vw,48px);font-size:clamp(23px,3.2vw,29px);
  font-weight:800;letter-spacing:-.02em;color:var(--cream)}
.art-body h2 + p{margin-top:12px}
.art-body ul,.art-body ol{margin:18px 0 0;padding-left:24px;max-width:68ch;
  font-size:17.5px;line-height:1.7;color:var(--cream-dim)}
.art-body li{margin-top:10px}
.art-body li::marker{color:var(--peach)}
.art-body strong{color:var(--cream);font-weight:700}
.art-body em{color:var(--cream)}
/* Kutipan dipakai untuk contoh berpasangan (versi buruk vs versi baik),
   jadi jaraknya rapat dan garis tepinya berada di kiri sebagai penanda. */
.art-body blockquote{margin:26px 0 0;padding:18px 22px;border-left:3px solid var(--pink);
  background:var(--plum-3);border-radius:0 var(--r) var(--r) 0;max-width:68ch}
.art-body blockquote p{margin-top:0;font-size:16.5px;color:var(--cream-dim)}
.art-body blockquote p + p{margin-top:12px}

/* ===== Kartu artikel lain ===== */
.pill-link{display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.pill-link:hover{border-color:var(--pink);transform:translateY(-2px)}
.pill-link h3{font-size:18.5px;line-height:1.3}
.pill-cta{margin-top:auto;padding-top:16px;font-size:14px;font-weight:700;color:var(--peach)}

/* ===== Ajakan penutup ===== */
.art-cta{border-top:1px solid var(--line);margin-top:clamp(20px,3vw,34px)}
.art-cta h2{font-size:clamp(24px,3.6vw,32px);font-weight:900;letter-spacing:-.025em}
.art-cta .cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}