/* ==========================================================
   SIM-VIDEOTRON
   Modern Government Enterprise UI
   Diskominfo Provinsi Kalimantan Selatan
========================================================== */

:root {

    --primary: #0B5ED7;
    --secondary: #2196F3;
    --accent: #4FC3FF;

    --dark: #05224C; 
    --dark2: #0B3473;

    --white: #ffffff;
    --light: #F5FAFF;

    --success: #00C853;
    --warning: #FFC107;
    --danger: #F44336;

    --glass: rgba(255, 255, 255, .08);

    --glass2: rgba(255, 255, 255, .12);

    --border: rgba(255, 255, 255, .18);

    --shadow:
        0 20px 45px rgba(0, 0, 0, .18);

    --radius: 22px;

    --transition: .35s;

}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

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

    background:

        linear-gradient(180deg,
            #08387F 0%,
            #0C56B8 35%,
            #1692F2 100%);

    overflow-x: hidden;

    color: white;

    position: relative;

    min-height: 100vh;

}

a {

    text-decoration: none;

    color: inherit;

}

img {

    display: block;

    max-width: 100%;

}

button {

    font-family: inherit;

    cursor: pointer;

    border: none;

}

ul {

    list-style: none;

}

section {

    padding: 110px 8%;

    position: relative;

}

.background-glow {

    position: fixed;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .4;

    z-index: -4;

}

.glow1 {

    width: 450px;

    height: 450px;

    background: #2DB9FF;

    top: -120px;

    left: -100px;

}

.glow2 {

    width: 400px;

    height: 400px;

    background: #006EFF;

    bottom: -120px;

    right: -100px;

}

.navbar {

    position: fixed;

    top: 22px;

    left: 50%;

    transform: translateX(-50%);

    width: 92%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 35px;

    background: rgba(255, 255, 255, .08);

    -webkit-backdrop-filter: blur(25px);

    backdrop-filter: blur(25px);

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 22px;

    transition: .4s;

    z-index: 999;

}

.navbar.scrolled {

    top: 8px;

    background: rgba(74, 74, 74, 0.263);

    -webkit-backdrop-filter: blur(25px);

    backdrop-filter: blur(25px);

    border: 1px solid rgba(255, 255, 255, .12);

}

.logo {

    display: flex;

    align-items: center;

    gap: 15px;

}

.logo-img {

    width: 170px;

    object-fit: contain;

}

.logo h2 {

    font-family: Poppins;

    font-size: 22px;

}

.logo p {

    font-size: 13px;

    opacity: .75;

}

.navbar ul {

    display: flex;

    gap: 35px;

}

.navbar li {

    position: relative;

    font-weight: 500;

}

.navbar li::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: #61D5FF;

    transition: .35s;

}

.navbar li:hover::after {

    width: 100%;

}

.hero {

    min-height: 100vh;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;

    padding-top: 170px;

}

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 18px;

    border-radius: 40px;

    background: rgba(255, 255, 255, .12);

    margin-bottom: 28px;

    font-size: 14px;

    font-weight: 600;

}

.hero h1 {

    font-family: Poppins;

    font-size: 66px;

    line-height: 1.15;

    margin-bottom: 25px;

}

.hero h1 span {

    display: block;

    color: #84E8FF;

}

.hero p {

    font-size: 18px;

    line-height: 1.9;

    opacity: .9;

    max-width: 620px;

    margin-bottom: 40px;

}

.hero-button {

    display: flex;

    gap: 20px;

    margin-bottom: 35px;

}

.btn-primary {

    padding: 17px 34px;

    border-radius: 50px;

    background: linear-gradient(135deg,
            #66E0FF,
            #008DFF);

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 700;

    
    box-shadow:

        0 15px 35px rgba(0, 140, 255, .35);

    color: white;

    transition: .35s;

}

.btn-primary:hover {

    transform: translateY(-5px);

}

.btn-outline {

    padding: 17px 34px;

    border-radius: 50px;

    border: 2px solid rgba(255, 255, 255, .25);

    display: flex;

    align-items: center;

    gap: 10px;

    transition: .35s;

}

.btn-outline:hover {

    background: white;

    color: #0B4FAF;

}

.hero-feature {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

    max-width: 500px;

}

.hero-feature div {

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 500;

    opacity: .95;

}

.hero-feature i {

    color: #6AE8FF;

    font-size: 22px;

}

/* ===========================================
   DASHBOARD PREVIEW
=========================================== */

.hero-right {

    display: flex;

    justify-content: center;

    align-items: center;

}

.dashboard-window {

    width: 100%;

    max-width: 640px;

    background: rgba(255, 255, 255, .08);

    -webkit-backdrop-filter: blur(30px);

    backdrop-filter: blur(30px);

    border: 1px solid rgba(255, 255, 255, .15);

    border-radius: 26px;

    overflow: hidden;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .25);

    animation: floating 6s ease-in-out infinite;

}

.window-top {

    height: 60px;

    display: flex;

    align-items: center;

    padding: 0 20px;

    background: rgba(255, 255, 255, .08);

    border-bottom: 1px solid rgba(255, 255, 255, .08);

    gap: 10px;

}

.window-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

}

.red {

    background: #ff5f57;

}

.yellow {

    background: #febc2e;

}

.green {

    background: #28c840;

}

.window-top span {

    margin-left: 15px;

    font-size: 15px;

    font-weight: 600;

    opacity: .9;

}

.dashboard-content {

    display: grid;

    grid-template-columns: 170px 1fr;

    min-height: 520px;

}

.dashboard-sidebar {

    padding: 25px 18px;

    background: rgba(255, 255, 255, .05);

    border-right: 1px solid rgba(255, 255, 255, .08);

}

.menu {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 16px;

    border-radius: 14px;

    margin-bottom: 12px;

    cursor: pointer;

    transition: .35s;

    font-size: 15px;

}

.menu:hover {

    background: rgba(255, 255, 255, .10);

}

.menu.active {

    background: linear-gradient(135deg,
            #00BFFF,
            #006EFF);

}

.menu i {

    font-size: 20px;

}

.dashboard-main {

    padding: 25px;

    display: flex;

    flex-direction: column;

    gap: 22px;

}

.dashboard-cards {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

}

.dashboard-card {

    background: rgba(255, 255, 255, .08);

    padding: 22px;

    border-radius: 18px;

    transition: .35s;

    border: 1px solid rgba(255, 255, 255, .08);

}

.dashboard-card:hover {

    transform: translateY(-6px);

    background: rgba(255, 255, 255, .14);

}

.dashboard-card h2 {

    font-size: 34px;

    margin-bottom: 8px;

    font-family: Poppins;

}

.dashboard-card p {

    opacity: .75;

}

.chart-placeholder {

    height: 180px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 12px;

    padding: 20px;

    background: rgba(255, 255, 255, .07);

    border-radius: 18px;

}

.chart-line {

    width: 34px;

    height: 120px;

    border-radius: 15px 15px 6px 6px;

    background: linear-gradient(180deg,
            #74E5FF,
            #007BFF);

}

.chart-line.short {

    height: 70px;

}

.chart-line.medium {

    height: 100px;

}

.chart-line.tall {

    height: 145px;

}

.activity {

    background: rgba(255, 255, 255, .07);

    padding: 20px;

    border-radius: 18px;

}

.activity h4 {

    margin-bottom: 18px;

    font-size: 18px;

}

.activity-item {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    opacity: .92;

}

.activity-item i {

    color: #4CFFB2;

    font-size: 18px;

}

/* =======================================
            TRUST BAR
======================================= */

.trust-bar {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 22px;

    padding: 35px 8%;

}

.trust-item {

    background: rgba(255, 255, 255, .08);

    border-radius: 18px;

    padding: 22px;

    text-align: center;

    transition: .35s;

    border: 1px solid rgba(255, 255, 255, .10);

}

.trust-item:hover {

    transform: translateY(-8px);

    background: rgba(255, 255, 255, .15);

}

/* =======================================
             STATISTIC
======================================= */

.stats {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 28px;

}

.stat-card {

    padding: 38px;

    border-radius: 22px;

    background: rgba(255, 255, 255, .08);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    text-align: center;

    transition: .35s;

    border: 1px solid rgba(255, 255, 255, .12);

}

.stat-card:hover {

    transform: translateY(-8px);

}

.stat-card h1 {

    font-size: 52px;

    font-family: Poppins;

    margin-bottom: 12px;

    color: #84E8FF;

}

.stat-card p {

    opacity: .8;

    font-size: 16px;

}

/* =======================================
              ABOUT
======================================= */

.about {

    padding-top: 130px;

}

.section-title {

    max-width: 760px;

    margin: auto;

    text-align: center;

    margin-bottom: 70px;

}

.section-title span {

    display: inline-block;

    padding: 10px 20px;

    background: rgba(255, 255, 255, .10);

    border-radius: 40px;

    font-size: 14px;

    margin-bottom: 18px;

}

.section-title h2 {

    font-size: 46px;

    font-family: Poppins;

    margin-bottom: 20px;

}

.section-title p {

    line-height: 1.9;

    opacity: .85;

}

.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}

.dashboard-preview {

    position: relative;

    background: rgba(255, 255, 255, .08);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    border-radius: 26px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .15);

    box-shadow: 0 30px 70px rgba(0, 0, 0, .25);

    animation: floating 6s ease-in-out infinite;

}

.preview-header {

    height: 58px;

    display: flex;

    align-items: center;

    padding: 0 20px;

    background: rgba(255, 255, 255, .08);

    gap: 10px;

}

.browser-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

}

.red {

    background: #ff5f57;

}

.yellow {

    background: #febc2e;

}

.green {

    background: #28c840;

}

.preview-header span {

    margin-left: 12px;

    font-weight: 600;

}

.live-status {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    font-weight: 600;

    color: #70F4A4;

}

.pulse {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #34ff87;

    animation: pulse 1.5s infinite;

}

.preview-image {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(180deg, #0E3878, #102C61);
}

.preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Perhalus transisi opacity dan transform agar tidak patah-patah */
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    will-change: opacity, transform;
}

/* Efek zoom saat kursor diarahkan ke container */
.dashboard-preview:hover .preview-image img {
    transform: scale(1.03);
}

.floating-toast {

    position: absolute;

    top: 90px;

    right: 20px;

    padding: 12px 18px;

    background: white;

    color: #222;

    border-radius: 14px;

    font-size: 14px;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 10px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .2);

    animation: toastMove 4s infinite;

}

.floating-toast i {

    color: #16c15d;

}

.mini-chart {

    position: absolute;

    left: 20px;

    bottom: 25px;

    display: flex;

    align-items: flex-end;

    gap: 8px;

}

.mini-chart span {

    width: 12px;

    background: #65DFFF;

    border-radius: 20px;

    animation: chartMove 1.2s infinite alternate;

}

.mini-chart span:nth-child(1) {

    height: 20px;

}

.mini-chart span:nth-child(2) {

    height: 38px;

    animation-delay: .2s;

}

.mini-chart span:nth-child(3) {

    height: 60px;

    animation-delay: .4s;

}

.mini-chart span:nth-child(4) {

    height: 32px;

    animation-delay: .6s;

}

.mini-chart span:nth-child(5) {

    height: 50px;

    animation-delay: .8s;

}

@keyframes floating {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}

@keyframes pulse {

    0% {

        transform: scale(1);

        opacity: 1;

    }

    50% {

        transform: scale(1.5);

        opacity: .4;

    }

    100% {

        transform: scale(1);

        opacity: 1;

    }

}

@keyframes toastMove {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}

@keyframes chartMove {

    from {

        transform: scaleY(.6);

    }

    to {

        transform: scaleY(1.2);

    }

}

.about-content {

    display: flex;

    flex-direction: column;

    gap: 22px;

}

.about-box {

    display: flex;

    gap: 20px;

    padding: 22px;

    background: rgba(255, 255, 255, .08);

    border-radius: 18px;

    transition: .35s;

}

.about-box:hover {

    transform: translateX(10px);

    background: rgba(255, 255, 255, .14);

}

.about-box i {

    font-size: 42px;

    color: #71E7FF;

}

.about-box h3 {

    margin-bottom: 8px;

    font-size: 22px;

}

.about-box p {

    opacity: .82;

    line-height: 1.7;

}

/* =======================================
            ANIMATION
======================================= */

@keyframes floating {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-15px);

    }

}

/* ==========================================
        SCROLL ANIMATION
========================================== */

.hidden {

    opacity: 0;

    transform: translateY(80px);

    transition: 1s;

}

.show {

    opacity: 1;

    transform: translateY(0);

}

/* ==========================================
        TABLET
========================================== */

@media(max-width:1100px) {

    .hero {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .hero-right {

        margin-top: 70px;

    }

    .hero-feature {

        margin: auto;

    }

    .hero-button {

        justify-content: center;

    }

    .about-grid {

        grid-template-columns: 1fr;

    }

    .stats {

        grid-template-columns: repeat(2, 1fr);

    }

    .trust-bar {

        grid-template-columns: repeat(3, 1fr);

    }

}

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

@media(max-width:768px) {

    .navbar {

        padding: 15px 20px;

    }

    .navbar ul {

        display: none;

    }

    .hero {

        padding-top: 150px;

    }

    .hero h1 {

        font-size: 42px;

    }

    .hero p {

        font-size: 16px;

    }

    .hero-feature {

        grid-template-columns: 1fr;

    }

    .stats {

        grid-template-columns: 1fr;

    }

    .trust-bar {

        grid-template-columns: 1fr;

    }

    .dashboard-content {

        grid-template-columns: 1fr;

    }

    .dashboard-sidebar {

        display: none;

    }

    .dashboard-cards {

        grid-template-columns: 1fr;

    }

    .about-grid {

        grid-template-columns: 1fr;

    }

    .section-title h2 {

        font-size: 34px;

    }

    .about-box {

        flex-direction: column;

        text-align: center;

    }

}

@media(max-width:480px) {

    .hero h1 {

        font-size: 34px;

    }

    .btn-primary,
    .btn-outline {

        width: 100%;

        justify-content: center;

    }

    .hero-button {

        flex-direction: column;

    }

    .logo-img {

        width: 130px;

    }

}

.dashboard-card,
.about-box,
.stat-card,
.trust-item {

    cursor: pointer;

}

.dashboard-card:hover {

    box-shadow:
        0 20px 35px rgba(0, 0, 0, .2);

}

.about-box:hover {

    box-shadow:
        0 15px 30px rgba(0, 0, 0, .15);

}

.stat-card:hover {

    box-shadow:
        0 15px 30px rgba(0, 0, 0, .18);

}

/* ==========================================================
                    PARTNER
========================================================== */

.partner {

    padding-top: 70px;

}

.partner-grid {
    width: 100%;
    max-width: none;

    display: flex;
    flex-wrap: wrap;

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

    gap: 30px;

    margin: 55px auto 0;
    padding: 0 30px;

    box-sizing: border-box;
}

.partner-card {

    height: 280px;
    /* tinggi card tetap */

    width: 320px;

    padding: 20px;

    flex: 0 0 320px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: center;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 22px;

}

.partner-card:hover {

    transform: translateY(-8px);

    background: rgba(255, 255, 255, .15);

}

.partner-card img {

    width: auto;

    height: 200px;

    object-fit: contain;

    display: block;

    margin: auto;

    margin-bottom: 20px;

    transition: .35s;

}

.partner-card:hover img {

    transform: scale(1.08);

}

.partner-card h3 {

    font-size: 18px;

    font-weight: 600;

}

/* ==========================================================
                        WORKFLOW
========================================================== */

.workflow-grid {
    position: relative;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 22px;

    margin-top: 60px;
}


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

.workflow-card {

    position: relative;

    min-height: 245px;

    padding: 32px 24px 30px;

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

    text-align: center;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.045));

    border: 1px solid rgba(255, 255, 255, 0.22);

    border-radius: 24px;

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 35px rgba(0, 40, 130, 0.16);

    overflow: visible;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


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

.workflow-card::before {

    content: "";

    position: absolute;

    top: -1px;
    left: 18%;
    right: 18%;

    height: 2px;

    border-radius: 50%;

    background: linear-gradient(90deg,
            transparent,
            rgba(99, 224, 255, .9),
            transparent);

    opacity: .65;

}


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

.workflow-card:hover {

    transform: translateY(-10px);

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.19),
            rgba(255, 255, 255, 0.075));

    border-color:
        rgba(99, 224, 255, 0.55);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 18px 45px rgba(0, 45, 150, 0.28),
        0 0 30px rgba(65, 190, 255, 0.12);

}


/* ==========================================================
                    NUMBER
========================================================== */

.workflow-card .number {

    position: relative;

    width: 66px;
    height: 66px;

    margin: 0 auto 22px;

    display: flex;

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

    border-radius: 50%;

    font-size: 23px;

    font-weight: 800;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #72e5ff 0%,
            #1fa8ff 45%,
            #0064ff 100%);

    border: 1px solid rgba(255, 255, 255, .45);

    box-shadow:
        0 8px 22px rgba(0, 105, 255, .35),
        0 0 0 7px rgba(80, 190, 255, .07);

    z-index: 2;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.workflow-card:hover .number {

    transform: scale(1.08);

    box-shadow:
        0 10px 28px rgba(0, 105, 255, .45),
        0 0 0 9px rgba(80, 190, 255, .10),
        0 0 25px rgba(80, 210, 255, .22);

}


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

.workflow-card>i {

    display: block;

    margin-bottom: 10px;

    font-size: 19px;

    color: #9eeaff;

    text-shadow:
        0 0 12px rgba(99, 224, 255, .35);

    transition:
        transform .3s ease,
        color .3s ease;
}


.workflow-card:hover>i {

    transform: translateY(-2px) scale(1.08);

    color: #d7f8ff;

}


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

.workflow-card h3 {

    margin: 0 0 12px;

    color: #ffffff;

    font-size: 19px;

    font-weight: 750;

    line-height: 1.35;

    letter-spacing: -.2px;

    text-shadow:
        0 2px 10px rgba(0, 35, 100, .22);

}


/* ==========================================================
                    DESCRIPTION
========================================================== */

.workflow-card p {

    margin: 0;

    max-width: 270px;

    color: rgba(255, 255, 255, .82);

    font-size: 13px;

    line-height: 1.75;

}


/* ==========================================================
                CONNECTING LINE
========================================================== */

.workflow-card:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 63px;

    right: -23px;

    width: 24px;

    height: 2px;

    background:
        linear-gradient(90deg,
            rgba(99, 224, 255, .65),
            rgba(99, 224, 255, .15));

    box-shadow:
        0 0 8px rgba(99, 224, 255, .22);

    z-index: 3;
}


/* ==========================================================
                    ARROW
========================================================== */

.workflow-card:not(:last-child)::before {

    content: "›";

    position: absolute;

    top: 51px;

    right: -28px;

    width: 20px;
    height: 25px;

    display: flex;

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

    color: #9eeaff;

    font-size: 22px;

    font-weight: 300;

    z-index: 4;

    text-shadow:
        0 0 10px rgba(99, 224, 255, .45);

}


/* ==========================================================
                    RESPONSIVE
========================================================== */

@media (max-width: 1200px) {

    .workflow-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 20px;

    }


    .workflow-card:not(:last-child)::after,
    .workflow-card:not(:last-child)::before {

        display: none;

    }

}


@media (max-width: 800px) {

    .workflow-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;

        margin-top: 40px;

    }


    .workflow-card {

        min-height: 225px;

        padding: 28px 20px;

    }

}


@media (max-width: 520px) {

    .workflow-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }


    .workflow-card {

        padding: 28px 22px;

    }


    .workflow-card .number {

        width: 58px;
        height: 58px;

        font-size: 21px;

    }


    .workflow-card h3 {

        font-size: 18px;

    }


    .workflow-card p {

        max-width: 100%;

        font-size: 13px;

    }

}

/* ==========================================================
                    SERVICES
========================================================== */

.service-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    margin-top: 60px;

}

.service-card {

    padding: 40px;

    border-radius: 22px;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .12);

    transition: .35s;

}

.service-card:hover {

    transform: translateY(-10px);

    background: rgba(255, 255, 255, .16);

}

.service-card i {

    font-size: 55px;

    color: #6EE6FF;

    margin-bottom: 25px;

    display: block;

}

.service-card h3 {

    font-size: 24px;

    margin-bottom: 15px;

}

.service-card p {

    line-height: 1.8;

    opacity: .82;

}

/* ==========================================================
                    LOCATION
========================================================== */

.location-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 20px;

    margin-top: 55px;

}

.location-card {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 28px 35px;

    border-radius: 22px;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .12);

    transition: .35s;

}

.location-card:hover {

    transform: translateX(10px);

    background: rgba(255, 255, 255, .15);

}

.location-card h3 {

    margin-bottom: 8px;

}

.location-card p {

    opacity: .75;

}

.online,
.maintenance,
.offline {

    padding: 10px 20px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 700;

}

.online {

    background: #00C853;

}

.maintenance {

    background: #FFC107;

    color: #222;

}

.offline {

    background: #E53935;

}

/* =========================================================
   LANDING PAGE - JADWAL PENAYANGAN
========================================================= */

.schedule-table {
    width: 100%;
    margin-top: 52px;

    overflow: hidden;

    border-radius: 22px;

    background: rgba(255, 255, 255, .10);

    border: 1px solid rgba(255, 255, 255, .25);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    box-shadow:
        0 15px 40px rgba(0, 55, 120, .08);
}

.schedule-table .status.done {
    background: #00c853;
    border-color: #00c853;
    color: #fff;
}

.schedule-table .status.overdue {
    background: #ef5350;
    border-color: #ef5350;
    color: #fff;
}

.schedule-table .status.cancelled {
    background: #78909c;
    border-color: #78909c;
    color: #fff;
}


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

.schedule-header {
    display: grid;

    grid-template-columns:
        1fr 1.5fr 2fr 1.1fr;

    align-items: center;

    padding: 18px 20px;

    background: rgba(255, 255, 255, .13);

    border-bottom: 1px solid rgba(255, 255, 255, .18);

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   ROW
========================================================= */

.schedule-row {
    display: grid;

    grid-template-columns:
        1fr 1.5fr 2fr 1.1fr;

    align-items: center;

    min-height: 68px;

    padding: 16px 20px;

    border-top: 1px solid rgba(255, 255, 255, .10);

    color: #ffffff;

    transition: background .2s ease;
}


.schedule-row:hover {
    background: rgba(255, 255, 255, .07);
}


.schedule-row>span {
    min-width: 0;

    font-size: 13px;

    color: rgba(255, 255, 255, .95);
}


/* =========================================================
   STATUS
========================================================= */

.schedule-table .status {
    display: flex;

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

    width: 100%;

    min-height: 34px;

    padding: 7px 14px;

    box-sizing: border-box;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    text-align: center;

    white-space: nowrap;
}


/* =========================================================
   DIJADWALKAN
========================================================= */

.schedule-table .status.scheduled {
    background: #ffc107;

    border: 1px solid #ffc107;

    color: #222;
}


/* =========================================================
   SEDANG TAYANG
========================================================= */

.schedule-table .status.running {
    background: #2196f3;

    border: 1px solid #2196f3;

    color: #ffffff;
}


/* =========================================================
   SELESAI / STATUS LAIN
========================================================= */

.schedule-table .status.waiting {
    background: #00c853;

    border: 1px solid #00c853;

    color: #ffffff;
}


/* =========================================================
   TIDAK ADA JADWAL
========================================================= */

.schedule-row.schedule-empty {
    min-height: 68px;
}

.schedule-row.schedule-empty .status.waiting {
    background: #ffc107;

    border-color: #ffc107;

    color: #222;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .schedule-table {
        overflow-x: auto;
    }

    .schedule-header,
    .schedule-row {
        min-width: 720px;
    }

}


@media (max-width: 600px) {

    .schedule-table {
        margin-top: 35px;

        border-radius: 18px;
    }

}

/* ==========================================================
                ANNOUNCEMENT
========================================================== */

.announcement-grid {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: stretch;

    gap: 25px;

    margin-top: 60px;

}


/* ==========================================================
                ANNOUNCEMENT
========================================================== */

.announcement-grid {

    width: 100%;

    display: flex;
    flex-wrap: wrap;

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

    gap: 25px;

    margin-top: 60px;
}


.announcement-card {

    width: min(100%, 500px);

    padding: 35px;

    background: rgba(255, 255, 255, .08);

    border-radius: 24px;

    border: 1px solid rgba(255, 255, 255, .12);

    transition: .35s;

    flex: 0 1 500px;
}


.announcement-card:hover {

    transform: translateY(-8px);

}


.announcement-card span {

    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 16px;

    border-radius: 40px;

    background: #1E88E5;

    font-size: 13px;

}


.announcement-card h3 {

    margin-bottom: 15px;

    font-size: 23px;

}


.announcement-card p {

    line-height: 1.8;

    opacity: .82;

}

/* ==========================================================
                LIVE DASHBOARD
========================================================== */

.live-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

    margin-top: 60px;

}

.live-card {

    padding: 35px;

    text-align: center;

    border-radius: 24px;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .12);

    transition: .35s;

}

.live-card:hover {

    transform: translateY(-10px);

    background: rgba(255, 255, 255, .15);

}

.live-card h1 {

    font-size: 58px;

    font-family: Poppins;

    color: #72E8FF;

    margin-top: 15px;

}

/* ==========================================================
                    CTA
========================================================== */

.cta {

    text-align: center;

    padding: 120px 8%;

}

.cta h2 {

    font-size: 52px;

    font-family: Poppins;

    margin-bottom: 20px;

}

.cta p {

    max-width: 650px;

    margin: auto;

    margin-bottom: 35px;

    line-height: 1.9;

    opacity: .85;

}

/* ==========================================================
                    FOOTER
========================================================== */

footer {

    margin-top: 120px;

    padding: 70px 8% 30px;

    background: rgba(0, 0, 0, .18);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

}

.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;

    gap: 50px;

    margin-bottom: 40px;

}

.footer-grid h3 {

    font-size: 28px;

    margin-bottom: 18px;

}

.footer-grid h4 {

    margin-bottom: 20px;

}

.footer-grid a,
.footer-grid p {

    display: block;

    margin-bottom: 12px;

    opacity: .82;

    transition: .3s;

}

.footer-grid a:hover {

    color: #70E8FF;

    padding-left: 8px;

}

footer hr {

    margin: 35px 0;

    border: none;

    height: 1px;

    background: rgba(255, 255, 255, .12);

}

.copyright {

    text-align: center;

    opacity: .7;

}

.menu-title {

    display: block;

    margin: 18px 12px 10px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #7FCBFF;

    opacity: .8;

    text-transform: uppercase;

}