/* =====================================================================
   Kopdit Obormas — Primitif halaman statis (sub-page)
   Dipakai bersama css/styles.css. Berisi komponen yang dipakai ulang
   oleh semua halaman konten (Tentang Kami, Profile, dll.):
   sub-hero + breadcrumb, area konten rich-text (.rte) yang CMS-editable,
   dan navigasi "halaman terkait".

   PENTING — area .rte sengaja dibuat "bersih dari style per-elemen":
   semua gaya diterapkan lewat selektor turunan tag (.rte h2, .rte p,
   .rte blockquote, dst.) sehingga HTML apa pun yang dihasilkan editor
   CMS (SilverStripe $Content / HtmlEditorField) langsung tampil rapi
   tanpa perlu menambahkan class pada tiap paragraf.
   ===================================================================== */

/* ---------- Sub-hero (header halaman, band penuh — primitif opsional) ---------- */
.subhero{position:relative;background:var(--soft);border-bottom:1px solid var(--line);overflow:hidden}
.subhero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 100% 0,rgba(245,180,0,.16),transparent 56%);pointer-events:none}
.subhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--gold),transparent)}
.subhero .wrap{position:relative;padding:52px 0 50px}
.subhead{max-width:760px}
.subhero h1{font-size:clamp(30px,4.4vw,50px);font-weight:800;margin:14px 0 14px}
.subhero .lead{font-size:18px;color:var(--slate);max-width:600px}

/* breadcrumb */
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:500;color:var(--slate);margin-bottom:16px}
.crumb a{display:inline-flex;align-items:center;border-radius:6px;transition:color .2s var(--ease)}
.crumb a:hover{color:var(--gold-700)}
.crumb a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.crumb .sep{color:var(--line);font-weight:700}
.crumb [aria-current="page"]{color:var(--ink);font-weight:600}

/* ---------- Area konten rich-text (CMS-editable) ---------- */
.rte{max-width:760px;margin-inline:auto}
.rte>*:first-child{margin-top:0}
.rte>*:last-child{margin-bottom:0}
.rte p{font-size:17.5px;line-height:1.8;color:var(--ink-2);margin:0 0 22px}
.rte h2{font-family:"Sora",sans-serif;font-size:clamp(22px,2.8vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.18;margin:42px 0 16px;padding-left:16px;border-left:4px solid var(--gold)}
.rte h3{font-family:"Sora",sans-serif;font-size:clamp(18px,2.2vw,22px);font-weight:700;letter-spacing:-.01em;margin:32px 0 12px}
.rte h4{font-family:"Sora",sans-serif;font-size:17px;font-weight:700;margin:26px 0 10px}
.rte ul,.rte ol{margin:0 0 22px;padding-left:4px;list-style:none}
.rte ul li,.rte ol li{position:relative;padding-left:32px;margin-bottom:12px;font-size:17px;line-height:1.7;color:var(--ink-2)}
.rte ul li::before{content:"";position:absolute;left:6px;top:11px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-50)}
.rte ol{counter-reset:rte-ol}
.rte ol li{counter-increment:rte-ol}
.rte ol li::before{content:counter(rte-ol);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--gold-50);color:var(--gold-700);font-family:"Sora",sans-serif;font-size:12.5px;font-weight:700;display:grid;place-items:center}
.rte blockquote{position:relative;margin:0 0 24px;padding:26px 30px;background:var(--gold-50);border:1px solid var(--gold);border-radius:var(--r-lg);font-family:"Sora",sans-serif;font-size:clamp(18px,2.2vw,22px);font-weight:600;line-height:1.55;color:var(--ink)}
.rte blockquote p{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0}
.rte blockquote p+p{margin-top:14px}
.rte a{color:var(--gold-700);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold);transition:color .2s}
.rte a:hover{color:var(--ink)}
.rte strong,.rte b{font-weight:700;color:var(--ink)}
.rte img{border-radius:var(--r-lg);margin:8px 0 24px;box-shadow:var(--shadow-sm)}
.rte hr{border:0;height:1px;background:var(--line);margin:36px 0}
/* Tabel konten CMS: editor menghasilkan <table> polos (tanpa wrapper), jadi
   jadikan tabelnya sendiri kontainer scroll. display:block + width:max-content
   + max-width:100% + overflow-x:auto = tabel lebar bisa di-scroll mendatar dan
   tak pernah melebihi lebar kolom/layar (sebelumnya width:100% terpotong di
   layar sempit). border-collapse diwarisi anonymous table box, layout kolom
   tetap utuh. */
.rte table{display:block;width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.rte th,.rte td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.rte th{font-family:"Sora",sans-serif;color:var(--ink);background:var(--soft)}

/* ---------- Navigasi halaman terkait ---------- */
.related{max-width:760px;margin:56px auto 0;padding-top:32px;border-top:1px solid var(--line)}
.related .lbl{font-family:"Sora",sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-700);margin-bottom:16px}
.related-row{display:flex;flex-wrap:wrap;gap:10px}
.related-row a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:11px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s}
.related-row a:hover{transform:translateY(-2px);background:var(--gold-50);border-color:var(--gold);box-shadow:var(--shadow-sm)}
.related-row a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.related-row a svg{width:15px;height:15px;color:var(--gold-700);transition:transform .25s var(--ease)}
.related-row a:hover svg{transform:translateX(3px)}

@media (max-width:680px){
  .subhero .wrap{padding:38px 0 36px}
  .rte p,.rte ul li,.rte ol li{font-size:16.5px}
}

/* =====================================================================
   HEADER HALAMAN — pilihan klien: Variasi B (tanpa band).
   tentang-visi-misi.html final memakai .page-lite + .pagetitle di bawah.
   Variasi A (.subhero.compact) & band penuh (.subhero) dibiarkan sebagai
   primitif opsional yang bisa dipakai ulang halaman lain bila perlu.
   ===================================================================== */

/* ---------- Variasi A — Header ringkas (slim band, opsional) ----------
   Band header dipangkas: tanpa lead, judul lebih kecil, breadcrumb +
   judul sebaris-rapat. Konten naik mendekati lipatan layar. */
.subhero.compact .wrap{padding:26px 0 24px}
.subhero.compact .crumb{margin-bottom:10px}
.subhero.compact h1{font-size:clamp(24px,3vw,34px);margin:8px 0 0}
.subhero.compact::after{height:2px}
.section.tight{padding:48px 0 88px}
@media (max-width:680px){
  .subhero.compact .wrap{padding:22px 0 20px}
  .section.tight{padding:34px 0 56px}
}

/* ---------- Variasi B — Tanpa band, judul menyatu di kolom konten ----------
   HEADER STANDAR SEMUA HALAMAN. Tidak ada pita abu-abu terpisah:
   breadcrumb + judul tipis langsung di atas kolom konten putih, lalu
   konten menyusul — paling hemat ruang. Judul dibuat lebih ringkas.

   Dua lebar pemakaian:
   - default  : kolom konten 760px (mis. Tentang — prosa terpusat)
   - .wide     : selebar kontainer, rata kiri (mis. Berita — ada sidebar)
   Tambahkan class .wide pada <section class="page-lite"> DAN pada
   <header class="pagetitle"> agar header sejajar dengan tata letak. */
.page-lite{padding:30px 0 80px}
.page-lite>.wrap>.crumb{max-width:760px;margin:0 auto 16px}
.pagetitle{max-width:760px;margin:0 auto 30px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.pagetitle h1{font-size:clamp(23px,2.9vw,33px);font-weight:800;letter-spacing:-.02em;line-height:1.16;margin:9px 0 0}
.pagetitle .lead{font-size:15.5px;color:var(--slate);max-width:640px;margin-top:10px;line-height:1.6}

/* varian lebar penuh (rata kiri) untuk halaman berkolom/sidebar */
.page-lite.wide>.wrap>.crumb{max-width:none;margin-inline:0}
.pagetitle.wide{max-width:none;margin-inline:0}

@media (max-width:680px){
  .page-lite{padding:22px 0 52px}
  .pagetitle{margin-bottom:24px;padding-bottom:16px}
}

/* ---------- Varian KUNING — header pita emas tipis ----------
   Alternatif berwarna dari header putih .page-lite, dengan tinggi/
   ukuran yang sama ringkasnya. Header berdiri sendiri sebagai pita
   selebar layar; konten menyusul di <section class="section tight">.
   Pakai: <section class="pagehead"> > .wrap > .crumb + .pagetitle.wide.
   Teks dibuat gelap (ink) agar kontras di atas kuning. */
.pagehead{position:relative;background:linear-gradient(180deg,#FFC21A,var(--gold));border-bottom:1px solid var(--gold-700);overflow:hidden}
.pagehead::before{content:"";position:absolute;top:0;right:0;width:42%;height:100%;background:radial-gradient(80% 120% at 100% 0,rgba(255,255,255,.42),transparent 62%);pointer-events:none}
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(176,124,8,.45)}
.pagehead .wrap{position:relative;padding-block:26px 24px}/* padding-inline 26px tetap dari .wrap → sejajar dgn nav & konten */
/* breadcrumb mengikuti lebar judul: terpusat 760px utk halaman prosa,
   selebar kontainer (rata kiri) bila section diberi .wide */
.pagehead>.wrap>.crumb{max-width:760px;margin-left:auto;margin-right:auto}
.pagehead.wide>.wrap>.crumb{max-width:none;margin-inline:0}
.pagehead .crumb{margin-bottom:12px;color:rgba(20,32,43,.7)}
.pagehead .crumb a:hover{color:var(--ink)}
.pagehead .crumb .sep{color:rgba(20,32,43,.35)}
.pagehead .crumb [aria-current="page"]{color:var(--ink);font-weight:600}
.pagehead .pagetitle{border-bottom:0;padding-bottom:0;margin-bottom:0}
.pagehead .kicker{color:var(--ink)}
.pagehead .kicker::before{background:var(--ink)}
.pagehead h1{color:var(--ink)}
.pagehead .lead{color:rgba(20,32,43,.78)}
.pagehead .cat-tag{background:var(--ink);color:#fff}
.pagehead .article-meta{color:rgba(20,32,43,.72)}
.pagehead .article-meta svg{color:var(--ink)}
.pagehead .article-meta b{color:var(--ink)}
@media (max-width:680px){
  .pagehead .wrap{padding-block:20px 18px}/* padding-block only → keeps .wrap padding-inline:26px so judul sejajar logo & konten */
}