/* ==========================================================================
   Halaman autentikasi SI-TPDOC (login)
   Tata letak dan komponen form memakai utilitas Tailwind/daisyUI di
   templates/accounts/login.html. Berkas ini hanya menyimpan dua hal yang tidak
   efektif diekspresikan sebagai utilitas:
     1. lockup merek dengan tiga varian (corner, full, compact) beserta bayangan
        dan state hover/focus-nya — sebagai komponen CSS ia jauh lebih terbaca
        daripada belasan utilitas arbitrer yang diulang di tiga tempat;
     2. tekstur panel form: gradien sudut, garis kontur bermasker, dan butir
        noise SVG (pseudo-element tidak dapat di-style utilitas).
   ========================================================================== */

/* ---------- Merek di panel kiri (latar navy) ---------- */

/* Alas putih diperlukan karena kedua tanda icon-only membawa warna brand. */
.auth-brand {
  display: inline-flex;
  align-items: center;
  border-radius: 14px;
  background: #fff;
  padding: 0.5rem 0.85rem;
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.65);
  transition: box-shadow 200ms ease;
}

.auth-brand:focus-visible {
  outline: 3px solid rgba(246, 143, 30, 0.7);
  outline-offset: 4px;
}

.auth-brand:hover {
  box-shadow: 0 22px 46px -24px rgba(0, 0, 0, 0.7);
}

/* Lockup pojok panel navy: tanpa alas putih, garis pemisah putih supaya
   menyatu dengan latar gelap. */
.auth-brand--corner {
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.auth-brand--corner:hover {
  box-shadow: none;
}

.auth-brand--corner .auth-logos__divider {
  background-color: #ffffff;
}

.auth-brand--corner .auth-logos {
  gap: 1.15rem;
}

/* Lockup: Esindo mark | garis | TP-Doc mark */
.auth-logos {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.auth-logos__mark {
  display: block;
  height: 1.55rem;
  width: auto;
  max-width: none;
}

/* Garis pemisah tegak: tebal, memanjang melewati tinggi tanda, hitam pekat. */
.auth-logos__divider {
  display: block;
  flex: none;
  width: 2.5px;
  height: 2.15rem;
  border-radius: 9999px;
  background-color: #000;
}

/* Logo penuh ber-wordmark pada kolom teks panel kiri. */
.auth-brand--full {
  padding: 0.75rem 1.25rem;
}

.auth-brand__full {
  display: block;
  height: 3rem;
  width: auto;
}

/* Versi ringkas untuk header mobile di panel kanan. */
.auth-brand--compact {
  border-radius: 12px;
  box-shadow: 0 10px 24px -18px rgba(26, 22, 19, 0.5);
}

.auth-brand--compact .auth-logos__mark {
  height: 1.5rem;
}

.auth-brand--compact .auth-logos {
  gap: 0.65rem;
}

.auth-brand--compact .auth-logos__divider {
  width: 2px;
  height: 1.6rem;
}

/* ---------- Tekstur panel form (kanan) ---------- */

/* Dasar putih bersih; warna hangat hanya menyapu sudut-sudut supaya kartu form
   tetap terbaca dan panel tidak terlihat monoton. */
.auth-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image:
    radial-gradient(
      78% 68% at 100% 0%,
      rgba(246, 143, 30, 0.28) 0%,
      rgba(246, 143, 30, 0) 70%
    ),
    radial-gradient(
      70% 62% at 0% 100%,
      rgba(246, 143, 30, 0.2) 0%,
      rgba(246, 143, 30, 0) 68%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Garis kontur konsentris berpusat di sudut kiri bawah, merambat sampai sudut
   kanan atas sambil memudar bertahap. */
.auth-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-radial-gradient(
    circle at 0% 100%,
    rgba(246, 143, 30, 0.08) 0,
    rgba(246, 143, 30, 0.08) 1px,
    rgba(246, 143, 30, 0) 1px,
    rgba(246, 143, 30, 0) 30px
  );
  -webkit-mask-image: radial-gradient(
    circle at 0% 100%,
    #000 0%,
    rgba(0, 0, 0, 0.72) 62%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle at 0% 100%,
    #000 0%,
    rgba(0, 0, 0, 0.72) 62%,
    transparent 100%
  );
}

/* Butir halus di atas mesh: memberi kesan permukaan kertas tanpa pola yang
   terlihat, sekaligus mencegah gradien tampak bergaris (banding). */
.auth-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Kartu dan teks panel kanan harus berada di atas lapisan tekstur. */
.auth-panel > * {
  position: relative;
  z-index: 1;
}