/* =========================================================
   ROOT
========================================================= */

:root {
    --bg: #020706;
    --card: #031b12;
    --card2: #052319;
    --border: #064a38;

    --vale: #00aaa5;
    --vale-dark: #006d67;

    --yellow: #ffbd00;
    --white: #f5f5f5;
    --muted: #8ba69b;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


/* =========================================================
   HTML & BODY
========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background:
        radial-gradient(
            circle at top center,
            #06251a 0%,
            #020706 55%,
            #000 100%
        );

    color: var(--white) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    min-height: 100vh;

    overflow: hidden;
}


/* =========================================================
   MAIN DASHBOARD
========================================================= */

.dashboard {
    width: 100%;
    height: 100dvh;

    min-height: 100vh;

    padding:
        clamp(10px, 1.4vw, 30px)
        clamp(12px, 2vw, 40px);

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.header {
    flex: 0 0 auto;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    width: clamp(100px, 10vw, 180px);

    max-width: 100%;
    height: auto;
}


/* =========================================================
   TITLE
========================================================= */

.title {
    font-size:
        clamp(
            28px,
            3.8vw,
            65px
        );

    font-weight: 800;

    line-height: .95;

    letter-spacing: -2px;

    white-space: nowrap;
}


/* =========================================================
   SUBTITLE
========================================================= */

.subtitle {
    color: var(--vale);

    font-size:
        clamp(
            14px,
            1.4vw,
            24px
        );

    font-weight: 600;

    letter-spacing: 1px;

    white-space: nowrap;
}


/* =========================================================
   HEADER LINE
========================================================= */

.header-line {
    height: 2px;

    background: var(--vale);

    opacity: .5;

    min-width: 20px;
}


/* =========================================================
   SAFETY
========================================================= */

.safety {
    color: var(--vale);

    font-weight: bold;

    font-size:
        clamp(
            13px,
            1.2vw,
            20px
        );

    white-space: nowrap;
}

.safety i {
    font-size:
        clamp(
            25px,
            2.5vw,
            40px
        );
}


/* =========================================================
   BLAST DATE
========================================================= */

.blast-date {
    color: var(--vale);

    font-size:
        clamp(
            12px,
            1.1vw,
            18px
        );

    font-weight: bold;

    white-space: nowrap;
}


/* =========================================================
   BLAST TIME
========================================================= */

.blast-time {
    color: var(--yellow);

    font-size:
        clamp(
            24px,
            2.7vw,
            42px
        );

    font-weight: 800;

    white-space: nowrap;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.main-content {
    flex: 1 1 auto;

    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 2.2fr)
        minmax(280px, 1fr);

    gap:
        clamp(
            8px,
            1vw,
            18px
        );

    overflow: hidden;
}


/* =========================================================
   COLUMNS
========================================================= */

.left-column,
.right-column {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   BLAST CARD
========================================================= */

.blast-card {
    width: 100%;

    background:
        linear-gradient(
            135deg,
            rgba(3, 31, 22, .95),
            rgba(2, 19, 14, .95)
        );

    border:
        1px solid var(--border);

    border-radius:
        clamp(
            8px,
            1vw,
            16px
        );

    padding:
        clamp(
            12px,
            1.5vw,
            30px
        );

    box-shadow:
        inset 0 0 30px rgba(0, 180, 130, .03),
        0 10px 30px rgba(0, 0, 0, .3);

    min-width: 0;

    overflow: hidden;
}


/* =========================================================
   LABEL
========================================================= */

.label {
    color: var(--vale);

    font-size:
        clamp(
            12px,
            1.1vw,
            18px
        );

    font-weight: 700;

    margin-bottom: 5px;

    line-height: 1.2;
}


/* =========================================================
   VALUE
========================================================= */

.value {
    font-size:
        clamp(
            22px,
            3vw,
            55px
        );

    font-weight: 800;

    line-height: 1.05;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   ICON CIRCLE
========================================================= */

.icon-circle {
    width:
        clamp(
            55px,
            6vw,
            95px
        );

    height:
        clamp(
            55px,
            6vw,
            95px
        );

    border:
        2px solid var(--vale);

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--vale);

    font-size:
        clamp(
            25px,
            3vw,
            45px
        );

    flex-shrink: 0;
}


/* =========================================================
   COUNTDOWN
========================================================= */

.countdown {
    background:
        /*linear-gradient(
            90deg,
            #ffb900,
            #ffad00
        );*/

    color: #050505;

    border-radius:
        clamp(
            8px,
            1vw,
            16px
        );

    padding:
        clamp(
            12px,
            1.3vw,
            25px
        );

    box-shadow:
        0 0 25px rgba(255, 190, 0, .15);

    min-width: 0;
}


.countdown .label {
    color: #111;

    font-size:
        clamp(
            12px,
            1.1vw,
            18px
        );
}


.countdown-value {
    font-size:
        clamp(
            28px,
            4vw,
            65px
        );

    font-weight: 900;
    line-height: 0.8;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* =========================================================
   PIC
========================================================= */

.pic-photo {
    width:
        clamp(
            100px,
            13vw,
            230px
        );

    height: auto;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    border-radius: 12px;

    border: 2px solid #777;

    background: #ddd;
}


.pic-name {
    font-size:
        clamp(
            18px,
            1.8vw,
            28px
        );

    font-weight: 800;

    line-height: 1.1;
}


.pic-position {
    color: var(--vale);

    font-size:
        clamp(
            13px,
            1.2vw,
            18px
        );

    font-weight: 600;
}


/* =========================================================
   RADIO
========================================================= */

.radio {
    border-top:
        1px solid #174a3d;

    margin-top:
        clamp(
            10px,
            1vw,
            20px
        );

    padding-top:
        clamp(
            10px,
            1vw,
            20px
        );
}


.radio-channel {
    color: white;

    font-size:
        clamp(
            20px,
            2vw,
            30px
        );

    font-weight: 800;
}


/* =========================================================
   WARNING
========================================================= */

.warning {
    background:
        rgba(
            4,
            25,
            18,
            .95
        );

    border:
        1px solid var(--border);

    border-radius:
        clamp(
            8px,
            1vw,
            16px
        );

    padding:
        clamp(
            12px,
            1.3vw,
            25px
        );

    font-size:
        clamp(
            14px,
            1.4vw,
            22px
        );

    font-weight: 700;

    line-height: 1.2;
}


.warning i {
    color: var(--yellow);

    font-size:
        clamp(
            30px,
            3vw,
            50px
        );

    flex-shrink: 0;
}


.warning-en {
    color: var(--vale);

    font-size:
        clamp(
            11px,
            1vw,
            16px
        );

    margin-top: 5px;
}


/* =========================================================
   QR CARD
========================================================= */

.qr-card {
    background:
        rgba(
            3,
            27,
            19,
            .95
        );

    border:
        1px solid var(--border);

    border-radius:
        clamp(
            8px,
            1vw,
            16px
        );

    padding:
        clamp(
            12px,
            1.3vw,
            20px
        );

    min-width: 0;
}


.qr-title {
    color: var(--vale);

    font-weight: bold;

    font-size:
        clamp(
            12px,
            1.1vw,
            17px
        );
}


.qr-image {
    width:
        clamp(
            90px,
            10vw,
            160px
        );

    height: auto;

    aspect-ratio: 1 / 1;

    background: white;

    padding: 8px;

    border-radius: 8px;

    flex-shrink: 0;
}


.url {
    color: var(--yellow);

    font-size:
        clamp(
            11px,
            1vw,
            17px
        );

    word-break: break-all;
}

.WAITING{
    border: 1px solid;
    padding: 5px;
    border-radius: 11px;
    background: linear-gradient(90deg, #ffb900, #ffad00);
    border-color: linear-gradient(90deg, #ffb900, #ffad00);
    color: black;
}


.DONE{
    border: 1px solid;
    padding: 5px;
    border-radius: 11px;
    background: #4caf50;
    border-color: #4caf50;
    color: white;

}
/* =========================================================
   DESKTOP / TV
========================================================= */

@media (min-width: 992px) {

    .dashboard {
        width: 100%;
        height: 100dvh;

        overflow: hidden;
    }

}


/* =========================================================
   TV / MONITOR DENGAN TINGGI PENDEK
   Contoh:
   1366 × 768
   1600 × 900
========================================================= */

@media
(min-width: 992px)
and (max-height: 800px) {

    .dashboard {
        padding:
            8px 15px;
    }

    .blast-card {
        padding:
            10px 18px;
    }

    .countdown {
        padding:
            10px 18px;
    }

    .warning {
        padding:
            10px 18px;
    }

    .icon-circle {
        width: 55px;
        height: 55px;

        font-size: 25px;
    }

    .pic-photo {
        width: 150px;
    }

}


/* =========================================================
   TV 4K / LARGE DISPLAY
========================================================= */

@media (min-width: 2500px) {

    .dashboard {
        padding:
            clamp(
                25px,
                2vw,
                50px
            );
    }

    .blast-card {
        border-radius: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    html,
    body {
        height: auto;

        overflow-x: hidden;
        overflow-y: auto;
    }


    .dashboard {
        width: 100%;
        height: auto;

        min-height: 100vh;

        padding: 15px;

        overflow: visible;
    }


    .title {
        font-size: 30px;

        white-space: normal;
    }


    .subtitle {
        font-size: 14px;
    }


    .main-content {
        display: block;

        overflow: visible;
    }


    .left-column,
    .right-column {
        width: 100%;
    }


    .blast-card {
        padding: 15px;
    }


    .icon-circle {
        width: 60px;
        height: 60px;

        font-size: 28px;
    }


    .pic-photo {
        width: 150px;
    }


    .warning {
        font-size: 16px;
    }

}