/* ============================================================
   Tema halaman login Willertindo — "Split Hijau"
   Dipakai bersama oleh /login.php dan /manage/login.php.

   Susunan: panel identitas berwarna merek di kiri, formulir di kanan.
   Di layar <=860px panel menjadi latar penuh dan formulir menjadi kartu putih.

   Alamat gambar di berkas ini relatif terhadap letak CSS ini
   (assets/css/), jadi logo ditulis ../img/logo.png.
   ============================================================ */

:root{
  --hijau:#60B000;
  --hijau-terang:#8FD634;
  --hijau-gelap:#3E7A0A;
  --hijau-tua:#2C5A06;
  --tinta:#14180F;
  --redup:#6C7378;
  --garis:#E3E8DD;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--tinta); background:#fff;
  -webkit-font-smoothing:antialiased;
}
.layar{ display:grid; grid-template-columns:46% 54%; min-height:100vh }

/* ---------- panel identitas ---------- */
.merek{
  position:relative; overflow:hidden; color:#fff;
  display:grid; grid-template-rows:1fr auto 1fr;   /* judul tepat di tengah panel */
  padding:46px 52px;
  background:
    radial-gradient(760px 620px at 22% 10%, #7FCB18 0%, transparent 60%),
    radial-gradient(700px 620px at 88% 92%, #2C5A06 0%, transparent 64%),
    linear-gradient(150deg, #63B412 0%, #478C0B 54%, #35700A 100%);
}
.merek::before{
  content:""; position:absolute; inset:0; opacity:.55;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.08) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 26px);
}
.merek::after{
  content:""; position:absolute; right:-16%; bottom:-18%;
  width:min(74vh,74%); height:min(74vh,74%);
  background:url("../img/logo.png") no-repeat center / contain;
  opacity:.11;
  animation:napas 13s ease-in-out infinite;
}
@keyframes napas{
  0%,100%{ transform:scale(1)    rotate(0deg) }
  50%    { transform:scale(1.06) rotate(2.5deg) }
}
.merek > *{ position:relative; z-index:1 }

.logo-baris{ display:flex; align-items:center; gap:14px; align-self:start }
.logo-baris img{
  width:46px; height:46px; display:block;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.28));
}
.logo-baris b{ font-size:15px; font-weight:700; letter-spacing:3.4px }

.merek h1{
  margin:0 0 14px; font-size:38px; line-height:1.16; font-weight:700; letter-spacing:-.6px;
  text-shadow:0 2px 14px rgba(20,50,5,.22);
}
.merek h1 em{ font-style:normal; color:#EAFBD2 }
.merek p{ margin:0; max-width:30ch; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.82) }

.cap{ align-self:end; display:flex; gap:22px; font-size:11px; letter-spacing:1.5px; color:rgba(255,255,255,.72) }
.cap span{ display:flex; align-items:center; gap:7px }
.cap i{
  width:6px; height:6px; border-radius:50%; background:#EAFBD2; font-style:normal;
  box-shadow:0 0 8px rgba(234,251,210,.7);
}

/* ---------- formulir ---------- */
.sisi{ display:flex; align-items:center; justify-content:center; padding:48px 40px }
.sisi form{ width:100%; max-width:368px }

.kepala{ margin-bottom:34px }
.kepala h2{
  margin:0; padding-bottom:14px;
  font-size:17px; font-weight:700; letter-spacing:1.9px; line-height:1.35;
  border-bottom:2px solid var(--hijau);
  display:inline-block;
}

.sisi label{
  display:block; margin-bottom:7px;
  font-size:11px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--redup);
}
.isian{ margin-bottom:19px }
.sisi input[type=text],.sisi input[type=password]{
  width:100%; padding:13px 15px; font-size:15px; color:var(--tinta);
  background:#F8FAF5; border:1.5px solid var(--garis); border-radius:10px; outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.sisi input::placeholder{ color:#AEB4B0 }
.sisi input:focus{ border-color:var(--hijau); background:#fff; box-shadow:0 0 0 4px rgba(96,176,0,.14) }

.sandi{ position:relative }
.sandi input{ padding-right:46px }
.sandi button{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0;
  border:0; border-radius:7px; background:transparent; cursor:pointer;
  color:#98A096; transition:color .15s ease, background .15s ease;
}
.sandi button:hover{ color:var(--hijau-gelap); background:#EFF5E7 }
.sandi button svg{ width:19px; height:19px; fill:currentColor; display:block }

.kirim{
  width:100%; margin-top:6px; padding:14px;
  font-size:15px; font-weight:650; letter-spacing:.2px; color:#fff;
  background:var(--hijau-tua); border:0; border-radius:10px; cursor:pointer;
  transition:background .16s ease, transform .1s ease;
}
.kirim:hover{ background:var(--hijau-gelap) }
.kirim:active{ transform:translateY(1px) }
.kirim:disabled{ background:#8C9A85; cursor:default }

.galat{
  margin:0 0 20px; padding:12px 14px; border-radius:10px;
  font-size:13.5px; line-height:1.5;
  color:#8C1D18; background:#FDECEA; border:1px solid #F5C6C2;
}
.turnstile-wrap{ margin:2px 0 16px; display:flex; justify-content:center }
.kaki{ margin:26px 0 0; font-size:11.5px; color:#9AA0A6; text-align:center }

/* ---------- ponsel: panel jadi latar, formulir jadi kartu ---------- */
@media (max-width:860px){
  .layar{ display:block; min-height:100vh }
  .merek{
    position:fixed; inset:0; z-index:0;
    padding:0; display:block;
  }
  .merek .logo-baris,.merek h1,.merek p,.merek .cap{ display:none }

  .sisi{
    position:relative; z-index:1;
    min-height:100vh; padding:30px 22px;
    align-items:center;
  }
  .sisi form{
    background:#fff; border-radius:20px; padding:32px 26px 24px;
    box-shadow:0 2px 4px rgba(20,40,10,.10), 0 24px 56px rgba(20,50,10,.30);
  }
  .kepala{ text-align:center; margin-bottom:28px }
  .kepala::before{
    content:""; display:block; width:58px; height:58px; margin:0 auto 16px;
    background:url("../img/logo.png") no-repeat center / contain;
  }
  .kepala h2{ font-size:14.5px; letter-spacing:1.6px }
}
@media (prefers-reduced-motion:reduce){ .merek::after{ animation:none } }