/* ============================================================
   PANRE SATERA — Tema "Bara & Besi"
   Konsep: tempa besi & bara api. Iron gelap + bara ember + parkemen.
   ============================================================ */

:root{
  /* Permukaan gelap = HIJAU HUTAN (mengikuti lingkaran hijau pada logo) */
  --iron-900:#123A22; --iron-850:#154227; --iron-800:#1A4E2E; --iron-700:#236A3E;
  --iron-600:#2F8A52; --iron-500:#49A56B;
  --ash:#BFD3AE; --ash-dim:#8FA87E;
  /* Aksen = ORANYE (rumah pada logo) */
  --ember:#F0961E; --ember-glow:#FFB454; --ember-deep:#B4610F;
  /* Sekunder = EMAS (laurel pada logo) */
  --brass:#E3B84A; --brass-soft:#F1D480;
  --parchment:#F4F1E8; --parchment-2:#FBFAF4; --cream-line:#E5DECD;
  --ink:#22271F; --ink-soft:#55604F;

  --bs-primary:#2F8A52; --bs-primary-rgb:47,138,82;
  --ff-display:'Fraunces',Georgia,serif;
  --ff-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --radius:9px; --shadow-warm:0 18px 44px -22px rgba(18,40,25,.5);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--ff-body); color:var(--ink); background:var(--parchment);
  line-height:1.6; -webkit-font-smoothing:antialiased; margin:0;
}
h1,h2,h3,h4,h5,.display-font{ font-family:var(--ff-display); font-weight:600; line-height:1.15; letter-spacing:-.01em; }
a{ color:var(--ember-deep); text-decoration:none; }
a:hover{ color:var(--ember); }
img{ max-width:100%; height:auto; }

/* ---------- Tombol ---------- */
.btn{ border-radius:8px; font-weight:600; padding:.6rem 1.15rem; }
.btn-ember{ background:var(--ember); border:1px solid var(--ember); color:#fff; box-shadow:0 8px 20px -10px rgba(240,150,30,.7); }
.btn-ember:hover{ background:var(--ember-deep); border-color:var(--ember-deep); color:#fff; }
.btn-outline-ember{ border:1px solid var(--ember); color:var(--ember-deep); background:transparent; }
.btn-outline-ember:hover{ background:var(--ember); color:#fff; }
.btn-iron{ background:var(--iron-800); border:1px solid var(--iron-600); color:#f4ede2; }
.btn-iron:hover{ background:var(--iron-700); color:#fff; }

/* ---------- Marka tempa (pengganti eyebrow ALL-CAPS) ---------- */
.forge-mark{ display:inline-flex; align-items:center; gap:.55rem; color:var(--ember-deep);
  font-family:var(--ff-body); font-weight:600; font-size:.92rem; margin-bottom:.7rem; }
.forge-mark::before{ content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--ember),transparent); }
.on-iron .forge-mark{ color:var(--brass-soft); }
.on-iron .forge-mark::before{ background:linear-gradient(90deg,var(--brass),transparent); }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar-forge{ background:rgba(18,40,25,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--iron-600); }
.navbar-forge .navbar-brand{ font-family:var(--ff-display); font-weight:700; color:#fff; font-size:1.4rem; letter-spacing:-.02em; }
.navbar-forge .brand-spark{ color:var(--ember); }
.navbar-forge .nav-link{ color:#d8cebe !important; font-weight:500; padding:.5rem .85rem !important; border-radius:6px; }
.navbar-forge .nav-link:hover,.navbar-forge .nav-link.active{ color:#fff !important; background:var(--iron-700); }
.navbar-forge .dropdown-menu{ background:var(--iron-800); border:1px solid var(--iron-600); border-radius:10px; }
.navbar-forge .dropdown-item{ color:#d8cebe; }
.navbar-forge .dropdown-item:hover{ background:var(--iron-700); color:#fff; }
.navbar-forge .navbar-toggler{ border-color:var(--iron-600); }
.navbar-forge .navbar-toggler-icon{ filter:invert(.85) sepia(.4) saturate(4) hue-rotate(-8deg); }

/* ============================================================
   HERO — momen tunggal yang paling menonjol
   ============================================================ */
.hero{ position:relative; background:var(--iron-900); color:#f4ede2; overflow:hidden;
  padding:7rem 0 6rem; }
.hero::before{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 340px at 78% 18%, rgba(240,150,30,.28), transparent 62%),
    radial-gradient(520px 300px at 90% 80%, rgba(227,184,74,.18), transparent 60%);
  pointer-events:none; }
.hero::after{ content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:linear-gradient(var(--iron-600) 1px,transparent 1px),linear-gradient(90deg,var(--iron-600) 1px,transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(circle at 80% 40%,#000,transparent 75%); }
.hero-inner{ position:relative; z-index:2; }
.hero h1{ font-size:clamp(2.5rem,6vw,4.6rem); color:#fff; font-weight:600; letter-spacing:-.02em; }
.hero .motto{ font-family:var(--ff-display); font-style:italic; font-size:clamp(1.3rem,3vw,2rem);
  color:var(--ember-glow); font-weight:400; }
.hero .lead{ color:#c9beae; max-width:46ch; }
.ember-sparks{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.spark{ position:absolute; width:4px; height:4px; border-radius:50%; background:var(--ember-glow);
  box-shadow:0 0 8px 2px rgba(255,138,61,.7); opacity:0; animation:rise 4.5s linear infinite; }
@keyframes rise{ 0%{ transform:translateY(20px) scale(.6); opacity:0 } 15%{ opacity:1 }
  100%{ transform:translateY(-260px) scale(.2); opacity:0 } }

/* ============================================================
   SEKSI
   ============================================================ */
.section{ padding:5rem 0; }
.section-tight{ padding:3.5rem 0; }
.section.on-iron{ background:var(--iron-900); color:#eadfce; }
.section.on-iron h1,.section.on-iron h2,.section.on-iron h3{ color:#fff; }
.section.on-iron .text-muted{ color:var(--ash) !important; }
.section.parchment-2{ background:var(--parchment-2); }
.section-head{ margin-bottom:2.5rem; }
.section-head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); }
.divider-forge{ height:1px; background:linear-gradient(90deg,transparent,var(--cream-line),transparent); border:0; }

/* ---------- Kartu ---------- */
.card-forge{ background:#fff; border:1px solid var(--cream-line); border-radius:var(--radius);
  overflow:hidden; height:100%; transition:transform .25s ease, box-shadow .25s ease; }
.card-forge:hover{ transform:translateY(-4px); box-shadow:var(--shadow-warm); }
.card-forge .card-body{ padding:1.35rem; }
.card-forge .card-title{ font-family:var(--ff-display); font-size:1.2rem; }
.on-iron .card-forge{ background:var(--iron-800); border-color:var(--iron-600); color:#eadfce; }
.on-iron .card-forge .card-title{ color:#fff; }

/* Kartu program: pelat besi berbilah bara */
.program-plate{ display:flex; gap:1rem; align-items:flex-start; background:#fff;
  border:1px solid var(--cream-line); border-left:4px solid var(--ember);
  border-radius:var(--radius); padding:1.25rem 1.35rem; height:100%; transition:.25s; }
.program-plate:hover{ box-shadow:var(--shadow-warm); transform:translateY(-3px); border-left-color:var(--ember-deep); }
.program-plate .ikon{ flex:0 0 46px; width:46px; height:46px; border-radius:10px;
  display:grid; place-items:center; font-size:1.35rem; color:var(--ember-deep);
  background:rgba(240,150,30,.1); }
.program-plate h3{ font-size:1.15rem; margin:0 0 .3rem; }

/* Meta chip */
.chip{ display:inline-block; font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:999px;
  background:rgba(240,150,30,.12); color:var(--ember-deep); }
.on-iron .chip{ background:rgba(227,184,74,.16); color:var(--brass-soft); }

/* ---------- Kartu karya (seperti buku) ---------- */
.karya-card{ background:#fff; border:1px solid var(--cream-line); border-radius:var(--radius);
  padding:1.4rem; height:100%; position:relative; transition:.25s; }
.karya-card::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  background:var(--brass); border-radius:3px; }
.karya-card:hover{ box-shadow:var(--shadow-warm); transform:translateY(-3px); }
.karya-card .kutipan{ font-family:var(--ff-display); font-style:italic; color:var(--ink-soft); }

/* ============================================================
   PROSE / RUANG BACA (parkemen, serif, <70ch)
   ============================================================ */
.reading{ background:var(--parchment-2); border:1px solid var(--cream-line); border-radius:14px;
  padding:clamp(1.5rem,4vw,3.2rem); }
.prose{ font-family:var(--ff-display); font-weight:340; font-size:1.14rem; line-height:1.85;
  color:var(--ink); max-width:66ch; }
.prose p{ margin:0 0 1.1rem; }
.prose h2,.prose h3,.prose h4{ margin:1.8rem 0 .7rem; }
.prose blockquote{ border-left:3px solid var(--ember); padding-left:1.1rem; font-style:italic; color:var(--ink-soft); }
.prose img{ border-radius:10px; margin:1rem 0; }
.puisi{ white-space:pre-line; font-family:var(--ff-display); font-size:1.2rem; line-height:2; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-forge{ background:var(--iron-900); color:#c9beae; padding:4rem 0 1.5rem;
  border-top:2px solid var(--ember); }
.footer-forge h5{ color:#fff; font-size:1.05rem; }
.footer-forge a{ color:#c9beae; }
.footer-forge a:hover{ color:var(--ember-glow); }
.footer-forge .foot-brand{ font-family:var(--ff-display); font-size:1.6rem; color:#fff; }
.footer-forge .copyright{ border-top:1px solid var(--iron-600); margin-top:2.5rem; padding-top:1.2rem;
  color:var(--ash-dim); font-size:.86rem; }

/* Page banner (halaman dalam) */
.page-banner{ background:var(--iron-900); color:#fff; padding:4.5rem 0 3rem; position:relative; overflow:hidden; }
.page-banner::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(500px 260px at 85% 20%,rgba(240,150,30,.22),transparent 60%); }
.page-banner .breadcrumb{ --bs-breadcrumb-divider-color:var(--ash); margin:0; }
.page-banner .breadcrumb a{ color:var(--ash); } .page-banner .breadcrumb .active{ color:var(--brass-soft); }
.page-banner h1{ position:relative; z-index:2; }

/* Kalender agenda */
.event-row{ display:flex; gap:1.2rem; padding:1.1rem 0; border-bottom:1px solid var(--cream-line); }
.event-date{ flex:0 0 76px; text-align:center; background:var(--iron-900); color:#fff; border-radius:10px; padding:.6rem 0; }
.event-date .d{ font-family:var(--ff-display); font-size:1.7rem; line-height:1; }
.event-date .m{ font-size:.72rem; color:var(--brass-soft); text-transform:uppercase; letter-spacing:.06em; }
.event-past .event-date{ background:var(--iron-600); opacity:.7; }

/* Galeri */
.gallery-item{ border-radius:10px; overflow:hidden; position:relative; display:block; background:var(--iron-800); }
.gallery-item img{ width:100%; height:220px; object-fit:cover; transition:.4s; }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item .cap{ position:absolute; left:0; right:0; bottom:0; padding:.7rem .9rem;
  background:linear-gradient(transparent,rgba(18,40,25,.88)); color:#fff; font-size:.85rem; }

/* Login */
.auth-wrap{ min-height:100vh; display:grid; place-items:center; background:var(--iron-900); padding:2rem; }
.auth-card{ width:100%; max-width:410px; background:var(--iron-800); border:1px solid var(--iron-600);
  border-radius:16px; padding:2.4rem; color:#eadfce; box-shadow:var(--shadow-warm); }
.auth-card .form-control{ background:var(--iron-900); border:1px solid var(--iron-600); color:#fff; }
.auth-card .form-control:focus{ border-color:var(--ember); box-shadow:0 0 0 3px rgba(240,150,30,.2); background:var(--iron-900); color:#fff; }

/* Form umum */
.form-control,.form-select{ border-radius:8px; border-color:var(--cream-line); padding:.6rem .8rem; }
.form-control:focus,.form-select:focus{ border-color:var(--ember); box-shadow:0 0 0 3px rgba(240,150,30,.15); }
.form-label{ font-weight:600; font-size:.9rem; }

/* ============================================================
   ADMIN / DASHBOARD
   ============================================================ */
.admin-body{ background:#f4efe6; }
.admin-sidebar{ position:fixed; top:0; left:0; bottom:0; width:250px; background:var(--iron-900);
  color:#cabfae; padding:1.1rem .8rem; overflow-y:auto; z-index:1040; transition:transform .3s; }
.admin-sidebar .brand{ font-family:var(--ff-display); color:#fff; font-size:1.35rem; font-weight:700;
  padding:.4rem .7rem 1.1rem; display:block; border-bottom:1px solid var(--iron-600); margin-bottom:.8rem; }
.admin-sidebar .brand .brand-spark{ color:var(--ember); }
.admin-sidebar .nav-section{ font-size:.7rem; letter-spacing:.08em; color:var(--ash-dim);
  padding:.9rem .8rem .3rem; }
.admin-sidebar a.side-link{ display:flex; align-items:center; gap:.7rem; color:#cabfae;
  padding:.6rem .8rem; border-radius:8px; font-size:.92rem; font-weight:500; margin-bottom:2px; }
.admin-sidebar a.side-link i{ font-size:1.05rem; width:20px; text-align:center; }
.admin-sidebar a.side-link:hover{ background:var(--iron-700); color:#fff; }
.admin-sidebar a.side-link.active{ background:var(--ember); color:#fff; }
.admin-sidebar a.side-link .badge{ margin-left:auto; }
.admin-main{ margin-left:250px; min-height:100vh; }
.admin-topbar{ background:#fff; border-bottom:1px solid var(--cream-line); padding:.8rem 1.4rem;
  display:flex; align-items:center; gap:1rem; position:sticky; top:0; z-index:1030; }
.admin-content{ padding:1.6rem 1.4rem 3rem; }
.stat-card{ background:#fff; border:1px solid var(--cream-line); border-radius:12px; padding:1.2rem 1.3rem;
  display:flex; align-items:center; gap:1rem; }
.stat-card .ic{ width:52px; height:52px; border-radius:12px; display:grid; place-items:center;
  font-size:1.5rem; color:#fff; background:var(--ember); }
.stat-card .num{ font-family:var(--ff-display); font-size:1.9rem; font-weight:600; line-height:1; }
.stat-card .lbl{ color:var(--ink-soft); font-size:.86rem; }
.panel{ background:#fff; border:1px solid var(--cream-line); border-radius:12px; }
.panel-head{ padding:1rem 1.3rem; border-bottom:1px solid var(--cream-line); display:flex;
  align-items:center; justify-content:space-between; gap:1rem; }
.panel-head h2,.panel-head h5{ margin:0; font-size:1.15rem; }
.panel-body{ padding:1.3rem; }
.table thead th{ font-size:.78rem; letter-spacing:.03em; color:var(--ink-soft); text-transform:uppercase;
  border-bottom:2px solid var(--cream-line); }
.table td{ vertical-align:middle; }
.badge-soft{ background:rgba(240,150,30,.12); color:var(--ember-deep); font-weight:600; }

.status-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.35rem; }
.status-terbit,.status-aktif,.status-selesai{ color:#1a7f4b; } .status-terbit .status-dot{ background:#1a9d5b; }
.status-draft,.status-nonaktif{ color:#8a7f73; }
.status-menunggu,.status-baru{ color:#b3701b; } .status-menunggu .status-dot{ background:#e0951f; }
.status-ditolak{ color:#b3391b; }

@media (max-width:991.98px){
  .admin-sidebar{ transform:translateX(-100%); }
  .admin-sidebar.open{ transform:translateX(0); }
  .admin-main{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}


/* ---- Logo brand (transparan, ukuran ringkas) ---- */
.navbar-forge .navbar-brand{ display:inline-flex; align-items:center; gap:.5rem; }
.brand-logo{ height:38px; width:auto; object-fit:contain; flex:0 0 auto; }
.footer-forge .foot-logo{ height:52px; width:auto; object-fit:contain; }
.auth-logo{ height:84px; width:auto; object-fit:contain; }