/* =============================================================
   login.css - maskot interaktif di halaman masuk
   -------------------------------------------------------------
   Hanya dipakai oleh halaman login, jadi sengaja dipisah dari
   base.css supaya halaman lain tidak ikut menanggung isinya.

   Bentuknya sengaja berupa tiga batang dengan tinggi berbeda -
   seperti diagram batang. Ini program Data Analyst & Business
   Intelligence, jadi maskotnya pun "bicara" hal yang sama.

   Warna, sudut, dan bayangan mengikuti CAMP Design System:
   biru #2D6F9F, navy #194567, oranye #F15424 sebagai aksen.
   ============================================================= */

/* =============================================================
   Tata letak dua kolom
   -------------------------------------------------------------
   .auth-page (dari base.css) awalnya cuma memusatkan SATU kartu di
   tengah layar penuh - dipakai bersama oleh halaman ini dan halaman
   "buat password". Supaya halaman "buat password" TIDAK ikut berubah,
   perilaku barunya ditulis di sini (login.css), bukan di base.css:
   berkas ini memang hanya dimuat di halaman masuk.

   Di bawah 1024px, kolom kiri (panel merek) disembunyikan total lewat
   display:none - bukan cuma disamarkan - sehingga hasilnya PERSIS
   tampilan lama: satu kartu di tengah, latar navy gelap. Mentee yang
   membuka lewat HP tidak kehilangan apa pun.
   ============================================================= */

.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: stretch;
  padding: 0;
}

@media (min-width: 1024px) {
  .auth-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Panel kanan: maskot + kartu (sudah ada sejak awal) ---------- */

/* Menggantikan peran .auth-page yang lama: memusatkan kartu, dan
   menaruh cahaya lembut di belakang. Radial gradient ini cocok untuk
   latar gelap (navy) - begitu jadi dua kolom di layar lebar, latarnya
   berubah terang, jadi gradasinya ikut dicabut (lihat media query
   di bawah), diganti warna abu-abu terang polos. */
.auth-panel {
  position: relative;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background-image:
    radial-gradient(58% 42% at 50% 20%, rgba(45, 111, 159, 0.30) 0%, transparent 70%),
    radial-gradient(46% 36% at 74% 80%, rgba(241, 84, 36, 0.13) 0%, transparent 70%);
  background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  .auth-panel {
    background-color: var(--camp-gray-50);
    background-image: none;
    padding: 40px;
  }
}

/* Pembungkus maskot + kartu login, supaya keduanya bergerak
   sebagai satu kesatuan saat halaman dipusatkan. */
.auth-wadah {
  width: 100%;
  max-width: 420px;
  position: relative;
}

/* ---------- Panel kiri: merek (baru) ---------- */

/* Disembunyikan bawaannya (mobile-first); baru muncul di layar lebar.
   Latar geladapnya sama dengan warna .auth-page di layar sempit, jadi
   kalau nanti breakpoint-nya diubah, transisinya tetap mulus. */
.auth-hero {
  display: none;
  position: relative;
  overflow: hidden;
  background: var(--camp-deep);
  padding: 56px;
  color: #fff;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .auth-hero { display: flex; }
}

.auth-hero-latar {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.auth-hero-jaring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

/* Cahaya lembut yang selalu ada, supaya tetap enak dilihat sebelum
   kursor bergerak sama sekali. */
.auth-hero-cahaya {
  position: absolute;
  inset: -120px -80px -60px;
  background:
    radial-gradient(circle at 22% 18%, rgba(45, 111, 159, 0.30) 0%, transparent 58%),
    radial-gradient(circle at 82% 80%, rgba(241, 84, 36, 0.14) 0%, transparent 52%);
}

/* Cahaya yang mengikuti kursor - posisinya diatur lewat --mx/--my oleh
   public/js/panel-latar.js. Sebelum mouse bergerak, keduanya diarahkan
   jauh di luar panel (lihat nilai bawaan di bawah) supaya tidak ada
   bulatan cahaya nyasar di pojok. mix-blend-mode: screen membuat garis
   jaring & titik yang kebetulan ada di bawahnya ikut "menyala" tanpa
   perlu mengubah warna aslinya satu per satu. */
.auth-hero-sorot {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle 280px at var(--mx, -400px) var(--my, -400px),
    rgba(88, 166, 214, 0.65) 0%,
    rgba(45, 111, 159, 0.20) 45%,
    transparent 72%
  );
}

.auth-hero-logo {
  position: relative;
  width: 150px;
  height: auto;
  display: block;
}

.auth-hero-teks {
  position: relative;
  max-width: 460px;
}

.auth-hero-teks h1 {
  margin: 0 0 20px;
  font-family: var(--font-judul);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
  color: #fff;
}

.auth-hero-teks h1 span { color: var(--camp-orange); }

.auth-hero-teks p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #AFC2CE;
}

.auth-hero-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #5E7B8E;
}

/* ---------- Panggung ---------- */

.maskot-panggung {
  position: relative;
  z-index: 1;
  height: 124px;
  display: flex;
  align-items: flex-end;
  justify-content: center;

  /* Ditarik ke bawah supaya kaki maskot tertutup kartu login,
     sehingga terlihat seperti mengintip dari baliknya. */
  margin-bottom: -20px;

  /* Di layar sempit, maskot dikecilkan memakai transform. Masalahnya
     transform hanya mengubah TAMPILAN, bukan ukuran yang diperhitungkan
     tata letak: kotaknya tetap dianggap selebar 420px, sehingga halaman
     bisa digeser ke samping padahal tidak ada yang terlihat di sana.
     'clip' pada sumbu mendatar menutup celah itu. Tidak ada yang
     terpotong, karena yang terlihat memang selalu lebih sempit.

     Sumbu tegaknya sengaja dibiarkan bebas - batang tertinggi memang
     menjulang melewati panggungnya. */
  overflow-x: clip;
  overflow-y: visible;

  pointer-events: none;
  user-select: none;
}

.maskot-layar {
  position: relative;
  width: 420px;
  height: 124px;
  transform-origin: bottom center;
}

/* ---------- Badan maskot ---------- */

.maskot {
  position: absolute;
  bottom: 0;

  /* Sudut atas saja: batangnya seolah tumbuh dari balik kartu. */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;

  transform-origin: bottom center;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

  /* Muncul perlahan dari bawah saat halaman dibuka. */
  animation: maskot-muncul 0.7s cubic-bezier(0.25, 1, 0.5, 1) backwards;
}

@keyframes maskot-muncul {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
}

/* Batang tertinggi, paling belakang. */
.maskot-biru {
  left: 132px;
  width: 122px;
  height: 152px;
  background: var(--camp-blue);
  z-index: 1;
  animation-delay: 0.05s;
}

/* Batang sedang, di kanan. */
.maskot-navy {
  left: 238px;
  width: 96px;
  height: 114px;
  background: var(--camp-navy);
  z-index: 2;
  animation-delay: 0.16s;
}

/* Batang terpendek, paling depan - satu-satunya yang terang,
   jadi dialah yang pertama ditangkap mata. */
.maskot-terang {
  left: 56px;
  width: 104px;
  height: 88px;
  background: var(--camp-blue-light);
  z-index: 3;
  animation-delay: 0.27s;
}

/* ---------- Wajah ---------- */

.maskot-wajah {
  position: absolute;
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.wajah-biru { left: 30px; top: 34px; gap: 26px; }
.wajah-navy { left: 21px; top: 30px; gap: 22px; }
.wajah-terang { left: 22px; top: 28px; gap: 24px; }

.maskot-mata {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  transition: height 0.11s ease-in-out;
}

.mata-biru { width: 18px; height: 18px; background: var(--camp-white); }
.mata-navy { width: 16px; height: 16px; background: var(--camp-blue-light); }
.mata-terang { width: 18px; height: 18px; background: var(--camp-white); }

.maskot-pupil {
  position: absolute;
  border-radius: 999px;
  transition: transform 0.08s ease-out;
}

.pupil-biru { width: 7px; height: 7px; background: var(--camp-deep); }
.pupil-navy { width: 6px; height: 6px; background: var(--camp-deep); }

/* Oranye adalah warna aksi di CAMP, jadi dipakai sekali saja -
   di maskot terdepan - supaya tetap terasa istimewa. */
.pupil-terang { width: 7px; height: 7px; background: var(--camp-orange); }

/* Mata terpejam: dipakai saat berkedip DAN saat password diketik.
   Warnanya sengaja berubah gelap supaya garis kelopaknya tetap terlihat
   di maskot yang badannya terang - kalau tetap putih, kedipannya hilang
   begitu saja dan seperti matanya lenyap. */
.maskot-mata.terpejam {
  height: 3px;
  background: var(--camp-deep);
}

.maskot-mata.terpejam .maskot-pupil { opacity: 0; }

/* ---------- Kartu login di atas maskot ---------- */

.auth-wadah .auth-card {
  position: relative;
  z-index: 2;
}

/* ---------- Layar kecil ---------- */

@media (max-width: 480px) {
  .maskot-panggung { height: 96px; }
  .maskot-layar { transform: scale(0.76); }
}

@media (max-width: 360px) {
  .maskot-panggung { height: 84px; }
  .maskot-layar { transform: scale(0.64); }
}

/* ---------- Layar pendek (laptop dengan tinggi jendela terbatas) ----------
   Sebelumnya halaman ini hanya menyesuaikan diri terhadap LEBAR layar.
   Di laptop yang jendela browsernya tidak terlalu tinggi - layar kecil,
   atau sudah dipotong oleh address bar/bookmarks bar/taskbar - halaman
   yang tingginya tetap bisa jadi lebih tinggi daripada layar itu sendiri,
   sehingga harus di-scroll untuk melihat bagian atas atau bawahnya.

   Diukur langsung: halaman ini butuh sekitar 700px tinggi layar.

   PENTING soal cara mengecilkannya: percobaan pertama hanya mengecilkan
   maskotnya lewat "transform: scale()", sementara KARTU login dibiarkan
   ukuran penuh. Hasilnya maskot & kartu jadi tidak sebanding - maskotnya
   mungil, kartunya tetap besar seperti biasa.

   Sekalian ketahuan transform:scale() memang TIDAK mengirit ruang: ia cuma
   mengubah TAMPILAN, bukan ukuran yang diperhitungkan tata letak (diuji
   langsung: offsetHeight elemen tetap sama sebelum/sesudah di-scale).
   Jadi sekarang KARTU-nya ikut mengecil lewat ukuran ASLI - padding, logo,
   ukuran huruf, jarak antar-bagian - supaya benar-benar hemat ruang DAN
   sebanding dengan maskotnya, bukan cuma tampak lebih kecil.

   Ditulis dengan ".auth-page" di depan supaya hanya berlaku di halaman ini
   - kelas-kelas seperti .auth-brand/.field/.auth-footer juga dipakai di
   halaman "buat password", yang tidak memuat login.css, jadi tidak ikut
   terpengaruh. */

@media (max-height: 760px) {
  .maskot-panggung { height: 90px; margin-bottom: -16px; }
  .maskot-layar { transform: scale(0.72); }

  .auth-page .auth-card { padding: 24px 20px; }
  .auth-page .auth-brand { margin-bottom: 16px; }
  .auth-page .auth-brand img { width: 140px; margin-bottom: 10px; }
  .auth-page .auth-brand h1 { font-size: 19px; }
  .auth-page .field { margin-bottom: 12px; }
  .auth-page .auth-footer { margin-top: 14px; padding-top: 12px; }
}

@media (max-height: 660px) {
  .auth-panel { padding-top: 12px; padding-bottom: 12px; }
  .maskot-panggung { height: 58px; margin-bottom: -10px; }
  .maskot-layar { transform: scale(0.48); }

  .auth-page .auth-card { padding: 18px 16px; }
  .auth-page .auth-brand { margin-bottom: 10px; }
  .auth-page .auth-brand img { width: 110px; margin-bottom: 6px; }
  .auth-page .auth-brand h1 { font-size: 17px; }
  .auth-page .muted { font-size: 12px; }
  .auth-page .field { margin-bottom: 8px; }
  .auth-page .field label { margin-bottom: 3px; }
  .auth-page .auth-footer { margin-top: 8px; padding-top: 8px; font-size: 11px; }
}

@media (max-height: 560px) {
  .auth-panel { padding-top: 8px; padding-bottom: 8px; }
  /* Pada titik ini ruang yang tersisa lebih baik dipakai penuh oleh
     formulirnya. Maskotnya tetap ada di HTML (kalau nanti layarnya
     diperbesar lagi tanpa memuat ulang halaman, ia muncul kembali). */
  .maskot-panggung { display: none; }

  .auth-page .auth-card { padding: 14px 14px; }
  .auth-page .auth-brand { margin-bottom: 6px; }
  .auth-page .auth-brand img { width: 90px; margin-bottom: 4px; }
  .auth-page .auth-brand h1 { font-size: 16px; }
  .auth-page .field { margin-bottom: 6px; }
  .auth-page .auth-footer { margin-top: 6px; padding-top: 6px; font-size: 10.5px; }
}

/* ---------- Menghormati pengaturan "kurangi animasi" ---------- */

/* Sebagian orang pusing atau mual melihat gerakan di layar, dan
   sistem operasinya menyediakan tombol untuk mematikannya. Di sini
   maskotnya tetap tampil, hanya diam - bukan dihilangkan. */
@media (prefers-reduced-motion: reduce) {
  .maskot,
  .maskot-wajah,
  .maskot-pupil,
  .maskot-mata {
    animation: none;
    transition: none;
  }
}