/*
Theme Name:  Panduan Iman Child
Template:    generatepress
Version:     1.0.2
Text Domain: panduaniman
Description: Tema anak GeneratePress untuk panduaniman.id. Gaya di
             bawah ini dirakit dari desain statis (lihat folder
             desain/ di repo) — kelas CSS sengaja tidak diubah dari
             sana supaya tampilan yang sudah disetujui tetap berlaku
             tanpa penyesuaian ulang.
*/

/* ============================================================
   BAGIAN 1 — GAYA BERSAMA
   Dipakai semua templat: token warna, kepala/kaki halaman, kartu,
   formulir, animasi, panel pencarian.
   Sumber: desain/assets/panduan.css
   ============================================================ */

/* --- Didaftarkan sebagai warna supaya bisa dianimasikan --- */
@property --ca{syntax:'<color>';inherits:true;initial-value:#5B4BC4}
@property --cb{syntax:'<color>';inherits:true;initial-value:#9B8BFF}

:root{
  --ink:#101014;
  --ink-2:#4E525B;
  --ink-3:#868B95;
  --line:#EAEBEE;
  --card:#FFFFFF;

  /* tujuh rubrik, tujuh pasang warna */
  --doktrin-a:#D6303B; --doktrin-b:#FF7A4A;
  --tumbuh-a:#C97A00;  --tumbuh-b:#FFC24B;
  --alkitab-a:#0E8A6E; --alkitab-b:#46D3A8;
  --murid-a:#1F5FCC;   --murid-b:#5B9BFF;
  --keluarga-a:#B5297A;--keluarga-b:#FF6BB5;
  --gumul-a:#5B4BC4;   --gumul-b:#9B8BFF;
  /* Sejarah & Misi — bertone antik/perunggu, sengaja beda keluarga
     warna dari enam rubrik di atas supaya tidak terbaca "oranye
     kedua"-nya Pertumbuhan. */
  --sejarah-a:#8C6A2F; --sejarah-b:#D4A94E;

  /* Aksen garis atas & garis bawah menu — tujuh warna rubrik.
     Sempat dicoba versi dua warna, lalu dikembalikan ke sini.

     Kalau suatu saat mau dua warna lagi, cukup ganti baris ini:
       Hangat : linear-gradient(90deg,#B8451E,#E8A33C)
       Tenang : linear-gradient(90deg,#0E5C8A,#2FA8A0)
       Nila   : linear-gradient(90deg,#4A3FB0,#9B8BFF)
  */
  --aksen:linear-gradient(90deg,var(--doktrin-a),var(--tumbuh-b),var(--alkitab-a),var(--murid-a),var(--keluarga-a),var(--gumul-a),var(--sejarah-b));

  --ease:cubic-bezier(.22,.7,.3,1);
  --dur:260ms;
  --pad:clamp(1.15rem,4vw,3rem);
  --max:1320px;
  --shadow:0 18px 40px -24px rgba(20,20,40,.28), 0 2px 8px -4px rgba(20,20,40,.12);
}

/* ---------- dasar ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  color:var(--ink);background:#FCFCFD;
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:16px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
h1,h2,h3{letter-spacing:-.03em;line-height:1.14;font-weight:700}

/* ---------- latar aurora (warna gumpalan diatur tiap halaman) ---------- */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#FCFCFD;
  filter:hue-rotate(var(--hr,0deg))}
.blob{position:absolute;border-radius:50%;filter:blur(68px)}
@keyframes f1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7%,9%) scale(1.14)}}
@keyframes f2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-9%,7%) scale(.88)}}
@keyframes f3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10%,-8%) scale(1.1)}}

/* ---------- kepala halaman ---------- */
.topline{height:3px;background:var(--aksen)}
header.situs{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.74);backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid rgba(16,16,20,.07);
}
.bar{display:flex;align-items:center;gap:1.4rem;height:70px}
/* Lihat catatan di header.php: dua ikon aksi dibungkus sendiri dan
   dapat margin-left:auto sendiri, tidak numpang ke nav.utama — supaya
   tetap terdorong ke kanan walau nav.utama hilang total (display:none)
   di bawah 1000px. */
.bar-aksi{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex:none}
/* Logo. width/height ditulis di HTML supaya ruangnya sudah dipesan
   sebelum berkasnya termuat — kepala halaman tidak melompat. */
.mark{display:flex;align-items:center;flex:none}
.mark img{height:34px;width:auto;display:block}
@media(max-width:520px){.mark img{height:29px}}
/* Di mobile, nav.utama sudah hilang — bar cuma berisi logo + .bar-aksi,
   jadi logonya dirapikan ke tengah (bukan cuma "rata kiri, teksnya
   ditengahkan") lewat posisi absolut, lepas dari flex .bar. Ini
   sengaja dibatasi <1000px saja: di desktop logo tetap di kiri karena
   nav.utama mengisi ruang di antara logo dan ikon aksi. */
@media(max-width:1000px){
  .bar{position:relative}
  .mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
}
/* Tiap rubrik membawa warnanya sendiri, bukan aksen pelangi bersama:
   satu titik warna dan satu garis bawah, keduanya memakai --ca/--cb
   yang disetel per tautan di partials/header.html.

   Titik warna tetap memesan ruangnya walau sedang tak tampak (yang
   dianimasikan transform, bukan lebar), jadi menunya tidak bergeser
   saat kursor lewat. */
nav.utama{display:flex;gap:clamp(1rem,1.8vw,1.6rem);margin-left:auto}
nav.utama a{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:.35rem 0;
  font-size:.75rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
nav.utama a::before{
  content:'';width:7px;height:7px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--ca),var(--cb));
  transform:scale(0);transition:transform 240ms var(--ease);
}
nav.utama a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--ca),var(--cb));
  transform:scaleX(0);transform-origin:left;
  transition:transform 280ms var(--ease);
}
nav.utama a:hover{color:var(--ink)}
nav.utama a:hover::before{transform:scale(1)}
nav.utama a:hover::after{transform:scaleX(1)}
nav.utama a[aria-current]{color:var(--ink)}
nav.utama a[aria-current]::before{transform:scale(1)}
nav.utama a[aria-current]::after{transform:scaleX(1)}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  transition:background var(--dur) var(--ease)}
.icon-btn:hover{background:rgba(16,16,20,.06)}
.icon-btn:focus-visible{outline-width:2px;outline-offset:0;background:rgba(16,16,20,.08)}
.menu-btn{display:none}
@media(max-width:1000px){
  nav.utama{display:none}
  .menu-btn{display:grid}
}

/* ---------- MENU RUBRIK MOBILE ----------
   Sama nasib dengan .cari: overlay kaca buram, dibuka dari tombol
   hamburger yang cuma tampil di bawah 1000px. */
.menu{position:fixed;inset:0;z-index:100;display:flex;justify-content:flex-end}
.menu[hidden]{display:none}
.menu-tirai{position:absolute;inset:0;background:rgba(12,12,20,.34);
  backdrop-filter:blur(8px);animation:cariTirai 220ms var(--ease) both}
.menu-kotak{position:relative;width:min(320px,84vw);height:100%;overflow-y:auto;
  background:rgba(255,255,255,.92);backdrop-filter:blur(24px) saturate(1.6);
  border-left:1px solid rgba(255,255,255,.9);
  box-shadow:-30px 0 70px -30px rgba(12,12,30,.5);
  padding:1.1rem 1rem 2rem;display:flex;flex-direction:column;gap:.35rem;
  animation:menuGeser 240ms var(--ease) both}
@keyframes menuGeser{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.menu-atas{display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .25rem 1rem;margin-bottom:.25rem;border-bottom:1px solid rgba(16,16,20,.08)}
.menu-atas span{font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.menu-tutup{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  color:var(--ink-3);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.menu-tutup:hover{background:rgba(16,16,20,.07);color:var(--ink)}
.menu-kotak > a{position:relative;display:flex;align-items:center;gap:.7rem;
  min-height:52px;padding:0 .75rem;border-radius:12px;
  font-size:.9375rem;font-weight:700;color:var(--ink-2);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.menu-kotak > a::before{content:'';width:9px;height:9px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--ca),var(--cb))}
.menu-kotak > a:hover,.menu-kotak > a:active{background:rgba(16,16,20,.06);color:var(--ink)}
.menu-kotak > a[aria-current]{color:var(--ink);background:rgba(16,16,20,.06)}
body.menu-buka{overflow:hidden}
@media(min-width:1001px){.menu,.menu-btn{display:none!important}}

/* ---------- potongan yang dipakai di mana-mana ---------- */
.rub{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ca);
}
.rub::before{content:'';width:16px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--ca),var(--cb))}
.meta{font-size:.75rem;color:var(--ink-3);font-weight:500}
.face{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.5625rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--ca),var(--cb));
}
.remah{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.75rem;font-weight:600;color:var(--ink-3)}
.remah a{transition:color var(--dur) var(--ease)}
.remah a:hover{color:var(--ink)}
.remah svg{opacity:.5;flex:none}

/* kotak foto */
.ph{display:block;position:relative;overflow:hidden;border-radius:10px;background:#EDEEF1}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1);transition:transform 700ms var(--ease)}
a:hover .ph img{transform:scale(1.06)}

/* kartu putih mengambang */
.card{
  background:var(--card);border-radius:18px;box-shadow:var(--shadow);
  padding:1.15rem;display:flex;flex-direction:column;gap:.75rem;
  transition:transform 320ms var(--ease),box-shadow 320ms var(--ease);
}
a.card:hover{transform:translateY(-6px);
  box-shadow:0 28px 56px -28px rgba(20,20,40,.38),0 3px 10px -4px rgba(20,20,40,.14)}
.card h3{font-size:1.0625rem;font-weight:700;transition:color var(--dur) var(--ease)}
a.card:hover h3{color:var(--ca)}
.card p{font-size:.875rem;color:var(--ink-2);line-height:1.55}
.card .foot{display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:.15rem}

/* judul bagian */
.sec-h{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.sec-h h2{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:700;white-space:nowrap}
.sec-h .rule{flex:1;height:2px;border-radius:2px;background:var(--aksen);opacity:.75}
.sec-h a{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.sec-h a svg{transition:transform var(--dur) var(--ease)}
.sec-h a:hover svg{transform:translateX(3px)}

/* Tombol muat lagi — perlakuannya disamakan dengan tombol
   "Baca artikel": tanpa garis tepi yang berubah, cukup terangkat
   sedikit dengan bayangan yang ikut melebar. Garis rambut tipisnya
   dibuat dari box-shadow supaya nilainya tetap di kedua keadaan
   dan tidak ada tepi yang "muncul" saat disorot. */
.muat{display:block;width:100%;min-height:56px;margin-top:1.5rem;
  border:none;border-radius:999px;color:var(--ink);
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 3px 10px -5px rgba(20,20,40,.22), 0 0 0 1px rgba(16,16,20,.05);
  font-size:.9375rem;font-weight:700;letter-spacing:.02em;
  transition:transform 280ms var(--ease),box-shadow 280ms var(--ease),background 280ms var(--ease)}
.muat:hover{transform:translateY(-3px);background:#fff;
  box-shadow:0 20px 36px -16px rgba(20,20,40,.4), 0 0 0 1px rgba(16,16,20,.05)}
.muat:active{transform:translateY(-1px);
  box-shadow:0 8px 18px -10px rgba(20,20,40,.35), 0 0 0 1px rgba(16,16,20,.05)}

/* ---------- blok berlangganan ---------- */
.sub{
  margin-block:clamp(1.5rem,3.5vw,2.5rem);
  border-radius:22px;padding:clamp(1.75rem,4vw,2.75rem);
  background:rgba(255,255,255,.62);backdrop-filter:blur(16px) saturate(1.5);
  border:1.5px solid rgba(255,255,255,.9);box-shadow:var(--shadow);
}
.sub-in{display:grid;gap:1.35rem}
@media(min-width:980px){.sub-in{grid-template-columns:minmax(0,1fr) minmax(0,34rem);
  align-items:center;gap:2.5rem}}
.sub h2{font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:700;max-width:22ch}
.sub p{margin-top:.5rem;color:var(--ink-2);font-size:.9rem;max-width:46ch}
.form{display:flex;flex-wrap:wrap;gap:.5rem}
.form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.form input{
  font:inherit;font-size:1.0625rem;font-weight:500;min-height:64px;min-width:min(320px,72vw);
  padding:0 1.6rem;border-radius:999px;border:1.5px solid rgba(16,16,20,.14);
  background:rgba(255,255,255,.92);color:var(--ink);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.form input::placeholder{color:var(--ink-3);font-weight:400}
.form input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(16,16,20,.1)}
.form button{
  min-height:64px;padding:0 2.1rem;border-radius:999px;background:var(--ink);color:#fff;
  font-size:1rem;font-weight:700;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.form button:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(16,16,20,.6)}
/* Di bawah 980px .sub-in sudah satu kolom (lihat breakpoint di atas)
   — di lebar itu juga kolom email dan tombolnya dilebarkan penuh,
   bukan dibiarkan sebesar kontennya sendiri lalu menggantung dengan
   ruang kosong di kanan-kirinya. */
@media(max-width:979px){
  .form input{min-width:0;width:100%}
  .form button{width:100%}
}

/* ---------- kaki halaman ---------- */
footer.situs{padding-block:2rem 3rem;border-top:1px solid rgba(16,16,20,.08);margin-top:1rem}
.foot{display:flex;flex-wrap:wrap;gap:1rem 2.25rem;align-items:center}
.foot p{font-size:.75rem;color:var(--ink-3)}
/* flex-wrap di sini yang tadinya hilang: tanpa ini, begitu layar
   terlalu sempit untuk memuat keempat tautan di satu baris, tiap
   tautan menciut dan TEKSNYA sendiri yang patah dua baris ("Dasar" /
   "Ajaran") — bukan barisnya yang turun ke bawah secara utuh. */
.foot nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.foot nav a{font-size:.75rem;font-weight:600;white-space:nowrap;transition:color var(--dur) var(--ease)}
.foot nav a:hover{color:var(--ink)}
/* Di layar sempit, footer dipusatkan seluruhnya — teks hak cipta dan
   baris tautan sama-sama ke tengah, bukan rata kiri seperti desktop
   (yang rata kiri/kanan itu pola desktop, di mobile kolomnya cuma
   satu jadi rata tengah lebih rapi dipandang). */
@media(max-width:560px){
  .foot{justify-content:center;text-align:center}
  .foot nav{margin-left:0;justify-content:center}
}

/* ---------- animasi masuk ---------- */
.js .rv{opacity:0;transform:translateY(24px)}
.rv.in{opacity:1;transform:none;
  transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.boot{animation:naikMasuk 700ms var(--ease) both}
@keyframes naikMasuk{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.b-1{animation-delay:60ms}.b-2{animation-delay:180ms}.b-3{animation-delay:290ms}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:1ms!important}
  .js .rv{opacity:1;transform:none}
  .aurora{filter:none}
}

/* ============================================================
   PANEL PENCARIAN — sesederhana mungkin
   Kotak kaca buram di tengah-atas, satu kolom isian, lalu daftar
   judul. Tanpa gambar, tanpa keterangan tambahan: saat mencari,
   yang dicari orang cuma judulnya.
   ============================================================ */
.cari{position:fixed;inset:0;z-index:100;display:grid;justify-items:center;align-content:start;
  padding:clamp(1rem,10vh,7rem) 1rem 2rem}
.cari[hidden]{display:none}
.cari-tirai{position:absolute;inset:0;background:rgba(12,12,20,.34);
  backdrop-filter:blur(8px);animation:cariTirai 220ms var(--ease) both}
@keyframes cariTirai{from{opacity:0}to{opacity:1}}
.cari-kotak{position:relative;width:min(560px,100%);
  background:rgba(255,255,255,.82);backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.9);border-radius:18px;overflow:hidden;
  box-shadow:0 36px 70px -30px rgba(12,12,30,.5), 0 0 0 1px rgba(16,16,20,.05);
  animation:cariKotak 260ms var(--ease) both}
@keyframes cariKotak{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.cari-baris{display:flex;align-items:center;gap:.8rem;padding:.75rem .95rem;
  border-bottom:1px solid rgba(16,16,20,.08)}
.cari-ikon{color:var(--ink-3);flex:none}
.cari-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cari-baris input{font:inherit;font-size:1rem;font-weight:500;flex:1;min-width:0;
  min-height:44px;border:none;background:none;color:var(--ink);outline:none}
.cari-baris input::placeholder{color:var(--ink-3);font-weight:400}
.cari-baris input::-webkit-search-cancel-button{display:none}
.cari-tutup{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none;
  color:var(--ink-3);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.cari-tutup:hover{background:rgba(16,16,20,.07);color:var(--ink)}

.cari-hasil{max-height:min(46vh,340px);overflow-y:auto;padding:.4rem}
.cari-hasil a{display:block;padding:.65rem .8rem;border-radius:10px;
  font-size:.9375rem;font-weight:500;line-height:1.4;color:var(--ink-2);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.cari-hasil a:hover,.cari-hasil a.cari-terpilih{background:rgba(16,16,20,.06);color:var(--ink)}
.cari-hasil a mark{background:none;color:var(--ink);font-weight:700}
.cari-kosong{padding:1.1rem .8rem 1.4rem;text-align:center;
  font-size:.8125rem;color:var(--ink-3)}
body.cari-buka{overflow:hidden}


/* ============================================================
   BAGIAN 2 — KHAS BERANDA (front-page.php)
   Sumber: desain/src/beranda.html
   ============================================================ */

/* ============================================================
   KHAS BERANDA
   Gaya bersama ada di assets/panduan.css — jangan disalin ke sini.
   ============================================================ */
/* --- gumpalan aurora khas beranda: enam warna, berputar --- */
.blob{position:absolute;border-radius:50%;filter:blur(68px);will-change:transform}
.b1{width:52vw;height:52vw;min-width:420px;min-height:420px;
    background:radial-gradient(circle,#FF7A45,transparent 66%);
    top:-16%;left:-10%;opacity:.78;animation:f1 30s ease-in-out infinite}
.b2{width:46vw;height:46vw;min-width:380px;min-height:380px;
    background:radial-gradient(circle,#FFC53D,transparent 66%);
    top:12%;right:-12%;opacity:.75;animation:f2 36s ease-in-out infinite}
.b3{width:50vw;height:50vw;min-width:400px;min-height:400px;
    background:radial-gradient(circle,#3FCB9F,transparent 68%);
    bottom:-18%;left:14%;opacity:.7;animation:f3 33s ease-in-out infinite}
.b4{width:38vw;height:38vw;min-width:300px;min-height:300px;
    background:radial-gradient(circle,#5E96FF,transparent 68%);
    top:44%;right:18%;opacity:.66;animation:f1 40s ease-in-out infinite reverse}
.b5{width:34vw;height:34vw;min-width:270px;min-height:270px;
    background:radial-gradient(circle,#C98CFF,transparent 70%);
    bottom:6%;right:-6%;opacity:.6;animation:f2 44s ease-in-out infinite}

/* nomor peringkat, hanya dipakai di bagian Populer */
.rank{
  position:absolute;top:10px;left:10px;z-index:2;
  min-width:30px;height:30px;padding:0 .55rem;border-radius:9px;
  display:grid;place-items:center;
  font-size:.875rem;font-weight:700;color:#fff;
  background:rgba(16,16,20,.6);backdrop-filter:blur(6px);
}

/* ============ HERO SOROT ============ */
.lead{padding-block:clamp(1.25rem,3vw,2rem) clamp(2rem,4vw,3rem)}
.sorot{
  position:relative;overflow:hidden;border-radius:26px;
  box-shadow:0 28px 60px -30px rgba(12,12,24,.5), var(--shadow);
  min-height:clamp(430px,52vw,580px);
  transition:--ca 760ms var(--ease), --cb 760ms var(--ease);
}
.sorot-bg{position:absolute;inset:0}
.sorot-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 760ms var(--ease)}
.sorot-bg img.on{opacity:1}
/* TIRAI BERWARNA — bukan hitam.
   Lapisan paling atas memberi rona kategori, dua lapisan di bawahnya
   yang menggelapkan supaya teks putih tetap lolos kontras di atas foto
   seterang apa pun. Warnanya ikut berganti bersama artikelnya. */
/* Tidak ada lapisan peredam di atas foto sama sekali — fotonya tampil
   apa adanya. Beban kontras dipindah sepenuhnya ke tempat teksnya
   berada: gumpalan warna di kiri, dan kartu 01-05 yang dipekatkan. */
.sorot-in{position:relative;z-index:2;display:grid;gap:2rem;
  padding:clamp(1.5rem,3.4vw,3rem);min-height:inherit;align-content:center}
@media(min-width:1000px){
  .sorot-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:3rem;align-items:center}
}
.sorot-teks{position:relative;color:#fff}
/* Warna kategori muncul sebagai satu gumpalan buram di belakang teks,
   bukan menyelimuti seluruh foto. Topeng radial membuat tepinya luruh
   halus, dan backdrop-filter mengaburkan foto tepat di area itu saja —
   jadi teks tetap terbaca tanpa menutupi gambarnya. */
/* Gumpalan warna di belakang teks.

   TIDAK memakai backdrop-filter. Wilayah kerja backdrop-filter selalu
   berbentuk kotak sebesar elemennya; topeng hanya melembutkan warnanya,
   sementara batas buramnya tetap tampak sebagai garis lurus. Hasilnya
   terbaca sebagai kotak.

   Gantinya: tiga gumpalan radial yang saling tumpang tindih, lalu
   seluruh elemen diburamkan dengan filter:blur(). Karena yang diburamkan
   gambarnya sendiri, tepinya luruh alami dan bentuknya tidak beraturan —
   sama seperti gumpalan aurora di latar halaman. */
.sorot-teks::before{
  content:'';position:absolute;z-index:-1;
  inset:-34% -44% -34% -40%;
  /* Kadar warna dijaga di 62% dan sisanya hitam kebiruan. Di atas 62%
     rubrik paling terang (Pertumbuhan, #C97A00) turun ke kontras 3,8:1
     terhadap teks putih — di bawah ambang 4,5:1. Pada kadar ini rubrik
     paling terang dapat 6,9:1 dan paling gelap 10,9:1. */
  background:
    radial-gradient(50% 58% at 30% 42%, color-mix(in srgb, var(--ca) 62%, #08080F) 0%, transparent 82%),
    radial-gradient(46% 50% at 64% 64%, color-mix(in srgb, var(--cb) 42%, #08080F) 0%, transparent 84%),
    radial-gradient(56% 66% at 16% 74%, color-mix(in srgb, var(--ca) 55%, #08080F) 0%, transparent 86%),
    radial-gradient(42% 44% at 48% 20%, color-mix(in srgb, var(--ca) 50%, #08080F) 0%, transparent 88%);
  filter:blur(28px);
}
@media(max-width:999px){.sorot-teks::before{inset:-26% -34% -26% -34%}}
/* Anak-anak .sorot-teks WAJIB diangkat eksplisit: filter pada ::before
   membentuk lapisan komposit tersendiri, jadi z-index:-1 saja tidak
   cukup — teksnya bisa tertutup gumpalan. */
.sorot-teks > *{position:relative;z-index:1}
.sorot-teks .rub{color:#fff}
/* Tinggi dipatok dua baris. Sebelumnya judul berayun 53px-158px tiap
   ganti artikel, dan seluruh isi di bawahnya ikut melompat — itu yang
   paling terasa tersendat, bukan animasinya. */
.sorot-teks h1{
  font-size:clamp(1.7rem,3.2vw,2.7rem);font-weight:700;margin-block:1rem .85rem;max-width:24ch;
  min-height:2.28em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sorot-teks p{
  color:rgba(255,255,255,.88);font-size:clamp(.95rem,1.2vw,1.05rem);max-width:52ch;
  min-height:3.2em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sorot-meta{display:flex;align-items:center;gap:.75rem;margin-top:1.25rem;
  font-size:.8125rem;color:rgba(255,255,255,.9);font-weight:500}
.sorot-meta .titik{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
.baca{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.75rem;
  min-height:52px;padding:0 1.6rem;border-radius:999px;background:#fff;color:var(--ink);
  font-size:.9375rem;font-weight:700;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.baca:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
.baca svg{transition:transform var(--dur) var(--ease)}
.baca:hover svg{transform:translateX(4px)}
.ganti{transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.ganti.samar{opacity:0;transform:translateY(8px)}

/* daftar bernomor */
.antre{display:flex;flex-direction:column;gap:.5rem}
.antre button{
  display:grid;grid-template-columns:2.1rem minmax(0,1fr);gap:.85rem;align-items:center;
  text-align:left;padding:.85rem 1rem;border-radius:15px;position:relative;overflow:hidden;
  background:color-mix(in srgb, color-mix(in srgb, var(--ca) 34%, #0a0a14) 66%, transparent);
  border:1px solid color-mix(in srgb, var(--ca) 38%, rgba(255,255,255,.22));
  backdrop-filter:blur(10px);color:rgba(255,255,255,.86);min-height:44px;
  transition:background 280ms var(--ease),color 280ms var(--ease),transform 280ms var(--ease);
}
.antre button:hover{background:color-mix(in srgb, color-mix(in srgb, var(--ca) 44%, #0a0a14) 76%, transparent);color:#fff;transform:translateX(4px)}
.antre button[aria-pressed="true"]{background:color-mix(in srgb, color-mix(in srgb, var(--ca) 52%, #0a0a14) 84%, transparent);color:#fff}
.antre button[aria-pressed="true"]::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--ca),var(--cb))}
.antre .no{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;opacity:.65}
.antre button[aria-pressed="true"] .no{opacity:1}
.antre .rub{color:rgba(255,255,255,.85);font-size:.5875rem;margin-bottom:.28rem}
.antre h3{font-size:.9375rem;font-weight:600;line-height:1.3}
/* garis waktu 3 detik pada butir yang sedang tampil */
.antre .waktu{position:absolute;left:0;bottom:0;height:2.5px;width:100%;
  background:linear-gradient(90deg,var(--ca),var(--cb));
  transform:scaleX(0);transform-origin:left;opacity:0}
.antre button[aria-pressed="true"] .waktu{opacity:1}
.berputar .antre button[aria-pressed="true"] .waktu{animation:hitung 3s linear forwards}
@keyframes hitung{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:999px){.antre button:nth-child(n+4){display:none}}

/* ============ bagian ============ */
.sec{padding-block:clamp(1.5rem,3.5vw,2.75rem)}
.sec-h{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.sec-h h2{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:700;white-space:nowrap}
.sec-h .rule{flex:1;height:2px;border-radius:2px;background:var(--aksen);opacity:.75}
.sec-h a{
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
}
.sec-h a svg{transition:transform var(--dur) var(--ease)}
.sec-h a:hover svg{transform:translateX(3px)}

.grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:600px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.grid .card .ph{aspect-ratio:3/2}


/* ============================================================
   BAGIAN 3 — KHAS HALAMAN KATEGORI (archive.php)
   Sumber: desain/src/kategori-doktrin.html
   ============================================================ */

/* ============================================================
   KHAS HALAMAN KATEGORI
   Gaya bersama ada di assets/panduan.css.
   ============================================================ */
/* --- warna rubrik halaman ini: ganti dua nilai ini saja --- */
body{--k-a:var(--doktrin-a); --k-b:var(--doktrin-b);}

/* --- gumpalan aurora dikunci ke warna rubrik --- */
.b1{width:54vw;height:54vw;min-width:430px;min-height:430px;top:-18%;left:-10%;opacity:.72;
    background:radial-gradient(circle, var(--k-b), transparent 66%);animation:f1 32s ease-in-out infinite}
.b2{width:46vw;height:46vw;min-width:380px;min-height:380px;top:10%;right:-12%;opacity:.6;
    background:radial-gradient(circle, color-mix(in srgb, var(--k-a) 55%, #FFC53D), transparent 66%);
    animation:f2 38s ease-in-out infinite}
.b3{width:50vw;height:50vw;min-width:400px;min-height:400px;bottom:-16%;left:16%;opacity:.5;
    background:radial-gradient(circle, color-mix(in srgb, var(--k-b) 50%, #FFB08A), transparent 68%);
    animation:f3 35s ease-in-out infinite}
.b4{width:38vw;height:38vw;min-width:300px;min-height:300px;top:46%;right:14%;opacity:.42;
    background:radial-gradient(circle, color-mix(in srgb, var(--k-a) 45%, #C98CFF), transparent 70%);
    animation:f1 44s ease-in-out infinite reverse}

/* ---------- KEPALA KATEGORI ---------- */
.kepala{padding-block:clamp(2rem,4.5vw,3.5rem) clamp(1.5rem,3vw,2.25rem)}
.remah{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--ink-3)}
.remah a{transition:color var(--dur) var(--ease)}
.remah a:hover{color:var(--ink)}
.remah svg{opacity:.5}
.kepala h1{
  font-size:clamp(2.2rem,5.5vw,4rem);font-weight:800;margin-block:1rem .9rem;
  background:linear-gradient(100deg,var(--k-a),var(--k-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  width:fit-content;
}
/* Paragraf ini bukan hiasan: ia jawaban ringkas yang bisa dikutip
   mesin AI, dan orientasi untuk pembaca yang baru masuk rubrik. */
.kepala .arti{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-2);max-width:62ch;line-height:1.65}
.angka{display:flex;flex-wrap:wrap;gap:1.75rem;margin-top:1.75rem}
.angka div b{display:block;font-size:1.6rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.angka div span{font-size:.75rem;color:var(--ink-3);font-weight:500}

/* ---------- MULAI DARI SINI ---------- */
.mulai{
  display:grid;gap:1.25rem;align-items:center;
  border-radius:20px;padding:1.35rem;margin-bottom:clamp(1.75rem,3.5vw,2.5rem);
  background:rgba(255,255,255,.62);backdrop-filter:blur(14px);
  border:1.5px solid rgba(255,255,255,.9);box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.mulai::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--k-a),var(--k-b))}
@media(min-width:760px){.mulai{grid-template-columns:auto minmax(0,1fr) auto}}
.mulai .tanda{font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--k-a);white-space:nowrap}
.mulai h2{font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:700}
.mulai p{font-size:.875rem;color:var(--ink-2);margin-top:.25rem}
.mulai .pergi{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.35rem;
  border-radius:999px;background:var(--ink);color:#fff;font-size:.875rem;font-weight:700;white-space:nowrap;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.mulai .pergi:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(16,16,20,.55)}
.mulai .pergi svg{transition:transform var(--dur) var(--ease)}
.mulai .pergi:hover svg{transform:translateX(4px)}

/* ---------- BARIS URUT ---------- */
.urut{display:flex;align-items:center;gap:.75rem .5rem;flex-wrap:wrap;margin-bottom:1.35rem}
/* Label + tiga tombol dibungkus bersama dan digeser horizontal kalau
   tidak muat — sengaja TIDAK dibiarkan flex-wrap, supaya ketiganya
   selalu sejajar satu baris. Pecah ke baris kedua (tombol terakhir
   sendirian) yang justru terlihat berantakan, bukan solusi. */
.urut-scroll{
  display:flex;align-items:center;gap:.75rem;
  overflow-x:auto;flex:1 1 auto;min-width:0;padding-block:2px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.urut-scroll::-webkit-scrollbar{display:none}
.urut .lab{font-size:.75rem;font-weight:600;color:var(--ink-3);margin-right:.15rem;white-space:nowrap;flex:none}
.urut button{min-height:40px;padding:0 1rem;border-radius:999px;flex:none;white-space:nowrap;
  border:1.5px solid rgba(16,16,20,.12);background:rgba(255,255,255,.62);backdrop-filter:blur(10px);
  font-size:.78125rem;font-weight:700;color:var(--ink-2);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease)}
.urut button:hover{color:var(--ink);border-color:var(--k-a)}
.urut button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.urut .jml{margin-left:auto;font-size:.75rem;color:var(--ink-3);font-weight:500;white-space:nowrap}

/* ---------- daftar tulisan ---------- */
.grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:600px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.grid .card .ph{aspect-ratio:3/2}

/* ---------- PENULIS RUBRIK INI ---------- */
.penulis{padding-block:clamp(2.25rem,4.5vw,3.25rem)}
.orang{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.orang a{display:flex;align-items:center;gap:.85rem;padding:1rem;border-radius:16px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(12px);
  border:1.5px solid rgba(255,255,255,.85);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.orang a:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.orang .face{width:44px;height:44px;font-size:.8125rem}
.orang strong{display:block;font-size:.875rem;font-weight:700;letter-spacing:-.01em}
.orang span{font-size:.75rem;color:var(--ink-3)}

/* ---------- RUBRIK LAIN ---------- */
.lain{padding-block:0 clamp(2.5rem,5vw,3.5rem)}
.chip-baris{display:flex;gap:.6rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:0 1.15rem;
  border-radius:999px;border:1.5px solid rgba(16,16,20,.12);
  background:rgba(255,255,255,.62);backdrop-filter:blur(10px);
  font-size:.8125rem;font-weight:700;color:var(--ink-2);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.chip::before{content:'';width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--ca),var(--cb))}
.chip em{font-style:normal;font-size:.6875rem;color:var(--ink-3);font-weight:600}
.chip:hover{color:var(--ink);border-color:var(--ca);transform:translateY(-2px)}
/* garis judul bagian ikut warna rubrik, bukan aksen situs */
.sec-h .rule{background:linear-gradient(90deg,var(--k-a),var(--k-b));opacity:.6}


/* ============================================================
   BAGIAN 4 — KHAS HALAMAN ARTIKEL (single.php)
   Sumber: desain/src/artikel-kasih-karunia.html
   ============================================================ */

/* ============================================================
   KHAS HALAMAN ARTIKEL
   Gaya bersama ada di assets/panduan.css.
   ============================================================ */
/* --- warna rubrik halaman ini --- */
body{--k-a:var(--doktrin-a); --k-b:var(--doktrin-b);}
html{scroll-behavior:smooth}

/* Latar diredam kuat: di halaman ini orang membaca 10 menit,
   latar berwarna pekat melelahkan. */
.aurora{opacity:.32}
.blob{filter:blur(80px)}
.b1{width:56vw;height:56vw;min-width:440px;min-height:440px;top:-20%;left:-12%;
    background:radial-gradient(circle, var(--k-b), transparent 66%);animation:f1 36s ease-in-out infinite}
.b2{width:48vw;height:48vw;min-width:390px;min-height:390px;top:24%;right:-14%;
    background:radial-gradient(circle, color-mix(in srgb, var(--k-a) 55%, #FFC53D), transparent 66%);
    animation:f2 42s ease-in-out infinite}
.b3{width:52vw;height:52vw;min-width:410px;min-height:410px;bottom:-18%;left:18%;
    background:radial-gradient(circle, color-mix(in srgb, var(--k-b) 45%, #C98CFF), transparent 68%);
    animation:f3 39s ease-in-out infinite}

/* rubrik & avatar di sini memakai warna rubrik halaman, bukan --ca */
.rub{display:inline-flex;align-items:center;gap:.45rem;font-size:.6875rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--k-a)}
.rub::before{content:'';width:16px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--k-a),var(--k-b))}
.face{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.8125rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--k-a),var(--k-b))}

/* ---------- bilah kemajuan baca ---------- */
.maju{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;background:transparent}
.maju i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--k-a),var(--k-b))}

/* ---------- kepala artikel: judul MASUK ke dalam gambar ---------- */
.kepala{padding-block:clamp(1.25rem,2.5vw,1.75rem) clamp(1.6rem,3vw,2.25rem);max-width:760px}
.remah{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.75rem;font-weight:600;color:var(--ink-3)}
.remah a:hover{color:var(--ink)}
.remah svg{opacity:.5;flex:none}
/* SAMPUL: gambar + judul + tanggal + lama baca dalam satu blok */
.sampul{
  position:relative;overflow:hidden;border-radius:20px;box-shadow:var(--shadow);
  min-height:clamp(330px,44vw,520px);margin-bottom:clamp(1.75rem,3.5vw,2.5rem);
}
.sampul img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Tirai bawah memakai warna rubrik, bukan hitam polos — sejalan dengan
   hero beranda. Cukup pekat supaya judul putih tetap lolos kontras. */
.sampul::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg, transparent 28%, color-mix(in srgb, var(--k-a) 58%, transparent) 100%),
    linear-gradient(180deg, transparent 22%, rgba(8,8,14,.46) 60%, rgba(8,8,14,.86) 100%);
}
.sampul-isi{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding:clamp(1.25rem,3vw,2.5rem);display:flex;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.sampul-isi .rub{color:#fff}
.sampul-isi .rub::before{background:#fff}
.sampul-isi h1{font-size:clamp(1.7rem,3.8vw,3rem);font-weight:800;margin-block:.85rem .7rem;max-width:22ch}
.sampul-meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.92)}
.sampul-meta .titik{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.65}
.bagikan{display:flex;gap:.45rem;margin-left:auto}
.bagikan button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.35);background:rgba(10,10,20,.42);backdrop-filter:blur(10px);color:#fff;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.bagikan button:hover{background:rgba(10,10,20,.68);transform:translateY(-2px)}

/* ---------- tata letak badan ---------- */
.badan-grid{display:grid;gap:2.5rem;padding-bottom:clamp(2rem,4vw,3rem)}
@media(min-width:1100px){
  .badan-grid{grid-template-columns:220px minmax(0,1fr);gap:3.5rem;align-items:start}
}

/* daftar isi */
.isi{display:none}
@media(min-width:1100px){
  .isi{display:block;position:sticky;top:96px}
}
.isi p{font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.85rem}
.isi a{display:block;font-size:.8125rem;font-weight:600;color:var(--ink-3);
  padding:.5rem 0 .5rem .85rem;border-left:2px solid var(--line);line-height:1.4;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.isi a:hover{color:var(--ink)}
.isi a.kini{color:var(--ink);border-left-color:var(--k-a)}

/* Di bawah daftar isi sengaja BUKAN "populer". Saat orang sedang
   membaca, yang berguna adalah tahu ada di mana dalam rangkaian dan
   apa langkah berikutnya — bukan digoda pindah ke artikel lain. */
.posisi{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.posisi .lab{font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:.7rem}
.posisi .bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:.5rem}
.posisi .bar i{display:block;height:100%;width:var(--p);border-radius:3px;
  background:linear-gradient(90deg,var(--k-a),var(--k-b))}
.posisi .hitung{font-size:.75rem;color:var(--ink-3);font-weight:600}
.posisi .berikut{display:grid;grid-template-columns:52px minmax(0,1fr);gap:.7rem;align-items:center;
  margin-top:1.1rem;padding:.6rem;border-radius:12px;
  transition:background var(--dur) var(--ease)}
.posisi .berikut:hover{background:rgba(16,16,20,.04)}
.posisi .berikut .ph{display:block;position:relative;overflow:hidden;border-radius:8px;
  aspect-ratio:1;background:#EDEEF1}
.posisi .berikut .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.posisi .berikut em{font-style:normal;display:block;font-size:.625rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--k-a);margin-bottom:.15rem}
.posisi .berikut strong{display:block;font-size:.8125rem;font-weight:600;line-height:1.35}

/* ---------- BADAN TULISAN ---------- */
.tulisan{
  background:var(--card);border-radius:22px;box-shadow:var(--shadow);
  padding:clamp(1.5rem,3.5vw,3.25rem);
  max-width:74ch;
}
/* Ukuran & jarak baris dinaikkan dari biasanya. Montserrat itu huruf
   geometris untuk judul, bukan untuk teks panjang — kompensasinya
   lewat badan huruf lebih besar, leading longgar, dan baris pendek. */
.tulisan p{font-size:1.0625rem;line-height:1.8;color:var(--ink-2);margin-bottom:1.35rem}
.tulisan p.lead{font-size:1.2rem;line-height:1.7;color:var(--ink);font-weight:500;margin-bottom:1.75rem}
.tulisan h2{font-size:clamp(1.35rem,2.4vw,1.7rem);margin-block:2.5rem 1rem;scroll-margin-top:90px}
.tulisan h3{font-size:1.15rem;margin-block:1.75rem .75rem}
.tulisan a.tautan{color:var(--k-a);font-weight:600;
  background:linear-gradient(90deg,var(--k-a),var(--k-b)) no-repeat bottom/100% 1.5px;
  padding-bottom:2px;transition:background-size var(--dur) var(--ease)}
.tulisan a.tautan:hover{background-size:100% 100%;color:#fff;padding-inline:.2rem;border-radius:3px}
.tulisan strong{color:var(--ink);font-weight:700}
.tulisan ol{margin:0 0 1.35rem 0;padding-left:0;list-style:none;counter-reset:n}
.tulisan ol li{counter-increment:n;position:relative;padding-left:2.6rem;margin-bottom:1rem;
  font-size:1.0625rem;line-height:1.75;color:var(--ink-2)}
.tulisan ol li::before{content:counter(n);position:absolute;left:0;top:.1rem;
  width:1.85rem;height:1.85rem;border-radius:50%;display:grid;place-items:center;
  font-size:.8125rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--k-a),var(--k-b))}

/* ringkasan — jawaban ringkas yang bisa dikutip mesin AI */
.ringkas{
  border-radius:16px;padding:1.25rem 1.4rem;margin-bottom:2rem;
  background:color-mix(in srgb, var(--k-a) 7%, #fff);
  border:1.5px solid color-mix(in srgb, var(--k-a) 22%, #fff);
}
.ringkas p:first-of-type{font-size:.6875rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--k-a);margin-bottom:.5rem}
.ringkas p:last-child{font-size:1rem;line-height:1.7;color:var(--ink);margin-bottom:0;font-weight:500}

/* KUTIPAN ALKITAB — elemen paling sering dipakai di situs ini */
.ayat{
  position:relative;margin-block:2rem;padding:1.5rem 1.6rem 1.35rem 2rem;
  border-radius:14px;
  background:color-mix(in srgb, var(--k-a) 5%, #fff);
}
.ayat::before{content:'';position:absolute;left:0;top:.9rem;bottom:.9rem;width:4px;border-radius:3px;
  background:linear-gradient(180deg,var(--k-a),var(--k-b))}
.ayat blockquote{font-size:1.15rem;line-height:1.7;color:var(--ink);font-style:italic;font-weight:400}
.ayat cite{display:flex;align-items:center;gap:.6rem;margin-top:.9rem;font-style:normal;
  font-size:.8125rem;font-weight:700;color:var(--k-a);letter-spacing:.02em}
.ayat cite em{font-style:normal;font-weight:500;color:var(--ink-3);letter-spacing:0}

/* kutipan sorot */
.sorot-kutip{margin-block:2.25rem;padding-left:1.5rem;border-left:3px solid;
  border-image:linear-gradient(180deg,var(--k-a),var(--k-b)) 1}
.sorot-kutip p{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.45;color:var(--ink);
  font-weight:700;letter-spacing:-.02em;margin:0}

/* catatan */
.catatan{border-radius:14px;padding:1.15rem 1.35rem;margin-block:2rem;
  background:#F7F8F9;border:1.5px solid var(--line)}
.catatan p{margin:0;font-size:.9375rem;line-height:1.7}
.catatan p:first-child{font-weight:700;color:var(--ink);margin-bottom:.35rem;font-size:.875rem}

/* ---------- kotak penulis ---------- */
.penulis-kotak{margin-top:1.75rem;border-radius:20px;padding:1.5rem;
  background:rgba(255,255,255,.66);backdrop-filter:blur(14px);
  border:1.5px solid rgba(255,255,255,.9);box-shadow:var(--shadow);
  display:grid;gap:1rem}
@media(min-width:640px){.penulis-kotak{grid-template-columns:auto minmax(0,1fr);align-items:start}}
.penulis-kotak .face{width:64px;height:64px;font-size:1.05rem}
.penulis-kotak strong{display:block;font-size:1.0625rem;font-weight:700}
.penulis-kotak .jabat{font-size:.8125rem;color:var(--k-a);font-weight:700;margin-top:.15rem}
.penulis-kotak p{font-size:.9375rem;color:var(--ink-2);line-height:1.7;margin-top:.6rem}
.penulis-kotak .tautan-penulis{display:inline-flex;align-items:center;gap:.45rem;margin-top:.85rem;
  font-size:.8125rem;font-weight:700}
.penulis-kotak .tautan-penulis svg{transition:transform var(--dur) var(--ease)}
.penulis-kotak .tautan-penulis:hover svg{transform:translateX(4px)}

/* ---------- lanjut membaca ---------- */
.lanjut{padding-block:clamp(2.25rem,4.5vw,3.25rem)}
.sec-h{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.sec-h h2{font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:700;white-space:nowrap}
.sec-h .rule{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--k-a),var(--k-b));opacity:.55}
/* Dua kolom, tiga baris. Gambar sengaja kecil: di ujung artikel yang
   dibutuhkan judul yang terbaca cepat, bukan foto besar lagi. */
.grid-lanjut{display:grid;gap:0 clamp(1.5rem,4vw,3.5rem);grid-template-columns:1fr}
@media(min-width:820px){.grid-lanjut{grid-template-columns:repeat(2,1fr)}}
.kartu{display:grid;grid-template-columns:84px minmax(0,1fr);gap:.95rem;align-items:center;
  padding:.9rem 0;border-bottom:1px solid var(--line);position:relative;
  transition:padding-left 240ms var(--ease)}
.kartu::before{content:'';position:absolute;left:0;top:.55rem;bottom:.55rem;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--k-a),var(--k-b));
  transform:scaleY(0);transition:transform 240ms var(--ease)}
.kartu:hover{padding-left:.7rem}
.kartu:hover::before{transform:scaleY(1)}
.kartu .ph{display:block;position:relative;overflow:hidden;border-radius:9px;aspect-ratio:1;background:#EDEEF1}
.kartu .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 620ms var(--ease)}
.kartu:hover .ph img{transform:scale(1.06)}
.kartu h3{font-size:.9375rem;font-weight:600;line-height:1.38;transition:color var(--dur) var(--ease)}
.kartu:hover h3{color:var(--k-a)}
.kartu .meta{display:block;font-size:.75rem;color:var(--ink-3);font-weight:500;margin-top:.3rem}
.sec-h p.alasan{font-size:.8125rem;color:var(--ink-3);font-weight:500;white-space:nowrap}

/* garis judul bagian ikut warna rubrik */
.sec-h .rule{background:linear-gradient(90deg,var(--k-a),var(--k-b));opacity:.55}
/* ---------- TANYA JAWAB (FAQPage) ----------
   Ditambahkan untuk tema WordPress: kotak tanya-jawab per tulisan,
   diisi lewat kotak "Tanya Jawab" di editor (inc/faq.php), dicetak
   sesudah the_content(). Sengaja heading biasa, bukan akordeon —
   mesin jawaban memetik teks yang terlihat. */
.tanya-jawab{margin-top:2.5rem;padding-top:.5rem}
.tanya-jawab h2{font-size:clamp(1.35rem,2.4vw,1.7rem);margin-bottom:.5rem}
.tj-butir{position:relative;padding:1.25rem 0 1.25rem 1.15rem;border-top:1px solid var(--line)}
.tj-butir::before{content:'';position:absolute;left:0;top:1.55rem;bottom:1.55rem;width:3px;
  border-radius:2px;background:linear-gradient(180deg,var(--k-a),var(--k-b));opacity:.6}
.tj-butir h3{font-size:1.0625rem;font-weight:700;color:var(--ink);margin-bottom:.5rem}
.tj-butir p{font-size:.9375rem;line-height:1.75;color:var(--ink-2);margin-bottom:.75rem}
.tj-butir p:last-child{margin-bottom:0}


/* ============================================================
   BAGIAN 5 — KHAS HALAMAN TENTANG KAMI (page-tentang-kami.php)
   Sumber: desain/src/tentang-kami.html
   ============================================================ */

/* ============================================================
   KHAS HALAMAN TENTANG KAMI
   Gaya bersama ada di assets/panduan.css.
   ============================================================ */
/* --- warna halaman ini: violet, warna identitas situs sendiri,
   bukan warna satu rubrik tertentu --- */
body{--k-a:var(--gumul-a); --k-b:var(--gumul-b);}

.b1{width:54vw;height:54vw;min-width:430px;min-height:430px;top:-18%;left:-10%;opacity:.6;
    background:radial-gradient(circle, var(--k-b), transparent 66%);animation:f1 34s ease-in-out infinite}
.b2{width:46vw;height:46vw;min-width:380px;min-height:380px;top:12%;right:-12%;opacity:.5;
    background:radial-gradient(circle, color-mix(in srgb, var(--k-a) 55%, #FFC53D), transparent 66%);
    animation:f2 40s ease-in-out infinite}
.b3{width:50vw;height:50vw;min-width:400px;min-height:400px;bottom:-16%;left:20%;opacity:.42;
    background:radial-gradient(circle, color-mix(in srgb, var(--k-b) 50%, #46D3A8), transparent 68%);
    animation:f3 37s ease-in-out infinite}

/* ---------- KEPALA ---------- */
.kepala{padding-block:clamp(2rem,4.5vw,3.5rem) clamp(1.75rem,3.5vw,2.5rem)}
.kepala h1{
  font-size:clamp(2.1rem,5vw,3.5rem);font-weight:800;margin-block:1rem .9rem;
  background:linear-gradient(100deg,var(--k-a),var(--k-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;
}
.kepala .arti{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-2);max-width:64ch;line-height:1.65}

/* ---------- lencana kepercayaan ---------- */
.percaya{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.percaya div{display:flex;align-items:center;gap:.55rem;min-height:44px;padding:0 1.1rem;
  border-radius:999px;background:rgba(255,255,255,.66);backdrop-filter:blur(12px);
  border:1.5px solid rgba(255,255,255,.9);box-shadow:var(--shadow)}
.percaya svg{flex:none;color:var(--k-a)}
.percaya span{font-size:.8125rem;font-weight:600;color:var(--ink-2)}

/* ---------- badan prosa ---------- */
.prosa{
  background:var(--card);border-radius:22px;box-shadow:var(--shadow);
  padding:clamp(1.5rem,3.5vw,3rem);max-width:74ch;margin-bottom:clamp(2rem,4vw,3rem);
}
.prosa h2{font-size:clamp(1.25rem,2.2vw,1.55rem);margin-block:0 1rem}
.prosa h2:not(:first-child){margin-top:2.25rem}
.prosa p{font-size:1.0625rem;line-height:1.8;color:var(--ink-2);margin-bottom:1.1rem}
.prosa p:last-child{margin-bottom:0}
.prosa a.tautan{color:var(--k-a);font-weight:600;
  background:linear-gradient(90deg,var(--k-a),var(--k-b)) no-repeat bottom/100% 1.5px;
  padding-bottom:2px;transition:background-size var(--dur) var(--ease)}
.prosa a.tautan:hover{background-size:100% 100%;color:#fff;padding-inline:.2rem;border-radius:3px}

/* ---------- siapa yang menulis ---------- */
.siapa{padding-bottom:clamp(2rem,4vw,3rem)}
.org{display:flex;align-items:center;gap:1.1rem;max-width:640px;padding:1.35rem 1.5rem;border-radius:18px;
  background:rgba(255,255,255,.66);backdrop-filter:blur(14px);
  border:1.5px solid rgba(255,255,255,.9);box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.org:hover{transform:translateY(-4px)}
.org .face{width:56px;height:56px;font-size:.95rem;flex:none}
.org strong{display:block;font-size:1.0625rem;font-weight:700}
.org .jabat{display:block;font-size:.8125rem;color:var(--k-a);font-weight:700;margin-top:.15rem}
.org .lihat{display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;
  font-size:.8125rem;font-weight:700;color:var(--ink)}
.org .lihat svg{transition:transform var(--dur) var(--ease)}
.org:hover .lihat svg{transform:translateX(4px)}

/* ---------- ajakan kontak (memakai kerangka .sub, tombol bukan formulir) ---------- */
.pergi-kontak{display:inline-flex;align-items:center;gap:.6rem;min-height:64px;padding:0 2rem;
  border-radius:999px;background:var(--ink);color:#fff;font-size:1rem;font-weight:700;white-space:nowrap;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.pergi-kontak:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(16,16,20,.6)}
.pergi-kontak svg{transition:transform var(--dur) var(--ease)}
.pergi-kontak:hover svg{transform:translateX(4px)}
@media(min-width:980px){.sub-in{justify-content:space-between}}


/* ============================================================
   BAGIAN 6 — KHAS HALAMAN PENULIS / DAFTAR (page-penulis.php)
   Sumber: desain/src/penulis.html
   ============================================================ */

/* ============================================================
   KHAS HALAMAN PENULIS
   Gaya bersama ada di assets/panduan.css.
   ============================================================ */
body{--k-a:var(--gumul-a); --k-b:var(--gumul-b);}

.b1{width:54vw;height:54vw;min-width:430px;min-height:430px;top:-18%;left:-10%;opacity:.6;
    background:radial-gradient(circle, var(--k-b), transparent 66%);animation:f1 34s ease-in-out infinite}
.b2{width:46vw;height:46vw;min-width:380px;min-height:380px;top:12%;right:-12%;opacity:.5;
    background:radial-gradient(circle, color-mix(in srgb, var(--k-a) 55%, #FFC53D), transparent 66%);
    animation:f2 40s ease-in-out infinite}
.b3{width:50vw;height:50vw;min-width:400px;min-height:400px;bottom:-16%;left:20%;opacity:.42;
    background:radial-gradient(circle, color-mix(in srgb, var(--k-b) 50%, #46D3A8), transparent 68%);
    animation:f3 37s ease-in-out infinite}

/* ---------- KEPALA ---------- */
.kepala{padding-block:clamp(2rem,4.5vw,3.5rem) clamp(1.75rem,3.5vw,2.5rem)}
.kepala h1{
  font-size:clamp(2.1rem,5vw,3.5rem);font-weight:800;margin-block:1rem .9rem;
  background:linear-gradient(100deg,var(--k-a),var(--k-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;
}
.kepala .arti{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-2);max-width:64ch;line-height:1.65}

/* ---------- daftar penulis ---------- */
.tim{padding-bottom:clamp(2.25rem,4.5vw,3.25rem)}
.grid-tim{display:grid;gap:1.35rem;grid-template-columns:1fr}
@media(min-width:760px){.grid-tim{grid-template-columns:repeat(2,1fr)}}

.kotak-orang{
  background:var(--card);border-radius:20px;box-shadow:var(--shadow);
  padding:clamp(1.35rem,2.5vw,1.85rem);display:flex;flex-direction:column;gap:1rem;
}
.kotak-orang .head{display:flex;align-items:center;gap:1rem}
.kotak-orang .face{width:60px;height:60px;font-size:1rem;flex:none}
.kotak-orang strong{display:block;font-size:1.15rem;font-weight:700}
.kotak-orang .jabat{display:block;font-size:.8438rem;color:var(--k-a);font-weight:700;margin-top:.2rem}
.kotak-orang p{font-size:.9375rem;line-height:1.7;color:var(--ink-2)}
.tag-baris{display:flex;flex-wrap:wrap;gap:.45rem}
.tag{font-size:.6875rem;font-weight:700;letter-spacing:.03em;color:var(--k-a);
  padding:.3rem .7rem;border-radius:999px;background:color-mix(in srgb, var(--k-a) 9%, #fff);
  border:1px solid color-mix(in srgb, var(--k-a) 22%, #fff)}
.kotak-orang .lihat{display:inline-flex;align-items:center;gap:.4rem;margin-top:.15rem;
  font-size:.8125rem;font-weight:700;color:var(--ink)}
.kotak-orang .lihat svg{transition:transform var(--dur) var(--ease)}
.kotak-orang:hover .lihat svg{transform:translateX(4px)}

/* kartu ajakan bergabung — bukan orang, jadi diberi gaya berbeda: garis putus-putus */
.gabung{
  border-radius:20px;padding:clamp(1.35rem,2.5vw,1.85rem);
  border:1.5px dashed color-mix(in srgb, var(--k-a) 40%, var(--line));
  display:flex;flex-direction:column;justify-content:center;gap:.75rem;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.gabung:hover{transform:translateY(-4px);border-color:var(--k-a)}
.gabung strong{font-size:1.0625rem;font-weight:700}
.gabung p{font-size:.9375rem;line-height:1.7;color:var(--ink-2)}
.gabung a{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:700;color:var(--k-a);width:fit-content}
.gabung a svg{transition:transform var(--dur) var(--ease)}
.gabung a:hover svg{transform:translateX(4px)}

/* ---------- kenapa nama asli ---------- */
.kenapa{padding-block:0 clamp(2.5rem,5vw,3.5rem)}
.kenapa .prosa{
  background:var(--card);border-radius:22px;box-shadow:var(--shadow);
  padding:clamp(1.5rem,3.5vw,2.5rem);max-width:74ch;
}
.kenapa .prosa p{font-size:1.0625rem;line-height:1.8;color:var(--ink-2)}
.kenapa .prosa a.tautan{color:var(--k-a);font-weight:600;
  background:linear-gradient(90deg,var(--k-a),var(--k-b)) no-repeat bottom/100% 1.5px;
  padding-bottom:2px;transition:background-size var(--dur) var(--ease)}
.kenapa .prosa a.tautan:hover{background-size:100% 100%;color:#fff;padding-inline:.2rem;border-radius:3px}


/* ============================================================
   BAGIAN 7 — KHAS HALAMAN KONTAK (page-kontak.php)
   Sumber: desain/src/kontak.html
   ============================================================ */

/* ============================================================
   KHAS HALAMAN KONTAK
   Gaya bersama ada di assets/panduan.css.
   ============================================================ */
body{--k-a:var(--gumul-a); --k-b:var(--gumul-b);}

.b1{width:54vw;height:54vw;min-width:430px;min-height:430px;top:-18%;left:-10%;opacity:.6;
    background:radial-gradient(circle, var(--k-b), transparent 66%);animation:f1 34s ease-in-out infinite}
.b2{width:46vw;height:46vw;min-width:380px;min-height:380px;top:12%;right:-12%;opacity:.5;
    background:radial-gradient(circle, color-mix(in srgb, var(--k-a) 55%, #FFC53D), transparent 66%);
    animation:f2 40s ease-in-out infinite}
.b3{width:50vw;height:50vw;min-width:400px;min-height:400px;bottom:-16%;left:20%;opacity:.42;
    background:radial-gradient(circle, color-mix(in srgb, var(--k-b) 50%, #46D3A8), transparent 68%);
    animation:f3 37s ease-in-out infinite}

/* ---------- KEPALA ---------- */
.kepala{padding-block:clamp(2rem,4.5vw,3.5rem) clamp(1.75rem,3.5vw,2.5rem)}
.kepala h1{
  font-size:clamp(2.1rem,5vw,3.5rem);font-weight:800;margin-block:1rem .9rem;
  background:linear-gradient(100deg,var(--k-a),var(--k-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;
}
.kepala .arti{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-2);max-width:64ch;line-height:1.65}

/* ---------- tata letak dua kolom ---------- */
/* min-width:0 di kedua kolom WAJIB ada. Tanpa itu, item grid punya
   min-width:auto bawaan — kalau ada teks yang tidak bisa dipenggal di
   dalamnya (email seperti "redaksi@panduaniman.id" itu satu "kata"
   tanpa spasi), kolomnya dipaksa melebar mengikuti teks itu dan
   seluruh tata letak meluber ke kanan, alih-alih teksnya yang
   membungkus/pecah baris. */
.tata{display:grid;gap:1.5rem;padding-bottom:clamp(2.25rem,4.5vw,3.25rem)}
.tata > *{min-width:0}
@media(min-width:940px){.tata{grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start;gap:2.5rem}}

/* ---------- kolom info ---------- */
.info{display:flex;flex-direction:column;gap:1rem;min-width:0}
.saluran{
  background:var(--card);border-radius:20px;box-shadow:var(--shadow);
  padding:1.35rem 1.5rem;display:flex;flex-direction:column;gap:1.1rem;
}
.jalur{display:flex;align-items:center;gap:.9rem;transition:transform var(--dur) var(--ease)}
a.jalur:hover{transform:translateX(3px)}
.jalur .ikon{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,var(--k-a),var(--k-b))}
.jalur span{display:block;min-width:0}
.jalur strong{display:block;font-size:.9375rem;font-weight:700}
/* overflow-wrap: email/URL panjang tanpa spasi dipenggal kalau
   memang tidak muat, bukan mendorong seluruh kartu meluber. */
.jalur em{font-style:normal;font-size:.8125rem;color:var(--ink-3);overflow-wrap:anywhere}

.balas{
  border-radius:16px;padding:1.1rem 1.25rem;
  background:color-mix(in srgb, var(--k-a) 7%, #fff);
  border:1.5px solid color-mix(in srgb, var(--k-a) 22%, #fff);
}
.balas p:first-child{font-size:.6875rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--k-a);margin-bottom:.4rem}
.balas p:last-child{font-size:.9rem;line-height:1.6;color:var(--ink);font-weight:500}

/* ---------- formulir ---------- */
.formulir{
  background:var(--card);border-radius:22px;box-shadow:var(--shadow);
  padding:clamp(1.5rem,3vw,2.5rem);
}
.formulir h2{font-size:1.25rem;margin-bottom:1.35rem}
.baris2{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:600px){.baris2{grid-template-columns:1fr 1fr}}
.medan{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.medan label{font-size:.8125rem;font-weight:700;color:var(--ink)}
.medan input,.medan select,.medan textarea{
  font:inherit;font-size:.9375rem;color:var(--ink);
  padding:.85rem 1.05rem;border-radius:12px;border:1.5px solid rgba(16,16,20,.14);
  background:rgba(255,255,255,.9);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.medan textarea{resize:vertical;min-height:130px;line-height:1.6;font-family:inherit}
.medan input::placeholder,.medan textarea::placeholder{color:var(--ink-3);font-weight:400}
.medan input:focus,.medan select:focus,.medan textarea:focus{
  outline:none;border-color:var(--k-a);box-shadow:0 0 0 4px color-mix(in srgb, var(--k-a) 14%, transparent)}
.kirim{
  display:inline-flex;align-items:center;gap:.6rem;min-height:56px;padding:0 2rem;
  border-radius:999px;background:var(--ink);color:#fff;font-size:.9375rem;font-weight:700;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.kirim:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(16,16,20,.6)}

/* ---------- sebelum menghubungi ---------- */
.sebelum{padding-block:0 clamp(2.5rem,5vw,3.5rem)}
.tanya{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:760px){.tanya{grid-template-columns:repeat(2,1fr)}}
.tanya .card{padding:1.25rem 1.35rem}
.tanya .card strong{display:block;font-size:.9375rem;font-weight:700;margin-bottom:.4rem}
.tanya .card p{font-size:.875rem;line-height:1.65;color:var(--ink-2)}
.tanya .card a{color:var(--k-a);font-weight:700}

/* ============================================================
   BAGIAN 8 — HALAMAN 404 (404.php)
   Tidak ada padanan di desain statis — disusun dari token yang
   sudah ada (gradasi teks, tombol .baca) supaya tetap terasa satu
   situs, bukan gaya baru yang lepas.
   ============================================================ */
.e404{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-block:clamp(3rem,8vw,5rem)}
.e404-label{font-size:.75rem;font-weight:800;letter-spacing:.16em;color:var(--ink-3)}
.e404-judul{
  font-size:clamp(1.6rem,4vw,2.5rem);font-weight:800;margin-block:.75rem 1rem;max-width:20ch;
  background:linear-gradient(100deg,var(--k-a),var(--k-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.e404-teks{font-size:1rem;color:var(--ink-2);max-width:46ch;line-height:1.7;margin-bottom:2rem}
.e404-aksi{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.e404-cari{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:0 1.6rem;
  border-radius:999px;border:1.5px solid rgba(16,16,20,.14);background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);font-size:.9375rem;font-weight:700;color:var(--ink);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.e404-cari:hover{border-color:var(--k-a);transform:translateY(-2px)}