/* ==================================================================
   BEBAS MENGAJAR — UI Refresh v5
   Tujuan: tampilan lebih ringkas, tidak terkesan rumit, dan punya
   micro-interaction yang menyenangkan — TANPA mengubah struktur HTML
   halaman-halaman lama (semua di sini bersifat aditif / progressive
   enhancement). Dimuat PALING AKHIR di index.php supaya bisa
   menimpa main.css bila perlu.
   ================================================================== */

/* ── 1. Ikon "generator otomatis" — pengganti emoji robot 🤖 ─────────
   Dipakai di semua loader generator (soal, modul, konten, surat, dst).
   Percikan berkedip lembut; berhenti total kalau user minta reduced motion. */
.gp-ai-spark{
  display:inline-block;
  color:var(--primary,#0EA5E9);
  vertical-align:-2px;
  animation:gpSparkPulse 1.6s ease-in-out infinite;
}
@keyframes gpSparkPulse{
  0%,100%{ transform:scale(1) rotate(0deg);   opacity:.85 }
  35%    { transform:scale(1.22) rotate(12deg); opacity:1 }
  70%    { transform:scale(.96) rotate(-8deg);  opacity:.9 }
}

/* ── 2. FAB Asisten — ikon vektor, bukan gambar PNG bertulisan ──────
   PNG lama (52 KB, bertuliskan "CHAT AI GURU") tidak terbaca di
   ukuran 56px. Di index.php gambar itu diganti <i class="ti
   ti-message-chatbot">; kelas di bawah yang mengatur tampilannya. */
.ai-assistant-fab{ position:relative; isolation:isolate }
.ai-assistant-fab .ai-fab-icon{
  font-size:26px; line-height:1; color:#fff;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.ai-assistant-fab::before{
  content:''; position:absolute; inset:-6px; border-radius:inherit;
  border:2px solid var(--primary,#0EA5E9); opacity:0; z-index:-1;
  animation:gpFabRing 2.8s ease-out infinite;
}
@keyframes gpFabRing{
  0%  { transform:scale(.85); opacity:.55 }
  70% { transform:scale(1.25); opacity:0 }
  100%{ transform:scale(1.25); opacity:0 }
}

/* ── 3. Sentuhan halus pada kartu & tombol di seluruh aplikasi ─────
   Transisi 150–250ms sesuai pedoman (bukan 0ms yang terasa kasar,
   bukan >400ms yang terasa lambat). */
.card, .stat-card, .feature-card{
  transition:transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s ease;
}
.card:hover, .stat-card:hover{ transform:translateY(-3px) }

.btn{ transition:transform .18s cubic-bezier(.34,1.4,.64,1), box-shadow .18s, background .18s, opacity .18s }
.btn:active:not(:disabled){ transform:scale(.97) }
.btn:disabled{ cursor:not-allowed; opacity:.6 }

/* Semua elemen yang bisa diklik wajib punya cursor pointer (checklist a11y) */
button:not(:disabled), [role="button"], .tab-btn, .auth-link, summary{ cursor:pointer }

/* ── 4. Focus ring yang terlihat — syarat navigasi keyboard ────────
   main.css sempat menghapus outline di beberapa tempat; ini
   mengembalikannya dengan gaya yang tetap rapi. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--primary,#0EA5E9);
  outline-offset:2px;
  border-radius:6px;
}

/* ── 5. Target sentuh minimum 44×44 px di layar kecil ──────────────── */
@media (max-width:768px){
  .btn, .tab-btn, .icon-btn{ min-height:44px }
}

/* ── 6. Hormati prefers-reduced-motion di SELURUH aplikasi ──────────
   Ini yang membuat aplikasi tetap nyaman untuk pengguna dengan
   sensitivitas gerak / vertigo. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── 7. Panel kiri halaman auth — bahasa visual seragam ─────────────
   Halaman login sudah punya versi kaya (aurora + chip) yang di-scope ke
   .gp-auth. Blok di bawah memberi register / lupa-password /
   reset-password / verifikasi-email tampilan sekeluarga TANPA menyentuh
   HTML masing-masing: cukup pseudo-element pada .auth-left. Aturan
   di-skip untuk .gp-auth supaya tidak bertabrakan dengan login. */
.auth-wrap:not(.gp-auth) .auth-left{ position:relative; overflow:hidden; isolation:isolate }

/* ::before di components.css berisi pola titik SVG — diganti garis buku
   tulis halus, motif yang sama dengan panel login. */
.auth-wrap:not(.gp-auth) .auth-left::before{
  background:none;
  background-image:repeating-linear-gradient(180deg,transparent 0 33px,rgba(255,255,255,.5) 33px 34px);
  opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
/* Dua bola cahaya yang mengambang perlahan di latar */
.auth-wrap:not(.gp-auth) .auth-left::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:340px; height:340px; border-radius:50%; top:-80px; left:-70px;
  background:var(--primary,#0EA5E9); filter:blur(70px); opacity:.5;
  animation:gpAuthOrb 16s ease-in-out infinite;
}
@keyframes gpAuthOrb{
  0%,100%{ transform:translate(0,0) scale(1) }
  33%    { transform:translate(30px,-32px) scale(1.1) }
  66%    { transform:translate(-22px,24px) scale(.94) }
}
/* Isi panel harus berada di atas kedua lapisan latar tadi */
.auth-wrap:not(.gp-auth) .auth-left > *{ position:relative; z-index:2 }

/* ── 8. Polish formulir yang berlaku di SEMUA halaman auth ─────────── */
.auth-wrap .form-input{ transition:border-color .18s, box-shadow .18s }
.auth-wrap .form-input:focus{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary,#0EA5E9) 16%, transparent);
}
.auth-wrap .auth-card{ animation:gpAuthCardIn .5s cubic-bezier(.22,1,.36,1) both }
@keyframes gpAuthCardIn{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }

/* Kilau menyapu tombol utama — micro-interaction yang sama dengan login */
.auth-wrap .btn-primary, .auth-wrap .btn-gradient{ position:relative; overflow:hidden }
.auth-wrap .btn-primary::after, .auth-wrap .btn-gradient::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transition:left .55s ease; pointer-events:none;
}
.auth-wrap .btn-primary:hover:not(:disabled)::after,
.auth-wrap .btn-gradient:hover:not(:disabled)::after{ left:130% }