/* ====== Reset & Variabel ====== */
:root{
  --primary:#0f766e;
  --bg:#f8fafc;
  --card:#fff;
  --text:#1e293b;
  --muted:#64748b;
  --radius:12px;
  --max-width:960px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ====== Layout ====== */
.container{max-width:var(--max-width);margin:auto;padding:1rem}
header{margin-bottom:1.5rem}
.badge{
  display:inline-block;
  background:var(--primary);color:#fff;
  font-size:.75rem;padding:.25rem .75rem;border-radius:999px;
}
.meta{font-size:.9rem;color:var(--muted);margin-bottom:1rem}
.lead{font-size:1.125rem;font-weight:600;margin-bottom:1rem}

/* ====== Gambar ====== */
.hero-img,.figure-img{
  width:100%;height:auto;border-radius:var(--radius);
}
figure{margin:1rem 0}
figcaption{font-size:.875rem;color:var(--muted);margin-top:.25rem}

/* ====== Kutipan ====== */
blockquote{
  background:#f1f5f9;border-left:4px solid var(--primary);
  padding:1rem;margin:1.5rem 0;font-style:italic
}

/* ====== Tombol ====== */
.btn{
  display:inline-block;background:var(--primary);color:#fff;
  font-weight:600;padding:.75rem 1.5rem;border-radius:8px;
}
.btn:hover{background:#0d9488;text-decoration:none}
.btn-float{
  position:fixed;bottom:1rem;left:1rem;
  background:var(--primary);color:#fff;
  padding:.5rem .75rem;border-radius:999px;
  font-size:.875rem;box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* ====== Share ====== */
.share{margin:2rem 0;font-size:.9rem}
.share a{margin-left:.5rem}

/* ====== Tabel ====== */
.table-wrapper{overflow-x:auto;margin:1rem 0}
table{min-width:600px;width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:.75rem;text-align:left;border-bottom:1px solid #e2e8f0}
th{background:var(--primary);color:#fff}
@media (min-width:768px){.table-wrapper{overflow-x:visible}}