/* Gober168 — mobile-first, ringan (no framework). Target Core Web Vitals: LCP<2.5s, CLS<0.1 */
:root{
  --orange:#ff6a00; --orange-dark:#e85d00; --ink:#14181f; --muted:#5b6470;
  --line:#e7e9ee; --bg:#ffffff; --soft:#f6f7f9; --radius:14px; --maxw:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); font-size:17px; line-height:1.7;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--orange-dark); text-decoration:none}
a:hover{text-decoration:underline}

/* layout */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px}
header.site{border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(6px); z-index:10}
.bar{display:flex; align-items:center; justify-content:space-between; height:58px; max-width:var(--maxw); margin:0 auto; padding:0 18px}
.brand{font-weight:800; font-size:20px; color:var(--ink); letter-spacing:-.3px}
.brand b{color:var(--orange)}
nav.main a{color:var(--ink); font-weight:600; font-size:15px; margin-left:16px}
@media(max-width:560px){ nav.main a{margin-left:12px; font-size:14px} .brand{font-size:18px} }

/* hero / headings */
h1{font-size:30px; line-height:1.25; letter-spacing:-.5px; margin:24px 0 12px}
h2{font-size:23px; line-height:1.3; letter-spacing:-.3px; margin:34px 0 12px; padding-top:6px}
h3{font-size:19px; margin:22px 0 8px}
@media(min-width:680px){ h1{font-size:38px} }
p{margin:0 0 16px}
.lead{font-size:18px; color:#2b313b}

/* breadcrumb */
.crumb{font-size:13px; color:var(--muted); margin:14px 0 0}
.crumb a{color:var(--muted)}

/* buttons — tap target >=48px */
.btn{display:inline-block; background:var(--orange); color:#fff; font-weight:700; padding:13px 20px; border-radius:999px; min-height:48px; line-height:22px}
.btn:hover{background:var(--orange-dark); text-decoration:none}

/* cards grid */
.grid{display:grid; grid-template-columns:1fr; gap:14px; margin:18px 0}
@media(min-width:560px){ .grid{grid-template-columns:1fr 1fr} }
.card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
.card .body{padding:14px}
.card h3{margin:0 0 6px; font-size:17px}
.card p{font-size:14px; color:var(--muted); margin:0}
.tag{display:inline-block; font-size:12px; font-weight:700; color:var(--orange-dark); background:#fff2e8; padding:3px 9px; border-radius:999px; margin-bottom:8px}
.rating{font-weight:800; color:var(--ink)}

/* tables */
.tablewrap{overflow-x:auto; margin:14px 0}
table{border-collapse:collapse; width:100%; font-size:15px; min-width:480px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
th{background:var(--soft); font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted)}

/* FAQ */
.faq details{border:1px solid var(--line); border-radius:12px; padding:4px 14px; margin:10px 0; background:#fff}
.faq summary{font-weight:700; cursor:pointer; padding:12px 0; min-height:48px; display:flex; align-items:center}
.faq details p{margin:0 0 14px}

/* callout placeholder E-E-A-T (HAPUS setelah diisi) */
.fill{border-left:4px solid var(--orange); background:#fff7f0; padding:12px 14px; border-radius:8px; margin:14px 0; font-size:14px; color:#7a4a1f}
.fill b{color:var(--orange-dark)}

/* author / meta */
.byline{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); margin:10px 0 6px}
.byline .who{font-weight:700; color:var(--ink)}

/* footer */
footer.site{border-top:1px solid var(--line); margin-top:46px; padding:26px 0; font-size:14px; color:var(--muted)}
footer.site a{color:var(--muted)}
footer.site .links a{margin-right:14px; display:inline-block; margin-bottom:6px}

.card img.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#1a1f29}

/* related / sibling links */
.related{font-size:15px; background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:18px 0}
.related b{color:var(--ink)}