/* =========================================================
   LAYAR MASJID — Mockup Tampilan TV (Fase 0)
   Token desain + 6 tema warna + tata letak 1920x1080
   ========================================================= */

/* ---------- TOKEN DASAR ---------- */
:root {
  --font-ui: "Outfit", system-ui, sans-serif;
  --font-ar: "Amiri", "Traditional Arabic", serif;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.22, .8, .25, 1);
}

/* ---------- 6 TEMA WARNA ---------- */
/* 1. Zamrud Klasik */
[data-theme="zamrud"] {
  --bg1: #03211a; --bg2: #0a4535; --bg3: #052e24;
  --surface: rgba(255, 255, 255, .06); --surface-2: rgba(255, 255, 255, .1);
  --border: rgba(212, 175, 55, .28);
  --text: #f6f1e3; --text-dim: rgba(246, 241, 227, .66);
  --accent: #d9b44a; --accent-2: #f3d98b; --on-accent: #1c1606;
  --glow: rgba(217, 180, 74, .35);
}
/* 2. Emas Kerajaan */
[data-theme="emas"] {
  --bg1: #070707; --bg2: #1c1810; --bg3: #0e0d0a;
  --surface: rgba(255, 236, 190, .05); --surface-2: rgba(255, 236, 190, .09);
  --border: rgba(224, 184, 79, .32);
  --text: #f8f0da; --text-dim: rgba(248, 240, 218, .6);
  --accent: #e3b94f; --accent-2: #fff0b8; --on-accent: #1a1405;
  --glow: rgba(227, 185, 79, .4);
}
/* 3. Biru Malam */
[data-theme="biru"] {
  --bg1: #050b1d; --bg2: #11255a; --bg3: #08132f;
  --surface: rgba(150, 200, 255, .06); --surface-2: rgba(150, 200, 255, .11);
  --border: rgba(96, 214, 236, .28);
  --text: #eaf3ff; --text-dim: rgba(234, 243, 255, .62);
  --accent: #5fd6ea; --accent-2: #c9f6ff; --on-accent: #04202a;
  --glow: rgba(95, 214, 234, .35);
}
/* 4. Pasir Gurun (tema terang) */
[data-theme="pasir"] {
  --bg1: #f6ecd9; --bg2: #e3cba3; --bg3: #efdfc2;
  --surface: rgba(255, 255, 255, .5); --surface-2: rgba(255, 255, 255, .72);
  --border: rgba(122, 74, 42, .22);
  --text: #3a2414; --text-dim: rgba(58, 36, 20, .66);
  --accent: #b8562f; --accent-2: #7a3a1c; --on-accent: #fff6ec;
  --glow: rgba(184, 86, 47, .28);
}
/* 5. Pirus Andalusia */
[data-theme="pirus"] {
  --bg1: #042e33; --bg2: #0d6a6c; --bg3: #064448;
  --surface: rgba(255, 255, 255, .07); --surface-2: rgba(255, 255, 255, .13);
  --border: rgba(244, 236, 216, .3);
  --text: #ffffff; --text-dim: rgba(255, 255, 255, .7);
  --accent: #f4e7c5; --accent-2: #ffffff; --on-accent: #053c40;
  --glow: rgba(244, 231, 197, .32);
}
/* 6. Ungu Senja */
[data-theme="ungu"] {
  --bg1: #160a28; --bg2: #4a1d5e; --bg3: #26103d;
  --surface: rgba(255, 220, 255, .06); --surface-2: rgba(255, 220, 255, .11);
  --border: rgba(255, 166, 107, .3);
  --text: #fdf0ff; --text-dim: rgba(253, 240, 255, .64);
  --accent: #ffa66b; --accent-2: #ffd7b8; --on-accent: #2b0f05;
  --glow: rgba(255, 166, 107, .35);
}

/* ---------- RESET ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--font-ui); color: var(--text); -webkit-font-smoothing: antialiased; }
button, select { font-family: inherit; }

/* ---------- PANGGUNG 1920x1080 ---------- */
.viewport { position: fixed; inset: 0; display: grid; place-items: center; }
.stage {
  position: relative;
  width: 1920px; height: 1080px;
  transform-origin: center center;
  overflow: hidden;
  background: radial-gradient(1200px 700px at 15% 0%, var(--bg2), transparent 70%),
              radial-gradient(1000px 800px at 100% 100%, var(--bg3), transparent 70%),
              linear-gradient(160deg, var(--bg1), var(--bg3) 60%, var(--bg1));
  display: grid;
  grid-template-rows: 132px 1fr 178px 62px;
  gap: 22px;
  padding: 30px 40px 26px;
  transition: background .8s var(--ease), color .6s;
}

/* Pola geometris islami (diwarnai sesuai tema lewat mask) */
.bg-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--accent);
  opacity: .07;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='40' y='40' width='60' height='60'/%3E%3Crect x='40' y='40' width='60' height='60' transform='rotate(45 70 70)'/%3E%3Ccircle cx='70' cy='70' r='16'/%3E%3Cpath d='M0 0L40 40M140 0L100 40M0 140L40 100M140 140L100 100M70 0V28M70 112V140M0 70H28M112 70H140'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='40' y='40' width='60' height='60'/%3E%3Crect x='40' y='40' width='60' height='60' transform='rotate(45 70 70)'/%3E%3Ccircle cx='70' cy='70' r='16'/%3E%3Cpath d='M0 0L40 40M140 0L100 40M0 140L40 100M140 140L100 100M70 0V28M70 112V140M0 70H28M112 70H140'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 140px; mask-size: 140px;
}
.bg-glow {
  position: absolute; width: 900px; height: 900px; border-radius: 50%;
  top: -450px; right: -200px; pointer-events: none;
  background: radial-gradient(circle, var(--glow), transparent 65%);
  filter: blur(20px); opacity: .55;
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-260px, 120px); } }

.stage > header, .stage > section, .stage > footer { position: relative; z-index: 1; }

/* ---------- HEADER ---------- */
.header { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.identity { display: flex; align-items: center; gap: 28px; min-width: 0; }
.logo-badge {
  flex: none; width: 124px; height: 124px; border-radius: 50%;
  background: #000; overflow: hidden;
  box-shadow: 0 0 0 3px var(--accent), 0 0 40px var(--glow);
}
.logo-badge img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
.identity-text h1 {
  font-size: 58px; font-weight: 800; letter-spacing: .5px; line-height: 1.05;
  background: linear-gradient(90deg, var(--text), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.identity-text p { margin-top: 8px; font-size: 25px; color: var(--text-dim); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1000px; }

.datetime { display: flex; align-items: center; gap: 34px; flex: none; }
.dates { text-align: right; }
.date-masehi { font-size: 30px; font-weight: 600; }
.date-hijri { font-size: 28px; color: var(--accent); font-weight: 500; margin-top: 4px; }
.dates.only-one .date-masehi, .dates.only-one .date-hijri { font-size: 34px; }
.clock {
  font-size: 112px; font-weight: 700; line-height: 1; letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  padding: 6px 28px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
}
.clock-s { font-size: 46px; color: var(--accent); margin-left: 6px; font-weight: 600; vertical-align: top; position: relative; top: 10px; }

/* ---------- AREA UTAMA ---------- */
.main { display: grid; grid-template-columns: 1fr 540px; gap: 26px; min-height: 0; }

/* Slideshow */
.slides {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
}
.slide {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.02);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.slide.active { opacity: 1; transform: none; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide.active.kenburns img { animation: kenburns 10s linear forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.slide-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 48px 44px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  color: #fff;
}
.slide-caption .kicker { font-size: 24px; letter-spacing: 6px; text-transform: uppercase; color: var(--accent-2); font-weight: 600; }
.slide-caption .title { font-size: 60px; font-weight: 800; margin-top: 8px; }

/* Slides Static & Live Overlay */
#slides-static { position: absolute; inset: 0; width: 100%; height: 100%; }

.live-stream-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: #000;
  overflow: hidden;
  display: none;
}
.live-stream-overlay.active {
  display: block;
}

/* Slide TV Mekkah Live */
.slide-live { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.slide-live img { width: 100%; height: 100%; object-fit: cover; }
#live-iframe-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#live-iframe-container iframe,
.slide-live iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  z-index: 1;
  pointer-events: auto;
}
.live-top-bar {
  position: absolute; top: 24px; left: 28px; right: 28px; z-index: 4;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
}
.live-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(220, 20, 20, 0.9); color: #fff;
  font-size: 20px; font-weight: 800; letter-spacing: 2px;
  padding: 8px 20px; border-radius: 30px;
  box-shadow: 0 4px 20px rgba(220, 20, 20, 0.5);
  backdrop-filter: blur(8px);
}
.live-badge .dot {
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  animation: livePulse 1.2s infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.8); } }
.makkah-time-badge {
  background: rgba(0, 0, 0, 0.65); border: 1px solid var(--border);
  color: #fff; padding: 8px 18px; border-radius: 30px;
  font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(8px);
}
.live-bottom-caption {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  padding: 80px 36px 36px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.88) 70%);
  display: flex; justify-content: space-between; align-items: flex-end;
  pointer-events: none;
}
.live-bottom-caption .live-title { font-size: 46px; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.live-bottom-caption .live-sub { font-size: 24px; color: var(--accent-2); margin-top: 4px; font-weight: 500; }
.live-channel-tag {
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: 18px; color: var(--accent-2); font-weight: 600; letter-spacing: 1px;
}

/* Sembunyikan semua caption & overlay saat memutar siaran YouTube agar tayangan TV bersih tanpa terhalang */
.slide-live.playing-video .live-top-bar,
.slide-live.playing-video .live-bottom-caption {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.slides.has-live-video .slide-dots {
  opacity: 0 !important;
  pointer-events: none !important;
}

.slide-text {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 60px 90px; height: 100%;
}
.slide-text .kicker { font-size: 24px; letter-spacing: 6px; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.slide-text .arab { font-family: var(--font-ar); font-size: 78px; line-height: 1.7; direction: rtl; margin: 22px 0 12px; color: var(--accent-2); }
.slide-text .terjemah { font-size: 34px; line-height: 1.45; font-weight: 300; max-width: 1050px; }
.slide-text .sumber { margin-top: 20px; font-size: 24px; color: var(--accent); font-weight: 600; }
.slide-text .headline { font-size: 54px; font-weight: 800; margin: 14px 0 30px; }

.kas-table { width: 820px; border-collapse: collapse; font-size: 32px; }
.kas-table td { padding: 14px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.kas-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.kas-table tr.total td { border-bottom: none; color: var(--accent); font-size: 38px; font-weight: 800; padding-top: 20px; }

.slide-dots { position: absolute; bottom: 20px; right: 30px; display: flex; gap: 10px; z-index: 5; }
.slide-dots i { width: 12px; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .35); transition: all .5s var(--ease); }
.slide-dots i.on { width: 40px; background: var(--accent); }

/* Sidebar */
.sidebar { display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px 30px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.card-label { font-size: 22px; letter-spacing: 4px; text-transform: uppercase; color: var(--text-dim); font-weight: 500; }
.card-title { font-size: 28px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }

.countdown-card {
  text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
}
.countdown-card::after {
  content: ""; position: absolute; inset: auto -30% -70% -30%; height: 140%;
  background: radial-gradient(circle at 50% 0%, var(--glow), transparent 60%); opacity: .5; pointer-events: none;
}
.countdown-name { font-size: 48px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 3px; margin-top: 2px; }
.countdown-time { font-size: 86px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -1px; }
.countdown-at { font-size: 22px; color: var(--text-dim); margin-top: 4px; }

.agenda-card { flex: 1; min-height: 0; overflow: hidden; }
.agenda-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.agenda-list li { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.agenda-list li:last-child { border-bottom: none; }
.agenda-time { text-align: center; background: var(--surface-2); border-radius: var(--radius-sm); padding: 6px 0; }
.agenda-time b { display: block; font-size: 28px; font-variant-numeric: tabular-nums; }
.agenda-time small { font-size: 16px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.agenda-info b { font-size: 24px; font-weight: 600; display: block; line-height: 1.2; }
.agenda-info small { font-size: 19px; color: var(--text-dim); }
.badge-segera { display: inline-block; margin-left: 8px; font-size: 14px; font-weight: 700; letter-spacing: 1px; padding: 3px 10px; border-radius: 20px; background: var(--accent); color: var(--on-accent); vertical-align: middle; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.murottal-card { display: flex; align-items: center; gap: 20px; padding: 18px 26px; }
.murottal-label { font-size: 18px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 2px; }
.murottal-title { font-size: 24px; font-weight: 600; }
.eq { display: flex; align-items: flex-end; gap: 5px; height: 40px; width: 50px; flex: none; }
.eq i { flex: 1; background: var(--accent); border-radius: 3px; height: 30%; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
.eq i:nth-child(4) { animation-delay: -.15s; } .eq i:nth-child(5) { animation-delay: -.45s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.murottal-card.paused .eq i { animation: none; height: 20%; opacity: .5; }

/* ---------- BAR JADWAL SHOLAT ---------- */
.prayer-bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; }
.prayer {
  position: relative; border-radius: var(--radius-lg); text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
  transition: all .6s var(--ease);
}
.prayer .p-name { font-size: 28px; font-weight: 500; color: var(--text-dim); letter-spacing: 1px; }
.prayer .p-time { font-size: 66px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.prayer.minor .p-time { font-size: 54px; }
.prayer.passed { opacity: .5; }
.prayer.next {
  background: linear-gradient(160deg, var(--accent-2), var(--accent));
  color: var(--on-accent); border-color: transparent;
  transform: translateY(-10px);
  box-shadow: 0 18px 40px var(--glow), 0 0 0 4px rgba(255, 255, 255, .08);
}
.prayer.next .p-name { color: var(--on-accent); font-weight: 700; opacity: .85; }
.prayer.next::before {
  content: "BERIKUTNYA"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 14px; font-weight: 800; letter-spacing: 2px; padding: 4px 14px; border-radius: 20px;
  background: var(--bg1); color: var(--accent); border: 1px solid var(--accent);
}

/* ---------- TEKS BERJALAN ---------- */
.ticker { display: flex; align-items: center; gap: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.ticker-tag { flex: none; height: 100%; display: grid; place-items: center; padding: 0 28px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 24px; letter-spacing: 3px; }
.ticker-track { flex: 1; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-content { display: inline-block; padding-left: 100%; font-size: 28px; font-weight: 500; animation: ticker 45s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
.ticker-loc { flex: none; padding: 0 26px; font-size: 19px; color: var(--text-dim); border-left: 1px solid var(--border); height: 100%; display: grid; place-items: center; }

/* ---------- OVERLAY KONDISI SHOLAT ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility .8s;
  background: radial-gradient(circle at 50% 40%, var(--bg2), var(--bg1) 75%);
}
.overlay.show { opacity: 1; visibility: visible; }
.overlay .ov-pattern { position: absolute; inset: 0; }
.ov-kicker { font-size: 34px; letter-spacing: 12px; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.ov-title { font-size: 150px; font-weight: 800; line-height: 1; margin: 18px 0; letter-spacing: 4px; }
.ov-count { font-size: 300px; font-weight: 800; line-height: .95; font-variant-numeric: tabular-nums; letter-spacing: -8px; color: var(--accent-2); text-shadow: 0 0 80px var(--glow); }
.ov-count.urgent { color: #ff6b5e; animation: pulse 1s infinite; }
.ov-sub { font-size: 40px; color: var(--text-dim); margin-top: 18px; font-weight: 400; }
.ov-arab { font-family: var(--font-ar); font-size: 110px; color: var(--accent-2); direction: rtl; line-height: 1.5; }
.ov-progress { width: 900px; height: 14px; border-radius: 7px; background: var(--surface-2); margin-top: 40px; overflow: hidden; }
.ov-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 7px; transition: width .3s linear; }
.ov-mini { position: absolute; top: 40px; left: 50px; right: 50px; display: flex; justify-content: space-between; font-size: 30px; color: var(--text-dim); }
.ov-mini b { color: var(--text); }

/* Lingkaran berdenyut saat adzan */
.rings { position: relative; width: 360px; height: 360px; display: grid; place-items: center; margin-bottom: 10px; }
.rings span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--accent); animation: ring 3s var(--ease) infinite; opacity: 0; }
.rings span:nth-child(2) { animation-delay: 1s; } .rings span:nth-child(3) { animation-delay: 2s; }
@keyframes ring { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }

/* Mode sholat / khutbah: layar redup */
.overlay.dim { background: #000; color: rgba(255, 255, 255, .55); }
.overlay.dim .ov-kicker { color: rgba(255, 255, 255, .4); }
.overlay.dim .ov-title { font-size: 80px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.overlay.dim .ov-sub { color: rgba(255, 255, 255, .35); }
.overlay.dim .ov-clock { font-size: 64px; color: rgba(255, 255, 255, .3); margin-top: 50px; font-variant-numeric: tabular-nums; }

/* ---------- KONTROL FLOATING & PANEL DEMO (di luar panggung) ---------- */
.fullscreen-toggle {
  position: fixed; right: 78px; bottom: 18px; z-index: 50; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); cursor: pointer; font-size: 22px; color: #fff;
  background: rgba(22, 27, 36, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: transform .3s, background .3s, opacity .3s, border-color .3s;
  display: flex; align-items: center; justify-content: center;
}
.fullscreen-toggle:hover {
  transform: scale(1.08); background: rgba(35, 43, 58, .98);
  border-color: rgba(255, 255, 255, .4);
}
.fullscreen-toggle.active {
  background: #10b981; color: #fff; border-color: #10b981;
}

.demo-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 52px; height: 52px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 24px; color: #111; background: #f3d98b;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: transform .3s, opacity .3s;
}
.demo-toggle:hover { transform: rotate(60deg) scale(1.06); }

/* Auto-dim controls in Fullscreen Mode */
:fullscreen .fullscreen-toggle,
:fullscreen .demo-toggle,
body.is-fullscreen .fullscreen-toggle,
body.is-fullscreen .demo-toggle {
  opacity: 0.18;
}
:fullscreen .fullscreen-toggle:hover,
:fullscreen .demo-toggle:hover,
body.is-fullscreen .fullscreen-toggle:hover,
body.is-fullscreen .demo-toggle:hover {
  opacity: 1;
}

/* Sembunyikan kursor saat diam di fullscreen */
body.is-fullscreen.idle-cursor,
:fullscreen.idle-cursor {
  cursor: none !important;
}

/* Tombol Fullscreen di dalam Panel Demo */
.btn-fullscreen-panel {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff; font-weight: 700; font-size: 13px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, .35); transition: all .2s ease;
}
.btn-fullscreen-panel:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, .45);
  filter: brightness(1.06);
}
.btn-fullscreen-panel.active {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 14px rgba(239, 68, 68, .35);
}
.fs-tip {
  font-size: 11px; color: #aaa; margin-top: 5px; text-align: center; line-height: 1.4;
}
.fs-tip kbd {
  background: rgba(255, 255, 255, .12); padding: 1px 5px; border-radius: 4px; font-family: inherit; font-size: 10.5px;
}

.demo {
  position: fixed; right: 18px; bottom: 82px; z-index: 50; width: 320px; max-height: calc(100vh - 110px); overflow: auto;
  background: rgba(16, 18, 22, .92); color: #eee; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px; padding: 16px; font-size: 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  transition: opacity .3s, transform .3s var(--ease);
}
.demo.hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
.demo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.demo-head button { background: none; border: none; color: #aaa; font-size: 16px; cursor: pointer; }
.demo-sec { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.demo-label { font-weight: 600; margin-bottom: 8px; }
.demo-label.sm { font-weight: 500; font-size: 12px; color: #aaa; margin: 10px 0 6px; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.swatch { border: 2px solid transparent; border-radius: 10px; padding: 6px; cursor: pointer; background: rgba(255, 255, 255, .05); color: #ddd; font-size: 11px; text-align: center; transition: all .2s; }
.swatch:hover { background: rgba(255, 255, 255, .1); }
.swatch.active { border-color: #f3d98b; }
.swatch .sw { display: block; height: 30px; border-radius: 6px; margin-bottom: 5px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.demo-row { display: flex; gap: 6px; }
.demo button[data-jump], .demo button[data-speed] {
  flex: 1; padding: 8px 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06); color: #eee; cursor: pointer; font-size: 12.5px; transition: all .2s;
}
.demo button[data-jump]:hover, .demo button[data-speed]:hover { background: rgba(255, 255, 255, .14); }
.demo button.active { background: #f3d98b; color: #111; border-color: #f3d98b; font-weight: 600; }
.demo-check { display: flex; gap: 8px; align-items: center; margin: 4px 0; cursor: pointer; }
.demo select { width: 100%; padding: 7px; border-radius: 8px; background: #22252b; color: #eee; border: 1px solid rgba(255, 255, 255, .14); }
.demo-foot { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 10px; color: #999; font-size: 12px; line-height: 1.6; }
.demo-foot span { color: #f3d98b; font-weight: 600; }
kbd { background: #333; border-radius: 4px; padding: 1px 6px; font-family: inherit; color: #fff; }

/* Kontrol Kota & Koreksi Sholat */
.city-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.city-chip {
  padding: 3px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: #ddd; font-size: 11px; cursor: pointer; transition: all .2s;
}
.city-chip:hover { background: rgba(255,255,255,.15); }
.city-chip.active { background: #f3d98b; color: #111; font-weight: 700; border-color: #f3d98b; }
.search-city-input {
  width: 100%; padding: 7px 10px; border-radius: 8px; background: #22252b; color: #eee;
  border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; margin-bottom: 6px;
}
.koreksi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 6px; }
.koreksi-item { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.04); padding: 4px 8px; border-radius: 6px; }
.koreksi-item span { font-size: 11.5px; }
.koreksi-ctrl { display: flex; align-items: center; gap: 4px; }
.koreksi-ctrl button { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(255,255,255,.2); background: #333; color: #fff; cursor: pointer; font-size: 12px; }
.koreksi-val { font-size: 12px; font-weight: 700; width: 20px; text-align: center; }
.kor-badge {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin-left: 4px;
  vertical-align: super;
  letter-spacing: 0;
  display: inline-block;
}

/* Kontrol Sumber Murottal (Online equran.id & Offline Unggah) */
.murottal-source-toggle {
  display: flex; gap: 6px; margin: 8px 0;
}
.murottal-source-btn {
  flex: 1; padding: 7px 8px; border-radius: 8px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  color: #ddd; font-size: 11.5px; font-weight: 500; cursor: pointer; text-align: center;
  transition: all .2s;
}
.murottal-source-btn:hover { background: rgba(255, 255, 255, .12); }
.murottal-source-btn.active {
  background: #10b981; color: #fff; border-color: #10b981; font-weight: 700;
}

.murottal-api-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: #34d399; margin-top: 5px;
  background: rgba(16, 185, 129, 0.12); padding: 3px 8px; border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.btn-murottal-upload {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 12px; font-weight: 600;
  border: 1px dashed rgba(255, 255, 255, .3); cursor: pointer; text-align: center;
  transition: all .2s; margin-top: 4px;
}
.btn-murottal-upload:hover {
  background: rgba(255, 255, 255, .14); border-color: #f3d98b;
}

.murottal-file-info {
  font-size: 11px; color: #aaa; margin: 6px 0 4px; line-height: 1.4;
  word-break: break-all;
}

.btn-reset-murottal {
  width: 100%; padding: 5px 8px; border-radius: 6px;
  background: transparent; color: #bbb; border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer; font-size: 11px; margin-top: 6px; transition: all .2s;
}
.btn-reset-murottal:hover {
  background: rgba(255, 255, 255, 0.08); color: #fff;
}

.btn-murottal-nav {
  padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.btn-murottal-nav:hover {
  background: rgba(255, 255, 255, 0.2); border-color: #f3d98b; color: #f3d98b;
}

/* F10 TV Pairing Modal */
#pairing-modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 16, 0.88);
  backdrop-filter: blur(20px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#pairing-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.pairing-box {
  width: 620px;
  background: linear-gradient(135deg, rgba(22, 34, 46, 0.95), rgba(13, 21, 28, 0.98));
  border: 1px solid rgba(243, 217, 139, 0.35);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(16, 185, 129, 0.15);
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#pairing-modal.active .pairing-box {
  transform: scale(1);
}

.pairing-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(243, 217, 139, 0.15);
  border: 1px solid rgba(243, 217, 139, 0.4);
  color: #f3d98b;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.pairing-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.pairing-sub {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 24px;
}

.pairing-code-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.pairing-digit-box {
  background: #090e14;
  border: 2px solid #f3d98b;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 6px;
  color: #f3d98b;
  box-shadow: 0 0 25px rgba(243, 217, 139, 0.3);
  font-family: 'Outfit', monospace;
}

.pairing-timer {
  font-size: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.pairing-instructions {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 16px;
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.6;
  text-align: left;
  border-left: 3px solid #10b981;
}

.pairing-btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #94a3b8;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.pairing-btn-close:hover {
  background: rgba(244, 63, 94, 0.2);
  color: #f43f5e;
}

.btn-display-unpair {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #fca5a5;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-display-unpair:hover {
  background: #ef4444;
  color: #fff;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}