/* RESET DARI GANGGUAN SCROLL MOBILE */
    html, body {
      max-width: 100vw;
      overflow-x: hidden;
    }

    body { 
      font-family: 'Nunito', sans-serif; 
      background-color: #fffcf5; 
      margin: 0; 
      padding: 0; 
      -webkit-tap-highlight-color: transparent; 
    }

    /* Utilitas Font Khusus */
    .font-fredoka { font-family: 'Fredoka', sans-serif; }
    
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #fffcf5; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    .pb-safe { padding-bottom: env(safe-area-inset-bottom, 16px); }

    @keyframes slideIn {
      from { transform: translate(-50%, -100%); opacity: 0; }
      to { transform: translate(-50%, 0); opacity: 1; }
    }
    .animate-slide-in {
      animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-15px); }
      100% { transform: translateY(0px); }
    }
    .animate-float { animation: float 4s ease-in-out infinite; }
    
    /* Efek Tombol Mekanis saat ditekan */
    .active-scale:active { transform: scale(0.95); transition: transform 0.1s; }
    .active-block-press:active { transform: translateY(6px); border-bottom-width: 2px !important; margin-bottom: 6px; transition: all 0.1s; }

    /* Custom Scrollbar khusus Tabel */
    .custom-scrollbar::-webkit-scrollbar { height: 4px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }

    /* Dekorasi Wavy Bottom untuk Header */
    .wavy-bottom { position: relative; }
    .wavy-bottom::after {
      content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 24px;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V95.8C59.71,118.08,130.83,119.34,192.39,99.47,236.4,85.25,279.4,70.62,321.39,56.44Z' fill='%23fffcf5'/%3E%3C/svg%3E");
      background-size: cover; background-repeat: no-repeat;
    }

    /* Tombol Install PWA */
    #btnInstallPWAWrap {
      display: none;
      position: fixed;
      right: 16px;
      bottom: 88px;
      z-index: 200;
      align-items: center;
      gap: 6px;
    }
    #btnInstallPWAWrap.show { display: inline-flex; }
    #btnInstallPWA {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 18px;
      background: #f9a03f;
      color: #ffffff;
      border: none;
      border-radius: 999px;
      font-family: 'Fredoka', sans-serif;
      font-weight: 600;
      font-size: 14px;
      box-shadow: 0 10px 25px -5px rgba(249, 160, 63, 0.5), 0 4px 10px -2px rgba(0,0,0,0.1);
      cursor: pointer;
    }
    #btnInstallPWA:active { transform: scale(0.96); }
    #btnDismissPWA {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      background: #ffffff;
      color: #94a3b8;
      border: 2px solid #e2e8f0;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1);
      flex-shrink: 0;
    }
    #btnDismissPWA:active { transform: scale(0.9); }
    @media (min-width: 768px) {
      #btnInstallPWAWrap { bottom: 24px; }
    }
    /* Jangan tampilkan tombol jika sudah berjalan sebagai aplikasi terinstall */
    @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: window-controls-overlay) {
      #btnInstallPWAWrap { display: none !important; }
    }

    /* Banner Update Tersedia */
    #bannerUpdate {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 9999;
      background: #2b3990;
      color: #fff;
      padding: 12px 16px;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      font-family: 'Fredoka', sans-serif;
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }
    #bannerUpdate.show { display: flex; }
    #bannerUpdate span { font-size: 13px; font-weight: 600; }
    #bannerUpdate button {
      background: #f9a03f;
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 999px;
      font-family: 'Fredoka', sans-serif;
      font-weight: 600;
      font-size: 12px;
      cursor: pointer;
    }
    #bannerUpdate button:active { transform: scale(0.96); }

    /* Tampil jika proses startup gagal, agar tidak menjadi blank putih. */
    #bootStatus {
      min-height: 100dvh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      text-align: center;
      color: #2b3990;
      font-weight: 800;
    }
    .boot-error-card {
      width: min(100%, 440px);
      padding: 28px 22px;
      border: 2px solid #ffe0b2;
      border-radius: 24px;
      background: #fffaf0;
      box-shadow: 0 12px 30px rgba(43, 57, 144, 0.12);
    }
    .boot-error-card h1 { margin: 0 0 10px; font-size: 20px; }
    .boot-error-card p { margin: 0 0 18px; color: #64748b; font-size: 13px; line-height: 1.5; }
    .boot-error-card button {
      border: 0;
      border-radius: 999px;
      padding: 11px 20px;
      background: #f9a03f;
      color: #fff;
      font: inherit;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }