/* ============================================================================
   Halaman masuk ai.harno.id — lapisan tampilan. Pasangan dari kustom.js.
   Dipasang 11 September 2026.

   Halaman masuk Paperclip SUDAH dua kolom 50/50; kolom kanannya berisi <pre>
   seni ASCII yang tampil sebagai coretan pucat. Di sini kolom itu hanya
   dijadikan latar polos, lalu kustom.js menempelkan panel hidup di atasnya
   sebagai saudara #root — di luar jangkauan React, jadi tidak pernah
   ditimpa render ulang.

   Tanpa JavaScript (atau bila gagal), yang tampil adalah gambar statis
   panel-auth.png — halaman tetap layak, hanya tidak hidup.

   Identitas: nila + emas (dokumen Empat Agen Harno). Bukan navy PKKMB.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Source+Sans+3:wght@300;400;600&family=JetBrains+Mono:wght@500&display=swap");

/* ---------- kolom kanan bawaan: jadi latar polos + gambar cadangan ---------- */
/* Pemilih sengaja sempit: <pre> anak langsung kolom terakhir di dalam
   pembungkus layar-penuh di bawah #root. Blok kode di dasbor tidak pernah
   berstruktur begini, jadi tidak ikut terkena. */
#root > div[class*="fixed"] > div:last-child {
  background: #241A54 url("/aiharno/panel-auth.png") center / cover no-repeat;
}
#root > div[class*="fixed"] > div:last-child > pre {
  visibility: hidden;
}

/* ---------- panel hidup (dipasang kustom.js) ---------- */
#aiharno-panel {
  position: fixed; top: 0; right: 0; width: 50%; height: 100%;
  overflow: hidden; z-index: 5; color: #fff;
  background: linear-gradient(158deg, #2E2270 0%, #241A54 48%, #1A1238 100%);
  font-family: "Source Sans 3", system-ui, sans-serif;
}
#aiharno-panel::before { /* cahaya emas kanan-atas, kedalaman tanpa elemen tambahan */
  content: ""; position: absolute; top: -18%; right: -20%; width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(184,134,11,.30) 0%, rgba(184,134,11,0) 62%);
  pointer-events: none;
}
#aiharno-panel .ah-canvas { position: absolute; inset: 0; pointer-events: none; }

#aiharno-panel .ah-isi {
  position: absolute; left: 9%; right: 9%; top: 30%;
}
#aiharno-panel .ah-eyebrow {
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500;
  letter-spacing: .26em; color: #E8C46A; margin-bottom: 20px;
}
#aiharno-panel .ah-judul {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; margin: 0;
  font-size: clamp(38px, 3.6vw, 52px); line-height: 1.03; letter-spacing: -.02em;
}
#aiharno-panel .ah-garis { width: 66px; height: 4px; background: #B8860B; margin: 24px 0 20px; }
#aiharno-panel .ah-sub {
  margin: 0; font-size: 17px; line-height: 1.5; color: #CFC6EC; font-weight: 300; max-width: 30rem;
}

#aiharno-panel .ah-stasiun { position: absolute; left: 9%; right: 9%; bottom: 8%; }
#aiharno-panel .ah-label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .2em;
  color: #8E82BE; margin-bottom: 12px;
}
#aiharno-panel .ah-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
#aiharno-panel .ah-item {
  display: grid; grid-template-columns: 10px 96px 1fr auto; gap: 12px; align-items: center;
  padding: 9px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  background: rgba(255,255,255,.035); font-size: 13px;
}
#aiharno-panel .ah-titik { width: 8px; height: 8px; border-radius: 50%; background: #E8C46A; }
#aiharno-panel .ah-bekerja .ah-titik { background: #6FC79A; animation: ah-denyut 1.6s ease-in-out infinite; }
#aiharno-panel .ah-tidur .ah-titik { background: #6F639E; }
#aiharno-panel .ah-tidur { opacity: .62; }
#aiharno-panel .ah-nama { font-family: "JetBrains Mono", monospace; font-weight: 500; letter-spacing: .08em; color: #EFEAFF; }
#aiharno-panel .ah-tidur .ah-nama { color: #CFC6EC; }
#aiharno-panel .ah-peran { color: #B8B0DA; font-weight: 300; }
#aiharno-panel .ah-waktu { color: #8E82BE; font-family: "JetBrains Mono", monospace; font-size: 11px; white-space: nowrap; }
#aiharno-panel .ah-kosong { grid-template-columns: 1fr; color: #8E82BE; justify-items: center; }
#aiharno-panel .ah-kaki {
  display: flex; justify-content: space-between; margin-top: 16px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .12em; color: #6F639E;
}
@keyframes ah-denyut { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.35); opacity: .6 } }
@media (prefers-reduced-motion: reduce) { #aiharno-panel .ah-bekerja .ah-titik { animation: none; } }
@media (max-width: 767px) { #aiharno-panel { display: none; } }

/* ---------- kolom kiri: sederhana, hanya diberi napas ---------- */
#root form { margin-top: 1.65rem; }
#root input[type="email"], #root input[type="password"], #root input[type="text"] {
  border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease;
}
#root input[type="email"]:focus, #root input[type="password"]:focus, #root input[type="text"]:focus {
  border-color: #4A3A8C; box-shadow: 0 0 0 3px rgba(74,58,140,.16); outline: none;
}
/* Tombol utama nila — abu-abu terbaca seperti nonaktif. */
#root form button[type="submit"] {
  background: linear-gradient(160deg, #2E2270, #241A54) !important; color: #fff !important;
  border-radius: 10px; font-weight: 600; letter-spacing: .01em;
  transition: filter .15s ease, transform .05s ease;
}
#root form button[type="submit"]:hover { filter: brightness(1.13); }
#root form button[type="submit"]:active { transform: translateY(1px); }

/* Tombol tampilkan/sembunyikan sandi (disisipkan kustom.js). */
#root .ah-wrap-pw { position: relative; }
#root .ah-wrap-pw input { padding-right: 6.4rem; }
#root .ah-toggle {
  position: absolute; right: 10px; bottom: 9px; border: 0; background: transparent;
  font: 600 12px/1 "Source Sans 3", system-ui, sans-serif; color: #4A3A8C; cursor: pointer;
  padding: 4px 6px; border-radius: 6px;
}
#root .ah-toggle:hover { background: rgba(74,58,140,.08); }
#root .ah-toggle:focus-visible { outline: 2px solid #B8860B; outline-offset: 2px; }

/* Kotak centang ingat e-mail. */
#root .ah-ingat {
  display: flex; align-items: center; gap: 8px; margin: .55rem 0 .15rem;
  font-size: 13px; color: #5c5768; cursor: pointer; user-select: none;
}
#root .ah-cb { width: 15px; height: 15px; accent-color: #241A54; margin: 0; }