/*
Theme Name: MEZZALA
Theme URI: https://mezzala.id
Author: MEZZALA
Author URI: https://mezzala.id
Description: Tema berita kustom MEZZALA - "Gerak Dinamis, Gagasan Kritis". Mereproduksi desain MEZZALA: header 4-lapis, News Depth 325, Laporan Paralel Nusantara, Cahaya Islam, dual-atmosphere ungu/neon, responsif mobile.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mezzala
Tags: news, magazine, blog, custom-colors, custom-menu, featured-images, sticky-post, threaded-comments, translation-ready
*/

/* ============================================================
   1. DESAIN INTI MEZZALA (disalin verbatim dari mezzala-final.html)
   ============================================================ */
:root{
  --bg:#FFFFFF; --bg-soft:#F8FAFC; --bg-alt:#F1F5F9; --card:#FFFFFF;
  --border:#E2E8F0; --border-soft:#EEF2F7;
  --text:#334155; --text-strong:#0F172A; --text-sec:#64748B; --text-muted:#94A3B8;
  --accent:#7C3AED; --accent-2:#4F46E5; --accent-soft:rgba(124,58,237,.08); --accent-line:rgba(124,58,237,.16);
  --utility:#060B16; --header:linear-gradient(135deg,#5B21B6 0%,#4338CA 100%);
  --hero:linear-gradient(150deg,#2D1B69 0%,#1E1B4B 48%,#0C0B2B 100%);
  --bar:linear-gradient(90deg,#7C3AED,#FF6B6B); --urgency:#F43F5E;
  --shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.04); --shadow-lift:0 8px 30px rgba(15,23,42,.12);
  --logo-num:#FCD34D; --islam:#0E9F6E; --progress-visible:1;
}
.dark{
  --bg:#0A0F1E; --bg-soft:#0F172A; --bg-alt:#0F172A; --card:#111827;
  --border:#1E293B; --border-soft:#172033;
  --text:#CBD5E1; --text-strong:#F8FAFC; --text-sec:#94A3B8; --text-muted:#64748B;
  --accent:#00D9A5; --accent-2:#22D3EE; --accent-soft:rgba(0,217,165,.08); --accent-line:rgba(0,217,165,.18);
  --utility:#04070F; --header:linear-gradient(135deg,#0A0F1E 0%,#0D1B3E 100%);
  --hero:linear-gradient(150deg,#0D1B3E 0%,#0A0F1E 50%,#12062B 100%);
  --bar:linear-gradient(90deg,#00D9A5,#FF6B6B); --urgency:#FF6B6B;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --shadow-lift:0 10px 34px rgba(0,0,0,.55);
  --logo-num:#00D9A5; --islam:#00D9A5; --progress-visible:0;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; overflow-x:clip; background:var(--bg); color:var(--text); font-family:"Inter",system-ui,sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;}
body,header,section,nav,footer,article,aside{transition:background-color .5s,border-color .4s,color .35s;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1280px; margin:0 auto; padding:0 20px;}
.display{font-family:"Playfair Display",Georgia,serif;}
.serif{font-family:"Lora",Georgia,serif;}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px;}

#progress-wrap{position:fixed; top:0; left:0; right:0; height:3px; z-index:400; pointer-events:none; opacity:var(--progress-visible); transition:opacity .4s;}
#progress{height:100%; width:0; background:var(--bar); transition:width .1s linear;}

/* UTILITY */
.utility{background:var(--utility); color:#94A3B8; font-size:12px;}
.utility-row{display:flex; align-items:center; justify-content:space-between; gap:12px; height:38px;}
.u-left{display:flex; align-items:center; gap:9px; overflow:hidden;}
.u-left .sep{opacity:.3;}
.u-date{color:#CBD5E1; font-weight:600; white-space:nowrap;}
.u-hijri{color:var(--logo-num); font-weight:600; white-space:nowrap;}
.dark .u-hijri{color:#00D9A5;}
.u-edisi{opacity:.75; white-space:nowrap;}
.u-right{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.u-right a{color:#94A3B8; transition:color .2s; white-space:nowrap;}
.u-right a:hover{color:#fff;}
.u-soc{display:flex; gap:6px;}
.u-soc a{width:24px; height:24px; border-radius:6px; display:grid; place-items:center; font-size:8.5px; font-weight:800; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);}
.u-login{background:rgba(0,217,165,.12); border:1px solid rgba(0,217,165,.26); color:#34D399; font-weight:700; padding:4px 13px; border-radius:7px;}

/* MASTHEAD */
.masthead{background:var(--header); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.masthead-row{display:flex; align-items:center; gap:18px; height:76px;}
.logo{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.logo-box{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-family:"Playfair Display",serif; font-weight:900; font-size:24px; color:#fff; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.3);}
.dark .logo-box{background:rgba(0,217,165,.14); border-color:rgba(0,217,165,.36); color:#00D9A5;}
.logo-name{font-family:"Playfair Display",serif; font-weight:900; font-size:29px; letter-spacing:.5px; color:#fff; line-height:1;}
.logo-tag{display:block; margin-top:4px; font-size:9px; letter-spacing:2.4px; text-transform:uppercase; color:rgba(255,255,255,.62); font-weight:800;}
.mast-spacer{flex:1;}
.search{flex-shrink:0; width:248px; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:9px 13px;}
.search input{flex:1; min-width:0; border:0; background:transparent; outline:none; font-size:12.5px; color:#fff;}
.search input::placeholder{color:rgba(255,255,255,.55);}
.header-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.toggle{display:flex; align-items:center; gap:7px; border-radius:22px; padding:4px 13px 4px 5px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);}
.dark .toggle{background:rgba(0,217,165,.1); border-color:rgba(0,217,165,.28);}
.toggle .orb{width:27px; height:27px; border-radius:50%; display:grid; place-items:center; font-size:13px; background:linear-gradient(135deg,#FEF9C3,#FCD34D);}
.dark .toggle .orb{background:linear-gradient(135deg,#0D1B3E,#12062B);}
.toggle .lbl{font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.92);}
.dark .toggle .lbl{color:#00D9A5;}
.btn-sub{border:0; border-radius:9px; padding:10px 18px; font-weight:800; font-size:12px; color:#fff; white-space:nowrap; background:linear-gradient(135deg,#F43F5E,#FB923C);}
.dark .btn-sub{background:linear-gradient(135deg,#00D9A5,#00B489); color:#04130E;}
.menu-btn{display:none; width:40px; height:40px; border-radius:10px; place-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:18px; position:relative; z-index:300; cursor:pointer;}

/* SLOGAN */
.slogan-strip{background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.slogan-row{display:flex; align-items:center; justify-content:center; height:42px;}
.slogan-row .txt{font-family:"Playfair Display",serif; font-style:italic; font-size:15px; color:var(--text-strong);}
.slogan-row .txt b{color:var(--accent); font-style:normal; margin:0 7px; font-size:9px; vertical-align:middle;}

/* NAV (dengan dropdown sub-kanal) */
.mainnav{position:sticky; top:0; z-index:90; background:var(--card); border-bottom:1px solid var(--border); box-shadow:var(--shadow);}
.nav-row{display:flex; align-items:center;}
.nav-row::-webkit-scrollbar{display:none;}
.nav-logo{flex-shrink:0; font-family:"Playfair Display",serif; font-weight:900; font-size:15px; color:var(--text-strong); height:46px; display:flex; align-items:center; padding-right:13px; margin-right:7px; border-right:1px solid var(--border);}
.nav-item{position:relative; flex-shrink:0;}
.nav-top{background:none; border:0; padding:13px 11px; white-space:nowrap; font-size:12px; font-weight:500; color:var(--text-sec); border-bottom:2.5px solid transparent; display:inline-flex; align-items:center; gap:5px;}
.nav-top .car{font-size:7px; opacity:.55; transition:transform .2s;}
.nav-item.on .nav-top{font-weight:800; color:var(--accent); border-bottom-color:var(--accent);}
.nav-top.islam{color:var(--islam);}
.nav-top.sig{color:var(--text-muted); font-style:italic;}
.dropdown{position:absolute; top:100%; left:0; min-width:198px; background:var(--card); border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:0 0 11px 11px; box-shadow:var(--shadow-lift); padding:6px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s,transform .18s,visibility .18s; z-index:120;}
.nav-item.islam .dropdown{border-top-color:var(--islam);}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown,.nav-item.open .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.nav-item:hover .nav-top .car,.nav-item.open .nav-top .car{transform:rotate(180deg);}
.dropdown a{display:block; padding:9px 12px; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap;}
.dropdown a:hover{background:var(--accent-soft); color:var(--accent);}
.nav-item.islam .dropdown a:hover{background:rgba(14,159,110,.1); color:var(--islam);}
.nav-sep{flex-shrink:0; width:1px; height:20px; background:var(--border); margin:0 5px;}

#mobile-menu{display:none; background:var(--card); border-bottom:1px solid var(--border); max-height:72vh; overflow-y:auto; position:relative; z-index:290;}
#mobile-menu.open{display:block;}
.mm-inner{padding:6px 14px 16px;}
.mm-group{border-bottom:1px solid var(--border-soft);}
.mm-parent{width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:0; padding:13px 6px; font-size:14px; font-weight:800; color:var(--text-strong); cursor:pointer; touch-action:manipulation;}
.mm-parent.islam{color:var(--islam);}
.mm-parent .car{font-size:10px; color:var(--text-muted); transition:transform .2s;}
.mm-group.open .mm-parent .car{transform:rotate(180deg);}
.mm-subs{display:none; padding:0 6px 12px; flex-wrap:wrap; gap:6px;}
.mm-group.open .mm-subs{display:flex;}
.mm-subs a{padding:7px 11px; border-radius:8px; font-size:12px; font-weight:600; color:var(--text); background:var(--bg-alt); border:1px solid var(--border-soft);}

/* BREAKING */
.breaking{background:var(--urgency); padding:8px 0;}
.dark .breaking{background:rgba(255,107,107,.1); border-top:1px solid rgba(255,107,107,.16); border-bottom:1px solid rgba(255,107,107,.16);}
.breaking-row{display:flex; align-items:center; gap:9px;}
.brk-badge{flex-shrink:0; display:inline-flex; align-items:center; gap:5px; color:#fff; background:rgba(0,0,0,.16); padding:2px 9px; border-radius:4px; font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase;}
.dark .brk-badge{background:#FF6B6B;}
.brk-badge .ping{position:relative; width:7px; height:7px;}
.brk-badge .ping i{position:absolute; inset:0; border-radius:50%; background:#fff;}
.brk-badge .ping i:first-child{animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite;}
.brk-text{flex:1; min-width:0; color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .3s;}
.dark .brk-text{color:#FCA5A5;}
.brk-time{flex-shrink:0; font-size:10px; color:rgba(255,255,255,.65); white-space:nowrap;}

/* HERO */
.hero{background:var(--hero); padding:30px 0 28px; position:relative; overflow:hidden;}
.hero .glow{position:absolute; top:-70px; right:6%; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle,rgba(124,58,237,.28),transparent 70%); pointer-events:none;}
.dark .hero .glow{background:radial-gradient(circle,rgba(0,217,165,.18),transparent 70%);}
.hero-eyebrow{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:18px; position:relative; z-index:1;}
.hero-eyebrow .pill{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:22px; padding:5px 14px;}
.hero-eyebrow .pill i{width:7px; height:7px; border-radius:50%; background:#00D9A5; box-shadow:0 0 9px #00D9A5;}
.hero-eyebrow .pill span{font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:#fff;}
.hero-eyebrow .note{font-size:11px; font-weight:600; color:rgba(255,255,255,.5);}
.hero-grid{display:grid; grid-template-columns:2fr 1fr; gap:14px; position:relative; z-index:1;}
.hero-main{position:relative; border-radius:16px; overflow:hidden; min-height:330px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid rgba(255,255,255,.1);}
.hero-main .media{position:absolute; inset:0; background:linear-gradient(135deg,#EF4444 0%,#7C3AED 100%); opacity:.92;}
.hero-main .media::after{content:"🏛️"; position:absolute; right:-10px; top:-6px; font-size:200px; opacity:.12; transform:rotate(-8deg);}
.hero-main .scrim{position:absolute; inset:0; background:linear-gradient(to top,rgba(5,8,18,.92),rgba(5,8,18,.35) 55%,transparent);}
.hero-main .top-tags{position:absolute; top:14px; left:14px; right:14px; z-index:2; display:flex; gap:8px; flex-wrap:wrap;}
.hero-main .body{position:relative; z-index:2; padding:22px;}
.hero-main h1{margin:0 0 9px; font-size:26px; line-height:1.22; font-weight:900; color:#fff;}
.hero-main p{margin:0 0 14px; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.7); max-width:46ch;}
.hero-meta{display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:11.5px; color:rgba(255,255,255,.62); font-weight:600;}
.hero-side{display:flex; flex-direction:column; gap:11px;}

/* JADWAL SHALAT */
.shalat{border-radius:14px; padding:15px; background:linear-gradient(135deg,#064E3B,#065F46); border:1px solid rgba(16,185,129,.3); color:#fff;}
.shalat-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px;}
.shalat-head .t{display:flex; align-items:center; gap:7px; font-weight:800; font-size:13px;}
.shalat-head .loc{font-size:10px; color:rgba(255,255,255,.7);}
.shalat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:5px;}
.shalat-grid .s{text-align:center; border-radius:8px; padding:8px 3px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);}
.shalat-grid .s.next{background:rgba(52,211,153,.22); border-color:rgba(52,211,153,.5);}
.shalat-grid .s .nm{font-size:9px; color:rgba(255,255,255,.7); margin-bottom:3px;}
.shalat-grid .s .tm{font-size:12px; font-weight:800; color:#fff;}
.shalat-grid .s.next .tm{color:#6EE7B7;}
.shalat-foot{margin-top:9px; font-size:9.5px; color:rgba(255,255,255,.55); text-align:center;}

/* BADGES */
.badge{display:inline-block; color:#fff; font-size:10px; font-weight:800; padding:2px 8px; border-radius:3px; letter-spacing:.4px; text-transform:uppercase; line-height:1.6;}
.badge.sm{font-size:9px; padding:1px 6px;}
.tipe{font-size:8.5px; font-weight:800; padding:2px 7px; border-radius:4px; letter-spacing:.5px; text-transform:uppercase;}
.tipe.kilat{background:rgba(244,63,94,.14); color:#F43F5E;}
.tipe.depth{background:var(--accent-soft); color:var(--accent);}
.tipe.paralel{background:rgba(14,159,110,.14); color:var(--islam);}
.editor-pick{background:rgba(255,255,255,.14); color:#fff; font-size:9px; font-weight:700; padding:2px 8px; border-radius:3px;}
.verify{display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; color:#34D399;}
.verify i{width:6px; height:6px; border-radius:50%; background:#34D399;}
.lock{display:inline-flex; align-items:center; gap:4px; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-size:10px; font-weight:700; padding:2px 9px; border-radius:12px;}
.minit{background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line); font-size:9px; font-weight:700; padding:1px 8px; border-radius:11px;}

/* SECTION HEAD */
.shead{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:16px;}
.shead .left{display:flex; align-items:center; gap:10px;}
.shead .acc{width:3px; height:21px; border-radius:2px; background:var(--bar); flex-shrink:0; margin-top:2px;}
.shead .ttl{font-weight:800; font-size:16px; color:var(--text-strong); line-height:1.2;}
.shead .sub{font-size:10.5px; color:var(--text-sec); margin-top:2px;}
.shead .more{background:none; border:1px solid var(--accent-line); border-radius:7px; color:var(--accent); font-size:11px; font-weight:600; padding:4px 11px; flex-shrink:0;}

/* NEWS DEPTH (325 OS) */
.depth{position:relative; overflow:hidden; border-radius:18px; padding:20px; margin:24px 0; background:var(--card); border:1px solid var(--border);}
.dark .depth{background:linear-gradient(135deg,#111827,#0A0F1E); border-color:rgba(0,217,165,.16);}
.depth .glow{position:absolute; top:-50px; left:-50px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,var(--accent-soft),transparent 70%);}
.depth-eyebrow{display:flex; align-items:center; gap:8px; margin-bottom:5px;}
.depth-eyebrow .acc{width:3px; height:18px; border-radius:2px; background:var(--bar);}
.depth-eyebrow span{font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent);}
.depth h2{margin:0; font-size:18px; font-weight:800; color:var(--text-strong); padding-left:11px;}
.depth .d-sub{font-size:11px; color:var(--text-sec); padding-left:11px; margin:2px 0 14px;}
/* 325 chips */
.os325{display:flex; gap:8px; flex-wrap:wrap; padding-left:11px; margin-bottom:16px;}
.os325 .c{font-size:9.5px; font-weight:700; padding:4px 10px; border-radius:20px; background:var(--bg-alt); border:1px solid var(--border); color:var(--text-sec);}
.os325 .c b{color:var(--accent);}
.depth-track{display:flex; gap:4px; margin:0 0 14px; position:relative; z-index:1;}
.depth-track i{flex:1; height:4px; border-radius:2px; background:var(--border); transition:background .35s;}
.depth-track i.fill{background:var(--accent);}
.depth-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;}
.depth-tabs button{display:inline-flex; align-items:center; gap:6px; border-radius:10px; padding:8px 12px; font-size:11px; font-weight:600; background:var(--bg-alt); border:1px solid var(--border); color:var(--text-sec); transition:transform .18s,background .22s,color .22s;}
.depth-tabs button.on{background:var(--accent); color:#fff; font-weight:800; border-color:var(--accent); transform:translateY(-1px);}
.dark .depth-tabs button.on{color:#04130E;}
.depth-pane{display:none; animation:fade .35s;}
.depth-pane.show{display:block;}
.depth-pane .ph{display:flex; align-items:center; gap:9px; margin-bottom:9px;}
.depth-pane .ph .em{font-size:22px;}
.depth-pane .ph .lbl{font-weight:800; font-size:14px; color:var(--text-strong);}
.depth-pane .ph .ds{font-size:10px; font-weight:600; color:var(--accent);}
.depth-pane p{margin:0; font-size:14px; line-height:1.75; color:var(--text);}
.depth-pane ul{margin:0; padding-left:18px; font-size:13px; line-height:1.8; color:var(--text);}
.depth-lock{position:relative;}
/* Gating premium dilakukan di server (functions.php). JANGAN pakai filter:blur sebagai gerbang —
   konten tetap terbaca via View Source. Lihat CLAUDE.md & mezzala_user_can_read_premium(). */
.depth-lock-over{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;}
.depth-lock-over .cta{background:linear-gradient(135deg,#7C3AED,#4F46E5); border:0; border-radius:8px; padding:7px 17px; color:#fff; font-weight:700; font-size:11px;}

/* 3 PERSPEKTIF strip */
.persp{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 0; padding-left:11px;}
.persp .p{border-radius:10px; padding:11px; background:var(--bg-soft); border:1px solid var(--border);}
.persp .p .h{display:flex; align-items:center; gap:6px; font-size:10px; font-weight:800; color:var(--text-strong); margin-bottom:4px;}
.persp .p .d{font-size:10.5px; color:var(--text-sec); line-height:1.5;}

/* LAYOUT */
.layout{display:grid; grid-template-columns:1fr 308px; gap:22px; align-items:start; padding-bottom:8px;}
.col-main{min-width:0;}
.col-side{display:flex; flex-direction:column; gap:14px; position:sticky; top:60px;}
.block{margin-bottom:22px;}

/* LATEST */
.news-list{display:flex; flex-direction:column;}
.news-item{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; padding:13px 4px; border-bottom:1px solid var(--border-soft);}
.news-item:last-child{border-bottom:0;}
.news-item h4{margin:6px 0 4px; font-size:14px; line-height:1.35; font-weight:700; color:var(--text-strong);}
.news-item .ni-meta{display:flex; gap:10px; flex-wrap:wrap; font-size:10.5px; color:var(--text-muted); align-items:center;}
.news-item .thumb{width:88px; height:64px; border-radius:9px; flex-shrink:0; align-self:center;}

/* CARDS GRID */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.card{border-radius:12px; overflow:hidden; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); min-width:0;}
.card .cmedia{height:118px; position:relative;}
.card .cbody{padding:13px;}
.card h3{margin:8px 0 6px; font-size:13.5px; line-height:1.35; font-weight:800; color:var(--text-strong);}
.card .cmeta{display:flex; justify-content:space-between; font-size:10px; color:var(--text-muted);}

/* ISLAM section */
.islam-wrap{border-radius:14px; padding:20px; border:1px solid rgba(14,159,110,.18); background:linear-gradient(135deg,rgba(6,95,70,.05),rgba(16,185,129,.03));}
.dark .islam-wrap{background:linear-gradient(135deg,rgba(6,95,70,.14),rgba(16,185,129,.06)); border-color:rgba(0,217,165,.18);}
.islam-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:11px;}
.islam-card{background:var(--card); border:1px solid var(--border); border-radius:11px; padding:14px; min-width:0;}
.islam-card .ic{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:16px; background:rgba(14,159,110,.12); margin-bottom:9px;}
.islam-card h4{margin:0 0 5px; font-size:13px; font-weight:800; color:var(--text-strong);}
.islam-card p{margin:0; font-size:11px; line-height:1.5; color:var(--text-sec);}

/* PARALLEL */
.parallel{border-radius:14px; padding:20px; border:1px solid rgba(124,58,237,.14); background:linear-gradient(135deg,rgba(91,21,182,.045),rgba(67,56,202,.03));}
.dark .parallel{background:linear-gradient(135deg,rgba(91,21,182,.1),rgba(67,56,202,.08)); border-color:rgba(139,92,246,.22);}
.par-issue{border-radius:8px; padding:9px 12px; margin:12px 0 13px; background:rgba(244,63,94,.06); border:1px solid rgba(244,63,94,.16);}
.par-issue span{font-size:11.5px; font-weight:700; color:#F43F5E;}
.par-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:11px;}
.par-card{background:var(--card); border:1px solid var(--border); border-radius:11px; padding:14px; box-shadow:var(--shadow); min-width:0;}
.par-card .reg{font-size:10px; font-weight:700; color:var(--accent); margin-bottom:6px;}
.par-card h4{margin:0 0 6px; font-size:12.5px; line-height:1.35; font-weight:800; color:var(--text-strong);}
.par-card p{margin:0 0 8px; font-size:11px; line-height:1.5; color:var(--text-sec);}
.par-concl{margin-top:13px; border-radius:10px; padding:12px 14px; background:var(--accent-soft); border:1px solid var(--accent-line);}
.par-concl b{color:var(--accent); font-size:11px;}
.par-concl p{margin:4px 0 0; font-size:12px; color:var(--text); line-height:1.55;}

/* WIDGET */
.widget{background:var(--card); border:1px solid var(--border); border-radius:13px; padding:16px; box-shadow:var(--shadow);}
.edition{display:flex; align-items:center; gap:11px; border-radius:12px; padding:14px 16px; cursor:pointer; background:linear-gradient(135deg,rgba(91,21,182,.05),rgba(67,56,202,.04)); border:1px solid var(--accent-line);}
.dark .edition{background:linear-gradient(135deg,rgba(0,217,165,.08),rgba(99,102,241,.06));}
.edition .orb{width:38px; height:38px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:18px; background:linear-gradient(135deg,#FEF9C3,#FCD34D);}
.dark .edition .orb{background:linear-gradient(135deg,#0D1B3E,#12062B);}
.edition .et b{display:block; font-size:12.5px; font-weight:800; color:var(--text-strong);}
.edition .et span{font-size:10px; color:var(--text-sec);}
.pop-item{display:flex; gap:10px; align-items:flex-start; padding:8px 4px;}
.pop-item .num{width:25px; height:25px; border-radius:7px; flex-shrink:0; display:grid; place-items:center; font-weight:900; font-size:11px; background:var(--bg-alt); color:var(--text-muted);}
.pop-item .num.one{background:linear-gradient(135deg,#7C3AED,#4F46E5); color:#fff;}
.pop-item h4{margin:4px 0 3px; font-size:12px; line-height:1.35; font-weight:700; color:var(--text-strong);}
.pop-item .pi-meta{font-size:9.5px; color:var(--text-muted);}
.premium{border-radius:13px; padding:17px; box-shadow:0 8px 24px rgba(91,21,182,.3); background:linear-gradient(135deg,#5B21B6,#4338CA);}
.premium .eb{font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:6px;}
.premium h3{margin:0 0 10px; font-size:15px; font-weight:800; color:#fff; line-height:1.3;}
.premium .ben{display:flex; flex-direction:column; gap:6px; margin-bottom:11px;}
.premium .ben div{font-size:11px; color:rgba(255,255,255,.78); display:flex; gap:7px;}
.premium .ben div b{color:#34D399;}
.premium .price{background:rgba(255,255,255,.08); border-radius:7px; padding:8px 11px; margin-bottom:12px; font-size:11px; color:rgba(255,255,255,.8);}
.premium .price b{color:#FCD34D; font-size:14px;}
.premium .btn{width:100%; border:0; border-radius:9px; padding:11px; font-weight:800; font-size:12.5px; color:#fff; background:linear-gradient(135deg,#F43F5E,#FB923C);}
.newsletter h3{margin:0 0 5px; font-size:14px; font-weight:800; color:var(--text-strong);}
.newsletter p{margin:0 0 12px; font-size:11.5px; line-height:1.5; color:var(--text-sec);}
.newsletter input{width:100%; border-radius:9px; padding:10px 13px; font-size:12.5px; outline:none; background:var(--bg-soft); border:1px solid var(--border); color:var(--text); margin-bottom:8px;}
.newsletter button{width:100%; border:0; border-radius:9px; padding:10px; font-weight:800; font-size:12px; color:#fff; background:var(--accent);}
.dark .newsletter button{color:#04130E;}

/* AD */
.ad{background:var(--bg-alt); border:1px dashed var(--border); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center; padding:14px; position:relative;}
.ad .tag{position:absolute; top:7px; right:9px; font-size:8px; font-weight:700; color:var(--text-muted);}
.ad .l1{font-size:11.5px; font-weight:700; color:var(--text-sec);}
.ad .l2{font-size:9px; color:var(--text-muted);}

/* FOOTER */
.footer{background:linear-gradient(135deg,#0A0F1E,#0D1B3E); padding:38px 0 22px;}
.footer .f-brand{text-align:center; margin-bottom:24px;}
.footer .fn{font-family:"Playfair Display",serif; font-weight:900; font-size:26px; color:#fff; letter-spacing:1px; margin-bottom:5px;}
.footer .f-tag{font-size:9.5px; letter-spacing:2.2px; text-transform:uppercase; color:rgba(255,255,255,.4); font-weight:700; margin-bottom:12px;}
.footer .f-slogan{font-family:"Playfair Display",serif; font-style:italic; font-size:13px; color:rgba(255,255,255,.55);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06); padding-top:15px; margin-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.footer-bottom .cp{color:rgba(255,255,255,.22); font-size:10px;}
.footer-bottom .os{background:rgba(0,217,165,.07); border:1px solid rgba(0,217,165,.15); color:#00D9A5; font-size:9px; font-weight:800; padding:4px 13px; border-radius:16px;}

/* BOTTOM NAV */
.bottom-nav{display:none; position:fixed; bottom:0; left:0; right:0; z-index:250; background:var(--card); border-top:1px solid var(--border); padding:7px 0;}
.bottom-nav .bn-row{display:flex; justify-content:space-around;}
.bottom-nav button{background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 8px;}
.bottom-nav button .ic{font-size:17px; opacity:.5;}
.bottom-nav button .tx{font-size:9px; font-weight:500; color:var(--text-muted);}
.bottom-nav button.on .ic{opacity:1;}
.bottom-nav button.on .tx{font-weight:800; color:var(--accent);}

@keyframes ping{75%,100%{transform:scale(2.2); opacity:0;}}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.lift{transition:transform .2s,box-shadow .2s;}
.lift:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift);}

@media (max-width:1023px){
  .layout{grid-template-columns:1fr;} .col-side{position:static;}
  .hero-grid{grid-template-columns:1fr;} .grid-3,.islam-grid,.par-grid,.persp{grid-template-columns:1fr;}
  .search{width:180px;}
  .nav-row{overflow-x:auto; scrollbar-width:none;} .dropdown{display:none;} .nav-top .car{display:none;}
}
@media (max-width:767px){
  body{padding-bottom:62px;}
  .utility{display:none;} .wrap{padding:0 13px;}
  .masthead-row{height:56px; gap:8px;}
  .logo{gap:9px;}
  .logo-box{width:36px; height:36px; font-size:17px;}
  .logo-name{font-size:20px; letter-spacing:.5px;}
  .logo-tag{font-size:8px; letter-spacing:1.6px;}
  .search{display:none;} .mast-spacer{display:none;} .nav-logo{display:none;}
  .header-actions{gap:6px;}
  .toggle{padding:4px 5px;} .toggle .lbl{display:none;}
  .btn-sub{padding:9px 11px; font-size:14px;} .btn-sub span{display:none;}
  .menu-btn{display:grid;}
  .slogan-row{height:36px;} .slogan-row .txt{font-size:11.5px;}
  .nav-top{padding:12px 10px; font-size:12px;}
  .hero{padding:22px 0 20px;}
  .hero-main{min-height:240px;} .hero-main h1{font-size:19px;} .hero-main p{display:none;}
  .shalat-grid{grid-template-columns:repeat(5,1fr); gap:4px;}
  .shalat-grid .s{padding:7px 2px;} .shalat-grid .s .tm{font-size:11px;}
  .depth{padding:16px;} .depth h2{font-size:16px;}
  .os325{padding-left:0;} .persp{padding-left:0;}
  .news-item h4,.card h3,.islam-card h4,.par-card h4,.pop-item h4{overflow-wrap:break-word;}
  .bottom-nav{display:block;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important;}}

/* ============================================================
   2. KELAS INTI WORDPRESS (wajib untuk tema)
   ============================================================ */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important;}
.screen-reader-text:focus{background:#fff;clip:auto;clip-path:none;color:#0F172A;display:block;font-size:14px;font-weight:700;height:auto;left:6px;line-height:normal;padding:12px 18px;text-decoration:none;top:6px;width:auto;z-index:100000;}
.alignleft{float:left;margin:.4em 1.4em 1em 0;}
.alignright{float:right;margin:.4em 0 1em 1.4em;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.wp-caption{max-width:100%;margin-bottom:1.2em;}
.wp-caption img{display:block;margin:0 auto;}
.wp-caption-text,.wp-element-caption{font-family:"Inter",sans-serif;font-size:12px;color:var(--text-muted);text-align:center;padding:7px 4px;}
.sticky{display:block;}
.bypostauthor{display:block;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.4em;}

/* Isi artikel (entry-content) - tipografi baca panjang */
.entry-content{font-family:"Lora",Georgia,serif;font-size:17px;line-height:1.85;color:var(--text);}
.entry-content p{margin:0 0 1.25em;}
.entry-content h2{font-family:"Playfair Display",serif;font-size:25px;color:var(--text-strong);margin:1.6em 0 .5em;}
.entry-content h3{font-family:"Playfair Display",serif;font-size:20px;color:var(--text-strong);margin:1.4em 0 .4em;}
.entry-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.entry-content blockquote{border-left:3px solid var(--accent);margin:1.4em 0;padding:.4em 0 .4em 18px;font-style:italic;color:var(--text-sec);}
.entry-content ul,.entry-content ol{margin:0 0 1.25em;padding-left:1.4em;}
.entry-content img{border-radius:10px;margin:1.2em 0;}
.entry-content figure{margin:1.4em 0;}

/* Navigasi paginasi */
.mz-pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:30px 0;}
.mz-pagination .page-numbers{font-family:"Inter",sans-serif;font-size:13px;font-weight:700;padding:9px 14px;border-radius:9px;background:var(--card);border:1px solid var(--border);color:var(--text);}
.mz-pagination .page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent);}
.dark .mz-pagination .page-numbers.current{color:#04130E;}

/* Komentar */
.mz-comments{margin-top:34px;}
.mz-comments .comment-list{list-style:none;padding:0;}
.mz-comments .comment-body{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px;}
.mz-comments .comment-author{font-family:"Inter",sans-serif;font-weight:700;color:var(--text-strong);}
.mz-comments .comment-meta{font-size:11px;color:var(--text-muted);}

/* Penyesuaian saat dipakai sebagai tema (bukan halaman tunggal) */
.archive-head{padding:26px 0 6px;}
.archive-head h1{font-family:"Playfair Display",serif;font-size:30px;color:var(--text-strong);margin:0;}
.archive-head p{font-size:13px;color:var(--text-sec);margin:6px 0 0;}

/* ============================================================
 * TEMA: KELAS TEMPLATE TAMBAHAN (single, arsip, footer, shalat)
 * ============================================================ */

/* --- Single article --- */
.single-article{padding:18px 0 6px;}
.article-head{margin-bottom:16px;}
.article-title{font-size:34px;line-height:1.18;color:var(--text-strong);margin:6px 0 12px;}
.article-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-family:"Inter",sans-serif;font-size:12px;color:var(--text-sec);padding-bottom:14px;border-bottom:1px solid var(--border);}
.article-meta .verify{display:inline-flex;align-items:center;gap:5px;color:#10B981;font-weight:700;}
.article-meta .verify i{width:7px;height:7px;border-radius:50%;background:#10B981;display:inline-block;}
.article-meta .minit{color:var(--accent);font-weight:700;}
.article-hero{margin:18px 0;border-radius:14px;overflow:hidden;}
.article-hero img{width:100%;height:auto;display:block;}
.article-hero figcaption{font-family:"Inter",sans-serif;font-size:11px;color:var(--text-muted);padding:8px 4px 0;}
.article-tags{margin:20px 0;font-family:"Inter",sans-serif;font-size:12px;color:var(--text-sec);}
.article-tags a{display:inline-block;background:var(--bg-alt);border:1px solid var(--border);border-radius:13px;padding:3px 11px;margin:3px 5px 3px 0;color:var(--accent);}
.article-tags .tg-label{font-weight:700;color:var(--text-strong);}
.page-links{margin:18px 0;font-family:"Inter",sans-serif;font-weight:700;color:var(--accent);}

/* --- Share --- */
.article-share{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:22px 0;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.article-share .sh-label{font-family:"Inter",sans-serif;font-size:12px;font-weight:800;color:var(--text-strong);}
.article-share a{font-family:"Inter",sans-serif;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:9px;padding:6px 13px;}
.article-share a:hover{background:var(--accent);color:#fff;}

/* --- Author box --- */
.author-box{display:flex;gap:14px;align-items:flex-start;background:var(--bg-soft);border:1px solid var(--border);border-radius:14px;padding:16px;margin:22px 0;}
.author-box .ab-avatar img{border-radius:50%;width:56px;height:56px;}
.author-box .ab-name{font-family:"Inter",sans-serif;font-weight:800;font-size:14px;color:var(--text-strong);margin-bottom:4px;}
.author-box .ab-bio{font-family:"Lora",serif;font-size:13.5px;color:var(--text-sec);line-height:1.6;}

/* --- Arsip: grid kartu --- */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:18px 0 26px;}
.acc-line{width:42px;height:4px;border-radius:3px;background:var(--accent);margin-bottom:12px;}
.chan-eyebrow{font-family:"Inter",sans-serif;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:5px;}
.archive-desc{font-family:"Lora",serif;font-size:14px;color:var(--text-sec);margin-top:8px;max-width:640px;}
.card-ex{font-family:"Lora",serif;font-size:13px;color:var(--text-sec);line-height:1.6;margin:6px 0 0;}
.no-posts{padding:30px 0;color:var(--text-sec);}
.search-inline{margin-top:16px;max-width:420px;}
.search-inline button{font-family:"Inter",sans-serif;font-weight:700;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:0 14px;cursor:pointer;}

/* --- Footer kolom & menu --- */
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:8px 0 26px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:20px;}
.footer .f-col-title{font-family:"Inter",sans-serif;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 10px;}
.footer .f-col a{color:rgba(255,255,255,.6);font-size:13px;}
.footer .f-col a:hover{color:#fff;}
.f-menu{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:16px 0;}
.f-menu a{color:rgba(255,255,255,.6);font-family:"Inter",sans-serif;font-size:12px;}
.f-menu a:hover{color:#fff;}

/* --- Jadwal Shalat ---
   Gaya sel memakai .shalat-grid .s / .nm / .tm (lihat baris ~172, sesuai prototype, sorot hijau).
   Blok .sh-cell lama dihapus karena menduplikasi komponen dengan warna sorot berbeda (emas). */

@media (max-width:782px){
  .article-title{font-size:26px;}
  .footer-cols{grid-template-columns:repeat(2,1fr);}
  .grid-cards{grid-template-columns:1fr;}
}