/* ============================================================
   Mawaqit - style.css
   Brand green identity; gold accent only at key moments.
   Type: Plus Jakarta Sans (Indonesian open-source typeface).
   ============================================================ */

:root {
    --primary: #0B6B4F;
    --primary-dark: #084D39;
    --primary-deep: #063A29;
    --accent: #EAB60A;
    --accent-tv: #FFDE59;
    --ink: #1A1A1A;
    --ink-soft: #4B5563;
    --muted: #6B7280;
    --line: #E5E7EB;
    --bg: #FFFFFF;
    --bg-soft: #F4F7F5;
    --danger: #C0362C;
    --ok: #0B7A57;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-1: 0 1px 2px rgba(16, 40, 32, 0.08);
    --shadow-2: 0 12px 32px rgba(16, 40, 32, 0.16);
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.01em; }

.muted { color: var(--muted); font-size: 0.92rem; margin: 0; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============ Buttons ============ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
    min-height: 44px;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--primary); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: rgba(11, 107, 79, 0.08); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #9e2b23; }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }
.btn-sm { padding: 7px 12px; min-height: 36px; font-size: 0.88rem; }
.btn-block { width: 100%; }

/* Tombol pratinjau suara beep (di samping dropdown Pilihan Suara Beep). */
.sound-preview-row { display: flex; gap: 8px; align-items: stretch; }
.sound-play-btn { padding: 0; width: 44px; min-width: 44px; flex: 0 0 auto; }
.sound-play-btn svg { display: block; }
@keyframes soundPlayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(11, 107, 79, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(11, 107, 79, 0); }
}
.sound-play-btn.is-playing { background: var(--bg-soft); border-color: var(--primary); animation: soundPlayPulse 1s ease-out infinite; }

/* ============ Brand mark ============ */

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.brand-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 7px;
    background: url('/img/icons/mawaqit-192.png') center / cover no-repeat;
    box-shadow: 0 1px 3px rgba(6, 58, 41, 0.28);
}
.brand-name { font-size: 1.15rem; color: var(--ink); }
.brand-name strong { color: var(--primary); font-weight: 800; }
.brand-wordmark {
    display: block;
    height: 1.7em;
    width: auto;
    flex: 0 0 auto;
}
/* untuk latar gelap (footer, sidebar admin, super nav) */
.brand-wordmark--light { filter: brightness(0) invert(1); }

/* ============ Public site header/footer ============ */

.site-header {
    border-bottom: 1px solid var(--line);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 30;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.site-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-nav > a:not(.btn) { padding: 8px 10px; color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; }
.site-nav > a:hover { color: var(--primary); text-decoration: none; }
.nav-spacer { flex: 1; }

.site-footer { background: var(--primary-deep); color: #d8e6df; margin-top: 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 32px; padding: 48px 24px 32px; flex-wrap: wrap; }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-name strong { color: var(--accent-tv); }
.footer-note { color: #a9c3b8; max-width: 320px; margin-top: 12px; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(140px, auto)); gap: 8px 24px; align-content: start; }
.footer-links a { color: #cfe0d8; font-size: 0.95rem; padding: 4px 0; }
.footer-links a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 16px 24px; color: #7fa091; font-size: 0.85rem; }

/* ============ Landing ============ */

.hero {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cpattern id='khatam-hero' width='200' height='200' patternUnits='userSpaceOnUse'%3E%3Cg fill='none' stroke='%23063A29' stroke-opacity='0.055' stroke-width='2.5' stroke-linejoin='round'%3E%3Crect x='56' y='56' width='88' height='88'/%3E%3Crect x='56' y='56' width='88' height='88' transform='rotate(45 100 100)'/%3E%3Cg%3E%3Crect x='-44' y='-44' width='88' height='88'/%3E%3Crect x='-44' y='-44' width='88' height='88' transform='rotate(45 0 0)'/%3E%3C/g%3E%3Cg%3E%3Crect x='156' y='-44' width='88' height='88'/%3E%3Crect x='156' y='-44' width='88' height='88' transform='rotate(45 200 0)'/%3E%3C/g%3E%3Cg%3E%3Crect x='-44' y='156' width='88' height='88'/%3E%3Crect x='-44' y='156' width='88' height='88' transform='rotate(45 0 200)'/%3E%3C/g%3E%3Cg%3E%3Crect x='156' y='156' width='88' height='88'/%3E%3Crect x='156' y='156' width='88' height='88' transform='rotate(45 200 200)'/%3E%3C/g%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23khatam-hero)'/%3E%3C/svg%3E"), linear-gradient(180deg, #f2f8f4 0%, #ffffff 100%);
    padding: 72px 0 84px;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    margin: 0 0 16px;
}
.hero-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}
.hero-title { font-size: 4vw; margin-bottom: 18px; }
.hero-title { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 18px; }
.hero-sub { font-size: 1.15rem; color: var(--ink-soft); max-width: 34em; margin: 0 0 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { color: var(--muted); margin-top: 16px; font-size: 0.95rem; }

.hero-stage { display: flex; justify-content: flex-end; }
.tv-frame { width: 100%; max-width: 460px; }
.tv-bezel {
    background: #0c0e0d;
    border-radius: 22px;
    padding: 14px;
    box-shadow: var(--shadow-2);
    border: 1px solid #2a2f2c;
    position: relative;
    /* JANGAN tambah aspect-ratio di sini. Tinggi bezel sudah ditentukan oleh
       teknik padding-top di bawah (padding-top: calc(56.25% + 14px)). Kalau
       aspect-ratio ikut aktif, kedua teknik menumpuk dan bezel jadi hampir
       dua kali lebih tinggi dari 16:9. */
    overflow: hidden;
}
/* Iframe dimulai dari sudut kiri-atas bingkai, BUKAN titik tengahnya.
   hero-tv.js menggesernya memakai koordinat piksel absolut
   (translate(kiri, atas) dengan transform-origin: 0 0). Kalau anchor-nya
   top:50%/left:50%, koordinat itu dihitung relatif ke titik tengah sehingga
   layar tergeser satu tinggi dan satu lebar bingkai ke kanan bawah. */
.tv-bezel iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 1280px;
    height: 720px;
    border: 0;
    border-radius: 12px;
    display: block;
    background: #071713;
    transform-origin: 0 0;
    pointer-events: none;
}
.tv-stand {
    width: 160px;
    height: 18px;
    margin: -2px auto 0;
    background: linear-gradient(#232825, #101312);
    border-radius: 0 0 10px 10px;
}

.how { padding: 64px 0; background: #fff; }
.section-kicker {
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    margin: 0 0 8px;
}
.section-title { font-size: 3vw; margin-bottom: 36px; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 36px; }
.how-grid { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin: 0 auto; }
.how-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 24px;
    padding: 0 0 30px;
    position: relative;
    border: 0;
}
.how-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 64px;
    bottom: -4px;
    width: 2px;
    background: var(--line);
}
.how-num {
    grid-row: 1 / span 2;
    align-self: start;
    width: 56px;
    height: 56px;
    margin: 0;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}
.how-step h3 { margin-top: 2px; grid-column: 2; }
.how-step p { color: var(--ink-soft); margin: 0; grid-column: 2; }

.features { background: var(--bg-soft); padding: 72px 0; }
.feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 48px;
    margin: 0;
}
.feature-item {
    border-bottom: 1px solid var(--line);
    padding: 18px 2px 20px;
}
.feature-item dt { font-weight: 800; font-size: 1.02rem; }
.feature-item dd { margin: 6px 0 0; color: var(--ink-soft); }

.cta-final { padding: 80px 0; background: var(--primary-deep); color: #fff; text-align: center; }
.cta-final h2 { color: #fff; font-size: 3vw; }
.cta-final h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.cta-final p { color: #b9d4c9; max-width: 40em; margin: 0 auto 28px; }
.cta-final .btn-outline { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.cta-final .btn-outline:hover { background: rgba(255, 255, 255, 0.1); }

/* ============ Interior pages ============ */

.page-main { min-height: 60vh; }
.page-head { background: var(--bg-soft); padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: 3vw; }
.page-head h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.page-head p { color: var(--ink-soft); margin: 0; }

.guide, .legal { padding: 48px 24px 72px; max-width: 780px; margin: 0 auto; }
.guide-list { list-style: none; padding: 0; margin: 0; }
.guide-step { padding: 28px 0; border-bottom: 1px solid var(--line); }
.guide-step:last-child { border-bottom: 0; }
.guide-head { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.guide-head h2 { margin: 0; font-size: 1.25rem; }
.guide-num {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
.guide-step p { color: var(--ink-soft); margin: 0; }

.tip-box {
    background: #fff7e0;
    border: 1px solid #f0dfae;
    border-radius: var(--radius);
    padding: 22px 26px;
    margin: 32px 0;
}
.tip-box h3 { margin-bottom: 12px; }
.tip-box ul { margin: 0; padding-left: 20px; color: #5b4a12; }

.legal h2 { font-size: 1.25rem; margin-top: 32px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 20px; }

.not-found { text-align: center; padding: 90px 24px; }
.not-found-code { font-size: 4.5rem; font-weight: 800; color: var(--primary); margin: 0; }

/* ============ Auth ============ */

.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(110% 70% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
        linear-gradient(160deg, var(--primary-deep), var(--primary) 62%, var(--ok));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.auth-wrap { width: 100%; max-width: 440px; }
.auth-card {
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: var(--shadow-2);
}
.auth-brand { margin-bottom: 22px; }
.auth-card h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; }
.auth-sub { color: var(--muted); margin: 0 0 24px; line-height: 1.6; }
.auth-switch { text-align: center; color: var(--muted); margin: 20px 0 0; font-size: 0.95rem; }
.auth-switch a { font-weight: 700; }

.alert {
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 0.95rem;
}
.alert-error { background: #fdecea; color: #8f231b; border: 1px solid #f5c0bb; }
.alert-ok { background: #e9f7ef; color: #0B6B4F; border: 1px solid #bfe3cf; }

/* ============ Super Admin (aplikasi terpisah) ============ */
.super-body { background: var(--bg-soft); min-height: 100vh; }
.super-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 20px;
    background: var(--primary-deep);
    color: #fff;
}
.super-nav .brand-name { color: #fff; }
.super-nav .super-links { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.super-nav .super-links a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-weight: 600; font-size: 0.92rem; padding: 8px 12px; border-radius: 8px; }
.super-nav .super-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.super-nav .super-links a.is-active { color: #fff; background: rgba(255, 255, 255, 0.16); }
.super-main { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 16px; }

/* ============ Forms ============ */

.form-stack { display: flex; flex-direction: column; gap: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.92rem; }
.field input,
.field select,
.field textarea {
    font: inherit;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    background: #fff;
    width: 100%;
}
.auth-card .field input,
.auth-card .field select {
    border-radius: var(--radius);
    min-height: 48px;
    box-sizing: border-box;
}
.auth-card .field input:focus,
.auth-card .field select:focus {
    box-shadow: 0 0 0 3px rgba(11, 107, 79, 0.18);
}
.field input::placeholder,
.field textarea::placeholder { color: #9aa3af; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 107, 79, 0.18);
}
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 92px; }
.pw-toggle {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    min-width: 76px;
    border: 0;
    border-radius: 8px;
    background: var(--bg-soft);
    color: var(--primary-dark);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0 12px;
}
.pw-toggle:hover { background: #e6efec; }
.pw-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.btn[disabled] { opacity: 0.7; cursor: wait; }
/* Tombol yang mati karena kuota penuh (bukan sedang proses): kursor tegas
   "tidak bisa diklik", bukan spinner yang mengesankan ada proses berjalan. */
.btn.is-penuh { cursor: not-allowed; }
@media (max-width: 480px) {
    .auth-body { padding: 16px; }
    .auth-card { padding: 28px 20px; border-radius: 18px; }
    .auth-card h1 { font-size: 1.4rem; }
    .btn-block { min-height: 48px; }
}
.field textarea { resize: vertical; }
.filed-note { margin-top: 4px; }
.field-hint { margin: 2px 0 0; font-size: 0.83rem; color: var(--muted); }
.block-note {
    margin: 0;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--muted);
}
.page-section { display: flex; flex-direction: column; gap: 12px; }
.page-section h3 { margin: 0; font-size: 1rem; font-weight: 700; }

.stepper { display: flex; align-items: stretch; }
.stepper input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.stepper-unit {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* ============ Toggle switch ============ */

.switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 52px; height: 30px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.switch-track {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: #d1d5db;
    border-radius: 30px;
    transition: background 0.2s ease;
    pointer-events: none;
}
.switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(22px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--accent); outline-offset: 2px; }

.toogle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}
.toogle-row:first-child { border-top: 0; }

.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset legend {
    font-weight: 800;
    font-size: 0.95rem;
    padding-bottom: 8px;
}
.field-inline-switch { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.field-inline-switch > div { flex: 1; }

/* ============ Admin shell ============ */

.admin-body {
    background: var(--bg-soft);
    min-height: 100vh;
}
.admin-shell { display: flex; height: 100vh; overflow: hidden; }

.admin-sidebar {
    width: 248px;
    flex: 0 0 248px;
    background: var(--primary);
    color: #e9f3ee;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    height: 100%;
    overflow-y: auto;
}
.admin-brand { color: #fff; margin: 0 8px 22px; }
.admin-brand .brand-name strong { color: var(--accent-tv); }
.admin-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.admin-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d3e7dd;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
}
.admin-menu-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; }
.admin-menu-link.active { background: #fff; color: var(--primary); }
.menu-icon { display: inline-flex; width: 22px; height: 22px; flex: 0 0 auto; }
.menu-icon svg { width: 22px; height: 22px; }
.tv-link { margin: 16px 4px 0; justify-content: center; color: #fff !important; border-color: rgba(255, 255, 255, 0.45); }
.tv-link:hover { background: rgba(255, 255, 255, 0.12); }
.tv-link svg, .tv-link { display: inline-flex; align-items: center; gap: 8px; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.admin-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 26px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
    /* Di atas pratinjau TV mobile yang lengket (z-index 20), supaya dropdown
       menu akun tidak tertutup pratinjau di layar kecil. */
    z-index: 30;
}
.admin-title { font-size: 1.15rem; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-close { display: none; }
.topbar-simulasi { display: none; }
.menu-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.menu-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

.admin-akun { position: relative; }
.admin-akun-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.admin-akun-btn:hover { background: var(--bg-soft); border-color: var(--primary); color: var(--primary); }
.admin-akun-btn[aria-expanded="true"] { background: var(--bg-soft); border-color: var(--primary); color: var(--primary); }
.admin-akun-btn svg { width: 20px; height: 20px; }
.admin-akun-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 208px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
}
.admin-akun-menu[hidden] { display: none; }
.admin-akun-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.admin-akun-item svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); }
.admin-akun-item:hover { background: var(--bg-soft); color: var(--primary); text-decoration: none; }
.admin-akun-item:hover svg { color: var(--primary); }
.admin-akun-keluar, .admin-akun-keluar svg { color: var(--danger); }
.admin-akun-keluar:hover { background: #fdecea; color: var(--danger); }

.modal-form { display: flex; flex-direction: column; gap: 16px; }

.admin-content { padding: 26px; display: flex; flex-direction: column; gap: 26px; flex: 1; overflow-y: auto; }

/* ============ Admin components ============ */

.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }

.admin-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.admin-card-head h2 { margin: 0 0 4px; font-size: 1.2rem; }
.admin-card-head .muted { margin: 0; }
.card-inner { padding-top: 20px; border-top: 1px solid var(--line); }

.admin-actions { display: flex; justify-content: flex-end; }

.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
}
.stat-label { margin: 0 0 6px; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.stat-value { margin: 0 0 8px; font-size: 1.7rem; font-weight: 800; color: var(--ink); }
.stat-in { color: var(--ok); }
.stat-out { color: var(--danger); }
.stat-action { font-size: 0.9rem; font-weight: 700; }

.data-list { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.data-list div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 10px; }
.data-list dt { color: var(--muted); }
.data-list dd { margin: 0; font-weight: 600; }

.todo-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.todo-steps li { display: flex; gap: 12px; }
.todo-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-top: 5px; }
.todo-steps strong { display: block; }

.list-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.list-row:last-child { border-bottom: 0; }
.row-actions { display: flex; gap: 8px; align-items: center; }
.row-end { display: flex; align-items: center; gap: 12px; }
.inline-form { margin: 0; display: inline-flex; }
.url-text {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 2px 0 0;
}

.empty-state {
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    color: var(--muted);
    background: var(--bg-soft);
}

.chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}
.chip-ok { background: #e2f4ec; color: var(--ok); }
.chip-off { background: #f1f1f1; color: var(--muted); }
.chip-link { background: rgba(11, 107, 79, 0.1); color: var(--primary); text-decoration: none; }
.chip-link:hover { background: rgba(11, 107, 79, 0.18); }
button.chip { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }

.badge { display: inline-block; font-size: 0.75rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; text-transform: capitalize; }
.badge-in { background: #e2f4ec; color: var(--ok); }
.badge-out { background: #fdecea; color: var(--danger); }
.amount { font-weight: 800; }
.amount-in { color: var(--ok); }
.amount-out { color: var(--danger); }

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
.user-row { display: flex; align-items: center; gap: 12px; }

.iqamah-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.kas-stats { grid-template-columns: repeat(3, 1fr); }

.qris-preview[hidden] { display: none; }
.qris-preview img {
    width: 200px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px;
    background: #fff;
}

.tip-light { background: #fff7e0; border-color: #f0dfae; }
.tip-light ul { margin: 0; padding-left: 20px; color: #5b4a12; }

/* ============ Bottom nav (mobile admin) ============ */

.admin-bottombar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    justify-content: space-around;
    z-index: 40;
}
.admin-bottombar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    min-height: 44px;
}
.admin-bottombar a.active { color: var(--primary); }
.admin-bottombar a svg { width: 20px; height: 20px; }

/* ============================================================
   TV DISPLAY
   ============================================================ */

.tv-body {
    background: #050807;
    overflow: hidden;
    height: 100vh;
    font-family: var(--font);
    color: #fff;
}
.tv-app {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
}
.tv-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: #cfe0d8;
    font-size: 1.2rem;
}
.tv-loading-spinner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--accent);
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.tv-fullscreen-btn {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 60;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.2s ease;
}
.tv-fullscreen-btn:hover { opacity: 1; }
.tv-fullscreen-btn svg { width: 24px; height: 24px; }

.tv-screen {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3vh;
    gap: clamp(14px, 3vh, 34px);
    padding: 3vw;
    padding: clamp(18px, 3vw, 40px);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    text-align: center;
}
.tv-bg-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }

/* Motif bintang-8 fullscreen (iqamah & kas) */
.tv-motif { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: hidden; }
.tv-motif svg { display: block; width: 100%; height: 100%; }
.tv-screen > .tv-top,
.tv-screen > .kas-screen { position: relative; z-index: 1; }

.tv-theme-malam-hijau { background-image: radial-gradient(120% 100% at 50% 0%, rgba(20, 100, 70, 0.45), transparent 60%), linear-gradient(160deg, #06331f 0%, #0B6B4F 55%, #052b1b 100%); }
.tv-theme-malam-biru { background-image: linear-gradient(160deg, #0a1a30 0%, #143a63 55%, #081830 100%); }
.tv-theme-senja { background-image: linear-gradient(160deg, #3b1506 0%, #8a4411 60%, #33110a 100%); }
.tv-theme-polos-gelap { background-color: #0b0c0d; }
.tv-theme-kabah { background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('/img/bg-kabah.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.tv-theme-masjid-agung { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/bg-masjid-agung.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.tv-theme-masjid-senja { background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('/img/bg-masjid-senja.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.tv-theme-koridor-masjid { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/bg-koridor-masjid.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Custom user-uploaded background — inline style diset via JS */
.tv-theme-custom { background-size: cover; background-position: center; background-repeat: no-repeat; }


/* ---- New AsrarTV Layout Styles ---- */

.tv-surface {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    background-color: #0b0c0d;
    color: #fff;
}

.bg-layer {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    pointer-events: none;
}

.bg-img {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-size: cover;
    background-position: center;
}

.bg-scrim {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: linear-gradient(rgba(4, 10, 18, 0.55) 0%, rgba(4, 10, 18, 0.3) 40%, rgba(4, 10, 18, 0.7) 100%);
}

.tv-content {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Base text styles */
.t-date-mas { font-size: 1.4vw; font-weight: 500; color: rgba(255, 255, 255, 0.85); margin: 0; }
.t-date-mas { font-size: clamp(1rem, 1.4vw, 1.6rem); font-weight: 500; color: rgba(255, 255, 255, 0.85); margin: 0; }
.t-date-hij { font-size: 1.4vw; font-weight: 600; color: var(--hijri-color, #6ee7b7); margin: 4px 0 0; }
.t-date-hij { font-size: clamp(1rem, 1.4vw, 1.6rem); font-weight: 600; color: var(--hijri-color, #6ee7b7); margin: 4px 0 0; }
.t-date-hij-inline { color: var(--hijri-color, inherit); }
.t-clock-large { font-size: 5.5vw; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; margin: 0; }
.t-clock-large { font-size: clamp(3rem, 5.5vw, 6.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; margin: 0; }
.t-clock-huge { font-size: 7vw; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; margin: 0; }
.t-clock-huge { font-size: clamp(3.5rem, 7vw, 8rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; margin: 0; }
.t-clock-mid { font-size: 4vw; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; margin: 0; }
.t-clock-mid { font-size: clamp(2.2rem, 4vw, 4.5rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; margin: 0; }
.t-clock-small { font-size: 2vw; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); margin: 0; }
.t-clock-small { font-size: clamp(1.3rem, 2vw, 2.4rem); font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); margin: 0; }
.t-clock-sec { font-size: 2vw; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.t-clock-sec { font-size: clamp(1.3rem, 2vw, 2.4rem); font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.t-clock-tz { font-size: 0.8em; font-weight: 400; color: rgba(255, 255, 255, 0.7); margin-left: 10px; }
.t-cd-top { font-size: 1.4vw; color: rgba(255, 255, 255, 0.85); margin: 8px 0 0; }
.t-cd-top { font-size: clamp(0.95rem, 1.4vw, 1.8rem); color: rgba(255, 255, 255, 0.85); margin: 8px 0 0; }
.t-cd-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cd-color, #6ee7b7); }
/* Nama masjid + alamat sebagai satu blok bertumpuk. Tanpa ini, nama dan alamat
   jadi dua anak terpisah dari `.ft` yang `display:flex`, sehingga keduanya
   sejajar di dasar footer, bukan alamat turun di bawah nama.
   Ukuran huruf nama dinaikkan ke variabel supaya jumlah lebarnya bisa dipakai
   lagi untuk menggeser alamat tepat di bawah huruf pertama. */
.t-masjid-blok {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  --t-nama-fs: calc(clamp(1.19rem, 1.63vw, 1.88rem) * var(--masjid-scale, 1));
  --t-nama-fs-huge: calc(clamp(1.75rem, 2.75vw, 3.5rem) * var(--masjid-scale, 1));
  min-width: 0;
}
.t-masjid { font-size: var(--t-nama-fs, calc(1.63vw * var(--masjid-scale, 1))); font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.85); margin: 0; }
.t-masjid { font-size: var(--t-nama-fs, calc(clamp(1.19rem, 1.63vw, 1.88rem) * var(--masjid-scale, 1))); font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.85); margin: 0; }

/* Alamat masjid, tampil di bawah nama. Ukurannya diatur terpisah lewat
   "Ukuran alamat (%)" di menu Tampilan, jadi skala terpisah dari nama.
   overflow-wrap: anywhere supaya alamat panjang membungkus dan tidak meluber. */
.t-alamat {
  font-size: calc(0.98vw * var(--alamat-scale, 1));
  font-size: calc(clamp(0.72rem, 0.98vw, 1.13rem) * var(--alamat-scale, 1));
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.66);
  margin: -0.38em 0 0;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.t-alamat.is-huge { margin-top: -0.24em; }

/* Kalau ada logo, nama dimulai setelah logo. Alamat harus mulai di bawah huruf
   pertama nama, bukan di bawah logo, jadi digeser sebesar lebar logo:
   1.5em + 0.4em untuk logo biasa dan 1.05em + 0.3em untuk logo besar. Keduanya
   dihitung dari font-size nama, makanya dikalikan variabel nama, bukan em alamat. */
.t-masjid-blok.has-logo .t-alamat { padding-left: calc(2.05 * var(--t-nama-fs)); }
.t-masjid-blok-huge.has-logo .t-alamat { padding-left: calc(1.46 * var(--t-nama-fs-huge)); }

/* Logo masjid di sebelah kiri nama. Elemennya hanya dibuat kalau logo ada.
   Memakai vertical-align, bukan flex, supaya layout footer tidak berubah. */
/* ===== Layout 0: Modern (standar) =====
   TUJUAN: digital signage untuk dibaca jelas dari beberapa meter, bukan
   halaman web. Proporsi horizontal 70% area gambar dan 30% panel jadwal;
   vertikal 14% header, 78% isi, sisanya untuk running text.
   Semua ukuran pakai clamp() + vw/vh supaya tetap terbaca di 1280x720,
   1366x768, sampai 1920x1080 tanpa perlu breakpoint per ukuran. */
.lay-modern {
  display: grid;
  grid-template-columns: 70fr 30fr;
  /* Baris ketiga dipakai kartu "Menuju [sholat]" di bawah area gambar. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* Jarak tepi dan jarak antarbaris dipisah satu per satu supaya bisa
     diubah tanpa saling affecting:
       --md-edge            jarak tepi atas dan sisi
       --md-jarak-header    card nama masjid ke card slide dan jadwal
       --md-jarak-menuju    card slide/jadwal ke kartu "Menuju [sholat]"
       --md-jarak-bawah     kartu "Menuju [sholat]" ke running text
     Jarak vertikal memakai margin per baris, bukan row-gap, karena row-gap
     berlaku untuk kedua jarak sekaligus sehingga tidak bisa diatur terpisah. */
  --md-edge: clamp(7px, 0.9vw, 13px);
  /* Tinggi minimum satu baris jadwal. Delapan baris inilah yang mengisi panel,
     jadi nilainya ikut tinggi layar dan ikut berubah di kedua mode. */
  --md-baris-min: clamp(34px, 8.2vh, 92px);
  --md-baris-min-layar-penuh: clamp(38px, 9vh, 100px);
  --md-jarak-header: clamp(7px, 0.8vw, 12px);
  --md-jarak-menuju: clamp(10px, 1.2vw, 18px);
  --md-jarak-bawah: clamp(1.75px, 0.225vw, 3.25px);
  column-gap: 1.2vw;
  column-gap: clamp(10px, 1.2vw, 18px);
  row-gap: 0;
  width: 100%;
  height: 100%;
  padding: var(--md-edge);
  box-sizing: border-box;
  text-align: left;
}
.lay-modern .md-main,
.lay-modern .md-panel { margin-top: var(--md-jarak-header, 0.8vw); }
.lay-modern .md-panel { margin-top: var(--md-jarak-header, clamp(7px, 0.8vw, 12px)); }

/* --- Header --- */
.lay-modern .md-hd {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto);
  align-items: center;
  gap: 1.6vw;
  gap: clamp(12px, 1.6vw, 26px);
  padding: 1.2vw 1.8vw;
  padding: clamp(10px, 1.2vw, 18px) clamp(14px, 1.8vw, 28px);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(7, 26, 43, 0.92), rgba(21, 32, 43, 0.86));
  border: 1px solid rgba(77, 163, 232, 0.28);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}
.lay-modern .md-ident {
  min-width: 0;
  /* Jarak antara nama masjid dan nama jalan, dikurangi dari angkatan nama.
     Jarak awal 0.14em dikeparuh menjadi 0.07em. Deklarasi dan nilai cadangan
     harus sama supaya tidak surprising saat fallback dipakai. */
  --md-jarak-nama-alamat: 0.07em;
}
.lay-modern .md-ident .t-masjid {
  /* Teks nama dan logo disejajarkan dari tepi atas, bukan dari garis dasar.
     align-items flex-start menaruh tepi atas kotak baris teks sama dengan tepi
     atas logo; gap menggantikan margin-right logo supaya jaraknya tetap sama. */
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  line-height: 1;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.lay-modern .md-ident .t-logo { margin-right: 0; flex: 0 0 auto; align-self: flex-start; background: rgba(255, 255, 255, 0.16); }
/* line-height 1 membuat kotak baris setinggi huruf, sedangkan tinggi huruf
   kapital lebih pendek, jadi ada sisa ruang di atas. Angkat sebesar sisa itu
   supaya tepi atas huruf kapital tepat sama dengan tepi atas logo. */
.lay-modern .md-ident .md-nama-teks { margin-top: var(--md-nama-angkat, -0.14em); }
/* Nama jalan ("nama jalan") didekatkan ke nama masjid. Jarak sebelumnya 0.14em,
   jadi separuhnya 0.07em; nilainya dijumlahkan dengan angkatan nama supaya
   keduanya tetap bergerak bersama saat variabelnya diubah. Ditambah sedikit lagi
   lewat --md-turun-alamat supaya alamat tidak menempel terlalu rapat ke nama. */
.lay-modern .md-ident .t-alamat {
  margin-top: -0.85em;
  color: var(--md-accent, #4DA3E8);
}

.lay-modern .md-date { text-align: center; white-space: normal; }
.lay-modern .md-date-mas {
  margin: 0;
  font-size: 1.25vw;
  font-size: clamp(0.95rem, 1.25vw, 1.5rem);
  font-weight: 600;
  color: #fff;
}
.lay-modern .md-date-hij {
  margin: 2px 0 0;
  font-size: 1.05vw;
  font-size: clamp(0.82rem, 1.05vw, 1.22rem);
  /* Mengikuti pengaturan "Warna tanggal hijriah" di menu Tampilan. */
  color: var(--hijri-color, rgba(255, 255, 255, 0.72));
}

/* Jam digital: format HH:MM:SS monospace, paling dominan setelah jadwal. */
/* Jam dan singkatan zona waktu sebaris: WIB di sebelah kanan angka jam, dua
   elemen ini rata tengah secara vertikal sehingga tidak lagi appear di bawah
   jam. justify-content flex-end menjaga kolom ini tetap rata kanan. */
.lay-modern .md-clock { display: flex; align-items: center; justify-content: flex-end; gap: 0.7vw; text-align: right; }
.lay-modern .md-clock { display: flex; align-items: center; justify-content: flex-end; gap: clamp(6px, 0.7vw, 12px); text-align: right; }
.lay-modern .md-clock-time {
  margin: 0;
  font-family: 'DM Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 3.6vw;
  font-size: clamp(2.1rem, 3.6vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(77, 163, 232, 0.35);
}
.lay-modern .md-clock-sec { color: var(--md-accent, #4DA3E8); }
.lay-modern .md-clock-tz {
  /* Satu baris bersama jam, jadi tidak perlu kompensasi letter-spacing lagi:
     posisinya sudah ditentukan oleh gap dan align-items pada induknya. */
  margin: 0;
  font-size: 0.9vw;
  font-size: clamp(0.72rem, 0.9vw, 1.05rem);
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Area gambar slide (70%) --- */
.lay-modern .md-main { grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; }
.lay-modern .md-slide { position: relative; width: 100%; height: 100%; }
.lay-modern .md-slide-media {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: var(--radius);
  overflow: hidden;
  /* Latar card slide mengikuti pengaturan transparansi card di menu Tampilan,
     memakai pola color-mix yang sama dengan card jadwal di layout lain. */
  background: rgba(7, 26, 43, 0.55);
  background: color-mix(in srgb, rgba(7, 26, 43, 0.55) calc(var(--card-alpha, 100) * 1%), transparent);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.26);
}
/* Gambar ditampilkan utuh dan proporsional (tidak dipotong, tidak gepeng),
   tingginya dipakai semaksimal mungkin selama rasio aslinya terjaga. */
.lay-modern .md-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/* Lapisan crossfade pergantian gambar (Modern dan Center): menutupi gambar
   lama dengan gambar baru selama 1,2 detik, lalu disembunyikan lagi. */
.md-slide-gambar .md-slide-fade {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.lay-modern .md-slide-count {
  position: absolute;
  right: 1vw;
  right: clamp(10px, 1vw, 18px);
  bottom: 1vw;
  bottom: clamp(10px, 1vw, 18px);
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(7, 26, 43, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.85vw;
  font-size: clamp(0.72rem, 0.85vw, 1rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Pembungkus gambar slide: mengecil mengikuti ukuran gambar, menjadi
   jangkar badge countdown supaya menempel di kanan atas gambar yang
   terlihat. Di Modern mengisi penuh media, di Center mengecil mengikuti
   gambar yang dipusatkan. */
.md-slide-gambar { position: relative; }
.lay-modern .md-slide-gambar { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.lay-center .md-slide-gambar { height: 100%; }
/* Badge countdown: bentuk dan ukuran SAMA di semua layout. Hanya posisinya
   yang beda — overlay absolut di area gambar, mengalir di dekat tanggal. */
.md-ramadan-count {
    padding: 6px 14px;
    padding: clamp(6px, 0.7vw, 12px) clamp(10px, 1vw, 18px);
    border-radius: 999px;
    color: #000;
    font-size: 0.95vw;
    font-size: clamp(0.8rem, 0.95vw, 1.15rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    /* Teks selalu satu baris, tidak di-wrap. */
    white-space: nowrap;
}
/* Di area gambar slide, badge overlay absolut di kanan atas. */
.md-slide-media .md-ramadan-count {
    position: absolute;
    top: 1vw;
    top: clamp(10px, 1vw, 18px);
    right: 1vw;
    right: clamp(10px, 1vw, 18px);
}
/* Badge yang sama dipakai di dekat tanggal (klasik, fokus, samping,
   center), di bawah logo (foto), dan di bawah tanggal (jadwal-saja).
   Di sana badge mengalir mengikuti layout, bukan overlay absolut. */
.hd-date .md-ramadan-count,
.ft-ramadan-wrap .md-ramadan-count,
.jd-ramadan-wrap .md-ramadan-count {
    position: static;
    display: inline-block;
    margin-top: 8px;
    margin-top: clamp(6px, 1vh, 12px);
}
/* .hd-date itu flex column: tanpa ini badge meregang selebar wadah. */
.hd-date .md-ramadan-count { align-self: flex-start; }
.ft-ramadan-wrap:empty,
.jd-ramadan-wrap:empty { display: none; }
.ft-ramadan-wrap { text-align: left; }
.jd-ramadan-wrap { text-align: center; }
.lay-modern .md-slide-kosong {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  text-align: center;
  padding: 8px;
  /* Jangkar badge countdown. */
  position: relative;
}
.lay-modern .md-kosong-title {
  margin: 0;
  font-size: 1.8vw;
  font-size: clamp(1.1rem, 1.8vw, 2.1rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}
.lay-modern .md-kosong-note { margin: 0; font-size: 1vw; color: rgba(255, 255, 255, 0.6); }
.lay-modern .md-kosong-note { margin: 0; font-size: clamp(0.8rem, 1vw, 1.1rem); color: rgba(255, 255, 255, 0.6); }

/* --- Panel jadwal (30%), tidak ikut berubah saat gambar berganti --- */
.lay-modern .md-panel {
  grid-column: 2;
  /* Menyempit dari baris gambar sampai baris kartu "Menuju", jadi panel kanan
     tetap satu kolom penuh sementara kartu itu hanya ada di kolom kiri. */
  grid-row: 2 / 4;
  min-width: 0;
  min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5vh;
    gap: clamp(4px, 0.5vh, 9px);
    /* Padding dan gap sengaja dibuat rapat: isi column 30% adalah delapan baris
       waktu, dan padding yang terlalu longgar membuat baris terakhir (Isya)
       terdorong keluar panel lalu terpotong oleh .tv-surface. */
    padding: 1vw;
    padding: clamp(8px, 1vw, 16px);
    overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(7, 26, 43, 0.92), rgba(21, 32, 43, 0.88));
  border: 1px solid rgba(77, 163, 232, 0.24);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}
.lay-modern .md-panel-title {
  margin: 0;
  font-size: 1.05vw;
  font-size: clamp(0.85rem, 1.05vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--md-accent, #4DA3E8);
  text-align: center;
}
/* Panel kanan menjulang sampai baris paling bawah, jadi daftar waktu dibagi
   rata mengisi tinggi panel. Barisnya boleh menyusut kalau layar pendek,
   supaya semua waktu termasuk Isya selalu terlihat. */
.lay-modern .md-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.3vh;
  gap: clamp(2px, 0.3vh, 5px);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
    /* Ukuran baris, huruf, dan kotak rectangle diukur dari TINGGI layar (vh),
       bukan lebar. Alasannya: panel jadwal menempati kolom 30% tetapi harus
       memuat delapan baris, jadi pembatasnya tinggi layar, bukan lebar.
       Dengan vh ukuran ikut menyesuaikan di mode layar penuh maupun mode
       jendela biasa.
       --md-baris-min adalah tinggi minimum satu baris; delapan baris inilah
       yang mengisi panel. */
    .lay-modern .pl-row {
      /* flex 0 1 auto: baris boleh menyusut kalau tinggi layar tidak cukup,
         sehingga Isya tidak pernah terdorong keluar panel. */
      flex: 0 1 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: var(--md-baris-min, 8.2vh);
      min-height: var(--md-baris-min, clamp(34px, 8.2vh, 92px));
      padding: 0.5vh 0.9vw;
      padding: clamp(2px, 0.5vh, 7px) clamp(9px, 0.9vw, 15px);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid transparent;
      /* Garis kiri dari rectangle ikut mengikuti tinggi layar. */
      border-left: 0.5vh solid var(--md-accent, #4DA3E8);
      border-left: clamp(3px, 0.5vh, 6px) solid var(--md-accent, #4DA3E8);
      overflow: hidden;
    }
  .lay-modern .pl-row.pl-dim { background: rgba(255, 255, 255, 0.04); border-left-color: rgba(255, 255, 255, 0.22); }
    .lay-modern .pl-name,
    .lay-modern .pl-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lay-modern .pl-name { font-size: calc(2.6vh * var(--sholat-nama-scale, 1)); color: rgba(255, 255, 255, 0.82); font-weight: 600; }
    .lay-modern .pl-name { font-size: calc(clamp(0.85rem, 2.6vh, 1.6rem) * var(--sholat-nama-scale, 1)); color: rgba(255, 255, 255, 0.82); font-weight: 600; }
    .lay-modern .pl-time { font-size: calc(3.8vh * var(--sholat-waktu-scale, 1)); color: #fff; }
    .lay-modern .pl-time { font-size: calc(clamp(1.15rem, 3.8vh, 2.4rem) * var(--sholat-waktu-scale, 1)); color: #fff; }
.lay-modern .pl-row.pl-next {
  background: var(--next-bg, rgba(0, 166, 81, 0.24));
  border-color: rgba(0, 200, 120, 0.55);
  box-shadow: 0 0 18px rgba(0, 166, 81, 0.28);
}
  .lay-modern .pl-row.pl-next .pl-name { color: #fff; }
  .lay-modern .pl-row.pl-next .pl-time { color: #fff; }
  /* ===== Mode layar penuh =====
     Saat layar penuh, viewport sama dengan layar TV: tidak ada chrome browser
     dan penonton duduk jauh, jadi baris, huruf, dan rectangle boleh lebih
     besar. Nilai vh tetap dipakai, jadi otomatis mengikuti ukuran layar. */
  :fullscreen .lay-modern { --md-baris-min: var(--md-baris-min-layar-penuh, 9vh); }
  :fullscreen .lay-modern { --md-baris-min: var(--md-baris-min-layar-penuh, clamp(38px, 9vh, 100px)); }
:fullscreen .lay-modern .pl-name { font-size: calc(2.9vh * var(--sholat-nama-scale, 1)); }
:fullscreen .lay-modern .pl-name { font-size: calc(clamp(0.85rem, 2.9vh, 1.75rem) * var(--sholat-nama-scale, 1)); }
:fullscreen .lay-modern .pl-time { font-size: calc(4.2vh * var(--sholat-waktu-scale, 1)); }
:fullscreen .lay-modern .pl-time { font-size: calc(clamp(1.15rem, 4.2vh, 2.6rem) * var(--sholat-waktu-scale, 1)); }

/* --- Highlight waktu sholat berikutnya + countdown --- */
/* --- Kartu waktu sholat berikutnya, satu baris di bawah area gambar --- */
.lay-modern .md-next {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
  align-self: end;
  /* Jarak dari card slide ke kartu ini, terpisah dari jarak ke running text
     supaya keduanya bisa diatur sendiri. */
  margin-top: var(--md-jarak-menuju, 1.2vw);
  margin-top: var(--md-jarak-menuju, clamp(10px, 1.2vw, 18px));
  display: flex;
  /* align-items center, bukan baseline: label kecil dan angka besar butuh rata
     tengah supaya teksnya benar-benar di tengah antara tepi atas dan tepi bawah
     kartu. Dengan baseline angka besar terlihat terdorong ke atas. */
    align-items: center;
    justify-content: center;
    /* Satu baris: label dan angka tidak boleh patah ke bawah. */
    flex-wrap: nowrap;
  white-space: nowrap;
  /* min-width mencegah kartu bergeser tiap digit berubah, max-width
     mencegah meluber keluar area gambar. */
  min-width: 26vw;
  min-width: clamp(250px, 26vw, 440px);
  max-width: 84%;
  gap: 1vw;
  gap: clamp(8px, 1vw, 18px);
    padding: 0.9vh 2vw;
    padding: clamp(7px, 0.9vh, 14px) clamp(16px, 2vw, 34px);
    border-radius: var(--radius);
    /* Latar dipindah ke ::before supaya opaqueness bisa mengikuti pengaturan
       "card alpha" di menu Tampilan tanpa ikut memudarkan teksnya. */
    position: relative;
    background: none;
    border: 1px solid rgba(77, 163, 232, 0.45);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(var(--card-blur, 6px));
  }
  .lay-modern .md-next::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(8, 120, 209, 0.30), rgba(7, 26, 43, 0.72));
    opacity: calc(var(--card-alpha, 100) / 100);
    pointer-events: none;
  }
  /* Isi kartu harus di atas ::before, kalau tidak ikut tertutup latar. */
  .lay-modern .md-next > * { position: relative; z-index: 1; }
/* Garis pemisah vertikal di antara label dan angka. Tingginya menyesuaikan
   tinggi kartu supaya tetap simetris di atas dan bawah. */
.lay-modern .md-next-sep {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.28);
}
  .lay-modern .md-next-lbl {
    margin: 0;
    font-size: 1vw;
    font-size: clamp(0.8rem, 1vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
  }
  .lay-modern .md-next-count {
    margin: 0;
    font-family: 'DM Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 2.2vw;
    font-size: clamp(1.5rem, 2.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1;
    /* Mengikuti pengaturan "Warna countdown" di menu Tampilan. */
    color: var(--cd-color, #fff);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 16px rgba(77, 163, 232, 0.4);
  }
  /* Nama sholat di dalam "Menuju [sholat]" mengikuti pengaturan "Warna menuju
     sholat". Aturan global #tvNextLabel sudah menunjuk ke variabel yang sama,
     ini ditulis ulang di scope Modern supaya tidak tertimpa ::before atau
     aturan lain yang lebih spesifik. */
  .lay-modern .md-next #tvNextLabel {
    color: var(--menuju-name, #fff);
  }
.t-logo {
    display: inline-block;
    vertical-align: -0.22em;
    width: 1.65em;
    height: 1.65em;
    /* Isi bingkai penuh dengan prioritas tinggi seperti gambar slide:
       logo non-persegi ikut memenuhi bingkai, bukan menyisakan celah. */
    object-fit: cover;
    object-position: center;
    margin-right: 0.4em;
    border-radius: 30%;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.t-logo.is-big { width: 1.16em; height: 1.16em; margin-right: 0.3em; vertical-align: -0.15em; }

/* Layout klasik, fokus, samping, jadwal-saja, foto: bagian atas logo sejajar
   dengan bagian atas huruf nama masjid (cap-height). text-top meratakan tepi
   atas elemen inline dengan tepi atas karakter tertinggi di baris yang sama.
   Layout foto memakai kelas t-masjid-huge, bukan t-masjid, jadi keduanya
   dicakup. */
.lay-klasik  .t-masjid      .t-logo,
.lay-fokus   .t-masjid      .t-logo,
.lay-samping .t-masjid      .t-logo,
.lay-jadwal  .t-masjid      .t-logo,
.lay-foto    .t-masjid      .t-logo,
.lay-foto    .t-masjid-huge .t-logo { vertical-align: text-top; }


/* Grid 8 items */
.grid-8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.7vw; width: 100%; }
.grid-8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(6px, 0.7vw, 12px); width: 100%; }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2vw; width: 100%; flex: 1; }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 20px); width: 100%; flex: 1; }

.pi {
    border-radius: 14px;
    padding: 1.2vh 0.6vw;
    padding: clamp(8px, 1.2vh, 16px) clamp(4px, 0.6vw, 10px);
    text-align: center;
    background: rgba(0, 0, 0, 0.35);
    background: color-mix(in srgb, rgba(0, 0, 0, 0.35) calc(var(--card-alpha, 100) * 1%), transparent);
    backdrop-filter: blur(var(--card-blur, 8px));
    -webkit-backdrop-filter: blur(var(--card-blur, 8px));
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.3s, color 0.3s;
    box-sizing: border-box;
}
.pi.pi-next { background: rgba(52, 211, 153, 0.9); background: var(--next-bg, rgba(52, 211, 153, 0.9)); color: #fff; border-color: transparent; }
.pi.pi-dim { opacity: 0.7; }
.pi-name { font-size: calc(1.2vw * var(--sholat-nama-scale, 1)); font-weight: 500; color: rgba(255, 255, 255, 0.8); margin: 0; }
.pi-name { font-size: calc(clamp(0.85rem, 1.2vw, 1.35rem) * var(--sholat-nama-scale, 1)); font-weight: 500; color: rgba(255, 255, 255, 0.8); margin: 0; }
.pi.pi-next .pi-name { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.pi-time { font-size: calc(1.8vw * var(--sholat-waktu-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0 0; color: #fff; }
.pi-time { font-size: calc(clamp(1.2rem, 1.8vw, 2.2rem) * var(--sholat-waktu-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0 0; color: #fff; }
.pi.pi-next .pi-time { color: #fff; }

/* ===== Layout Center (TV utama 16:9) =====
   Header gelap-transparan (jam | identitas | tanggal+logo), area slide
   besar di tengah, enam kartu jadwal di bawah, running text paling bawah.
   Latar belakang (bgWrap) tetap dirender di belakang supaya pengaturan
   latar + rotasinya tetap hidup. Warna card mengikuti card jadwal Modern. */
.lay-center {
  --ct-navy: #12304A;
  --ct-green: #009B83;
  --ct-green-2: #18B79B;
  --ct-ink: #183247;
  --ct-gray: #7A8A93;
  --ct-soft: #F5F8F7;
  --ct-teal-dark: #0A6E5C;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0.6vh 1.2vw 1.2vh;
  padding: clamp(5px, 0.6vh, 10px) clamp(12px, 1.2vw, 22px) clamp(10px, 1.2vh, 18px);
  row-gap: 1.2vh;
  row-gap: clamp(10px, 1.2vh, 18px);
  color: #fff;
  text-align: center;
}

/* --- Header tiga area --- */
.lay-center .ct-hd {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  column-gap: 2vw;
  column-gap: clamp(16px, 2vw, 34px);
  background: rgba(255, 255, 255, 0.07);
  background: color-mix(in srgb, rgba(255, 255, 255, 0.07) calc(var(--card-alpha, 100) * 1%), transparent);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  border-radius: clamp(12px, 1vw, 18px);
  box-shadow: 0 6px 22px rgba(18, 48, 74, 0.10);
  padding: 0.7vh 1.8vw;
  padding: clamp(6px, 0.7vh, 12px) clamp(14px, 1.8vw, 30px);
  min-width: 0;
}
.lay-center .ct-clock { min-width: 0; text-align: left; }
.lay-center .ct-clock-time {
  margin: 0;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #fff;
  font-size: 2.75vw;
  font-size: clamp(1.54rem, 2.75vw, 3.3rem);
}
.lay-center .ct-clock-sec { font-size: 0.55em; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.lay-center .ct-clock-tz { font-size: 0.55em; font-weight: 600; color: rgba(255, 255, 255, 0.7); margin-left: 0.35em; }
.lay-center .ct-ident { min-width: 0; }
.lay-center .ct-nama {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(clamp(1.19rem, 1.63vw, 1.88rem) * var(--masjid-scale, 1));
}
.lay-center .t-alamat.ct-alamat {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(clamp(0.72rem, 0.98vw, 1.13rem) * var(--alamat-scale, 1));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lay-center .ct-date { display: flex; align-items: center; gap: 0.9vw; gap: clamp(10px, 0.9vw, 16px); min-width: 0; }
.lay-center .ct-date-teks { text-align: right; min-width: 0; }
.lay-center .ct-date-mas {
  margin: 0;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  font-size: 1.16vw;
  font-size: clamp(0.9rem, 1.16vw, 1.34rem);
}
.lay-center .ct-date-hij {
  margin: 2px 0 0;
  white-space: nowrap;
  color: var(--hijri-color, rgba(255, 255, 255, 0.72));
  font-size: 1.05vw;
  font-size: clamp(0.83rem, 1.05vw, 1.21rem);
}
.lay-center .ct-date .t-logo.ct-logo {
  width: 2.86vw;
  width: clamp(40px, 2.86vw, 62px);
  height: 2.86vw;
  height: clamp(40px, 2.86vw, 62px);
  margin: 0;
  flex: 0 0 auto;
}

/* --- Area slide besar (memakai markup md-slide yang sama dengan Modern) --- */
.lay-center .ct-main { position: relative; min-height: 0; min-width: 0; }
.lay-center .md-slide { position: relative; width: 100%; height: 100%; }
.lay-center .md-slide-media {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  border-radius: clamp(16px, 1.4vw, 26px);
  overflow: hidden;
  background: rgba(18, 48, 74, 0.06);
  border: 1px solid rgba(18, 48, 74, 0.08);
  box-shadow: 0 6px 22px rgba(18, 48, 74, 0.10);
}
.lay-center .md-slide-img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-width: none;
  max-height: 100%;
}
/* Saldo kas menempel kanan bawah area slide, hanya bila show_kas aktif
   (helper kasHtml() mengembalikan string kosong bila mati). */
.lay-center .ct-kas-wrap:empty { display: none; }
.lay-center .ct-kas-wrap {
  position: absolute;
  right: 1vw;
  right: clamp(10px, 1vw, 18px);
  bottom: 1vw;
  bottom: clamp(10px, 1vw, 18px);
  z-index: 2;
  font-size: 1.05vw;
  font-size: clamp(0.85rem, 1.05vw, 1.2rem);
}
.lay-center .ct-kas-wrap .tv-kas {
  background: rgba(18, 48, 74, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #fff;
  padding: 0.5em 1.1em;
  font-variant-numeric: tabular-nums;
}
/* Tanpa indikator apa pun di atas slide, sesuai desain. */
.lay-center .md-slide-count { display: none; }
.lay-center .md-slide-kosong {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  text-align: center;
  padding: 8px;
  background: rgba(18, 48, 74, 0.55);
  /* Jangkar badge countdown. */
  position: relative;
}
/* Center: badge di bawah tanggal, tepi kanannya sejajar tepi kanan logo.
   .ct-date dijadikan jangkar berposisi, badge absolut di bawahnya. */
.lay-center .ct-date { position: relative; }
.lay-center .ct-date > .md-ramadan-count {
    position: absolute;
    right: 0;
    top: 100%;
    top: calc(100% + 6px);
    top: calc(100% + clamp(4px, 0.8vh, 10px));
}
.lay-center .md-kosong-title {
  margin: 0;
  font-weight: 700;
  color: #fff;
  font-size: 1.8vw;
  font-size: clamp(1.1rem, 1.8vw, 2.1rem);
}
.lay-center .md-kosong-note { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 1vw; font-size: clamp(0.8rem, 1vw, 1.1rem); }

/* --- Bar enam kartu jadwal --- */
.lay-center .ct-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.8vw;
  gap: clamp(8px, 0.8vw, 16px);
  min-width: 0;
}
.lay-center .ct-card {
  background: rgba(255, 255, 255, 0.07);
  background: color-mix(in srgb, rgba(255, 255, 255, 0.07) calc(var(--card-alpha, 100) * 1%), transparent);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  border-radius: clamp(10px, 0.9vw, 16px);
  box-shadow: 0 4px 14px rgba(18, 48, 74, 0.08);
  padding: 0.6vh 0.4vw;
  padding: clamp(5px, 0.6vh, 10px) clamp(6px, 0.4vw, 10px);
  min-width: 0;
}
.lay-center .ct-name {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(0.8vw * var(--sholat-nama-scale, 1));
  font-size: calc(clamp(0.62rem, 0.8vw, 0.9rem) * var(--sholat-nama-scale, 1));
}
.lay-center .ct-time {
  margin: 0.4vh 0 0;
  margin: clamp(3px, 0.4vh, 7px) 0 0;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: calc(1.6vw * var(--sholat-waktu-scale, 1));
  font-size: calc(clamp(1rem, 1.6vw, 1.9rem) * var(--sholat-waktu-scale, 1));
}
/* Kartu sholat berikutnya: warna mengikuti pengaturan "Warna card Sholat
   Berikutnya" di menu Tampilan; teks putih + countdown realtime. */
.lay-center .ct-next {
  background: linear-gradient(160deg, var(--ct-green) 0%, var(--ct-green-2) 100%);
  background: var(--next-bg, linear-gradient(160deg, var(--ct-green) 0%, var(--ct-green-2) 100%));
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(0, 155, 131, 0.38);
  animation: ctPulse 2.6s ease-in-out infinite;
}
.lay-center .ct-next .ct-name,
.lay-center .ct-next .ct-time { color: #fff; }
.lay-center .ct-count {
  margin: 0.3vh 0 0;
  margin: clamp(2px, 0.3vh, 6px) 0 0;
  font-weight: 600;
  color: var(--cd-color, rgba(255, 255, 255, 0.94));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 0.9vw;
  font-size: clamp(0.7rem, 0.9vw, 1.05rem);
}
@keyframes ctPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 155, 131, 0.38); }
  50% { box-shadow: 0 8px 32px rgba(0, 155, 131, 0.58); }
}
@media (prefers-reduced-motion: reduce) {
  .lay-center .ct-next { animation: none; }
}

/* Ruang untuk ticker di bawah. */
.tv-surface.tv-has-run .lay-center { padding-bottom: var(--run-h, 0px); }
.tv-surface.tv-layout-center .tv-running { background: rgba(18, 48, 74, 0.92); }

/* Layout 1: Klasik */
.lay-klasik {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 3.5vw;
    padding: clamp(20px, 3.5vw, 48px);
    box-sizing: border-box;
}
.lay-klasik .hd { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.lay-klasik .hd-date { display: flex; flex-direction: column; text-align: left; }
.lay-klasik .hd-clock { text-align: right; }
.lay-klasik .btm { margin-top: auto; min-height: 0; display: flex; flex-direction: column; gap: 2vh; width: 100%; }
.lay-klasik .btm { margin-top: auto; min-height: 0; display: flex; flex-direction: column; gap: clamp(12px, 2vh, 24px); width: 100%; }
.lay-klasik .ft { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
/* Nama+alamat masjid kini di atas jadwal (dalam .btm). ft.kl-masjid memakai align-items start
   supaya nama masjid tidak teregang ke kanan. */
.lay-klasik .ft.kl-masjid { justify-content: flex-start; align-items: flex-start; }
/* kl-kas: saldo kas di kanan setelah jadwal; flexbox row dengan kas di ujung kanan */
.lay-klasik .kl-kas { display: flex; justify-content: flex-end; width: 100%; }
.lay-klasik .kl-kas:empty { display: none; }


/* Layout 2: Fokus */
.lay-fokus {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 3.5vw;
    padding: clamp(20px, 3.5vw, 48px);
    box-sizing: border-box;
}
.lay-fokus .hd { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.lay-fokus .hd-date { display: flex; flex-direction: column; text-align: left; }
.lay-fokus .mid { position: relative; text-align: center; margin: auto 0; min-height: 0; overflow: hidden; flex: 0 1 auto; }
.lay-fokus .radial-scrim {
    display: none;
}
.lay-fokus .mid-content {
    position: relative;
    z-index: 2;
    display: inline-block;
    border-radius: 20px;
    padding: 2vh 3vw;
    padding: clamp(12px, 2vh, 28px) clamp(20px, 3vw, 44px);
    background: rgba(0, 0, 0, 0.35);
    background: color-mix(in srgb, rgba(0, 0, 0, 0.35) calc(var(--card-alpha, 100) * 1%), transparent);
    backdrop-filter: blur(var(--card-blur, 8px));
    -webkit-backdrop-filter: blur(var(--card-blur, 8px));
}
.lay-fokus .t-cd-lbl { font-size: 1.6vw; color: rgba(255, 255, 255, 0.8); margin: 0; }
.lay-fokus .t-cd-lbl { font-size: clamp(1.1rem, 1.6vw, 2rem); color: rgba(255, 255, 255, 0.8); margin: 0; }
.lay-fokus .t-cd-hl { font-weight: 600; color: var(--menuju-name, #6ee7b7); }
#tvNextLabel { color: var(--menuju-name, inherit); }
.lay-fokus .t-cd-hero { font-size: 8.5vw; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -0.02em; margin: 6px 0; color: #fff; }
.lay-fokus .t-cd-hero { font-size: clamp(4rem, 8.5vw, 9.5rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -0.02em; margin: 6px 0; color: #fff; }
.lay-fokus .t-cd-time { font-size: 1.6vw; color: rgba(255, 255, 255, 0.85); margin: 0; }
.lay-fokus .t-cd-time { font-size: clamp(1.1rem, 1.6vw, 2rem); color: rgba(255, 255, 255, 0.85); margin: 0; }
.lay-fokus .btm { margin-top: auto; min-height: 0; display: flex; flex-direction: column; gap: 2vh; width: 100%; }
.lay-fokus .btm { margin-top: auto; min-height: 0; display: flex; flex-direction: column; gap: clamp(12px, 2vh, 24px); width: 100%; }
.lay-fokus .ft { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }

/* Layout 3: Samping */
.lay-samping {
    display: flex;
    gap: 3vw;
    gap: clamp(20px, 3vw, 40px);
    width: 100%;
    height: 100%;
    padding: 3.5vw;
    padding: clamp(20px, 3.5vw, 48px);
    box-sizing: border-box;
}
.lay-samping .col-main { display: flex; flex: 1; flex-direction: column; justify-content: space-between; text-align: left; }
.lay-samping .col-side { width: 36%; min-width: 18rem; display: flex; flex-direction: column; justify-content: center; }
.lay-samping .side-box {
    display: flex;
    flex-direction: column;
    gap: 0.6vh;
    gap: clamp(4px, 0.6vh, 8px);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.4);
    background: color-mix(in srgb, rgba(0, 0, 0, 0.4) calc(var(--card-alpha, 100) * 1%), transparent);
    padding: 1.6vw;
    padding: clamp(12px, 1.6vw, 24px);
    backdrop-filter: blur(var(--card-blur, 8px));
    -webkit-backdrop-filter: blur(var(--card-blur, 8px));
}
.pl-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0.8vh 0.9vw;
    padding: clamp(6px, 0.8vh, 12px) clamp(8px, 0.9vw, 14px);
    border-radius: 10px;
    transition: background 0.3s;
}
.pl-row.pl-next { background: rgba(52, 211, 153, 0.9); background: var(--next-bg, rgba(52, 211, 153, 0.9)); color: #fff; }
.pl-row.pl-next .pl-name { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.pl-row.pl-next .pl-time { color: #fff; }
.pl-row.pl-dim { opacity: 0.7; }
.pl-name { font-size: calc(1.3vw * var(--sholat-nama-scale, 1)); color: rgba(255, 255, 255, 0.8); }
.pl-name { font-size: calc(clamp(0.95rem, 1.3vw, 1.5rem) * var(--sholat-nama-scale, 1)); color: rgba(255, 255, 255, 0.8); }
.pl-time { font-size: calc(1.8vw * var(--sholat-waktu-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.pl-time { font-size: calc(clamp(1.2rem, 1.8vw, 2.2rem) * var(--sholat-waktu-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.lay-samping .ft { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
.lay-samping .tv-jumat-board { margin-top: auto; margin-bottom: 1.5vh; }
.lay-samping .tv-jumat-board { margin-top: auto; margin-bottom: clamp(8px, 1.5vh, 16px); }

/* ===== SALDO KAS: kanan-bawah, tumbuh ke kiri & ke atas ===== */
.tv-kas { font-size: calc(1em * var(--kas-scale, 1)); white-space: nowrap; margin: 0; }
.tv-kas strong { font-weight: 700; }
.lay-klasik .ft .tv-kas,
.lay-fokus .ft .tv-kas,
.lay-samping .ft .tv-kas { margin-left: auto; text-align: right; }

/* Layout 4: Foto */
.lay-foto {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 3.2vw;
    padding: clamp(20px, 3.2vw, 44px);
    box-sizing: border-box;
}
  .lay-foto .hd-foto .t-masjid-huge {
      font-size: var(--t-nama-fs-huge, calc(2.75vw * var(--masjid-scale, 1)));
      font-size: var(--t-nama-fs-huge, calc(clamp(1.75rem, 2.75vw, 3.5rem) * var(--masjid-scale, 1)));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.lay-foto .btm-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 2vw; width: 100%; }
.lay-foto .btm-split { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(16px, 2vw, 32px); width: 100%; }
.lay-foto .hd-foto { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.hd-foto-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 2vw; width: 100%; margin-top: 1.5vh; flex: 1 1 auto; min-height: 0; }
.hd-foto-row { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(16px, 2vw, 32px); width: 100%; margin-top: clamp(8px, 1.5vh, 16px); flex: 1 1 auto; min-height: 0; }
.hd-foto-board { flex: 1 1 auto; min-width: 0; }
.hd-foto-board:empty { display: none; }
.hd-foto-row .tv-jumat-board { margin: 0; }
.hd-foto-row .col-side { flex: 0 0 auto; min-height: 0; margin-left: auto; overflow-y: auto; }
.lay-foto .col-side { width: 36%; min-width: 18rem; }
.lay-foto .side-box {
    display: flex;
    flex-direction: column;
    gap: 0.6vh;
    gap: clamp(4px, 0.6vh, 8px);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.4);
    background: color-mix(in srgb, rgba(0, 0, 0, 0.4) calc(var(--card-alpha, 100) * 1%), transparent);
    padding: 1.6vw;
    padding: clamp(12px, 1.6vw, 24px);
    backdrop-filter: blur(var(--card-blur, 8px));
    -webkit-backdrop-filter: blur(var(--card-blur, 8px));
    min-height: 0;
    overflow: hidden;
}
.lay-foto .clock-blk { text-align: left; }

/* Layout 5: Jadwal Saja */
.lay-jadwal {
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
    gap: clamp(10px, 1.5vh, 20px);
    width: 100%;
    height: 100%;
    padding: 3.5vw;
    padding: clamp(20px, 3.5vw, 48px);
    box-sizing: border-box;
    text-align: center;
}
.lay-jadwal .t-date-center { font-size: 1.4vw; color: rgba(255, 255, 255, 0.75); margin: 0; }
.lay-jadwal .t-date-center { font-size: clamp(1rem, 1.4vw, 1.6rem); color: rgba(255, 255, 255, 0.75); margin: 0; }
.lay-jadwal .grid-5 .pi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding minimal — tinggi card dikontrol oleh font-size */
    padding: 0.5vh 1.2vw !important;
    padding: clamp(3px, 0.5vh, 7px) clamp(10px, 1.2vw, 20px) !important;
    border-radius: 20px;
    line-height: 1;
}
/* pi-name desktop: lebih kecil supaya card tidak melar secara vertikal */
.lay-jadwal .grid-5 .pi-name { font-size: calc(clamp(0.7rem, 1vw, 1.1rem) * var(--sholat-nama-scale, 1)) !important; }
/* pi-time desktop: dikurangi ~40% dari ukuran semula */
.lay-jadwal .grid-5 .pi-time { font-size: calc(2.4vw * var(--sholat-waktu-scale, 1)); font-weight: 800; margin-top: 0 !important; }
.lay-jadwal .grid-5 .pi-time { font-size: calc(clamp(1.3rem, 2.4vw, 3rem) * var(--sholat-waktu-scale, 1)) !important; font-weight: 800; margin-top: 0 !important; }
/* Kartu 25 persen lebih pendek: baris grid dibatasi 75 persen dari tinggi
   area lalu dipusatkan, jadi kartu tidak lagi meregang penuh. Isi kartu
   (nama dan jam) tidak diubah ukurannya. */
.lay-jadwal .grid-5 { align-content: center; grid-auto-rows: 75%; }
.lay-jadwal .ft-center { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ===== Layout Royal: signage 16:9 (header | jadwal kiri + slide kanan | ticker) ===== */
.lay-royal {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* Transparan supaya gambar latar dari menu Tampilan terlihat, sama
       seperti layout Center. Header navy dan panel biru tetap pekat. */
    background: transparent;
    color: #fff;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    overflow: hidden;
}
/* Header navy 3 kolom: jam | identitas | tanggal. Kolom tengah memakai
   minmax(0, auto) supaya nama masjid yang panjang bisa menyempit, bukan
   mendorong tanggal keluar tepi layar. */
.lay-royal .ry-hd {
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    column-gap: 2vw;
    column-gap: clamp(16px, 2vw, 34px);
    background: #101225;
    background: color-mix(in srgb, #101225 calc(var(--card-alpha, 100) * 1%), transparent);
    padding: 1vh 2vw;
    padding: clamp(8px, 1vh, 16px) clamp(16px, 2vw, 34px);
}
.lay-royal .ry-clock-time {
    margin: 0;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-size: 4.6vw;
    font-size: clamp(2.4rem, 4.6vw, 5.4rem);
    font-variant-numeric: tabular-nums;
}
.lay-royal .ry-clock-sec { font-size: 0.45em; font-weight: 700; color: #D9DFEA; }
.lay-royal .ry-clock-tz { font-size: 0.32em; font-weight: 700; color: #D9DFEA; margin-left: 0.4em; letter-spacing: 0.08em; }
.lay-royal .ry-ident { min-width: 0; }
.lay-royal .ry-ident .t-masjid-blok { display: block; }
.lay-royal .ry-ident .t-logo { width: 3.4vw; width: clamp(40px, 3.4vw, 72px); height: 3.4vw; height: clamp(40px, 3.4vw, 72px); margin: 0; flex: 0 0 auto; }
.lay-royal .ry-ident .ry-nama { display: flex; align-items: flex-start; gap: 1vw; gap: clamp(10px, 1vw, 20px); margin: 0; font-weight: 800; color: #fff; line-height: 1.1; font-size: 2vw; font-size: calc(clamp(1.2rem, 2vw, 2.4rem) * var(--masjid-scale, 1)); white-space: nowrap; min-width: 0; overflow: hidden; }
.lay-royal .ry-ident .t-alamat { margin: 1px 0 0; margin: clamp(1px, 0.15vh, 2px) 0 0; color: #D9DFEA; font-size: 1vw; font-size: calc(clamp(0.75rem, 1vw, 1.15rem) * var(--alamat-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lay-royal .ry-date { text-align: right; }
.lay-royal .ry-date-mas { margin: 0; font-weight: 700; color: #fff; font-size: 1.3vw; font-size: clamp(0.95rem, 1.3vw, 1.6rem); white-space: nowrap; }
.lay-royal .ry-date-hij { margin: 4px 0 0; font-weight: 700; color: #FFE600; color: var(--hijri-color, #FFE600); font-size: 1.3vw; font-size: clamp(0.95rem, 1.3vw, 1.6rem); white-space: nowrap; }
/* Area utama: panel jadwal 28% kiri, slide 72% kanan. */
.lay-royal .ry-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 28% 72%;
    column-gap: 1.4vw;
    column-gap: clamp(12px, 1.4vw, 26px);
    padding: 0 2vw;
    padding: 0 clamp(16px, 2vw, 34px);
}
/* Panel jadwal biru royal dengan kartu vertikal. */
.lay-royal .ry-panel {
    background: #193A91;
    background: color-mix(in srgb, #193A91 calc(var(--card-alpha, 100) * 1%), transparent);
    border-radius: 18px;
    border-radius: clamp(12px, 1vw, 18px);
    padding: 1.2vh 1vw;
    padding: clamp(10px, 1.2vh, 18px) clamp(10px, 1vw, 18px);
    display: flex;
    flex-direction: column;
    gap: 1vh;
    gap: clamp(8px, 1vh, 14px);
    min-height: 0;
    overflow: hidden;
}
/* Kartu jadwal memakai flex, bukan grid `1fr auto`: pada grid, kolom jam
   bertipe `auto` dan tidak mau menyusut sehingga memakan seluruh lebar
   kartu begitu jam diperbesar lewat setelan Tampilan, dan nama sholat
   ikut terpotong ("MAG..."). Kedua isinya kini jadi flex item yang boleh
   menyusut, jadi saat keduanya besar keduanya menyusut bersama dan nama
   tidak kelaparan. space-between menjaga kolom jam tetap lurus di tepi
   kanan kartu. */
.lay-royal .ry-card {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9vw;
    gap: clamp(8px, 0.9vw, 16px);
    background: rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, rgba(255, 255, 255, 0.08) calc(var(--card-alpha, 100) * 1%), transparent);
    border-left: 5px solid #FFE600;
    border-left-width: clamp(3px, 0.35vw, 6px);
    border-radius: 12px;
    border-radius: clamp(8px, 0.7vw, 12px);
    padding: 0.6vh 1vw;
    padding: clamp(6px, 0.6vh, 10px) clamp(10px, 1vw, 18px);
    color: #fff;
}
.lay-royal .ry-card.ry-next { background: #009B83; background: color-mix(in srgb, var(--next-bg, #009B83) calc(var(--card-alpha, 100) * 1%), transparent); border-left-color: #fff; }
.lay-royal .ry-name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 1.25vw; font-size: calc(clamp(0.9rem, 1.25vw, 1.5rem) * var(--sholat-nama-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lay-royal .ry-time { flex: 0 1 auto; min-width: 0; font-weight: 800; font-size: 1.7vw; font-size: calc(clamp(1.15rem, 1.7vw, 2.1rem) * var(--sholat-waktu-scale, 1)); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
/* Area slide kanan dengan crossfade dua lapis. */
.lay-royal .ry-slide { position: relative; min-height: 0; min-width: 0; overflow: hidden; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.26); background: rgba(18, 48, 74, 0.06); }
.lay-royal .ry-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: auto 100%; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1.2s ease; }
.lay-royal .ry-layer.ry-on { opacity: 1; }
/* Countdown sholat berikutnya di bawah kartu jadwal: pill navy transparan,
   nama putih, angka emas. */
.lay-royal .ry-count {
    flex: none;
    display: block;
    text-align: center;
    margin-top: 1vh;
    margin-top: clamp(8px, 1vh, 14px);
    background: rgba(16, 18, 37, 0.78);
    border-radius: 12px;
    border-radius: clamp(8px, 0.7vw, 12px);
    padding: 0.8vh 1.2vw;
    padding: clamp(8px, 0.8vh, 14px) clamp(12px, 1.2vw, 22px);
    font-weight: 800;
    font-size: 1.6vw;
    font-size: clamp(1.1rem, 1.6vw, 2rem);
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lay-royal .ry-count .t-cd-val { color: #FFE600; color: var(--cd-color, #FFE600); margin-left: 0.4em; }
.lay-royal .ry-count #tvNextLabel { color: #fff; color: var(--menuju-name, #fff); }
/* Di area slide Royal, badge overlay absolut di kanan atas. */
.ry-slide .md-ramadan-count {
    position: absolute;
    top: 0.7vw;
    top: clamp(6px, 0.7vw, 13px);
    right: 1.4vw;
    right: clamp(12px, 1.4vw, 26px);
    z-index: 5;
}
/* Reserve ruang ticker: area slide didekatkan ke batas running text. */
.tv-surface.tv-has-run .lay-royal { padding-bottom: calc(var(--run-h, 0px) + 6px); }

/* ---- Overlay states: iqamah / jumat / ramadan / power ---- */

/* .tv-iqamah hanya sebagai positioning container — background dirender via .bg-layer, konten via .tv-iqamah-content */
.tv-iqamah {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
}
.tv-event, .tv-power, .tv-state {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vh;
    gap: clamp(8px, 2vh, 18px);
    text-align: center;
    padding: 24px;
}

.tv-iqamah-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* ========== FASE 1: Menunggu Iqamah (rem > 60 detik) ========== */
.iq-phase-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vh;
    gap: clamp(10px, 2vh, 24px);
    width: 100%;
    height: 100%;
    padding: 4vw;
    padding: clamp(24px, 4vw, 60px);
    box-sizing: border-box;
    text-align: center;
}

.iq-kicker {
    font-size: 3vw;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.iq-phase-1 .iq-count {
    font-size: 20vw;
    font-size: clamp(100px, 20vw, 260px);
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35);
    margin: 0;
    letter-spacing: -0.02em;
}

.iq-divider {
    width: 30vw;
    width: clamp(160px, 30vw, 400px);
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 1vh auto;
    margin: clamp(4px, 1vh, 12px) auto;
}

/* Doa Setelah Adzan - Fase 1 */
.iq-doa-box {
    display: flex;
    flex-direction: column;
    gap: 1.2vh;
    gap: clamp(6px, 1.2vh, 14px);
    max-width: 88vw;
    max-width: min(860px, 88vw);
    text-align: center;
}
.iq-doa-title {
    font-size: 1.1vw;
    font-size: clamp(0.6rem, 1.1vw, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #c9a96e;
    text-transform: uppercase;
    margin: 0;
}
.iq-doa-ar {
    font-size: 2.4vw;
    font-size: clamp(1.1rem, 2.4vw, 2.2rem);
    line-height: 1.9;
    color: #f5f0e8;
    font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
    direction: rtl;
    margin: 0;
}
.iq-doa-id {
    font-size: 1.15vw;
    font-size: clamp(0.65rem, 1.15vw, 0.9rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.58);
    font-style: italic;
    margin: 0;
}

/* ========== FASE 2: Bersiap (rem <= 60 detik) ========== */
.iq-phase-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.8vh;
    gap: clamp(8px, 1.8vh, 20px);
    width: 100%;
    height: 100%;
    padding: 4vw;
    padding: clamp(24px, 4vw, 60px);
    box-sizing: border-box;
    text-align: center;
}

.iq-kicker-gold {
    font-size: 3vw;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #c9a96e;
    margin: 0;
}

.iq-count-gold {
    font-size: 20vw;
    font-size: clamp(100px, 20vw, 260px);
    font-weight: 800;
    line-height: 1;
    color: #c9a96e;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 60px rgba(201, 169, 110, 0.4);
    margin: 0;
    letter-spacing: -0.02em;
}

.iq-divider-gold {
    width: 40vw;
    width: clamp(200px, 40vw, 600px);
    height: 4px;
    background: rgba(201, 169, 110, 0.18);
    border-radius: 4px;
    margin: 1.5vh auto;
    margin: clamp(6px, 1.5vh, 18px) auto;
    overflow: hidden;
}
.iq-divider-gold span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #c9a96e, #e8c97a);
    border-radius: 4px;
    transition: width 0.9s linear;
    max-width: 100%;
}

/* ========== FASE 3: IQAMAH Dimulai (rem <= 0, 10 detik) ========== */

/* Pattern geometri islami di background fase 3 */
.tv-iqamah.iq-phase-3::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.035) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.035) 40px),
        repeating-linear-gradient(45deg, transparent, transparent 27px, rgba(255,255,255,0.02) 28px),
        repeating-linear-gradient(-45deg, transparent, transparent 27px, rgba(255,255,255,0.02) 28px);
    z-index: 2;
    pointer-events: none;
}

.iq-phase-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4vh;
    gap: clamp(6px, 1.4vh, 16px);
    width: 100%;
    height: 100%;
    padding: 4vw;
    padding: clamp(24px, 4vw, 60px);
    box-sizing: border-box;
    text-align: center;
    position: relative;
    z-index: 10;
}

.iq-star-icon {
    width: 8vw;
    width: clamp(50px, 8vw, 90px);
    height: 8vw;
    height: clamp(50px, 8vw, 90px);
    color: #c9a96e;
    margin-bottom: 1vh;
    margin-bottom: clamp(4px, 1vh, 10px);
}
.iq-octagram {
    width: 100%;
    height: 100%;
}

.iq-sub-gold {
    font-size: 6.5vw;
    font-size: clamp(3.75rem, 6.5vw, 5rem);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.iq-main-title {
    font-size: 14vw;
    font-size: clamp(64px, 14vw, 180px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.3);
}

.iq-footer-note {
    font-size: 4vw;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: #c9a96e;
    margin: 0;
}
.iq-hold-count {
    font-size: 1.5vw;
    font-size: clamp(0.9rem, 1.5vw, 1.25rem);
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}
.tv-iqamah.tv-tema-kertas .iq-hold-count { color: #1a1a1a; }

/* Legacy selectors tetap berfungsi */
.iq-name { font-size: 5vw; font-weight: 800; margin: 0; }
.iq-name { font-size: clamp(2.2rem, 5vw, 4.6rem); font-weight: 800; margin: 0; }
.event-kicker {
    font-size: 1.8vw;
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent-tv);
    margin: 0;
}
.tv-event { background-image: radial-gradient(120% 110% at 50% 0%, rgba(30, 110, 83, 0.55), transparent 55%), linear-gradient(160deg, #052b1b, #0B6B4F); }
.event-title { font-size: 4.5vw; font-weight: 800; margin: 0; }
.event-title { font-size: clamp(2rem, 4.5vw, 4.2rem); font-weight: 800; margin: 0; }
.event-subject { font-size: 3vw; font-weight: 600; margin: 0; }
.event-subject { font-size: clamp(1.4rem, 3vw, 2.8rem); font-weight: 600; margin: 0; }
.event-roles { display: flex; gap: 4vw; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.event-roles { display: flex; gap: clamp(16px, 4vw, 60px); margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.role { display: flex; flex-direction: column; gap: 2px; }
.role-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.75); }
.role-name { font-size: 2.4vw; font-weight: 800; }
.role-name { font-size: clamp(1.2rem, 2.4vw, 2.2rem); font-weight: 800; }
.event-note { color: rgba(255, 255, 255, 0.72); margin: 0; }
.ram-malam { font-size: 3.4vw; font-weight: 700; margin: 0; color: #ffe9a3; }
.ram-malam { font-size: clamp(1.6rem, 3.4vw, 3.2rem); font-weight: 700; margin: 0; color: #ffe9a3; }
.ram-malam strong { font-size: 1.4em; color: var(--accent-tv); }

.tv-power {
    background: #000;
    color: rgba(255, 255, 255, 0.38);
    gap: 6px;
}
.tv-power span { font-size: 10vw; font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-power span { font-size: clamp(60px, 10vw, 120px); font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-power p { margin: 0; font-size: 0.95rem; letter-spacing: 0.1em; }

.tv-state { background-image: linear-gradient(160deg, #052b1b, #0B6B4F); }
.tv-error h2 { font-size: 4vw; margin: 0; }
.tv-error h2 { font-size: clamp(1.8rem, 4vw, 3.4rem); margin: 0; }
.tv-error p { color: #cfe3da; margin: 0; }
.tv-error .btn { background: #fff; color: var(--primary); margin-top: 12px; }
.tv-error .btn:hover { background: #eef4f0; }

.audio-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    padding: 12px 22px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    animation: hintIn 0.3s ease;
}
@keyframes hintIn { from { transform: translate(-50%, 12px); opacity: 0; } }

/* Petunjuk geser slide di HP: tampil sekali per sesi, hilang sendiri. */
.slide-hint {
    position: fixed;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    max-width: 92vw;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    animation: hintIn 0.3s ease;
}

/* ---- Demo page ---- */

.demo-body { padding-top: 0; }
.demo-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-1);
}
.demo-brand .brand-name { font-size: 1rem; }
.demo-note { margin: 0; flex: 1; color: var(--ink-soft); font-size: 0.92rem; font-weight: 600; min-width: 0; }
.demo-tools {
    position: fixed;
    top: 74px;
    left: 0;
    right: 0;
    z-index: 45;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    pointer-events: none;
}
.demo-tools .btn { pointer-events: auto; min-width: 140px; }
.demo-body .tv-app { top: 74px; }
.demo-body .tv-app .tv-screen,
.demo-body .tv-app .tv-event,
.demo-body .tv-app .tv-iqamah,
.demo-body .tv-app .tv-state,
.demo-body .tv-app .tv-power { padding-top: 40px; }

/* ============================================================
   Admin: Tampilan — kartu pilihan, thumbnail, slider, preview
   ============================================================ */

.tamp-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .tamp-grid { grid-template-columns: 1fr 1fr; } }
.tamp-panel { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 1080px) {
    .tamp-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: start; }
    .tamp-panel .col-form { grid-column: 1; }
    .tamp-panel .col-preview {
        grid-column: 2;
        position: sticky;
        top: 0;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
    .tamp-preview-mobile { display: none; }
}
@media (max-width: 1079px) {
    .col-preview { display: none; }
    .tamp-preview-mobile { position: sticky; top: 0; z-index: 20; background: #fff; padding: 10px 0 12px; box-shadow: var(--shadow-1, 0 6px 24px rgba(0,0,0,0.12)); }
    div.tamp-preview-mobile { position: sticky; }
    .topbar-simulasi { display: inline-flex; }
}
.tamp-panel .col-form, .tamp-panel .col-preview { min-width: 0; }

.pick-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pick-card:hover { border-color: #c9d6d0; }
.pick-card[aria-pressed="true"],
.pick-card.is-active {
    border-color: var(--primary);
    background: rgba(11, 107, 79, 0.05);
    box-shadow: 0 0 0 1px var(--primary);
}
.pick-card .pick-name { display: block; font-weight: 600; color: var(--ink); }
.pick-card .pick-tag { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.4; color: var(--muted); }

.pick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 640px) { .pick-grid { grid-template-columns: repeat(3, 1fr); } }

.pick-desc { margin-top: 12px; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }

.bg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (min-width: 640px) { .bg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 639px) { .bg-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
.bg-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    border: 1px solid var(--line);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background-size: cover;
    background-position: center;
    transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.bg-thumb:hover { opacity: 0.92; }
.bg-thumb[aria-pressed="true"],
.bg-thumb.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.bg-thumb .bg-label {
    position: absolute;
    top: auto; right: 0; bottom: 0; left: 0;
    padding: 14px 8px 6px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
}
.bg-thumb .bg-check {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    align-items: center;
    justify-content: center;
}
.bg-thumb.is-active .bg-check { display: flex; }
.bg-custom-delete {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(220,38,38,0.85);
    color: #fff;
    border: none;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transition: opacity .15s;
    padding: 0;
}
.bg-custom-tile:hover .bg-custom-delete { opacity: 1; }


.tema-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 640px) { .tema-grid { grid-template-columns: 1fr 1fr; } }
.tema-card {
    display: flex;
    gap: 14px;
    width: 100%;
    text-align: left;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.tema-card:hover { border-color: #c9d6d0; }
.tema-card[aria-pressed="true"],
.tema-card.is-active {
    border-color: var(--primary);
    background: rgba(11, 107, 79, 0.05);
    box-shadow: 0 0 0 1px var(--primary);
}
.tema-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 96px;
    height: 54px;
    border-radius: 10px;
    border: 1px solid var(--line);
    overflow: hidden;
}
.tema-tile-half { position: absolute; top: 0; right: auto; bottom: 0; left: 0; width: 50%; display: flex; align-items: center; justify-content: center; }
.tema-tile-half-r { left: auto; right: 0; }
.tema-motif { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.tema-motif svg { display: block; width: 100%; height: 100%; }
.tema-frame { position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; border-radius: 6px; border: 1px solid rgba(224, 180, 88, 0.55); pointer-events: none; }
.tema-tile-time { position: relative; font-weight: 800; font-variant-numeric: tabular-nums; color: #F6F1E7; font-size: 0.9rem; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
.tema-text { min-width: 0; flex: 1; }
.tema-title { display: block; font-weight: 700; color: var(--ink); }
.tema-desc { display: block; margin-top: 3px; font-size: 0.78rem; line-height: 1.45; color: var(--muted); }

.upload-box {
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 14px;
    display: grid;
    gap: 10px;
}
.upload-box .field { margin: 0; }
.upload-note { font-size: 0.8rem; color: var(--muted); margin: 0; }

.seg {
    display: inline-flex;
    gap: 6px;
    background: var(--bg-soft, #f3f4f6);
    padding: 4px;
    border-radius: 12px;
}
.seg button {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 9px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.seg button[aria-pressed="true"],
.seg button.is-active { border-color: var(--primary); background: rgba(11, 107, 79, 0.06); color: var(--primary); }

.slider-label { display: flex; align-items: baseline; gap: 6px; font-size: 0.9rem; margin-bottom: 8px; }
.slider-label strong { color: var(--ink); font-weight: 700; }
.slider-hint { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 6px; }

input[type="range"].tamp-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    outline: none;
}
input[type="range"].tamp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
    cursor: pointer;
}
input[type="range"].tamp-range::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid #fff;
    cursor: pointer;
}
input[type="range"].tamp-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--line); }

.chk-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    background: #fff;
}
.chk-row input[type="checkbox"] {
    width: 20px; height: 20px;
    accent-color: var(--primary);
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}
.chk-row .chk-title { display: block; font-weight: 600; color: var(--ink); }
.chk-row .chk-sub { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

/* Preview panel */
.preview-tabs { display: flex; gap: 4px; }
.preview-tabs button {
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 5px 12px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}
.preview-tabs button[aria-pressed="true"],
.preview-tabs button.is-active { background: rgba(11, 107, 79, 0.1); color: var(--primary); }
.preview-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.preview-frame iframe {
    position: absolute;
    top: 0; right: auto; bottom: auto; left: 0;
    width: 1280px;
    height: 720px;
    border: 0;
    transform-origin: top left;
    pointer-events: none;
}
.preview-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.preview-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.preview-live::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 rgba(11, 107, 79, 0.5);
    animation: tampPing 1.6s ease-out infinite;
}
@keyframes tampPing {
    0% { box-shadow: 0 0 0 0 rgba(11, 107, 79, 0.45); }
    70% { box-shadow: 0 0 0 9px rgba(11, 107, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(11, 107, 79, 0); }
}

/* ============================================================
   TV: tema layar penuh (tema_penuh) untuk overlay iqamah/dll
   ============================================================ */

.tv-iqamah[class*="tv-tema-"] ,
.tv-event[class*="tv-tema-"],
.tv-screen[class*="tv-tema-"] { background-image: none; }
.tv-iqamah.tv-tema-zamrud,
.tv-event.tv-tema-zamrud,
.tv-screen.tv-tema-zamrud { background-image: radial-gradient(120% 110% at 50% 0%, rgba(17, 128, 92, 0.5), transparent 55%), linear-gradient(160deg, #052b1b, #0B6B4F); }
.tv-iqamah.tv-tema-auto,
.tv-event.tv-tema-auto,
.tv-screen.tv-tema-auto { background-image: radial-gradient(120% 110% at 50% 0%, rgba(17, 128, 92, 0.5), transparent 55%), linear-gradient(160deg, #052b1b, #0B6B4F); }
.tv-iqamah.tv-tema-kertas,
.tv-event.tv-tema-kertas,
.tv-screen.tv-tema-kertas {
    background-image: radial-gradient(120% 110% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%), linear-gradient(160deg, #f8f4ea, #f1ead9);
    color: #1a1a1a;
}
.tv-iqamah.tv-tema-kertas .iq-kicker,
.tv-iqamah.tv-tema-kertas .iq-name,
.tv-event.tv-tema-kertas .event-kicker,
.tv-event.tv-tema-kertas .event-title,
.tv-event.tv-tema-kertas .event-subject,
.tv-event.tv-tema-kertas .event-note,
.tv-event.tv-tema-kertas .role-label,
.tv-event.tv-tema-kertas .role-name { color: #2b2b2b; }
.tv-iqamah.tv-tema-kertas .iq-count { color: var(--primary); text-shadow: none; }
.tv-screen.tv-tema-kertas .kas-screen h2,
.tv-screen.tv-tema-kertas .kas-row span,
.tv-screen.tv-tema-kertas .kas-row strong,
.tv-screen.tv-tema-kertas .tv-masjid-name { color: #2b2b2b; }
.tv-screen.tv-tema-kertas .kas-saldo { color: var(--primary); text-shadow: none; }
.tv-screen.tv-tema-kertas .kas-row { background: rgba(255, 255, 255, 0.55); border-color: rgba(0, 0, 0, 0.12); }
.tv-iqamah.tv-tema-khatam,
.tv-event.tv-tema-khatam,
.tv-screen.tv-tema-khatam {
    background-image: repeating-linear-gradient(135deg, rgba(224, 180, 88, 0.12) 0 1px, transparent 1px 14px), radial-gradient(120% 110% at 50% 0%, rgba(15, 60, 45, 0.55), transparent 55%), linear-gradient(160deg, #060806, #101812);
    color: #E0B458;
}
.tv-iqamah.tv-tema-khatam .iq-kicker,
.tv-iqamah.tv-tema-khatam .iq-name,
.tv-event.tv-tema-khatam .event-kicker,
.tv-event.tv-tema-khatam .event-title,
.tv-event.tv-tema-khatam .event-subject,
.tv-event.tv-tema-khatam .event-note,
.tv-event.tv-tema-khatam .role-label,
.tv-event.tv-tema-khatam .role-name { color: #F1E3C3; }
.tv-iqamah.tv-tema-khatam .iq-count { color: #E0B458; }
.tv-iqamah.tv-tema-polos,
.tv-event.tv-tema-polos,
.tv-screen.tv-tema-polos,
.tv-iqamah.tv-tema-polos .iq-count { background: #000; color: #fff; }
.tv-iqamah.tv-tema-polos .iq-kicker,
.tv-iqamah.tv-tema-polos .iq-name,
.tv-event.tv-tema-polos .event-kicker,
.tv-event.tv-tema-polos .event-title,
.tv-event.tv-tema-polos .event-subject,
.tv-event.tv-tema-polos .event-note,
.tv-event.tv-tema-polos .role-label,
.tv-event.tv-tema-polos .role-name { color: #fff; }

.iq-doa {
    max-width: 720px;
    margin-top: 2vh;
    margin-top: clamp(8px, 2vh, 20px);
    padding: 2vw 3vw;
    padding: clamp(10px, 2vw, 22px) clamp(16px, 3vw, 34px);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.2);
    line-height: 1.7;
}
.tv-iqamah.tv-tema-kertas .iq-doa { background: rgba(255, 255, 255, 0.55); border-color: rgba(0, 0, 0, 0.12); }
.tv-iqamah.tv-tema-polos .iq-doa { display: none; }
.iq-doa-ar { margin: 0; font-size: 2.4vw; direction: rtl; }
.iq-doa-ar { margin: 0; font-size: clamp(1.2rem, 2.4vw, 2rem); direction: rtl; }
.iq-doa-id { margin: 6px 0 0; font-size: 1.4vw; color: rgba(255, 255, 255, 0.82); font-style: italic; }
.iq-doa-id { margin: 6px 0 0; font-size: clamp(0.85rem, 1.4vw, 1.2rem); color: rgba(255, 255, 255, 0.82); font-style: italic; }
.tv-iqamah.tv-tema-kertas .iq-doa-id { color: rgba(40, 40, 40, 0.8); }
.tv-iqamah.tv-tema-kertas .iq-doa-ar { color: #1a1a1a; }

.tv-kas-screen { display: none; }

.kas-screen { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; }
.kas-screen h2 { margin: 0; font-size: 3vw; letter-spacing: 0.03em; }
.kas-screen h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: 0.03em; }
.kas-saldo { margin: 0; font-size: 12vw; font-weight: 800; color: var(--accent-tv); font-variant-numeric: tabular-nums; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.5); }
.kas-saldo { margin: 0; font-size: clamp(64px, 12vw, 140px); font-weight: 800; color: var(--accent-tv); font-variant-numeric: tabular-nums; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.5); }
.kas-rows { display: flex; gap: 2vw; flex-wrap: wrap; justify-content: center; }
.kas-rows { display: flex; gap: clamp(12px, 2vw, 30px); flex-wrap: wrap; justify-content: center; }
.kas-row { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 22px; border-radius: 14px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.2); }
.kas-row span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; letter-spacing: 0.1em; }
.kas-row strong { font-size: 2.2vw; }
.kas-row strong { font-size: clamp(1.2rem, 2.2vw, 2rem); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
    .admin-sidebar { width: 76px; flex-basis: 76px; padding: 18px 10px; }
    /* Tombol "Buka Layar TV" tidak ikut disembunyikan seperti label menu lain:
       di sidebar yang menyempit ia tetap muncul sebagai tombol ikon TV, karena
       tidak ada tempat lain untuk membuka layar TV dari admin. Hanya teks
       labelnya yang disembunyikan. */
    .admin-sidebar .brand-name, .admin-sidebar .brand-wordmark, .admin-sidebar .menu-label { display: none; }
    .admin-brand { justify-content: center; margin: 0 0 18px; }
    .admin-menu-link { justify-content: center; gap: 0; }
    .tv-link { padding: 11px; }
    .tv-link-label { display: none; }
    .feature-list { grid-template-columns: 1fr; }
}

/* Slide pengumuman: gambar memenuhi layar dan bergantian dengan latar.
   object-fit contain supaya gambar tidak terpotong di TV Mana pun. */
.tv-slides {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 30;
    background: #000;
}
.tv-slides-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.tv-slides-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tv-slides-count {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1vw;
    font-size: clamp(0.8rem, 1vw, 1.05rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    z-index: 1;
}

/* Slider lama gambar slide tampil, di menu Pengumuman. */
.slide-timer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 6px;
}
.slide-timer label { font-weight: 600; }
.slide-timer .hint { margin: 0; font-size: 0.85rem; }

@media (max-width: 768px) {
    .site-nav > a:not(.btn) { display: none; }
    .header-inner { justify-content: space-between; }
    .hero { padding: 40px 0 56px; }
    .hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .hero-stage { order: -1; }
    .tv-frame { max-width: 100%; }
    .how-grid { grid-template-columns: 1fr; gap: 20px; }
    .feature-list { grid-template-columns: 1fr; }

    .menu-burger { display: inline-flex; }
    .sidebar-close {
        display: inline-flex;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: var(--radius-sm);
        color: #fff;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
    }
    .sidebar-close:hover { background: rgba(255, 255, 255, 0.12); }
    .admin-sidebar {
        position: fixed;
        top: 0; right: auto; bottom: 0; left: 0;
        width: 84vw;
        width: min(280px, 84vw);
        flex-basis: auto;
        transform: translateX(-102%);
        transition: transform 0.25s ease;
        z-index: 50;
        box-shadow: 12px 0 40px rgba(0, 0, 0, 0.25);
    }
    .admin-sidebar.open { transform: translateX(0); }
    /* Sidebar jadi drawer lebar di layar kecil, jadi teks labelnya tampil lagi.
       .tv-link tetap inline-flex (bukan "initial") supaya ikon TV dan teksnya
       sejajar; "initial" akan mengembalikan ke display default dan meratakan
       isi tombol. */
    .admin-sidebar .brand-name, .admin-sidebar .brand-wordmark, .admin-sidebar .menu-label { display: initial; }
    .admin-sidebar .tv-link { display: inline-flex; }
    .admin-sidebar .tv-link-label { display: inline; }
    .admin-brand { justify-content: flex-start; margin: 0 8px 22px; }
    .admin-menu-link { justify-content: flex-start; gap: 12px; }
    .admin-content { padding: 18px 14px 96px; gap: 18px; }
    .admin-bottom-spacer { height: 60px; }

    .admin-bottombar { display: flex; }
    .admin-topbar { padding: 10px 14px; gap: 8px; }
    .admin-stats { grid-template-columns: 1fr; }
    .admin-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .iqamah-grid { grid-template-columns: 1fr 1fr; }
    .kas-stats { grid-template-columns: 1fr; }
    .footer-inner { flex-direction: column; padding: 40px 24px 24px; }

    .tv-screen { gap: 12px; padding: 14px; }
    .tv-prayers { flex-wrap: wrap; gap: 8px; }
    .prayer-item { min-width: 30%; }
    .tv-layout-fokus .tv-prayers { grid-template-columns: repeat(3, 1fr); width: 100%; }
    .tv-layout-samping .tv-screen { display: flex; }
    .tv-layout-samping .tv-top, .tv-layout-samping .tv-prayers, .tv-layout-samping .tv-panels { grid-column: auto; grid-row: auto; }
    .tv-layout-jadwal-saja .tv-prayers { flex-wrap: nowrap; width: 100%; overflow-x: auto; }
    .tv-qris { width: 90px; bottom: 54px; }
    /* Hanya halaman demo di ponsel; layar TV sekecil apa pun tetap menampilkan slide. */
    .demo-body .tv-slides { display: none; }
    .demo-body .tv-app { top: 128px; }
    .demo-bar { flex-wrap: wrap; }
    .demo-tools { top: 132px; top: calc(128px + 6px); }
}

/* ==== Lokasi admin ==== */
.req { color: #c0392b; font-weight: 700; }
.muted.hint { margin-top: 2px; font-size: 0.85rem; line-height: 1.45; }

.lokasi-map {
    height: 340px;
    border-radius: 10px;
    border: 1px solid var(--border, #d8dee6);
    z-index: 1;
    overflow: hidden;
    background: #e8ecf1;
}
.lokasi-map:empty::before {
    content: "Peta tidak dapat dimuat. Ubah koordinat langsung di kolom Lanjutan.";
    display: block;
    padding: 18px;
    color: var(--muted);
    font-size: 0.9rem;
}
.map-search {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border, #d8dee6);
    border-radius: 8px;
    font-size: 0.95rem;
    background: #fff;
}
.map-row { display: flex; gap: 8px; }
.map-row .map-search { flex: 1; }
.geo-btn { white-space: nowrap; }

/* Upload logo di Lokasi */
.logo-row { display: flex; align-items: flex-start; gap: 12px; }
.logo-preview {
    position: relative;
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f2f6f4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Aturan global `img { display: block }` di atas bisa menabrak atribut hidden,
   jadi sembunyikan secara eksplisit. */
.logo-preview img[hidden] { display: none; }
.logo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--muted);
    text-align: center;
    padding: 0 6px;
    line-height: 1.3;
}
.logo-empty[hidden] { display: none; }
.logo-empty svg { opacity: 0.55; flex: 0 0 auto; }
.logo-actions { display: grid; gap: 6px; min-width: 0; }
.logo-actions .hint { margin: 0; }
/* Tombol hapus muncul saat kursor di atas logo, sama seperti hapus foto di Tampilan. */
.logo-delete,
.slide-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
    border: none;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transition: opacity .15s;
    padding: 0;
}
.logo-delete[hidden],
.slide-delete[hidden] { display: none; }
.logo-preview:hover .logo-delete,
.slide-thumb:hover .slide-delete,
.logo-delete:focus-visible,
.slide-delete:focus-visible { opacity: 1; }
.logo-delete:disabled,
.slide-delete:disabled { opacity: .5; cursor: progress; }

/* Thumbnail slide di daftar pengumuman, tombol × muncul saat kursor di atas gambar.
   Gambar hanya diperkecil, tidak dipotong dan tidak dilebihkan:.ukurannya abide
   proporsi asli, jadi kotak ikut menempel pada gambarnya. */
.row-thumb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.slide-thumb {
    position: relative;
    flex: 0 0 auto;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f2f6f4;
    overflow: hidden;
    line-height: 0;
}
.slide-thumb img {
    display: block;
    width: auto;
    height: auto;
    max-width: 110px;
    max-height: 160px;
}
/* Slide yang filenya sudah tidak ada di penyimpanan. Placeholder bertanda
   lebih jelas daripada membiarkan gambar rusak tanpa keterangan. */
.slide-thumb-hilang {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 80px;
    border: 1px dashed var(--line);
    background: #f2f6f4;
    line-height: 1;
}
.slide-thumb-hilang .slide-hilang-teks {
    font-size: 26px;
    font-weight: 800;
    color: #93a5a0;
}

/* Notifikasi mengambang hasil simpan AJAX. Warna mengikuti .alert-ok dan
   .alert-error supaya bunyi visualnya sama dengan pesan di dalam halaman. */
.toast-host {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: calc(100vw - 32px);
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    cursor: pointer;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--bg);
    box-shadow: var(--shadow-2);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    animation: toastIn 0.18s ease-out;
}
.toast-ok { background: #e9f7ef; color: var(--primary-dark); border-color: #bfe3cf; }
.toast-error { background: #fdecea; color: #8f231b; border-color: #f5c0bb; }
.toast-leave { animation: toastOut 0.16s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
    .toast, .toast-leave { animation: none; }
}

@media (max-width: 640px) {
    .logo-row { flex-direction: column; }
}

.lokasi-panel {
    border: 1px solid var(--border, #d8dee6);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--panel-bg, #fafbfc);
}
.lokasi-panel-title { margin: 0 0 10px; font-size: 0.95rem; }
.lokasi-rows { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lokasi-rows > div { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: baseline; }
.lokasi-rows dt { font-size: 0.83rem; color: var(--muted); }
.lokasi-rows dd { margin: 0; font-size: 0.9rem; word-break: break-word; }

.lokasi-save-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid var(--border, #d8dee6);
}
.lokasi-status { margin: 0; font-size: 0.9rem; color: var(--ok, #0B7A57); }

.table-scroll { overflow-x: auto; }
/* Daftar pengumuman jadi tabel: kolom Isi dan Aksi. */
.tabel-pengumuman { width: 100%; border-collapse: collapse; min-width: 420px; }
.tabel-pengumuman th,
.tabel-pengumuman td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border, #d8dee6); font-size: 0.9rem; vertical-align: middle; }
.tabel-pengumuman th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.tabel-pengumuman tbody tr:last-child td { border-bottom: none; }
.tabel-pengumuman .kolom-aksi { width: 1%; white-space: nowrap; text-align: right; }
.tabel-pengumuman .kolom-aksi .inline-form { display: inline-block; margin-left: 6px; }
.isi-pengumuman { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.isi-pengumuman .isi-teks { min-width: 0; overflow-wrap: anywhere; }

.koreksi-table { width: 100%; border-collapse: collapse; min-width: 380px; }
.koreksi-table th,
.koreksi-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border, #d8dee6); font-size: 0.9rem; }
.koreksi-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.kor-name { white-space: nowrap; }
.kor-stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border, #d8dee6);
    border-radius: 9px;
    padding: 3px;
    background: #fff;
}
.kor-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: var(--panel-bg, #eef1f4);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text, #1b2737);
    cursor: pointer;
    transition: background 0.15s ease;
}
.kor-btn:hover { background: #e1e7ee; }
.kor-value {
    min-width: 40px;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.kor-time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    background: var(--panel-bg, #f2f5f8);
    padding: 4px 10px;
    border-radius: 6px;
}
.kor-orig {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    text-decoration: line-through;
    margin-right: 8px;
}
.leaflet-container { font: inherit; }

@media (prefers-reduced-motion: reduce) {
    .tv-loading-spinner { animation-duration: 1.6s; }
    * { transition-duration: 0.01ms !important; }
}
/* Running Text */
.tv-running { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; background: rgba(0,0,0,0.7); color: #fff; padding: 5px 0; white-space: nowrap; z-index: 100; }
.tv-running-track { display: inline-block; transform: translateX(0); will-change: transform; }
.tv-running-text { padding-right: 50px; font-size: 1.5rem; }

/* Reserve ruang agar bar running text tidak menutupi konten di layouts */
.tv-surface.tv-has-run .lay-foto { padding-bottom: calc(3.2vw + var(--run-h, 0px)); }
.tv-surface.tv-has-run .lay-foto { padding-bottom: calc(clamp(20px, 3.2vw, 44px) + var(--run-h, 0px)); }
/* Layout Modern memakai jaraknya sendiri supaya kartu "Menuju [sholat]"
   bisa turun sedekat mungkin dengan running text. */
.tv-surface.tv-has-run .lay-modern { padding-bottom: calc(var(--md-jarak-bawah, 0.225vw) + var(--run-h, 0px)); }
.tv-surface.tv-has-run .lay-modern { padding-bottom: calc(var(--md-jarak-bawah, clamp(1.75px, 0.225vw, 3.25px)) + var(--run-h, 0px)); }
.tv-surface.tv-has-run .lay-klasik,
.tv-surface.tv-has-run .lay-fokus,
.tv-surface.tv-has-run .lay-samping,
.tv-surface.tv-has-run .lay-jadwal { padding-bottom: calc(3.5vw + var(--run-h, 0px)); }
.tv-surface.tv-has-run .lay-jadwal { padding-bottom: calc(clamp(20px, 3.5vw, 48px) + var(--run-h, 0px)); }

/* Font size scale */
html.tv-fs-small { font-size: 90%; }
html.tv-fs-large { font-size: 115%; }
.tv-app.tv-fs-small { font-size: 90%; }
.tv-app.tv-fs-large { font-size: 115%; }
/* ===== OVERLAY ADZAN (menjelang & masuk) ===== */
.adz-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6vh;
    gap: clamp(8px, 1.6vh, 16px);
    padding: 24px;
    box-sizing: border-box;
    text-align: center;
    background: rgba(0, 0, 0, 0.78);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.adz-kicker {
    font-size: 2.4vw;
    font-size: clamp(1.3rem, 2.4vw, 2.2rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}
.adz-kicker-name, .adz-masuk-name {
    color: #E0B458;
    font-weight: 700;
}
.adz-count {
    font-size: 26vw;
    font-size: clamp(140px, 26vw, 340px);
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 80px rgba(255, 255, 255, 0.28);
    margin: 0;
    animation: adz-tick-breathe 1s ease-in-out infinite;
}
@keyframes adz-tick-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
.adz-overlay.adz-masuk { background: rgba(0, 0, 0, 0.82); }
.adz-dot {
    width: 2vw;
    width: clamp(14px, 2vw, 22px);
    height: 2vw;
    height: clamp(14px, 2vw, 22px);
    border-radius: 50%;
    background: #E0B458;
    box-shadow: 0 0 0 0 rgba(224, 180, 88, 0.7);
    animation: adz-dot-pulse 1.6s ease-out infinite;
}
@keyframes adz-dot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(224, 180, 88, 0.7); }
    100% { box-shadow: 0 0 0 26px rgba(224, 180, 88, 0); }
}
.adz-title {
    font-size: 2.7vw;
    font-size: clamp(1.5rem, 2.7vw, 2.5rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}
.adz-masuk-name {
    font-size: 16vw;
    font-size: clamp(110px, 16vw, 240px);
    line-height: 1.06;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 6px 70px rgba(224, 180, 88, 0.35);
}
.adz-sub {
    font-size: 1.8vw;
    font-size: clamp(1rem, 1.8vw, 1.6rem);
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
}
.adz-hold-count {
    font-size: 1.4vw;
    font-size: clamp(0.85rem, 1.4vw, 1.15rem);
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* ===== PAPAN JUMAT (khatib & imam, hari Jumat) ===== */
.tv-jumat-board {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em 1em;
    margin: 0.4em 0 0;
    padding: 0.3em 0.9em;
    border-radius: 0.6em;
    background: rgba(0, 0, 0, 0.4);
    background: color-mix(in srgb, rgba(0, 0, 0, 0.4) calc(var(--card-alpha, 100) * 1%), transparent);
    font-size: 1.5vw;
    font-size: clamp(0.85rem, 1.5vw, 1.25rem);
}
.jb-item { white-space: nowrap; }
.jb-center { display: flex; justify-content: center; width: 100%; }
.jb-center:empty { display: none; }
.jb-label { color: rgba(255, 255, 255, 0.55); }
.jb-name { font-weight: 600; color: #ffffff; }
.jb-tema {
    flex: 0 0 100%;
    font-size: 150%;
    font-style: italic;
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
    overflow-wrap: break-word;
    min-width: 0;
}

/* ===== FOTO: baris board+card sejajar + rantai anti-overflow ===== */
/* ===== LAYAR GELAP (setelah iqamah) ===== */
.tv-dark { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; }
.tv-dark-count {
    position: absolute;
    left: 2.5vw;
    bottom: 2.5vh;
    font-size: 1.8vw;
    font-size: clamp(1rem, 1.8vw, 1.6rem);
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}

/* ===== ALARM SYURUQ (hitung mundur 00:59 + 10 dtk tahan) ===== */
.tv-syuruq {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: #000 url('/img/syuruq.webp') center / cover no-repeat;
}
.syuruq-teks { position: absolute; top: 4vh; left: 3vw; text-align: left; }
.syuruq-count {
    margin: 0;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    font-size: 6vw;
    font-size: clamp(2.5rem, 6vw, 7rem);
}
.syuruq-lbl {
    margin: 1vh 0 0;
    margin: clamp(6px, 1vh, 14px) 0 0;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    font-size: 2vw;
    font-size: clamp(1rem, 2vw, 2.2rem);
}
/* Jam berjalan di pojok kanan bawah, jadi saat hitungan kiri atas mencapai
   00:00, jam ini ikut berbunyi menjadi waktu Syuruq. */
.syuruq-jam {
    position: absolute;
    bottom: 4vh;
    /* Menggeser ke kiri dari tombol layar penuh yang menempel di kanan
       bawah, supaya angka detik tidak tertutup kotak tombolnya. */
    right: max(3vw, 84px);
    margin: 0;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    font-size: 3vw;
    font-size: clamp(1.4rem, 3vw, 3.4rem);
}

/* ===== BADGE SIMULASI ===== */
.tv-sim-badge {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    color: #FFDE59;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 6px 12px;
    border-radius: 999px;
    pointer-events: none;
}

.tv-sim-panel {
    position: fixed;
    top: 52px;
    left: 10px;
    z-index: 9999;
    width: calc(100vw - 20px);
    width: min(460px, calc(100vw - 20px));
    background: rgba(0, 0, 0, 0.72);
    color: #e9f3ee;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.tv-sim-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tv-sim-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: #a9c3b8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.tv-sim-head .tv-sim-grip { opacity: 0.7; flex: 0 0 auto; }
.tv-sim-panel.is-dragging { cursor: grabbing; }
.tv-sim-panel.is-dragging .tv-sim-head { color: #e9f3ee; }
.tv-sim-head button {
    margin-left: auto;
    font: inherit;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a9c3b8;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}
.tv-sim-head button:hover { color: #fff; background: rgba(255, 255, 255, 0.18); }
.tv-sim-row label { color: #a9c3b8; }
.tv-sim-row select,
.tv-sim-row button {
    font: inherit;
    color: #10281f;
    background: #e9f3ee;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    padding: 6px 10px;
    min-height: 34px;
    cursor: pointer;
}
/* Popup dropdown mewarisi warna select; dipaksa agar teks & opsi selalu terbaca. */
.tv-sim-row select option,
.tv-sim-row select optgroup { color: #10281f; background: #e9f3ee; }
.tv-sim-row button { color: #fff; background: #0B6B4F; border-color: #0B6B4F; font-weight: 700; }
.tv-sim-row button:hover { background: #0d7f5e; }
.tv-sim-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tv-sim-check input { width: 16px; height: 16px; }
.tv-sim-note { margin: 10px 0 0; color: #a9c3b8; font-size: 12px; }
.tv-sim-phase { margin: 6px 0 0; color: #FFDE59; font-weight: 700; font-size: 13px; }

/* Modal konfirmasi dan pemberitahuan (public/js/modal.js), menggantikan
   alert() dan confirm() bawaan browser. */
.modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(16, 40, 32, 0.55);
  animation: modalFade 0.16s ease-out;
}
.modal-panel {
  position: relative;
  width: 100%;
  width: min(440px, 100%);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 20px;
  animation: modalIn 0.18s ease-out;
}
.modal-bahaya .modal-panel { border-top: 4px solid var(--danger); }
.modal-info .modal-panel { border-top: 4px solid var(--primary); }
.modal-judul {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.modal-pesan {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.modal-kaki {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.modal-kaki .btn { min-width: 104px; }
body.modal-terbuka { overflow: hidden; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes modalFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal-panel { animation: none; }
}

/* -- Paginasi Kas ------------------------------------------------------- */
.kas-paginasi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 4px;
  flex-wrap: wrap;
}
.paginasi-info { font-size: .85rem; color: var(--muted, #888); }
.paginasi-nav { display: flex; gap: 8px; }
.paginasi-nav .btn[disabled] { opacity: .35; cursor: not-allowed; }
.paginasi-total { font-size: .85rem; color: var(--muted, #888); padding: 8px 16px 4px; margin: 0; }

/* -- Hero Section & TV Frame Mockup --------------------------------------- */
.hero {
  padding: 8vw 0;
  padding: clamp(48px, 8vw, 100px) 0;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5vw;
  gap: clamp(24px, 5vw, 80px);
}
.hero-copy { max-width: 520px; }
.hero-eyebrow {
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent, #16a34a);
  letter-spacing: .04em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent, #16a34a);
}
.hero-title {
  font-size: 4.5vw;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 20px;
}
.hero-sub {
  font-size: 1.5vw;
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  color: var(--muted, #64748b);
  line-height: 1.6;
  max-width: 440px;
  margin-bottom: 28px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.hero-note {
  font-size: .8rem;
  color: var(--muted, #64748b);
}

/* TV mockup */
.hero-stage {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tv-frame {
  position: relative;
  width: 100%;
  max-width: 580px;
}

.tv-bezel {
  position: relative;
  width: 100%;
  /* Bingkai dibuat lebih tinggi dari 16:9 supaya ada ruang untuk mengangkat
     layar. Tanpa ruang itu, iframe ter-scale pas mengisi tinggi bingkai dan
     tidak bisa digeser ke atas tanpa terpotong oleh overflow:hidden.
     hero-tv.js memakai ruang sisa itu untuk mengangkat layar ke atas
     (lihat LAYAR_NAIK di hero-tv.js).

     Naikkan padding-bottom  = ruang hitam di bawah bertambah, layar bisa naik
                               lebih tinggi.
     Turunkan padding-bottom  = bingkai makin rapat, ruang untuk naik berkurang.

     padding-top tidak memakai 56.25% (16:9) supaya ruang sisa vertikal selalu
     ada; kalau keduanya tepat 16:9, tidak ada ruang untuk mengangkat layar. */
  padding-top: calc(50%);
  padding-bottom: 75px;
  background: #111;
  border-radius: 12px;
  box-shadow: 0 0 0 3px #333, 0 24px 60px rgba(0,0,0,.45);
  overflow: hidden;
}

/* iframe di-scale programatik oleh hero-tv.js dari 1280x720. Anchor dan
   transform-origin harus sama dengan aturan dasar di atas (sudut kiri-atas),
   karena koordinat yang ditulis JS bersifat absolut terhadap sudut itu. */
.tv-bezel iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1320px;
  height: 820px;
  border: none;
  transform-origin: 0 0;
  /* Fallback sebelum JS sempat jalan: perkiraan kasar untuk lebar 580px. */
  transform: scale(0.42);
  pointer-events: none;
  display: block;
}

.tv-stand {
  width: 28%;
  height: 14px;
  background: #1e1e1e;
  margin: 0 auto;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.tv-stand::after {
  content: '';
  display: block;
  width: 50%;
  height: 6px;
  background: #2a2a2a;
  margin: 0 auto;
  border-radius: 0 0 4px 4px;
}

@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-stage { order: -1; }
  .tv-frame { max-width: 380px; }
}

/* Landing: daftar kepastian hero + kelompok fitur.
   Titik emas dipakai ulang dari eyebrow agar aksen tetap satu. */
.hero-points {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.hero-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.98rem;
}
.hero-points li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 7px;
}
.hero-points a { color: var(--primary); font-weight: 700; }
.feature-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05rem;
  color: var(--primary-deep);
  margin: 30px 0 4px;
}
.feature-group-title:first-of-type { margin-top: 6px; }
.feature-group-title::after {
  content: "";
  height: 1px;
  background: var(--line);
  flex: 1;
}

/* Menu Tampilan: nomor urut kartu + pemisah antar bagian dalam kartu. */
.tamp-panel .admin-card-head h2 { display: flex; align-items: center; gap: 10px; }
.card-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Pembatas sub-bagian dalam kartu admin: dipakai menu Tampilan, Iqamah,
   Jum'at, Ramadhan, Pengumuman, dan Lokasi. */
h3.card-sub {
  margin: 20px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary-deep);
}
.tamp-panel .card-sub-span { grid-column: 1 / -1; }

/* TV di layar ponsel (<=640px): muat satu layar tanpa scroll halaman.
   Grid memakai dvh agar pas viewport HP; huruf baris jadwal memakai vw
   tanpa lantai rem supaya mengecil otomatis mengikuti lebar layar.
   TV tidak pernah sekecil ini, jadi aturan TV di atas tidak tersentuh. */
@media (max-width: 640px) {
  .tv-app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; height: 100vh; height: 100vh; }
  .tv-app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; height: 100vh; height: 100dvh; }
  .tv-surface { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
  .lay-modern {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 26vh) minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 26dvh) minmax(0, 1fr) auto;
    height: 100%;
    --md-baris-min: 26px;
  }
  .lay-modern .md-hd {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .lay-modern .md-date { text-align: left; white-space: normal; }
  .lay-modern .md-clock { justify-content: flex-start; text-align: left; }
  .lay-modern .md-clock-time { font-size: 9vw; }
  .lay-modern .md-ident .t-alamat { overflow-wrap: break-word; }
  .lay-modern .md-main { grid-column: 1; grid-row: 2; min-height: 0; }
  .lay-modern .md-slide { height: 100%; }
  .lay-modern .md-panel { grid-column: 1; grid-row: 3; min-height: 0; }
  .lay-modern .md-next { grid-column: 1; grid-row: 4; justify-self: stretch; }
  .lay-modern .pl-name { font-size: calc(3.4vw * var(--sholat-nama-scale, 1)); }
  .lay-modern .pl-time { font-size: calc(4.2vw * var(--sholat-waktu-scale, 1)); }
  .tv-running-text { font-size: 4vw; }

  /* Klasik & Fokus: grid 8 waktu jadi 4x2 supaya tiap kolom cukup lebar. */
  .lay-klasik,
  .lay-fokus { padding: 4vw; }
  .lay-klasik .hd-clock .t-clock-large { font-size: 9vw; }
  .lay-klasik .t-clock-sec,
  .lay-fokus .t-clock-sec { font-size: 4.5vw; }
  .lay-klasik .grid-8,
  .lay-fokus .grid-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.4vw;
  }
  .lay-klasik .grid-8 .pi,
  .lay-fokus .grid-8 .pi { padding: 1.2vh 1vw; border-radius: 10px; }
  .lay-klasik .grid-8 .pi-name,
  .lay-fokus .grid-8 .pi-name { font-size: calc(3.1vw * var(--sholat-nama-scale, 1)); }
  .lay-klasik .grid-8 .pi-time,
  .lay-fokus .grid-8 .pi-time { font-size: calc(4.6vw * var(--sholat-waktu-scale, 1)); margin-top: 0.3vh; }
  .lay-klasik .btm,
  .lay-fokus .btm { gap: 1.4vh; }
  .lay-klasik .ft,
  .lay-fokus .ft { flex-wrap: wrap; gap: 1vh; }
  .lay-fokus .t-clock-small { font-size: 5vw; }
  .lay-fokus .mid-content { padding: 1.4vh 4vw; }
  .lay-fokus .t-cd-hero { font-size: 13vw; margin: 0.3vh 0; }
  .lay-fokus .t-cd-lbl,
  .lay-fokus .t-cd-time { font-size: 3.6vw; }

  /* Samping: dua kolom ditumpuk, kolom jadwal di bawah kolom utama. */
  .lay-samping { flex-direction: column; gap: 1.6vh; padding: 4vw; }
  .lay-samping .col-main { flex: 0 0 auto; gap: 1vh; }
  .lay-samping .t-clock-huge { font-size: 11vw; }
  .lay-samping .col-side { width: 100%; min-width: 0; flex: 1 1 auto; min-height: 0; }
  .lay-samping .side-box { overflow-y: auto; }
  .lay-samping .pl-name { font-size: calc(3vw * var(--sholat-nama-scale, 1)); }
  .lay-samping .pl-time { font-size: calc(4vw * var(--sholat-waktu-scale, 1)); }

  /* Foto: kolom jadwal dipindah ke bawah, nama masjid & jam dikecilkan. */
  .lay-foto { padding: 4vw; }
  .lay-foto .hd-foto .t-masjid-huge { font-size: calc(7vw * var(--masjid-scale, 1)); letter-spacing: 0.02em; overflow-wrap: anywhere; }
  .lay-foto .hd-foto-row { flex-direction: column; gap: 1.4vh; }
  .lay-foto .hd-foto-board { width: 100%; }
  .lay-foto .col-side { width: 100%; min-width: 0; }
  .lay-foto .hd-foto-row .col-side { flex: 1 1 auto; min-height: 0; }
  .lay-foto .side-box { overflow-y: auto; }
  .lay-foto .pl-name { font-size: calc(3vw * var(--sholat-nama-scale, 1)); }
  .lay-foto .pl-time { font-size: calc(4vw * var(--sholat-waktu-scale, 1)); }
  .lay-foto .btm-split { flex-direction: column; align-items: flex-start; gap: 1vh; }
  .lay-foto .t-clock-huge { font-size: 11vw; }

  /* Jadwal saja: 5 waktu tetap sebaris dengan huruf yang mengecil. */
  .lay-jadwal { padding: 4vw; gap: 1.6vh; }
  .lay-jadwal .t-date-center { font-size: 3.6vw; }
  .lay-jadwal .grid-5 { gap: 1.6vw; }
  .lay-jadwal .grid-5 .pi { padding: 0.7vh 1vw; border-radius: 10px; }
  .lay-jadwal .grid-5 .pi-name { font-size: calc(3.1vw * var(--sholat-nama-scale, 1)); }
  .lay-jadwal .grid-5 .pi-time { font-size: calc(4.4vw * var(--sholat-waktu-scale, 1)); margin-top: 0.3vh; }
  .lay-jadwal .t-clock-mid { font-size: 9vw; }
  .lay-jadwal .t-clock-sec { font-size: 4.5vw; }
  .lay-jadwal .ft-center { gap: 0.6vh; }

  /* Handheld: elemen yang memakai clamp() dengan lantai `rem` ikut membesar
     saat setelan "Ukuran teks" dinaikkan, sehingga layout meluber. Di layar
     ponsel suku fluid (vw) di dalam clamp selalu lebih kecil dari lantai rem,
     jadi ukurannya dikunci ke vw. Pengali skala per-elemen (--masjid-scale,
     --alamat-scale, --kas-scale) tetap dihormati, sama seperti layout modern. */
  .lay-klasik .t-date-mas,
  .lay-fokus .t-date-mas,
  .lay-samping .t-date-mas,
  .lay-foto .t-date-mas,
  .lay-klasik .t-date-hij,
  .lay-fokus .t-date-hij,
  .lay-samping .t-date-hij,
  .lay-foto .t-date-hij { font-size: 3.6vw; }

  .lay-klasik .t-masjid-blok,
  .lay-fokus .t-masjid-blok,
  .lay-samping .t-masjid-blok,
  .lay-jadwal .t-masjid-blok { --t-nama-fs: calc(5.3vw * var(--masjid-scale, 1)); }

  .lay-klasik .t-masjid,
  .lay-fokus .t-masjid,
  .lay-samping .t-masjid,
  .lay-jadwal .t-masjid { max-width: 100%; overflow-wrap: anywhere; }

  .lay-klasik .t-alamat,
  .lay-fokus .t-alamat,
  .lay-samping .t-alamat,
  .lay-foto .t-alamat,
  .lay-jadwal .t-alamat { font-size: calc(3.2vw * var(--alamat-scale, 1)); }

  .lay-klasik .t-cd-top,
  .lay-samping .t-cd-top,
  .lay-foto .t-cd-top,
  .lay-jadwal .t-cd-top { font-size: 3.8vw; }

  .lay-klasik .tv-kas,
  .lay-fokus .tv-kas,
  .lay-samping .tv-kas,
  .lay-foto .tv-kas,
  .lay-jadwal .tv-kas { font-size: calc(3.4vw * var(--kas-scale, 1)); }

  .lay-klasik .tv-jumat-board,
  .lay-fokus .tv-jumat-board,
  .lay-samping .tv-jumat-board,
  .lay-foto .tv-jumat-board,
  .lay-jadwal .tv-jumat-board { font-size: 3.6vw; }

  .lay-samping .t-clock-sec,
  .lay-foto .t-clock-sec { font-size: 4.5vw; }

  /* Layout Center di layar kecil: header menumpuk, kartu 3x2. */
  .lay-center { padding: 8px; row-gap: 8px; }
  .lay-center .ct-hd {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    padding: 8px 12px;
    border-radius: 12px;
  }
  .lay-center .ct-clock-time { font-size: 1.54rem; }
  .lay-center .ct-nama { font-size: calc(1rem * var(--masjid-scale, 1)); }
  .lay-center .t-alamat.ct-alamat { font-size: calc(0.8rem * var(--alamat-scale, 1)); }
  .lay-center .ct-date { grid-column: 1 / -1; justify-content: space-between; }
  .lay-center .ct-date-mas { font-size: 0.88rem; }
  .lay-center .ct-date-hij { font-size: 0.79rem; }
  .lay-center .ct-date .t-logo.ct-logo { width: 60px; height: 60px; }
  .lay-center .ct-main { min-height: 30vh; }
  .lay-center .ct-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lay-center .ct-card { border-radius: 12px; padding: 8px 4px; }
  .lay-center .ct-name { font-size: calc(0.68rem * var(--sholat-nama-scale, 1)); }
  .lay-center .ct-time { font-size: calc(1rem * var(--sholat-waktu-scale, 1)); }
  .lay-center .ct-count { font-size: 0.75rem; }

  /* Layout Royal di layar ponsel. Bagi kolom 28%/72% hanya menyisakan
     sekitar 100px untuk jadwal di layar tegak, sehingga kolom "1fr" pada
     kartu jadwal tersempit nol: nama sholat lenyap dan countdown terpotong
     jadi "Dzu ...". Karena itu Royal ditumpuk vertikal di sini, mengikuti
     perlakuan Modern/Samping/Foto: slide di atas, panel jadwal memakai
     sisa tinggi dengan lebar penuh. Header dipecah dua baris (jam +
     tanggal, lalu identitas masjid selebar layar) karena dalam satu baris
     tanggal meleset keluar tepi kanan layar. */
  .lay-royal .ry-hd {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 5px;
    padding: 8px 10px;
  }
  .lay-royal .ry-clock { grid-column: 1; grid-row: 1; }
  .lay-royal .ry-date { grid-column: 2; grid-row: 1; align-self: center; }
  .lay-royal .ry-ident { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .lay-royal .ry-clock-time { font-size: 8vw; }
  /* tz adalah 0.32em dari jam, sehingga ikut mengecil jadi di bawah 9px. */
  .lay-royal .ry-clock-tz { font-size: 3.2vw; }
  .lay-royal .ry-date-mas { font-size: 3.6vw; white-space: normal; }
  .lay-royal .ry-date-hij { font-size: 3.6vw; white-space: normal; }
  .lay-royal .ry-ident .t-logo { width: 9vw; height: 9vw; }
  /* Nama masjid dan alamat yang panjang dulu memakai nowrap sehingga
     mendorong header melewati tepi layar; biarkan membungkus ke baris
     kedua. */
  .lay-royal .ry-ident .ry-nama { font-size: calc(4.4vw * var(--masjid-scale, 1)); white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .lay-royal .ry-ident .t-alamat { font-size: calc(3.6vw * var(--alamat-scale, 1)); white-space: normal; overflow-wrap: anywhere; }

  .lay-royal .ry-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 24vh) minmax(0, 1fr);
    grid-template-rows: minmax(0, 24dvh) minmax(0, 1fr);
    row-gap: 10px;
    padding: 0 10px;
  }
  .lay-royal .ry-slide { grid-column: 1; grid-row: 1; height: 100%; }
  .lay-royal .ry-panel { grid-column: 1; grid-row: 2; padding: 8px; gap: 6px; }
  .lay-royal .ry-card { padding: 4px 10px; gap: 8px; border-left-width: 4px; }
  /* Di sini panel jadwal mengisi sisa TINGGI layar dan memuat enam baris,
     jadi pembatas huruf adalah tinggi card, bukan lebar layar. Karena itu
     satuan diturunkan ke vh, sama seperti alasan yang dipakai layout
     Modern (lihat .lay-modern .pl-name). Dengan begitu nama dan jam ikut
     mengikuti tinggi card dan tidak meluber saat setelan Tampilan
     dinaikkan. Lebar card dihormati oleh flex yang boleh menyusut di atas. */
  .lay-royal .ry-name { font-size: calc(2.2vh * var(--sholat-nama-scale, 1)); line-height: 1.1; }
  .lay-royal .ry-time { font-size: calc(2.8vh * var(--sholat-waktu-scale, 1)); line-height: 1.1; }
  /* Jarak atas sudah ditangani oleh gap panel, dan pil ini hanya tersempit
     karena kolomnya yang sempit di ponsel. */
  .lay-royal .ry-count { margin-top: 0; padding: 6px 8px; font-size: 4vw; }
}

/* Royal di layar mendatar pendek (ponsel/tablet diletakkan mendatar).
   Batas 640px tidak berlaku di sini, sehingga enam kartu tergencet ke sisa
   tinggi dan baris jamnya terpotong di dalam tiap kartu. Ukuran dikunci
   dalam rem karena vw sekarang menjadi satuan yang lebih besar. */
@media (max-height: 520px) and (min-width: 641px) {
  .lay-royal .ry-hd { padding: 4px 16px; }
  .lay-royal .ry-clock-time { font-size: 2.2rem; }
  .lay-royal .ry-ident .t-logo { width: 2.2rem; height: 2.2rem; }
  .lay-royal .ry-panel { padding: 6px 8px; gap: 4px; }
  .lay-royal .ry-card { padding: 2px 10px; }
  .lay-royal .ry-name { font-size: calc(0.8rem * var(--sholat-nama-scale, 1)); }
  .lay-royal .ry-time { font-size: calc(1.05rem * var(--sholat-waktu-scale, 1)); }
  .lay-royal .ry-count { margin-top: 0; padding: 4px 8px; font-size: 0.9rem; }
}

/* =====================================================================
   KOMPATIBILITAS SMART TV (Android TV / Google TV, Samsung Tizen, LG webOS)
   ---------------------------------------------------------------------
   Sebagian perbaikan disuntik oleh tools/fallback-tv-css.js: shorthand
   `inset`, `clamp()`/`min()`, `color-mix()`, dan `dvh` di atas sudah punya
   baris cadangan. Blok ini menutup tiga celah yang tidak bisa diperbaiki
   hanya dengan baris cadangan, dibungkus @supports supaya TV modern tidak
   terpengaruh sama sekali:
     1. properti kustom berisi clamp() -> nilainya baru dihitung saat dipakai,
        jadi baris cadangan biasa tidak menolong;
     2. `gap` pada flexbox -> baru ada di Chromium 84;
     3. `display: grid` -> baru ada di Chromium 57 (Tizen 4, webOS 4.0).
   ===================================================================== */

/* 1. Properti kustom ber-clamp -> pakai suku fluid-nya. */
@supports not (font-size: clamp(1px, 1px, 1px)) {
  .t-masjid-blok {
    --t-nama-fs: calc(1.63vw * var(--masjid-scale, 1));
    --t-nama-fs-huge: calc(2.75vw * var(--masjid-scale, 1));
  }
  .lay-modern {
    --md-edge: 0.9vw;
    --md-baris-min: 8.2vh;
    --md-baris-min-layar-penuh: 9vh;
    --md-jarak-header: 0.8vw;
    --md-jarak-menuju: 1.2vw;
    --md-jarak-bawah: 0.225vw;
  }
}

/* 2. `gap` di flexbox -> jarak lewat margin antarsaudara. */
@supports not (gap: 1px) {
  .lay-modern .md-panel > * + * { margin-top: clamp(4px, 0.5vh, 9px); }
  .lay-modern .md-list > * + * { margin-top: clamp(2px, 0.3vh, 5px); }
  .lay-modern .pl-row > * + * { margin-left: 8px; }
  .lay-modern .md-clock > * + * { margin-left: clamp(6px, 0.7vw, 13px); }
  .lay-modern .md-slide-kosong > * + * { margin-top: 6px; }
  .tv-screen > * + * { margin-top: clamp(14px, 3vh, 34px); }
}

/* 3. `display: grid` -> flexbox (Chromium <57: Tizen 4, webOS 4.0). */
@supports not (display: grid) {
  /* Header: nama masjid (melebar) | tanggal | jam. */
  .lay-modern .md-hd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .lay-modern .md-ident { flex: 1 1 auto; min-width: 0; }
  .lay-modern .md-date { flex: 0 1 auto; min-width: 0; }
  .lay-modern .md-clock { flex: 0 0 auto; }
  .lay-modern .md-hd > * + * { margin-left: clamp(12px, 1.6vw, 26px); }

  /* Dua kolom utama: gambar slide (kiri) + panel jadwal (kanan); kartu
     "Menuju [sholat]" ditaruh satu baris penuh di bawahnya. */
  .lay-modern {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
  }
  .lay-modern .md-hd { order: 1; flex: 0 0 100%; }
  .lay-modern .md-main { order: 2; flex: 1 1 0; }
  .lay-modern .md-panel { order: 3; flex: 0 0 30%; margin-left: clamp(10px, 1.2vw, 18px); }
  .lay-modern .md-next { order: 4; flex: 0 0 100%; justify-content: center; }

  /* Daftar 8 dan 5 waktu sholat -> satu baris flex rata. */
  .grid-8,
  .grid-5 { display: flex; flex-wrap: nowrap; }
  .grid-8 > *,
  .grid-5 > * { flex: 1 1 0; min-width: 0; }
}

/* 4. `aspect-ratio` (baru ada di Chromium 88; LG webOS <=6, Tizen <=6) ->
   tinggi lewat padding-top supaya kotak pratinjau dan thumbnail tidak menciut
   jadi nol. Pada LG webOS, pratinjau di menu Tampilan hilang karena inilah:
   .preview-frame tidak punya tinggi cadangan sehingga iframe yang di-scale
   terpotong habis oleh overflow:hidden. */
@supports not (aspect-ratio: 16 / 9) {
  .preview-frame { box-sizing: content-box; height: 0; padding-top: 56.25%; }
}
@supports not (aspect-ratio: 4 / 3) {
  .bg-thumb { box-sizing: content-box; height: 0; padding-top: 75%; }
}