/* =========================================================================
   Boarding Monitor - gaya iOS modern di atas nuansa biru korporat.
   Ukuran memakai satuan layar (vw/vh) supaya ikut membesar di TV 4K.
   ========================================================================= */

:root {
    /* ---------------------------------------------------------------
       Warna & ukuran teks layar. Diatur di Dashboard > Isi Layar >
       Warna & Ukuran Layar; halaman monitor menyuntikkan ulang :root
       dengan nilai dari DB.
       --------------------------------------------------------------- */
    --latar-layar: #06154a;
    --aksen-layar: #2f7cf6;

    --teks: #ffffff;

    /* Warna teks per bagian kartu jadwal; bawaannya ikut --teks. */
    --teks-rute: var(--teks);
    --teks-jam: var(--teks);
    --teks-kapal: var(--teks);

    /* Jam sekarang di ujung kiri teks berjalan. */
    --teks-jam-kini: var(--teks);
    --latar-jam-kini: var(--aksen-layar);

    --hijau: #30d158;
    --jingga: #ff9f0a;
    --merah: #ff453a;
    --kuning: #ffd60a;

    /* Pengali ukuran teks; 1 = ukuran bawaan. --skala mengenai semuanya,
       sisanya menambah/mengurangi per bagian. */
    --skala: 1;
    --skala-kepala: 1;
    --skala-rute: 1;
    --skala-jam: 1;
    --skala-kapal: 1;
    --skala-pil: 1;
    --skala-ticker: 1;
    --skala-jam-kini: 1;

    /* Gambar latar kartu jadwal (Dashboard > Isi Layar > Gambar Latar Kartu).
       Tanpa gambar, ketiganya diam: none + tirai tembus pandang. */
    --rute-gambar: none;
    --rute-tirai: transparent;
    --rute-muat: cover;
    --rute-posisi: center;

    /* ---- turunan: diracik dari warna di atas, jangan diberi nilai tetap ---- */
    --biru-langit: var(--aksen-layar);
    --biru-terang: color-mix(in srgb, var(--aksen-layar) 78%, #000);
    --biru: color-mix(in srgb, var(--aksen-layar) 55%, #000);
    --biru-tua: color-mix(in srgb, var(--aksen-layar) 35%, var(--latar-layar));
    --biru-malam: var(--latar-layar);

    --hijau-tua: color-mix(in srgb, var(--hijau) 70%, #000);
    --jingga-tua: color-mix(in srgb, var(--jingga) 72%, #000);
    --merah-tua: color-mix(in srgb, var(--merah) 70%, #000);

    --teks-lembut: color-mix(in srgb, var(--teks) 72%, transparent);
    --teks-samar: color-mix(in srgb, var(--teks) 45%, transparent);

    --kaca: color-mix(in srgb, var(--teks) 10%, transparent);
    --kaca-kuat: color-mix(in srgb, var(--teks) 16%, transparent);
    --garis: color-mix(in srgb, var(--teks) 16%, transparent);

    --r-besar: 2.2vh;
    --r-sedang: 1.6vh;
    --r-kecil: 1.1vh;

    --bayang: 0 1.2vh 3vh color-mix(in srgb, var(--latar-layar) 55%, transparent);

    /* Kartu tayangan membentang dari tepi atas sampai teks berjalan; lebarnya
       mengikuti rasio potret 9:16 supaya foto/video tegak terisi penuh. */
    --panel-tinggi: 92vh;
    --panel-lebar: calc(var(--panel-tinggi) * 9 / 16);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
        "Segoe UI", system-ui, sans-serif;
    color: var(--teks);
    background: var(--biru-malam);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Latar: gradien biru + dua cahaya lembut, meniru kedalaman panel iOS. */
.latar {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(120vh 80vh at 12% -10%, color-mix(in srgb, var(--aksen-layar) 55%, transparent), transparent 62%),
        radial-gradient(100vh 70vh at 95% 110%, color-mix(in srgb, var(--aksen-layar) 42%, transparent), transparent 60%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--aksen-layar) 42%, var(--latar-layar)) 0%,
            color-mix(in srgb, var(--aksen-layar) 20%, var(--latar-layar)) 45%,
            color-mix(in srgb, var(--latar-layar) 85%, #000) 100%);
    background-color: var(--latar-layar);
    z-index: 0;
}

.latar::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--teks) 5%, transparent) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: 0.5;
}

/* ------------------------------------------------------------------ tata letak */
.monitor {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    padding: 1.8vh 2vw 0;
    gap: 1.6vh 1.4vw;
}

.kepala { grid-area: 1 / 1; }
.badan { grid-area: 2 / 1; }
.panel { grid-area: 1 / 2 / 3 / 3; }
.ticker { grid-area: 3 / 1 / 4 / -1; }

/* Tanpa tayangan: kolom kanan dilepas, papan jadwal memakai seluruh lebar. */
body.tanpa-tayangan .monitor {
    grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------------ kepala */
.kepala {
    display: flex;
    align-items: center;
    gap: 1.6vw;
    padding: 1.2vh 1.8vw;
    background: linear-gradient(120deg, color-mix(in srgb, var(--teks) 14%, transparent), color-mix(in srgb, var(--teks) 6%, transparent));
    border: 1px solid var(--garis);
    border-radius: var(--r-besar);
    box-shadow: var(--bayang);
    backdrop-filter: blur(18px);
}

.kepala__logo {
    height: 7.2vh;
    width: auto;
    filter: drop-shadow(0 0.4vh 0.8vh rgba(0, 0, 0, 0.35));
}

.kepala__teks {
    flex: 1;
    min-width: 0;
}

.kepala__judul {
    font-size: calc(4.1vh * var(--skala) * var(--skala-kepala));
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.05;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--teks) 30%, color-mix(in srgb, var(--aksen-layar) 28%, var(--teks)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kepala__subjudul {
    margin-top: 0.4vh;
    font-size: calc(2.1vh * var(--skala) * var(--skala-kepala));
    font-weight: 500;
    color: var(--teks-lembut);
    letter-spacing: 0.02em;
}

.kepala__tanggal {
    text-align: right;
    flex-shrink: 0;
}

.kepala__hari {
    font-size: calc(2.7vh * var(--skala) * var(--skala-kepala));
    font-weight: 700;
    color: color-mix(in srgb, var(--kuning) 55%, var(--teks));
    letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ badan */
.badan {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1.4vw;
    min-height: 0;
}

.kolom {
    display: flex;
    flex-direction: column;
    gap: 1.4vh;
    min-height: 0;
}

/* ------------------------------------------------------------------ kartu rute */
.rute {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Tiga lapis: tirai warna di atas gambar latar (kalau dipasang), lalu
       warna kaca sebagai dasar. Tanpa gambar, keduanya tembus pandang. */
    background-color: var(--kaca);
    background-image: linear-gradient(var(--rute-tirai), var(--rute-tirai)), var(--rute-gambar);
    background-size: auto, var(--rute-muat);
    background-position: center, var(--rute-posisi);
    background-repeat: no-repeat, no-repeat;
    border: 1px solid var(--garis);
    border-radius: var(--r-besar);
    box-shadow: var(--bayang);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.rute__kepala {
    padding: 1.5vh 1.4vw;
    text-align: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--teks) 16%, transparent), color-mix(in srgb, var(--teks) 4%, transparent));
    border-bottom: 1px solid var(--garis);
}

.rute__asal,
.rute__tujuan {
    font-size: calc(2.5vh * var(--skala) * var(--skala-rute));
    color: var(--teks-rute);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.15;
}

.rute__panah {
    display: block;
    margin: 0.35vh 0;
    font-size: calc(1.9vh * var(--skala) * var(--skala-rute));
    color: color-mix(in srgb, var(--aksen-layar) 45%, var(--teks));
}

.rute__isi {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0.8vh 1vw 1.2vh;
    gap: 0.5vh;
    min-height: 0;
}

/* ------------------------------------------------------------------ baris jam */
.baris {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.8vw;
    padding: 0.9vh 1vw;
    border-radius: var(--r-sedang);
    background: color-mix(in srgb, var(--teks) 5%, transparent);
    border: 1px solid transparent;
    transition: background 0.4s ease, border-color 0.4s ease;
}

.baris + .baris {
    margin-top: 0.15vh;
}

.baris__jam {
    font-size: calc(4.2vh * var(--skala) * var(--skala-jam));
    color: var(--teks-jam);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.baris__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Nama kapal rata kiri semua supaya awal namanya sejajar antar baris,
       diberi jarak sekitar dua huruf supaya tidak mepet ke jam. */
    align-items: flex-start;
    text-align: left;
    padding-left: calc(2.4vh * var(--skala) * var(--skala-kapal));
    gap: 0.2vh;
}

.baris__kapal {
    font-size: calc(2.2vh * var(--skala) * var(--skala-kapal));
    font-weight: 700;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--teks-kapal) 92%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.baris__catatan {
    font-size: calc(1.5vh * var(--skala) * var(--skala-kapal));
    color: var(--teks-samar);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keberangkatan yang sudah lewat TIDAK diredupkan: jam dan nama kapalnya
   sama tegas dengan yang belum berangkat, pembedanya cukup pil CLOSED. */

.baris--sorot {
    background: linear-gradient(120deg, color-mix(in srgb, var(--teks) 22%, transparent), color-mix(in srgb, var(--teks) 10%, transparent));
    border-color: color-mix(in srgb, var(--teks) 35%, transparent);
    box-shadow: 0 0 0 0.35vh color-mix(in srgb, var(--jingga) 18%, transparent);
}

.baris--sorot .baris__jam {
    color: var(--teks-jam);
    text-shadow: 0 0 2.4vh color-mix(in srgb, var(--jingga) 55%, transparent);
}

/* ------------------------------------------------------------------ pil status */
.pil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
    min-width: 13vh;
    padding: 0.85vh 1.5vh;
    border-radius: 99px;
    font-size: calc(2vh * var(--skala) * var(--skala-pil));
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--teks);
    white-space: nowrap;
    box-shadow: inset 0 0.15vh 0 rgba(255, 255, 255, 0.35), 0 0.5vh 1.4vh rgba(0, 0, 0, 0.28);
}

.pil--open {
    background: linear-gradient(180deg, var(--hijau), var(--hijau-tua));
}

.pil--boarding {
    background: linear-gradient(180deg, color-mix(in srgb, var(--jingga) 70%, #fff), var(--jingga-tua));
    animation: denyut 1.8s ease-in-out infinite;
}

.pil--closed {
    background: linear-gradient(180deg, color-mix(in srgb, var(--merah) 75%, #fff), var(--merah-tua));
}

.pil--delayed {
    background: linear-gradient(180deg, color-mix(in srgb, var(--kuning) 72%, #fff), color-mix(in srgb, var(--kuning) 78%, #000));
    color: color-mix(in srgb, var(--kuning) 22%, #000);
}

.pil--cancelled {
    background: linear-gradient(180deg, color-mix(in srgb, var(--teks) 28%, transparent), color-mix(in srgb, var(--teks) 12%, transparent));
    color: color-mix(in srgb, var(--merah) 25%, var(--teks));
    text-decoration: line-through;
}

@keyframes denyut {
    0%, 100% {
        box-shadow: inset 0 0.15vh 0 rgba(255, 255, 255, 0.35), 0 0 0 0 color-mix(in srgb, var(--jingga) 55%, transparent);
    }
    50% {
        box-shadow: inset 0 0.15vh 0 rgba(255, 255, 255, 0.35), 0 0 0 1.1vh color-mix(in srgb, var(--jingga) 0%, transparent);
    }
}

/* ------------------------------------------------------------------ panel kanan */
.panel {
    display: flex;
    flex-direction: column;
    width: min(var(--panel-lebar), 40vw);
    gap: 1.4vh;
    min-height: 0;
}

.kartu {
    background: var(--kaca);
    border: 1px solid var(--garis);
    border-radius: var(--r-besar);
    box-shadow: var(--bayang);
    backdrop-filter: blur(18px);
    padding: 1.6vh 1.4vw;
}

.panel .kartu {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Slideshow */
.slide {
    position: relative;
    padding: 0;
    background: color-mix(in srgb, var(--latar-layar) 60%, transparent);
}

.slide__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}

.slide__media.tampil {
    opacity: 1;
}

.slide__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.2vh 1.4vw;
    font-size: calc(1.8vh * var(--skala));
    font-weight: 600;
    background: linear-gradient(0deg, color-mix(in srgb, var(--latar-layar) 85%, transparent), transparent);
}

/* ------------------------------------------------------------------ teks berjalan */
.ticker {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    margin: 0 -2vw;
    background: linear-gradient(90deg, color-mix(in srgb, var(--teks) 16%, transparent), color-mix(in srgb, var(--teks) 6%, transparent));
    border-top: 1px solid var(--garis);
}

/* Jam sekarang: kotak tetap di ujung kiri, seperti pita berita. */
.ticker__jam {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 1.1vh 1.6vw;
    background: var(--latar-jam-kini);
    color: var(--teks-jam-kini);
    font-size: calc(2.4vh * var(--skala) * var(--skala-jam-kini));
    font-weight: 800;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sisa lebar pita: jendela tempat teks berjalan. */
.ticker__pita {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 1.1vh 0;
}

.ticker__isi {
    display: inline-block;
    white-space: nowrap;
    font-size: calc(2.4vh * var(--skala) * var(--skala-ticker));
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-left: 100%;
    animation: jalan 26s linear infinite;
}

@keyframes jalan {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* ------------------------------------------------------------------ keadaan kosong */
.kosong {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vh;
    height: 100%;
    color: var(--teks-samar);
    font-size: calc(2.2vh * var(--skala));
    font-weight: 500;
    text-align: center;
    padding: 3vh 2vw;
}

/* Layar sempit / portrait: kartu tayangan turun ke bawah papan jadwal. */
@media (max-aspect-ratio: 1/1) {
    .monitor {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }

    .panel {
        grid-area: 3 / 1;
        width: auto;
    }

    .ticker {
        grid-area: 4 / 1 / 5 / -1;
    }

    body.tanpa-tayangan .monitor {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Tinggal kartu tayangan: pertahankan bentuk potret, ditengahkan. */
    .panel .kartu {
        flex: 0 0 auto;
        width: auto;
        height: 34vh;
        aspect-ratio: 9 / 16;
        margin: 0 auto;
    }
}


/* Penanda saat data gagal disegarkan (isi lama tetap tampil). */
body.luring .kepala::after {
    content: "";
    width: 1.2vh;
    height: 1.2vh;
    border-radius: 50%;
    background: var(--jingga);
    box-shadow: 0 0 1.2vh var(--jingga);
    align-self: flex-start;
}

/* =========================================================================
   Layar sempit (ponsel): satuan vh diganti px, kolom rute ditumpuk,
   dan halaman boleh digulung - bukan lagi layar TV yang terkunci sepenuh layar.
   ========================================================================= */
@media (max-width: 700px) {
    :root {
        --r-besar: 16px;
        --r-sedang: 12px;
        --r-kecil: 9px;
        --bayang: 0 6px 18px color-mix(in srgb, var(--latar-layar) 60%, transparent);
    }

    html,
    body {
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .monitor {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100dvh;
        padding: 10px 12px 0;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        gap: 10px;
    }

    /* ---- kepala ---- */
    .kepala {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
    }

    .kepala__logo {
        height: 34px;
    }

    .kepala__teks {
        flex: 1 1 60%;
    }

    .kepala__judul {
        font-size: calc(18px * var(--skala) * var(--skala-kepala));
        letter-spacing: 0.06em;
    }

    .kepala__subjudul {
        margin-top: 2px;
        font-size: calc(12px * var(--skala) * var(--skala-kepala));
    }

    .kepala__tanggal {
        flex: 1 1 100%;
        text-align: left;
        padding-top: 8px;
        border-top: 1px solid var(--garis);
    }

    .kepala__hari {
        font-size: calc(14px * var(--skala) * var(--skala-kepala));
    }

    /* ---- papan jadwal: satu kolom ---- */
    .badan {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .kolom {
        display: contents;
    }

    .rute {
        flex: 0 0 auto;
    }

    .rute__kepala {
        padding: 10px 12px;
    }

    .rute__asal,
    .rute__tujuan {
        font-size: calc(14px * var(--skala) * var(--skala-rute));
        letter-spacing: 0.03em;
    }

    .rute__panah {
        margin: 2px 0;
        font-size: calc(11px * var(--skala) * var(--skala-rute));
    }

    .rute__isi {
        padding: 8px 8px 10px;
        gap: 6px;
    }

    .baris {
        gap: 10px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .baris + .baris {
        margin-top: 0;
    }

    .baris__jam {
        font-size: calc(24px * var(--skala) * var(--skala-jam));
    }

    .baris__info {
        align-items: flex-start;
        text-align: left;
        gap: 1px;
    }

    .baris__kapal {
        font-size: calc(13px * var(--skala) * var(--skala-kapal));
    }

    .baris__catatan {
        font-size: calc(11px * var(--skala) * var(--skala-kapal));
        white-space: normal;
    }

    .baris--sorot {
        box-shadow: 0 0 0 2px rgba(255, 159, 10, 0.22);
    }

    .baris--sorot .baris__jam {
        text-shadow: 0 0 14px rgba(255, 190, 90, 0.55);
    }

    .pil {
        min-width: 84px;
        gap: 4px;
        padding: 6px 10px;
        font-size: calc(11px * var(--skala) * var(--skala-pil));
        letter-spacing: 0.06em;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 9px rgba(0, 0, 0, 0.28);
    }

    @keyframes denyut {
        0%, 100% {
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 0 rgba(255, 159, 10, 0.55);
        }
        50% {
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 7px rgba(255, 159, 10, 0);
        }
    }

    /* ---- panel kanan pindah ke bawah, tetap satu kolom ---- */
    .panel {
        flex-direction: column;
        width: auto;
        gap: 10px;
    }

    .kartu {
        padding: 12px 14px;
    }

    /* Aturan potret (max-aspect-ratio) menyetel tinggi tetap - di sini ikut lebar layar. */
    .panel .kartu {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        margin: 0;
    }

    /* Kartu tayang tegak, lebarnya dibatasi supaya tidak melebihi layar. */
    .panel .slide {
        width: 100%;
        max-width: 62vh;
        aspect-ratio: 9 / 16;
        height: auto;
        margin: 0 auto;
    }

    .slide__caption {
        padding: 8px 12px;
        font-size: calc(12px * var(--skala));
    }

    /* ---- teks berjalan ---- */
    .ticker {
        margin: 0 -12px;
        margin-top: auto;
    }

    /* Kotak jam & pita ikut menutupi bilah aman di dagu layar sentuh. */
    .ticker__jam {
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        font-size: calc(14px * var(--skala) * var(--skala-jam-kini));
    }

    .ticker__pita {
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    }

    .ticker__isi {
        font-size: calc(14px * var(--skala) * var(--skala-ticker));
    }

    .kosong {
        gap: 6px;
        padding: 18px 12px;
        font-size: calc(13px * var(--skala));
    }

    body.luring .kepala::after {
        width: 8px;
        height: 8px;
        box-shadow: 0 0 8px var(--jingga);
    }
}