/* MasjidPro - layar TV. Satuan rem: 1rem = 16px pada 1920x1080 (diatur skrip). */
@font-face{font-family:'Poppins';font-weight:500;font-display:swap;src:url(/assets/font/poppins-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:700;font-display:swap;src:url(/assets/font/poppins-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:800;font-display:swap;src:url(/assets/font/poppins-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Amiri';font-weight:400;font-display:swap;src:url(/assets/font/amiri-arabic-400-normal.woff2) format('woff2')}
@font-face{font-family:'Amiri';font-weight:700;font-display:swap;src:url(/assets/font/amiri-arabic-700-normal.woff2) format('woff2')}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{width:100%;height:100%;overflow:hidden;background:#000}
body.mp-tv{font-family:'Poppins','Segoe UI',Roboto,Arial,sans-serif;font-weight:500;color:var(--tk,#fff);background-color:var(--bg,#06160f);background-size:cover;background-position:center;-webkit-font-smoothing:antialiased;cursor:none}
img{max-width:100%;display:block;height:auto}

/* ===== tema ===== */
.tema-hijau{--p:#17a971;--pk:#0b6b45;--acc:#f6c453;--bgd:#06160f;--cardd:#0e2c1f}
.tema-biru{--p:#3b8be8;--pk:#1556a8;--acc:#ffd166;--bgd:#06101f;--cardd:#0e2342}
.tema-emas{--p:#d9a521;--pk:#7d5a00;--acc:#ffe9a3;--bgd:#130e03;--cardd:#271c08}
.mode-gelap{--bg:var(--bgd);--card:var(--cardd);--tk:#f5f8f6;--tk2:#b4c7bd;--ln:rgba(255,255,255,.14);--sb:var(--acc);--sbt:#14210f;--aksen:var(--acc)}
.mode-terang{--bg:#f6f4ec;--card:#ffffff;--tk:#14231b;--tk2:#4a5c52;--ln:rgba(0,0,0,.14);--sb:var(--pk);--sbt:#ffffff;--aksen:var(--pk)}

/* ===== kerangka ===== */
#app{position:fixed;inset:0;display:grid;padding:1.4rem;gap:1.1rem;background:var(--bg);background:transparent}
body.mp-tv.mode-gelap #app{background:linear-gradient(160deg,rgba(0,0,0,.0),rgba(0,0,0,.0))}
#app>section,#app>header,#app>footer{min-width:0;min-height:0}
#hd{grid-area:hd;display:flex;align-items:center;gap:1.4rem;padding:0 .4rem}
#logo{height:100%;max-height:6.6rem;width:auto;border-radius:1rem}
.hd-t{min-width:0;flex:1}
#nama{font-size:3.2rem;line-height:1.1;font-weight:800;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#alamat{font-size:1.5rem;color:var(--tk2);margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chip{font-size:1.2rem;font-weight:700;padding:.4rem 1rem;border-radius:2rem;background:var(--acc);color:#14210f;white-space:nowrap}

#jam{grid-area:jam;display:flex;align-items:baseline;justify-content:center;gap:.6rem;line-height:1}
#jamTeks{font-size:14rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--tk)}
#detikTeks{font-size:6rem;font-weight:700;color:var(--aksen);font-variant-numeric:tabular-nums;min-width:2ch}
#zona{font-size:1.8rem;font-weight:700;color:var(--tk2);align-self:flex-start;margin-top:1.6rem}

#tgl{grid-area:tgl;text-align:center;display:flex;flex-direction:column;justify-content:flex-start;gap:.3rem;overflow:hidden}
#masehi{font-size:2.5rem;font-weight:700}
#hijri{font-size:2.2rem;font-weight:500;color:var(--aksen)}
#berbuka{margin:.5rem auto 0;padding:.5rem 2rem;border-radius:1rem;background:var(--card);border:2px solid var(--aksen);display:none}
#berbuka small{display:block;font-size:1.2rem;color:var(--tk2)}
#berbuka b{font-size:3.2rem;font-variant-numeric:tabular-nums;color:var(--aksen)}
#extra{margin-top:.6rem;min-height:3.5rem}
.ex-ar{font-family:'Amiri','Noto Naskh Arabic','Traditional Arabic',serif;font-size:2.2rem;line-height:1.5;color:var(--tk)}
.ex-lt{font-size:1.3rem;color:var(--tk2);line-height:1.4}
.ex-lt b{color:var(--aksen)}

/* jadwal */
#jadwal{grid-area:jadwal;display:grid;gap:.7rem;align-content:stretch}
.wk{background:var(--card);border:1px solid var(--ln);border-radius:1.1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.4rem .3rem;min-width:0}
.wn{font-size:1.7rem;font-weight:700;color:var(--tk2);letter-spacing:.02em}
.wj{font-size:3.6rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--tk)}
.wk.minor .wj{color:var(--tk2)}
.wk.sorot{background:var(--sb);border-color:var(--sb);box-shadow:0 0 0 .25rem var(--ln),0 .5rem 2rem rgba(0,0,0,.35);transform:scale(1.04)}
.wk.sorot .wn,.wk.sorot .wj{color:var(--sbt)}

/* slide */
#slide{grid-area:slide;position:relative;border-radius:1.6rem;overflow:hidden;background:var(--card);border:1px solid var(--ln)}
#slideIsi{position:absolute;inset:0;transition:opacity .7s ease,transform .7s ease}
#slideIsi.masuk{opacity:0;transform:scale(.985)}
#slideIsi.tampil{opacity:1;transform:none}
.gbr{position:absolute;inset:-2rem;background-size:cover;background-position:center;filter:blur(2rem) brightness(.55)}
.gbr-i{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cap{position:absolute;left:0;right:0;bottom:0;padding:1rem 2rem;background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:2rem;font-weight:700;color:#fff}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;border:0}

.kartu{position:absolute;inset:0;padding:2.6rem 3.2rem;display:flex;flex-direction:column;gap:1.4rem;overflow:hidden}
.k-judul{font-size:3.2rem;font-weight:800;color:var(--aksen);letter-spacing:.01em;flex:none}
.k-judul:after{content:'';display:block;width:8rem;height:.35rem;border-radius:1rem;background:var(--aksen);margin-top:.7rem;opacity:.8}
.k-isi{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.1rem;justify-content:center}
.kartu h3{font-size:2.2rem;font-weight:700;color:var(--aksen);margin-top:.4rem}
.baris{display:grid;grid-template-columns:11rem 1fr auto;gap:1.4rem;align-items:baseline;font-size:2.3rem;padding:.7rem 0;border-bottom:1px solid var(--ln)}
.baris span{color:var(--aksen);font-weight:700}
.baris b{font-weight:700;color:var(--tk)}
.baris em{font-style:normal;color:var(--tk2);font-size:1.9rem;text-align:right}
.baris.kajian{grid-template-columns:14rem 1fr auto}
.baris.tx{grid-template-columns:7rem 1fr auto}
.baris.org{grid-template-columns:11rem 1fr}
.baris.org em{grid-column:2;text-align:left;margin-top:.2rem}
.pos{color:#4fd18b}.neg{color:#ff8a7a}
.mode-terang .pos{color:#0b7a43}.mode-terang .neg{color:#b3261e}
.besar{font-size:4.6rem;font-weight:800;line-height:1.15;color:var(--tk)}
.besar.kecil{font-size:3.4rem}
.ket{font-size:2.1rem;color:var(--tk2);line-height:1.5}
.isi-teks{font-size:3rem;line-height:1.5;color:var(--tk);font-weight:500}
.ar{font-family:'Amiri','Noto Naskh Arabic','Traditional Arabic',serif;font-size:4.2rem;line-height:1.9;text-align:center;direction:rtl;color:var(--tk);font-weight:400}
.arti{font-size:2.2rem;line-height:1.5;color:var(--tk);text-align:center}
.latin{font-size:1.9rem;line-height:1.5;color:var(--aksen);text-align:center;font-style:italic}
.sumber{font-size:1.8rem;color:var(--tk2);text-align:center;font-weight:700}
.kutipan .k-isi{gap:1.2rem}
.stat3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.stat3.dua{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat3>div{background:rgba(127,127,127,.12);border-radius:1.2rem;padding:1.1rem 1.4rem;text-align:center}
.stat3 small{display:block;font-size:1.5rem;color:var(--tk2);font-weight:500}
.stat3 b{font-size:2.3rem;white-space:nowrap;font-weight:800;font-variant-numeric:tabular-nums}
.stat3 .saldo{background:var(--sb)}.stat3 .saldo small,.stat3 .saldo b{color:var(--sbt)}
.bar{position:relative;height:4.2rem;border-radius:3rem;background:rgba(127,127,127,.25);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--p),var(--acc));border-radius:3rem;transition:width 1s}
.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:800;color:#fff;text-shadow:0 .1rem .4rem rgba(0,0,0,.6)}
.qris-grid{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center}
.qr{width:26rem;height:26rem;background:#fff;border-radius:1.2rem;padding:1rem;object-fit:contain}
.qr svg{width:100%;height:100%;display:block}
.cd4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.cd4>div{background:rgba(127,127,127,.14);border-radius:1.2rem;padding:1.4rem;text-align:center}
.cd4 b{display:block;font-size:6.5rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.cd4 small{font-size:1.6rem;color:var(--tk2)}
.kartu.ied .besar{color:var(--aksen)}

/* ticker */
#ft{grid-area:ft;display:flex;align-items:center;gap:1.4rem}
#tickerBox{flex:1;height:100%;overflow:hidden;border-radius:1rem;background:var(--sb);position:relative;display:flex;align-items:center}
#ticker{white-space:nowrap;font-size:2.4rem;font-weight:700;color:var(--sbt);padding-left:100%;display:inline-block;will-change:transform}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-100%)}}
#kredit{font-size:1.15rem;color:var(--tk2);opacity:.75;white-space:nowrap}

/* ===== LAYOUT ===== */
/* klasik (landscape) */
body.land #app.layout-klasik{grid-template-columns:50rem 1fr;grid-template-rows:7.4rem 17rem 1fr 11.6rem 4.4rem;grid-template-areas:"hd hd" "jam slide" "tgl slide" "jadwal jadwal" "ft ft"}
body.land #app.layout-klasik #jadwal{grid-template-columns:repeat(8,1fr)}
body.land #app.layout-klasik #jam{justify-content:flex-start}
body.land #app.layout-klasik #jamTeks{font-size:13rem}
body.land #app.layout-klasik #detikTeks{font-size:5.2rem}
body.land #app.layout-klasik #zona{display:none}

/* split: jadwal vertikal di kiri, slide di kanan */
body.land #app.layout-split{grid-template-columns:42rem 1fr;grid-template-rows:7.4rem 13.5rem 7rem 1fr 4.4rem;grid-template-areas:"hd hd" "jam slide" "tgl slide" "jadwal slide" "ft ft"}
body.land #app.layout-split #jamTeks{font-size:10.5rem}
body.land #app.layout-split #detikTeks{font-size:4.4rem}
body.land #app.layout-split #zona{display:none}
body.land #app.layout-split #masehi{font-size:2rem}
body.land #app.layout-split #hijri{font-size:1.8rem}
body.land #app.layout-split #extra,body.land #app.layout-split #berbuka{display:none !important}
body.land #app.layout-split #jadwal{grid-template-columns:1fr;grid-auto-rows:1fr;gap:.45rem}
body.land #app.layout-split .wk{flex-direction:row;justify-content:space-between;padding:0 1.6rem}
body.land #app.layout-split .wn{font-size:1.9rem}
body.land #app.layout-split .wj{font-size:2.8rem}
body.land #app.layout-split .wk.sorot{transform:none}

/* fokus: slide sebesar mungkin */
body.land #app.layout-fokus{grid-template-columns:1fr 36rem;grid-template-rows:5.6rem 3.2rem 1fr 9.6rem 4.4rem;grid-template-areas:"hd jam" "hd tgl" "slide slide" "jadwal jadwal" "ft ft"}
body.land #app.layout-fokus #jam{justify-content:flex-end}
body.land #app.layout-fokus #jamTeks{font-size:5.6rem}
body.land #app.layout-fokus #detikTeks{font-size:2.6rem}
body.land #app.layout-fokus #zona{display:none}
body.land #app.layout-fokus #tgl{flex-direction:row;justify-content:flex-end;gap:1.4rem;align-items:center}
body.land #app.layout-fokus #masehi{font-size:1.4rem}body.land #app.layout-fokus #hijri{font-size:1.4rem}
body.land #app.layout-fokus #extra,body.land #app.layout-fokus #berbuka{display:none !important}
body.land #app.layout-fokus #jadwal{grid-template-columns:repeat(8,1fr)}
body.land #app.layout-fokus .wj{font-size:3.1rem}body.land #app.layout-fokus .wn{font-size:1.5rem}
body.land #app.layout-fokus #nama{font-size:2.6rem}body.land #app.layout-fokus #alamat{font-size:1.3rem}
body.land #app.layout-fokus #logo{max-height:4.4rem}

/* portrait: tumpuk (67.5 x 120 rem) */
body.port #app{grid-template-columns:1fr;gap:.9rem;padding:1.4rem}
body.port #app.layout-klasik,body.port #app.layout-split{grid-template-rows:7rem 12rem 6.5rem 1fr 25rem 3.6rem;grid-template-areas:"hd" "jam" "tgl" "slide" "jadwal" "ft"}
body.port #app.layout-fokus{grid-template-rows:7rem 8.5rem 4rem 1fr 18rem 3.6rem;grid-template-areas:"hd" "jam" "tgl" "slide" "jadwal" "ft"}
body.port #jamTeks{font-size:10rem}body.port #detikTeks{font-size:4rem}
body.port #zona{display:none}
body.port #nama{font-size:2.6rem}body.port #alamat{font-size:1.2rem}
body.port #logo{max-height:5.4rem}
body.port #masehi{font-size:1.9rem}body.port #hijri{font-size:1.7rem}
body.port #extra,body.port #berbuka{display:none !important}
body.port #jadwal{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr)}
body.port .wn{font-size:1.5rem}body.port .wj{font-size:3rem}
body.port #ticker{font-size:1.8rem}
body.port #kredit{display:none}
body.port .kartu{padding:1.8rem 2rem}
body.port .k-judul{font-size:2.4rem}
body.port .baris{grid-template-columns:7rem 1fr;font-size:1.7rem}
body.port .baris em{grid-column:2;text-align:left}
body.port .ar{font-size:3rem}body.port .arti{font-size:1.7rem}
body.port .besar{font-size:3.2rem}body.port .isi-teks{font-size:2.2rem}
body.port .stat3 b{font-size:1.9rem}
body.port .qr{width:18rem;height:18rem}
body.port .qris-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
body.port .cd4 b{font-size:4rem}

/* ===== OVERLAY FASE ===== */
#ov{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2rem;padding:3rem 6rem;
  background:radial-gradient(ellipse at 50% 30%,var(--pk,#0b6b45),#04110b 85%);color:#fff;font-family:'Poppins',sans-serif}
#ov .ov-jam{position:absolute;top:2rem;right:3rem;font-size:5rem;font-weight:800;font-variant-numeric:tabular-nums;opacity:.9}
#ov .ov-kecil{font-size:3rem;font-weight:700;opacity:.9;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
#ov .ov-judul{font-size:7rem;font-weight:800;line-height:1.1}
#ov .ov-judul.besar{font-size:9.5rem}
#ov .ov-cd{font-size:22rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--acc);text-shadow:0 .5rem 3rem rgba(0,0,0,.4)}
#ov .ov-cd.kecil{font-size:7rem}
#ov .ov-sub{font-size:3.4rem;font-weight:500;opacity:.95;line-height:1.35;max-width:100rem}
#ov .ov-sub.tebal{font-weight:700;font-size:4.4rem;color:var(--acc)}
#ov .ov-bar{width:80%;max-width:110rem;height:1.4rem;border-radius:1rem;background:rgba(255,255,255,.2);overflow:hidden}
#ov .ov-bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .3s linear}
#ov .ov-petugas{display:flex;gap:3rem;justify-content:center;flex-wrap:wrap}
#ov .ov-petugas div{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.2);border-radius:1.4rem;padding:1rem 2.4rem}
#ov .ov-petugas small{display:block;font-size:1.7rem;opacity:.8;font-weight:500}
#ov .ov-petugas b{font-size:2.8rem;font-weight:700}
#ov.f-adzan{background:radial-gradient(ellipse at 50% 30%,#1b8a5c,#04110b 85%)}
#ov.f-khutbah{background:radial-gradient(ellipse at 50% 30%,#1c5a96,#050f1c 85%)}
#ov.f-terlarang{background:radial-gradient(ellipse at 50% 30%,#8a4b0b,#1d0f02 88%)}
#ov.f-terlarang .ov-judul{color:#fff}
#ov.f-sholat{background:#000;color:#9aa89f}
#ov.f-sholat .ov-judul.gelap{font-size:6rem;color:#c9d4cd}
#ov.f-sholat .ov-sub.gelap{font-size:3.4rem;color:#8fa096}
#ov.f-sholat.tanpa-dim{background:radial-gradient(ellipse at 50% 30%,#0b3d2a,#030b07 90%);color:#fff}
#ov.f-sholat.tanpa-dim .ov-judul.gelap,#ov.f-sholat.tanpa-dim .ov-sub.gelap{color:#fff}
#ov.f-dzikir{justify-content:flex-start;padding:3rem 5rem;background:radial-gradient(ellipse at 50% 20%,#0f5a3b,#04110b 85%)}
.ov-dz-judul{font-size:3.4rem;font-weight:800;color:var(--acc);flex:none}
.ov-dz{flex:1;min-height:0;width:100%;position:relative;display:flex;align-items:center;justify-content:center}
.ov-dz .dz{display:flex;flex-direction:column;gap:1.4rem;align-items:center;width:100%}
.ov-dz .dz-j{font-size:3rem;font-weight:700;opacity:.9}
.ov-dz .ar{font-size:5.4rem;color:#fff;line-height:2}
.ov-dz .latin{font-size:2.2rem;color:#d7f1e3}
.ov-dz .arti{font-size:2.4rem;color:#fff;max-width:105rem}
.ov-dz .gbr-i,.ov-dz .gbr{position:absolute}
.ov-dz-no{font-size:1.6rem;opacity:.7;flex:none}
body.port #ov .ov-judul{font-size:4.6rem}body.port #ov .ov-judul.besar{font-size:6rem}
body.port #ov .ov-cd{font-size:13rem}body.port #ov .ov-sub{font-size:2.4rem}
body.port #ov .ov-jam{font-size:3.2rem}body.port .ov-dz .ar{font-size:3.6rem}

/* darurat */
#darurat{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2rem;padding:4rem 6rem;background:#8f1010;color:#fff;animation:kedip 2.4s ease-in-out infinite}
@keyframes kedip{0%,100%{background:#8f1010}50%{background:#b31818}}
.dr-ikon{width:11rem;height:11rem;border-radius:50%;background:#fff;color:#8f1010;font-size:8rem;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.dr-judul{font-size:5rem;font-weight:800;letter-spacing:.1em}
.dr-isi{font-size:6.4rem;font-weight:700;line-height:1.3;max-width:105rem}
body.port .dr-isi{font-size:4rem}

/* pairing */
#pair{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2rem;text-align:center;padding:3rem;background:radial-gradient(ellipse at 50% 20%,#0f5a3b,#04110b 85%);color:#fff}
.pair-logo{height:11rem;width:auto;border-radius:1.6rem}
#pair h1{font-size:4rem;font-weight:800}
#pairKode{font-size:15rem;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#f6c453;line-height:1}
.pair-langkah{text-align:left;font-size:2.4rem;line-height:1.7;max-width:90rem;padding-left:3rem}
.pair-pesan{font-size:2rem;color:#ffd7a8;min-height:2.4rem}
.pair-kredit{font-size:1.4rem;opacity:.75}
#hintSuara{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:300;background:rgba(0,0,0,.8);color:#fff;font-size:1.3rem;padding:.5rem 1.4rem;border-radius:3rem;white-space:nowrap;max-width:92%}