/* ========================================= */
/* 1. FONDASI WARNA (MILTON NORM PALETTE)    */
/* ========================================= */
:root {
  /* Milton Norm Original Colors */
  --color-green: #3d4c41; /* Deep Forest Green */
  --color-gray: #999999;  /* Slate Grey */
  --color-light: #e6e6e6; /* Platinum White */

  /* Mapping ke Elemen Web App */
  --bg-color: var(--color-green); 
  --surface: var(--color-light);  
  
  --primary: var(--color-green); 
  --primary-hover: #2f3a32;
  --accent: var(--color-gray); 
  
  /* Penyesuaian Teks agar Terbaca Jelas */
  --text-main: var(--color-light); /* Teks untuk area Hijau Gelap (Header/Footer) */
  --text-dark: #222222;            /* Teks untuk di dalam Card/Dialog */
  --text-muted: #5c5c5c;           /* Teks penjelasan di dalam Card */
  --border-color: #cccccc;         /* Garis batas yang lebih halus dari Slate Grey */
  
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* --- MENGUNCI BACKGROUND SAAT POP-UP TERBUKA --- */
body:has(dialog[open]) {
  overflow: hidden !important;
  touch-action: none !important; /* Mencegah layar HP menarik background */
}

body { 
  font-family: 'Inter', -apple-system, sans-serif; 
  background-color: var(--bg-color); 
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(230, 230, 230, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(61, 76, 65, 0) 0%, rgba(30, 40, 33, 1) 100%);
  background-attachment: fixed; 
  background-size: cover;
  color: var(--text-main); 
  line-height: 1.6; 
  
  /* KUNCI 1: Tinggi pas layar, tanpa padding bawah yang aneh-aneh! */
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.hidden { display: none !important; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.85rem; }
.mb-1 { margin-bottom: 0.75rem; }
.mb-2 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 1rem; }
.w-100 { width: 100%; }

/* ========================================= */
/* 2. HEADER & FOOTER (Di Atas Background Hijau) */
/* ========================================= */
.global-header { 
  padding: 80px 20px 5px; 
  text-align: center; 
}
.global-header h1 { 
  font-size: 2.6rem; 
  font-weight: 800;  
  color: var(--color-light); /* KOREKSI: Harus putih/terang agar terlihat di background hijau */
  margin-bottom: 8px; 
}
.typewriter-container { 
  font-size: 1rem; 
  color: #b3b3b3; /* Abu-abu terang agak memudar */
  font-weight: 600; 
  min-height: 24px; 
}
.cursor { display: inline-block; width: 2px; animation: blink 0.75s step-end infinite; color: var(--color-light); }
@keyframes blink { 50% { opacity: 0; } }

.global-footer { 
  padding: 20px; 
  text-align: center; 
  font-size: 0.85rem; 
  color: rgba(255, 255, 255, 0.6); 
  width: 100%;
  
  /* KUNCI 2: Otomatis terdorong ke batas bawah */
  margin-top: auto; 
  flex-shrink: 0; 
  position: relative;
  z-index: 10;
}
.signature { 
  font-family: 'Georgia', serif; 
  font-style: italic; 
  color: var(--color-light); 
  font-size: 1rem; 
  font-weight: 600;
  margin-left: 4px; 
}
.divider { margin: 0 6px; color: #b3b3b3; font-weight: 300; }

/* ========================================= */
/* 3. LAYOUT & CARD (Di Atas Latar Abu-abu Terang) */
/* ========================================= */
.view-container { 
  max-width: 800px; 
  margin: 0 auto; 
  padding: 10px 20px 40px; /* Bantalan 40px kita pindahkan ke dalam kontainer ini */
  width: 100%; 
  
  /* KUNCI 3: Bertindak sebagai pegas untuk mengisi sisa layar */
  flex: 1 0 auto; 
  display: flex; 
  flex-direction: column; 
}
#authView { justify-content: flex-start; align-items: center; margin-top: 3vh; }

.card { 
  background: var(--surface); 
  color: var(--text-dark); /* KOREKSI: Teks di dalam kartu wajib gelap */
  border-radius: var(--radius-lg); 
  padding: 32px; 
  box-shadow: var(--shadow-sm); 
  border: 1px solid var(--border-color); 
}

.title-accent { 
  color: var(--primary); /* Hijau gelap, terlihat elegan di kartu terang */
  font-size: 1.1rem; 
  border-bottom: 2px solid #d4d4d4; 
  padding-bottom: 8px; 
  margin-bottom: 16px; 
}

/* ========================================= */
/* 4. FORM, INPUT & BUTTONS                  */
/* ========================================= */
label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; color: var(--text-dark); }
input, textarea { 
  width: 100%; 
  padding: 14px 16px; 
  border: 1px solid var(--border-color); 
  border-radius: var(--radius-md); 
  font-family: inherit; 
  font-size: 1rem; 
  transition: var(--transition); 
  background: #ffffff; /* Input dibuat Putih Murni agar kontras dengan kartu abu terang */
  color: var(--text-dark); 
  margin-bottom: 16px; 
}
input:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(61, 76, 65, 0.15); }
input::placeholder, textarea::placeholder { color: var(--color-gray); }

.btn { padding: 14px 20px; border-radius: var(--radius-md); font-weight: 600; font-size: 1rem; cursor: pointer; transition: var(--transition); border: none; text-align: center; }
.btn-primary { background: var(--primary); color: var(--color-light); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 12px rgba(61, 76, 65, 0.3); }
.btn-secondary { background: var(--color-gray); color: #ffffff; }
.btn-secondary:hover { background: #7a7a7a; }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); font-weight: 700;}
.btn-outline:hover { background: rgba(61, 76, 65, 0.05); }

/* --- FITUR MATA PASSWORD --- */
.password-wrapper { position: relative; width: 100%; }
.password-wrapper input { padding-right: 45px; } 
.btn-eye { position: absolute; right: 12px; top: 12px; background: none; border: none !important; outline: none !important; cursor: pointer; color: var(--color-gray); transition: var(--transition); display: flex; align-items: center; justify-content: center; padding: 4px; }
.btn-eye:hover { color: var(--primary); transform: scale(1.1); }
.btn-eye svg { pointer-events: none; }

/* ========================================= */
/* 5. TABS & ANIMASI (Daftar VIP)            */
/* ========================================= */
.tabs { display: flex; background: #d4d4d4; border-radius: var(--radius-md); margin-bottom: 24px; padding: 4px; }
.tab { flex: 1; padding: 12px; text-align: center; border: none; background: transparent; cursor: pointer; font-weight: 600; color: var(--text-muted); border-radius: 8px; transition: var(--transition); }
.tab.active { background: var(--primary) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(61, 76, 65, 0.3); transform: translateY(-1px); }
.tab:not(.active):hover { background: rgba(255, 255, 255, 0.3); color: var(--primary); }

.auth-card { width: 100%; max-width: 420px; transition: var(--transition); }
.auth-fields-wrapper { overflow: hidden; position: relative; }
.auth-slide-panel { max-height: 0; opacity: 0; transform: translateY(-20px); transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.4s ease; overflow: hidden; }
.auth-slide-panel.active-panel { max-height: 250px; opacity: 1; transform: translateY(0); margin-bottom: 10px; }

/* ========================================= */
/* 6. GRID DASHBOARD & MODUL TEMA            */
/* ========================================= */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 15px;}
.span-2 { grid-column: 1 / -1; }
@media (min-width: 600px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.theme-card { 
  background: #ffffff; /* Putih murni agar menonjol dari latar abu-abu kartu induk */
  padding: 24px; 
  border-radius: var(--radius-md); 
  border-left: 4px solid var(--primary); 
  box-shadow: var(--shadow-sm); 
  cursor: pointer; 
  transition: var(--transition); 
  display: flex; justify-content: space-between; align-items: center; 
}
.theme-card h4 { font-weight: 600; font-size: 1.05rem; color: var(--text-dark); }
.theme-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-left-color: var(--accent); }

/* ========================================= */
/* 7. DIALOG / POPUP / MODAL                 */
/* ========================================= */
dialog { margin: auto; border: none; border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-lg); max-width: 400px; width: 90%; color: var(--text-dark); background: var(--surface); z-index: 1000; }
dialog::backdrop { background: rgba(20, 26, 22, 0.7); backdrop-filter: blur(4px); }
.dialog-content { padding: 24px; text-align: center; }

/* --- PENGUNCI POSISI DI TENGAH LAYAR --- */
#confirmDialog, #toastDialog, #modernAlertDialog { 
  position: fixed !important; 
  top: 50% !important; 
  left: 50% !important; 
  transform: translate(-50%, -50%) !important; 
  margin: 0 !important; /* Wajib nol untuk mematikan margin: auto bawaan */
  z-index: 999999 !important; 
}
#confirmDialog::backdrop { background: rgba(0, 0, 0, 0.85) !important; backdrop-filter: blur(6px) !important; z-index: 9998 !important; }

.fullscreen-dialog { max-width: 800px; width: 100%; height: 90vh; max-height: 90vh; flex-direction: column; overflow: hidden; }
dialog[open].fullscreen-dialog { display: flex; }
.dialog-header { padding: 20px 24px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; background: var(--surface); }
.dialog-content-scroll { padding: 24px; overflow-y: auto; flex: 1; background: #ffffff; /* Latar naskah dibuat putih agar fokus membaca */ }
.action-box { padding: 24px; border-radius: var(--radius-md); margin-top: 10px; background: var(--surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }

.btn-close { background: transparent; border: none !important; outline: none !important; font-size: 1.5rem; cursor: pointer; color: var(--color-gray); transition: var(--transition); padding: 4px 8px; display: flex; align-items: center; justify-content: center; }
.btn-close:hover, .btn-close:active, .btn-close:focus { color: var(--primary); transform: scale(1.1); outline: none; border: none; background: transparent; }

.badge { font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; background: #d4d4d4; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.badge.done { background: var(--primary); color: var(--color-light); }

/* --- ANIMASI LOADING DOTS --- */
.loading-dots::after {
  content: '';
  display: inline-block;
  width: 1em;
  text-align: left;
  animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* --- ANIMASI PROGRESS BAR TOAST --- */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px; /* Ketebalan garis progress */
  background-color: var(--primary); /* Warna Hijau Gelap */
  width: 100%;
}

/* Keyframe untuk menyusutkan garis dari 100% ke 0% */
@keyframes shrinkProgress {
  from { width: 100%; }
  to { width: 0%; }
}

.toast-progress.animate {
  /* Durasi 1.5s, linear agar kecepatan menyusutnya konstan */
  animation: shrinkProgress 1.5s linear forwards; 
}

/* --- TOMBOL DANGER (MERAH) UNTUK LOGOUT / HAPUS --- */
.btn-danger {
  background-color: #dc3545; /* Merah elegan */
  color: #ffffff;
  border: none;
}
.btn-danger:hover {
  background-color: #c82333; /* Merah lebih gelap saat kursor mendekat */
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); /* Bayangan merah pudar */
}

/* ========================================================== */
/* TAMPILAN EBOOK DI LAYAR & PDF (DISEMPURNAKAN) */
/* ========================================================== */
.ebook-container {
  font-family: 'Merriweather', 'Georgia', serif; 
  line-height: 1.6; /* Dirapatkan sedikit dari 1.8 agar list tidak melar */
  color: #2d3748;
  text-align: justify;
  font-size: 0.95rem; /* Ukuran dasar teks sedikit lebih elegan */
}

/* 1. Mengecilkan Ukuran Judul agar Proporsional */
.ebook-container h1 { font-size: 1.5rem; color: #1a202c; text-align: center; margin-top: 1.5rem; margin-bottom: 1rem; border-bottom: 2px solid #eab308; padding-bottom: 0.5rem; }
.ebook-container h2 { font-size: 1.25rem; color: #2b6cb0; margin-top: 1.2rem; margin-bottom: 0.5rem; }
.ebook-container h3 { font-size: 1.1rem; color: #2d3748; margin-top: 1rem; margin-bottom: 0.5rem; font-weight: bold; }
.ebook-container h4 { font-size: 1rem; color: #4a5568; margin-top: 0.8rem; margin-bottom: 0.3rem; font-weight: bold; }

/* 2. Merapikan Jarak dan Indentasi List (Bullet & Numbering) */
.ebook-container ul, .ebook-container ol {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem; /* Jarak menjorok ke dalam yang pas */
}
.ebook-container li {
  margin-bottom: 0.3rem; /* Jarak antar baris list dirapatkan */
}

/* 3. Mencegah spasi ganda gara-gara paragraf tersembunyi di dalam list */
.ebook-container li p {
  margin: 0;
  display: inline;
}

/* 4. Merapatkan jarak antara induk list dan anak list (sub-list) */
.ebook-container ul ul, .ebook-container ol ul, .ebook-container ul ol {
  margin-top: 0.2rem;
  margin-bottom: 0;
}

/* 5. Desain Kotak Kutipan */
.ebook-container blockquote {
  border-left: 4px solid #eab308;
  padding-left: 1rem;
  font-style: italic;
  color: #718096;
  background: #f7fafc;
  padding: 10px 15px;
  border-radius: 4px;
  margin: 1rem 0;
}

/* --- OBAT ANTI BOCOR UNTUK CHECKLIST --- */
.ebook-container li:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: flex-start !important; /* Rata atas jika teksnya panjang memutar */
  list-style-type: none !important;
  margin-left: -1.5rem !important; 
  margin-bottom: 0.5rem !important;
}

.ebook-container li:has(input[type="checkbox"]) input {
  /* RESET SIFAT INPUT BAWAAN WEB AGAR TIDAK MELAR */
  width: 16px !important; 
  height: 16px !important; 
  display: inline-block !important;
  margin: 4px 10px 0 0 !important; /* Jarak pas antara kotak dan teks */
  flex-shrink: 0 !important; /* Mencegah kotak penyok */
  transform: scale(1.1);
}

.ebook-container li:has(input[type="checkbox"]) p {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}

/* ========================================================== */
/* MESIN CETAK (PRINT & PDF MEDIA QUERY) */
/* ========================================================== */
@media print {
  /* 1. Bebaskan seluruh halaman dari batasan scroll */
  html, body { height: auto !important; overflow: visible !important; }
  
  body * { visibility: hidden; }
  #resumeDialog, #resumeDialog * { visibility: visible; }
  
  /* 2. Bebaskan dialog Pop-up agar mengalir seperti kertas biasa */
  #resumeDialog { 
    position: static !important; /* Diubah dari absolute ke static */
    display: block !important;
    width: 100%; 
    height: auto !important; 
    max-height: none !important;
    overflow: visible !important;
    padding: 0; 
    border: none; 
    box-shadow: none; 
    background: white; 
    margin: 0;
  }

  /* 3. Hancurkan kotak scroll di dalam Pop-up */
  .dialog-content-scroll, #resumeContent {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
  }

  .no-print { display: none !important; }
  
  /* Kembalikan agar sub-judul tidak memaksa pindah halaman terus */
  .ebook-container h1, .ebook-container h2 { 
    page-break-before: auto !important; 
  }
}

/* Efek modern untuk background alert */
#modernAlertDialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

/* ========================================= */
/* KELAS KHUSUS TUTORIAL ONBOARDING          */
/* ========================================= */
.tour-highlight {
  position: relative !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  pointer-events: none; /* Mencegah user salah klik selama tour */
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 4px var(--primary), 0 0 40px rgba(255,255,255,0.2) !important;
  transition: all 0.3s ease;
}