/* ============================================================
   Jam Masjid Digital — stylesheet
   Variabel utama diatur lewat :root dan di-override via JS
   ============================================================ */

:root{
  --aksen: #10b981;
  --aksen-2: #34d399;
  --aksen-teks: var(--aksen-2);   /* warna aksen yang aman dibaca di latar tema */
  --aksen-fg: #04140e;            /* warna teks di atas bidang aksen */
  --font-judul: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arab: 'Amiri', 'Traditional Arabic', 'Times New Roman', serif;
  --skala-jam: 100;
  --skala-teks: 100;
  --radius: 18px;
  --font-jam: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-teks: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --durasi-slide: 8s;
}

/* ---------- Tema ---------- */
:root{
  --bg-0:#04120d;
  --bg-1:#071a13;
  --bg-2:#0b2419;
  --panel: rgba(255,255,255,.045);
  --panel-2: rgba(255,255,255,.075);
  --garis: rgba(255,255,255,.10);
  --teks: #f2fbf6;
  --teks-redup: rgba(242,251,246,.62);
  --teks-sangat-redup: rgba(242,251,246,.38);
  --bayang: 0 20px 60px rgba(0,0,0,.45);
}
/* Tema diterapkan pada <html> agar berlaku juga untuk elemen di luar #app (badan, toast) */
html.tema-siang{
  --bg-0:#eef3f0;
  --bg-1:#f7faf8;
  --bg-2:#ffffff;
  --panel: rgba(8,40,28,.05);
  --panel-2: rgba(8,40,28,.09);
  --garis: rgba(8,40,28,.12);
  --teks: #08281c;
  --teks-redup: rgba(8,40,28,.72);
  --teks-sangat-redup: rgba(8,40,28,.56);
  --aksen-fg: #ffffff;   /* --aksen-teks diatur lewat JS agar warna aksen tetap terbaca */
  --bayang: 0 18px 50px rgba(8,40,28,.12);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--font-teks);
  color:var(--teks);
  background:var(--bg-0);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:inherit;color:inherit}

#app{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:
    radial-gradient(1200px 700px at 12% -10%, color-mix(in srgb, var(--aksen) 22%, transparent), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, color-mix(in srgb, var(--aksen) 14%, transparent), transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0) 70%);
  transition:background .5s ease, color .5s ease;
}
#app.kiosk .topbar-actions,
#app.kiosk .running-label{opacity:0; pointer-events:none; transition:opacity .6s}
#app.kiosk:hover .topbar-actions{opacity:1; pointer-events:auto}

/* ================= HEADER ================= */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 22px;
  border-bottom:1px solid var(--garis);
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  backdrop-filter:blur(6px);
  z-index:5;
}
.identitas{display:flex; align-items:center; gap:14px; min-width:0}
.logo{
  width:52px; height:52px; object-fit:contain; border-radius:12px;
  background:var(--panel); padding:4px; flex:none;
}
.identitas-teks{min-width:0}
.identitas h1{
  margin:0;
  font-size:calc(30px * var(--skala-teks) / 100);
  font-weight:800; letter-spacing:.2px; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.identitas p{
  margin:2px 0 0;
  font-size:calc(15px * var(--skala-teks) / 100);
  color:var(--teks-redup);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar-kanan{display:flex; align-items:center; gap:12px; flex:none}
.status-chip{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--teks-redup);
  padding:6px 12px; border-radius:999px;
  background:var(--panel); border:1px solid var(--garis);
  white-space:nowrap;
}
.status-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--aksen-teks);box-shadow:0 0 10px var(--aksen-teks)}
.status-chip.warn .dot{background:#f59e0b;box-shadow:0 0 10px #f59e0b}
.status-chip.err .dot{background:#ef4444;box-shadow:0 0 10px #ef4444}
.topbar-actions{display:flex; gap:8px}
.icon-btn{
  width:42px;height:42px;border-radius:12px;cursor:pointer;
  background:var(--panel); border:1px solid var(--garis);
  font-size:19px; display:grid; place-items:center;
  transition:transform .15s, background .2s, border-color .2s;
}
.icon-btn:hover{background:var(--panel-2); transform:translateY(-1px); border-color:var(--aksen)}
.icon-btn.gear{font-size:22px}

/* ================= MAIN GRID ================= */
main{
  flex:1; min-height:0;
  position:relative; z-index:1;
  display:grid; gap:16px;
  padding:16px 22px;
  grid-template-columns: minmax(420px, 1.05fr) 1fr;
}
.layout-kiri main{grid-template-columns: 1fr minmax(420px, 1.05fr)}
.layout-kiri .kolom-kiri{order:2}
.layout-kiri .panel-media{order:1}
.layout-atas main{grid-template-columns:1fr; grid-template-rows: minmax(120px, 1.2fr) 1fr}
.layout-atas .kolom-kiri{order:2; display:grid; grid-template-columns:1.1fr 1fr; gap:16px}
.layout-bawah main{grid-template-columns:1fr; grid-template-rows: 1fr minmax(120px, 1.1fr)}
.layout-bawah .kolom-kiri{order:1; display:grid; grid-template-columns:1.1fr 1fr; gap:16px}
.layout-bawah .panel-media{order:2}

.kolom-kiri{display:flex; flex-direction:column; gap:16px; min-height:0}

.panel{
  background:var(--panel);
  border:1px solid var(--garis);
  border-radius:var(--radius);
  box-shadow:var(--bayang);
  backdrop-filter:blur(8px);
}

/* ---------- Panel jam ---------- */
.panel-jam{
  padding:20px 24px;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  background:
    radial-gradient(400px 200px at 0% 0%, color-mix(in srgb, var(--aksen) 16%, transparent), transparent 70%),
    var(--panel);
  position:relative; overflow:hidden;
}
.panel-jam::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%);
  pointer-events:none;
}
.jam-wrap{display:flex; flex-direction:column; align-items:center; gap:6px}
.jam{
  font-family:var(--font-jam);
  font-size:calc(92px * var(--skala-jam) / 100 * var(--fit-jam, 1));
  font-weight:800; line-height:1.06;
  padding-bottom:.06em;
  letter-spacing:2px;
  font-variant-numeric: tabular-nums;
  text-shadow:0 6px 40px color-mix(in srgb, var(--aksen) 35%, transparent);
  display:flex; align-items:baseline; gap:4px;
}
.jam .detik{font-size:.42em; opacity:.75; letter-spacing:1px; font-weight:600}
.jam .ampm{font-size:.26em; margin-left:8px; opacity:.7; letter-spacing:2px}
.tanggal{text-align:center; margin-top:2px}
.masehi{font-size:calc(21px * var(--skala-teks) / 100); font-weight:600}
.hijriah{
  font-size:calc(16px * var(--skala-teks) / 100);
  color:var(--aksen-teks); margin-top:2px; font-weight:600;
  letter-spacing:.3px;
}

.next-box{
  margin-top:6px; padding:14px 18px; border-radius:14px;
  background:var(--panel-2); border:1px solid var(--garis);
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
.next-top{display:flex; justify-content:space-between; width:100%; font-size:12px; color:var(--teks-sangat-redup); text-transform:uppercase; letter-spacing:1.4px}
.next-main{display:flex; align-items:baseline; gap:14px}
.next-nama{font-size:calc(30px * var(--skala-teks) / 100); font-weight:800; color:var(--aksen-teks)}
.next-time{font-size:calc(22px * var(--skala-teks) / 100); font-variant-numeric:tabular-nums; color:var(--teks-redup)}
.next-countdown{
  font-family:var(--font-jam);
  font-size:calc(34px * var(--skala-jam) / 100 * .8 * var(--fit-jam, 1));
  font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:2px;
}

/* ---------- Panel jadwal ---------- */
.panel-jadwal{padding:16px 20px 14px; display:flex; flex-direction:column; min-height:0; flex:1; overflow:hidden}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.panel-head h2{margin:0; font-size:calc(18px * var(--skala-teks) / 100); letter-spacing:.4px}
.sumber{font-size:11px; color:var(--teks-sangat-redup); border:1px solid var(--garis); padding:3px 8px; border-radius:999px}
.tabel-jadwal{width:100%; border-collapse:collapse; flex:1}
.tabel-jadwal td{
  padding:var(--pad-baris, calc(7px * var(--skala-teks) / 100)) 12px;
  border-bottom:1px dashed var(--garis);
  font-size:var(--font-baris, calc(22px * var(--skala-teks) / 100));
  line-height:1.28;
}
.tabel-jadwal tr:last-child td{border-bottom:none}
.tabel-jadwal td.nama{color:var(--teks-redup); letter-spacing:.3px}
.tabel-jadwal td.waktu{
  text-align:right; font-weight:700; font-variant-numeric:tabular-nums;
  font-family:var(--font-jam); letter-spacing:1px;
}
.tabel-jadwal tr.aktif td{color:var(--aksen-teks); font-weight:800}
.tabel-jadwal tr.aktif{background:color-mix(in srgb, var(--aksen) 12%, transparent); border-radius:8px}
.tabel-jadwal tr.berikut td.nama{color:var(--aksen-teks)}
.tabel-jadwal tr.berikut{background:color-mix(in srgb, var(--aksen) 7%, transparent)}
.tabel-jadwal tr.berikut td.waktu::after{content:' ◂'; color:var(--aksen-teks); font-size:.8em}
.catatan{margin-top:8px; font-size:calc(12px * var(--skala-teks) / 100); color:var(--teks-sangat-redup)}

/* ---------- Panel media ---------- */
.panel-media{
  position:relative; overflow:hidden; min-height:0; padding:0;
  background:#000;
  display:flex;
}
.media-stage{position:absolute; inset:0; background:#000; overflow:hidden}
.media-stage img, .media-stage video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.media-stage.fit-contain img, .media-stage.fit-contain video{object-fit:contain}
.media-stage iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; will-change:opacity, transform}
.slide.aktif{opacity:1}
.slide.t-slide{transform:translateX(4%); transition:opacity 1s ease, transform 1.4s ease}
.slide.t-slide.aktif{transform:none}
.slide.t-zoom{transform:scale(1.06)}
.slide.t-zoom.aktif{transform:scale(1); transition:opacity 1s ease, transform var(--durasi-slide) linear}
.media-overlay{position:absolute; inset:0; pointer-events:none; background:#000; opacity:0; transition:opacity .3s}
.media-empty{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px; color:var(--teks-sangat-redup); font-size:14px; line-height:1.6}
.media-empty-inner{max-width:320px}
.panel-media.ada-media .media-empty{display:none}

/* ---------- Running text ---------- */
.running{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:0;
  border-top:1px solid var(--garis);
  background:linear-gradient(0deg, rgba(0,0,0,.25), transparent);
  overflow:hidden; flex:none;
}
.running-label{
  flex:none; padding:10px 18px; font-size:13px; font-weight:800; letter-spacing:2px;
  background:var(--aksen-teks); color:var(--aksen-fg); text-transform:uppercase;
}
.running-track{overflow:hidden; flex:1; position:relative; height:100%; display:flex; align-items:center}
.running-text{
  white-space:nowrap; padding-left:100%;
  font-size:calc(18px * var(--skala-teks) / 100);
  will-change:transform;
}

/* ================= ALERT LAYER ================= */
.alert-layer{position:fixed; inset:0; display:none; z-index:60; pointer-events:none}
.alert-layer.on{display:block}
.alert-bg{position:absolute; inset:0; background:rgba(2,10,7,.72); backdrop-filter:blur(10px); animation:fadeIn .5s ease}
.alert-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  text-align:center; padding:40px 60px; border-radius:26px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--aksen) 22%, rgba(255,255,255,.06)), rgba(255,255,255,.05));
  border:1px solid color-mix(in srgb, var(--aksen) 45%, transparent);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  animation:popIn .6s cubic-bezier(.2,1.4,.4,1);
  min-width:min(560px, 90vw);
}
.alert-judul{font-size:calc(52px * var(--skala-teks) / 100); font-weight:800; letter-spacing:1px; color:var(--aksen-teks)}
.alert-sub{font-size:calc(22px * var(--skala-teks) / 100); margin-top:8px; color:var(--teks-redup)}
.alert-besar{font-family:var(--font-jam); font-size:calc(80px * var(--skala-jam) / 100 * .6); font-weight:800; margin-top:14px; font-variant-numeric:tabular-nums}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0; transform:translate(-50%,-45%) scale(.92)}to{opacity:1; transform:translate(-50%,-50%) scale(1)}}

/* ================= DRAWER (pengaturan) ================= */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:70;
}
.drawer-backdrop.on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(460px, 100vw);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border-left:1px solid var(--garis);
  box-shadow:-30px 0 80px rgba(0,0,0,.5);
  transform:translateX(102%); transition:transform .3s cubic-bezier(.3,.9,.3,1);
  display:flex; flex-direction:column; z-index:71;
}
.drawer.on{transform:none}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--garis)}
.drawer-head h2{margin:0; font-size:18px}
.tabs{display:flex; gap:4px; padding:10px 12px; overflow-x:auto; border-bottom:1px solid var(--garis)}
.tab{
  flex:none; padding:8px 12px; border-radius:10px; cursor:pointer; font-size:12.5px;
  background:transparent; border:1px solid transparent; color:var(--teks-redup); white-space:nowrap;
}
.tab:hover{background:var(--panel)}
.tab.active{background:color-mix(in srgb, var(--aksen) 18%, transparent); color:var(--teks); border-color:color-mix(in srgb, var(--aksen) 45%, transparent)}
.drawer-body{flex:1; overflow-y:auto; padding:16px 18px 24px}
.drawer-foot{padding:12px 18px; border-top:1px solid var(--garis); display:flex; align-items:center; justify-content:space-between; gap:10px}
.tab-page{display:none}
.tab-page.active{display:block}

.field{margin-bottom:14px}
.field label{display:block; font-size:12.5px; color:var(--teks-redup); margin-bottom:6px; letter-spacing:.3px}
input[type=text],input[type=number],select,textarea{
  width:100%; padding:10px 12px; border-radius:10px;
  background:var(--panel); border:1px solid var(--garis); font-size:14px; outline:none;
}
input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:var(--aksen)}
textarea{resize:vertical}
input[type=file].file{
  width:100%; padding:9px; border-radius:10px; font-size:13px;
  background:var(--panel); border:1px dashed var(--garis); cursor:pointer;
}
input[type=range]{width:100%; accent-color:var(--aksen)}
input[type=color]{width:52px; height:36px; padding:2px; border-radius:8px; background:var(--panel); border:1px solid var(--garis)}
.hint{font-size:11.5px; color:var(--teks-sangat-redup); margin-top:6px; line-height:1.5}
.hint code{background:var(--panel); padding:1px 5px; border-radius:5px}
.val{color:var(--aksen-teks); font-weight:700}
.row{display:flex; align-items:center; gap:10px}
.row.wrap{flex-wrap:wrap}
.row.gap{gap:10px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.grid3 .mini label{font-size:11.5px; color:var(--teks-redup); display:block; margin-bottom:4px; text-transform:capitalize}
.check{display:flex !important; align-items:center; gap:9px; font-size:13.5px; color:var(--teks) !important; margin-bottom:10px; cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--aksen)}
.btn{
  padding:10px 14px; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600;
  background:var(--panel-2); border:1px solid var(--garis); transition:transform .12s, background .2s;
}
.btn:hover{transform:translateY(-1px); background:var(--panel)}
.btn.primary{background:var(--aksen-teks); color:var(--aksen-fg); border-color:transparent}
.btn.danger{background:color-mix(in srgb, #ef4444 22%, transparent); border-color:#ef444455; color:#fecaca}
.btn.small{padding:7px 10px; font-size:12.5px}
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{
  flex:1; min-width:88px; padding:9px 10px; border-radius:10px; cursor:pointer; font-size:12.5px;
  background:var(--panel); border:1px solid var(--garis); color:var(--teks-redup);
}
.seg button.on{background:color-mix(in srgb, var(--aksen) 20%, transparent); color:var(--teks); border-color:var(--aksen)}
.swatches{display:flex; gap:8px; margin-bottom:8px}
.swatches button{width:34px; height:34px; border-radius:50%; background:var(--c); border:2px solid transparent; cursor:pointer}
.swatches button.on{border-color:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent)}
.sub{margin:22px 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:1.6px; color:var(--teks-sangat-redup)}
.callout{
  padding:10px 12px; border-radius:10px; font-size:13px; margin-bottom:14px;
  background:color-mix(in srgb, var(--aksen) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--aksen) 35%, transparent);
}
.media-page{display:none}
.media-page.on{display:block}
.thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.thumb{position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--garis); background:var(--panel); aspect-ratio:16/10}
.thumb img,.thumb video{width:100%; height:100%; object-fit:cover; display:block}
.thumb .del{position:absolute; top:4px; right:4px; background:rgba(0,0,0,.65); color:#fff; border:0; border-radius:6px; cursor:pointer; font-size:12px; padding:2px 6px}
.thumb .nm{position:absolute; bottom:0; left:0; right:0; font-size:10px; padding:3px 6px; background:linear-gradient(0deg, rgba(0,0,0,.8), transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.logo-preview{max-width:96px; max-height:96px; margin-top:8px; border-radius:10px; display:none; background:var(--panel); padding:4px}
.info-box{font-size:12px; color:var(--teks-redup); line-height:1.7; background:var(--panel); border:1px solid var(--garis); border-radius:10px; padding:12px}

/* ================= RESPONSIF ================= */
@media (max-width: 980px){
  main{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    grid-auto-rows:max-content !important;
  }
  .layout-tiga main{grid-template-columns:1fr !important}
  .layout-tiga .kolom-kiri{display:flex !important; flex-direction:column !important}
  .layout-kanan main, .layout-kiri main{grid-template-columns:1fr !important}
  .layout-atas .kolom-kiri, .layout-bawah .kolom-kiri{grid-template-columns:1fr}
  .kolom-kiri{order:1 !important}
  .panel-jadwal{flex:0 0 auto}
  .layout-klasik main{
    grid-template-columns:1fr !important;
    grid-template-rows:max-content max-content !important;   /* biar bisa digulir, tidak dipijit */
    padding:10px 16px;
  }
  .layout-klasik .panel-jadwal,
  .layout-klasik .panel-jam{
    grid-column:1 !important; grid-row:auto !important; min-height:auto !important;
  }
  html.tpl-klasik #app::after{border-width:8px}
  html.tpl-klasik #app::before{background-size:28px 28px}
  .panel-media{order:2 !important; min-height:220px}
  main{overflow-y:auto}
  .jam{font-size:calc(70px * var(--skala-jam) / 100 * var(--fit-jam, 1))}
  html.tpl-klasik .jam{font-size:calc(78px * var(--skala-jam) / 100 * var(--fit-jam, 1))}
}
@media (max-width: 620px){
  .identitas h1{font-size:calc(21px * var(--skala-teks) / 100)}
  .topbar{padding:10px 12px}
  main{padding:12px}
  .jam{font-size:calc(58px * var(--skala-jam) / 100 * var(--fit-jam, 1))}
  .grid3{grid-template-columns:repeat(2,1fr)}
}

/* mode potret untuk TV/tablet vertikal */
@media (orientation: portrait) and (min-width: 621px){
  main{grid-template-columns:1fr; grid-template-rows:1fr 1fr}
}

/* layar penuh */
#app:fullscreen{border-radius:0}

/* ================= MODE: MEDIA SEBAGAI LATAR BELAKANG ================= */
#app.media-bg .panel-media{
  position:fixed; inset:0; z-index:0; border-radius:0; border:0;
  box-shadow:none; background:#000;
}
#app.media-bg main{position:relative; z-index:1; grid-template-columns:1fr; grid-template-rows:1fr}
#app.media-bg .kolom-kiri{width:min(1150px, 96%); margin:0 auto; align-self:center}
#app.media-bg .panel{
  background:color-mix(in srgb, var(--bg-0) 70%, transparent);
  backdrop-filter:blur(16px);
  border-color:color-mix(in srgb, var(--aksen) 20%, transparent);
}
#app.media-bg .topbar,
#app.media-bg .running{
  position:relative; z-index:2;
  background:color-mix(in srgb, var(--bg-0) 68%, transparent);
  backdrop-filter:blur(10px);
}

/* ================= TOAST / PENGINGAT ================= */
.toast{
  position:fixed; top:20px; left:50%; z-index:80;
  transform:translate(-50%,-160%); opacity:0;
  padding:12px 22px; border-radius:12px;
  background:var(--bg-2);
  border:1px solid color-mix(in srgb, var(--aksen) 55%, transparent);
  color:var(--teks); font-size:15px; font-weight:600;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  transition:transform .45s cubic-bezier(.2,1.3,.4,1), opacity .35s;
  max-width:min(560px, 90vw); text-align:center;
}
.toast.on{transform:translate(-50%,0); opacity:1}

/* ================= PENYESUAIAN LAYAR PENDEK ================= */
@media (max-height: 860px) and (min-width: 981px){
  .jam{font-size:calc(70px * var(--skala-jam) / 100 * var(--fit-jam, 1))}
  .masehi{font-size:calc(18px * var(--skala-teks) / 100)}
  .hijriah{font-size:calc(14px * var(--skala-teks) / 100)}
  .next-nama{font-size:calc(24px * var(--skala-teks) / 100)}
  .next-time{font-size:calc(18px * var(--skala-teks) / 100)}
  .next-countdown{font-size:calc(34px * var(--skala-jam) / 100 * .68 * var(--fit-jam, 1))}
  .panel-jam{padding:14px 18px; gap:10px}
}
@media (max-height: 720px) and (min-width: 981px){
  .jam{font-size:calc(58px * var(--skala-jam) / 100 * var(--fit-jam, 1))}
  .next-box{padding:10px 14px; gap:5px}
  .next-countdown{font-size:calc(34px * var(--skala-jam) / 100 * .6 * var(--fit-jam, 1))}
  .identitas h1{font-size:calc(24px * var(--skala-teks) / 100)}
  .topbar{padding:8px 18px}
  main{padding:12px 18px}
}

/* ============================================================
   TATA LETAK 3 KOLOM — semua bagian tampil berdampingan
   ============================================================ */
.layout-tiga main{grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.25fr)}
.layout-tiga .kolom-kiri{
  display:grid; gap:16px; min-height:0;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .82fr);
  grid-template-rows: 1fr;
}
.layout-tiga .panel-jam,
.layout-tiga .panel-jadwal{min-height:0}

/* ============================================================
   MODE STANDBY — hanya jam besar + media
   ============================================================ */
html.mode-standby main{grid-template-columns:1fr; grid-template-rows:1fr; padding:0 22px}
html.mode-standby .kolom-kiri{display:block; width:min(1020px, 94%); margin:0 auto; align-self:center}
html.mode-standby .panel-jadwal{display:none !important}
html.mode-standby .running{display:none !important}
html.mode-standby .panel-media{
  position:fixed !important; inset:0; z-index:0; border-radius:0; border:0; box-shadow:none;
}
html.mode-standby .panel-jam{
  background:transparent; border-color:transparent; box-shadow:none;
}
html.mode-standby .panel-jam::after{display:none}
html.mode-standby .jam{
  font-size:calc(196px * var(--skala-jam) / 100 * var(--fit-jam, 1));
  text-shadow:0 10px 60px color-mix(in srgb, var(--aksen) 45%, transparent);
}
html.mode-standby .masehi{font-size:calc(32px * var(--skala-teks) / 100)}
html.mode-standby .hijriah{font-size:calc(25px * var(--skala-teks) / 100)}
html.mode-standby .next-nama{font-size:calc(34px * var(--skala-teks) / 100)}
html.mode-standby .next-countdown{font-size:calc(62px * var(--skala-jam) / 100 * var(--fit-jam, 1))}
html.mode-standby .next-box{
  background:color-mix(in srgb, var(--bg-0) 55%, transparent);
  border-color:color-mix(in srgb, var(--aksen) 35%, transparent);
  backdrop-filter:blur(10px);
}
html.mode-standby .topbar,
html.mode-standby .status-chip{background:color-mix(in srgb, var(--bg-0) 55%, transparent)}
html.mode-standby .basmalah{font-size:34px; margin-bottom:10px}

/* ============================================================
   TEMPLATE ARAB MODERN — nuansa kearaban, elegan & profesional
   ============================================================ */
html.tpl-arab{
  --bg-0:#021423;
  --bg-1:#04253a;
  --bg-2:#06334d;
  --panel: rgba(255,255,255,.055);
  --panel-2: rgba(255,255,255,.085);
  --garis: rgba(232,199,102,.30);
  --teks: #f8f1de;
  --teks-redup: rgba(248,241,222,.72);
  --teks-sangat-redup: rgba(248,241,222,.46);
  --font-judul: 'Cinzel', 'Amiri', Georgia, serif;
  --radius: 14px;
}
/* versi terang template arab */
html.tpl-arab.tema-siang{
  --bg-0:#f5efe1;
  --bg-1:#fbf7ee;
  --bg-2:#ffffff;
  --panel: rgba(4,32,52,.045);
  --panel-2: rgba(4,32,52,.085);
  --garis: rgba(150,114,23,.35);
  --teks: #123049;
  --teks-redup: rgba(18,48,73,.75);
  --teks-sangat-redup: rgba(18,48,73,.58);
}

/* motif geometris islam (bintang 8) sebagai latar halus */
html.tpl-arab #app::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  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='%23e8c766' stroke-width='1.1'%3E%3Cpath d='M60 6 L69 51 L114 60 L69 69 L60 114 L51 69 L6 60 L51 51 Z'/%3E%3Ccircle cx='60' cy='60' r='27'/%3E%3Cpath d='M0 0h120v120H0z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:130px 130px;
  opacity:.12;
}
html.tpl-arab.tema-siang #app::before{opacity:.16}

/* header & judul */
html.tpl-arab .identitas h1{
  font-family:var(--font-judul); letter-spacing:.6px;
  font-weight:700;
}
html.tpl-arab .topbar{border-bottom:1px solid rgba(232,199,102,.32)}
html.tpl-arab .identitas .logo{border:1px solid rgba(232,199,102,.35)}

/* kaligrafi basmalah */
.basmalah{
  display:none; text-align:center;
  font-family:var(--font-arab); font-size:26px; line-height:1.5;
  color:var(--aksen-teks); letter-spacing:0;
  opacity:.95; text-shadow:0 2px 18px rgba(0,0,0,.35);
}
html.tpl-arab .basmalah{
  display:block; position:relative; margin:2px 0 12px;
}
html.tpl-arab .basmalah::before,
html.tpl-arab .basmalah::after{
  content:''; position:absolute; top:50%; width:22%; height:1px;
  background:linear-gradient(90deg, transparent, var(--aksen-teks), transparent);
  opacity:.6;
}
html.tpl-arab .basmalah::before{left:0}
html.tpl-arab .basmalah::after{right:0}

/* ornamen sudut pada panel */
html.tpl-arab .panel-jadwal,
html.tpl-arab .panel-media{position:relative}
html.tpl-arab .panel-jadwal::before,
html.tpl-arab .panel-jadwal::after,
html.tpl-arab .panel-media::before,
html.tpl-arab .panel-media::after{
  content:''; position:absolute; width:24px; height:24px; z-index:3;
  border:2px solid var(--aksen-teks); opacity:.5; pointer-events:none;
}
html.tpl-arab .panel-jadwal::before,
html.tpl-arab .panel-media::before{top:7px; left:7px; border-right:0; border-bottom:0; border-radius:7px 0 0 0}
html.tpl-arab .panel-jadwal::after,
html.tpl-arab .panel-media::after{bottom:7px; right:7px; border-left:0; border-top:0; border-radius:0 0 7px 0}

/* kepala panel & aksen */
html.tpl-arab .panel-head h2{
  font-family:var(--font-judul); letter-spacing:1.4px; position:relative; padding-left:24px;
  text-transform:uppercase; font-size:calc(16px * var(--skala-teks) / 100);
}
html.tpl-arab .panel-head h2::before{
  content:'✦'; position:absolute; left:0; top:50%; transform:translateY(-50%);
  color:var(--aksen-teks); font-size:13px;
}
html.tpl-arab .panel-jam{
  background:
    radial-gradient(420px 220px at 0% 0%, color-mix(in srgb, var(--aksen) 20%, transparent), transparent 70%),
    var(--panel);
}
html.tpl-arab .tabel-jadwal td{border-bottom:1px dashed rgba(232,199,102,.22)}
html.tpl-arab .next-box{
  background:linear-gradient(180deg, rgba(232,199,102,.10), rgba(255,255,255,.03));
  border-color:rgba(232,199,102,.35);
}
html.tpl-arab .tabel-jadwal tr.aktif{background:color-mix(in srgb, var(--aksen) 18%, transparent)}
html.tpl-arab .running-label{
  background:linear-gradient(90deg, var(--aksen-teks), color-mix(in srgb, var(--aksen-teks) 70%, #7a5b12));
  letter-spacing:3px;
}
html.tpl-arab .running{border-top:1px solid rgba(232,199,102,.3)}
html.tpl-arab .jam{text-shadow:0 6px 44px color-mix(in srgb, var(--aksen) 45%, transparent)}
html.tpl-arab .drawer{border-left:1px solid rgba(232,199,102,.28)}

/* ============================================================
   TEMPLATE EMERALD — hijau zamrud pekat
   ============================================================ */
html.tpl-emerald{
  --bg-0:#02110c;
  --bg-1:#04231a;
  --bg-2:#063426;
  --garis: rgba(52,211,153,.22);
}
html.tpl-emerald.tema-siang{
  --bg-0:#eef6f1; --bg-1:#f8fcf9; --bg-2:#ffffff;
  --garis: rgba(6,60,42,.16);
}
html.tpl-emerald .identitas h1{font-family:var(--font-judul)}
html.tpl-emerald .panel{border-color:var(--garis)}

/* ============================================================
   CATATAN HAK CIPTA (hanya di panel pengaturan)
   ============================================================ */
.drawer-foot .foot-kiri{display:flex; flex-direction:column; gap:2px; min-width:0}
.copy{
  font-size:11.5px; letter-spacing:.4px;
  color:var(--teks-sangat-redup);
  border-top:1px dashed var(--garis); padding-top:6px; margin-top:2px;
}

/* ============================================================
   TEMPLATE KLASIK EMAS
   Bingkai ukiran emas · jadwal kiri · jam & media kanan · pita bawah
   ============================================================ */
html.tpl-klasik{
  --bg-0:#0c0904;
  --bg-1:#140f07;
  --bg-2:#1b1409;
  --panel: rgba(20,14,6,.62);
  --panel-2: rgba(30,22,10,.75);
  --garis: rgba(182,159,121,.34);
  --teks: #f3e7cb;
  --teks-redup: rgba(243,231,203,.72);
  --teks-sangat-redup: rgba(243,231,203,.5);
  --emas: #b69f79;
  --emas-terang: #e8d6a8;
  --emas-tua: #8a6a2e;
  --emas-teks: #e8d6a8;      /* emas untuk teks (menyesuaikan tema) */
  --marun: #771232;
  --biru: #14425f;
  --font-judul: 'Cinzel', 'Amiri', Georgia, serif;
  --radius: 8px;
}
html.tpl-klasik.tema-siang{
  --bg-0:#efe6d1; --bg-1:#f8f2e4; --bg-2:#fffaf0;
  --panel: rgba(255,252,244,.7);
  --panel-2: rgba(255,250,238,.9);
  --garis: rgba(122,90,30,.35);
  --teks: #2b1f0c;
  --teks-redup: rgba(43,31,12,.78);
  --teks-sangat-redup: rgba(43,31,12,.6);
  --emas-teks: #7a5518;      /* emas gelap agar terbaca di latar terang */
}

/* ---- bingkai ukiran emas ---- */
html.tpl-klasik #app::after{
  content:''; position:fixed; inset:0; z-index:50; pointer-events:none;
  border:16px solid var(--emas);
  border-image:linear-gradient(150deg, #f6e6bd 0%, #b69f79 22%, #7d5f22 42%,
               #e7d3a5 58%, #a58a5b 78%, #6d5019 100%) 1;
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.72),
    inset 0 0 0 6px rgba(182,159,121,.55),
    inset 0 0 90px rgba(0,0,0,.55);
}
/* ---- ornamen sudut ---- */
html.tpl-klasik #app::before{
  content:''; position:fixed; inset:0; z-index:51; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='%23b69f79'%3E%3Cpath d='M26 1 L31 21 L51 26 L31 31 L26 51 L21 31 L1 26 L21 21 Z' opacity='.95'/%3E%3C/g%3E%3Ccircle cx='26' cy='26' r='4.5' fill='%23140f07'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='%23b69f79'%3E%3Cpath d='M26 1 L31 21 L51 26 L31 31 L26 51 L21 31 L1 26 L21 21 Z' opacity='.95'/%3E%3C/g%3E%3Ccircle cx='26' cy='26' r='4.5' fill='%23140f07'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='%23b69f79'%3E%3Cpath d='M26 1 L31 21 L51 26 L31 31 L26 51 L21 31 L1 26 L21 21 Z' opacity='.95'/%3E%3C/g%3E%3Ccircle cx='26' cy='26' r='4.5' fill='%23140f07'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='%23b69f79'%3E%3Cpath d='M26 1 L31 21 L51 26 L31 31 L26 51 L21 31 L1 26 L21 21 Z' opacity='.95'/%3E%3C/g%3E%3Ccircle cx='26' cy='26' r='4.5' fill='%23140f07'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px);
  background-size:44px 44px;
  opacity:.9;
}

/* ---- kepala: nama masjid rata kanan, menyatu dengan media ---- */
html.tpl-klasik .topbar{
  background:transparent; border-bottom:0;
  padding:26px 40px 8px;
}
html.tpl-klasik .identitas{
  order:2; margin-left:auto; flex-direction:row-reverse; text-align:right;
}
html.tpl-klasik .identitas-teks{text-align:right}
html.tpl-klasik .identitas h1{
  font-family:var(--font-judul); font-weight:700; letter-spacing:1px;
  color:var(--emas-teks);
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}
html.tpl-klasik .identitas p{
  color:var(--teks-redup); text-shadow:0 2px 10px rgba(0,0,0,.85);
  position:relative; padding-bottom:6px;
}
html.tpl-klasik .identitas p::after{
  content:''; position:absolute; right:0; bottom:0; width:88px; height:2px;
  background:linear-gradient(90deg, transparent, var(--emas), transparent);
}
html.tpl-klasik .topbar-kanan{order:3}
html.tpl-klasik .logo{border:1px solid var(--emas-tua); background:rgba(0,0,0,.35)}

/* ---- panel jadwal (kiri) ---- */
html.tpl-klasik .panel-jadwal{
  background:linear-gradient(180deg, rgba(119,18,50,.30), rgba(12,9,4,.78));
  border:1px solid var(--emas-tua);
  box-shadow:0 18px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(232,214,168,.12);
  backdrop-filter:blur(6px);
  padding:14px 6px 12px;
}
html.tpl-klasik .panel-head{
  padding:0 16px 8px; margin-bottom:6px;
  border-bottom:1px solid rgba(182,159,121,.35);
}
html.tpl-klasik .panel-head h2{
  font-family:var(--font-judul); letter-spacing:3px; text-transform:uppercase;
  color:var(--emas-teks); font-size:calc(15px * var(--skala-teks) / 100);
}
html.tpl-klasik .sumber{border-color:var(--emas-tua); color:var(--teks-redup)}

/* baris jadwal: nama di atas, waktu di bawah */
html.tpl-klasik .layout-klasik .tabel-jadwal{display:block}
html.tpl-klasik .layout-klasik .tabel-jadwal tbody{display:block}
html.tpl-klasik .layout-klasik .tabel-jadwal tr{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:.26em 16px; border-bottom:1px solid rgba(182,159,121,.16);
}
html.tpl-klasik .layout-klasik .tabel-jadwal tr:last-child{border-bottom:0}
html.tpl-klasik .layout-klasik .tabel-jadwal td{
  border:0; padding:0; text-align:left; background:none !important;
}
html.tpl-klasik .layout-klasik .tabel-jadwal td.nama{
  font-size:.62em; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--emas-teks); font-weight:600; line-height:1.4;
}
html.tpl-klasik .layout-klasik .tabel-jadwal td.waktu{
  font-size:1.5em; font-weight:800; line-height:1.15;
  color:var(--teks); text-shadow:0 2px 12px rgba(0,0,0,.5);
}
html.tpl-klasik .layout-klasik .tabel-jadwal td.waktu::after{content:none !important}
html.tpl-klasik .layout-klasik .tabel-jadwal tr.aktif{
  background:linear-gradient(90deg, rgba(119,18,50,.75), rgba(119,18,50,.25));
  border-left:4px solid var(--emas-terang);
}
html.tpl-klasik .layout-klasik .tabel-jadwal tr.aktif td.nama{color:var(--emas-teks)}
html.tpl-klasik .layout-klasik .tabel-jadwal tr.berikut{
  background:linear-gradient(90deg, rgba(182,159,121,.28), transparent);
  border-left:4px solid var(--emas);
}
html.tpl-klasik .catatan{
  padding:8px 16px 0; color:var(--teks-sangat-redup);
  border-top:1px solid rgba(182,159,121,.25);
}

/* ---- panel jam (kanan) menyatu dengan media ---- */
html.tpl-klasik .panel-jam{
  background:transparent; border-color:transparent; box-shadow:none;
  justify-content:center; gap:10px;
}
html.tpl-klasik .panel-jam::after{display:none}
html.tpl-klasik .layout-klasik .jam{
  font-size:calc(140px * var(--skala-jam) / 100 * var(--fit-jam, 1));
}
html.tpl-klasik .jam{
  color:var(--emas-teks); letter-spacing:4px;
  text-shadow:0 4px 30px rgba(0,0,0,.9), 0 0 60px rgba(182,159,121,.45);
}
html.tpl-klasik .masehi{
  font-family:var(--font-judul); letter-spacing:1px;
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}
html.tpl-klasik .hijriah{
  color:var(--emas-teks); text-shadow:0 2px 12px rgba(0,0,0,.9);
}
html.tpl-klasik .tanggal{
  padding:8px 26px; border-radius:6px;
  background:linear-gradient(90deg, transparent, rgba(12,9,4,.65), transparent);
}
html.tpl-klasik .next-box{
  background:linear-gradient(180deg, rgba(20,66,95,.55), rgba(12,9,4,.7));
  border:1px solid var(--emas-tua); backdrop-filter:blur(6px);
}
html.tpl-klasik .next-nama{color:var(--emas-teks)}
html.tpl-klasik .next-label{color:var(--emas-teks)}
html.tpl-klasik .basmalah{display:block; color:var(--emas-teks); font-size:30px; margin-bottom:6px}

/* ---- pita pengumuman bawah ---- */
html.tpl-klasik .running{
  margin:0 26px 26px; border-radius:6px; overflow:hidden;
  border:1px solid var(--emas-tua);
  background:linear-gradient(90deg, rgba(20,66,95,.9), rgba(119,18,50,.78));
  box-shadow:0 10px 34px rgba(0,0,0,.5);
}
html.tpl-klasik .running-label{
  background:linear-gradient(180deg, var(--emas-terang), var(--emas-tua));
  color:#150f07; letter-spacing:2px;
}
html.tpl-klasik .running-text{text-shadow:0 2px 8px rgba(0,0,0,.7)}

/* ============================================================
   TATA LETAK KLASIK — jadwal kiri, jam & media kanan
   ============================================================ */
.layout-klasik main{
  grid-template-columns: minmax(0, .46fr) minmax(0, 1fr);
  grid-template-rows:1fr;
  padding:10px 30px 14px;
}
.layout-klasik .kolom-kiri{display:contents}
.layout-klasik .panel-jadwal{grid-column:1; grid-row:1; min-height:0}
.layout-klasik .panel-jam{grid-column:2; grid-row:1; min-height:0}
.layout-klasik .panel-media{
  position:fixed !important; inset:0; z-index:0;
  border-radius:0; border:0; box-shadow:none;
}

/* jadwal jangan sampai terjepit oleh media di tata letak berdampingan */
.layout-kanan .panel-jam,
.layout-kiri .panel-jam{flex:0 1 auto; max-height:48%}
.layout-kanan .panel-jadwal,
.layout-kiri .panel-jadwal{flex:1 1 0%; max-height:58%}

/* jam lebih kecil bila panelnya pendek (tata letak atas/bawah) */
.layout-atas .jam,
.layout-bawah .jam{font-size:calc(64px * var(--skala-jam) / 100 * var(--fit-jam, 1))}
html.tpl-klasik .layout-atas .jam,
html.tpl-klasik .layout-bawah .jam{font-size:calc(76px * var(--skala-jam) / 100 * var(--fit-jam, 1))}

/* ruang sangat sempit: jam dipadatkan agar tidak terpotong */
html.padat .basmalah{display:none}
html.padat .panel-jam{gap:6px; padding:10px 14px}
html.padat .next-box{
  flex-direction:row; align-items:center; justify-content:center;
  gap:14px; padding:8px 16px; margin-top:4px;
}
html.padat .next-top{display:none}
html.padat .next-countdown{font-size:calc(22px * var(--skala-jam) / 100 * var(--fit-jam, 1))}
html.padat .next-nama{font-size:calc(22px * var(--skala-teks) / 100)}
html.padat .next-time{font-size:calc(17px * var(--skala-teks) / 100)}
html.padat .jam-wrap{gap:2px}
html.padat .tanggal{margin-top:0}
html.padat .masehi{font-size:calc(16px * var(--skala-teks) / 100)}
html.padat .hijriah{font-size:calc(12px * var(--skala-teks) / 100); margin-top:0}
html.padat .tanggal{padding:6px 12px}