/* Halaman login NabaTOUR — mengikuti desain "Halaman Login NABA":
   satu layar oranye, form di kiri, foto kubah Masjid Nabawi di kanan bawah,
   motif geometris islami samar yang bergeser pelan di latar. */
:root{
  --orange-deep:#e35a00;
  --orange:#ff7000;
  --orange-light:#ff8f2b;
  --orange-dark:#d14e00;
  --gold:#ffd166;
  --ink-input:#3b2a1d;
  --placeholder:#c9a184;
  --radius:16px;
  --font-head:'Poppins',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  /* Bintang segi delapan, motif latar yang sama dengan videonya. */
  --star-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='3.4'%3E%3Crect x='33' y='33' width='84' height='84'/%3E%3Crect x='33' y='33' width='84' height='84' transform='rotate(45 75 75)'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);color:#fff;
  background:radial-gradient(125% 120% at 18% 8%,#ff8f2b 0%,var(--orange) 46%,#f05f00 100%) fixed;
}
img{max-width:100%}
a{color:var(--gold);font-weight:600;text-decoration:none}
a:hover{text-decoration:underline}

.login{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:center}

/* Motif latar + foto kubah: keduanya hiasan, jadi tidak pernah menutupi form. */
.login__pattern{position:absolute;inset:-60px;opacity:.4;background-image:var(--star-white);background-size:150px 150px;animation:drift 90s linear infinite;pointer-events:none}
.login__dome{
  position:absolute;right:0;bottom:0;width:min(53%,1000px);height:calc(100% - 150px);
  /* Kubah potongan (latar tembus pandang), jadi motif grid di belakangnya ikut terlihat
     utuh -- tidak perlu lagi dilarutkan tepinya seperti waktu memakai foto berlatar. */
  background:url('kubah-nabawi.webp') right bottom/contain no-repeat;
  /* Cahaya emas mengelilingi siluet kubah (dua lapis: tipis rapat + lebar lembut).
     drop-shadow mengikuti bentuk gambarnya, bukan kotak elemennya. */
  filter:drop-shadow(0 0 16px rgba(255,209,102,.65)) drop-shadow(0 0 46px rgba(246,196,83,.4));
  pointer-events:none;
}
@keyframes drift{from{background-position:0 0}to{background-position:300px 300px}}
@media (prefers-reduced-motion:reduce){.login__pattern{animation:none}}

/* Identitas kantor di kanan atas, seperti di desainnya. */
.login__brand{position:absolute;top:44px;right:56px;text-align:right;z-index:2;text-shadow:0 2px 12px rgba(120,45,0,.35)}
.login__brand strong{display:block;font:800 30px/1.1 var(--font-head);letter-spacing:.2px}
.login__brand span{display:block;margin-top:6px;font:500 14px/1.3 var(--font-body);color:rgba(255,255,255,.92)}

/* min-width:0 supaya kotak isian ikut menyusut di layar sempit, bukan meluber ke kanan. */
.login__main{position:relative;z-index:2;flex:1 1 auto;width:100%;min-width:0;max-width:640px;padding:48px 64px}

.logo{display:flex;align-items:center;margin-bottom:54px}
.logo img{width:230px;height:auto;filter:drop-shadow(0 8px 18px rgba(120,45,0,.35))}

.login__title{margin:0;font:800 56px/1.05 var(--font-head);letter-spacing:-1.4px;text-shadow:0 3px 18px rgba(120,45,0,.3)}
.login__lead{margin:12px 0 34px;font:500 19px/1.5 var(--font-body);color:rgba(255,255,255,.95)}

.form{display:flex;flex-direction:column;gap:18px}
.alert{margin:0;padding:13px 18px;border-radius:12px;background:rgba(255,255,255,.95);color:#b0332a;border-left:5px solid #b0332a;font:600 13.5px/1.5 var(--font-body)}

.field{display:flex;flex-direction:column;gap:10px}
.field label{font:700 15px/1 var(--font-body);letter-spacing:.2px}
/* Kotak isian bermodel pil: sudut bulat penuh, sisi kirinya diberi ruang lebih
   supaya teks tidak menempel ke lengkungan. */
.field__wrap{display:flex;align-items:center;gap:8px;height:62px;padding:0 10px 0 28px;border-radius:999px;background:#fff;box-shadow:0 14px 28px -18px rgba(90,35,0,.6)}
.field__wrap:focus-within{outline:3px solid rgba(255,255,255,.75);outline-offset:2px}
.field__wrap input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;padding:0;font:500 16.5px var(--font-body);color:var(--ink-input)}
/* Isian otomatis (autofill) browser mengecat kotak input dengan warnanya sendiri --
   bentuknya persegi dan menembus lengkungan pil. Dua pengaman: isian dipaksa berlatar
   putih, dan apa pun yang tergambar di dalam pil ikut dipangkas mengikuti lengkungannya. */
.field__wrap{overflow:hidden}
.field__wrap input:-webkit-autofill,
.field__wrap input:-webkit-autofill:hover,
.field__wrap input:-webkit-autofill:focus,
.field__wrap input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--ink-input);
  -webkit-box-shadow:0 0 0 100px #fff inset;
  box-shadow:0 0 0 100px #fff inset;
  caret-color:var(--ink-input);
  /* Menunda animasi warna bawaan autofill supaya latar putihnya tidak tertimpa lagi. */
  transition:background-color 100000s ease-in-out 0s;
}
.field__wrap input::placeholder{color:var(--placeholder);font-style:italic}

/* Tombol LIHAT ikut bermodel pil supaya serasi di dalam kotak isian yang bulat. */
.toggle{border:0;background:#ffedde;border-radius:999px;cursor:pointer;font:700 11px var(--font-body);letter-spacing:.06em;color:#c4560a;padding:11px 16px}
.toggle:hover{background:#ffdcc0}
.toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}

.form__hint{margin:-4px 0 0;font:600 15px/1 var(--font-body);color:var(--gold)}

.submit{
  margin-top:16px;height:66px;border:0;border-radius:var(--radius);cursor:pointer;color:#fff;
  font:700 19px/1 var(--font-head);letter-spacing:.14em;
  background:linear-gradient(90deg,#f4630b 0%,#ff9d45 48%,#f26a0c 100%);
  box-shadow:0 18px 34px -16px rgba(120,45,0,.85),inset 0 0 0 1px rgba(255,255,255,.35);
  transition:filter .15s,transform .15s;
}
.submit:hover{filter:brightness(1.06);transform:translateY(-1px)}
.submit:focus-visible{outline:3px solid #fff;outline-offset:3px}

.login__foot{margin:26px 0 0;text-align:center}
.login__tagline{margin:0;font:600 15px/1.4 var(--font-body)}
.login__group{margin:16px 0 0;font:800 italic 17px/1.2 var(--font-head);letter-spacing:.2px}
.login__legal{margin:20px 0 0;font:500 12px/1.4 var(--font-body);color:rgba(255,255,255,.8);text-align:center}

/* ---------- Responsif ---------- */
@media (max-width:1180px){
  .login__main{max-width:560px;padding:44px 48px}
  .login__title{font-size:46px}
  .login__brand{top:32px;right:36px}
  .login__brand strong{font-size:24px}
}
@media (max-width:900px){
  .login{align-items:flex-start}
  .login__main{max-width:none;margin:0 auto;padding:118px 26px 44px}
  /* Kubahnya turun jadi latar bawah supaya form tetap terbaca di layar sempit. */
  /* Tanpa opacity: kalau kubahnya dibuat tembus, motif grid di belakangnya ikut kelihatan
     menembus kubah seolah-olah ada di depannya. */
  .login__dome{width:100%;height:46%;background-position:center bottom}
  .login__brand{top:26px;right:0;left:0;text-align:center}
  .login__brand strong{font-size:21px}
  .login__brand span{font-size:12px}
  .logo{justify-content:center;margin-bottom:26px}
  .logo img{width:180px}
  .login__title{font-size:38px;text-align:center}
  .login__lead{font-size:16px;text-align:center;margin-bottom:26px}
}
@media (max-width:480px){
  .login__title{font-size:31px}
  .login__lead{font-size:15px}
  .field__wrap{height:56px;padding-left:22px}
  .submit{height:58px;font-size:17px}
}