/* ============================================================================
   redesign-clean.css — lapisan pengerjaan ulang visual (dimuat PALING AKHIR)
   ----------------------------------------------------------------------------
   Tujuan: menghilangkan kesan "web di-generate AI" → editorial, padat, manusia.
   1) Satu keluarga huruf sans (Sora) — serif display + handwriting dibuang
   2) Aksen ungu pastel diganti amber hangat; teks warm-white
   3) Kartu rounded seragam → radius kecil, banyak elemen jadi baris flat
   4) Pemisah spacing ekstrem → ritme lebih rapat & konsisten
   5) Pill/glassmorphism dikurangi; dock jadi matte solid
   6) Feed X: dari grid kartu → timeline satu kolom (list editorial)
   7) Detail kecil (tanggal/stat) pakai sans, bukan mono di mana-mana
   ========================================================================== */

/* ---------- 1. PALET: hangat, bukan ungu AI --------------------------- */
:root,
[data-theme="dark"] {
  --bg:         #0B0E13;
  --bg-rgb:     11, 14, 19;
  --bg-soft:    #14181F;
  --fg:         #EDECE9;
  --fg-dim:     rgba(237, 236, 233, .72);
  --fg-faint:   rgba(237, 236, 233, .52);
  --line:       rgba(237, 236, 233, .13);
  --line-soft:  rgba(237, 236, 233, .07);
  --accent:     #D9A662;              /* amber hangat (editorial) */
  --accent-ink: #14100A;
  --dock-bg:    #0F131A;              /* matte, bukan kaca */
  --head-bg:    rgba(11, 14, 19, .88);
  --head-line:  rgba(237, 236, 233, .07);
}

[data-theme="light"] {
  --bg:         #F4F2EE;
  --bg-rgb:     244, 242, 238;
  --bg-soft:    #FFFFFF;
  --fg:         #1B1A18;
  --fg-dim:     rgba(27, 26, 24, .7);
  --fg-faint:   rgba(27, 26, 24, .52);
  --line:       rgba(27, 26, 24, .14);
  --line-soft:  rgba(27, 26, 24, .07);
  --accent:     #A9752B;
  --accent-ink: #FFFFFF;
  --dock-bg:    #FBFAF7;
  --head-bg:    rgba(244, 242, 238, .9);
  --head-line:  rgba(27, 26, 24, .08);
}

/* ---------- 2. FONT: satu sans untuk semua --------------------------- */
:root {
  --serif: "Sora", ui-sans-serif, system-ui, sans-serif;  /* serif display dibuang */
  --radius: 10px;
}

/* ---------- 3. RITME HALAMAN: lebih rapat ----------------------------- */
.section { padding: clamp(48px, 7vw, 84px) clamp(20px, 5vw, 56px); }
.section-head { margin-bottom: 26px; }
.kicker {
  font: 600 .68rem var(--font);
  letter-spacing: .08em;               /* dari .18em */
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* h2 & display → sans, tegas, bukan serif elegan */
.h2 {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -.03em;
}
.display {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.page-head .h2 { letter-spacing: -.035em; }

/* italic serif di lede → sans italic polos */
.lede em, .lede i {
  font-family: var(--font);
  font-style: italic;
  color: var(--fg);
}

/* ---------- 4. HERO: lebih rendah hati -------------------------------- */
.hero { min-height: min(78svh, 640px); }
.hero-bg { opacity: .78; }             /* galaksi jadi ambience, bukan pusat layar */
.hero-torch, .hero-glow, .hero-spark { display: none !important; }  /* efek dekoratif AI dimatikan */
.hero-grain { opacity: .5; }

.status {
  border: 0; padding: 0;
  border-radius: 0;
  font: 600 .72rem var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.status .dot { width: 6px; height: 6px; background: var(--accent); opacity: 1; }

.hero-actions a {
  border-radius: 8px;
  font-weight: 600;
}
.hero-actions a.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

/* ---------- 5. FOCUS: baris editorial, bukan kartu ----------------------- */
.focus-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  border: 0; background: none;
}
.focus-item {
  background: none;
  border-top: 1px solid var(--line-soft);
  padding: 18px 0 0;
}
.focus-item:hover { background: none; }
.fi-n {
  font: 600 .62rem var(--font);
  letter-spacing: .1em;
  color: var(--fg-faint);
  opacity: 1;
}
.fi-t {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  letter-spacing: -.02em;
}
.fi-d { font-size: .92rem; }

/* ---------- 6. FEED X: timeline satu kolom ------------------------------- */
.x-panel { border-radius: var(--radius); }
.x-handle { border-radius: 8px; font-weight: 600; }
.x-chips { gap: 8px; }
.x-chip {
  border-radius: 8px;
  font-weight: 600;
  border-color: var(--line);
}
.x-chip.is-on { background: var(--accent); border-color: var(--accent); }

.x-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  max-width: 820px;
}
.x-card {
  display: grid;
  gap: 8px;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
  align-content: start;
}
.x-card:last-child { border-bottom: 0; }
.x-card:hover {
  background: none;
  border-bottom-color: var(--line);
  transform: none;
}
.x-card-top { align-items: baseline; }
.x-kind {
  padding: 0;
  border-radius: 0;
  background: none;
  font: 600 .66rem var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.x-date, .x-stats {
  font: .74rem var(--font);           /* sans, bukan mono */
  color: var(--fg-faint);
}
.x-text {
  font-size: .98rem;
  -webkit-line-clamp: none;
  line-height: 1.6;
}
.x-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.x-media img { width: 100%; border: 0; border-radius: 8px; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- 7. WORK: kartu flat, radius kecil ----------------------------- */
.work-row { gap: clamp(14px, 2.4vw, 24px); }
.wr-thumb { border-radius: 8px; }
.wr-title {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -.02em;
}
.wr-meta { font: .74rem var(--font); color: var(--fg-faint); }
.work-cat-h { letter-spacing: .1em; }

.proj-card { border-radius: var(--radius); }
.proj-card:hover { transform: none; }
.proj-name {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -.025em;
}
.proj-meta { font: .7rem var(--font); letter-spacing: .09em; }
.proj-thumb { border-radius: 8px; }

.work-empty {
  border-radius: var(--radius);
  border-style: solid;
}
.we-h { font-family: var(--font); font-weight: 600; letter-spacing: -.02em; }
.we-tag { border-radius: 8px; font-weight: 600; letter-spacing: .09em; }

/* ---------- 8. ABOUT & CONTACT: sans, radius kecil ------------------------ */
.about-fig { border-radius: var(--radius); }
.about-fig figcaption { font: .74rem var(--font); color: var(--fg-faint); }
.skills li { border-radius: 8px; }

.contact-card { border-radius: var(--radius); }
.contact-lines { border-radius: 8px; }
.contact-line .cl-sub { font: .8rem var(--font); color: var(--fg-faint); }
.contact-cta { border-radius: 8px; font-weight: 600; }

.art-sel-h { letter-spacing: .1em; }
.card { border-radius: 10px; }
.lb-open { border-radius: 8px; }

/* ---------- 9. DOCK: matte solid, tanpa pill ungu -------------------------- */
.dock {
  background: var(--dock-bg);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-radius: 16px 16px 0 0;
  border-color: var(--line);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, .28);
}
.dock-item {
  font-family: var(--font);
  font-weight: 600;
  border-radius: 8px;
}
.dock-item.active {
  background: var(--line-soft);
  color: var(--fg);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.dock-item:hover { background: var(--line-soft); }

/* ---------- 10. FOOTER: halus ------------------------------------------------- */
.foot-brand, .foot-name { font-family: var(--font); }
.foot-mark { border-radius: 8px; }
.foot-social a { border-radius: 8px; font-weight: 500; }
.foot-note { font: .78rem var(--font); color: var(--fg-faint); }

/* ---------- 11. REDUCED MOTION ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-grain, .status .dot { transition: none !important; }
}

/* ---------- 12. RESPONSIF --------------------------------------------------- */
@media (max-width: 900px) {
  .focus-grid { grid-template-columns: 1fr; gap: 0; }
  .focus-item { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 560px) {
  .hero-actions a { width: 100%; justify-content: center; }
  .x-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}