*{box-sizing:border-box}
:root{--green:#176b45;--dark:#104b33;--pale:#edf6ef;--ink:#20372c;--muted:#77857c;--line:#e5ece6;--white:#fff}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:#f5f8f5;color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
.topbar{height:78px;background:white;display:flex;align-items:center;justify-content:space-between;padding:0 max(5%,calc((100% - 1320px)/2));border-bottom:1px solid #edf0ed}
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{width:46px;height:46px;border-radius:14px;background:var(--green);color:white;display:grid;place-items:center;font-size:25px;font-weight:800}
.brand strong,.brand small{display:block}
.brand strong{font-size:17px;letter-spacing:.3px}
.brand small{font-size:10px;letter-spacing:2.2px;color:var(--muted)}
.login-btn{border:1px solid #d9e8dc;border-radius:11px;padding:10px 17px;color:var(--green);font-size:14px;font-weight:650}
.navigation{display:flex;gap:30px;align-items:center;overflow-x:auto;white-space:nowrap;background:white;padding:15px max(5%,calc((100% - 1320px)/2));border-bottom:1px solid var(--line)}
.navigation a{font-size:13px;color:#47584d}
.navigation a:hover{color:var(--green)}
main{max-width:1320px;width:90%;margin:28px auto 55px}
.hero{position:relative;overflow:hidden;min-height:350px;border-radius:24px;padding:48px 5%;display:flex;align-items:center;color:white;background:linear-gradient(115deg,#104c33,#176b45 60%,#36845a)}
.hero-content{position:relative;z-index:2;max-width:680px}
.eyebrow{display:inline-block;background:#ffffff20;border:1px solid #ffffff18;border-radius:30px;padding:7px 13px;font-size:10px;letter-spacing:1.5px;font-weight:750}
.hero h1{font-size:clamp(35px,4.4vw,59px);line-height:1.1;letter-spacing:-1.7px;margin:22px 0 16px}
.hero h1 span{color:#c4efcf}
.hero p{max-width:600px;color:#e1efe5;font-size:16px;line-height:1.8}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:11px;padding:12px 17px;font-size:13px;font-weight:750}
.btn-light{background:white;color:var(--dark)}
.btn-outline{border:1px solid #ffffff65;color:white}
.hero-decoration{position:absolute;right:5%;top:0;width:34%;height:100%;pointer-events:none}
.circle{position:absolute;border:1px solid #ffffff18;border-radius:50%;aspect-ratio:1}
.circle-one{width:340px;right:0;top:8px;background:#ffffff06}
.circle-two{width:230px;right:55px;top:63px;background:#ffffff08}
.hero-note{position:absolute;right:0;bottom:42px;background:#ffffff17;border:1px solid #ffffff24;border-radius:15px;padding:18px 21px;font-size:13px;backdrop-filter:blur(8px)}
.hero-note span{margin-right:8px}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:22px 0 30px}
.stat-card{display:flex;align-items:center;gap:14px;background:white;border:1px solid var(--line);border-radius:16px;padding:19px 16px;min-width:0;box-shadow:0 5px 20px #173d1a05;transition:transform .2s,box-shadow .2s}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #173d1a0b}
.stat-icon,.mini-icon{display:grid;place-items:center;flex-shrink:0;border-radius:12px;font-weight:800}
.stat-icon{width:48px;height:48px;font-size:19px}
.green{background:#e6f5e9;color:#19804c}.blue{background:#e8f1ff;color:#2774dc}.purple{background:#f0e8ff;color:#8653d7}.orange{background:#fff0df;color:#d77a20}
.stat-text{display:flex;flex-direction:column;min-width:0}
.stat-text small{font-size:11px;color:var(--muted)}
.stat-text strong{font-size:14px;line-height:1.4;margin:3px 0}
.stat-text em{font-size:11px;color:var(--green);font-style:normal}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.panel{background:white;border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:21px}
.section-title>div{display:flex;align-items:center;gap:12px}
.mini-icon{width:39px;height:39px;font-size:15px}
.section-title h2{margin:0;font-size:18px;letter-spacing:-.4px}
.section-title p{margin:3px 0 0;color:var(--muted);font-size:12px}
.public-tag,.gallery-label{font-size:10px;color:var(--green);background:var(--pale);border-radius:20px;padding:6px 9px;white-space:nowrap}
.balance-box{display:flex;flex-direction:column;background:linear-gradient(120deg,#edf7ef,#f7fbf7);border:1px solid #e2efe4;padding:20px;border-radius:14px}
.balance-box span,.balance-box small{color:var(--muted);font-size:12px}
.balance-box strong{font-size:25px;margin:6px 0}
.money-row{display:flex;justify-content:space-between;gap:10px;padding:15px 0;border-bottom:1px solid #edf1ed;font-size:12px}
.money-row span{color:#617167}.money-row strong{font-size:12px}
.notice{font-size:11px;line-height:1.6;color:#748177;margin:14px 0 0}
.empty-state{min-height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:22px;background:#fafcfa;border:1px dashed #dce7de;border-radius:14px}
.empty-state.compact{min-height:185px}
.empty-symbol{font-size:27px;margin-bottom:8px}
.empty-state strong{font-size:13px}
.empty-state p{font-size:12px;color:var(--muted);max-width:320px;margin:6px 0 0}
.gallery-panel{margin-top:20px}
.gallery-empty{min-height:175px}
.community-banner{display:flex;align-items:center;gap:20px;margin-top:24px;padding:25px 30px;border-radius:18px;background:#eaf4ec}
.community-leaf{font-size:34px}
.community-banner h2{font-size:19px;margin:0 0 4px}
.community-banner p{margin:0;color:#68796e;font-size:13px}
footer{background:#102f25;color:white;text-align:center;padding:34px 20px}
.footer-brand strong,.footer-brand span{display:block}
.footer-brand strong{letter-spacing:1px;font-size:15px}
.footer-brand span{font-size:9px;letter-spacing:2px;color:#c3d7ca}
footer p{font-size:12px;color:#d0dfd4;margin:13px 0}
footer small{font-size:10px;color:#a9c2b1}
@media(max-width:1000px){main{width:92%}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-decoration{right:3%;opacity:.65}.hero-note{right:-10px}}
@media(max-width:650px){.topbar{height:70px;padding:0 4%}.brand-icon{width:40px;height:40px}.brand strong{font-size:14px}.brand small{font-size:9px}.login-btn{font-size:11px;padding:8px 10px}.navigation{gap:22px;padding:13px 4%}.navigation a{font-size:12px}main{width:92%;margin-top:17px}.hero{min-height:340px;padding:30px 23px;border-radius:19px}.hero h1{font-size:38px;letter-spacing:-1px}.hero p{font-size:14px}.hero-decoration{width:40%;opacity:.35}.hero-note{display:none}.circle-one{width:230px;right:-95px;top:70px}.circle-two{width:165px;right:-65px;top:105px}.stats-grid{gap:10px;margin:14px 0 20px}.stat-card{padding:13px 10px;gap:9px;border-radius:13px}.stat-icon{width:37px;height:37px;font-size:15px;border-radius:10px}.stat-text strong{font-size:12px}.stat-text small,.stat-text em{font-size:10px}.content-grid{grid-template-columns:1fr;gap:14px}.panel{padding:17px;border-radius:15px}.section-title h2{font-size:16px}.section-title p{font-size:11px}.public-tag{display:none}.balance-box strong{font-size:22px}.community-banner{padding:20px;gap:13px}.community-banner h2{font-size:16px}.community-banner p{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* Galeri foto dan halaman upload */
.photo-grid, .upload-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.photo-card, .upload-preview-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e3ece6;
}
.photo-card img, .upload-preview-grid img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.photo-card figcaption, .upload-preview-grid figcaption {
  padding: 12px;
  color: #254b38;
  overflow-wrap: anywhere;
}
.gallery-admin-link { margin-top: 20px; }
.gallery-admin-link a { color: #176b45; font-weight: 600; }
.upload-page {
  max-width: 850px;
  margin: 32px auto;
  padding: 16px;
}
.upload-card {
  background: #fff;
  border: 1px solid #e3ece6;
  border-radius: 18px;
  padding: clamp(20px, 5vw, 36px);
  box-shadow: 0 12px 36px rgba(20, 70, 43, .08);
}
.upload-card h1 { color: #176b45; }
.upload-card label {
  display: block;
  font-weight: 600;
  margin: 18px 0 8px;
}
.upload-card input[type="text"],
.upload-card input[type="password"],
.upload-card input[type="file"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #cad9ce;
  border-radius: 9px;
  background: #fff;
}
.upload-submit, .upload-secondary {
  margin-top: 20px;
  padding: 12px 18px;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 700;
}
.upload-submit { color: #fff; background: #176b45; }
.upload-secondary { color: #176b45; background: #eaf4ed; }
.upload-message { padding: 12px; border-radius: 8px; }
.upload-message.error { background: #fff0f0; color: #9d2424; }
.upload-message.success { background: #eaf7ee; color: #176b45; }

/* Tombol upload foto di header galeri */
.gallery-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #16834a;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(22, 131, 74, 0.15);
  transition: background 0.2s ease, transform 0.2s ease;
}

.gallery-upload-button:hover {
  background: #116b3c;
  color: #ffffff;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .gallery-panel .section-title {
    flex-wrap: wrap;
    gap: 12px;
  }

  .gallery-upload-button {
    width: 100%;
  }
}

/* Galeri foto: thumbnail kecil dan rapi */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.photo-card {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e2e8e5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 50, 35, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.photo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 18px rgba(20, 50, 35, .12);
}

.photo-card a {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #f0f4f1;
}

.photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-card figcaption {
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #34483d;
  overflow-wrap: anywhere;
}

@media (min-width: 1000px) {
  .photo-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

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

/* Thumbnail kecil pada halaman upload */
.upload-page .photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.upload-page .photo-card {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
}

.upload-page .photo-card a {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.upload-page .photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-page .photo-card figcaption {
  padding: 7px 8px;
  font-size: 11px;
  overflow-wrap: anywhere;
}

@media (min-width: 1000px) {
  .upload-page .photo-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .upload-page .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}

/* Preview foto yang baru dipilih sebelum upload */
.upload-preview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 20px;
}

.upload-preview-grid .photo-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  background: white;
}

.upload-preview-grid figcaption {
  padding: 7px;
  font-size: 11px;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .upload-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Kartu menu utama: lebih kotak dan ringkas */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.stats-grid .stat-card {
    min-height: 125px;
    padding: 22px 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    box-sizing: border-box;
}

.stats-grid .stat-icon {
    flex-shrink: 0;
}

.stats-grid .stat-text {
    min-width: 0;
}

.stats-grid .stat-text strong {
    display: block;
    line-height: 1.4;
    font-size: 16px;
}

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

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

    .stats-grid .stat-card {
        min-height: 110px;
        padding: 14px 10px;
        gap: 9px;
    }

    .stats-grid .stat-text strong {
        font-size: 13px;
    }

    .stats-grid .stat-icon {
        width: 42px;
        height: 42px;
    }
}

/* Kartu menu lebih mendekati persegi */
.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.stats-grid .stat-card {
    min-height: 180px;
    padding: 24px 18px;
    border-radius: 10px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}

.stats-grid .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-grid .stat-text strong {
    font-size: 16px;
    line-height: 1.4;
}

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

    .stats-grid .stat-card {
        min-height: 160px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        gap: 10px;
    }

    .stats-grid .stat-card {
        min-height: 145px;
        padding: 16px 12px;
        gap: 12px;
    }

    .stats-grid .stat-icon {
        width: 44px;
        height: 44px;
    }

    .stats-grid .stat-text strong {
        font-size: 14px;
    }
}

/* =========================================
   RANDUBELANG — MACOS TAHOE LIQUID GLASS
   ========================================= */

:root {
    --glass-border: rgba(255, 255, 255, 0.72);
    --glass-shadow: 0 12px 35px rgba(26, 69, 91, 0.10);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.stats-grid .stat-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 250px;
    padding: 26px 20px;
    box-sizing: border-box;

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

    border: 1px solid var(--glass-border);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.76),
            rgba(255,255,255,0.30)
        );

    -webkit-backdrop-filter: blur(24px) saturate(165%);
    backdrop-filter: blur(24px) saturate(165%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.90),
        inset 0 -1px 0 rgba(255,255,255,0.30),
        var(--glass-shadow);

    text-decoration: none;
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

/* Pantulan cahaya pada permukaan kartu */
.stats-grid .stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;

    background:
        radial-gradient(
            ellipse at 18% 0%,
            rgba(255,255,255,0.90),
            transparent 55%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,0.22),
            transparent 58%
        );
}

/* Warna kaca setiap kartu */
.stats-grid .stat-card:nth-child(1) {
    background-color: rgba(107, 220, 151, 0.16);
}

.stats-grid .stat-card:nth-child(2) {
    background-color: rgba(100, 166, 255, 0.16);
}

.stats-grid .stat-card:nth-child(3) {
    background-color: rgba(171, 125, 255, 0.16);
}

.stats-grid .stat-card:nth-child(4) {
    background-color: rgba(255, 179, 100, 0.18);
}

.stats-grid .stat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,0.98);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.98),
        0 20px 42px rgba(26,69,91,0.16);
}

.stats-grid .stat-icon {
    width: 104px;
    height: 104px;
    min-width: 104px;
    box-sizing: border-box;

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

    border-radius: 30px;
    font-size: 36px;
    font-weight: 800;

    border: 1px solid rgba(255,255,255,0.88);
    box-shadow:
        inset 0 2px 2px rgba(255,255,255,0.90),
        inset 0 -5px 12px rgba(255,255,255,0.16),
        0 10px 24px rgba(37,70,100,0.12);

    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);

    transition: transform .28s ease;
}

.stats-grid .stat-card:hover .stat-icon {
    transform: scale(1.06);
}

.stats-grid .stat-icon.green {
    background: linear-gradient(
        145deg,
        rgba(219,255,230,0.95),
        rgba(80,205,133,0.76)
    );
    color: #087344;
}

.stats-grid .stat-icon.blue {
    background: linear-gradient(
        145deg,
        rgba(223,239,255,0.96),
        rgba(75,143,255,0.76)
    );
    color: #1459bf;
}

.stats-grid .stat-icon.purple {
    background: linear-gradient(
        145deg,
        rgba(245,232,255,0.96),
        rgba(156,112,255,0.76)
    );
    color: #6336ad;
}

.stats-grid .stat-icon.orange {
    background: linear-gradient(
        145deg,
        rgba(255,241,216,0.96),
        rgba(255,166,73,0.78)
    );
    color: #a9510b;
}

.stats-grid .stat-text {
    min-width: 0;
    text-align: center;
}

.stats-grid .stat-text strong {
    display: block;
    color: #18372b;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: -0.35px;
}

/* Tablet */
@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .stats-grid .stat-card {
        min-height: 210px;
    }
}

/* HP Android */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 18px;
    }

    .stats-grid .stat-card {
        min-height: 175px;
        padding: 18px 10px;
        gap: 15px;
        border-radius: 22px;
    }

    .stats-grid .stat-icon {
        width: 66px;
        height: 66px;
        min-width: 66px;
        border-radius: 21px;
        font-size: 27px;
    }

    .stats-grid .stat-text strong {
        font-size: 14px;
        letter-spacing: 0;
    }
}

/* Kurangi gerakan jika diminta oleh sistem */
@media (prefers-reduced-motion: reduce) {
    .stats-grid .stat-card,
    .stats-grid .stat-icon {
        transition: none;
    }
}

/* =========================================
   RANDUBELANG — MACOS TAHOE LIQUID GLASS
   ========================================= */

:root {
    --glass-border: rgba(255, 255, 255, 0.72);
    --glass-shadow: 0 12px 35px rgba(26, 69, 91, 0.10);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.stats-grid .stat-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 250px;
    padding: 26px 20px;
    box-sizing: border-box;

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

    border: 1px solid var(--glass-border);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.76),
            rgba(255,255,255,0.30)
        );

    -webkit-backdrop-filter: blur(24px) saturate(165%);
    backdrop-filter: blur(24px) saturate(165%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.90),
        inset 0 -1px 0 rgba(255,255,255,0.30),
        var(--glass-shadow);

    text-decoration: none;
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

/* Pantulan cahaya pada permukaan kartu */
.stats-grid .stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;

    background:
        radial-gradient(
            ellipse at 18% 0%,
            rgba(255,255,255,0.90),
            transparent 55%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,0.22),
            transparent 58%
        );
}

/* Warna kaca setiap kartu */
.stats-grid .stat-card:nth-child(1) {
    background-color: rgba(107, 220, 151, 0.16);
}

.stats-grid .stat-card:nth-child(2) {
    background-color: rgba(100, 166, 255, 0.16);
}

.stats-grid .stat-card:nth-child(3) {
    background-color: rgba(171, 125, 255, 0.16);
}

.stats-grid .stat-card:nth-child(4) {
    background-color: rgba(255, 179, 100, 0.18);
}

.stats-grid .stat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,0.98);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.98),
        0 20px 42px rgba(26,69,91,0.16);
}

.stats-grid .stat-icon {
    width: 104px;
    height: 104px;
    min-width: 104px;
    box-sizing: border-box;

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

    border-radius: 30px;
    font-size: 36px;
    font-weight: 800;

    border: 1px solid rgba(255,255,255,0.88);
    box-shadow:
        inset 0 2px 2px rgba(255,255,255,0.90),
        inset 0 -5px 12px rgba(255,255,255,0.16),
        0 10px 24px rgba(37,70,100,0.12);

    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);

    transition: transform .28s ease;
}

.stats-grid .stat-card:hover .stat-icon {
    transform: scale(1.06);
}

.stats-grid .stat-icon.green {
    background: linear-gradient(
        145deg,
        rgba(219,255,230,0.95),
        rgba(80,205,133,0.76)
    );
    color: #087344;
}

.stats-grid .stat-icon.blue {
    background: linear-gradient(
        145deg,
        rgba(223,239,255,0.96),
        rgba(75,143,255,0.76)
    );
    color: #1459bf;
}

.stats-grid .stat-icon.purple {
    background: linear-gradient(
        145deg,
        rgba(245,232,255,0.96),
        rgba(156,112,255,0.76)
    );
    color: #6336ad;
}

.stats-grid .stat-icon.orange {
    background: linear-gradient(
        145deg,
        rgba(255,241,216,0.96),
        rgba(255,166,73,0.78)
    );
    color: #a9510b;
}

.stats-grid .stat-text {
    min-width: 0;
    text-align: center;
}

.stats-grid .stat-text strong {
    display: block;
    color: #18372b;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: -0.35px;
}

/* Tablet */
@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .stats-grid .stat-card {
        min-height: 210px;
    }
}

/* HP Android */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 18px;
    }

    .stats-grid .stat-card {
        min-height: 175px;
        padding: 18px 10px;
        gap: 15px;
        border-radius: 22px;
    }

    .stats-grid .stat-icon {
        width: 66px;
        height: 66px;
        min-width: 66px;
        border-radius: 21px;
        font-size: 27px;
    }

    .stats-grid .stat-text strong {
        font-size: 14px;
        letter-spacing: 0;
    }
}

/* Kurangi gerakan jika diminta oleh sistem */
@media (prefers-reduced-motion: reduce) {
    .stats-grid .stat-card,
    .stats-grid .stat-icon {
        transition: none;
    }
}

/* Tahoe: ambient light dan Liquid Glass yang lebih nyata */
.stats-grid {
    position: relative;
    isolation: isolate;
    padding: 24px 0;
}

.stats-grid::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -15px -25px;
    pointer-events: none;
    border-radius: 36px;
    background:
        radial-gradient(ellipse at 8% 35%, rgba(67,220,145,.20), transparent 38%),
        radial-gradient(ellipse at 38% 25%, rgba(72,153,255,.22), transparent 40%),
        radial-gradient(ellipse at 68% 70%, rgba(166,105,255,.20), transparent 38%),
        radial-gradient(ellipse at 95% 35%, rgba(255,171,87,.23), transparent 35%);
    filter: blur(22px);
}

.stats-grid .stat-card {
    background-color: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    backdrop-filter: blur(30px) saturate(190%);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(255,255,255,.3),
        0 14px 35px rgba(25,65,100,.12);
}

.stats-grid .stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 25% 0%, rgba(255,255,255,.85), transparent 48%),
        linear-gradient(145deg, rgba(255,255,255,.25), transparent 55%);
}

.stats-grid .stat-icon {
    overflow: hidden;
    position: relative;
    border-radius: 32px;
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.98),
        inset 0 -9px 18px rgba(255,255,255,.17),
        0 12px 28px rgba(30,65,100,.16);
}

.stats-grid .stat-icon::after {
    content: "";
    position: absolute;
    top: -25%;
    left: -20%;
    width: 90%;
    height: 50%;
    border-radius: 50%;
    background: rgba(255,255,255,.28);
    filter: blur(10px);
    pointer-events: none;
}

.stats-grid .stat-icon svg {
    width: 78%;
    height: 78%;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,.10));
}

.stats-grid .stat-text strong {
    font-size: 20px;
    color: #fff;
    text-shadow: 0 2px 9px rgba(15,42,75,.45);
}

.stats-grid .stat-card::after {
    border-color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.22);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.7);
}

@media (max-width: 480px) {
    .stats-grid .stat-icon {
        border-radius: 23px;
    }

    .stats-grid .stat-text strong {
        font-size: 14px;
    }
}

/* Ikon gambar pada kartu layanan */
.stats-grid .stat-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}


/* Wallpaper Portal Warga Randubelang */
html {
    min-height: 100%;
}

body {
    background-image: url("/static/wallpaper.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* ==========================================
   RANDUBELANG - macOS Tahoe Liquid Glass
   ========================================== */

.stats-grid .stat-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    min-height: 265px;
    padding: 30px 22px;

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

    background: rgba(255, 255, 255, 0.20) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 30px !important;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.80),
        inset 0 -1px 1px rgba(255, 255, 255, 0.18),
        0 12px 35px rgba(20, 55, 65, 0.12);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

/* Pantulan cahaya di permukaan kaca */
.stats-grid .stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.48) 0%,
            rgba(255, 255, 255, 0.12) 35%,
            rgba(255, 255, 255, 0.02) 65%,
            rgba(255, 255, 255, 0.20) 100%
        );

    border-radius: inherit;
}

/* Ikon layanan lebih besar */
.stats-grid .stat-icon {
    width: 112px !important;
    height: 112px !important;
    min-width: 112px;
    min-height: 112px;

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

    border-radius: 34px !important;
    border: 1px solid rgba(255, 255, 255, 0.85);

    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.90),
        inset 0 -2px 5px rgba(255, 255, 255, 0.20),
        0 8px 22px rgba(35, 55, 80, 0.14);
}

/* Jika ikon berupa gambar */
.stats-grid .stat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}

/* Ukuran simbol atau SVG */
.stats-grid .stat-icon svg {
    width: 58px !important;
    height: 58px !important;
}

/* Label kartu */
.stats-grid .stat-text strong {
    font-size: 21px;
    font-weight: 750;
    text-align: center;
    text-shadow: 0 2px 8px rgba(20, 40, 35, 0.20);
}

/* Efek saat kursor diarahkan ke kartu */
.stats-grid .stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.32) !important;

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.95),
        0 18px 40px rgba(20, 55, 65, 0.18);
}

/* Penyesuaian layar kecil */
@media (max-width: 600px) {
    .stats-grid .stat-card {
        min-height: 205px;
        padding: 20px 12px;
        gap: 17px;
        border-radius: 24px !important;
    }

    .stats-grid .stat-icon {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px;
        min-height: 82px;
        border-radius: 27px !important;
    }

    .stats-grid .stat-text strong {
        font-size: 16px;
    }
}


/* Ikon layanan XL - Liquid Glass */
.stats-grid .stat-icon {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    border-radius: 42px !important;
}

/* Simbol SVG ikut membesar */
.stats-grid .stat-icon svg {
    width: 76px !important;
    height: 76px !important;
}

/* Jarak antara ikon dan judul */
.stats-grid .stat-card {
    gap: 22px;
    min-height: 300px;
}

/* Penyesuaian untuk layar HP */
@media (max-width: 600px) {
    .stats-grid .stat-icon {
        width: 92px !important;
        height: 92px !important;
        min-width: 92px !important;
        min-height: 92px !important;
        border-radius: 28px !important;
    }

    .stats-grid .stat-icon svg {
        width: 48px !important;
        height: 48px !important;
    }

    .stats-grid .stat-card {
        min-height: 220px;
    }
}