@font-face{font-family:PJS;font-weight:500;font-display:swap;src:url(../fonts/pjs-500.woff2) format("woff2")}
@font-face{font-family:PJS;font-weight:600;font-display:swap;src:url(../fonts/pjs-600.woff2) format("woff2")}
@font-face{font-family:PJS;font-weight:700;font-display:swap;src:url(../fonts/pjs-700.woff2) format("woff2")}
@font-face{font-family:PJS;font-weight:800;font-display:swap;src:url(../fonts/pjs-800.woff2) format("woff2")}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000}
body{font-family:PJS,Roboto,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;cursor:default}
body.hide-cursor{cursor:none}

/* ---------- tema ---------- */
#stage{--c1:#0b6b4b;--c1d:#064a33;--c2:#d4af37;--bg:#eef3f0;--panel:#fff;--ink:#14201b;--soft:#5b6b64;--on1:#fff;--on2:#1b1404}
#stage.tema-biru{--c1:#14457a;--c1d:#0b2c52;--c2:#36b6c9;--bg:#edf2f8;--on2:#04262b}
#stage.tema-marun{--c1:#7a1f2b;--c1d:#51111b;--c2:#e0b25b;--bg:#f6efee}
#stage.tema-coklat{--c1:#5c3d23;--c1d:#3c2614;--c2:#e9c46a;--bg:#f5f0e8}
#stage.tema-ungu{--c1:#4b2a7b;--c1d:#2f1952;--c2:#f0a1c2;--bg:#f2eff8;--on2:#3a0f22}
#stage.tema-toska{--c1:#0f766e;--c1d:#0a4f4a;--c2:#f59e0b;--bg:#eef6f5;--on2:#2a1a02}
#stage.tema-navy{--c1:#0f2847;--c1d:#08182c;--c2:#e5b84b;--bg:#eef1f6}
#stage.tema-senja{--c1:#9a3412;--c1d:#6b230b;--c2:#fcd34d;--bg:#fbf3ec}
#stage.tema-grafit{--c1:#374151;--c1d:#1f2937;--c2:#60a5fa;--bg:#f1f3f5;--on2:#06203f}
#stage.tema-hitam{--c1:#2a2116;--c1d:#100c07;--c2:#d4a72c;--bg:#0b0906;--panel:#18130c;--ink:#f5efe2;--soft:#b3a58a;--on2:#1b1404}
#stage.tema-malam{--c1:#17283f;--c1d:#0b1625;--c2:#3fbf8f;--bg:#070d17;--panel:#101b2c;--ink:#e9eff6;--soft:#93a4b8;--on2:#032016}

/* ---------- panggung 1920×1080, diskalakan JS ---------- */
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:var(--bg);color:var(--ink);
  display:grid;padding:24px;gap:18px;overflow:hidden}
.panel{background:var(--panel);border-radius:22px;box-shadow:0 2px 0 rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06)}

/* ===================== LAYOUT MODERN ===================== */
.layout-modern{grid-template-columns:540px 1fr;grid-template-rows:150px 236px 92px 1fr 196px 72px;
  grid-template-areas:"date head" "clock media" "next media" "info media" "times times" "ticker ticker"}
#datebox{grid-area:date;display:flex;flex-direction:column;justify-content:center;padding:0 30px}
#hari{font-size:26px;font-weight:700;color:var(--c1)}
#stage.tema-malam #hari,#stage.tema-hitam #hari{color:var(--c2)}
#tanggal{font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
#hijri{font-size:24px;font-weight:600;color:var(--soft)}

#clockbox{grid-area:clock;display:grid;place-items:center}
#clock{display:flex;align-items:baseline;font-weight:800;font-variant-numeric:tabular-nums;color:var(--c1);line-height:1}
#stage.tema-malam #clock,#stage.tema-hitam #clock{color:#fff}
#clock span{font-size:168px;letter-spacing:-5px}
#clock i{font-style:normal;font-size:140px;margin:0 2px;position:relative;top:-12px;animation:blink 1s steps(1) infinite}
#clock small{font-size:50px;margin-left:10px;color:var(--soft);width:62px}
@keyframes blink{50%{opacity:.25}}

#nextbox{grid-area:next;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-radius:22px;
  background:var(--c1);color:var(--on1);font-weight:800}
#nextLabel{font-size:25px;text-transform:uppercase;letter-spacing:1px}
#nextCount{font-size:50px;font-variant-numeric:tabular-nums;color:var(--c2)}

#info{grid-area:info;padding:20px 30px;overflow:hidden;position:relative}
#info h3{font-size:20px;text-transform:uppercase;letter-spacing:1.5px;color:var(--c1);margin-bottom:8px}
#stage.tema-malam #info h3,#stage.tema-hitam #info h3{color:var(--c2)}
#info dl{display:grid;grid-template-columns:auto 1fr;gap:2px 18px;font-size:25px;line-height:1.3}
#info dt{color:var(--soft);font-weight:600}
#info dd{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#info .page{position:absolute;top:20px;right:30px;bottom:20px;left:30px;transition:opacity .8s}
#info .page.hide{opacity:0}
#info.empty{display:flex;align-items:center;justify-content:center}
#info.empty::after{content:"";width:120px;height:120px;opacity:.12;background:var(--c1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 4c1 3 3.5 4.6 3.5 7.3A3.5 3.5 0 0 1 32 14.8a3.5 3.5 0 0 1-3.5-3.5C28.5 8.6 31 7 32 4Zm0 13c-11 4-18 11.5-18 21h36c0-9.5-7-17-18-21ZM6 24c.8 2 2 3 2 5v31H4V29c0-2 1.2-3 2-5Zm52 0c.8 2 2 3 2 5v31h-4V29c0-2 1.2-3 2-5ZM12 41h40v19H38V50a6 6 0 0 0-12 0v10H12V41Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 4c1 3 3.5 4.6 3.5 7.3A3.5 3.5 0 0 1 32 14.8a3.5 3.5 0 0 1-3.5-3.5C28.5 8.6 31 7 32 4Zm0 13c-11 4-18 11.5-18 21h36c0-9.5-7-17-18-21ZM6 24c.8 2 2 3 2 5v31H4V29c0-2 1.2-3 2-5Zm52 0c.8 2 2 3 2 5v31h-4V29c0-2 1.2-3 2-5ZM12 41h40v19H38V50a6 6 0 0 0-12 0v10H12V41Z'/%3E%3C/svg%3E") center/contain no-repeat}

#head{grid-area:head;display:flex;align-items:center;gap:24px;padding:0 34px;min-width:0}
#logo{flex:none;width:104px;height:104px;border-radius:20px;display:grid;place-items:center;background:var(--c1);color:var(--on1)}
#logo img{max-width:100%;max-height:100%;object-fit:contain}
#logo.has-img{background:transparent}
#logo svg{width:64px;height:64px}
.head-txt{min-width:0}
#nama{font-size:58px;font-weight:800;letter-spacing:-1px;line-height:1.05;color:var(--c1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stage.tema-malam #nama,#stage.tema-hitam #nama{color:#fff}
#alamat{font-size:26px;font-weight:600;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}

#media{grid-area:media;position:relative;border-radius:22px;overflow:hidden;background:var(--c1d)}
#slides,.slide-img,#ornamen{position:absolute;top:0;right:0;bottom:0;left:0}
.slide-img{background:center/cover no-repeat;opacity:0;transition:opacity 1.4s ease}
.slide-img.on{opacity:1}
.slide-img.on.kb{animation:kenburns 14s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
#ornamen{display:none;place-items:center;
  background:radial-gradient(circle at 50% 120%,var(--c1) 0%,var(--c1d) 70%);overflow:hidden}
#ornamen::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M60 6l16 38 38 16-38 16-16 38-16-38L6 60l38-16z'/%3E%3Crect x='32' y='32' width='56' height='56' transform='rotate(45 60 60)'/%3E%3Ccircle cx='60' cy='60' r='14'/%3E%3C/g%3E%3C/svg%3E");background-size:120px}
#ornamen .orn-txt{position:relative;text-align:center;color:#fff}
#ornamen .orn-txt b{display:block;font-size:76px;font-weight:800;letter-spacing:-1px}
#ornamen .orn-txt span{font-size:30px;opacity:.8}
#slides.none #ornamen{display:grid}

#quote{position:absolute;left:28px;right:28px;bottom:26px;padding:22px 30px;border-radius:18px;
  background:rgba(8,14,12,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;
  border-left:8px solid var(--c2);transition:opacity .9s, transform .9s}
#quote.hide{opacity:0;transform:translateY(16px)}
#quote:empty,#quote.none{display:none}
#quoteText{font-size:32px;font-weight:600;line-height:1.35}
#quoteSrc{font-size:22px;margin-top:8px;color:var(--c2);font-weight:700}

#prealert{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(0,0,0,.86);color:#fff;text-align:center;z-index:3}
#prealert.on{display:flex}
#preLabel{font-size:46px;font-weight:700;letter-spacing:1px}
#preCount{font-size:200px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--c2);line-height:1}

#times{grid-area:times;display:flex;gap:14px}
.tbox{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;
  background:var(--c1);color:var(--on1);position:relative;transition:transform .4s, background .4s}
.tbox .tl{font-size:32px;font-weight:700;text-transform:uppercase;letter-spacing:2px;opacity:.9}
.tbox .tt{font-size:80px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-2px;line-height:1.05}
.tbox.minor{background:var(--c1);opacity:.85}
@supports (background:color-mix(in srgb,red 50%,blue)){.tbox.minor{opacity:1;background:color-mix(in srgb,var(--c1) 72%,var(--bg))}}
.tbox.next{background:var(--c2);color:var(--on2);transform:translateY(-8px);box-shadow:0 14px 28px rgba(0,0,0,.18)}
.tbox.next::after{content:"BERIKUTNYA";position:absolute;top:-14px;padding:3px 14px;border-radius:99px;font-size:16px;font-weight:800;letter-spacing:2px;background:var(--c1);color:#fff}

#ticker{grid-area:ticker;position:relative;overflow:hidden;border-radius:16px;background:var(--c1d);color:#fff;display:flex;align-items:center}
#tickerTrack{white-space:nowrap;font-size:36px;font-weight:700;padding-left:100%;will-change:transform}
#tickerTrack .sep{display:inline-block;margin:0 34px;color:var(--c2)}
#tickerTrack.run{animation:ticker linear infinite}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-100%)}}

#expired{position:absolute;left:24px;right:24px;bottom:104px;display:none;padding:10px 22px;border-radius:12px;background:#b42318;color:#fff;font-size:24px;font-weight:700;text-align:center;z-index:5}
#expired.on{display:block}
#wm{position:absolute;right:30px;bottom:4px;font-size:14px;font-weight:600;color:var(--soft);opacity:.55}

/* ===================== LAYOUT KLASIK ===================== */
.layout-klasik{grid-template-columns:330px 470px 1fr;grid-template-rows:150px 70px 1fr 74px;gap:14px;
  grid-template-areas:"times clock head" "times next date" "times media media" "times ticker ticker"}
.layout-klasik #datebox{grid-area:date;flex-direction:row;align-items:center;justify-content:center;gap:16px;padding:0 20px;background:var(--c2);color:var(--on2);border-radius:16px}
.layout-klasik #hari,.layout-klasik #tanggal,.layout-klasik #hijri{font-size:28px;font-weight:700;color:inherit;letter-spacing:0}
.layout-klasik #tanggal::after{content:" /";opacity:.6}
.layout-klasik #clockbox{background:#11181a}
.layout-klasik #clock{color:#fff}
.layout-klasik #clock span{font-size:120px;letter-spacing:-3px}
.layout-klasik #clock i{font-size:100px;top:-8px}
.layout-klasik #clock small{font-size:40px;width:56px;color:#9aa}
.layout-klasik #nextbox{border-radius:16px;padding:0 22px}
.layout-klasik #nextLabel{font-size:22px}
.layout-klasik #nextCount{font-size:38px}
.layout-klasik #head{background:var(--c1);color:#fff;justify-content:center;text-align:center}
.layout-klasik #nama{color:#fff;font-size:56px}
.layout-klasik #alamat{color:rgba(255,255,255,.8)}
.layout-klasik #logo{background:rgba(255,255,255,.12)}
.layout-klasik #times{flex-direction:column;gap:10px}
.layout-klasik .tbox{flex-direction:column;align-items:flex-start;padding:0 26px;border-radius:16px}
.layout-klasik .tbox .tl{font-size:26px;letter-spacing:1px}
.layout-klasik .tbox .tt{font-size:68px}
.layout-klasik .tbox.next{transform:translateX(8px)}
.layout-klasik .tbox.next::after{top:12px;right:14px;font-size:12px}
.layout-klasik #info{grid-area:media;align-self:start;justify-self:end;width:470px;height:auto;margin:22px;z-index:2;
  background:rgba(255,255,255,.92);color:#14201b;padding:20px 26px;min-height:0}
#stage.tema-malam.layout-klasik #info,#stage.tema-hitam.layout-klasik #info{background:rgba(16,27,44,.92);color:var(--ink)}
.layout-klasik #info .page{position:static}
.layout-klasik #info .page.hide{display:none}
.layout-klasik #info.empty{display:none}
.layout-klasik #info dl{font-size:22px}
.layout-klasik #media{border-radius:16px}
.layout-klasik #quote{left:0;right:0;bottom:0;border-radius:0;border-left:0;border-top:6px solid var(--c2);background:var(--c1);-webkit-backdrop-filter:none;backdrop-filter:none;text-align:center;padding:18px 40px}
.layout-klasik #quoteText{font-size:28px}
.layout-klasik #ticker{background:var(--c2);color:var(--on2);border-radius:16px}
.layout-klasik #tickerTrack .sep{color:var(--c1)}
.layout-klasik #expired{left:368px;bottom:100px}

/* ===================== OVERLAY (adzan / iqomah / sholat) ===================== */
#overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;text-align:center;color:#fff;
  background:radial-gradient(circle at 50% 30%,#123b2c,#03100b 75%);font-family:inherit}
#overlay[hidden]{display:none}
#overlay.adzan{background:radial-gradient(circle at 50% 30%,#0e5a40,#021a11 75%)}
#overlay.iqomah{background:radial-gradient(circle at 50% 30%,#3d2a07,#0d0802 75%)}
#overlay.sholat{background:#000;color:#5b6660}
#overlay.hitam .ov-inner{display:none}
.ov-inner{padding:4vmin}
#ovTitle{font-size:7vmin;font-weight:800;letter-spacing:.2vmin;text-transform:uppercase}
#ovBig{font-size:30vmin;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;margin:2vmin 0;color:#f2c94c}
#overlay.adzan #ovBig{font-size:16vmin;color:#7fe0b6}
#overlay.sholat #ovTitle{font-size:3.4vmin;font-weight:600}
#overlay.sholat #ovBig{font-size:12vmin;color:#3c4642}
#ovSub{font-size:4vmin;font-weight:600;max-width:85vw;margin:0 auto;opacity:.9;line-height:1.35}
#overlay.sholat #ovSub{font-size:2.6vmin}

#boot{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:grid;place-items:center;background:#0b6b4b;color:#fff;font:600 4vmin PJS,sans-serif}
#boot.gone{display:none}

/* ===================== LAYOUT LAYAR PENUH ===================== */
.layout-penuh{grid-template-columns:1fr 560px;grid-template-rows:118px 228px 88px 1fr 184px 66px;padding:30px;gap:16px;
  grid-template-areas:"head date" ". clock" ". next" ". info" "times times" "ticker ticker"}
.layout-penuh > *{position:relative;z-index:1}
.layout-penuh #media{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;border-radius:0;grid-area:auto}
.layout-penuh #media::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.75) 100%),
             linear-gradient(270deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 40%)}
.layout-penuh #prealert{z-index:2}
.layout-penuh .panel{background:rgba(10,14,18,.5);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.layout-penuh #head{background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 6px}
.layout-penuh #nama{color:#fff;font-size:60px;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.layout-penuh #alamat{color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.layout-penuh #logo{background:rgba(255,255,255,.14);width:96px;height:96px}
.layout-penuh #logo.has-img{background:transparent}
.layout-penuh #datebox{padding:0 28px}
.layout-penuh #hari{color:var(--c2);font-size:24px}
.layout-penuh #tanggal{font-size:30px}
.layout-penuh #hijri{color:rgba(255,255,255,.75);font-size:22px}
.layout-penuh #clock{color:#fff}
.layout-penuh #clock small{color:rgba(255,255,255,.65)}
.layout-penuh #nextbox{background:var(--c2);color:var(--on2)}
.layout-penuh #nextCount{color:var(--on2)}
.layout-penuh #info h3{color:var(--c2)}
.layout-penuh #info dt{color:rgba(255,255,255,.7)}
.layout-penuh #info.empty{visibility:hidden}
.layout-penuh #quote{left:30px;right:620px;bottom:300px;background:rgba(0,0,0,.35);border-left-color:var(--c2)}
.layout-penuh #quoteText{font-size:34px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.layout-penuh .tbox{background:rgba(10,14,18,.55);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.layout-penuh .tbox .tl{color:var(--c2);opacity:1}
.layout-penuh .tbox.minor{opacity:1;background:rgba(10,14,18,.4)}
.layout-penuh .tbox.next{background:var(--c2);color:var(--on2);border-color:transparent}
.layout-penuh .tbox.next .tl{color:var(--on2)}
.layout-penuh .tbox.next::after{background:#fff;color:#111}
.layout-penuh #ticker{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12)}
.layout-penuh #wm{color:rgba(255,255,255,.6);z-index:2}
.layout-penuh #expired{bottom:96px}