/* ============================================================
   LIQUID GLASS — gaya kaca Apple (frosted glass / translucency)
   ------------------------------------------------------------
   Lapisan ini dipasang DI ATAS style.css (di-include setelahnya).
   Untuk kembali ke tampilan lama: hapus baris include glass.css
   di views/partials/head.ejs lalu restart PM2.
   Backup asli: backups/liquid-glass-2026-08-29/
   ============================================================ */

/* ---- 1. Wash latar: gradasi pastel lembut di belakang semua section ---- */
body {
  background: linear-gradient(165deg, #fdeee8 0%, #f5efff 32%, #eaf2ff 62%, #fdf1ea 100%);
  background-attachment: fixed;
}

/* ---- 2. Section jadi tembus pandang agar wash terlihat ---- */
.section { background: rgba(255, 255, 255, .38); }
.section-alt { background: rgba(255, 255, 255, .22); }
#laporan-keuangan {
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(253, 240, 236, .5) 45%, rgba(255, 255, 255, .25));
}

/* ---- 3. Kartu kaca (frosted) ---- */
.about-card, .pk-card, .team-card, .blog-card, .testi-card, .lap-card, .rek-card, .acc-item {
  background: rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .8) !important;
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(90, 60, 50, .10), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.about-card:hover, .pk-card:hover, .team-card:hover, .testi-card:hover {
  box-shadow: 0 16px 44px rgba(90, 60, 50, .16), inset 0 1px 0 rgba(255, 255, 255, .85);
}

/* ---- 4. Header & footer kaca ---- */
.site-header {
  background: rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .65);
}
.site-footer {
  background: rgba(255, 255, 255, .5) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, .7);
}

/* ---- 5. Tombol kaca ---- */
.btn { border-radius: 999px; }
.btn-light {
  background: rgba(255, 255, 255, .5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .85) !important;
  color: var(--ink) !important;
  box-shadow: 0 4px 18px rgba(90, 60, 50, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.btn-primary {
  background: linear-gradient(135deg, rgba(235, 72, 38, .92), rgba(178, 28, 6, .95)) !important;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 6px 22px rgba(212, 37, 10, .4), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-outline {
  background: rgba(255, 255, 255, .16) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, .8) !important;
}

/* ---- 6. Form kaca ---- */
.form-field input, .form-field textarea, .form-field select,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], textarea {
  background: rgba(255, 255, 255, .6) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .85) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .04), 0 2px 12px rgba(90, 60, 50, .06);
}
.form-field input:focus, .form-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(212, 37, 10, .14), inset 0 1px 3px rgba(0, 0, 0, .03) !important;
}

/* ---- 7. Tombol donasi mengambang tetap menonjol (kaca merah) ---- */
.float-donasi {
  background: linear-gradient(135deg, rgba(235, 72, 38, .94), rgba(178, 28, 6, .97)) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: 0 8px 28px rgba(212, 37, 10, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ---- 8. Fallback: browser tanpa backdrop-filter ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body { background: #fbf6f3; background-attachment: scroll; }
  .section { background: #fff; }
  .section-alt { background: #f7f7f7; }
  .about-card, .pk-card, .team-card, .blog-card, .testi-card, .lap-card, .rek-card, .acc-item {
    background: rgba(255, 255, 255, .96) !important;
  }
  .site-header { background: rgba(255, 255, 255, .98) !important; }
  .site-footer { background: rgba(255, 255, 255, .97) !important; }
  .btn-light { background: #fff !important; }
  .form-field input, .form-field textarea, input[type="text"], input[type="email"], input[type="password"], textarea {
    background: #fff !important;
  }
}