/*
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.8.9
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
*/

/* =====================================================================
   DAFTAR ISI
   1. Token (variabel warna, font, ukuran)
   2. Dasar
   3. Tombol & elemen kecil
   4. Topbar, Header, Logo
   5. Hero
   6. Kartu jadwal salat (widget)
   7. Kartu berita
   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:#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;
}

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

/* ---------- 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:#F3F7F5;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:#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}

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

/* ---------- 6. Kartu jadwal salat (widget) ---------- */
.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;min-height:1.4em}
.prayer-card select,.widget .prayer-card select{width:auto;min-width:130px;max-width:150px;padding:.4rem .6rem;border-radius:var(--r-s);border:1px solid rgba(255,255,255,.25);background-color:rgba(0,0,0,.28);color:#fff;font-size:.875rem;color-scheme:dark}
.prayer-card select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.prayer-card select option{background:#0F4A44;color:#fff}
.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;align-content:start;min-height:16rem}
.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}

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

/* ---------- 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}
/* Slot di atas lipatan (bawah header, atas artikel): ruangnya dipesan sejak awal agar halaman tidak melonjak saat iklan terisi.
   Tinggi mengikuti pengaturan "tinggi minimum" di menu Iklan. Bila iklan akhirnya kosong, slot tetap menyusut seperti biasa. */
.ad--atf.ad--pending,.ad--atf.ad--filled{min-height:var(--ad-min,100px)}
.ad--atf.ad--pending{margin:1.25rem auto}

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

/* ---------- 12. Halaman aplikasi: Qur'an, Murottal, Jadwal Salat ---------- */
.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}

/* Qur'an */
.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}
.reader__pick{display:none}
.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}
.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)}
a.mu-item{color:var(--ink);text-decoration:none}
a.mu-item:hover{text-decoration:none}
.reader__intro{padding:.25rem 0 1rem}
.reader__intro h2{margin:0 0 .35rem;font-size:1.35rem}
.reader__intro p{margin:0 0 1rem;color:var(--muted)}
.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: tabel sebulan */
.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}

/* Jadwal salat: widget full width (halaman jadwal-salat.php saja) */
.jadwal__top{margin-bottom:1.5rem}
.jadwal__top .prayer-card{width:100%;max-width:none}

/* baris kontrol: provinsi | kota | lokasi saya | pilih jadwal
   (class .jadwal-controls ditambahkan oleh script di jadwal-salat.php) */
.jadwal__top .jadwal-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.jadwal__top .jadwal-controls > select{flex:1 1 200px;width:auto;max-width:none}
.jadwal__top .jadwal-controls > [data-geo]{flex:1 1 200px;justify-content:center;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.jadwal__top .jadwal-controls > [data-geo]:hover{background:rgba(255,255,255,.2)}
.jadwal__top .jadwal-controls > button:not([data-geo]){flex:0 0 auto}

/* jadwal 7 waktu dalam satu baris di desktop */
@media (min-width:720px){
  .jadwal__top .prayer-card__list{grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem;min-height:0}
  .jadwal__top .prayer-card__list li{flex-direction:column;align-items:center;gap:.2rem;text-align:center;padding:.7rem .4rem}
}

/* catatan + keterangan (dipindahkan script ke dalam widget, setelah baris Isya) */
.jadwal__info{display:grid;gap:.8rem;margin-top:1rem}
.jadwal__info .note{margin:0;font-size:.9rem;color:var(--muted)}
.jadwal__top .prayer-card .jadwal__info{margin-top:.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15)}
.jadwal__top .prayer-card .jadwal__info .note{color:var(--on-deep-2)}
.jadwal__top .prayer-card .jadwal__info .widget{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.15);color:#fff}
.jadwal__top .prayer-card .jadwal__info .widget__title{color:#fff}

/* ---------- 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}
body.has-player .to-top{bottom:120px}

/* ---------- 14. Share, Read progress, Halaman statis ---------- */
/* Social share */
.share{--share-bg:#f3f7f5;--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:#0f6b4f;--ip-green-dark:#0a4d39;--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:#0a4d39}
.ip-alert.err{background:#fdecec;border:1px solid #f4bcbc;color:#8a1f1f}

/* ---------- Al Qur'an: halaman utama mode grid (daftar lengkap 114 surat) ---------- */
.reader--grid{grid-template-columns:minmax(0,1fr)}
.reader--grid .reader__main{display:none}
.reader--grid .reader__nav{display:block;position:static;background:transparent;border:0;padding:0}
.reader--grid .reader__nav input[type=search]{max-width:420px}
.reader--grid .surah-list{max-height:none;overflow:visible;margin-top:1rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.reader--grid .surah-list a{height:100%;gap:.8rem;padding:.8rem .9rem;border-radius:var(--r-m);background:var(--card);border:1px solid var(--line)}
.reader--grid .surah-list a:hover{background:var(--card);border-color:var(--gold)}
.reader--grid .surah-list .num{width:42px;height:42px}
.reader--grid .surah-list .ar{font-size:1.3rem}
@media (max-width:900px){.reader--grid .surah-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.reader--grid .surah-list{grid-template-columns:minmax(0,1fr)}.reader--grid .reader__nav input[type=search]{max-width:none}}

.ayat-search{position:relative;margin:0 0 1rem}
.ayat-search input[type=search]{width:100%;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.ayat-search__list{position:absolute;left:0;right:0;top:calc(100% + .4rem);z-index:30;margin:0;padding:.4rem;max-height:min(60vh,420px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.ayat-search__list[hidden],.ayat-search__list li[hidden]{display:none}
.ayat-search__none{padding:.6rem}

/* ---------- 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}
  .mu-grid{grid-template-columns:repeat(2,minmax(0,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}
  /* Qur'an */
  .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{position:static}
  .reader__bar .grp{flex-wrap:wrap}
  .reader__bar select{max-width:100%;flex:1}
  .surah-head{padding:1.25rem .75rem}
  /* player */
  .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}
  /* 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}
  .prayer-card{border-radius:var(--r-m);padding:1.1rem}
  .prayer-card__next strong{font-size:2rem}
  .grid-4,.grid-3,.tiles,.mu-grid,.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}
  .app-head{padding:1.25rem 0 .9rem}
  .crumbs [aria-current]{max-width:18ch}
  .ayah{padding:.85rem .9rem 1rem}
  .ayah__ar{font-size:min(var(--ar-size),2.4rem);line-height:2.2}
  .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}
  .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}
  .mu-item{padding:.7rem}
  .player .wrap{gap:.5rem 1rem}
  .player__btns button{width:44px;height:44px}
  .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}

.app-dl{margin-top:20px}
.app-dl__title{margin:0 0 10px;font-size:13px;font-weight:600;opacity:.85}
.app-dl__list{display:flex;flex-wrap:wrap;gap:10px}
.app-dl__btn{display:inline-flex;align-items:center;gap:10px;min-width:150px;padding:8px 16px 8px 12px;
  border:1px solid rgba(255,255,255,.35);border-radius:10px;background:rgba(255,255,255,.06);
  color:#fff;text-decoration:none;line-height:1.15;
  transition:background .2s,border-color .2s,transform .2s}
.app-dl__btn:hover,.app-dl__btn:focus-visible{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-1px)}
.app-dl__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.app-dl__btn.is-soon{opacity:.6;cursor:default;pointer-events:none}
.app-dl__icon{flex:0 0 auto;width:24px;height:24px}
.app-dl__txt{display:flex;flex-direction:column}
.app-dl__txt small{font-size:10px;letter-spacing:.02em;opacity:.8}
.app-dl__txt strong{font-size:15px;font-weight:700}
@media (max-width:480px){.app-dl__btn{flex:1 1 100%}}
/* Tambahan Al Qur'an Digital: ayat, pilihan, grid tafsir, kisah. Sesuaikan warna dengan tema. */
.ayat-back{margin:1rem 0}
.ayah--single .ayah__tafsir{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,.1)}
.ayah--single .ayah__tafsir h2{font-size:1.05rem;margin:0 0 .5rem}
.ayah--single audio{width:100%;margin-top:.75rem}
.ayat-picker{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin:2rem 0}
.ayat-picker label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem}
.ayat-picker select{min-width:9rem;padding:.5rem;border:1px solid rgba(0,0,0,.25)}
.ayat-grid{margin:2rem 0}
.ayat-grid ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:.5rem;list-style:none;padding:0;margin:.75rem 0 0}
.ayat-grid a{display:block;text-align:center;padding:.5rem;border:1px solid rgba(0,0,0,.15);text-decoration:none}
.ayat-grid a:hover{background:rgba(0,0,0,.05)}
.surah-kisah{margin:2rem 0;line-height:1.8}
.surah-kisah h2{margin-bottom:.75rem}
.ayah__actions{align-items:center}
.ayah__tafsir-link{display:inline-flex;align-items:center;height:2.25rem;padding:0 .9rem;border:1px solid rgba(128,128,128,.4);border-radius:999px;font-size:.85rem;font-weight:600;text-decoration:none;white-space:nowrap}
.ayah__tafsir-link:hover{background:rgba(128,128,128,.15)}