/* ===========================================================
   ARSIP DESA BAROS — gaya bersama semua halaman
   Palet Golden Reverie. Ubah warna di :root, seluruh situs ikut.
   =========================================================== */
/* ============================================================
   GOLDEN REVERIE — sistem warna tunggal
   Dusty Cream dasar · Classic Umber, Golden Veil, Stone Blue aksen
   ============================================================ */
:root{
  --krem:#F2EAD7;        /* Dusty Cream — dasar seluruh situs   */
  --kartu:#FBF7EC;       /* permukaan kartu di bidang terang    */
  --garis:#E2D5BA;       /* garis rambut                        */
  --tinta:#3D2A10;       /* tulisan utama                       */
  --tinta2:#8A7355;      /* tulisan kedua                       */
  --umber:#724211;       /* Classic Umber — aksen kuat          */
  --emas:#C69455;        /* Golden Veil — aksen hangat          */
  --biru:#588194;        /* Stone Blue — aksen dingin           */
  --emas-pucat:#EADAB9;
  --biru-pucat:#CFDDE4;
  --foto:#E4D8BE;        /* penampung foto                      */
  --gelap:#4A2B0B;       /* bidang gelap (hero)                 */
  --gelap2:#5E3A14;      /* permukaan di bidang gelap           */
  --lebar:1280px;
  --sisi:clamp(20px, 5vw, 80px);
  --r:16px;
  --r-besar:24px;
  --bayang:0 20px 44px -26px rgba(61,42,16,.45);
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}
body{
  margin:0; background:var(--krem); color:var(--tinta);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
:focus-visible{outline:3px solid var(--biru); outline-offset:3px; border-radius:4px}

/* ---------- tipografi ---------- */
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.025em; line-height:1.12}
h1{font-size:clamp(40px, 7vw, 82px)}
h2{font-size:clamp(28px, 4.4vw, 52px)}
h3{font-size:clamp(19px, 2.2vw, 26px); letter-spacing:-.015em}
p{margin:0}
.eyebrow{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta2); margin:0}
.lead{font-size:clamp(15px,1.5vw,18px); line-height:1.8; color:var(--tinta2)}
.kecil{font-size:13px; line-height:1.7; color:var(--tinta2)}
.serif{font-family:var(--serif)}

/* ---------- tata letak ---------- */
.bagian{position:relative; padding:clamp(64px,8vw,120px) var(--sisi)}
.wadah{max-width:var(--lebar); margin:0 auto}
.gelap{background:var(--gelap); color:var(--krem)}
.gelap .eyebrow,.gelap .lead,.gelap .kecil{color:rgba(242,234,215,.72)}

/* ---------- tombol ---------- */
.tbl{display:inline-flex; align-items:center; gap:10px; min-height:48px;
  padding:0 24px; border-radius:99px; background:var(--umber); color:var(--kartu);
  font-size:14px; font-weight:600; text-decoration:none; transition:background .2s, transform .2s}
.tbl:hover{background:#5B3409; transform:translateY(-1px)}
.tbl-garis{background:none; border:1px solid var(--umber); color:var(--umber)}
.tbl-garis:hover{background:var(--umber); color:var(--kartu)}
.tbl-biru{background:var(--biru)} .tbl-biru:hover{background:#476B7C}
.tbl-terang{background:var(--kartu); color:var(--tinta)} .tbl-terang:hover{background:#fff}

/* ---------- kartu ---------- */
.kartu{background:var(--kartu); border:1px solid var(--garis); border-radius:var(--r); overflow:hidden}
.pil{display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:99px;
  border:1px solid var(--garis); font-size:12.5px; background:var(--kartu)}
.pil-isi{background:var(--emas); border-color:var(--emas); color:#44290A; font-weight:600}

/* penampung foto yang belum ada */
.slot{position:relative; background:var(--foto); display:grid; place-items:center;
  color:rgba(61,42,16,.42); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  text-align:center; padding:12px}
.slot::after{content:''; position:absolute; inset:8px; border:1px dashed rgba(61,42,16,.18); border-radius:6px; pointer-events:none}

/* ---------- lengkung penyambung ---------- */
.lengkung{position:absolute; left:0; top:-1px; width:100%; height:clamp(36px,5vw,80px); display:block}
/* ============ LAYAR PEMBUKA ============ */
body.tertutup{overflow:hidden}
.pembuka{position:fixed; inset:0; z-index:999; background:var(--gelap); display:grid;
  place-items:center; text-align:center; padding:40px 24px; transition:opacity .6s ease, visibility .6s}
.pembuka[hidden]{opacity:0; visibility:hidden; pointer-events:none}
.pb-foto{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.42}
.pb-foto::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(74,43,11,.72) 0%, rgba(74,43,11,.5) 45%, rgba(74,43,11,.88) 100%)}
.pb-isi{position:relative; max-width:640px}
.pb-naik{opacity:0; transform:translateY(14px); animation:naik .9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes naik{to{opacity:1; transform:none}}
.pb-judul{font-family:var(--serif); font-size:clamp(38px,8vw,76px); font-weight:600;
  line-height:1.04; letter-spacing:-.03em; color:#FBF7EC; margin:18px 0 0}
.pb-logos{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:34px}
.pb-logos span{display:grid; place-items:center; width:58px; height:38px; padding:5px 8px;
  background:rgba(251,247,236,.93); border-radius:7px}
.pb-logos img{max-width:42px; max-height:28px; width:auto; height:auto; object-fit:contain}
.pb-masuk{margin-top:38px; display:inline-flex; align-items:center; gap:12px; min-height:52px;
  padding:0 14px 0 28px; border-radius:99px; border:1px solid rgba(251,247,236,.55);
  color:#FBF7EC; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase}
.pb-masuk span{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--emas)}
.pb-petunjuk{margin-top:18px; font-size:11.5px; letter-spacing:.14em; color:rgba(251,247,236,.5)}

/* ============ NAVIGASI ============ */
.nav{position:fixed; left:50%; transform:translateX(-50%); top:18px; z-index:90;
  width:min(var(--lebar), calc(100% - 2*var(--sisi)));
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:9px 9px 9px 22px; border-radius:99px;
  background:rgba(61,42,16,.62); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(251,247,236,.16); transition:background .3s, padding .3s, top .3s}
.nav.menyusut{background:rgba(61,42,16,.86); padding:7px 7px 7px 18px; top:12px}
.nav-logo{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700;
  letter-spacing:.02em; color:#FBF7EC; text-decoration:none; white-space:nowrap}
.nav-menu{display:flex; align-items:center; gap:4px}
.nav-menu a{display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 15px;
  border-radius:99px; font-size:13.5px; color:rgba(251,247,236,.82); text-decoration:none; transition:background .2s,color .2s}
.nav-menu a:hover,.nav-menu a.aktif{background:var(--krem); color:var(--tinta)}
.nav-menu a i{font-style:normal; font-size:11px; font-weight:700; padding:1px 6px;
  border-radius:99px; background:rgba(251,247,236,.18)}
.nav-menu a.aktif i{background:var(--emas); color:#44290A}
.nav-aksi{display:flex; align-items:center; gap:8px}
.nav-tbl{display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:99px;
  background:var(--emas); color:#44290A; font-size:13px; font-weight:600; text-decoration:none}
.nav-burger{display:none; width:44px; height:40px; border-radius:99px; place-items:center;
  background:rgba(251,247,236,.14)}
.nav-burger svg{stroke:#FBF7EC}
@media (max-width:980px){
  .nav-menu,.nav-aksi .nav-tbl{display:none}
  .nav-burger{display:grid}
}
/* panel menu di layar kecil */
.panel{position:fixed; inset:0; z-index:95; background:var(--gelap); padding:84px var(--sisi) 40px;
  display:none; overflow-y:auto}
.panel[data-buka="1"]{display:block}
.panel a{display:flex; align-items:center; justify-content:space-between; padding:18px 0;
  border-bottom:1px solid rgba(251,247,236,.14); color:#FBF7EC; text-decoration:none;
  font-family:var(--serif); font-size:26px}
.panel .kecil{font-family:var(--sans); color:rgba(242,234,215,.62)}
.panel-tutup{position:absolute; right:var(--sisi); top:26px; width:44px; height:44px;
  border-radius:50%; background:rgba(251,247,236,.14); display:grid; place-items:center}
/* kaki halaman */
.kaki{background:var(--garis); margin-top:clamp(44px,6vw,80px); padding:clamp(36px,5vw,46px) var(--sisi) 0}
.kaki-kisi{max-width:var(--lebar); margin:0 auto; display:grid;
  grid-template-columns:300px repeat(3,1fr); gap:clamp(24px,4vw,60px)}
.kaki-logo{display:flex; align-items:center; gap:11px; font-size:20px; font-weight:800; letter-spacing:.02em}
.kaki-kisi h4{font-size:14.5px; font-weight:700; margin-bottom:14px}
.kaki-kisi nav a{display:block; font-size:12.5px; line-height:2.1; color:rgba(61,42,16,.76); text-decoration:none}
.kaki-kisi nav a:hover{color:var(--umber)}
.kaki-dukung{max-width:var(--lebar); margin:clamp(28px,3.6vw,38px) auto 0}
.kaki-dukung p{font-size:11px; letter-spacing:.16em; color:rgba(61,42,16,.58); margin-bottom:12px}
.kaki-logos{display:flex; gap:9px; flex-wrap:wrap}
.kaki-logos span{display:grid; place-items:center; width:92px; height:46px; padding:6px 10px;
  background:var(--kartu); border-radius:8px}
.kaki-logos img{max-width:72px; max-height:34px; width:auto; height:auto; object-fit:contain}
.kaki-kontak{max-width:var(--lebar); margin:clamp(26px,3.4vw,34px) auto 0;
  display:flex; align-items:center; gap:clamp(18px,3.4vw,44px); flex-wrap:wrap}
.kaki-kontak>span{display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:700}
.kaki-garis{display:block; max-width:var(--lebar); height:1px; background:rgba(61,42,16,.1);
  margin:30px auto 0}
.kaki-hak{max-width:var(--lebar); margin:0 auto; text-align:center; padding:20px 0;
  font-size:12px; color:rgba(61,42,16,.68)}
@media (max-width:980px){ .kaki-kisi{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .kaki-kisi{grid-template-columns:1fr} }
/* ---------- jendela baca (naskah, rekaman, rute) ---------- */
.tirai{position:fixed; inset:0; z-index:200; display:none; padding:clamp(16px,4vw,48px);
  background:rgba(61,42,16,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  overflow-y:auto; overscroll-behavior:contain}
.tirai[data-buka="1"]{display:grid; place-items:start center}
.jendela-baca{position:relative; width:min(760px,100%); margin:auto;
  background:var(--kartu); border:1px solid var(--garis); border-radius:var(--r-besar);
  box-shadow:0 40px 80px -40px rgba(61,42,16,.7); overflow:hidden;
  animation:munculBaca .32s cubic-bezier(.22,1,.36,1)}
@keyframes munculBaca{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.jb-sampul{position:relative; aspect-ratio:16/6; background:var(--emas);
  border-bottom:3px solid var(--umber); display:grid; place-items:center;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,247,236,.82)}
.jb-sampul img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.jb-tutup{position:absolute; right:14px; top:14px; z-index:3; width:40px; height:40px;
  border-radius:50%; display:grid; place-items:center; background:var(--kartu);
  box-shadow:0 8px 20px -10px rgba(61,42,16,.6)}
.jb-isi{padding:clamp(22px,3.4vw,34px)}
.jb-isi h3{font-size:clamp(22px,3vw,30px); line-height:1.2}
.jb-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px;
  font-size:12px; color:var(--tinta2)}
.jb-badan{margin-top:20px; padding-top:20px; border-top:1px solid var(--garis);
  font-size:15px; line-height:1.95}
.jb-badan p+p{margin-top:16px}
.jb-badan .kosong{padding:18px; border:1px dashed var(--garis); border-radius:12px;
  font-size:13.5px; line-height:1.8; color:var(--tinta2); background:#F7F1E1}
.jb-kaki{display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-top:24px; padding-top:18px; border-top:1px solid var(--garis)}
body.terkunci{overflow:hidden}

/* ===========================================================
   GERAKAN JARI
   =========================================================== */
.dapat-diseret{cursor:grab; -webkit-user-select:none; user-select:none}
.dapat-diseret.sedang-diseret{cursor:grabbing}
.dapat-diseret img, .dapat-diseret svg, .dapat-diseret a{-webkit-user-drag:none; user-drag:none}
.dapat-diseret img, .dapat-diseret svg{pointer-events:none}
.gulir-x{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab}
.gulir-x::-webkit-scrollbar{display:none}
.gulir-x.sedang-diseret{cursor:grabbing; scroll-snap-type:none}
.gulir-x > *{scroll-snap-align:center}

/* petunjuk kecil "geser" yang muncul sekali */
.petunjuk-geser{display:inline-flex; align-items:center; gap:9px; padding:7px 15px;
  border-radius:99px; background:rgba(61,42,16,.07); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta2)}
.petunjuk-geser svg{animation:lambai 1.9s ease-in-out infinite}
@keyframes lambai{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.gelap .petunjuk-geser{background:rgba(242,234,215,.12); color:rgba(242,234,215,.76)}

/* muncul perlahan saat digulir */
[data-muncul]{opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
[data-muncul].tampil{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ [data-muncul]{opacity:1; transform:none} }

/* ===========================================================
   HALAMAN LANJUTAN
   =========================================================== */
.laman-kepala{position:relative; min-height:clamp(320px,38vw,460px); display:flex;
  align-items:flex-end; padding:clamp(110px,13vw,150px) var(--sisi) clamp(32px,4vw,52px);
  background:var(--gelap); overflow:hidden}
.laman-foto{position:absolute; inset:0; background-size:cover; background-position:center}
.laman-foto::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(74,43,11,.72) 0%, rgba(74,43,11,.42) 42%, rgba(74,43,11,.86) 100%)}
.laman-isi{position:relative; width:100%; max-width:var(--lebar); margin:0 auto}
.laman-isi h1{color:#FBF7EC; font-size:clamp(34px,6vw,64px)}
.laman-isi .lead{color:rgba(242,234,215,.82); margin-top:14px; max-width:60ch}
.remah{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,234,215,.68)}
.remah a{text-decoration:none}
.remah a:hover{color:#FBF7EC}
.balik{display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; padding:9px 18px 9px 13px;
  border-radius:99px; border:1px solid rgba(242,234,215,.4); color:#FBF7EC;
  font-size:12.5px; text-decoration:none; transition:background .2s}
.balik:hover{background:rgba(242,234,215,.16)}
.laman-badan{padding:clamp(48px,6vw,88px) var(--sisi)}
.laman-badan > .wadah > section + section{margin-top:clamp(44px,6vw,80px)}
.judul-bagian{display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:clamp(20px,3vw,30px)}
.kisi-kartu{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.kartu-isi{padding:clamp(18px,2.4vw,24px)}
.kartu-isi h3{font-size:19px; line-height:1.3}
.kartu .slot{aspect-ratio:16/10}
.daftar-tebal{list-style:none; margin:0; padding:0}
.daftar-tebal li{display:flex; gap:14px; padding:15px 0; border-top:1px solid var(--garis);
  font-size:14.5px; line-height:1.7}
.daftar-tebal li:first-child{border-top:0}
.daftar-tebal b{flex:none; width:30px; color:var(--emas); font-weight:700}
.kotak-catatan{background:#F7F1E1; border:1px solid var(--garis); border-radius:var(--r);
  padding:clamp(18px,2.4vw,26px); font-size:14px; line-height:1.85; color:var(--tinta2)}
.kotak-catatan b{color:var(--tinta)}

/* --- bagian yang dipakai beranda dan halaman lanjutan --- */
.angka-baris{display:flex; align-items:baseline; gap:14px; padding:14px 0; border-top:1px solid var(--kartu)}
.angka-baris:first-child{border-top:0; padding-top:4px}
.angka-baris b{flex:none; width:84px; font-size:clamp(26px,3vw,32px); font-weight:700; letter-spacing:-.02em}
.angka-baris b i{font-style:normal; font-size:.56em}
.angka-baris span{flex:1; font-size:13px; line-height:1.55; color:var(--tinta2)}
.urutan{position:relative; margin-top:clamp(36px,5vw,56px)}
.urutan-garis{position:absolute; left:10%; right:10%; top:15px; height:1px;
  background:repeating-linear-gradient(90deg,var(--emas-pucat) 0 5px,transparent 5px 11px)}
.urutan ol{position:relative; display:flex; justify-content:space-between; gap:8px;
  list-style:none; margin:0; padding:0; text-align:center}
.urutan li{flex:1; min-width:0; font-size:12.5px}
.urutan li b{display:grid; place-items:center; width:30px; height:30px; margin:0 auto 11px;
  border-radius:50%; background:var(--kartu); border:1px solid var(--tinta); font-size:12px}
.urutan li:last-child b{background:var(--umber); border-color:var(--umber); color:var(--krem)}
@media (max-width:900px){
  .urutan ol{flex-wrap:wrap; justify-content:flex-start}
  .urutan li{flex:0 0 calc(50% - 8px); text-align:left; display:flex; align-items:center; gap:12px}
  .urutan li b{margin:0}
  .urutan-garis{display:none}
}
.kik-baris2{position:relative; display:flex; align-items:center;
  margin:clamp(6px,.8vw,12px) 0; min-height:clamp(118px,16.2vw,234px)}
.kik-baris2 .kik-huruf{position:relative; z-index:2; margin-left:clamp(26px,3.6vw,52px)}
.kik-baris{display:grid; grid-template-columns:110px 1.5fr 1.2fr 1fr 150px; gap:0 18px;
  align-items:center; padding:14px 0; border-bottom:1px solid var(--kartu)}
.kik-baris.judul{padding-bottom:10px; border-bottom:1.5px solid var(--emas-pucat); align-items:end}
.kik-baris.judul span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta2)}
.kik-baris .nama{font-size:15px; font-weight:600}
.kik-baris .lbl{font-size:13.5px; color:var(--tinta2)}
button.kik-baris{width:100%; text-align:left; cursor:pointer; border-radius:10px; transition:background .2s}
button.kik-baris:hover{background:rgba(199,148,85,.14)}
button.kik-baris[aria-pressed="true"]{background:var(--emas-pucat)}
.kik-status{justify-self:start; border-radius:99px; padding:5px 11px; font-size:11px; white-space:nowrap}
.kik-status.tercatat{background:var(--tinta); color:#FBF7EC; font-weight:600}
.kik-status.proses{border:1px solid var(--tinta2); color:var(--tinta)}
.kik-status.siap{border:1px dashed var(--emas); color:var(--tinta2)}
.naskah-kredit{margin-top:16px; padding-top:14px; border-top:1px solid var(--foto)}
.naskah-kaki{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:16px}
.saring{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:clamp(22px,3vw,30px)}
.saring button{border:1px solid var(--emas-pucat); border-radius:99px; padding:8px 15px;
  font-size:12px; transition:background .2s,color .2s,border-color .2s}
.saring button:hover{border-color:var(--emas)}
.saring .aktif{background:var(--tinta); border-color:var(--tinta); color:#FBF7EC}
.saring .kosong{opacity:.4}
@media (max-width:760px){ .saring{justify-content:flex-start} }
.kal-pindah{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px;
  margin-top:clamp(26px,3.4vw,36px)}
.kal-pindah button{width:44px; height:44px; border-radius:50%; display:grid; place-items:center}
.kal-pindah .mundur{border:1px solid var(--emas-pucat); background:#F6F0E0}
.kal-pindah .maju{background:var(--umber)}
.kal-pindah .bulan{min-width:210px; text-align:center; font-size:19px; font-weight:600}
.kal-pindah .tahun{min-height:44px; border-radius:99px; border:1px solid var(--emas-pucat);
  background:#F6F0E0; padding:0 18px; font-size:13.5px; display:inline-flex; align-items:center; gap:8px}
.kal-kisi{max-width:700px; margin:clamp(26px,3.4vw,36px) auto 0}
.kal-hari,.kal-tgl{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); justify-items:center}
.kal-hari span{font-size:13px; color:var(--biru)}
.kal-tgl{row-gap:14px; margin-top:10px}
.kal-tgl>*{width:clamp(38px,6.6vw,58px); aspect-ratio:1; display:grid; place-items:center;
  font-size:clamp(13px,1.5vw,15px); color:var(--tinta2); border-radius:50%;
  text-decoration:none; box-sizing:border-box}
.kal-tgl .hari-ini{border:2px solid var(--tinta); font-weight:700; color:var(--tinta)}
.kal-tgl .tempat{border:1.5px dashed var(--emas-pucat); color:var(--biru)}
.kal-tgl .ada{position:relative; background:var(--umber); color:var(--krem); font-weight:700;
  overflow:hidden; text-shadow:0 1px 4px rgba(61,42,16,.6)}
.kal-tgl .ada img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6}
.kal-tgl .ada b{position:relative; z-index:1; font-weight:700}

/* --- komponen khas halaman lanjutan --- */
.tema-bar{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:clamp(24px,3.4vw,36px)}
.tema-bar button{padding:11px 20px; border-radius:99px; border:1px solid var(--garis);
  background:var(--kartu); font-size:13.5px; transition:background .2s,color .2s,border-color .2s}
.tema-bar button:hover{border-color:var(--emas)}
.tema-bar .aktif{background:var(--umber); border-color:var(--umber); color:var(--kartu); font-weight:600}
.tema-panel{min-height:200px}
.tema-atas{display:grid; grid-template-columns:1fr minmax(0,440px); gap:clamp(24px,4vw,56px);
  align-items:center}
.tema-atas .slot{aspect-ratio:4/3; border-radius:var(--r-besar); overflow:hidden}
.tema-atas h2{font-size:clamp(28px,4vw,46px)}
@media (max-width:860px){ .tema-atas{grid-template-columns:1fr} }
.baris-rinci{padding:14px 0; border-top:1px solid var(--garis)}
.baris-rinci:first-child{border-top:0; padding-top:0}
.baris-rinci p{margin-top:4px; font-size:15px}
.kik-bar{height:5px; border-radius:99px; background:var(--garis); margin:14px 0 8px; overflow:hidden}
.kik-bar i{display:block; height:5px; border-radius:99px; background:var(--emas)}
.kik-kartu{text-decoration:none}
.badan-naskah{margin-top:26px; max-width:68ch; font-size:17px; line-height:1.95}
.badan-naskah p + p{margin-top:20px}
.naskah-baca .jb-meta{margin-top:0}
a.kartu, button.kartu{display:block; text-decoration:none; cursor:pointer;
  transition:transform .25s, box-shadow .25s, border-color .25s}
a.kartu:hover, button.kartu:hover{transform:translateY(-3px);
  border-color:var(--emas); box-shadow:0 20px 38px -24px rgba(61,42,16,.5)}
button.kartu{width:100%; font:inherit; color:inherit}
.deret{gap:18px; padding-bottom:14px}
.deret > *{flex:0 0 min(300px, 78%)}
.laman-badan .saring{justify-content:flex-start; margin-top:0}
@media (max-width:560px){
  .kal-pindah{gap:10px}
  .kal-pindah .bulan{min-width:130px; font-size:17px}
}