/* ============ LAPISAN TAMPILAN MODERN ============
   Dimuat sesudah app.css. Memberi warna per menu, tab satu baris berikon,
   tombol bergradasi, kartu dan chip yang hidup. Variabel --w = warna menu aktif. */
:root{
  --w:var(--emerald);
  --g-emerald:linear-gradient(135deg,#0b6b4a,#15956a);
  --g-gold:linear-gradient(135deg,#b8892b,#e0b85a);
  --bayang-w:0 10px 24px -12px color-mix(in srgb,var(--w) 55%,transparent);
}
.mi{width:18px;height:18px;flex:0 0 auto;vertical-align:-3px}
.mi-panah{margin-left:auto;color:var(--ink-soft);transition:transform .15s}

/* ---- sidebar & tabbar: ikon berwarna per menu ---- */
.rail-item{display:flex;align-items:center;gap:10px}
.rail-item svg{width:18px;height:18px;color:var(--w,var(--emerald));transition:transform .18s}
.rail-item:hover svg{transform:scale(1.12)}
.rail-item.is-on svg{color:inherit}
.tabbar .tab svg{color:var(--w,var(--emerald))}
.tabbar .tab.is-on{color:var(--w,var(--emerald))}
.lain-item .li-ikon{background:color-mix(in srgb,var(--w,var(--emerald)) 14%,transparent);color:var(--w,var(--emerald));border-radius:12px}

/* ---- tab sub-menu: satu baris, bisa digeser, berikon ---- */
.seg{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none;gap:4px;padding:5px;border-radius:999px;background:var(--surface-2);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.seg::-webkit-scrollbar{display:none}
.seg-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;scroll-snap-align:start;padding:9px 16px;border-radius:999px;color:var(--ink-soft);transition:background .16s,color .16s,transform .1s}
.seg-item .mi{width:17px;height:17px;opacity:.75}
.seg-item:hover{color:var(--w)}
.seg-item.is-on{background:color-mix(in srgb,var(--w) 72%,#000);color:#fff;box-shadow:var(--bayang-w)}
.seg-item.is-on .mi{opacity:1}
.seg-item:active{transform:scale(.97)}
.seg-item:focus-visible{outline:2px solid var(--w);outline-offset:2px}
@media (min-width:900px){.seg{display:inline-flex}}
:root[data-theme="dark"] .seg-item.is-on{color:#07201a;background:color-mix(in srgb,var(--w) 55%,#fff)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg-item.is-on{color:#07201a;background:color-mix(in srgb,var(--w) 55%,#fff)}}

/* ---- tombol ---- */
.btn{gap:8px;transition:transform .12s,box-shadow .16s,filter .16s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--g-emerald);border-color:transparent;box-shadow:0 8px 20px -10px rgba(5,89,59,.6)}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 12px 26px -10px rgba(5,89,59,.7)}
.btn-ghost{background:var(--surface);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:var(--emerald-soft)}
.link-btn{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:2px 6px;margin-left:-6px;transition:background .15s}
.link-btn:hover{background:var(--emerald-soft)}
.chip{display:inline-flex;align-items:center;gap:6px;transition:all .16s}
.chip.is-on{background:var(--emerald);border-color:var(--emerald);color:#fff;box-shadow:0 6px 16px -10px rgba(5,89,59,.7)}
.chip:not(.is-on):hover{background:var(--emerald-soft)}

/* ---- kartu umum ---- */
.card,.quick button,.tema-card,.kajian-card,.howto li,.hd-kartu,.hm-kartu,.nw-kartu,.paket-card,.kitab-card,.surah-item,.pk-kartu{transition:transform .16s,box-shadow .16s,border-color .16s}
.quick button:hover,.tema-card:hover,.kajian-card:hover,.hd-kartu:hover,.hm-kartu:hover,.paket-card:hover,.kitab-card:hover,.pk-kartu:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.howto li::before{background:var(--g-gold);color:#fff}
.block-head h2{display:flex;align-items:center;gap:8px}
.block-head h2::before{content:"";width:6px;height:22px;border-radius:3px;background:var(--g-emerald)}

/* ---- kepala halaman diberi aksen warna menu ---- */
.view .page-head{position:relative;padding-left:18px}
.view .page-head::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:5px;border-radius:4px;background:var(--w)}
#view-quran{--w:#0f7a55}#view-tafsir{--w:#3f6fb5}#view-hadis{--w:#c2702b}#view-nahwu{--w:#8a4fa3}#view-ibadah{--w:#2a8ca3}#view-main{--w:#d9486e}
#view-tanya{--w:#5b8f3a}#view-kajian{--w:#b58a1b}#view-kitab{--w:#9a6238}#view-rangkuman{--w:#6a4fc9}#view-jurusan{--w:#0b6b8f}

/* ---- Beranda: pintu cepat & lanjutkan ---- */
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pc{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;position:relative;overflow:hidden;transition:transform .16s,box-shadow .16s,border-color .16s}
.pc::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:color-mix(in srgb,var(--w) 10%,transparent);transition:transform .2s}
.pc:hover{transform:translateY(-2px);border-color:var(--w);box-shadow:var(--bayang-w)}
.pc:hover::after{transform:scale(1.4)}
.pc:focus-visible{outline:2px solid var(--w);outline-offset:2px}
.pc-ik{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--w) 14%,transparent);color:var(--w);margin-bottom:6px;position:relative;z-index:1}
.pc-ik .mi{width:22px;height:22px}
.pc b{font-size:15px;position:relative;z-index:1}
.pc small{font-size:12.5px;color:var(--ink-soft);line-height:1.4;position:relative;z-index:1}
.lanjut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:10px}
.lanjut-grid button{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;transition:transform .16s,box-shadow .16s}
.lanjut-grid button:hover{transform:translateY(-2px);box-shadow:var(--bayang-w);border-color:var(--w)}
.lanjut-grid button:hover .mi-panah{transform:translateX(3px);color:var(--w)}
.lanjut-grid .pc-ik{margin:0;width:40px;height:40px}
.lanjut-grid b{display:block;font-size:14.5px}
.lanjut-grid small{color:var(--ink-soft);font-size:12.5px}

/* ---- hero: sedikit lebih hidup ---- */
.hero{background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--emerald-soft) 60%,var(--surface)))}
.hero-stat div{padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--emerald) 7%,transparent)}
.hero-stat b{color:var(--emerald)}

/* ---- mode atlas / saklar lain yang masih memakai gaya lama ---- */
.ha-mode button,.ha-navb{display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.ha-mode button.is-on,.ha-navb.is-on{background:var(--w);color:#fff;box-shadow:var(--bayang-w)}
.ha-navb span{background:color-mix(in srgb,var(--w) 15%,transparent);color:var(--w)}
.ha-navb.is-on span{background:#fff;color:var(--w)}

/* ---- kartu daftar hadis / tema: garis warna kiri ---- */
.hd-kartu,.hm-kartu{border-left:4px solid var(--w)}
.hd-kel{color:var(--w)}

/* ---- isian pencarian ---- */
.search{transition:border-color .15s,box-shadow .15s}
.search:focus{border-color:var(--w);box-shadow:0 0 0 4px color-mix(in srgb,var(--w) 15%,transparent);outline:0}

/* ---- muat lagi ---- */
.muat-lagi{display:flex;justify-content:center;margin:16px 0}
.muat-lagi .btn{min-width:200px;justify-content:center}

/* ---- jawaban Tanya ---- */
.jw-kartu{border:1px solid var(--line);border-left:4px solid var(--w);border-radius:var(--r-md);padding:14px 16px;margin:10px 0;background:var(--surface);position:relative}
.jw-kartu .jw-sumber{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--w);margin-bottom:6px}
.jw-aksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.jw-aksi .btn{padding:6px 12px;font-size:13px}

@media (max-width:600px){
  .pc-grid{grid-template-columns:repeat(2,1fr)}
  .pc{padding:12px}
  .pc-ik{width:38px;height:38px}
  .view .page-head{padding-left:14px}
}
@media (prefers-reduced-motion:reduce){.pc,.pc::after,.seg-item,.btn,.lanjut-grid button,.rail-item svg{transition:none!important}}
/* satu baris yang bisa digeser juga di layar sempit (menimpa aturan bungkus lama) */
@media (max-width:760px){
  .seg{flex-wrap:nowrap;border-radius:999px;padding:5px;gap:4px;position:relative}
  .seg-item{flex:0 0 auto}
  .seg-item.is-on{background:var(--w);box-shadow:var(--bayang-w)}
}

/* ================= Beranda ala usul.ai (1 Nov 2026) =================
   Pita zamrud dengan satu kotak cari, lalu rak ubin persegi berpola bintang delapan. */
:root{
  --bc-band:#05593B; --bc-band-ink:#FFFFFF; --bc-band-soft:#CFE6DA;
  --bc-panel:#FFFFFF; --bc-kotak:#EEF3EF; --bc-kotak-ink:#101C16; --bc-kotak-soft:#56655C; --bc-kirim:#05593B; --bc-kirim-ink:#FFFFFF;
  --bc-chip:rgba(255,255,255,.12); --bc-chip-line:rgba(255,255,255,.30);
  --bc-bayang:0 18px 40px -18px rgba(3,40,26,.55), 0 2px 6px rgba(3,40,26,.12);
  --ubin-scrim:linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0) 62%);
  --ubin-pola:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.2' stroke-width='1.2'%3E%3Cpath d='M16 16h24v24H16z'/%3E%3Cpath d='M28 11l17 17-17 17-17-17z'/%3E%3Cpath d='M28 0v11M28 45v11M0 28h11M45 28h11'/%3E%3Cpath d='M0 6l6-6M50 0l6 6M56 50l-6 6M6 56l-6-6'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bc-band:#0A5C3F; --bc-band-ink:#FFFFFF; --bc-band-soft:#CFE9DC; --bc-panel:#0E3324; --bc-kotak:#15402F; --bc-kotak-ink:#EAF4EE; --bc-kotak-soft:#A9C9B8; --bc-kirim:#EAF6EF; --bc-kirim-ink:#06492F; --bc-bayang:0 18px 40px -18px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.3); }
}
:root[data-theme="dark"]{ --bc-band:#0A5C3F; --bc-band-ink:#FFFFFF; --bc-band-soft:#CFE9DC; --bc-panel:#0E3324; --bc-kotak:#15402F; --bc-kotak-ink:#EAF4EE; --bc-kotak-soft:#A9C9B8; --bc-kirim:#EAF6EF; --bc-kirim-ink:#06492F; --bc-bayang:0 18px 40px -18px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.3); }

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.bc{position:relative;border-radius:var(--r-lg);background:var(--bc-band);color:var(--bc-band-ink);
  padding:clamp(28px,5vw,52px) clamp(18px,4vw,48px) clamp(26px,4vw,40px);text-align:center}
.bc-bis{font-family:var(--font-naskah);font-size:clamp(20px,3vw,26px);line-height:1.8;color:var(--bc-band-soft);margin:0}
.bc-judul{font-size:clamp(28px,4.4vw,46px);font-weight:700;letter-spacing:-.025em;line-height:1.12;margin:6px auto 0;max-width:20ch;color:inherit;text-wrap:balance}
.bc-sub{margin:12px auto 0;max-width:58ch;font-size:clamp(14.5px,1.6vw,16.5px);line-height:1.6;color:var(--bc-band-soft);text-wrap:pretty}
.bc-panel{position:relative;max-width:740px;margin:26px auto 0;text-align:left;background:var(--surface);color:var(--ink);
  border-radius:14px;padding:10px;box-shadow:var(--bc-bayang)}
.bc-cakupan{display:flex;gap:4px;padding:0 0 8px;overflow-x:auto;scrollbar-width:none}
.bc-cakupan::-webkit-scrollbar{display:none}
.bc-cakupan button{flex:none;font:inherit;font-size:13.5px;font-weight:600;padding:7px 13px;min-height:36px;border-radius:999px;border:0;background:none;color:var(--ink-soft);cursor:pointer;transition:background-color .16s,color .16s}
.bc-cakupan button:hover{color:var(--ink);background:var(--surface-2)}
.bc-cakupan button.is-on{background:var(--emerald-soft);color:var(--emerald-ink)}
.bc-baris{display:flex;gap:8px;align-items:stretch}
.bc-kotak{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:10px;background:var(--surface-2);color:var(--ink-soft);border:1px solid transparent;transition:border-color .16s,background-color .16s}
.bc-kotak:focus-within{border-color:var(--emerald);background:var(--surface)}
.bc-kotak svg{flex:none}
.bc-kotak input{flex:1;min-width:0;height:50px;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink);caret-color:var(--emerald)}
.bc-kotak input::placeholder{color:var(--ink-soft);opacity:1}
.bc-kotak input::-webkit-search-cancel-button{cursor:pointer}
.bc-kirim{flex:none;font:inherit;font-weight:700;font-size:15px;padding:0 22px;border:0;border-radius:10px;background:var(--emerald);color:var(--surface);cursor:pointer;transition:filter .16s,transform .16s}
.bc-kirim:hover{filter:brightness(1.12)}
.bc-kirim:active{transform:scale(.97)}
.bc-panel :focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.bc-kotak input:focus-visible{outline:0}

.bc-saran{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:25;max-height:min(420px,60vh);overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:var(--shadow-lg);
  clip-path:inset(0 0 100% 0 round 14px);opacity:0;transition:clip-path .32s cubic-bezier(.16,1,.3,1),opacity .2s cubic-bezier(.16,1,.3,1);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.bc-saran.is-buka{clip-path:inset(0 0 0 0 round 14px);opacity:1}
.bc-kel{margin:8px 10px 4px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.bc-opsi{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;cursor:pointer;min-height:44px}
.bc-opsi:hover,.bc-opsi[aria-selected="true"]{background:var(--emerald-soft)}
.bc-oj{flex:1;min-width:0;display:flex;flex-direction:column}
.bc-oj b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-oj small{font-size:12.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-oar{flex:none;font-family:var(--font-naskah);font-size:20px;color:var(--emerald-ink)}
.bc-penuh{border-top:1px solid var(--line);margin-top:6px;border-radius:0 0 9px 9px}
.bc-penuh b{color:var(--emerald-ink)}

.bc-chip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:740px;margin:18px auto 0}
.bc-chip button{font:inherit;font-size:13.5px;font-weight:600;padding:8px 15px;min-height:38px;border-radius:999px;cursor:pointer;
  background:var(--bc-chip);border:1px solid var(--bc-chip-line);color:var(--bc-band-ink);transition:background-color .16s,border-color .16s}
.bc-chip button:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
.bc-chip button.is-lanjut{background:var(--bc-band-ink);color:var(--bc-band);border-color:var(--bc-band-ink)}
.bc-chip button:focus-visible{outline:2px solid var(--bc-band-ink);outline-offset:2px}
.bc-chip bdi{font-family:var(--font-naskah);font-size:16px}

/* rak ubin */
.rak-wadah{margin-top:8px}
.rak{margin-top:34px}
.rak-kepala{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.rak-kepala h2{font-size:clamp(19px,2.2vw,22px);letter-spacing:-.015em;margin:0}
.rak-kepala p{margin:3px 0 0;font-size:13.5px;color:var(--ink-soft)}
.rak-geser{display:flex;gap:6px;flex:none}
.rak-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color .16s,opacity .16s}
.rak-btn:hover:not(:disabled){background:var(--surface-2)}
.rak-btn:disabled{opacity:.35;cursor:default}
.rak-btn .mi{width:17px;height:17px}
.rak-btn .mi-kiri{transform:rotate(180deg)}
.rak-penuh .rak-geser{display:none}
.rak-baris{list-style:none;margin:0;padding:2px 2px 10px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rak-baris::-webkit-scrollbar{height:6px}
.rak-baris::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.rak-baris li{flex:none;scroll-snap-align:start}
.ubin{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:3px;width:176px;aspect-ratio:1;padding:14px;
  border:0;border-radius:10px;cursor:pointer;text-align:left;font:inherit;color:#fff;overflow:hidden;
  background:var(--ubin-scrim), var(--ubin-pola) center/56px 56px, color-mix(in srgb,var(--w) 88%,#000);
  box-shadow:0 1px 2px rgba(0,0,0,.08);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.ubin:hover{transform:translateY(-3px);box-shadow:0 14px 26px -14px color-mix(in srgb,var(--w) 80%,#000)}
.ubin:focus-visible{outline:3px solid var(--emerald);outline-offset:3px}
.ubin-ik{position:absolute;top:13px;left:13px;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.18)}
.ubin-ik .mi{width:21px;height:21px;color:#fff}
.ubin-no{position:absolute;top:12px;right:14px;font-size:26px;font-weight:800;line-height:1;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums}
.ubin b{font-size:17px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.ubin small{font-size:12px;line-height:1.35;color:rgba(255,255,255,.94);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ubin{background:var(--ubin-scrim), var(--ubin-pola) center/56px 56px, color-mix(in srgb,var(--w) 80%,#000)} }
:root[data-theme="dark"] .ubin{background:var(--ubin-scrim), var(--ubin-pola) center/56px 56px, color-mix(in srgb,var(--w) 80%,#000)}

@media (max-width:640px){
  .bc{margin-inline:-16px;margin-top:-24px;border-radius:0 0 var(--r-lg) var(--r-lg);padding-inline:16px}
  .bc-panel{padding:8px}
  .bc-kotak{padding:0 10px}
  .bc-kotak input{height:48px}
  .bc-kirim{padding:0 16px}
  .bc-chip{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:-16px;padding:0 16px 2px;scrollbar-width:none}
  .bc-chip::-webkit-scrollbar{display:none}
  .bc-chip button{flex:none}
  .rak{margin-top:28px}
  .rak-geser{display:none}
  .rak-baris{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .ubin{width:146px}
  .ubin b{font-size:15.5px}
}
@media (prefers-reduced-motion: reduce){
  .bc-saran,.ubin,.bc-kirim{transition:none}
  .bc-saran{clip-path:none}
}
.bc .bc-bis[dir="rtl"]{text-align:center}
button.tab-lain{font-family:inherit;font-size:11.5px;font-weight:700;background:none;border:0;cursor:pointer}
.bc-kotak input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.bc-hapus{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-right:-6px;border:0;border-radius:999px;background:none;color:var(--ink-soft);cursor:pointer;transition:color .16s,background-color .16s}
.bc-hapus:hover{color:var(--emerald);background:var(--emerald-soft)}
.bc-hapus[hidden]{display:none}
.bc-nihil{margin:8px 10px 6px;font-size:14px;color:var(--ink-soft)}
.bc-penuh.bc-sendiri{border-top:0;margin-top:0}
/* Beranda: semua judul bagian memakai satu perlakuan, tanpa batang hijau */
#view-beranda .block-head h2::before{content:none}

/* Revisi 1 Nov malam: pita hijau yang benar-benar hijau di kedua tema, berpola bintang samar;
   panel cari menyatu dengan pita; kartu "Lanjutkan" di bawah pita dihapus karena sudah jadi tombol putih di pita. */
.bc{background:var(--ubin-pola) center/64px 64px, var(--bc-band);overflow:visible}
.bc-panel{background:var(--bc-panel);color:var(--bc-kotak-ink)}
.bc-kotak{background:var(--bc-kotak);color:var(--bc-kotak-soft)}
.bc-kotak:focus-within{background:var(--bc-kotak);border-color:var(--bc-kirim)}
.bc-kotak input{color:var(--bc-kotak-ink)}
.bc-kotak input::placeholder{color:var(--bc-kotak-soft)}
.bc-cakupan button{color:var(--bc-kotak-soft)}
.bc-cakupan button:hover{color:var(--bc-kotak-ink);background:var(--bc-kotak)}
.bc-cakupan button.is-on{background:var(--bc-kirim);color:var(--bc-kirim-ink)}
.bc-kirim{background:var(--bc-kirim);color:var(--bc-kirim-ink)}
.bc-hapus{color:var(--bc-kotak-soft)}
#view-beranda #lastReadWrap > .resume{display:none}

/* Revisi ubin (1 Nov 19:30): satu warna, gaya "lembar mushaf".
   Ubin berwarna-warni diganti kartu tenang; yang menonjol hanya nama Arab pintu dalam Amiri. */
:root{ --ub-kartu:#FFFFFF; --ub-garis:#D6E3DA; --ub-ar:#05593B; --ub-ink:#101C16; --ub-soft:#56655C; --ub-pola-op:.09; --ub-hover:#05593B; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ub-kartu:#0F2219; --ub-garis:#1F3B2C; --ub-ar:#6FD8AE; --ub-ink:#E8EEE9; --ub-soft:#9DB2A5; --ub-pola-op:.12; --ub-hover:#45CE9B; } }
:root[data-theme="dark"]{ --ub-kartu:#0F2219; --ub-garis:#1F3B2C; --ub-ar:#6FD8AE; --ub-ink:#E8EEE9; --ub-soft:#9DB2A5; --ub-pola-op:.12; --ub-hover:#45CE9B; }
.ubin, :root[data-theme="dark"] .ubin{background:var(--ub-kartu)!important;color:var(--ub-ink);border:1px solid var(--ub-garis);box-shadow:none;justify-content:flex-end;isolation:isolate}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ubin{background:var(--ub-kartu)!important} }
.ubin::before{content:"";position:absolute;top:0;right:0;width:70%;height:70%;z-index:-1;background:var(--ub-ar);opacity:calc(var(--ub-pola-op) * 4);
  -webkit-mask:var(--ubin-pola) 100% 0/56px 56px repeat;mask:var(--ubin-pola) 100% 0/56px 56px repeat;
  -webkit-mask-image:var(--ubin-pola), linear-gradient(225deg,#000 20%,transparent 75%);-webkit-mask-size:56px 56px,100% 100%;-webkit-mask-composite:source-in;
  mask-image:var(--ubin-pola), linear-gradient(225deg,#000 20%,transparent 75%);mask-size:56px 56px,100% 100%;mask-composite:intersect;transition:opacity .25s}
.ubin-ik{background:color-mix(in srgb,var(--ub-ar) 10%,transparent);color:var(--ub-ar)}
.ubin-ik .mi{color:var(--ub-ar)}
.ubin-no{color:var(--ub-ar);font-size:22px;opacity:.85}
.ubin-ar{font-family:var(--font-naskah);font-size:28px;line-height:1.5;color:var(--ub-ar);margin-bottom:auto;margin-top:44px;align-self:flex-end;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:clip}
.ubin b{color:var(--ub-ink)}
.ubin small{color:var(--ub-soft)}
.ubin:hover{transform:translateY(-2px);border-color:var(--ub-hover);box-shadow:0 12px 24px -16px color-mix(in srgb,var(--ub-hover) 70%,transparent)}
.ubin:hover::before{opacity:calc(var(--ub-pola-op) * 7)}
@media (max-width:640px){ .ubin-ar{font-size:26px;margin-top:42px} }

/* ===== Revisi Beranda 2 Nov (kritik 27/40): ubin tidak memotong Arab, fokus tidak terpotong,
   target sentuh ≥36px, panduan pertama kali, tema khutbah, ayat hari ini sebagai penutup ===== */
.ubin{width:184px;padding:15px}
.ubin-ar{overflow:visible;line-height:1.65;margin-top:40px;padding-bottom:2px}
.ubin small{line-height:1.4;max-height:2.8em}
.rak-baris{padding:8px 8px 14px;margin-inline:-8px;scroll-padding-inline:8px}
.link-btn{min-height:36px;padding:6px 10px}
.btn-sm{min-height:36px}
.tq-dengar{min-height:36px;padding:7px 11px}
.tq-dengar-ayat{min-width:36px;justify-content:center}
.block-head .block-sub{margin:4px 0 0;font-size:14px;color:var(--ink-soft);max-width:58ch}
.block-head > div h2{margin:0}
#view-beranda #blokKhutbah{margin-top:40px}
#view-beranda #blokAyat{margin-top:40px}
#view-beranda .tema-card .t-ar{font-family:var(--font-naskah);font-size:22px;line-height:1.6;color:var(--emerald);align-self:flex-end}
/* panduan pertama kali */
.kenalan{margin:18px 0 0;padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.kenalan[hidden]{display:none}
.kenalan-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.kenalan-kepala h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em}
.kenalan-tutup{flex:none;width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--ink-soft);font-size:22px;line-height:1;cursor:pointer}
.kenalan-tutup:hover{color:var(--emerald);border-color:var(--emerald)}
.kenalan-tutup:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}
.kenalan-langkah{list-style:none;counter-reset:kn;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kenalan-langkah li{counter-increment:kn;position:relative;padding-left:32px}
.kenalan-langkah li::before{content:counter(kn);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;background:var(--emerald-soft);color:var(--emerald-ink)}
.kenalan-langkah b{display:block;font-size:14.5px;margin-bottom:2px}
.kenalan-langkah span{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
@media (max-width:900px){ .kenalan-langkah{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .ubin{width:164px;padding:13px}
  .ubin-ar{font-size:25px;margin-top:38px}
  .ubin b{font-size:15px}
  .ubin small{font-size:11.5px}
  .rak-baris{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .kenalan{padding:14px}
  .kenalan-langkah{grid-template-columns:1fr;gap:10px}
}
.block-head .link-btn{white-space:nowrap;flex:none}
#ayatToday p:not([dir="rtl"]){text-align:left;hyphens:auto}
/* audit 2 Nov: tautan sumber yang berdiri sendiri cukup besar untuk jempol */
.sf-ruj-item > a{display:inline-flex;align-items:center;min-height:36px;padding:4px 0}