/* =========================================================
   emires.one — Emir Muhaimin
   Tema terang editorial sebagai bawaan; gelap mengikuti
   preferensi sistem atau pilihan pengguna yang tersimpan.
   ========================================================= */

:root{
  color-scheme: light;
  --ivory:#F7F5F0;
  --surface:#FFFFFF;
  --navy:#142938;
  --teal:#21665F;
  --teal-ink:#1A524D;
  --muted:#59656B;
  --line:#DDDCD5;
  --line-soft:#E8E6DF;

  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap:1180px;
  --gut:20px;
}
@media (min-width:768px){ :root{ --gut:40px; } }

/* Tema gelap HANYA bila pengguna memilihnya sendiri.
   Brief meminta tema terang sebagai bawaan untuk pengunjung baru,
   jadi preferensi sistem sengaja tidak dipakai sebagai pemicu. */
:root[data-tema="gelap"]{
  color-scheme: dark;
  --ivory:#101A23;
  --surface:#16222C;
  --navy:#F2F0EA;
  --teal:#6FC7B6;
  --teal-ink:#8FD9CA;
  --muted:#9DABB2;
  --line:#26323C;
  --line-soft:#1D2832;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ivory);
  color:var(--navy);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:2px}
::selection{background:var(--teal); color:var(--ivory)}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.lewati{position:absolute; left:-9999px; top:0}
.lewati:focus{left:8px; top:8px; z-index:99; background:var(--surface); color:var(--navy);
  padding:10px 16px; border:1px solid var(--line); border-radius:3px}

h1,h2,h3,h4{font-family:var(--serif); font-weight:600; letter-spacing:-.012em; margin:0}
h1{font-size:clamp(2.25rem,5.2vw,4.25rem); line-height:1.04; letter-spacing:-.025em}
h2{font-size:clamp(1.65rem,3vw,2.3rem); line-height:1.18}
h3{font-size:1.2rem; line-height:1.3}
p{margin:0}
figure{margin:0}   /* peramban memberi figure margin 40px; dibuang agar foto sejajar teks */
.kecil{font-size:.86rem}

.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin:0;
}
.label{
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* ── kepala halaman ───────────────────────────────── */
.situs-kepala{border-bottom:1px solid var(--line); background:var(--ivory);
  position:sticky; top:0; z-index:40}
.kepala-in{display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:64px}
.wordmark{font-family:var(--sans); font-weight:600; font-size:.88rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--navy); text-decoration:none; white-space:nowrap}
.wordmark:hover{text-decoration:none; color:var(--teal)}

.nav-utama{display:flex; align-items:center; gap:28px}
.nav-utama a{font-size:.94rem; color:var(--navy); padding:6px 0; border-bottom:2px solid transparent}
.nav-utama a:hover{color:var(--teal); text-decoration:none}
.nav-utama a[aria-current="page"]{border-bottom-color:var(--teal); color:var(--teal)}
.nav-luar::after{content:"↗"; font-size:.78em; margin-left:5px; opacity:.75}

.alat{display:flex; align-items:center; gap:10px}
.tombol-tema{
  background:none; border:1px solid var(--line); color:var(--muted); cursor:pointer;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  min-height:44px; padding:0 14px; border-radius:999px;  /* batas sentuh 44px */
}
.tombol-tema:hover{border-color:var(--teal); color:var(--teal)}
.tombol-menu{display:none; background:none; border:1px solid var(--line); cursor:pointer;
  width:44px; height:44px; border-radius:3px; color:var(--navy); align-items:center;
  justify-content:center}
.tombol-menu svg{width:20px; height:20px}

@media (max-width:860px){
  .nav-utama{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--surface); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gut) 16px;
  }
  .nav-utama.buka{display:flex}
  .nav-utama a{padding:13px 0; border-bottom:1px solid var(--line-soft); min-height:44px;
    display:flex; align-items:center}
  .nav-utama a[aria-current="page"]{border-bottom-color:var(--line-soft)}
  .tombol-menu{display:inline-flex}
  .situs-kepala{position:relative}
}

/* ── hero ─────────────────────────────────────────── */
.hero{padding-block:clamp(36px,6vw,76px) clamp(28px,4vw,44px)}
.hero-grid{display:grid; grid-template-columns:1fr; gap:28px}
@media (min-width:861px){
  .hero-grid{grid-template-columns:minmax(0,70fr) minmax(0,30fr); gap:48px; align-items:center}
}
.hero h1{margin:14px 0 0}
.hero .sub{font-family:var(--serif); font-size:clamp(1.15rem,2.1vw,1.6rem); line-height:1.3;
  color:var(--navy); margin:10px 0 0}
.hero .lede{color:var(--muted); max-width:56ch; margin:16px 0 0}
.aksi{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.tombol{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 22px; border-radius:3px; font-size:.95rem; font-weight:500;
  border:1px solid var(--teal); text-decoration:none;
}
.tombol:hover{text-decoration:none}
.tombol-isi{background:var(--teal); color:var(--ivory)}
.tombol-isi:hover{background:var(--teal-ink)}
.tombol-garis{background:transparent; color:var(--teal)}
.tombol-garis:hover{background:color-mix(in srgb, var(--teal) 8%, transparent)}

.potret{justify-self:start}
@media (min-width:861px){ .potret{justify-self:end; text-align:center} }
.potret img{display:block; width:147px; height:224px; object-fit:contain}
/* Potongan transparan: ukuran mengikuti rasio asli 406x560 agar tidak
   terpotong maupun gepeng. object-fit contain menjaga proporsi. */
@media (min-width:861px){ .potret img{width:249px; height:380px} }
.potret figcaption{font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:12px;
  max-width:270px}

/* ── strip kredensial ─────────────────────────────── */
.kredensial{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.kredensial ul{list-style:none; margin:0; padding:0; display:grid; gap:0}
@media (min-width:861px){ .kredensial ul{grid-template-columns:repeat(3,1fr)} }
.kredensial li{display:flex; align-items:center; gap:11px; padding:15px 0;
  font-size:.9rem; color:var(--navy); border-bottom:1px solid var(--line-soft)}
.kredensial li:last-child{border-bottom:none}
@media (min-width:861px){
  .kredensial li{border-bottom:none; border-left:1px solid var(--line-soft);
    padding-inline:24px}
  .kredensial li:first-child{border-left:none; padding-left:0}
}
.kredensial svg{width:17px; height:17px; flex:none; color:var(--teal)}

/* ── bagian umum ──────────────────────────────────── */
.bagian{padding-block:clamp(44px,6vw,76px)}
.bagian + .bagian{border-top:1px solid var(--line)}
.bagian-kepala{margin-bottom:30px}
.bagian-kepala p{color:var(--muted); margin-top:8px}

/* ── pratinjau topik ──────────────────────────────── */
.topik-label{display:flex; align-items:center; gap:12px; margin:26px 0 18px}
.topik-label::after{content:""; height:1px; flex:1; background:var(--line)}
.topik{display:grid; gap:0; border-top:1px solid var(--line)}
@media (min-width:861px){ .topik{grid-template-columns:repeat(3,1fr)} }
.topik article{padding:24px 0; border-bottom:1px solid var(--line)}
@media (min-width:861px){
  .topik article{padding:26px 26px 30px; border-bottom:none;
    border-left:1px solid var(--line)}
  .topik article:first-child{border-left:none; padding-left:0}
  .topik article:last-child{padding-right:0}
}
.topik h3{margin:10px 0 0; font-size:1.22rem}
.topik p{color:var(--muted); font-size:.94rem; margin-top:10px}
.garis-hias{width:100%; height:54px; display:block; color:var(--teal); opacity:.5}

/* ── tentang & timeline ───────────────────────────── */
.tentang-grid{display:grid; gap:36px}
@media (min-width:861px){ .tentang-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px} }
.bio{color:var(--muted); max-width:60ch}
.bio strong{color:var(--navy); font-weight:600}
.riwayat{list-style:none; margin:22px 0 0; padding:0}
.riwayat li{position:relative; padding:0 0 22px 24px; border-left:1px solid var(--line)}
.riwayat li:last-child{padding-bottom:0}
.riwayat li::before{content:""; position:absolute; left:-5px; top:7px; width:9px; height:9px;
  border-radius:50%; background:var(--teal)}
.riwayat .periode{font-family:var(--sans); font-size:.76rem; font-weight:600;
  letter-spacing:.07em; color:var(--teal); text-transform:uppercase}
.riwayat .peran{display:block; margin-top:3px; font-weight:500; color:var(--navy)}
.riwayat .org{display:block; color:var(--muted); font-size:.9rem}
.keahlian{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding:0; list-style:none}
.keahlian li{font-size:.82rem; color:var(--muted); border:1px solid var(--line);
  border-radius:999px; padding:5px 13px}
.blok{margin-top:26px}
.blok h3{font-size:1rem; font-family:var(--sans); font-weight:600; letter-spacing:0}
.blok p{color:var(--muted); font-size:.94rem; margin-top:5px}

/* ── proyek ───────────────────────────────────────── */
.proyek{display:grid; gap:0; border-top:1px solid var(--line)}
@media (min-width:861px){ .proyek{grid-template-columns:1fr 1fr} }
.proyek article{padding:26px 0; border-bottom:1px solid var(--line)}
@media (min-width:861px){
  .proyek article{padding:28px 32px 32px; border-bottom:none; border-left:1px solid var(--line)}
  .proyek article:first-child{border-left:none; padding-left:0}
  .proyek article:last-child{padding-right:0}
}
.proyek h3{font-size:1.3rem}
.proyek p{color:var(--muted); margin-top:9px; max-width:46ch}
.meta-proyek{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px}
.tanda{font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line);
  border-radius:999px; padding:4px 11px}
.tanda-jalan{color:var(--teal); border-color:color-mix(in srgb, var(--teal) 45%, transparent)}
.tautan-proyek{display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:.94rem; min-height:44px}

/* ── footer ───────────────────────────────────────── */
.situs-kaki{border-top:1px solid var(--line); padding-block:40px 48px}
.kaki-atas{display:grid; gap:20px}
@media (min-width:861px){ .kaki-atas{grid-template-columns:1fr auto; align-items:center} }
.kaki-bawah{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  margin-top:34px; padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:.82rem; color:var(--muted)}
.kaki-bawah .kanan{margin-left:auto}

/* ── indeks tulisan ───────────────────────────────── */
.kosong{border:1px solid var(--line); background:var(--surface); border-radius:4px;
  padding:clamp(28px,5vw,52px); text-align:center; margin-top:8px}
.kosong h2{font-size:1.45rem}
.kosong p{color:var(--muted); margin:12px auto 0; max-width:48ch}
.saring{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 28px; padding:0; list-style:none}
.saring button{font-family:var(--sans); font-size:.86rem; color:var(--muted); cursor:pointer;
  background:none; border:1px solid var(--line); border-radius:999px; min-height:44px;
  padding:0 16px}
.saring button[aria-pressed="true"]{color:var(--ivory); background:var(--teal);
  border-color:var(--teal)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;
    scroll-behavior:auto !important}
}