/*
Theme Name: Islamipedia
Theme URI: https://islamipedia.id
Author: Islamipedia
Description: Tema WordPress modern dan responsif untuk portal berita Islam dengan Al Qur'an Digital, Murottal Qur'an, Juz 'Amma, dan Jadwal Salat.
Version: 1.2.1
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: islamipedia
Tags: news, blog, two-columns, custom-menu, featured-images, threaded-comments, translation-ready, dark-mode
*/

/* ---------- Token ---------- */
:root{
  --deep:#0A3D3A; --deep-2:#0F514C; --leaf:#16806F; --link:#0F6F61; --gold:#D6A23A; --gold-soft:#F3E3BD;
  --bg:#F3F7F5; --card:#FFFFFF; --ink:#0F2420; --muted:#4F635D; --line:#D9E5E0; --tint:#E7F0EC;
  --chrome:#0A3D3A; --btn:#0B3F3B; --btn-hover:#11534D;
  --on-deep:#E8F3F0; --on-deep-2:#B9D3CD; --on-gold:#F6E7BE; --ink-on-gold:#2B2006;
  --badge-bg:#F3E3BD; --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-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='%230A3D3A' stroke='%23D6A23A' 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='%23D6A23A' 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='%23E7F0EC' stroke='%2316806F' 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='%2316806F' 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='%23D6A23A' stroke='%230A3D3A' 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='%230A3D3A' 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:#06110F; --deep:#0F4A44; --deep-2:#15605A; --btn:#177E6C; --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='%230F4A44' stroke='%23D6A23A' 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='%23D6A23A' 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='%23D6A23A' stroke='%23F3E3BD' 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;
}

/* ---------- Dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
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}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.star{clip-path:var(--star)}
.rank li::before,.surah-list .num,.mu-item .num,.ayah__num{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))}

/* ---------- 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}

/* ---------- Topbar ---------- */
.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}

/* ---------- Header ---------- */
.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}
.custom-logo{max-height:46px;width:auto}
.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}
.header-actions{display:flex;gap:.5rem;align-items:center}
.nav-toggle{display:none}
.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)}

/* ---------- 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}

/* ---------- Kartu jadwal salat ---------- */
.prayer-card{position:relative;border-radius:var(--r-l);padding:1.4rem;background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 0l8 20 20 8-20 8-8 20-8-20L0 28l20-8z' fill='none' stroke='%23ffffff' stroke-opacity='.07'/%3E%3C/svg%3E");color:#fff;display:flex;flex-direction:column;gap:1rem}
.prayer-card__head{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start}
.prayer-card__loc{margin:0;font:700 1.05rem/1.3 var(--f-head)}
.prayer-card__date{margin:0;font-size:.8125rem;color:#B9D3CD}
.prayer-card select{max-width:150px;padding:.4rem .6rem;border-radius:var(--r-s);border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:#fff;font-size:.875rem}
.prayer-card select option{color:#111}
.prayer-card__next{padding:1rem 1.1rem;border-radius:var(--r-m);background:rgba(0,0,0,.28);border:1px solid rgba(214,162,58,.5)}
.prayer-card__next span{display:block;font-size:.875rem;color:var(--on-gold)}
.prayer-card__next strong{display:block;font:800 2.4rem/1.1 var(--f-head);font-variant-numeric:tabular-nums;color:var(--gold)}
.prayer-card__list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.prayer-card__list li{display:flex;justify-content:space-between;padding:.4rem .7rem;border-radius:var(--r-s);font-variant-numeric:tabular-nums;font-size:.9375rem}
.prayer-card__list li.is-next{background:var(--gold);color:#2B2006;font-weight:700}
.prayer-card__list li.is-off{color:#9DBFB8;font-size:.875rem}
.prayer-card__more{margin-top:auto;color:var(--on-gold);font-weight:600;font-size:.9375rem}

/* ---------- Kartu berita ---------- */
.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}

/* ---------- 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}

/* ---------- Layout konten ---------- */
.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}
.widget{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:1.1rem 1.15rem}
.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}
.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)}

/* ---------- Artikel ---------- */
.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-bottom:.8rem}
.crumbs a{color:var(--muted)}
.article{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(1.1rem,3vw,2.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-bottom: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}
.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 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 .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%}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.5rem 0}
.tags a{padding:.2rem .75rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.875rem}
.share{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.5rem 0;padding:1rem 0;border-block:1px solid var(--line)}
.share strong{margin-right:.4rem}
.share a,.share button{padding:.4rem .9rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font-weight:600;font-size:.875rem}
.share a:hover,.share button:hover{background:var(--tint);text-decoration:none}
.pagination{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin:2.5rem 0}
.pagination .page-numbers{min-width:42px;height:42px;padding:0 .8rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);color:var(--ink);font-weight:600}
.pagination .current{background:var(--deep);color:#fff;border-color:var(--deep)}
.pagination a:hover{text-decoration:none;background:var(--tint)}
.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)}

/* ---------- Halaman aplikasi (Qur'an, Murottal, Jadwal) ---------- */
.app-page{padding-bottom:3rem}
.app-head{padding:2rem 0 1.25rem}
.app-head h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;margin:0 0 .4rem}
.app-head p{color:var(--muted);margin:0;max-width:44rem}
.reader{display:grid;grid-template-columns:310px minmax(0,1fr);gap:1.5rem;align-items:start}
.reader__nav{position:sticky;top:88px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:.9rem}
.reader__nav input[type=search],.field{width:100%;padding:.6rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--bg)}
.reader__last{margin:.6rem 0 0;font-size:.875rem}
.reader__last a{font-weight:600}
.surah-list{position:relative;list-style:none;margin:.75rem 0 0;padding:0;max-height:calc(100vh - 230px);overflow:auto;overscroll-behavior:contain}
.surah-list a{display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;border-radius:var(--r-s);color:var(--ink)}
.surah-list a:hover{background:var(--tint);text-decoration:none}
.surah-list a[aria-current=true]{background:var(--deep);color:#fff}
.surah-list .num{flex:none;width:38px;height:38px;display:grid;place-items:center;background-image:var(--badge-soft);color:var(--ink);font-size:.72rem;font-weight:700;letter-spacing:-.02em;line-height:1}
.surah-list a[aria-current=true] .num{background-image:var(--badge-gold);color:#2B2006}
.surah-list .meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.surah-list .meta small{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.surah-list a[aria-current=true] small{color:#BFE0D9}
.surah-list .ar{font-family:var(--f-ar);font-size:1.25rem;flex:none}
.reader__bar{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:.6rem .8rem;margin-bottom:1rem;position:sticky;top:76px;z-index:20}
.reader__bar .grp{display:flex;align-items:center;gap:.4rem}
.reader__bar label{display:flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;cursor:pointer}
.reader__bar select{padding:.4rem .6rem;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);max-width:190px}
.reader__pick{display:none}
.surah-head{text-align:center;padding:1.75rem 1rem;border-radius:var(--r-l);background:var(--deep);color:#fff;margin-bottom:1.25rem}
.surah-head .ar{font:400 clamp(2.4rem,7vw,3.6rem)/1.5 var(--f-ar);color:var(--gold);margin:0}
.surah-head h2{margin:.1rem 0;font-size:1.5rem}
.surah-head p{margin:0;color:#BFE0D9}
.surah-head details{max-width:40rem;margin:.9rem auto 0;text-align:left;font-size:.9375rem;color:#DCEBE7}
.surah-head summary{cursor:pointer;text-align:center;color:var(--on-gold);font-weight:600}
.surah-head .btn{margin-top:1rem}
.bismillah{font:400 calc(var(--ar-size) + .2rem)/2 var(--f-ar);text-align:center;margin:0 0 1rem}
.ayah{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:1rem 1.2rem 1.2rem;margin-bottom:.8rem;scroll-margin-top:150px}
.ayah.is-playing{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
.ayah__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.ayah__num{width:44px;height:44px;display:grid;place-items:center;background-image:var(--badge-solid);color:var(--gold);font:700 .85rem var(--f-head);line-height:1}
.ayah__actions{display:flex;gap:.3rem}
.ayah__actions button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;color:var(--muted)}
.ayah__actions button:hover,.ayah__actions button[aria-pressed=true]{background:var(--tint);color:var(--link)}
.ayah__actions svg{width:18px;height:18px}
.ayah__ar{font-family:var(--f-ar);font-size:var(--ar-size);line-height:2.3;direction:rtl;text-align:right;margin:.3rem 0 .6rem}
.ayah__lat{color:var(--link);font-style:italic;font-size:.975rem;margin:0 0 .4rem}
.ayah__id{margin:0}
.reader__view.hide-lat .ayah__lat{display:none}
.reader__view.hide-id .ayah__id{display:none}
.reader__pager{display:flex;justify-content:space-between;gap:.75rem;margin-top:1.25rem}
.skeleton{height:120px;border-radius:var(--r-m);background:linear-gradient(90deg,var(--tint),var(--card),var(--tint));background-size:200% 100%;animation:sk 1.4s linear infinite;margin-bottom:.8rem}
@keyframes sk{to{background-position:-200% 0}}
.notice{padding:1rem 1.2rem;border-radius:var(--r-m);border:1px solid var(--gold);background:var(--gold-soft);color:var(--ink)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--deep);color:#fff;padding:.6rem 1.1rem;border-radius:999px;z-index:300;font-size:.9rem}

/* Murottal */
.mu-tools{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1rem}
.mu-tools .field{max-width:320px}
.chips{display:flex;gap:.4rem}
.chip{padding:.45rem .95rem;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:.9rem}
.chip[aria-pressed=true]{background:var(--deep);color:#fff;border-color:var(--deep)}
.mu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.mu-item{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem;border-radius:var(--r-m);background:var(--card);border:1px solid var(--line);width:100%;text-align:left}
.mu-item:hover{border-color:var(--gold)}
.mu-item.is-active{background:var(--deep);color:#fff;border-color:var(--deep)}
.mu-item .num{flex:none;width:42px;height:42px;display:grid;place-items:center;background-image:var(--badge-soft);color:var(--ink);font-weight:700;font-size:.75rem;letter-spacing:-.02em;line-height:1}
.mu-item.is-active .num{background-image:var(--badge-gold);color:#2B2006}
.mu-item .meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.mu-item .meta small{color:var(--muted)}
.mu-item.is-active small{color:#BFE0D9}
.mu-item .ar{font-family:var(--f-ar);font-size:1.3rem}
.player{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--deep);color:#fff;border-top:2px solid var(--gold);padding:.65rem 0 calc(.65rem + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform .25s}
.player.is-on{transform:none}
.player .wrap{display:grid;grid-template-columns:minmax(150px,1fr) 2fr minmax(120px,1fr);gap:1rem;align-items:center}
.player__title{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.player__title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__title small{color:#BFE0D9}
.player__ctrl{display:flex;flex-direction:column;gap:.3rem}
.player__btns{display:flex;justify-content:center;gap:.6rem;align-items:center}
.player__btns button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;display:grid;place-items:center}
.player__btns button:hover{background:rgba(255,255,255,.12)}
.player__btns .play{width:48px;height:48px;background:var(--gold);color:#2B2006;border:0}
.player__btns svg{width:20px;height:20px}
.player__seek{display:flex;align-items:center;gap:.6rem;font-size:.8125rem;font-variant-numeric:tabular-nums}
.player__seek input{flex:1;accent-color:var(--gold)}
.player__side{display:flex;justify-content:flex-end;gap:.5rem}
.player__side button{padding:.35rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-weight:600;font-size:.85rem}
body.has-player{padding-bottom:110px}

/* Jadwal salat */
.jadwal__top{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:1.5rem;align-items:start;margin-bottom:1.5rem}
.jadwal__tools{display:grid;gap:.8rem;align-content:start}
.jadwal__tools .note{font-size:.9rem;color:var(--muted);margin:0}
.month{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:1rem}
.month__bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.8rem}
.month__bar h2{margin:0;font-size:1.25rem}
.table-scroll{overflow-x:auto}
.month table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:640px}
.month th,.month td{padding:.55rem .6rem;text-align:center;border-bottom:1px solid var(--line);font-size:.9375rem}
.month th{background:var(--deep);color:#fff;font-weight:600;position:sticky;top:0}
.month td:first-child,.month th:first-child{text-align:left}
.month tr.is-today td{background:var(--gold-soft);font-weight:700}

/* ---------- Footer ---------- */
.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)}
.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}
.site-footer .brand__link{color:#fff}
.footer-brand p{margin-top:.9rem;font-size:.9375rem}
.social{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.social a{padding:.3rem .8rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:.85rem;font-weight:600}
.social a:hover{background:rgba(255,255,255,.1);text-decoration:none}
.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}
.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}
body.has-player .to-top{bottom:120px}

/* ---------- Responsif ---------- */
@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}
  .mu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav-toggle{display:inline-grid}
  .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);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}
  .header-actions{margin-left:auto}
  .nav-close{display:inline-grid!important;position:absolute;top:14px;right:14px}
  .hero{grid-template-columns:minmax(0,1fr)}
  .lead{min-height:360px}
  .jadwal__top{grid-template-columns:minmax(0,1fr)}
  .reader{grid-template-columns:minmax(0,1fr)}
  .reader__nav{display:none;position:static}
  .reader__nav.is-open{display:block}
  .reader__pick{display:inline-flex}
  .surah-list{max-height:50vh}
  .reader__bar{top:68px}
  .player .wrap{grid-template-columns:1fr auto;grid-template-areas:"t s" "c c"}
  .player__title{grid-area:t}.player__ctrl{grid-area:c}.player__side{grid-area:s}
}
@media (max-width:640px){
  .topbar__next{display:none}
  .grid-4,.grid-3,.tiles,.mu-grid,.sidebar{grid-template-columns:minmax(0,1fr)}
  .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}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .lead__body{padding:1.1rem}
  .prayer-card__next strong{font-size:2rem}
  .brand small{display:none}
}
@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{display:none!important}}
.nav-close{display:none}
.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)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ================= v1.1 ================= */
html{scroll-padding-top:90px}

/* Logo (terang/gelap) */
.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:#F3F7F5;padding:.3rem .65rem;border-radius:10px}

/* Breadcrumb */
.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}

/* Paginasi */
.navigation.pagination{display:block;margin:2.5rem 0 0}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center}
.navigation.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}
.navigation.pagination a.page-numbers:hover{background:var(--tint);text-decoration:none}
.navigation.pagination .page-numbers.current{background:var(--btn);border-color:var(--btn);color:#fff}
.navigation.pagination .page-numbers.dots{border-color:transparent;background:transparent;min-width:auto;padding:0 .2rem}
.navigation.pagination .prev,.navigation.pagination .next{padding:0 1.15rem}

/* Widget bawaan */
.widget--bare{padding:0;border:0;background:transparent}
.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}
.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}
.widget select{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg)}
.sidebar__sticky{position:sticky;top:90px;align-self:start}
.sidebar__sticky:empty{display:none}

/* Iklan */
.ad{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:1.25rem auto;max-width:100%;overflow:hidden;text-align:center}
.ad__label{align-self:flex-start;font-size:.6875rem;color:var(--muted);line-height:1.2;margin:0 0 .25rem}
.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%}
.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}}
.sidebar .ad{margin:0}
.entry .ad{margin:1.75rem auto}
.stack>.ad{margin:.25rem auto}
.ad-anchor{display:none}
@media (max-width:900px){
  .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 .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}
}

/* Konten & semantik */
.article__head{margin-bottom:.25rem}
.article__meta{margin:0 0 1.25rem}
.article__foot{margin-top:1.5rem}
.tags{margin:1.5rem 0 0}
.entry iframe[src*="youtube"],.entry iframe[src*="youtu.be"],.entry iframe[src*="vimeo"]{width:100%;height:auto;aspect-ratio:16/9}
.entry figure{margin:1.25rem 0}
.entry pre{overflow-x:auto;padding:1rem;background:var(--tint);border-radius:var(--r-s)}

/* ===== Responsif v1.1 ===== */
.nav-backdrop{position:fixed;inset:0;background:rgba(3,14,12,.55);z-index:55}
.nav-backdrop[hidden]{display:none}
@media (max-width:900px){
  .site-header .wrap{min-height:60px;gap:.5rem}
  .nav{z-index:70;height:100vh;height:100dvh}
  .icon-btn{width:44px;height:44px}
  .header-actions{gap:.35rem}
  .brand__link{font-size:1.3rem}
  .custom-logo{max-height:38px}
  .reader__bar{position:static}
  .reader__bar .grp{flex-wrap:wrap}
  .reader__bar select{max-width:100%;flex:1}
  .surah-head{padding:1.25rem .75rem}
  .section-title h2{font-size:1.3rem}
  html{scroll-padding-top:72px}
}
@media (max-width:640px){
  .topbar .wrap{min-height:34px}
  .topbar__dates{gap:.2rem .9rem;font-size:.78rem}
  .hero{margin-top:1rem;gap:1rem}
  .lead{min-height:320px;border-radius:var(--r-m)}
  .prayer-card{border-radius:var(--r-m);padding:1.1rem}
  .tile{padding:1rem}
  .tiles{gap:.7rem}
  .grid-4{gap:.9rem}
  .article{border-radius:var(--r-m);padding:1rem}
  .page-head{padding:1.25rem 0 .75rem}
  .app-head{padding:1.25rem 0 .9rem}
  .ayah{padding:.85rem .9rem 1rem}
  .ayah__ar{font-size:min(var(--ar-size),2.4rem);line-height:2.2}
  .share a,.share button{padding:.5rem .9rem}
  .month{padding:.7rem}
  .month__bar{flex-wrap:wrap;justify-content:center}
  .month__bar h2{order:-1;width:100%;text-align:center;font-size:1.1rem}
  .month__bar .btn{flex:1;justify-content:center}
  .crumbs [aria-current]{max-width:18ch}
  .navigation.pagination .page-numbers:not(.current):not(.prev):not(.next){display:none}
  .navigation.pagination .page-numbers.current{min-width:44px}
  .navigation.pagination .prev,.navigation.pagination .next{flex:1;max-width:11rem}
  .footer-bottom{flex-direction:column}
  .mu-item{padding:.7rem}
  .player .wrap{gap:.5rem 1rem}
  .player__btns button{width:44px;height:44px}
  .jadwal__top{gap:1rem}
}
@media (max-width:380px){
  .brand__link{font-size:1.15rem}
  .brand__mark{width:30px;height:30px}
  .header-actions .icon-btn:nth-child(2){display:none}
}

/* Logo v1.2: terang/gelap di 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:#F3F7F5;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:#F3F7F5;padding:.3rem .65rem;border-radius:10px}
@media (max-width:900px){.logo{height:38px}}
@media (max-width:380px){.logo{height:32px}}