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

:root {

    /* =========================
       COLORS
    ========================= */

    --primary: #ee4d2d;
    --primary-light: #ff6b4a;
    --primary-dark: #d73211;

    --secondary: #ff9800;
    --secondary-light: #ffb74d;

    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;


    /* =========================
       BACKGROUND
    ========================= */

    --bg-body: #e9ecef;
    --bg-page: #f3f5f8;
    --bg-card: #ffffff;


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

    --warning-bg: #fff4cc;
    --warning-border: #ffe195;
    --warning-text: #bd5d00;


    /* =========================
       TEXT
    ========================= */

    --text-dark: #111827;
    --text-title: #333333;
    --text-light: #6b7280;
    --text-muted: #9ca3af;
    --text-white: #ffffff;


    /* =========================
       BORDER
    ========================= */

    --border: #ececec;


    /* =========================
       SHADOW
    ========================= */

    --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

    --shadow-lg:
        0 8px 24px rgba(0, 0, 0, 0.06);


    /* =========================
       RADIUS
    ========================= */

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-full: 999px;


    /* =========================
       SPACING
    ========================= */

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;


    /* =========================
       FONT
    ========================= */

    --font-xs: 11px;
    --font-sm: 12px;
    --font-md: 14px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 22px;


    /* =========================
       FONT WEIGHT
    ========================= */

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;


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

    --icon-sm: 18px;
    --icon-md: 24px;
    --icon-lg: 32px;


    /* =========================
       IMAGE
    ========================= */

    --img-xs: 15px;
    --img-sm: 30px;
    --img-md: 34px;
    --img-lg: 42px;
    --img-xl: 92px;


    /* =========================
       HEIGHT
    ========================= */

    --header-height: 60px;
    --bottom-nav-height: 68px;

    --carousel-height: 170px;
    --video-height: 120px;
    --menu-height: 110px;


    /* =========================
       LAYOUT
    ========================= */

    --container-width: 547px;

    --page-side-space: 0px;


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

    --card-padding: var(--space-lg);

    --card-radius:
        var(--radius-xl);


    /* =========================
       OTHER
    ========================= */

    --search-radius: 30px;

    --transition:
        0.2s ease;


    /* =========================
       GRADIENT
    ========================= */

    --gradient-primary:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    --gradient-warning:
        linear-gradient(
            135deg,
            var(--secondary-light),
            var(--secondary)
        );
}


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

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

    margin: 0;
    padding: 0;
}


html {
    width: 100%;
    min-width: 0;

    scroll-behavior: smooth;
}


body {
    width: 100%;
    min-width: 0;
    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    color: var(--text-dark);

    background:
        var(--bg-body);

    font-family:
        "Poppins",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


img {
    max-width: 100%;

    display: block;
}


button,
input,
select,
textarea {
    font: inherit;
}


a {
    color: inherit;
}


/* =========================================================
   MAIN PAGE CONTAINER
========================================================= */

.main-content {
    position: relative;

    width: calc(
        100% - (
            var(--page-side-space) * 2
        )
    );

    max-width:
        var(--container-width);

    min-height: 100vh;

    margin:
        0 auto;

    overflow-x: hidden;

    background:
        var(--bg-page);

    box-shadow:
        var(--shadow);
}


/* Halaman yang memiliki bottom navigation */

.has-bottom-nav .main-content {
    padding-bottom:
        calc(
            var(--bottom-nav-height)
            + 20px
        );
}


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

.header {
    width: 100%;

    min-height:
        var(--header-height);

    padding:
        12px
        15px;

    display: flex;
    align-items: center;

    color:
        var(--text-white);

    background:
        var(--primary);
}


/* =========================================================
   SEARCH
========================================================= */

.search-row {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 10px;
}


.search-box {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;

    padding:
        8px
        15px;

    overflow: hidden;

    background:
        var(--bg-card);

    border-radius:
        var(--search-radius);
}


.search-box > i {
    flex-shrink: 0;

    color:
        var(--text-muted);
}


.search-box input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    color:
        var(--text-dark);

    background:
        transparent;
}


.search-box input::placeholder {
    color:
        var(--text-muted);
}


.search-box input::-webkit-search-cancel-button {
    cursor: pointer;
}


.header-icon {
    flex-shrink: 0;

    color:
        var(--text-white);

    font-size:
        var(--icon-md);

    cursor: pointer;
}


/* =========================================================
   BOTTOM NAVIGATION
========================================================= */

.bottom-nav {
    position: fixed;

    left: 50%;
    bottom: 0;

    z-index: 1000;

    width: calc(
        100% - (
            var(--page-side-space) * 2
        )
    );

    max-width:
        var(--container-width);

    height:
        var(--bottom-nav-height);

    display: flex;
    align-items: center;
    justify-content: space-around;

    transform:
        translateX(-50%);

    background:
        var(--bg-card);

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

    box-shadow:
        0 -4px 18px
        rgba(0, 0, 0, 0.08);
}


.nav-item {
    flex: 1;

    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;

    color:
        var(--text-light);

    text-align: center;
    text-decoration: none;

    font-size:
        var(--font-sm);

    font-weight:
        var(--fw-medium);

    transition:
        color
        var(--transition);
}


.nav-item i {
    margin: 0;

    font-size:
        var(--icon-md);
}


.nav-item:hover,
.nav-item.active {
    color:
        var(--primary);
}


/* =========================================================
   LOADING SCREEN
========================================================= */

#loading-screen {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        var(--bg-card);
}


.spinner {
    width: 60px;
    height: 60px;

    border:
        6px solid
        #ffe1d8;

    border-top-color:
        var(--primary);

    border-radius:
        50%;

    animation:
        loading-spin
        0.7s linear
        infinite;
}


@keyframes loading-spin {

    to {
        transform:
            rotate(360deg);
    }
}


#loading-screen h5 {
    margin-top:
        var(--space-xl);

    color:
        var(--text-dark);

    font-size:
        var(--font-xl);

    font-weight:
        var(--fw-semibold);
}


/* =========================================================
   ALERT
========================================================= */

.login-alert {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom:
        var(--space-xl);

    padding:
        12px
        15px;

    border:
        1px solid
        transparent;

    border-radius:
        var(--radius-sm);

    font-size:
        var(--font-md);

    font-weight:
        var(--fw-medium);
}


/* ERROR */

.login-alert.error {
    color:
        #dc3545;

    background:
        #fff5f5;

    border-color:
        #f5c2c7;
}


.login-alert.error i {
    color:
        #dc3545;
}


/* SUCCESS */

.login-alert.success {
    color:
        #198754;

    background:
        #e8f8ee;

    border-color:
        #badbcc;
}


.login-alert.success i {
    color:
        #198754;
}


/* =========================================================
   MOBILE
   <= 575px
========================================================= */

@media (max-width: 575.98px) {

    :root {
        --container-width: 547px;

        --page-side-space: 0px;

        --carousel-height: 150px;

        --video-height: 105px;

        --menu-height: 100px;
    }


    .main-content {
        width: 100%;
        max-width: 547px;
    }


    .header {
        padding:
            10px
            12px;
    }


    .search-row {
        gap: 8px;
    }


    .search-box {
        padding:
            7px
            12px;
    }


    .header-icon {
        font-size:
            21px;
    }


    .bottom-nav {
        width: 100%;
        max-width: 547px;
    }


    .nav-item {
        font-size:
            11px;
    }


    .nav-item i {
        font-size:
            21px;
    }
}


/* =========================================================
   TABLET SMALL
   576px - 767px
========================================================= */

@media (
    min-width: 576px
) and (
    max-width: 767.98px
) {

    :root {
        --container-width: 720px;

        --page-side-space: 16px;

        --carousel-height: 200px;

        --video-height: 135px;

        --menu-height: 115px;
    }


    .main-content {
        border-radius:
            var(--radius-xl);
    }


    .header {
        padding:
            14px
            20px;
    }


    .search-row {
        gap: 12px;
    }


    .search-box {
        padding:
            10px
            16px;
    }


    .bottom-nav {
        border-radius:
            var(--radius-xl)
            var(--radius-xl)
            0
            0;
    }
}


/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (
    min-width: 768px
) and (
    max-width: 991.98px
) {

    :root {
        --container-width: 900px;

        --page-side-space: 20px;

        --carousel-height: 240px;

        --video-height: 160px;

        --menu-height: 120px;
    }


    .header {
        padding:
            14px
            22px;
    }


    .search-box {
        padding:
            10px
            18px;
    }


    .bottom-nav {
        border-radius:
            var(--radius-xl)
            var(--radius-xl)
            0
            0;
    }
}


/* =========================================================
   DESKTOP
   >= 992px
========================================================= */

@media (min-width: 992px) {

    :root {
        --container-width: 547px;

        --page-side-space: 24px;

        --carousel-height: 250px;

        --video-height: 165px;

        --menu-height: 120px;
    }


    .main-content {
        min-height: 100vh;
    }


    .header {
        padding:
            15px
            24px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    :root {
        --space-2xl: 16px;

        --font-sm: 11px;

        --carousel-height: 135px;

        --video-height: 95px;

        --menu-height: 92px;
    }


    .header {
        padding:
            9px
            10px;
    }


    .search-box {
        padding:
            6px
            10px;
    }


    .header-icon {
        font-size:
            20px;
    }
}