/*
==================================================
  COLOR PALETTE - UI/UX STANDARDIZED
==================================================
Palet warna yang konsisten untuk seluruh aplikasi
berdasarkan teori warna UI/UX (60-30-10 rule)
*/

:root {
  /* Primary - Blue (70% usage) */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  /* Secondary - Green (Success states & Quiz theme) */
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-quiz-green: #5a8a48;

  /* Accent - Orange (10% usage, urgent only) */
  --color-accent-500: #f97316;
  --color-accent-600: #ea580c;

  /* Neutral - Gray */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;

  /* Semantic Colors */
  --color-error: #ef4444;
  --color-warning: #f59e0b;
}

/*
==================================================
  GAYA DASAR & UTAMA (GLOBAL STYLES)
==================================================
Meh teu hilap di komentaran.
Mulai dari ukuran font dasar, jenis font, sampai warna latar belakang utama.
*/

html {
  font-size: 14px;
  /* Prevent layout shift from scrollbar appearing/disappearing */
  scrollbar-gutter: stable;
}

body {
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  background-color: #f0f2f5;
  height: var(--app-height, 100vh);
  overflow-y: scroll;
}

/*
==================================================
  KOMPONEN LAYOUT (HEADER & FOOTER)
==================================================
Bagian ini mengatur warna dan tampilan untuk
header dan footer, bagian paling atas dan bawah halaman.
*/

.header-top {
  background-color: #1a1a1a; /* Hitam pekat untuk header atas */
  color: white;
}

.header-bottom,
.footer-top-line {
  background-color: #5a8a48; /* Hijau tema untuk header bawah dan garis di footer */
  color: white;
}

.footer-main {
  background-color: #1a1a1a; /* Hitam pekat untuk footer utama */
  color: white;
}

/*
==================================================
  TOMBOL-TOMBOL (BUTTONS)
==================================================
Semua gaya yang berhubungan dengan tombol ada di sini.
Mulai dari tombol navigasi, pilihan jawaban, sampai tombol filter.
*/

/* --- Tombol Umum --- */
.btn-finish {
  /* Tombol untuk menyelesaikan ujian, warnanya dibedakan biar mencolok */
  background-color: #f0c27b;
  color: #333;
}

.btn-nav {
  /* Tombol navigasi utama (seperti 'Selanjutnya' atau 'Kembali') */
  background-color: #5a8a48; /* Menggunakan warna hijau tema */
  color: white;
}

/* --- Tombol Navigasi Soal (Sidebar) --- */
.btn-question {
  position: relative; /* Diperlukan untuk penanda bendera dan panah aktif */
}

/* Panah yang muncul di samping nomor soal yang aktif */
.btn-question.active::after {
  content: "";
  position: absolute;
  right: -8px; /* Posisi di luar tombol sebelah kanan */
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #5a8a48; /* Warna panah sama dengan warna tema */
}

/* Tombol soal yang sudah dijawab, warnanya jadi lebih gelap */
.btn-question.answered {
  background-color: #474747;
}

/* Tombol navigasi soal yang dinonaktifkan (tidak bisa diklik) */
.btn-question.disabled-nav {
  background-color: #d1d5db; /* Warna abu-abu */
  cursor: not-allowed; /* Kursor berubah jadi tanda 'dilarang' */
  opacity: 0.7;
}

/* Menghilangkan panah di tombol nonaktif, meskipun sedang aktif secara teknis */
.btn-question.disabled-nav.active::after {
  display: none;
}

/* --- Opsi Jawaban --- */
.answer-option {
  cursor: pointer; /* Kursor jadi tangan saat menunjuk opsi */
  transition: background-color 0.2s;
}

.answer-option:hover {
  background-color: #e9ecef; /* Warna berubah sedikit saat disentuh kursor */
}

/* Opsi jawaban yang dipilih pengguna */
.answer-option.selected {
  background-color: #cfe2ff; /* Warna biru muda */
  border-color: #0d6efd;
  color: #0a58ca;
}

/* --- Tombol Filter di Halaman Review (Versi Besar) --- */
.filter-button {
  flex-grow: 1; /* Membuat semua tombol filter punya lebar yang sama */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* Jarak antara ikon/angka dan teks */
  padding: 0.75rem;
  border-width: 2px;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Efek saat kursor menyentuh tombol filter */
#filter-correct:hover,
#filter-incorrect:hover,
#filter-unanswered:hover {
  color: white;
  transform: translateY(-2px); /* Sedikit terangkat ke atas */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#filter-correct:hover {
  background-color: #5a8a48;
}
#filter-incorrect:hover {
  background-color: #dc2626;
}
#filter-unanswered:hover {
  background-color: #6b7280;
}

/* Gaya untuk tombol filter yang sedang aktif/dipilih */
.filter-button.active-filter {
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#filter-correct.active-filter {
  background-color: #5a8a48;
  border-color: #5a8a48;
}
#filter-incorrect.active-filter {
  background-color: #dc2626;
  border-color: #dc2626;
}
#filter-unanswered.active-filter {
  background-color: #6b7280;
  border-color: #6b7280;
}

/* --- Tombol Filter di Halaman Review (Versi Kecil/Compact) --- */
.compact-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 38px;
  padding: 0 14px;
  border-radius: 20px; /* Bentuk pil/kapsul */
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: 2px solid transparent;
}

.compact-filter-button:hover {
  transform: scale(1.05); /* Sedikit membesar saat disentuh */
}

/* Lingkaran kecil untuk menampilkan jumlah (badge) */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px; /* Setengah dari tinggi/lebar agar bulat sempurna */
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
}

/* Warna default untuk filter 'Benar' */
.compact-filter-button.correct {
  background-color: #ecfdf5;
  color: #166534;
}
.compact-filter-button.correct .count-badge {
  background-color: var(--color-success-500);
  color: white;
}

/* Warna default untuk filter 'Salah' */
.compact-filter-button.incorrect {
  background-color: #fef2f2;
  color: #991b1b;
}
.compact-filter-button.incorrect .count-badge {
  background-color: var(--color-error);
  color: white;
}

/* Warna default untuk filter 'Tak Dijawab' */
.compact-filter-button.unanswered {
  background-color: var(--color-neutral-50);
  color: var(--color-neutral-600);
}
.compact-filter-button.unanswered .count-badge {
  background-color: #64748b;
  color: white;
}

/* Gaya saat filter compact aktif */
.compact-filter-button.active-filter.correct {
  background-color: var(--color-success-500);
  color: white;
  border-color: #166534;
}
.compact-filter-button.active-filter.incorrect {
  background-color: var(--color-error);
  color: white;
  border-color: #991b1b;
}
.compact-filter-button.active-filter.unanswered {
  background-color: #64748b;
  color: white;
  border-color: var(--color-neutral-700);
}

/* --- Tombol Ikon di Header --- */
.header-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%; /* Membuatnya bulat sempurna */
  color: #4b5563;
  background-color: #f3f4f6;
  font-size: 1.125rem; /* 18px */
  transition: all 0.2s ease-in-out;
}

.header-icon-button:hover {
  background-color: #e5e7eb;
  color: #1f2937;
  transform: translateY(-2px);
}

/* --- Tombol Halaman Login --- */
.btn {
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  transform-origin: center;
}
.btn:hover {
  transform: scale(1.03);
}

/* Tombol utama (misal: "Login") */
.btn-primary {
  background-color: var(--color-primary-600);
  color: white;
}
.btn-primary:hover {
  background-color: var(--color-primary-700);
}

/* Tombol sekunder (misal: "Login dengan Google") */
.btn-secondary {
  background-color: white;
  color: var(--color-primary-600);
  border: 2px solid var(--color-primary-600);
}
.btn-secondary:hover {
  background-color: var(--color-primary-50);
}

/* Tombol Terjemahan */
.japanese-text {
  white-space: pre-line;
  line-height: 1.6;
}

.translation-text {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0 !important;
  white-space: pre-line;
  line-height: 1.6;
}
.translation-text.visible {
  max-height: none; /* Tidak ada batasan tinggi */
  opacity: 1;
  margin-top: 0.5rem !important; /* Tambahkan margin saat terlihat */
}

/*
==================================================
  HALAMAN REVIEW JAWABAN
==================================================
Gaya khusus untuk elemen-elemen di halaman ulasan/review.
*/
.review-item {
  border: 1px solid #dee2e6;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s;
  background-color: white;
}
.review-item:hover {
  background-color: #f8f9fa;
}

/* Detail jawaban yang bisa muncul/hilang */
.review-detail {
  padding: 1rem;
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #f8f9fa;
  overflow: hidden;
  max-height: 1000px; /* Ketinggian maksimum saat terlihat */
  opacity: 1;
  /* Transisi untuk animasi buka-tutup yang mulus */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.4s ease-in-out;
}

/* Saat detail jawaban disembunyikan */
.review-detail.hidden {
  max-height: 0; /* Kunci animasi: tinggi jadi 0 */
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  margin-bottom: 0; /* Hilangkan margin juga agar rapi */
}

.review-option {
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin-top: 0.25rem;
}
.review-option.correct {
  background-color: #d1e7dd; /* Hijau untuk jawaban yang benar */
  border: 1px solid #a3cfbb;
}
.review-option.incorrect {
  background-color: #f8d7da; /* Merah untuk jawaban salah yang dipilih */
  border: 1px solid #f1aeb5;
}

/*
==================================================
  MODAL KONFIRMASI (POP-UP)
==================================================
Gaya untuk kotak dialog yang meminta konfirmasi dari pengguna.
*/

/* --- Tampilan Umum Modal --- */
#confirm-title {
  display: inline-block;
  background-color: #ebf8ff; /* Latar biru muda */
  color: #2b6cb0; /* Teks biru tua */
  padding: 8px 24px;
  border-radius: 0.5rem;
  margin-bottom: 24px;
  font-weight: 700;
  font-size: 1.125rem;
}

.confirm-icon-warning {
  color: #f59e0b; /* Warna kuning/oranye untuk ikon peringatan */
  font-size: 3rem;
}

/* --- Pengaturan Layout Tombol di Modal --- */
#confirm-buttons button {
  white-space: nowrap; /* Teks tombol tidak pindah baris */
  padding: 0.75rem 1rem;
}

/* Tombol disusun vertikal */
#confirm-buttons.stacked {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#confirm-buttons.stacked button {
  white-space: normal; /* Boleh pindah baris jika teks panjang */
  height: auto;
  line-height: 1.4;
  padding: 0.8rem 1rem;
}

/* Tombol disusun horizontal */
#confirm-buttons.side-by-side {
  display: flex;
  flex-direction: row-reverse; /* Tombol 'Yes' biasanya di kanan */
  justify-content: center;
  gap: 1rem;
}

#confirm-buttons.side-by-side button {
  width: auto;
  min-width: 120px;
}

/* --- Gaya Tombol Konfirmasi (Refactored) --- */
/* Class dasar untuk semua tombol konfirmasi */
.btn-confirm {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Tombol 'Ya' (sesuai tema utama) */
.btn-confirm-yes {
  background-color: #5a8a48;
  color: white;
  border: 1px solid #4d753f;
}
.btn-confirm-yes:hover {
  background-color: #4d753f;
}

/* Tombol 'Tidak' (netral) */
.btn-confirm-no {
  background-color: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.btn-confirm-no:hover {
  background-color: #e2e8f0;
}

/* Tombol di Modal Finish Test */
.btn-exam-confirm,
.btn-exam-cancel-green {
  background-color: #5a8a48; /* Tombol konfirmasi dan batal (versi hijau) */
  color: white;
  border: 1px solid #4d753f;
}
.btn-exam-confirm:hover,
.btn-exam-cancel-green:hover {
  background-color: #4d753f;
}

.btn-exam-cancel {
  background-color: #6c757d; /* Tombol batal (versi abu-abu) */
  color: white;
  border: 1px solid #5a6268;
}
.btn-exam-cancel:hover {
  background-color: #5a6268;
}

/*
==================================================
  HALAMAN PEMILIHAN PAKET & KATEGORI
==================================================
Gaya untuk kartu-kartu yang bisa dipilih pengguna,
seperti memilih paket soal atau kategori ujian.
*/

/* --- Desain Lama Tombol Paket (Minimalis) --- */
.packet-button.premium {
  cursor: not-allowed;
  background-color: #f8fafc;
  color: #94a3b8;
  border: 1px dashed #e2e8f0;
}

.packet-button.premium i {
  color: #f59e0b; /* Warna ikon mahkota premium */
}

.packet-button.premium:hover {
  transform: none; /* Hilangkan efek hover */
  box-shadow: none;
  background-color: #f8fafc;
}

/* --- Desain Baru Tombol Paket (Modern) --- */
.packet-button-new {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem; /* lebih bulat */
  padding: 1rem;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative; /* Komen: TAMBAHKAN INI */
}

.packet-button-new:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  border-color: #5a8a48; /* Border berubah warna hijau tema saat hover */
}

.packet-button-new .packet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  width: 100%;
}

.packet-button-new .packet-name {
  font-weight: 700;
  color: #1f2937;
  font-size: 1rem;
  margin-bottom: auto; /* Mendorong footer ke bawah, menjaga layout rapi */
  line-height: 1.4;
}

.packet-button-new .packet-icon {
  font-size: 1.5rem;
  color: #5a8a48;
}

.packet-button-new .packet-tag {
  background-color: #eef3eb;
  color: #5a8a48;
  padding: 2px 8px;
  border-radius: 99px; /* Bentuk kapsul */
  font-size: 0.75rem;
  font-weight: 500;
}

.packet-button-new .packet-footer {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #4b5563;
  font-size: 0.875rem;
  width: 100%;
}

/* Gaya khusus untuk tombol paket premium yang didesain ulang */
.packet-button-new.premium {
  background-color: #f8fafc;
  cursor: pointer;
}
.packet-button-new.premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  border-color: #f59e0b;
}
.packet-button-new.premium .packet-icon,
.packet-button-new.premium .packet-name,
.packet-button-new.premium .packet-footer {
  color: #9ca3af; /* Warna pudar */
}
.packet-button-new.premium .packet-tag {
  background-color: #f1f5f9;
  color: #9ca3af;
}
.packet-button-new.premium .packet-footer .fa-crown {
  color: #f59e0b; /* Ikon mahkota tetap berwarna emas */
}

/* --- Kartu Kategori Ujian --- */
.category-card-new {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  color: inherit;
}

.category-card-new:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #3b82f6; /* Warna biru saat hover */
}

.card-icon-background {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px; /* Bulat sempurna */
}

.card-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: #4b5563;
  font-weight: 500;
}

/*
==================================================
  HALAMAN LOGIN
==================================================
Gaya spesifik untuk halaman login.
*/

.login-promo-bg {
  /* Gambar latar untuk sisi promosi di halaman login */
  background-image: url("https://images.unsplash.com/photo-1542051841857-5f90071e7989?q=80&w=2070&auto=format&fit=crop");
}

.input-field {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

.input-field:focus {
  outline: none; /* Hilangkan outline default */
  box-shadow: 0 0 0 2px #5999ff; /* Ganti dengan shadow sebagai indikator fokus */
  border-color: transparent;
}

/*
==================================================
  EFEK & ANIMASI
==================================================
Kumpulan keyframes dan class untuk berbagai animasi.
*/

/* --- Animasi Umum --- */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinning {
  animation: spin 1s linear infinite;
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- Animasi Peringatan Waktu (Neon) --- */
.time-warning-neon {
  /* Animasi akan berkedip 3 kali */
  animation: neon-flash 1s 3;
}

@keyframes neon-flash {
  0%,
  100% {
    color: #ffffff;
    text-shadow: none;
  }
  50% {
    /* Di tengah animasi, teks akan bersinar */
    color: #ffeea9;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px rgba(240, 194, 123, 0.7), 0 0 15px rgba(240, 194, 123, 0.7);
  }
}

/*
==================================================
  LOADING INDICATORS & OVERLAYS
==================================================
Gaya untuk spinner dan overlay yang muncul saat
konten sedang dimuat.
*/

/* --- Loading Overlay untuk Konten Spesifik --- */
.loading-overlay {
  position: relative;
  pointer-events: none; /* Agar elemen di bawahnya tetap bisa di-hover (jika perlu) */
}

/* Lapisan semi-transparan yang menutupi konten */
.loading-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;
}

/* Ikon spinner yang berputar */
.loading-overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px; /* Setengah dari tinggi */
  margin-left: -25px; /* Setengah dari lebar */
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db; /* Warna biru untuk bagian yang bergerak */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 11;
}

/* --- Loader untuk Transisi Antar Halaman --- */
.page-loader {
  position: fixed; /* Menutupi seluruh layar */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s ease-in-out; /* Untuk efek fade-out */
}

.page-loader.hidden {
  opacity: 0;
  pointer-events: none; /* Agar tidak menghalangi interaksi setelah hilang */
}

/* Menggunakan kembali gaya spinner dari .loading-overlay */
.page-loader::after {
  content: "";
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/*
==================================================
  KOMPONEN LAIN & UTILITAS
==================================================
Gaya untuk elemen-elemen miscellaneous seperti progress bar,
scrollbar, dll.
*/

/* --- Utilitas Scrollbar --- */
/* Menyembunyikan scrollbar tapi tetap bisa di-scroll */
.no-scrollbar::-webkit-scrollbar {
  display: none;
} /* Chrome, Safari, Opera */
.no-scrollbar {
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}

/* --- Progress Bar (Audio & Sidebar) --- */
/* Progress bar vertikal di sidebar */
.progress-container {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse; /* Agar pengisi progress naik dari bawah ke atas */
}

.progress-filler {
  width: 100%;
  transition: height 0.3s ease-in-out;
}

/* Progress bar horizontal untuk audio player */
progress {
  -webkit-appearance: none;
  appearance: none;
}

progress::-webkit-progress-bar {
  background-color: #e5e7eb;
  border-radius: 0.5rem;
}

progress::-webkit-progress-value {
  background-color: #22c55e; /* Warna hijau */
  border-radius: 0.5rem;
  transition: width 0.1s linear;
}

progress::-moz-progress-bar {
  /* Khusus untuk Firefox */
  background-color: #22c55e;
  border-radius: 0.5rem;
}

/* --- Bendera Penanda Soal --- */
.question-flag {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

/*
==================================================
  RESPONSIVE DESIGN (MEDIA QUERIES)
==================================================
Penyesuaian layout untuk layar yang lebih kecil,
misalnya di handphone.
*/

@media (max-width: 640px) {
  /* Menyesuaikan ukuran modal di layar kecil */
  #confirm-modal .bg-white {
    max-width: 90%;
    margin: 1rem;
  }
  #confirm-modal #confirm-message {
    font-size: 0.9rem;
  }
  #confirm-modal button {
    font-size: 0.9rem;
  }
}
/* Komen: CSS untuk animasi 'bernapas' pada kartu utama */
.card-pulse {
  animation: pulse-shadow 2s infinite;
}

@keyframes pulse-shadow {
  0% {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
  }
  50% {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
  }
  100% {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
  }
}

/* --- STYLING UNTUK KALKULATOR --- */

/* Tampilan Utama Popup & Body */
#calculator-modal {
  /* Mencegah highlight teks saat drag di mobile */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#calculator-body {
  background-color: #1f2937; /* bg-gray-800 */
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border: 1px solid #4b5563; /* border-gray-600 */
}

/* Header untuk Drag & Tombol Close */
#calculator-header {
  background-color: #111827; /* bg-gray-900 */
  cursor: move;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #374151; /* border-gray-700 */
  touch-action: none;
}
#calculator-close-btn {
  font-size: 1.5rem;
  line-height: 1;
  color: #9ca3af; /* text-gray-400 */
  transition: color 0.2s;
}
#calculator-close-btn:hover {
  color: #ffffff;
}

/* Layar Display */
#calculator-display {
  background-color: transparent;
  color: #ffffff;
  font-family: "Poppins", monospace; /* Font modern & mono */
  font-weight: 500;
  padding: 1.5rem 1rem;
  height: auto;
}

/* Kontainer Tombol */
.buttons {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  background-color: #374151; /* bg-gray-700 untuk garis */
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  overflow: hidden; /* Penting untuk efek rounded corner di tombol */
}

/* Styling Umum untuk Semua Tombol */
.buttons .key {
  padding: 1rem 0;
  border: none;
  font-size: 1.25rem; /* 20px */
  font-weight: 500;
  cursor: pointer;
  background-color: #4b5563; /* bg-gray-600 */
  color: #ffffff;
  transition: background-color 0.2s;
}

.buttons .key:hover {
  background-color: #5d6a7e;
}

.buttons .key:active {
  background-color: #6c7a8e;
  transform: scale(0.99);
}

/* Styling Khusus untuk Tombol Operator */
.buttons .operator {
  background-color: #374151; /* bg-gray-700 */
  color: #60a5fa; /* text-blue-400, agar cocok dengan UI admin */
  font-weight: 600;
}

/* Styling Khusus untuk Tombol Equals */
.buttons .key[data-value="="] {
  background-color: #2563eb; /* bg-blue-600 */
  color: #ffffff;
}

.buttons .key[data-value="="]:hover {
  background-color: #1d4ed8; /* bg-blue-700 */
}

/*
==================================================
  SWAL2 / SWEETALERT2 Z-INDEX FIX
==================================================
Pastikan SweetAlert2 selalu di atas loading overlay
*/
.swal2-container {
  z-index: 99999 !important;
}

.swal2-popup {
  z-index: 99999 !important;
  font-family: "Inter", sans-serif !important;
}

.swal2-title {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
}

.swal2-html-container {
  font-family: "Inter", sans-serif !important;
}

.swal2-confirm,
.swal2-cancel,
.swal2-deny {
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
}