/* ==========================================================================
   BA-THEME.CSS  —  Latar Peacock Maroon global BEST ACADEMY
   v1.0  (18 Sep 2026)

   Dimuat PALING AKHIR di <head> setiap halaman, sesudah <style> bawaan,
   supaya bisa menimpa latar lama tanpa mengubah desain tiap halaman.

   Isi:
   1. Token warna
   2. Lapisan latar responsif (HP / tablet / PC)
   3. Penyesuaian keterbacaan teks
   4. Penyesuaian panel, tabel, form
   5. Aturan cetak (invoice, sertifikat, rapor)
   ========================================================================== */

/* -------------------------------------------------- 1. TOKEN ------------ */
:root{
  --ba-bg-wide:   url('/assets/bg/bg-peacock-wide.webp');   /* PC     1920x1080 */
  --ba-bg-tab:    url('/assets/bg/bg-peacock-tab.webp');    /* tablet 1440x1440 */
  --ba-bg-mobile: url('/assets/bg/bg-peacock-mobile.webp'); /* HP      941x1672 */

  /* warna dasar diambil dari latar baru supaya menyatu */
  --ba-maroon-deep: #1a0206;
  --ba-maroon:      #4a0a11;
  --ba-gold:        #d4a017;
  --ba-gold-l:      #f0c040;

  /* teks: kontras minimal 4.5:1 di atas scrim */
  --ba-text:      #f7efe6;
  --ba-text-dim:  rgba(247,239,230,.72);
  --ba-text-mute: rgba(247,239,230,.48);

  /* panel dibuat lebih pekat dari sebelumnya karena latar kini berwarna */
  --ba-panel:     rgba(22,4,9,.74);
  --ba-panel-2:   rgba(30,6,12,.82);
  --ba-panel-brd: rgba(212,160,23,.22);
}

/* -------------------------------------------------- 2. LATAR ------------ */

/* Lapisan latar untuk halaman yang BELUM punya #bgl
   (Student Area, panel admin, halaman login peserta/instruktur, dll.) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(rgba(10,1,3,.67), rgba(10,1,3,.79)),
    var(--ba-bg-wide) center center / cover no-repeat;
  background-color: var(--ba-maroon-deep);
  pointer-events:none;
}

/* Halaman yang sudah punya lapisan latar sendiri — matikan lapisan ganda.
   #bgl   = halaman publik (home-custom, berita, tentang, dst.)
   .ba-bg = panel admin (dibuat oleh includes/dash-ui.php) */
body:has(#bgl)::before,
body:has(.ba-bg)::before{ display:none; }

/* Timpa lapisan latar lama di halaman publik.
   Scrim lama (hitam 78–92%) diganti maroon transparan supaya merak terlihat. */
#bgl{
  background:
    linear-gradient(rgba(12,1,4,.63), rgba(12,1,4,.77)),
    var(--ba-bg-wide) center center / cover no-repeat !important;
  background-color: var(--ba-maroon-deep) !important;
  /* Aturan lama memasang will-change:transform di sini. Itu menaikkan
     lapisan latar ke GPU, dan Chrome merasterisasinya sekali pada ukuran
     lapisan lalu meregangkannya — latar jadi tampak lembek. Dikembalikan
     ke auto supaya digambar ulang pada resolusi layar yang sebenarnya. */
  will-change: auto !important;
}

/* Panel admin: .ba-bg memakai img/latar-best-academy.jpg lewat variabel
   --latar / --latar-hp. Scrim di sini sengaja lebih pekat daripada halaman
   publik karena isinya tabel padat yang perlu kontras tinggi. */
.ba-bg{
  background-image:
    linear-gradient(rgba(14,2,6,.74), rgba(14,2,6,.86)),
    var(--ba-bg-wide) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: var(--ba-maroon-deep) !important;
}

/* Halaman yang memasang background.png langsung di <body>
   (daftar.php, login.php, daftar-beasiswa.php, proses-daftar.php) */
body{
  background-color: var(--ba-maroon-deep) !important;
  background-image: none !important;
}

/* Overlay gelap pada halaman login/daftar dibuat maroon, bukan hitam pekat */
.overlay{
  background: linear-gradient(rgba(14,2,5,.58), rgba(14,2,5,.72)) !important;
}

/* ---- TABLET : rasio 0,6 – 1,1 (iPad portrait & landscape) ---- */
@media (min-aspect-ratio: 3/5) and (max-aspect-ratio: 11/10){
  body::before,
  #bgl,
  .ba-bg{
    background-image:
      linear-gradient(rgba(10,1,3,.67), rgba(10,1,3,.79)),
      var(--ba-bg-tab) !important;
  }
}

/* ---- HP : rasio di bawah 0,6 (portrait) ---- */
@media (max-aspect-ratio: 3/5){
  body::before,
  #bgl,
  .ba-bg{
    background-image:
      linear-gradient(rgba(10,1,3,.71), rgba(10,1,3,.83)),
      var(--ba-bg-mobile) !important;
    background-attachment: scroll !important; /* 'fixed' berat & bermasalah di iOS */
  }
}

/* ---- Layar sangat lebar : pakai aset wide, jangan diregangkan ---- */
@media (min-aspect-ratio: 2/1){
  body::before,
  #bgl,
  .ba-bg{ background-size: cover !important; }
}

/* Hemat data / hemat baterai: latar polos tanpa gambar */
@media (prefers-reduced-data: reduce){
  body::before,
  #bgl,
  .ba-bg{
    background-image: linear-gradient(160deg,#3a0810,#1a0206 60%) !important;
  }
}

/* -------------------------------------------------- 3. TEKS ------------- */

body{ color: var(--ba-text); }

/* Judul diberi bayangan tipis agar tetap tegas di atas area bermotif */
h1,h2,h3,.sec-title,.bigname,.periode-label{
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

/* Teks abu-abu bawaan dinaikkan kontrasnya */
.info-label,.lbl,.foto-ket,.progress-label,.text-muted,
.muted,small.muted{
  color: var(--ba-text-dim) !important;
}

/* -------------------------------------------------- 4. PANEL ------------ */

/* Kartu kaca dibuat sedikit lebih pekat agar teks tetap terbaca
   di atas latar yang kini berwarna. */
.card,.card-sm,.stat-card,.box,.panel,.glass,
.profile-hero,.profile-header,.tablewrap{
  background-color: var(--ba-panel) !important;
  border-color: var(--ba-panel-brd) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Header tabel & baris */
table th{ background-color: rgba(212,160,23,.12) !important; color: var(--ba-gold-l) !important; }
table td{ color: var(--ba-text-dim); }

/* Kolom isian: latar terang, teks gelap — di SEMUA keadaan.
   [v1.1, 19 Sep 2026] Versi 1.0 hanya memaksa warna teks gelap, tanpa
   mengunci latarnya. Beberapa halaman (daftar.php, login-peserta.php,
   ganti-password.php, kuisioner-peserta.php, dst.) mengganti latar kolom
   menjadi hampir transparan saat kolom diklik (:focus) — hasilnya teks
   gelap di atas latar gelap, dan isian tidak terlihat saat sedang
   diketik. Latar dan warna teks kini dikunci bersama, termasuk :focus. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]),
select,textarea{
  background-color: rgba(255,255,255,.95) !important;
  color:#1a0206 !important;
  -webkit-text-fill-color:#1a0206;
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]):focus,
select:focus,textarea:focus{
  background-color:#fff !important;
  color:#1a0206 !important;
}
select option,select optgroup option{
  background:#fff !important; color:#1a0206 !important;
  -webkit-text-fill-color:#1a0206 !important; font-weight:400;
}
select optgroup{
  background:#2a0a0f !important; color:#F0C040 !important;
  -webkit-text-fill-color:#F0C040 !important; font-style:normal; font-weight:700;
}
select option:checked{ background:#E9C463 !important; color:#1a0206 !important; }
select option:disabled{ color:#8a7a7c !important; -webkit-text-fill-color:#8a7a7c !important; }
input::placeholder,textarea::placeholder{ color: rgba(26,2,6,.5) !important; -webkit-text-fill-color: rgba(26,2,6,.5); }
/* Isian otomatis Chrome (autofill) tetap terbaca */
input:-webkit-autofill{ -webkit-text-fill-color:#1a0206; box-shadow:0 0 0 40px #fff inset; }

/* Navigasi & footer dipekatkan agar tidak menyatu dengan latar */
header,nav,.navbar,.topbar,footer,.footer,.sidebar{
  background-color: rgba(14,2,6,.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* -------------------------------------------------- 5. CETAK ------------ */
/* Invoice, sertifikat, rapor: latar dibuang supaya hemat tinta & terbaca */
@media print{
  body::before,#bgl,#bgp,.ba-bg{ display:none !important; }
  body{ background:#fff !important; color:#000 !important; }
  .card,.box,.panel,.tablewrap{
    background:#fff !important; color:#000 !important;
    border-color:#ccc !important; backdrop-filter:none !important;
  }
  h1,h2,h3,.sec-title{ text-shadow:none !important; color:#000 !important; }
  header,nav,footer,.sidebar{ display:none !important; }
}

/* Hormati preferensi gerak minimal */
@media (prefers-reduced-motion: reduce){
  #bgl{ transform:none !important; will-change:auto !important; }
}

/* -------------------------------------------------- 6. HP (03 Okt 2026) -- */
/* Lencana kecil di atas judul (".ey", ".hero-badge") memakai jarak huruf 4px.
   Di HP 360–390px kalimat panjang ("Lembaga Pelatihan Kerja Hospitality
   Internasional") pecah jadi 4 baris dan mendorong judul ke bawah layar.
   Jarak huruf dirapatkan hanya di layar sempit; desktop tidak berubah. */
@media (max-width:480px){
  html .ey, html .hero-badge{
    letter-spacing:2px; padding:7px 16px; gap:6px; line-height:1.55;
    max-width:calc(100vw - 32px);
  }
  html .logo-sub{ letter-spacing:1.6px; }
}
@media (max-width:370px){
  html .ey, html .hero-badge{ letter-spacing:1.4px; font-size:.64rem; }
  html .logo-sub{ letter-spacing:1px; font-size:.54rem; }
}