/* =====================================================================
   Gaya halaman autentikasi (login, ganti password, logout).
   Token warna mengikuti desain Matahari Holiday (teal). Tahap 3 akan
   memindahkan token ini ke app.css agar dipakai seluruh aplikasi.
   ===================================================================== */
:root {
  --brand-900: #083b3c;
  --brand-800: #0a4b4c;
  --brand-700: #0b5f5e;
  --brand-600: #0e7c7b;
  --brand-500: #13998f;
  --brand-400: #27b5a5;
  --brand-100: #d9f1ee;
  --accent:    #f59e42;
  --ink:       #25353a;
  --muted:     #5b6b70;
  --surface:   #ffffff;
  --page:      #eef4f4;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html, body { height: 100%; }
body.auth-body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--page);
}
body.auth-body-plain { height: auto; min-height: 100%; }

/* ---------------- tombol utama ---------------- */
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-800);
  --bs-btn-active-border-color: var(--brand-800);
  --bs-btn-disabled-bg: var(--brand-600);
  --bs-btn-disabled-border-color: var(--brand-600);
  font-weight: 600;
  border-radius: .75rem;
}
.form-control:focus, .btn:focus-visible {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 .22rem rgba(19, 153, 143, .25);
}
.input-group-text { background: #f4f8f8; color: var(--brand-600); }
.form-label { font-weight: 500; font-size: .875rem; }

/* ---------------- layout login: dua panel ---------------- */
.auth-split { display: flex; min-height: 100vh; }

.auth-hero {
  flex: 1 1 52%;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 3rem;
  color: #fff;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(39, 181, 165, .45), transparent 60%),
    linear-gradient(160deg, var(--brand-600) 0%, var(--brand-700) 45%, var(--brand-900) 100%);
}
.auth-brand { display: flex; align-items: center; gap: .85rem; }
.auth-brand img, .auth-logo { width: 84px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; }
.auth-brand-name { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.auth-brand-sub  { font-size: .85rem; opacity: .85; }
.auth-hero-text h2 { font-size: 2.1rem; font-weight: 700; line-height: 1.25; margin-bottom: .75rem; }
.auth-hero-text p  { max-width: 30rem; opacity: .88; margin: 0; }
.auth-hero-art { display: block; width: 100%; max-width: 680px; max-height: 42vh; align-self: center; margin: 1rem 0; object-fit: cover; border: 3px solid rgba(255, 255, 255, .8); border-radius: 1rem; box-shadow: 0 16px 36px rgba(0, 0, 0, .24); }
.auth-hero-foot {
  font-style: italic;
  font-size: 1.1rem;
  opacity: .9;
  border-top: 1px solid rgba(255, 255, 255, .25);
  padding-top: 1rem;
}

.auth-panel {
  flex: 1 1 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background: var(--page);
}

/* ---------------- kartu form ---------------- */
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: 1.25rem;
  padding: 2.25rem 2rem;
  box-shadow: 0 18px 45px rgba(11, 95, 94, .14);
}
.auth-card-wide { max-width: 480px; }
.auth-title { font-size: 1.55rem; font-weight: 700; margin-bottom: .25rem; }
.auth-subtitle { color: var(--muted); font-size: .92rem; margin-bottom: 1.5rem; }
.auth-foot { text-align: center; color: var(--muted); font-size: .78rem; margin: 1.5rem 0 0; }

/* halaman satu kolom (ganti password, logout) */
.auth-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(39, 181, 165, .22), transparent 60%),
    var(--page);
}

@media (max-width: 575.98px) {
  .auth-card { padding: 1.75rem 1.25rem; box-shadow: none; border: 1px solid #dfe9e9; }
}