/*
Theme Name: Kisah Islamipedia
Theme URI: https://kisah.islamipedia.id
Author: Islamipedia
Description: Tema WordPress untuk kisah Nabi, sirah nabawiyah, sejarah Islam, doa dan mukjizat, serta pelajaran dan hikmah. Turunan visual dari tema Islamipedia dengan identitas sendiri: hijau zamrud, emas, dan latar krem.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kisah-islamipedia
Tags: blog, education, two-columns, custom-menu, featured-images, threaded-comments, translation-ready, dark-mode
*/

/* =====================================================================
   DAFTAR ISI
   1. Token (variabel warna, font, ukuran)
   2. Dasar
   3. Tombol & elemen kecil
   4. Topbar, Header, Logo
   5. Hero
   6. (dihapus)
   7. Kartu kisah
   8. Tile fitur
   9. Layout konten, Sidebar, Widget
  10. Iklan
  11. Artikel, Breadcrumb, Paginasi, Komentar
  12. Halaman aplikasi: Qur'an, Murottal, Jadwal Salat
  13. Footer & Sosial media
  14. Share, Read progress, Halaman statis
  15. Responsif (1100 > 900 > 782 > 640 > 480 > 380)
  16. Aksesibilitas & cetak
   ===================================================================== */

/* ---------- 1. Token ---------- */
:root{
  --deep:#005040; --deep-2:#066450; --leaf:#189078; --link:#0B6B58; --gold:#E0AE30; --gold-soft:#F8EBC5;
  --bg:#FAF6EC; --card:#FFFFFF; --ink:#13241F; --muted:#586760; --line:#E6DFCB; --tint:#F1EFDF;
  --chrome:#00382C; --btn:#005040; --btn-hover:#066450;
  --on-deep:#E8F3F0; --on-deep-2:#B9D3CD; --on-gold:#F6E7BE; --ink-on-gold:#2B2006;
  --badge-bg:#F8EBC5; --badge-fg:#6B4D0B;
  --r-s:8px; --r-m:12px; --r-l:22px;
  --f-head:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-read:'Lora',Georgia,'Times New Roman',serif; --f-ar:'Amiri Quran','Scheherazade New','Traditional Arabic',serif;
  --wrap:1200px; --ar-size:2.2rem;
  --star:polygon(50.0% 0.0%,64.6% 14.6%,85.4% 14.6%,85.4% 35.4%,100.0% 50.0%,85.4% 64.6%,85.4% 85.4%,64.6% 85.4%,50.0% 100.0%,35.4% 85.4%,14.6% 85.4%,14.6% 64.6%,0.0% 50.0%,14.6% 35.4%,14.6% 14.6%,35.4% 14.6%);
  --badge-solid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.00,5.00 63.18,18.18 81.82,18.18 81.82,36.82 95.00,50.00 81.82,63.18 81.82,81.82 63.18,81.82 50.00,95.00 36.82,81.82 18.18,81.82 18.18,63.18 5.00,50.00 18.18,36.82 18.18,18.18 36.82,18.18' fill='%23005040' stroke='%23E0AE30' stroke-width='6' stroke-linejoin='round'/%3E%3Cpolygon points='50.00,15.00 60.25,25.25 74.75,25.25 74.75,39.75 85.00,50.00 74.75,60.25 74.75,74.75 60.25,74.75 50.00,85.00 39.75,74.75 25.25,74.75 25.25,60.25 15.00,50.00 25.25,39.75 25.25,25.25 39.75,25.25' fill='none' stroke='%23E0AE30' stroke-width='1.6' stroke-linejoin='round' stroke-opacity='.55'/%3E%3C/svg%3E");
  --badge-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.00,5.00 63.18,18.18 81.82,18.18 81.82,36.82 95.00,50.00 81.82,63.18 81.82,81.82 63.18,81.82 50.00,95.00 36.82,81.82 18.18,81.82 18.18,63.18 5.00,50.00 18.18,36.82 18.18,18.18 36.82,18.18' fill='%23F1EFDF' stroke='%23189078' stroke-width='6' stroke-linejoin='round'/%3E%3Cpolygon points='50.00,15.00 60.25,25.25 74.75,25.25 74.75,39.75 85.00,50.00 74.75,60.25 74.75,74.75 60.25,74.75 50.00,85.00 39.75,74.75 25.25,74.75 25.25,60.25 15.00,50.00 25.25,39.75 25.25,25.25 39.75,25.25' fill='none' stroke='%23189078' stroke-width='1.6' stroke-linejoin='round' stroke-opacity='.55'/%3E%3C/svg%3E");
  --badge-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.00,5.00 63.18,18.18 81.82,18.18 81.82,36.82 95.00,50.00 81.82,63.18 81.82,81.82 63.18,81.82 50.00,95.00 36.82,81.82 18.18,81.82 18.18,63.18 5.00,50.00 18.18,36.82 18.18,18.18 36.82,18.18' fill='%23E0AE30' stroke='%23005040' stroke-width='6' stroke-linejoin='round'/%3E%3Cpolygon points='50.00,15.00 60.25,25.25 74.75,25.25 74.75,39.75 85.00,50.00 74.75,60.25 74.75,74.75 60.25,74.75 50.00,85.00 39.75,74.75 25.25,74.75 25.25,60.25 15.00,50.00 25.25,39.75 25.25,25.25 39.75,25.25' fill='none' stroke='%23005040' stroke-width='1.6' stroke-linejoin='round' stroke-opacity='.55'/%3E%3C/svg%3E");
}
[data-theme="dark"]{
  --bg:#0B1715; --card:#12231F; --ink:#E6F0ED; --muted:#9CB4AC; --line:#25423B; --tint:#1A302A;
  --chrome:#050F0C; --deep:#0B5645; --deep-2:#106A55; --btn:#16876E; --btn-hover:#1E9480;
  --link:#5FD8BC; --gold-soft:#3A2F14; --badge-bg:#3A2F14; --badge-fg:#F0CB78;
  --badge-solid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.00,5.00 63.18,18.18 81.82,18.18 81.82,36.82 95.00,50.00 81.82,63.18 81.82,81.82 63.18,81.82 50.00,95.00 36.82,81.82 18.18,81.82 18.18,63.18 5.00,50.00 18.18,36.82 18.18,18.18 36.82,18.18' fill='%230B5645' stroke='%23E0AE30' stroke-width='6' stroke-linejoin='round'/%3E%3Cpolygon points='50.00,15.00 60.25,25.25 74.75,25.25 74.75,39.75 85.00,50.00 74.75,60.25 74.75,74.75 60.25,74.75 50.00,85.00 39.75,74.75 25.25,74.75 25.25,60.25 15.00,50.00 25.25,39.75 25.25,25.25 39.75,25.25' fill='none' stroke='%23E0AE30' stroke-width='1.6' stroke-linejoin='round' stroke-opacity='.55'/%3E%3C/svg%3E");
  --badge-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.00,5.00 63.18,18.18 81.82,18.18 81.82,36.82 95.00,50.00 81.82,63.18 81.82,81.82 63.18,81.82 50.00,95.00 36.82,81.82 18.18,81.82 18.18,63.18 5.00,50.00 18.18,36.82 18.18,18.18 36.82,18.18' fill='%231A302A' stroke='%233FB59C' stroke-width='6' stroke-linejoin='round'/%3E%3Cpolygon points='50.00,15.00 60.25,25.25 74.75,25.25 74.75,39.75 85.00,50.00 74.75,60.25 74.75,74.75 60.25,74.75 50.00,85.00 39.75,74.75 25.25,74.75 25.25,60.25 15.00,50.00 25.25,39.75 25.25,25.25 39.75,25.25' fill='none' stroke='%235FD8BC' stroke-width='1.6' stroke-linejoin='round' stroke-opacity='.55'/%3E%3C/svg%3E");
  --badge-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.00,5.00 63.18,18.18 81.82,18.18 81.82,36.82 95.00,50.00 81.82,63.18 81.82,81.82 63.18,81.82 50.00,95.00 36.82,81.82 18.18,81.82 18.18,63.18 5.00,50.00 18.18,36.82 18.18,18.18 36.82,18.18' fill='%23E0AE30' stroke='%23F8EBC5' stroke-width='6' stroke-linejoin='round'/%3E%3Cpolygon points='50.00,15.00 60.25,25.25 74.75,25.25 74.75,39.75 85.00,50.00 74.75,60.25 74.75,74.75 60.25,74.75 50.00,85.00 39.75,74.75 25.25,74.75 25.25,60.25 15.00,50.00 25.25,39.75 25.25,25.25 39.75,25.25' fill='none' stroke='%232B2006' stroke-width='1.6' stroke-linejoin='round' stroke-opacity='.55'/%3E%3C/svg%3E");
  color-scheme:dark;
}

/* ---------- 2. Dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video,iframe{max-width:100%}
img{height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em;text-wrap:balance}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--deep);color:#fff;padding:.6rem 1rem;z-index:200}
.skip:focus{left:8px;top:8px}
.wrap{width:min(100% - 2rem,var(--wrap));margin-inline:auto}
.star{clip-path:var(--star)}
.rank li::before{background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:100% 100%;clip-path:none}
.ph{display:block;width:100%;height:100%;min-height:100%;background:linear-gradient(135deg,var(--deep-2),var(--leaf))}

/* ---------- 3. Tombol & elemen kecil ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:999px;border:1px solid transparent;background:var(--btn);color:#fff;font-weight:600;font-size:.9375rem;line-height:1.2;transition:background .15s}
.btn:hover{background:var(--btn-hover);color:#fff;text-decoration:none}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--tint)}
.btn--gold{background:var(--gold);color:var(--ink-on-gold)}
.btn--gold:hover{background:#E4B24B}
.btn svg{width:18px;height:18px;flex:none}
.icon-btn{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;background:transparent;border:1px solid var(--line);color:var(--ink)}
.icon-btn:hover{background:var(--tint)}
.icon-btn svg{width:20px;height:20px}
.badge{display:inline-block;padding:.15rem .65rem;border-radius:999px;background:var(--badge-bg);color:var(--badge-fg);font-weight:700;font-size:.8125rem;line-height:1.5}
.badge:hover{text-decoration:none;filter:brightness(.97)}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 1.1rem;padding-left:.9rem;border-left:5px solid var(--gold)}
.section-title h2{margin:0;font-size:1.5rem}
.section-title a{font-weight:600;font-size:.9375rem}

/* ---------- 4. Topbar, Header, Logo ---------- */
.topbar{background:var(--chrome);color:var(--on-deep-2);font-size:.8125rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px}
.topbar__dates{display:flex;gap:1.25rem;flex-wrap:wrap;margin:0}
.topbar__next{margin:0;color:var(--on-gold);font-weight:600}
.topbar a{color:inherit}

.site-header{position:sticky;top:0;z-index:60;isolation:isolate;background:var(--card);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(1px)){.site-header{background:transparent}.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px)}}
.site-header .wrap{display:flex;align-items:center;gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;min-width:0}
.brand__link{display:flex;align-items:center;gap:.6rem;font:800 1.5rem/1 var(--f-head);color:var(--ink);letter-spacing:-.02em}
.brand__link:hover{text-decoration:none}
.brand__name{white-space:nowrap}
.brand__mark{width:34px;height:34px;background:var(--deep);display:grid;place-items:center}
.brand__mark i{width:16px;height:16px;background:var(--gold)}
.brand small{display:block;font:500 .75rem/1.2 var(--f-body);color:var(--muted);letter-spacing:0;margin-top:.2rem}

.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.15rem;align-items:center}
.nav li{position:relative}
.nav a{display:block;padding:.5rem .85rem;border-radius:999px;color:var(--ink);font-weight:600;font-size:.9375rem}
.nav a:hover,.nav .current-menu-item>a,.nav .current_page_item>a,.nav .current-menu-ancestor>a{background:var(--tint);color:var(--link);text-decoration:none}
.nav .sub-menu{position:absolute;left:0;top:100%;min-width:200px;display:none;flex-direction:column;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:.4rem;z-index:10}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{display:flex}
.nav-toggle,.nav-close{display:none}
.nav-backdrop{position:fixed;inset:0;background:rgba(3,14,12,.55);z-index:55}
.nav-backdrop[hidden]{display:none}
.header-actions{display:flex;gap:.5rem;align-items:center}

.search-panel{display:none;border-top:1px solid var(--line);background:var(--card)}
.search-panel.is-open{display:block}
.search-panel form{display:flex;gap:.5rem;padding:.9rem 0}
.search-form{display:flex;gap:.5rem;width:100%}
.search-form input[type=search]{flex:1;min-width:0;padding:.65rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--bg)}

/* Logo bawaan WordPress (terang/gelap) */
.custom-logo{max-height:46px;width:auto}
.custom-logo-link{display:inline-flex;align-items:center}
.custom-logo-link--dark{display:none}
[data-theme="dark"] .has-logo-dark .custom-logo-link:not(.custom-logo-link--dark){display:none}
[data-theme="dark"] .has-logo-dark .custom-logo-link--dark{display:inline-flex}
[data-theme="dark"] body:not(.has-logo-dark) .site-header .custom-logo-link{background:#FAF6EC;padding:.3rem .65rem;border-radius:10px}

/* Logo gambar (header dan footer) */
.brand__link--logo{display:inline-flex;align-items:center;line-height:0}
.logo{display:block;height:44px;width:auto;max-width:min(62vw,240px)}
.logo--dark{display:none}
[data-theme="dark"] .site-header .logo--light{display:none}
[data-theme="dark"] .site-header .logo--dark{display:block}
.site-footer .logo{height:52px;max-width:100%}
.logo-plate{background:#FAF6EC;padding:.35rem .7rem;border-radius:10px}
.site-header .logo-plate{background:transparent;padding:0;border-radius:0}
[data-theme="dark"] .site-header .logo-plate{background:#FAF6EC;padding:.3rem .65rem;border-radius:10px}

/* ---------- 5. Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:1.25rem;margin-top:1.5rem}
.lead{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:440px;background:var(--deep);color:#fff;display:flex;align-items:flex-end}
.lead__img{position:absolute;inset:0}
.lead__img img{width:100%;height:100%;object-fit:cover}
.lead::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,25,23,.92) 8%,rgba(5,25,23,.35) 55%,rgba(5,25,23,0))}
.lead__body{position:relative;z-index:2;padding:1.75rem;max-width:46rem}
.lead__title{font-size:clamp(1.55rem,3.2vw,2.35rem);font-weight:800;margin:.6rem 0 .5rem}
.lead__title a{color:#fff}
.lead p{color:#DCEBE7;margin:0}
.lead__meta{font-size:.875rem;color:#B9D3CD;margin-top:.6rem}

/* ---------- 7. Kartu kisah ---------- */
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;height:100%}
.card__media{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--tint)}
/* gambar unggulan selalu mengisi kotak berukuran tetap (dipotong rapi), tinggi aslinya tidak memengaruhi kartu */
.card__media img,.card__media .ph{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transition:transform .35s}
.card:hover .card__media img{transform:scale(1.03)}
.card__body{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card__title{font-size:1.075rem;font-weight:700;margin:0}
.card__title a{color:var(--ink)}
.card__title a:hover{color:var(--link);text-decoration:none}
.card__excerpt{color:var(--muted);font-size:.9375rem;margin:0}
.card__meta{margin:auto 0 0;font-size:.8125rem;color:var(--muted)}
.card .badge{align-self:flex-start}
.card--row{flex-direction:row;border-radius:var(--r-m);height:220px}
.card--row .card__media{flex:0 0 38%;aspect-ratio:auto;align-self:stretch;min-height:0}
.card--row .card__body{min-width:0;overflow:hidden}
.card--row .card__title{font-size:1.2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card--row .card__excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.headlines{margin-top:1.25rem}

/* ---------- 8. Tile fitur ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2.5rem}
.tile{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);color:var(--ink);transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--gold);transform:translateY(-2px);text-decoration:none}
.tile__icon{width:48px;height:48px;border-radius:14px;background:var(--deep);color:var(--gold);display:grid;place-items:center;margin-bottom:.4rem}
.tile__icon svg{width:26px;height:26px}
.tile h3{margin:0;font-size:1.125rem}
.tile p{margin:0;color:var(--muted);font-size:.9375rem}

/* ---------- 9. Layout konten, Sidebar, Widget ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2rem;margin-top:2.5rem;align-items:stretch}
.stack{display:grid;gap:1rem}
.block{margin-top:2.75rem}
.sidebar{display:grid;gap:1.25rem;align-content:start;min-width:0}
.sidebar__sticky{position:sticky;top:90px;align-self:start}
.sidebar__sticky:empty{display:none}

.widget{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:1.1rem 1.15rem}
.widget--bare{padding:0;border:0;background:transparent}
.widget__title{font-family:var(--f-head);font-weight:700;font-size:1.1rem;margin:0 0 .8rem;padding-bottom:.6rem;border-bottom:2px solid var(--gold)}
.widget ul{margin:0;padding-left:1.1rem}
.widget li{margin:.35rem 0}
.widget select{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg)}
.widget .tagcloud{display:flex;flex-wrap:wrap;gap:.4rem}
.widget .tagcloud a{font-size:.875rem!important;padding:.2rem .7rem;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.widget .tagcloud a:hover{background:var(--tint);text-decoration:none}

.rank{list-style:none;margin:0!important;padding:0!important;counter-reset:r}
.rank li{counter-increment:r;display:flex;gap:.75rem;margin:0 0 .85rem;align-items:flex-start}
.rank li::before{content:counter(r);flex:none;width:34px;height:34px;display:grid;place-items:center;background-image:var(--badge-solid);color:var(--gold);font:700 .9rem var(--f-head);line-height:1}
.rank a{color:var(--ink);font-weight:600;line-height:1.4}
.rank a:hover{color:var(--link)}

.shortcuts{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.shortcuts a{display:flex;align-items:center;gap:.75rem;padding:.55rem .6rem;border-radius:var(--r-s);color:var(--ink);font-weight:600}
.shortcuts a:hover{background:var(--tint);text-decoration:none}
.shortcuts__icon{flex:none;width:36px;height:36px;border-radius:10px;background:var(--deep);color:var(--gold);display:grid;place-items:center}
.shortcuts__icon svg{width:20px;height:20px}

/* ---------- 10. Iklan ----------
   Slot iklan dimulai "pending": tanpa tinggi, margin, maupun label. main.js menambah .ad--filled saat iklan benar-benar
   terisi dan .ad--empty bila tidak ada bid. Dengan begitu slot kosong tidak menyisakan ruang. */
.ad{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin:0 auto;max-width:100%;overflow:hidden;text-align:center}
.ad__label{display:none;align-self:flex-start;font-size:.6875rem;color:var(--muted);line-height:1.2;margin:0 0 .25rem}
.ad--filled .ad__label{display:block}
.ad__body{width:100%;max-width:100%;overflow:hidden;display:flex;justify-content:center}
.ad__body ins,.ad__body iframe,.ad__body img{max-width:100%}
/* ins di dalam wadah flex menyusut jadi lebar 0 sehingga AdSense gagal; gaya inline AdSense (iklan ukuran tetap) tetap menang */
.ad__body ins.adsbygoogle{display:block;width:100%;min-width:0}
.ad ins.adsbygoogle[data-ad-status=unfilled],.ad--empty{display:none!important}
.ad--filled{margin:1.25rem auto}
.ad--preview{border:1px dashed var(--line);border-radius:var(--r-s);background:var(--tint);padding:.5rem}
.ad__ph{color:var(--muted);font-size:.8125rem}
.ad--desktop{display:none}
.ad--mobile{display:flex}
@media (min-width:901px){.ad--desktop{display:flex}.ad--mobile{display:none}}
.entry .ad--filled{margin:1.75rem auto;clear:both}
.stack>.ad--filled{margin:.25rem auto}
.sidebar .ad--filled{margin:0}
/* di dalam grid ber-gap, slot kosong tidak boleh menambah celah */
.stack>.ad:not(.ad--filled){margin-top:-1rem}
.sidebar>.ad:not(.ad--filled),.sidebar>.sidebar__sticky:not(:has(.ad--filled)){margin-top:-1.25rem}
.ad-anchor{display:none}

/* ---------- 11. Artikel, Breadcrumb, Paginasi, Komentar ---------- */
.page-head{padding:2rem 0 1rem}
.page-head h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;margin:0}
.page-head p{color:var(--muted);margin:.5rem 0 0;max-width:46rem}

.crumbs{font-size:.875rem;color:var(--muted);margin:0 0 .8rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem .5rem;margin:0;padding:0}
.crumbs li{display:inline-flex;align-items:center;gap:.5rem;min-width:0}
.crumbs li+li::before{content:"/";opacity:.55}
.crumbs a{color:var(--muted)}
.crumbs [aria-current]{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:30ch}

.article{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(1.1rem,3vw,2.25rem)}
.article__head{margin-bottom:.25rem}
.article__title{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;margin:.7rem 0}
.article__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;color:var(--muted);font-size:.875rem;margin:0 0 1.25rem}
.article__thumb{margin:0 0 1.5rem;border-radius:var(--r-m);overflow:hidden}
.article__thumb img{width:100%}
.article__thumb figcaption{font-size:.8125rem;color:var(--muted);padding:.5rem 0}
.article__foot{margin-top:1.5rem}
.article-source{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.entry{font-size:1.0625rem;line-height:1.8;overflow-wrap:anywhere}
.entry>*{max-width:100%}
.entry h2{font-size:1.6rem;margin-top:1.8em}
.entry h3{font-size:1.3rem;margin-top:1.5em}
.entry a{text-decoration:underline}
.entry img{border-radius:var(--r-s)}
.entry figure{margin:1.25rem 0}
.entry blockquote{margin:1.5em 0;padding:.4rem 1.2rem;border-left:5px solid var(--gold);background:var(--tint);border-radius:0 var(--r-s) var(--r-s) 0}
.entry table{display:block;overflow-x:auto;border-collapse:collapse;width:100%}
.entry th,.entry td{border:1px solid var(--line);padding:.5rem .75rem}
.entry pre{overflow-x:auto;padding:1rem;background:var(--tint);border-radius:var(--r-s)}
.entry .arab,.arab{font-family:var(--f-ar);font-size:1.9rem;line-height:2.2;direction:rtl;text-align:right}
.entry iframe,.entry video{max-width:100%}
.entry iframe[src*="youtube"],.entry iframe[src*="youtu.be"],.entry iframe[src*="vimeo"]{width:100%;height:auto;aspect-ratio:16/9}

.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.5rem 0 0}
.tags a{padding:.2rem .75rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.875rem}

/* Paginasi (berlaku untuk .pagination biasa maupun nav.navigation.pagination bawaan WordPress) */
.pagination{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center;margin:2.5rem 0 0}
.navigation.pagination{display:block}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-width:44px;height:44px;padding:0 .95rem;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-weight:600;font-size:.9375rem;line-height:1}
.pagination a.page-numbers:hover{background:var(--tint);text-decoration:none}
.pagination .page-numbers.current{background:var(--btn);border-color:var(--btn);color:#fff}
.pagination .page-numbers.dots{border-color:transparent;background:transparent;min-width:auto;padding:0 .2rem}
.pagination .prev,.pagination .next{padding:0 1.15rem}

.comments{margin-top:2rem}
.comment-list{list-style:none;padding:0}
.comment-list .children{list-style:none;padding-left:1.25rem;border-left:2px solid var(--line)}
.comment-body{padding:1rem 0;border-bottom:1px solid var(--line)}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg)}
.comment-form .submit{background:var(--deep);color:#fff;border:0;border-radius:999px;padding:.7rem 1.4rem;font-weight:600}

.notfound{text-align:center;padding:4rem 0}
.notfound strong{display:block;font:800 clamp(4rem,14vw,8rem)/1 var(--f-head);color:var(--deep-2)}
[data-theme="dark"] .notfound strong{color:var(--leaf)}

/* ---------- 13. Footer & Sosial media ---------- */
.site-footer{margin-top:4rem;background:var(--chrome);color:var(--on-deep-2)}
.site-footer a{color:var(--on-deep-2)}
.site-footer a:hover{color:#fff}
.site-footer .widget{background:transparent;border:0;padding:0}
.site-footer .widget__title{color:#fff;border-color:var(--gold)}
.site-footer .brand__link{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding:3rem 0 2rem}
.footer-grid h3,.footer-title{font:700 1.1rem/1.2 var(--f-head);color:#fff;margin:0 0 .8rem}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin:.4rem 0}
.footer-brand p{margin-top:.9rem;font-size:.9375rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding:1.1rem 0;font-size:.875rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.social__link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);transition:background .2s,transform .2s,color .2s}
.social__icon{width:20px;height:20px;display:block}
/* diawali .site-footer agar menang atas ".site-footer a" dan ".site-footer a:hover" */
.site-footer .social__link{color:#fff}
.site-footer .social__link:hover,.site-footer .social__link:focus-visible{background:#c9a24d;color:#0d3b2e;transform:translateY(-2px);text-decoration:none}

.to-top{position:fixed;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;border:0;background:var(--gold);color:#2B2006;display:none;place-items:center;z-index:80}
.to-top.is-on{display:grid}

/* ---------- 14. Share, Read progress, Halaman statis ---------- */
/* Social share */
.share{--share-bg:#FAF6EC;--share-border:#dce7e3;--share-text:#173d38;--share-muted:#647873;--share-hover:#e3efeb;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:1.5rem 0;padding:1rem 0;border-block:1px solid var(--line);color:var(--share-text)}
[data-theme="dark"] .share{--share-bg:#112b28;--share-border:#294641;--share-text:#e5efec;--share-muted:#a7bfba;--share-hover:#1a403a}
.share__heading{font-size:14px;font-weight:700}
.share__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.share__button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 12px;border:1px solid var(--share-border);border-radius:12px;background:var(--share-bg);color:var(--share-text);font:inherit;font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.share__button svg{display:block;width:18px;height:18px;flex:0 0 18px}
.share__button:hover{background:var(--share-hover);border-color:#00897b;color:var(--share-text);text-decoration:none;transform:translateY(-2px)}
.share__button:focus-visible{outline:2px solid #00897b;outline-offset:3px}
.share__button:active{transform:translateY(0)}
/* warna ikon brand saat hover (harus setelah .share__button:hover) */
.share--whatsapp:hover{color:#25a55b}
.share--facebook:hover{color:#1877f2}
.share--x:hover{color:#777}
.share--telegram:hover{color:#229ed9}
.share--linkedin:hover{color:#0a66c2}
.share--reddit:hover{color:#ff4500}
.share--pinterest:hover{color:#bd081c}
.share--email:hover,.share--copy:hover{color:#00897b}
.share__notice{flex-basis:100%;color:var(--share-muted);font-size:12px}

/* Progress baca */
.read-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:99999;background:rgba(0,0,0,.06);pointer-events:none;opacity:0;transition:opacity .2s}
.read-progress.is-active{opacity:1}
.read-progress__bar{display:block;height:100%;width:100%;background:linear-gradient(90deg,#0f5132,#c9a24d);transform:scaleX(0);transform-origin:left center;will-change:transform}
body.admin-bar .read-progress{top:32px}
@media (max-width:782px){body.admin-bar .read-progress{top:46px}}

/* Halaman statis (ToS, Disclaimer, Privasi, Kontak, Tentang) */
.ip-page{--ip-green:#0a6b55;--ip-green-dark:#005040;--ip-gold:#b8893b;--ip-bg:#f6f8f7;--ip-text:#1f2933;--ip-muted:#617080;--ip-border:#e1e7e4;color:var(--ip-text);line-height:1.8;font-size:17px;background:#fff}
.ip-hero{background:linear-gradient(135deg,var(--ip-green-dark),var(--ip-green));color:#fff;padding:56px 20px 48px;text-align:center}
.ip-hero h1{margin:0 0 10px;font-size:clamp(28px,4vw,40px);line-height:1.25;color:#fff}
.ip-hero p{margin:0 auto;max-width:640px;opacity:.9}
.ip-meta{display:inline-block;margin-top:14px!important;padding:4px 14px;border-radius:999px;background:rgba(255,255,255,.15);font-size:14px}
.ip-wrap{max-width:1080px;margin:0 auto;padding:40px 20px 64px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}
.ip-wrap.ip-single{grid-template-columns:minmax(0,820px);justify-content:center}
.ip-toc{position:sticky;top:90px;background:var(--ip-bg);border:1px solid var(--ip-border);border-radius:12px;padding:18px 20px;font-size:15px}
.ip-toc strong{display:block;margin-bottom:8px;color:var(--ip-green-dark)}
.ip-toc ol{margin:0;padding-left:18px}
.ip-toc li{margin:6px 0}
.ip-toc a{color:var(--ip-text);text-decoration:none}
.ip-toc a:hover{color:var(--ip-green);text-decoration:underline}
.ip-content h2{margin:2.2em 0 .6em;padding-bottom:.35em;font-size:24px;color:var(--ip-green-dark);border-bottom:2px solid var(--ip-border);scroll-margin-top:90px}
.ip-content h2:first-child{margin-top:0}
.ip-content h3{margin:1.6em 0 .4em;font-size:19px;color:var(--ip-text)}
.ip-content p{margin:0 0 1.1em}
.ip-content ul,.ip-content ol{margin:0 0 1.2em 1.2em;padding-left:.6em}
.ip-content li{margin:.35em 0}
.ip-content a{color:var(--ip-green);text-decoration:underline;text-underline-offset:2px}
.ip-content a:hover{color:var(--ip-green-dark)}
.ip-note{margin:1.4em 0;padding:16px 20px;border-left:4px solid var(--ip-gold);background:#fbf6ec;border-radius:0 10px 10px 0;font-size:16px}
.ip-note p:last-child{margin-bottom:0}
.ip-intro{font-size:18px;color:var(--ip-muted);margin-bottom:1.6em}
.ip-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.4em 0}
.ip-card{padding:20px;border:1px solid var(--ip-border);border-radius:12px;background:var(--ip-bg)}
.ip-card h3{margin:0 0 6px;font-size:17px;color:var(--ip-green-dark)}
.ip-card p{margin:0;font-size:15px;color:var(--ip-muted)}
.ip-form{display:grid;gap:16px;margin-top:1em}
.ip-form label{display:block;margin-bottom:4px;font-weight:600;font-size:15px}
.ip-form input[type=text],.ip-form input[type=email],.ip-form select,.ip-form textarea{width:100%;padding:12px 14px;border:1px solid #cfd8d4;border-radius:8px;font:inherit;background:#fff}
.ip-form input:focus,.ip-form select:focus,.ip-form textarea:focus{outline:2px solid var(--ip-green);border-color:var(--ip-green)}
.ip-form textarea{min-height:160px;resize:vertical}
.ip-form button{justify-self:start;padding:12px 28px;border:0;border-radius:8px;background:var(--ip-green);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.ip-form button:hover{background:var(--ip-green-dark)}
.ip-hp{position:absolute!important;left:-9999px!important}
.ip-alert{padding:14px 18px;border-radius:10px;margin:0 0 1.2em;font-size:16px}
.ip-alert.ok{background:#e8f6ef;border:1px solid #b6e2cc;color:#005040}
.ip-alert.err{background:#fdecec;border:1px solid #f4bcbc;color:#8a1f1f}

/* ---------- 15. Responsif (urutan harus menurun: 1100 > 900 > 640 > 480 > 380) ---------- */
@media (max-width:1100px){
  .grid-4,.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr)}
  .sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sidebar>.ad,.sidebar__sticky,.sidebar>.widget--bare{grid-column:1/-1}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
  html{scroll-padding-top:72px}
  /* header & navigasi */
  .site-header .wrap{min-height:60px;gap:.5rem}
  .nav-toggle{display:inline-grid}
  .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);height:100vh;height:100dvh;background:var(--card);border-left:1px solid var(--line);padding:5rem 1rem 1.5rem;transform:translateX(105%);transition:transform .25s;z-index:70;overflow:auto;margin:0}
  .nav.is-open{transform:none}
  .nav ul{flex-direction:column;align-items:stretch;gap:.2rem}
  .nav a{border-radius:var(--r-s);padding:.75rem .9rem}
  .nav .sub-menu{position:static;display:flex;border:0;padding:0 0 0 .8rem}
  .nav-close{display:inline-grid;position:absolute;top:14px;right:14px}
  .header-actions{margin-left:auto;gap:.35rem}
  .icon-btn{width:44px;height:44px}
  .brand__link{font-size:1.3rem}
  .custom-logo{max-height:38px}
  .logo{height:38px}
  /* konten */
  .hero{grid-template-columns:minmax(0,1fr)}
  .lead{min-height:360px}
  .section-title h2{font-size:1.3rem}
  /* iklan anchor mobile */
  .ad-anchor{display:block;position:fixed;left:0;right:0;bottom:0;z-index:85;background:var(--card);border-top:1px solid var(--line);padding:.35rem .5rem calc(.35rem + env(safe-area-inset-bottom,0px))}
  .ad-anchor:not(.is-on){height:0;padding:0;border:0;overflow:hidden;visibility:hidden}
  .ad-anchor .ad{margin:0}
  .ad-anchor__close{position:absolute;right:6px;top:-30px;width:30px;height:30px;border-radius:8px 8px 0 0;border:1px solid var(--line);border-bottom:0;background:var(--card);font-size:1.25rem;line-height:1;color:var(--ink)}
  body.has-anchor{padding-bottom:84px}
  body.has-anchor .to-top{bottom:100px}
}

@media (max-width:860px){
  .ip-wrap{grid-template-columns:1fr;gap:24px;padding-top:28px}
  .ip-toc{position:static}
}

@media (max-width:640px){
  .topbar .wrap{min-height:34px}
  .topbar__next{display:none}
  .topbar__dates{gap:.2rem .9rem;font-size:.78rem}
  .brand small{display:none}
  .hero{margin-top:1rem;gap:1rem}
  .lead{min-height:320px;border-radius:var(--r-m)}
  .lead__body{padding:1.1rem}
  .grid-4,.grid-3,.tiles,.sidebar{grid-template-columns:minmax(0,1fr)}
  .grid-4{gap:.9rem}
  .tiles{gap:.7rem}
  .tile{padding:1rem}
  .card--row{flex-direction:column;height:auto}
  .card--row .card__media{flex:none;aspect-ratio:16/10;align-self:auto}
  .card--row .card__excerpt{-webkit-line-clamp:3}
  .article{border-radius:var(--r-m);padding:1rem}
  .page-head{padding:1.25rem 0 .75rem}
  .crumbs [aria-current]{max-width:18ch}
  .pagination .page-numbers:not(.current):not(.prev):not(.next){display:none}
  .pagination .page-numbers.current{min-width:44px}
  .pagination .prev,.pagination .next{flex:1;max-width:11rem}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .footer-bottom{flex-direction:column}
}

@media (max-width:480px){
  .share{align-items:flex-start;gap:10px}
  .share__list{gap:7px}
  .share__button{min-height:42px;padding:10px}
  .share__label{display:none}
  .share__button svg{width:19px;height:19px;flex-basis:19px}
}

@media (max-width:380px){
  .brand__link{font-size:1.15rem}
  .brand__mark{width:30px;height:30px}
  .logo{height:32px}
  .header-actions .icon-btn:nth-child(2){display:none}
}

/* ---------- 16. Aksesibilitas & cetak ---------- */
.sr-only,.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.alignwide{max-width:100%}
.aligncenter{margin-inline:auto}
.alignleft{float:left;margin:0 1rem 1rem 0}
.alignright{float:right;margin:0 0 1rem 1rem}
.wp-caption,.gallery-caption{max-width:100%;font-size:.875rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{.topbar,.site-header,.site-footer,.sidebar,.share,.to-top,.player,.read-progress,.ad-anchor{display:none!important}}
.split--article{margin-top:1.5rem}


.arab {
    display: block;
    direction: rtl;
    text-align: right;
    font-family: 'Traditional Arabic', 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', var(--f-ar), serif;
    font-size: 1.85em;
    line-height: 2.2;
    margin: 14px 0;
    padding: 10px 0;
    color: var(--ink);
    word-spacing: 0.05em;
}

[data-theme="dark"] .arab {
    color: var(--ink);
    text-shadow: 0 0 1px rgba(255, 255, 255, .05);
}


.arab::before {
    content: "﷽";
    display: none;
}


.latin {
    display: block;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.05em;
    line-height: 1.8;
    color: var(--muted);
    margin: 8px 0 16px;
    padding: 8px 12px;
    border-left: 3px solid var(--gold);
    background: color-mix(in srgb, var(--gold) 5%, transparent);
    border-radius: 0 var(--r-s) var(--r-s) 0;
}

[data-theme="dark"] .latin {
    color: var(--muted);
    background: color-mix(in srgb, var(--gold) 10%, transparent);
}

.arti {
    display: block;
    font-family: var(--f-body), 'Instrument Sans', system-ui, sans-serif;
    font-style: normal;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ink);
    margin: 6px 0 20px;
    padding: 10px 14px;
    background: var(--tint);
    border-left: 3px solid var(--leaf);
    border-radius: 0 var(--r-s) var(--r-s) 0;
}

.arti::before {
    content: "“";
    color: var(--leaf);
    font-weight: 700;
    margin-right: 2px;
}

.arti::after {
    content: "”";
    color: var(--leaf);
    font-weight: 700;
    margin-left: 2px;
}

[data-theme="dark"] .arti {
    color: var(--ink);
    background: color-mix(in srgb, var(--leaf) 15%, transparent);
    border-left-color: var(--leaf);
}

.arab-inline {
    font-family: var(--f-ar), 'Traditional Arabic', 'Amiri', 'Scheherazade New', serif;
    font-size: 1.4em;
    direction: rtl;
    unicode-bidi: embed;
    color: var(--ink);
    line-height: 1.6;
    padding: 0 2px;
}

.latin-inline {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    color: var(--muted);
    padding: 0 2px;
}

.entry .arab {
    margin: 1.5em 0 .5em;
    padding: 0;
}

.entry .latin {
    margin: .5em 0 1em;
}

.entry .arti {
    margin: .5em 0 1.5em;
}

/* =====================================================================
   KISAH ISLAMIPEDIA 2.0: komponen khusus situs kisah
   ===================================================================== */

/* ---------- Topbar ---------- */
.topbar__tag{margin:0;color:var(--on-gold);font-weight:600;letter-spacing:.02em}
.topbar__site{display:inline-flex;align-items:center;gap:.35rem;margin:0;font-weight:600}
.topbar__site a{color:var(--on-gold)}
.topbar__site a:hover{color:#fff;text-decoration:none}
.topbar__site svg{width:14px;height:14px}

/* ---------- Logo (lebih besar agar tagline terbaca) ---------- */
@media (min-width:901px){.logo{height:54px}.site-footer .logo{height:64px}}
@media (max-width:900px){.logo{height:42px}}
@media (max-width:380px){.logo{height:36px}}

/* ---------- Menu: dropdown ---------- */
.nav .sub-menu{box-shadow:0 18px 40px -18px rgba(0,40,30,.35)}
.nav .sub-menu a{border-radius:var(--r-s);white-space:nowrap}
.nav .menu-item-has-children>a::after{content:"";display:inline-block;margin-left:.45rem;width:.38em;height:.38em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
@media (max-width:900px){.nav .menu-item-has-children>a::after{display:none}}

/* ---------- Beranda: hero dan "Kisah Pilihan" ---------- */
.kicker{display:inline-flex;align-items:center;gap:.45rem;font:700 .75rem/1 var(--f-head);letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.kicker::before{content:"";width:14px;height:14px;background:var(--gold);clip-path:var(--star)}
.lead__body .kicker{margin-bottom:.6rem}
.pilihan{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.3rem;padding:1.25rem 1.1rem 1.1rem;border-radius:var(--r-l);background:var(--deep);color:#fff}
.pilihan::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 63,18 82,18 82,37 96,50 82,63 82,82 63,82 50,96 37,82 18,82 18,63 4,50 18,37 18,18 37,18' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E")}
.pilihan>*{position:relative}
.pilihan__title{display:flex;align-items:center;gap:.5rem;margin:0 0 .35rem .35rem;font:800 1.2rem/1.2 var(--f-head);color:#fff}
.pilihan__list{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.pilihan__item a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:.8rem;align-items:center;padding:.55rem;border-radius:var(--r-m);color:#fff}
.pilihan__item a:hover{background:rgba(255,255,255,.09);text-decoration:none}
.pilihan__thumb{aspect-ratio:1;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.12)}
.pilihan__thumb img{width:100%;height:100%;object-fit:cover}
.pilihan__item strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 .98rem/1.3 var(--f-head)}
.pilihan__item small{display:block;margin-top:.2rem;color:var(--on-deep-2);font-size:.78rem}
.pilihan__more{margin-top:auto;padding:.5rem .35rem 0;color:var(--on-gold);font-weight:600;font-size:.9375rem}
.pilihan__more:hover{color:#fff}

/* ---------- Jelajahi: kartu kategori utama ---------- */
.tiles--cat{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile__count{margin-top:auto!important;padding-top:.4rem;font-size:.8125rem!important;font-weight:700;color:var(--link)!important}
.tiles--cat .tile{min-height:170px}
@media (max-width:1100px){.tiles--cat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tiles--cat{grid-template-columns:minmax(0,1fr)}.tiles--cat .tile{min-height:0}}

/* ---------- Kotak nabi / subkategori ---------- */
.nabi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.nabi-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nabi{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);color:var(--ink);transition:border-color .15s,transform .15s}
.nabi:hover{border-color:var(--gold);transform:translateY(-2px);text-decoration:none}
.nabi__mark{flex:none;position:relative;width:58px;height:58px;display:grid;place-items:center;background:var(--badge-solid) center/100% 100% no-repeat;color:var(--gold)}
.nabi__mark svg{width:26px;height:26px}
.nabi__mark img{position:absolute;inset:7%;width:86%;height:86%;object-fit:cover;clip-path:var(--star)}
.nabi__text{min-width:0}
.nabi__name{margin:0;font:700 1.02rem/1.25 var(--f-head)}
.nabi__count{display:block;margin-top:.15rem;font-size:.8125rem;color:var(--muted)}
.nabi__desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:.25rem 0 0;font-size:.875rem;color:var(--muted)}
.subcats{margin:0 0 2rem}
@media (max-width:1100px){.nabi-grid,.nabi-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .nabi-grid,.nabi-grid--3{gap:.6rem}
  .nabi{padding:.65rem .7rem;gap:.6rem;border-radius:var(--r-m)}
  .nabi__mark{width:42px;height:42px}.nabi__mark svg{width:20px;height:20px}
  .nabi__name{font-size:.92rem}
  .nabi__desc{display:none}
}
@media (max-width:380px){.nabi-grid,.nabi-grid--3{grid-template-columns:minmax(0,1fr)}}

/* ---------- Header kategori ---------- */
.page-head--cat .page-head__row{display:flex;align-items:center;gap:1.1rem}
.page-head--cat .nabi__mark{width:72px;height:72px}
.page-head--cat .nabi__mark svg{width:32px;height:32px}
.page-head__count{display:inline-block;margin-top:.7rem;padding:.15rem .75rem;border-radius:999px;background:var(--badge-bg);color:var(--badge-fg);font-weight:700;font-size:.8125rem}
@media (max-width:640px){.page-head--cat .nabi__mark{width:54px;height:54px}.page-head--cat .nabi__mark svg{width:24px;height:24px}}

/* ---------- Artikel: gaya membaca kisah ---------- */
.entry{font-family:var(--f-read);font-size:1.125rem;line-height:1.9}
.entry p{margin-bottom:1.3em}
.entry h2,.entry h3,.entry h4{font-family:var(--f-head)}
.entry blockquote{font-style:italic}
.entry .arti,.entry .latin{font-size:1rem}
.series-pill{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 .6rem .5rem;padding:.15rem .75rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:600;font-size:.8125rem}
.series-pill b{color:var(--link)}

/* ---------- Kotak Pelajaran & Hikmah ---------- */
.hikmah{position:relative;margin:2.25rem 0 0;padding:1.4rem 1.5rem 1.3rem;border-radius:var(--r-l);background:linear-gradient(135deg,var(--gold-soft),color-mix(in srgb,var(--gold-soft) 45%,var(--card)));border:1px solid color-mix(in srgb,var(--gold) 50%,var(--line))}
.hikmah__title{display:flex;align-items:center;gap:.65rem;margin:0 0 .7rem;font:800 1.25rem/1.2 var(--f-head);color:var(--badge-fg)}
.hikmah__title::before{content:"";flex:none;width:30px;height:30px;background:var(--badge-gold) center/100% 100% no-repeat}
.hikmah__body{font-family:var(--f-read);font-size:1.0625rem;line-height:1.8;color:var(--ink)}
.hikmah__body p:last-child,.hikmah__body ul:last-child{margin-bottom:0}
.hikmah__body ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.hikmah__body li{position:relative;padding-left:1.6rem}
.hikmah__body li::before{content:"";position:absolute;left:0;top:.5em;width:.8rem;height:.8rem;background:var(--gold);clip-path:var(--star)}
.rujukan{margin:1.25rem 0 0;padding:.9rem 1.1rem;border-radius:var(--r-m);background:var(--tint);color:var(--muted);font-size:.9rem;line-height:1.6}
.rujukan strong{display:block;margin-bottom:.2rem;color:var(--ink);font-family:var(--f-head)}
.rujukan p{margin:0}

/* ---------- Kisah sebelumnya / berikutnya ---------- */
.story-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2rem 0 0}
.story-nav a{display:flex;flex-direction:column;gap:.25rem;height:100%;padding:1rem 1.15rem;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);color:var(--ink);transition:border-color .15s}
.story-nav a:hover{border-color:var(--gold);text-decoration:none}
.story-nav small{display:flex;align-items:center;gap:.35rem;color:var(--muted);font-weight:600}
.story-nav small svg{width:16px;height:16px}
.story-nav strong{font:700 1rem/1.35 var(--f-head)}
.story-nav__next{text-align:right;grid-column:2}
.story-nav__next small{justify-content:flex-end}
@media (max-width:640px){.story-nav{grid-template-columns:minmax(0,1fr)}.story-nav__next{grid-column:auto}}

/* ---------- Footer: tautan ke Islamipedia.id ---------- */
.mainsite{margin-top:1.25rem;padding:1rem 1.1rem;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-m);background:rgba(255,255,255,.05)}
.mainsite__title{margin:0 0 .5rem;font:700 .9375rem/1.3 var(--f-head);color:#fff}
.mainsite ul{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin:0;padding:0;list-style:none}
.mainsite li{margin:0!important}
.mainsite a{display:inline-block;padding:.2rem .7rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:.8125rem;font-weight:600}
.mainsite a:hover{background:rgba(255,255,255,.12);text-decoration:none}

/* ---------- Dark mode: penyesuaian ---------- */
[data-theme="dark"] .hikmah{background:linear-gradient(135deg,#2E2510,#231D0E);border-color:#5B4A1D}
[data-theme="dark"] .hikmah__body{color:var(--ink)}
[data-theme="dark"] .pilihan{background:var(--deep-2)}
@media (max-width:900px){.topbar__tag{display:none}}
.pilihan__thumb.nabi__mark{width:auto;height:auto;border-radius:12px;background:rgba(255,255,255,.12);color:var(--gold)}
.pilihan__thumb.nabi__mark svg{width:30px;height:30px}

/* ---------- Perbaikan tata letak header dan label kisah pilihan ---------- */
.nav a{white-space:nowrap}
.brand{flex:none}
.lead__body .kicker{display:flex;margin-bottom:.55rem}
@media (min-width:901px){.nav{min-width:0}.nav ul{gap:0}.nav a{font-size:.86rem;padding:.45rem .6rem}.nav .menu-item-has-children>a::after{margin-left:.3rem}}
@media (min-width:901px) and (max-width:1320px){.logo{height:46px}.nav a{font-size:.8rem;padding:.4rem .48rem}}
@media (min-width:901px) and (max-width:1180px){.logo{height:40px}.nav a{font-size:.74rem;padding:.35rem .3rem}.nav .menu-item-has-children>a::after{display:none}}
@media (min-width:901px) and (max-width:1000px){.nav>ul>li:first-child{display:none}}
.topbar__site,.topbar__site a{white-space:nowrap}@media (max-width:640px){.topbar__site svg{display:none}}
[data-theme="dark"] img[src*="noimage"]{filter:brightness(.55) saturate(.8)}