/* Khusus situs drtarmizi.id. Token dan komponen dari design system "Dr. Tarmizi" (tokens.css, komponen.css). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--tinggi-bilah) + var(--space-4)); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--merek); z-index: 10; }
.wp-bilah { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }

/* Bilah: logo (tanda di HP, mendatar mulai 600px) + navigasi */
.situs-logo { display: inline-flex; align-items: center; min-height: var(--sentuh-min); flex: none; }
.situs-logo img { display: block; height: 28px; width: auto; }
.situs-nav { display: flex; gap: var(--space-1); }
.situs-nav a { display: inline-flex; align-items: center; min-height: var(--sentuh-min); padding: 0 var(--space-2); border-radius: var(--radius-bulat);
  color: var(--di-merek); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.situs-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.situs-nav a[aria-current="page"] { background: var(--merek-tua); }
/* CTA ke situs kuliah: pil krim di atas merek (krim hanya hidup di atas biru), teks di-krim */
.situs-cta { flex: none; margin-left: var(--space-2); background: var(--krim); border-color: var(--krim); color: var(--di-krim); font-weight: 800; }
.situs-cta:hover { background: var(--di-merek); border-color: var(--di-merek); color: var(--di-krim); }
.situs-cta:focus-visible { outline-color: var(--fokus-di-merek); }
/* HP: CTA menggantikan tautan Teaching dan Contact agar bilah muat satu baris */
@media (max-width: 599px) { .situs-nav a[href="/#teaching"], .situs-nav a[href="/#contact"] { display: none; } .situs-cta__panah { display: none; } }
@media (max-width: 380px) { .situs-nav a { padding: 0 6px; font-size: 13px; } .situs-cta { margin-left: 0; } }
@media (max-width: 359px) { .situs-nav a[href="/#research"] { display: none; } }

/* Hero */
.situs-hero { display: grid; gap: var(--space-6); align-items: center; padding-block: var(--space-4) var(--space-6); }
.situs-hero__teks { display: flex; flex-direction: column; gap: var(--space-4); }
.situs-hero h1 { max-width: 16ch; }
.situs-lead { margin: 0; font-size: 18px; line-height: 28px; max-width: 52ch; }
.situs-aksi { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.situs-hero__gambar { width: 100%; max-width: 420px; height: auto; justify-self: center; }
@media (min-width: 860px) {
  .situs-hero { grid-template-columns: 1.15fr 1fr; padding-block: var(--space-8) var(--space-12); }
  .wp-halaman .situs-hero h1 { font-size: 52px; line-height: 56px; letter-spacing: -.025em; }
  .situs-hero__gambar { max-width: none; }
}

/* Kartu tema riset: satu pori merek di atas judul */
.situs-tema .wp-kartu p { margin: 0; line-height: 24px; }
.situs-pori { display: block; width: 28px; height: 28px; margin-bottom: var(--space-3); border-radius: var(--radius-bulat);
  background: var(--merek); box-shadow: inset 0 0 0 8px var(--merek), inset 0 0 0 14px var(--lembut); }

/* Daftar publikasi */
.pub-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.pub p { margin: 0; }
.pub__judul { font-weight: 700; line-height: 24px; }
.pub__judul a { color: inherit; text-decoration-color: var(--batas-kuat); text-underline-offset: 3px; }
.pub__judul a:hover { color: var(--merek-teks); text-decoration-color: currentColor; }
.pub__rinci { font-size: 14px; line-height: 20px; color: var(--tinta-redup); }
.pub__rinci strong { color: var(--tinta); }
.pub__corr { color: var(--merek-teks); font-weight: 800; }
.pub-tahun { margin: var(--space-4) 0 0; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--merek-teks);
  padding-bottom: var(--space-2); border-bottom: var(--garis-rambut) solid var(--batas); font-variant-numeric: tabular-nums; }

/* Tentang + Kuliah berdampingan */
.situs-dua { display: grid; gap: var(--space-8); }
.situs-dua p { margin: 0; max-width: 65ch; }
@media (min-width: 760px) { .situs-dua { grid-template-columns: 1fr 1fr; } }

/* Kaki: pita merek-tua */
.situs-kaki { background: var(--merek-tua); color: var(--di-merek);
  padding: var(--space-8) max(var(--gutter-hp), env(safe-area-inset-right, 0px)) calc(var(--space-8) + env(safe-area-inset-bottom, 0px)) max(var(--gutter-hp), env(safe-area-inset-left, 0px)); }
.situs-kaki__isi { max-width: var(--lebar-daftar); margin: 0 auto; display: grid; gap: var(--space-6); }
.situs-kaki img { height: 28px; width: auto; }
.situs-kaki p { margin: 0; font-size: 14px; line-height: 22px; }
.situs-kaki a { color: var(--di-merek); text-underline-offset: 3px; }
.situs-kaki :focus-visible { outline-color: var(--fokus-di-merek); }
.situs-kaki__label { font-size: 12px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--krim); margin-bottom: var(--space-1) !important; }
.situs-kaki__hak { opacity: .8; }
@media (min-width: 760px) {
  .situs-kaki { padding-left: max(var(--gutter-lebar), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter-lebar), env(safe-area-inset-right, 0px)); }
  .situs-kaki__isi { grid-template-columns: auto 1fr 1.6fr; align-items: start; column-gap: var(--space-12); }
  .situs-kaki__hak { grid-column: 1 / -1; }
}