/* ==========================================================================
   Gaya bersama dokumentasi hifloo.

   Arahnya editorial, bukan dasbor: judul berhuruf serif, isi berhuruf sans,
   pemisah berupa garis rambut alih-alih kotak bertumpuk. Tidak ada bayangan —
   bayangan membuat setiap blok berebut perhatian, dan halaman jadi terbaca
   seperti kumpulan widget.

   Semua huruf memakai yang sudah ada di perangkat. Tidak ada yang diunduh,
   jadi halaman tetap utuh saat dibuka tanpa koneksi atau dari berkas lokal.

   Deck presentasi TIDAK memakai berkas ini — deck berdiri sendiri supaya aman
   dikirim sebagai lampiran tanpa kehilangan tampilannya.
   ========================================================================== */

:root{
  --ink:#16202B; --ink-2:#4A5765; --ink-3:#8B98A6;
  --primary:#0A6BBE; --primary-soft:#EDF4FA;
  --accent:#C7503F;
  --bg:#FBFAF8; --surface:#fff; --border:#E6E3DD; --rule:#EFEDE8;
  --amber:#9A6B14; --amber-soft:#FBF6EA;

  --serif:ui-serif,Charter,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#ECEAE5; --ink-2:#A8B0BA; --ink-3:#727C88;
    --primary:#5FA9E4; --primary-soft:#14202B;
    --accent:#E28071;
    --bg:#14161A; --surface:#191C21; --border:#2C3138; --rule:#23272D;
    --amber:#D0A44E; --amber-soft:#211C12;
  }
}

/* Wordmark hifloo: Playwrite DE SAS, huruf baku merek. Dipakai HANYA untuk
   tulisan "hifloo", tidak untuk judul — huruf tulisan tangan melelahkan dibaca
   pada teks yang panjang.

   Berkasnya dipotong ke lima huruf yang dipakai (h/i/f/l/o) dan disimpan di
   repo, bukan diambil dari Google: halaman tetap utuh saat dibuka offline, dan
   deck yang dikirim sebagai lampiran tidak kehilangan wordmark-nya.

   Bobotnya tunggal (400) — jangan meminta tebal, browser akan memalsukannya
   dengan mencoreng bentuk huruf. */
@font-face{
  font-family:"Playwrite DE SAS";
  src:url("huruf/hifloo.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:1060px;margin:0 auto;padding:0 1.75rem}
a{color:var(--primary);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:focus-visible,button:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:3px}

/* ── Bilah atas ─────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule);padding:.85rem 0}
.topbar .wrap{display:flex;align-items:baseline;gap:1.4rem;flex-wrap:wrap}
.logo{
  font-family:"Playwrite DE SAS","Playwrite DE SAS Fallback",var(--serif);
  font-weight:400;font-size:1.05rem;color:var(--ink);text-decoration:none;
  /* Playwrite punya tinggi-x kecil dan banyak juluran; beri sedikit ruang
     supaya ekor huruf tidak terpotong bilah atas. */
  line-height:1.9;padding-bottom:.1em}
.topbar nav{margin-left:auto;display:flex;gap:1.35rem;font-size:.85rem}
.topbar nav a{color:var(--ink-2);text-decoration:none}
.topbar nav a:hover{color:var(--primary)}

/* ── Kepala halaman ─────────────────────────────────────────────────────── */
.hero{padding:4.5rem 0 2.8rem;max-width:46rem}
.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1rem}
h1{font-family:var(--serif);font-size:clamp(2.1rem,4.6vw,3.15rem);line-height:1.1;
  letter-spacing:-.018em;margin:0 0 1.1rem;font-weight:600;text-wrap:balance}
h2{font-family:var(--serif);font-size:clamp(1.35rem,2.5vw,1.72rem);line-height:1.25;
  letter-spacing:-.012em;margin:3.4rem 0 .9rem;font-weight:600;text-wrap:balance}
h3{font-family:var(--sans);font-size:.99rem;margin:2rem 0 .5rem;font-weight:640;
  letter-spacing:.005em}
.lead{font-size:clamp(1.06rem,1.5vw,1.2rem);line-height:1.62;color:var(--ink-2);
  margin:0;max-width:60ch}
.lead strong{color:var(--ink);font-weight:600}

/* ── Isi tulisan ────────────────────────────────────────────────────────── */
article{padding-bottom:6rem}
article p,article li{max-width:68ch}
article p{margin:0 0 1.15rem;color:var(--ink-2)}
article strong{color:var(--ink);font-weight:600}
article ul,article ol{margin:0 0 1.3rem;padding-left:1.15rem;color:var(--ink-2)}
article li{margin-bottom:.5rem;padding-left:.25rem}
article li::marker{color:var(--ink-3)}
article h2+p,article h3+p{margin-top:0}
code{font:.88em var(--mono);background:var(--primary-soft);padding:.12em .38em;
  border-radius:3px;color:var(--ink)}

/* Kotak catatan: garis di kiri, tanpa isian warna dan tanpa bayangan. */
.note{border-left:2px solid var(--primary);padding:.15rem 0 .15rem 1.3rem;margin:1.7rem 0}
.note p:last-child{margin-bottom:0}
.note p{color:var(--ink-2)}
.note ul{margin-bottom:0}
.note.warn{border-left-color:var(--amber)}
.note .label{display:block;font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.4rem}

/* ── Tabel ──────────────────────────────────────────────────────────────── */
.scroll{overflow-x:auto;margin:0 0 1.6rem}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:26rem}
th{text-align:left;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:0 1.4rem .55rem 0;border-bottom:1px solid var(--border)}
td{padding:.72rem 1.4rem .72rem 0;border-bottom:1px solid var(--rule);color:var(--ink-2);
  vertical-align:top;line-height:1.55}
th:last-child,td:last-child{padding-right:0}
td strong{color:var(--ink);font-weight:600}
tr:last-child td{border-bottom:0}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-3)}

/* ── Rantai alur lokasi ─────────────────────────────────────────────────── */
.chain{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:1.5rem 0 1.8rem;
  font-size:.9rem}
.chain .lnk{border-bottom:1.5px solid var(--primary);color:var(--ink);padding:.1rem .1rem .25rem}
.chain .lnk.last{border-bottom-style:dotted;border-bottom-color:var(--ink-3);color:var(--ink-2)}
.chain .gt{color:var(--ink-3)}

/* ── Langkah bernomor ───────────────────────────────────────────────────── */
.steps{list-style:none;margin:1.8rem 0;padding:0;counter-reset:step}
.steps>li{counter-increment:step;position:relative;padding-left:2.7rem;margin-bottom:2.2rem;
  max-width:none}
.steps>li::before{content:counter(step);position:absolute;left:0;top:.05em;
  font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;line-height:1}
.steps h3{margin:0 0 .5rem}

/* ── Kartu ──────────────────────────────────────────────────────────────── */
.grid{display:grid;gap:1.6rem 2.2rem;margin:1.7rem 0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3{grid-template-columns:1fr}}
/* Kotak bergaris tipis: cukup untuk memisahkan, tanpa bayangan yang
   membuat setiap blok berebut perhatian. */
.card{background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:1.15rem 1.3rem 1.25rem}
.card h3{margin:0 0 .4rem;font-size:.97rem}
.card p{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.6}
/* Kartu bertanda: aksen tipis di kiri, bukan latar berwarna. */
.card.accent{border-left:2px solid var(--accent)}

/* Kartu yang bisa diklik (beranda) */
a.card{display:block;text-decoration:none;color:inherit;transition:background-color .16s}
a.card:hover{background:var(--primary-soft)}
a.card h3{color:var(--ink)}
a.card:hover h3{color:var(--primary)}
a.card .meta{display:block;margin-top:.85rem;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}

/* ── Daftar isi menyamping ──────────────────────────────────────────────── */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 13rem;gap:4rem;align-items:start;
  padding-top:.5rem}
@media(max-width:960px){.layout{grid-template-columns:minmax(0,1fr);gap:1rem}
  .toc{position:static !important;order:-1;border-left:0;padding-left:0;
    border-top:1px solid var(--rule);padding-top:1.2rem;margin-bottom:1.5rem}}
.toc{position:sticky;top:5.5rem;font-size:.86rem;border-left:1px solid var(--rule);
  padding-left:1.3rem}
.toc p{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .8rem}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.toc a{color:var(--ink-2);text-decoration:none;display:block;line-height:1.4}
.toc a:hover{color:var(--primary)}

/* ── Kaki halaman ───────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);padding:2.5rem 0 3rem;font-size:.85rem;
  color:var(--ink-3)}
footer .wrap{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:baseline}
footer a{color:var(--ink-2)}
footer .right{margin-left:auto}

/* ── Penanda area internal ──────────────────────────────────────────────── */
.internal-bar{background:var(--amber-soft);border-bottom:1px solid var(--amber);
  color:var(--amber);font-size:.82rem;padding:.6rem 0}

@media print{
  .topbar,.toc,footer{display:none}
  body{background:#fff;font-size:11pt}
  .layout{grid-template-columns:1fr}
  h2{margin-top:2rem}
  a{color:inherit;text-decoration:none}
}