/* CERITA — style.css
   Identitas visual: editorial gelap-terang, tipografi besar & berani,
   whitespace lega, palet minimal (ink + kertas + aksen amber).
   Terinspirasi bahasa desain devonstank.com.
   Sebagian besar styling via Tailwind CDN; file ini untuk komponen khusus. */

:root {
  --cerita-primary: #0c0a09;   /* ink */
  --cerita-primary-dark: #292524;
  --cerita-accent: #f59e0b;    /* amber */
  --cerita-bg: #f7f7fb;
  --cerita-ink: #0c0a09;       /* stone-950 — hero gelap */
  --cerita-paper: #faf8f5;     /* off-white hangat */
  --cerita-amber: #f59e0b;     /* aksen ember */
}

html { scroll-behavior: smooth; }
body { background: var(--cerita-paper); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; }

/* ---------- Bahasa desain editorial (terinspirasi devonstank.com) ---------- */
.font-display { font-family: 'Fraunces', Georgia, serif; }

/* Hero gelap full-bleed dengan foto + headline raksasa */
.hero-dark {
  position: relative;
  background: var(--cerita-ink);
  color: #f5f4f0;
  overflow: hidden;
}
.hero-dark .hero-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .38;
}
.hero-dark .hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,10,9,.35) 0%, rgba(12,10,9,.55) 55%, rgba(12,10,9,.92) 100%);
}
.hero-eyebrow {
  letter-spacing: .28em;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fbbf24;
}
.hero-headline {
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: .98;
}
.hero-headline .serif-accent {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fbbf24;
}

/* Section ala editorial: nomor besar + ruang napas lega */
.section-eyebrow {
  letter-spacing: .28em;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #b45309;
}
.section-title {
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--cerita-ink);
}
.section-title .serif-accent {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: #d97706;
}

/* Kartu fitur editorial: border tipis, angka besar, hover halus */
.feature-tile {
  border-top: 2px solid var(--cerita-ink);
  padding-top: 1.25rem;
  transition: transform .2s ease;
}
.feature-tile:hover { transform: translateY(-4px); }
.feature-tile .tile-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: #d6d0c4;
  line-height: 1;
}
.feature-tile:hover .tile-num { color: var(--cerita-amber); }

/* Tombol pil */
.btn-hero-primary {
  display: inline-block;
  background: #f5f4f0; color: var(--cerita-ink);
  font-weight: 800; border-radius: 999px;
  padding: 1rem 2.25rem;
  transition: transform .15s ease, background .2s;
}
.btn-hero-primary:hover { background: var(--cerita-amber); color: var(--cerita-ink); transform: translateY(-1px); }
.btn-hero-ghost {
  display: inline-block;
  border: 1.5px solid rgba(245,244,240,.4); color: #f5f4f0;
  font-weight: 700; border-radius: 999px;
  padding: 1rem 2.25rem;
  transition: border-color .2s, background .2s;
}
.btn-hero-ghost:hover { border-color: #f5f4f0; background: rgba(245,244,240,.08); }

/* Reveal halus saat halaman dimuat */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-fade { animation: heroFadeUp .8s cubic-bezier(.22,1,.36,1) both; }
.hero-fade-d1 { animation-delay: .12s; }
.hero-fade-d2 { animation-delay: .24s; }
.hero-fade-d3 { animation-delay: .38s; }

/* ---------- Komponen bersama lintas halaman ---------- */

/* Header halaman editorial: eyebrow + judul besar */
.page-head { margin-bottom: 1.75rem; }
.page-head .page-eyebrow {
  letter-spacing: .24em; font-size: 10px; font-weight: 700;
  text-transform: uppercase; color: #b45309;
}
.page-head .page-title {
  font-weight: 900; letter-spacing: -0.025em; line-height: 1.02;
  color: var(--cerita-ink);
  font-size: clamp(1.9rem, 5vw, 3rem);
}
.page-head .page-title .serif-accent {
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-weight: 500; color: #d97706;
}
.page-head .page-sub { color: #78716c; font-size: .9rem; margin-top: .5rem; max-width: 36rem; }

/* Judul section di dalam halaman */
.sec-title {
  font-weight: 900; letter-spacing: -0.02em; line-height: 1.05;
  color: var(--cerita-ink); font-size: 1.25rem;
}
.sec-title .serif-accent {
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-weight: 500; color: #d97706;
}

/* Tombol tinta (aksi utama) */
.btn-ink {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--cerita-ink); color: #faf8f5;
  font-weight: 800; border-radius: 999px; padding: .8rem 1.5rem; font-size: .85rem;
  transition: background .2s, transform .15s ease;
}
.btn-ink:hover { background: #292524; transform: translateY(-1px); }
.btn-ink:disabled { opacity: .5; }
.btn-amber {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--cerita-amber); color: var(--cerita-ink);
  font-weight: 800; border-radius: 999px; padding: .8rem 1.5rem; font-size: .85rem;
  transition: background .2s, transform .15s ease;
}
.btn-amber:hover { background: #fbbf24; transform: translateY(-1px); }
.btn-amber:disabled { opacity: .5; }
.btn-ghost-ink {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1.5px solid #d6d0c4; color: var(--cerita-ink);
  font-weight: 700; border-radius: 999px; padding: .8rem 1.5rem; font-size: .85rem;
  transition: border-color .2s, background .2s;
  background: transparent;
}
.btn-ghost-ink:hover { border-color: var(--cerita-ink); background: rgba(12,10,9,.04); }

/* Kartu di atas kertas */
.card-paper {
  background: #ffffff;
  border: 1px solid #ece7de;
  border-radius: 1.5rem;
}

/* Navigasi tinta (di-render oleh ui.js renderChrome) */
.nav-ink { background: rgba(12,10,9,.96); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(245,244,240,.08); }
.nav-ink .nav-logo { color: #f5f4f0; font-weight: 900; letter-spacing: -0.02em; }
.nav-ink .nav-logo .dot { color: #fbbf24; }
.nav-ink .nav-link { color: #a8a094; border-radius: 999px; transition: color .2s, background .2s; }
.nav-ink .nav-link:hover { color: #f5f4f0; background: rgba(245,244,240,.06); }
.nav-ink .nav-link.active { background: #fbbf24; color: #0c0a09; font-weight: 700; }
.nav-ink-bottom { background: #0c0a09; border-top: 1px solid rgba(245,244,240,.08); }
.nav-ink-bottom .nav-link { color: #78716c; background: none; border: 0; font-family: inherit; cursor: pointer; }
.nav-ink-bottom .nav-link.active { color: #fbbf24; }

.chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.line-clamp-2, .line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

@keyframes slideup {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-slideup { animation: slideup .25s ease-out; transition: opacity .3s; }

.story-card { transition: transform .15s ease; }
.story-card:hover { transform: translateY(-2px); }

/* Mode baca (reader) */
.reader-content { line-height: 1.9; }
.reader-content p { margin-bottom: 1.1em; }
.reader-content h1, .reader-content h2, .reader-content h3 { font-weight: 700; margin: 1.2em 0 .6em; }
.reader-content blockquote {
  border-left: 3px solid var(--cerita-accent);
  padding-left: 1em;
  color: #64748b;
  font-style: italic;
  margin: 1em 0;
}
.reader-content ul, .reader-content ol { margin: 1em 0 1em 1.4em; }
.reader-content ul { list-style: disc; }
.reader-content ol { list-style: decimal; }

.reader-dark { background: #0b0f19 !important; }
.reader-dark .reader-content,
.reader-dark .reader-content p,
.reader-dark .reader-content li,
.reader-dark .reader-content span,
.reader-dark .reader-content blockquote,
.reader-dark .reader-content strong,
.reader-dark .reader-content em { color: #f8fafc !important; }
.reader-dark .reader-content h1, .reader-dark .reader-content h2, .reader-dark .reader-content h3,
.reader-dark h1, .reader-dark h2, .reader-dark h3 { color: #ffffff !important; }
.reader-dark .reader-content blockquote { border-color: #334155; background: #1e293b55; }
.reader-dark .text-slate-800, .reader-dark .text-slate-700 { color: #f1f5f9 !important; }
.reader-dark .text-slate-600, .reader-dark .text-slate-500 { color: #cbd5e1 !important; }
.reader-dark .text-slate-400 { color: #94a3b8 !important; }
.reader-dark .text-amber-700 { color: #fcd34d !important; }
.reader-dark .border-slate-200 { border-color: #1e293b !important; }
.reader-dark .bg-white { background: #1e293b !important; }
.reader-dark button:not(#btnComplete) { color: #e2e8f0; }
.reader-dark .hover\:bg-slate-100:hover { background: #1e293b !important; }

/* Editor toolbar */
.editor-btn {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
.editor-btn:hover { background: #fef3c7; color: var(--cerita-primary); }

/* Progress bar */
.progress-track { background: #e7e2d8; border-radius: 999px; overflow: hidden; }
.progress-fill { background: linear-gradient(90deg, #0c0a09, #f59e0b); height: 100%; border-radius: 999px; transition: width .4s ease; }

/* Scrollbar halus */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }