/* RPD — TV View
   Dioptimalkan untuk layar 16:9 (1920x1080 dan 1366x768) dalam Google Chrome. */

:root {
    --primary: #3988ff;
    --primary-dark: #2274e8;
    --text: #17263c;
    --muted: #6d7f97;
    --surface: rgba(255, 255, 255, 0.72);
    --line: rgba(23, 38, 60, 0.1);
    --success: #31b780;
    --warning: #d9a828;
    --danger: #e05263;
    --radius: 26px;
    --gap: 1.6vmin;
    /* Kurva dan durasi perpindahan menu. Dibaca juga oleh tv.js agar durasi
       hanya ditulis di satu tempat. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --view-exit: 200ms;
    --view-enter: 320ms;
    --font: "Plus Jakarta Sans", "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    font-family: var(--font);
    color: var(--text);
    background:
        radial-gradient(1200px 760px at 85% -10%, rgba(57, 136, 255, 0.28), transparent 60%),
        radial-gradient(900px 560px at -8% 10%, rgba(255, 255, 255, 0.9), transparent 58%),
        linear-gradient(158deg, #eef4fb 0%, #dce8f3 55%, #c9dcf0 100%);
}

.tv-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    width: 100vw;
    padding: 2.4vmin 2.6vmin;
    gap: var(--gap);
}

/* ------------------------------------------------------------------ header */

.tv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2vmin;
    padding: 1.1vmin 2vmin;
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 1.2vmin 3vmin rgba(23, 38, 60, 0.08);
}

.tv-brand {
    display: flex;
    align-items: center;
    gap: 1.2vmin;
    min-width: 0;
    /* Dibatasi supaya nama aplikasi tidak melebar dan menabrak menu ikon di
       tengah header, tetapi cukup lebar agar barisnya tidak terpotong. */
    flex: 0 1 32%;
}

.tv-mark {
    display: grid;
    place-items: center;
    width: 5.2vmin;
    height: 5.2vmin;
    min-width: 34px;
    min-height: 34px;
    border-radius: 1.4vmin;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 800;
    /* Singkatan tiga huruf, jadi ukurannya diturunkan agar tetap muat. */
    font-size: clamp(11px, 1.5vmin, 20px);
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: 0 1vmin 2vmin rgba(57, 136, 255, 0.35);
}

.tv-brand-text {
    display: grid;
    min-width: 0;
}

/* Nama aplikasi kini panjang; dibiarkan turun sampai dua baris supaya terbaca,
   bukan dipotong menjadi beberapa kata pertama saja. */
.tv-brand-text strong {
    font-size: clamp(13px, 1.75vmin, 24px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tv-brand-text span {
    font-size: clamp(11px, 1.5vmin, 20px);
    color: var(--muted);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-meta {
    display: flex;
    align-items: center;
    gap: 2vmin;
    flex: none;
}

.tv-sync {
    display: inline-flex;
    align-items: center;
    gap: 0.8vmin;
    padding: 0.6vmin 1.3vmin;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line);
    font-size: clamp(10px, 1.35vmin, 17px);
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.tv-sync-dot {
    width: 1vmin;
    height: 1vmin;
    min-width: 7px;
    min-height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0.5vmin rgba(49, 183, 128, 0.2);
}

.tv-sync[data-state="syncing"] .tv-sync-dot {
    background: var(--primary);
    box-shadow: 0 0 0 0.5vmin rgba(57, 136, 255, 0.2);
    animation: tv-pulse 1.4s ease-in-out infinite;
}

.tv-sync[data-state="offline"] .tv-sync-dot {
    background: var(--warning);
    box-shadow: 0 0 0 0.5vmin rgba(217, 168, 40, 0.22);
    animation: tv-pulse 1.4s ease-in-out infinite;
}

@keyframes tv-pulse {
    50% { opacity: 0.35; }
}

.tv-clock {
    display: grid;
    justify-items: end;
    line-height: 1.15;
}

.tv-clock[hidden] {
    display: none;
}

.tv-time {
    font-size: clamp(20px, 3.1vmin, 46px);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.tv-date {
    font-size: clamp(11px, 1.5vmin, 20px);
    color: var(--muted);
    font-weight: 600;
}

/* ------------------------------------------------------------------ stage */

.tv-stage {
    position: relative;
    min-height: 0;
    min-width: 0;
    border-radius: var(--radius);

    /* Perpindahan menu. Panggung lama keluar ke satu arah dan panggung baru
       masuk dari arah berlawanan, mengikuti posisi menu yang dipilih, sehingga
       pergantian terbaca sebagai perpindahan tempat dan bukan kedipan.
       Arahnya dipasang tv.js lewat --view-shift. */
    transition-property: opacity, transform;
    transition-timing-function: var(--ease-out);
    transition-duration: var(--view-enter);
}

/* Keluar lebih cepat daripada masuk: layar tidak menahan konten yang sudah
   ditinggalkan, tetapi konten baru sempat terbaca saat datang. */
.tv-stage.is-view-leaving {
    transition-duration: var(--view-exit);
    opacity: 0;
    transform: translateX(var(--view-shift, -3.5%)) scale(0.985);
}

/* Titik awal panggung yang masuk dipasang tanpa transisi, lalu kelasnya
   dilepas pada frame berikutnya agar transisi berjalan dari posisi itu. */
.tv-stage.is-view-entering {
    transition: none;
    opacity: 0;
    transform: translateX(var(--view-shift, 3.5%)) scale(0.985);
}

.tv-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 2.6vmin;
    padding: 6vmin;
    text-align: center;
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.85);
}

.tv-empty[hidden] {
    display: none;
}

.tv-empty p {
    margin: 0;
    max-width: 24ch;
    font-size: clamp(18px, 2.6vmin, 40px);
    font-weight: 600;
    color: var(--muted);
    line-height: 1.5;
}

.tv-empty-mark {
    width: 10vmin;
    height: 10vmin;
    min-width: 64px;
    min-height: 64px;
    border-radius: 3vmin;
    background: linear-gradient(135deg, rgba(57, 136, 255, 0.22), rgba(57, 136, 255, 0.08));
    border: 0.4vmin solid rgba(57, 136, 255, 0.3);
}

/* ------------------------------------------------------------------ slider */

.tv-slider {
    position: absolute;
    inset: 0;
}

.tv-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
}

.tv-slide.is-active {
    opacity: 1;
    z-index: 2;
}

.tv-slider[data-transition="fade"] .tv-slide {
    transition: opacity 0.6s ease;
}

.tv-slider[data-transition="slide"] .tv-slide {
    transform: translateX(6%);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tv-slider[data-transition="slide"] .tv-slide.is-active {
    transform: translateX(0);
}

.tv-slider[data-transition="slide"] .tv-slide.is-leaving {
    transform: translateX(-6%);
}

/* ------------------------------------------------------------------ stack */

.tv-stack {
    position: absolute;
    inset: 0;
    display: grid;
    gap: var(--gap);
}

.tv-stack[data-count="1"] {
    grid-template-columns: 1fr;
}

.tv-stack[data-count="2"] {
    grid-template-columns: 1fr 1fr;
}

.tv-stack[data-count="3"] {
    grid-template-columns: 1.45fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.tv-stack[data-count="3"] > .tv-tile:first-child {
    grid-row: span 2;
}

.tv-stack[data-count="4"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.tv-tile {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.tv-stack[data-count="2"] { --scale: 0.8; }
.tv-stack[data-count="3"] { --scale: 0.68; }
.tv-stack[data-count="4"] { --scale: 0.62; }

/* ------------------------------------------------------------------ content cards */

.tv-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 2vmin 5vmin rgba(23, 38, 60, 0.1);
    overflow: hidden;
    margin: 0;
}

.tv-content--text {
    justify-content: center;
    gap: 2.4vmin;
    padding: 5vmin 6vmin;
}

.tv-title {
    margin: 0;
    max-width: 26ch;
    font-size: calc(var(--scale, 1) * clamp(26px, 4.6vmin, 88px));
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--text);
}

.tv-title::after {
    content: "";
    display: block;
    width: 12vmin;
    height: 0.7vmin;
    min-height: 4px;
    margin-top: 2vmin;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), rgba(57, 136, 255, 0.15));
}

.tv-text {
    margin: 0;
    /* Panjang baris dibatasi agar tetap nyaman dibaca dari jarak TV. */
    max-width: 52ch;
    font-size: calc(var(--scale, 1) * clamp(18px, 3.2vmin, 52px));
    line-height: 1.5;
    font-weight: 500;
    color: #23354f;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow: hidden;
}

/* Panjang teks menyesuaikan ukuran huruf, tetap di atas ambang keterbacaan TV. */
.tv-content--text[data-length="m"] .tv-text { font-size: calc(var(--scale, 1) * clamp(17px, 2.8vmin, 44px)); }
.tv-content--text[data-length="l"] .tv-text { font-size: calc(var(--scale, 1) * clamp(16px, 2.35vmin, 36px)); }
.tv-content--text[data-length="xl"] .tv-text { font-size: calc(var(--scale, 1) * clamp(15px, 2vmin, 30px)); }
.tv-content--text[data-length="l"] .tv-title,
.tv-content--text[data-length="xl"] .tv-title { font-size: calc(var(--scale, 1) * clamp(22px, 3.6vmin, 64px)); }

/* ------------------------------------------------------------------ image */

.tv-content--image {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(226, 238, 250, 0.9));
    padding: 0;
}

.tv-image-frame {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 2vmin;
}

.tv-image-frame img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 1.6vmin;
}

.tv-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4vmin 3vmin 2.2vmin;
    font-size: calc(var(--scale, 1) * clamp(15px, 2.2vmin, 38px));
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0.3vmin 1.2vmin rgba(9, 20, 36, 0.55);
    background: linear-gradient(180deg, rgba(9, 20, 36, 0) 0%, rgba(9, 20, 36, 0.55) 60%, rgba(9, 20, 36, 0.72) 100%);
    pointer-events: none;
}

.tv-media-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.6vmin;
    padding: 4vmin;
    text-align: center;
    color: var(--muted);
    background: linear-gradient(160deg, #eef4fb, #dbe7f5);
}

.tv-media-fallback strong {
    font-size: calc(var(--scale, 1) * clamp(16px, 2.4vmin, 38px));
    color: var(--text);
}

.tv-media-fallback span {
    font-size: calc(var(--scale, 1) * clamp(12px, 1.7vmin, 26px));
}

.tv-media-fallback::before {
    content: "";
    width: 8vmin;
    height: 8vmin;
    min-width: 48px;
    min-height: 48px;
    border-radius: 2vmin;
    border: 0.4vmin solid rgba(57, 136, 255, 0.35);
    background: rgba(57, 136, 255, 0.12);
}

/* ------------------------------------------------------------------ pdf flipbook */

.tv-content--pdf {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(224, 236, 249, 0.92));
    padding: 0;
}

.tv-flip {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2vmin;
    padding: 2.4vmin;
    perspective: 2400px;
}

.tv-page {
    position: relative;
    max-width: 50%;
    max-height: 100%;
    border-radius: 0.8vmin;
    background: #fff;
    box-shadow: 0 1.6vmin 4vmin rgba(23, 38, 60, 0.22);
    transform-origin: left center;
    animation: tv-page-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.tv-page--single {
    max-width: min(72%, 100%);
}

.tv-page--right {
    transform-origin: right center;
    animation-name: tv-page-in-right;
}

.tv-page canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 0.8vmin;
}

@keyframes tv-page-in {
    from { transform: rotateY(-22deg); opacity: 0.35; }
    to   { transform: rotateY(0); opacity: 1; }
}

@keyframes tv-page-in-right {
    from { transform: rotateY(22deg); opacity: 0.35; }
    to   { transform: rotateY(0); opacity: 1; }
}

.tv-pdf-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2vmin;
    padding: 1.4vmin 2.6vmin;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 55%);
    font-size: calc(var(--scale, 1) * clamp(12px, 1.7vmin, 26px));
    font-weight: 700;
    color: var(--text);
    pointer-events: none;
}

.tv-pdf-bar span:last-child {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tv-pdf-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius);
    background: #fff;
}

.tv-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.4vmin;
    color: var(--muted);
    font-size: clamp(12px, 1.8vmin, 26px);
    font-weight: 600;
}

.tv-loading::before {
    content: "";
    width: 5vmin;
    height: 5vmin;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    border: 0.5vmin solid rgba(57, 136, 255, 0.25);
    border-top-color: var(--primary);
    animation: tv-spin 0.9s linear infinite;
}

@keyframes tv-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ footer */

.tv-footer {
    display: flex;
    align-items: center;
    gap: 2vmin;
    padding: 1vmin 2vmin;
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.85);
}

.tv-footer[hidden] {
    display: none;
}

.tv-progress {
    flex: 1;
    height: 0.9vmin;
    min-height: 6px;
    border-radius: 999px;
    background: rgba(57, 136, 255, 0.16);
    overflow: hidden;
}

.tv-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

.tv-position {
    font-size: clamp(12px, 1.7vmin, 24px);
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ layar lebih kecil */

@media (max-width: 900px), (max-height: 520px) {
    .tv-shell {
        padding: 1.6vmin 1.8vmin;
    }

    .tv-stack[data-count="3"] {
        grid-template-columns: 1fr 1fr;
    }

    .tv-content--text {
        padding: 3.4vmin 4vmin;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tv-page {
        animation: none;
    }

    .tv-slide {
        transition-duration: 0.01ms !important;
    }

    /* Perpindahan menu tetap dipertahankan sebagai pudar singkat — itu yang
       menjelaskan bahwa layar berpindah — tetapi geserannya dihilangkan. */
    .tv-stage.is-view-leaving,
    .tv-stage.is-view-entering {
        transform: none;
    }
}