:root {
    --green-950:#063d2e;
    --green-900:#084b38;
    --green-800:#0a5942;
    --green-700:#0d6b4e;
    --green-600:#13815e;
    --green-100:#e4f4ed;
    --green-50:#f2f9f6;
    --gold:#d6a72e;
    --gold-soft:#fff6dc;
    --red:#c94949;
    --red-soft:#fff0f0;
    --ink:#17342c;
    --muted:#70827b;
    --border:#dfe9e4;
    --page:#f5f8f7;
    --white:#fff;
    --shadow:0 7px 25px rgba(12,74,55,.08);
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    background:var(--page);
    color:var(--ink);
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

button,
input {
    font:inherit;
}

.wrap {
    width:min(1180px,calc(100% - 40px));
    margin:auto;
}

.hero {
    position:relative;
    overflow:hidden;
    color:white;
    padding:48px 0 42px;
    background:
        radial-gradient(circle at 88% 20%,rgba(214,167,46,.20),transparent 24%),
        linear-gradient(120deg,#063d2e 0%,#0a5b43 55%,#0d6b4e 100%);
}

.hero::after {
    content:"";
    position:absolute;
    width:440px;
    height:440px;
    right:-150px;
    bottom:-260px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
}

.hero-pattern {
    position:absolute;
    width:330px;
    height:330px;
    right:4%;
    top:-80px;
    opacity:.07;
    transform:rotate(45deg);
    background:
        linear-gradient(45deg,transparent 45%,#fff 46%,#fff 54%,transparent 55%),
        linear-gradient(-45deg,transparent 45%,#fff 46%,#fff 54%,transparent 55%);
    background-size:56px 56px;
}

.hero-content {
    position:relative;
    z-index:2;
}

.topbar {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:30px;
}

.eyebrow {
    display:inline-block;
    margin-bottom:10px;
    color:#f1cf73;
    font-size:11px;
    letter-spacing:.17em;
    font-weight:800;
}

h1 {
    margin:0;
    font-size:clamp(30px,5vw,48px);
    line-height:1.05;
    letter-spacing:-.035em;
}

.subtitle {
    margin:12px 0 0;
    color:rgba(255,255,255,.78);
    font-size:16px;
}

.refresh-btn {
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.12);
    color:white;
    padding:11px 16px;
    border-radius:12px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    transition:.2s;
}

.refresh-btn:hover {
    background:rgba(255,255,255,.2);
}

.refresh-btn.loading .refresh-icon {
    animation:spin .8s linear infinite;
}

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

.summary {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,170px));
    gap:12px;
    margin-top:31px;
}

.summary-card {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:69px;
    padding:12px 15px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.11);
    backdrop-filter:blur(7px);
}

.summary-icon {
    width:38px;
    height:38px;
    border-radius:11px;
    display:grid;
    place-items:center;
    color:#0e664c;
    background:white;
    font-weight:900;
}

.summary-icon.ok {
    color:#12825e;
}

.summary-icon.warn {
    color:#c99313;
}

.summary-card strong {
    display:block;
    font-size:22px;
    line-height:1;
}

.summary-card span:not(.summary-icon) {
    display:block;
    margin-top:5px;
    font-size:11px;
    color:rgba(255,255,255,.7);
}

.search-box {
    margin-top:22px;
    max-width:570px;
    height:52px;
    display:flex;
    align-items:center;
    gap:10px;
    background:white;
    border-radius:14px;
    padding:0 16px;
    box-shadow:0 8px 22px rgba(0,0,0,.11);
    color:#71837c;
}

.search-box > span {
    font-size:25px;
    line-height:1;
    transform:rotate(-20deg);
}

.search-box input {
    width:100%;
    height:100%;
    border:0;
    outline:0;
    color:var(--ink);
    background:transparent;
}

.search-box input::placeholder {
    color:#8fa09a;
}

.main {
    padding-top:24px;
    padding-bottom:44px;
}

.notice {
    display:flex;
    align-items:center;
    gap:13px;
    border:1px solid #ebddb0;
    background:#fff9e9;
    padding:13px 16px;
    border-radius:13px;
    color:#685728;
}

.notice-icon {
    flex:0 0 auto;
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e0b94e;
    color:white;
    font-weight:800;
}

.notice strong {
    display:block;
    font-size:13px;
}

.notice span {
    display:block;
    margin-top:3px;
    font-size:12px;
    color:#897540;
}

.section-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin:31px 0 17px;
}

.section-label {
    color:var(--green-700);
    font-size:10px;
    letter-spacing:.14em;
    font-weight:900;
}

.section-head h2 {
    margin:3px 0 0;
    font-size:24px;
    letter-spacing:-.025em;
}

.last-check {
    font-size:11px;
    color:var(--muted);
}

.grid {
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:16px;
}

.school-card {
    grid-column:span 2;
}

/* 7 sekolah:
   baris pertama 4 kartu,
   baris kedua 3 kartu tepat di tengah */
.school-card:nth-child(5) {
    grid-column:2 / span 2;
}

.school-card {
    min-width:0;
    background:white;
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow);
    transition:transform .18s ease,box-shadow .18s ease;
}

.school-card:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 34px rgba(12,74,55,.11);
}

.card-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.school-logo {
    width:52px;
    height:52px;
    border-radius:16px;
    display:grid;
    place-items:center;
    color:white;
    background:
        linear-gradient(145deg,var(--green-700),var(--green-900));
    box-shadow:0 7px 18px rgba(13,107,78,.19);
}

.school-logo span {
    font-size:12px;
    letter-spacing:.04em;
    font-weight:900;
}

.status {
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:6px 9px;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.status i {
    width:7px;
    height:7px;
    border-radius:50%;
}

.status-checking {
    color:#75837d;
    background:#f0f3f2;
}

.status-checking i {
    background:#a9b3af;
}

.status-online {
    color:#08724e;
    background:#e4f6ee;
}

.status-online i {
    background:#16a16f;
    box-shadow:0 0 0 3px rgba(22,161,111,.12);
}

.status-slow {
    color:#936b08;
    background:#fff4d5;
}

.status-slow i {
    background:#d6a72e;
    box-shadow:0 0 0 3px rgba(214,167,46,.14);
}

.status-offline {
    color:#a83e3e;
    background:var(--red-soft);
}

.status-offline i {
    background:#d34d4d;
}

.card-body {
    min-height:94px;
    margin-top:17px;
}

.card-body h3 {
    margin:0;
    font-size:16px;
    line-height:1.25;
    letter-spacing:-.01em;
}

.card-body p {
    margin:7px 0 0;
    font-size:11px;
    line-height:1.5;
    color:var(--muted);
}

.server-info {
    min-height:44px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    border-top:1px solid #edf2ef;
    color:#7b8c85;
    font-size:10px;
}

.server-info > span {
    display:flex;
    align-items:center;
    gap:6px;
}

.server-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#acb7b3;
}

.response-time {
    color:#657871;
    font-size:10px;
}

.open-btn {
    height:40px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    text-decoration:none;
    background:var(--green-800);
    color:white;
    font-size:12px;
    font-weight:800;
    transition:.17s ease;
}

.open-btn:hover {
    background:var(--green-700);
}

.open-btn span {
    transition:transform .17s ease;
}

.open-btn:hover span {
    transform:translateX(3px);
}

.empty-state {
    display:none;
    padding:35px 15px;
    text-align:center;
    color:var(--muted);
}

footer {
    background:#eef4f1;
    border-top:1px solid #dce8e2;
}

.footer-inner {
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.footer-brand {
    display:flex;
    align-items:center;
    gap:11px;
}

.mini-logo {
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    background:var(--green-800);
    color:white;
    border-radius:11px;
    font-size:9px;
    font-weight:900;
}

.footer-brand strong {
    display:block;
    font-size:12px;
}

.footer-brand span {
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
}

.footer-tagline {
    color:#74867e;
    font-size:10px;
}

.footer-tagline i {
    margin:0 5px;
    color:var(--gold);
    font-style:normal;
}

@media (max-width:950px) {
    .grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .school-card,
    .school-card:nth-child(5) {
        grid-column:auto;
    }
}

@media (max-width:650px) {
    .wrap {
        width:min(100% - 24px,1180px);
    }

    .hero {
        padding:31px 0 29px;
    }

    .topbar {
        display:block;
    }

    h1 {
        font-size:31px;
    }

    .subtitle {
        font-size:13px;
    }

    .refresh-btn {
        margin-top:19px;
        width:100%;
        justify-content:center;
    }

    .summary {
        grid-template-columns:repeat(3,1fr);
    }

    .summary-card {
        padding:9px;
        display:block;
        text-align:center;
    }

    .summary-icon {
        width:30px;
        height:30px;
        margin:0 auto 7px;
    }

    .summary-card strong {
        font-size:18px;
    }

    .search-box {
        max-width:none;
    }

    .notice {
        align-items:flex-start;
    }

    .section-head {
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .grid {
        grid-template-columns:1fr;
    }

    .card-body {
        min-height:auto;
        margin-bottom:12px;
    }

    .footer-inner {
        padding:20px 0;
        flex-direction:column;
        align-items:flex-start;
    }
}

/* ===== MIHS RDM MOBILE COMPACT START ===== */

@media (max-width:650px) {

    body {
        background:#f5f8f7;
    }

    .wrap {
        width:calc(100% - 20px);
    }

    /* ----------------------------------
       HERO MOBILE
       ---------------------------------- */

    .hero {
        padding:20px 0 18px;
    }

    .hero-pattern {
        opacity:.035;
    }

    .topbar {
        display:grid;
        grid-template-columns:minmax(0,1fr) 40px;
        gap:10px;
        align-items:start;
    }

    .eyebrow {
        margin-bottom:5px;
        font-size:8px;
        letter-spacing:.14em;
    }

    h1 {
        font-size:24px;
        line-height:1.08;
        letter-spacing:-.025em;
    }

    .subtitle {
        margin-top:6px;
        font-size:11px;
    }

    /* Refresh menjadi tombol ikon kecil */
    .refresh-btn {
        width:40px;
        height:40px;
        min-width:40px;
        margin:0;
        padding:0;
        justify-content:center;
        border-radius:11px;
        font-size:0;
    }

    .refresh-btn .refresh-icon {
        font-size:20px;
    }

    /* ----------------------------------
       RINGKASAN MOBILE
       ---------------------------------- */

    .summary {
        grid-template-columns:repeat(3,1fr);
        gap:6px;
        margin-top:15px;
    }

    .summary-card {
        min-height:48px;
        padding:6px 4px;
        border-radius:10px;
        display:block;
        text-align:center;
    }

    .summary-icon {
        width:23px;
        height:23px;
        margin:0 auto 4px;
        border-radius:7px;
        font-size:10px;
    }

    .summary-card strong {
        font-size:15px;
    }

    .summary-card span:not(.summary-icon) {
        margin-top:2px;
        font-size:8px;
    }

    /* ----------------------------------
       SEARCH
       ---------------------------------- */

    .search-box {
        max-width:none;
        height:42px;
        margin-top:12px;
        padding:0 12px;
        border-radius:11px;
    }

    .search-box > span {
        font-size:20px;
    }

    .search-box input {
        font-size:12px;
    }

    /* ----------------------------------
       MAIN
       ---------------------------------- */

    .main {
        padding-top:12px;
        padding-bottom:25px;
    }

    .notice {
        padding:9px 10px;
        gap:8px;
        border-radius:10px;
        align-items:flex-start;
    }

    .notice-icon {
        width:23px;
        height:23px;
        font-size:10px;
    }

    .notice strong {
        font-size:10px;
    }

    .notice span {
        margin-top:2px;
        font-size:9px;
        line-height:1.35;
    }

    .section-head {
        margin:18px 0 10px;
        gap:4px;
    }

    .section-label {
        font-size:8px;
    }

    .section-head h2 {
        font-size:18px;
        margin-top:2px;
    }

    .last-check {
        font-size:9px;
    }

    /* ----------------------------------
       KARTU MENJADI LIST COMPACT
       ---------------------------------- */

    .grid {
        grid-template-columns:1fr;
        gap:9px;
    }

    .school-card,
    .school-card:nth-child(5) {
        grid-column:auto;

        display:grid;

        grid-template-columns:
            43px
            minmax(0,1fr)
            auto;

        grid-template-areas:
            "logo body status"
            "logo server server"
            "button button button";

        column-gap:10px;
        row-gap:7px;

        align-items:center;

        padding:11px 12px;

        border-radius:14px;
    }

    .school-card:hover {
        transform:none;
    }

    /* card-top dilepas agar logo dan status
       bisa masuk grid utama */
    .card-top {
        display:contents;
    }

    .school-logo {
        grid-area:logo;

        width:43px;
        height:43px;

        border-radius:12px;
    }

    .school-logo span {
        font-size:9px;
    }

    .status {
        grid-area:status;

        padding:4px 7px;
        gap:4px;

        font-size:8px;
    }

    .status i {
        width:6px;
        height:6px;
    }

    .card-body {
        grid-area:body;

        min-height:0;
        margin:0;
    }

    .card-body h3 {
        margin:0;
        font-size:13px;
        line-height:1.2;
    }

    .card-body p {
        margin:3px 0 0;
        font-size:9px;
        line-height:1.3;
    }

    .server-info {
        grid-area:server;

        min-height:20px;
        border-top:0;

        font-size:8px;
    }

    .server-info > span {
        gap:5px;
    }

    .server-dot {
        width:6px;
        height:6px;
    }

    .response-time {
        font-size:8px;
    }

    .open-btn {
        grid-area:button;

        height:33px;

        margin-top:1px;

        border-radius:9px;

        font-size:10px;
    }

    /* ----------------------------------
       FOOTER MOBILE
       ---------------------------------- */

    .footer-inner {
        min-height:auto;
        padding:16px 0;

        display:flex;
        flex-direction:row;
        align-items:center;
    }

    .mini-logo {
        width:32px;
        height:32px;
        border-radius:9px;
        font-size:7px;
    }

    .footer-brand strong {
        font-size:10px;
    }

    .footer-brand span {
        font-size:8px;
    }

    .footer-tagline {
        display:none;
    }
}

/* ===== MIHS RDM MOBILE COMPACT END ===== */

/* ===== RDM NGASEM — LOGO ASLI ===== */

.school-logo.has-image {
    background:#fff;
    border:1px solid #e0eae5;
    padding:4px;
    overflow:hidden;
    box-shadow:0 5px 16px rgba(12,74,55,.08);
}

.school-logo.has-image img {
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    border-radius:10px;
}

/* Logo di HP tetap compact */
@media (max-width:650px) {
    .school-logo.has-image {
        padding:3px;
    }

    .school-logo.has-image img {
        border-radius:8px;
    }
}


/* ===== RDM ADMIN + MAINTENANCE ===== */

.top-actions {
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-btn {
    min-height:42px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.12);
    color:white;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
}

.admin-btn:hover {
    background:rgba(255,255,255,.20);
}

.status-maintenance {
    color:#8b690c;
    background:#fff3ce;
}

.status-maintenance i {
    background:#d6a72e;
    box-shadow:0 0 0 3px rgba(214,167,46,.14);
}

@media (max-width:650px) {

    .top-actions {
        gap:5px;
    }

    .admin-btn {
        width:40px;
        height:40px;
        min-width:40px;
        padding:0;
        justify-content:center;
        border-radius:11px;
    }

    .admin-btn span {
        font-size:15px;
    }

    .admin-btn b {
        display:none;
    }
}

/* ============================================================
   RDM NGASEM — LOGO SAFE AREA
   Berlaku untuk semua logo madrasah
   ============================================================ */

.school-logo.has-image {
    box-sizing:border-box;

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

    background:#fff;

    /*
     * Ruang aman agar emblem/logo tidak menyentuh
     * atau terpotong oleh tepi kotak.
     */
    padding:6px;

    border:1px solid #dfe9e4;
    border-radius:16px;

    /*
     * Jangan memotong bentuk logo.
     */
    overflow:visible;
}

.school-logo.has-image img {
    display:block;

    width:100%;
    height:100%;

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

    /*
     * Logo selalu tampil utuh.
     * Tidak di-crop.
     */
    object-fit:contain;
    object-position:center;

    /*
     * Jangan membulatkan atau memotong logo asli.
     */
    border-radius:0;
    clip-path:none;

    background:transparent;
}

/* Tablet */
@media (max-width:950px) {
    .school-logo.has-image {
        padding:6px;
    }
}

/* HP compact */
@media (max-width:650px) {
    .school-logo.has-image {
        padding:5px;
        border-radius:12px;
    }

    .school-logo.has-image img {
        border-radius:0;
    }
}


/* ============================================================
   RDM NGASEM — FRESH OFFICIAL RDM PALETTE
   Diambil dari karakter warna logo Rapor Digital Madrasah
   ============================================================ */

:root {
    --rdm-green:#009447;
    --rdm-green-dark:#006b38;
    --rdm-green-deep:#00562f;
    --rdm-green-light:#eaf8f0;

    --rdm-red:#ed1c2e;
    --rdm-red-light:#fff0f2;

    --rdm-blue:#1745d1;
    --rdm-blue-light:#eef2ff;

    --rdm-yellow:#f3cf24;

    --rdm-white:#ffffff;
    --rdm-page:#f5faf7;
    --rdm-border:#dcece3;
    --rdm-text:#153a2b;
    --rdm-muted:#6e847a;
}


/* ------------------------------------------------------------
   PAGE
   ------------------------------------------------------------ */

body {
    background:
        linear-gradient(
            180deg,
            #f8fcfa 0%,
            #f4f9f6 100%
        );

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


/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.hero {
    position:relative;

    background:
        radial-gradient(
            circle at 86% 18%,
            rgba(255,255,255,.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 72% 90%,
            rgba(23,69,209,.10),
            transparent 25%
        ),
        linear-gradient(
            125deg,
            var(--rdm-green-deep) 0%,
            var(--rdm-green-dark) 38%,
            var(--rdm-green) 100%
        );
}

/*
 * Strip merah-biru-hijau khas logo RDM.
 */
.hero::before {
    content:"";
    position:absolute;
    left:0;
    top:0;

    width:100%;
    height:5px;

    background:
        linear-gradient(
            90deg,
            var(--rdm-red) 0 18%,
            var(--rdm-blue) 18% 36%,
            var(--rdm-green) 36% 100%
        );

    z-index:5;
}

.eyebrow {
    color:#fff3a8;
}

.subtitle {
    color:rgba(255,255,255,.86);
}


/* ------------------------------------------------------------
   SUMMARY
   ------------------------------------------------------------ */

.summary-card {
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.24);
}

.summary-card:nth-child(1) .summary-icon {
    background:var(--rdm-blue-light);
    color:var(--rdm-blue);
}

.summary-card:nth-child(2) .summary-icon {
    background:#e5faee;
    color:var(--rdm-green);
}

.summary-card:nth-child(3) .summary-icon {
    background:var(--rdm-red-light);
    color:var(--rdm-red);
}


/* ------------------------------------------------------------
   SEARCH
   ------------------------------------------------------------ */

.search-box {
    border:1px solid rgba(255,255,255,.48);

    box-shadow:
        0 8px 24px
        rgba(0,90,50,.18);
}


/* ------------------------------------------------------------
   BUTTON HEADER
   ------------------------------------------------------------ */

.refresh-btn,
.admin-btn {
    border-color:rgba(255,255,255,.35);
    background:rgba(255,255,255,.14);
}

.refresh-btn:hover,
.admin-btn:hover {
    background:rgba(255,255,255,.24);
}


/* ------------------------------------------------------------
   NOTICE
   ------------------------------------------------------------ */

.notice {
    background:#fffceb;
    border-color:#f0df80;
    color:#655820;
}

.notice-icon {
    background:var(--rdm-yellow);
    color:#554500;
}


/* ------------------------------------------------------------
   SECTION TITLE
   ------------------------------------------------------------ */

.section-label {
    color:var(--rdm-green);
}

.section-head h2 {
    color:var(--rdm-green-deep);
}


/* ------------------------------------------------------------
   SCHOOL CARDS
   ------------------------------------------------------------ */

.school-card {
    position:relative;
    overflow:hidden;

    border-color:var(--rdm-border);

    box-shadow:
        0 8px 24px
        rgba(0,105,55,.07);
}

/*
 * Aksen warna tipis di atas kartu.
 * Tidak terlalu ramai.
 */
.school-card::before {
    content:"";
    position:absolute;

    left:0;
    right:0;
    top:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--rdm-red) 0 18%,
            var(--rdm-blue) 18% 36%,
            var(--rdm-green) 36% 100%
        );

    opacity:.92;
}

.school-card:hover {
    border-color:#c8e4d4;

    box-shadow:
        0 13px 32px
        rgba(0,125,67,.12);
}


/* ------------------------------------------------------------
   DEFAULT SCHOOL LOGO
   ------------------------------------------------------------ */

.school-logo:not(.has-image) {
    background:
        linear-gradient(
            145deg,
            #00a653,
            #00743e
        );

    box-shadow:
        0 7px 18px
        rgba(0,148,71,.20);
}


/* Logo asli tetap putih dan aman */
.school-logo.has-image {
    background:#fff;
    border-color:#d8e9df;
}


/* ------------------------------------------------------------
   SCHOOL TEXT
   ------------------------------------------------------------ */

.card-body h3 {
    color:#173c2d;
}

.card-body p {
    color:var(--rdm-muted);
}


/* ------------------------------------------------------------
   BUTTON BUKA RDM
   ------------------------------------------------------------ */

.open-btn {
    position:relative;

    background:
        linear-gradient(
            110deg,
            var(--rdm-green-dark),
            var(--rdm-green)
        );

    box-shadow:
        0 5px 13px
        rgba(0,148,71,.14);
}

.open-btn:hover {
    background:
        linear-gradient(
            110deg,
            #005f33,
            #00a653
        );

    box-shadow:
        0 7px 17px
        rgba(0,148,71,.20);
}


/* ------------------------------------------------------------
   STATUS
   ------------------------------------------------------------ */

.status-online {
    background:#e7f9ef;
    color:#007b41;
}

.status-online i {
    background:var(--rdm-green);
}

.status-slow,
.status-maintenance {
    background:#fff8d6;
    color:#886e00;
}

.status-offline {
    background:#fff0f2;
    color:#bd2735;
}

.status-offline i {
    background:var(--rdm-red);
}


/* ------------------------------------------------------------
   SERVER INFO
   ------------------------------------------------------------ */

.server-dot {
    background:#9dafA6;
}

.response-time {
    color:#526f62;
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

footer {
    position:relative;

    background:
        linear-gradient(
            180deg,
            #eef8f3,
            #e8f4ee
        );

    border-top:1px solid #d3e8dc;
}

footer::before {
    content:"";
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--rdm-red) 0 18%,
            var(--rdm-blue) 18% 36%,
            var(--rdm-green) 36% 100%
        );
}

.mini-logo {
    background:
        linear-gradient(
            145deg,
            var(--rdm-green),
            var(--rdm-green-dark)
        );
}


/* ------------------------------------------------------------
   MOBILE — TETAP COMPACT
   ------------------------------------------------------------ */

@media (max-width:650px) {

    body {
        background:#f5faf7;
    }

    .hero {
        background:
            radial-gradient(
                circle at 95% 10%,
                rgba(23,69,209,.10),
                transparent 28%
            ),
            linear-gradient(
                130deg,
                #005b31,
                #009447
            );
    }

    .hero::before {
        height:4px;
    }

    .school-card::before {
        height:2px;
    }

    /*
     * Di HP aksen kartu dibuat lebih halus agar
     * tampilan compact tetap bersih.
     */
    .school-card {
        box-shadow:
            0 4px 15px
            rgba(0,105,55,.065);
    }

    .open-btn {
        background:
            linear-gradient(
                105deg,
                #00743e,
                #009447
            );
    }
}