/* ===== Login: glass elegan ===== */
.lg-form{ display:flex; flex-direction:column; gap:18px; margin-top:8px; }

@keyframes lgUp{ from{opacity:0; transform:translateY(18px) scale(.98);} to{opacity:1; transform:none;} }
.lg-form > *{ animation:lgUp .6s cubic-bezier(.2,.8,.2,1) both; }
.lg-form > *:nth-child(2){ animation-delay:.05s; }
.lg-form > *:nth-child(3){ animation-delay:.14s; }
.lg-form > *:nth-child(4){ animation-delay:.22s; }
.lg-form > *:nth-child(5){ animation-delay:.30s; }

/* Kotak isian */
.lg-field{
  position:relative; height:68px; border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,251,248,.94));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(11,61,42,.09),
    0 14px 30px -10px rgba(11,61,42,.22);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.lg-field:hover{ transform:translateY(-1px); }
.lg-field:focus-within{
  transform:translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 2px rgba(20,168,116,.55),
    0 0 0 7px rgba(20,168,116,.12),
    0 22px 38px -12px rgba(20,168,116,.40);
}
/* garis cahaya yang menyapu di bawah kotak */
.lg-field::after{
  content:""; position:absolute; left:28px; right:28px; bottom:7px; height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,transparent,#19b87f,#7be3b8,#19b87f,transparent);
  transform:scaleX(0); opacity:0;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.lg-field:focus-within::after{ transform:scaleX(1); opacity:1; }

.lg-field input{
  position:absolute; inset:0; width:100%; height:100%;
  padding:26px 60px 8px 80px;
  background:transparent; border:0; outline:0; border-radius:24px;
  color:#0c2118; font:600 1.02rem/1 'Inter',sans-serif; letter-spacing:.1px;
}
.lg-field input::placeholder{ color:transparent; }

/* label melayang */
.lg-field label{
  position:absolute; left:80px; top:50%; transform:translateY(-50%);
  margin:0; color:#6f857b; font:500 1rem/1 'Inter',sans-serif;
  pointer-events:none; transition:all .22s cubic-bezier(.2,.8,.2,1);
}
.lg-field input:focus + label,
.lg-field input:not(:placeholder-shown) + label{
  top:16px; transform:none;
  font-size:.68rem; font-weight:800; letter-spacing:1.1px;
  text-transform:uppercase; color:#0f9d6c;
}

/* ikon bulat */
.lg-chip{
  position:absolute; left:12px; top:12px; width:44px; height:44px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#eafaf3,#c6ecd9);
  color:#0b7a53; font-size:1.2rem; z-index:2;
  box-shadow:inset 0 1px 0 #fff, 0 4px 10px rgba(11,107,75,.15);
  transition:all .35s cubic-bezier(.2,.8,.2,1);
}
.lg-field:focus-within .lg-chip{
  background:linear-gradient(145deg,#22c88c,#0b6b4b); color:#fff;
  transform:scale(1.08) rotate(-8deg);
  box-shadow:0 8px 18px rgba(20,168,116,.5);
}

/* tombol mata */
.lg-eye{
  position:absolute; right:10px; top:12px; width:44px; height:44px;
  border:0; border-radius:50%; background:transparent; color:#5f766b;
  font-size:1.2rem; display:flex; align-items:center; justify-content:center;
  z-index:3; transition:background .2s, color .2s, transform .2s;
}
.lg-eye:hover{ background:rgba(20,168,116,.14); color:#0b6b4b; }
.lg-eye:active{ transform:scale(.9); }

/* peringatan caps lock */
.lg-hint{
  display:flex; align-items:center; gap:8px; margin:-6px 6px 0;
  padding:8px 14px; border-radius:14px; font-size:.82rem; font-weight:600;
  color:#8a5a00; background:#fff6e0; border:1px solid #ffe2a3;
}
.lg-hint[hidden]{ display:none; }

/* tombol Masuk */
.lg-btn{
  position:relative; overflow:hidden; height:68px; margin-top:8px;
  border:0; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0 74px 0 28px; color:#fff;
  font:800 1.12rem/1 'Plus Jakarta Sans','Inter',sans-serif; letter-spacing:.4px;
  background:linear-gradient(115deg,#0b6b4b,#14a874,#2fd09a,#14a874,#0b6b4b);
  background-size:250% 100%; background-position:0% 50%;
  box-shadow:
    0 22px 40px -12px rgba(11,107,75,.60),
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 2px 0 rgba(255,255,255,.35) inset;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:background-position .7s ease, transform .25s, box-shadow .25s;
}
.lg-btn::before{ /* kilau berkala */
  content:""; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-22deg); animation:lgShine 4.2s ease-in-out 1.2s infinite;
}
@keyframes lgShine{ 0%{left:-70%;} 38%,100%{left:140%;} }
.lg-btn:hover{
  background-position:100% 50%; transform:translateY(-3px);
  box-shadow:0 28px 46px -12px rgba(11,107,75,.68), 0 0 0 1px rgba(255,255,255,.2) inset, 0 2px 0 rgba(255,255,255,.4) inset;
}
.lg-btn:active{ transform:translateY(0) scale(.98); }
.lg-btn > i{ /* lingkaran panah */
  position:absolute; right:10px; top:10px; width:48px; height:48px;
  border-radius:50%; background:#fff; color:#0b6b4b; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.lg-btn:hover > i{ transform:translateX(-4px) rotate(-45deg); }

/* status memuat */
.lg-btn.is-loading{ pointer-events:none; filter:saturate(.85); }
.lg-btn.is-loading > i{ font-size:0; }
.lg-btn.is-loading > i::before{
  content:""; width:22px; height:22px; border-radius:50%;
  border:3px solid rgba(11,107,75,.2); border-top-color:#0b6b4b;
  animation:lgSpin .7s linear infinite;
}
@keyframes lgSpin{ to{ transform:rotate(360deg);} }

/* autofill Chrome */
.lg-field input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 100px #f2fbf7 inset;
  -webkit-text-fill-color:#0c2118;
}

@media (max-width:380px){
  .lg-field{ height:64px; }
  .lg-field input{ padding-left:74px; }
  .lg-field label{ left:74px; }
  .lg-btn{ height:64px; }
}
@media (prefers-reduced-motion: reduce){
  .lg-form > *, .lg-btn::before{ animation:none !important; }
  .lg-field, .lg-field *, .lg-btn, .lg-btn *{ transition:none !important; }
}

/* ===== LATAR-V3 START: Fajar Cerah (mobile saja) ===== */
@keyframes lgPhotoIn{ from{opacity:0;} to{opacity:1;} }
@keyframes lgPop{ from{opacity:0; transform:scale(.8);} to{opacity:1; transform:none;} }

@media (max-width:991.98px){
  body.login-page{
    background-color:#f3faf6;
    background-image:
      radial-gradient(70% 38% at 100% 100%, rgba(20,168,116,.16), transparent 70%),
      radial-gradient(60% 32% at 0% 62%, rgba(230,200,120,.16), transparent 70%),
      linear-gradient(180deg,#e7f6ef 0%,#f3faf6 42%,#fbfdfc 100%);
    background-repeat:no-repeat;
  }

  /* bagian atas: foto + medali logo + judul di sampingnya */
  body.login-page .login-mobile-hero{
    --lg-ph:244px;
    position:relative; display:grid;
    grid-template-columns:72px 1fr; column-gap:14px; row-gap:6px; align-items:center;
    width:100%; max-width:520px; margin:0 auto;
    padding:calc(var(--lg-ph) + 14px) 20px 22px;
    background:none; border-radius:0; box-shadow:none; overflow:visible; text-align:left;
  }
  body.login-page .login-mobile-hero::before{
    content:""; position:absolute; z-index:0;
    top:0; left:0; right:0; height:var(--lg-ph);
    border-radius:0 0 34px 34px;
    background-image:
      linear-gradient(180deg, rgba(6,48,36,.28) 0%, rgba(6,48,36,0) 28%, rgba(6,48,36,0) 62%, rgba(6,48,36,.30) 100%),
      url('../images/guru-hero-wide.webp');
    background-size:cover; background-position:center 35%; background-repeat:no-repeat;
    box-shadow:inset 0 -3px 0 rgba(230,200,120,.9), 0 20px 34px -18px rgba(11,61,42,.5);
    animation:lgPhotoIn .8s ease both;
  }
  body.login-page .login-mobile-hero-ring{
    grid-column:1; grid-row:1 / span 2; align-self:start; margin-top:-38px;
    width:72px; height:72px;
    background:#fff; border:2px solid #e6c878;
    box-shadow:0 12px 24px -8px rgba(11,61,42,.45), 0 0 0 5px rgba(255,255,255,.75);
    animation:lgPop .6s cubic-bezier(.2,.8,.2,1) .25s both;
  }
  body.login-page .login-mobile-hero-ring img{ width:52px; height:52px; padding:3px; }
  body.login-page .login-mobile-hero-title{
    grid-column:2; grid-row:1; align-self:end;
    max-width:none; margin:0; text-align:left;
    font-size:1.05rem; line-height:1.25; color:#0b3d2a; text-shadow:none;
  }
  body.login-page .login-mobile-hero-badge{
    grid-column:2; grid-row:2; justify-self:start; align-self:start;
    background:rgba(11,107,75,.08); border:1px solid rgba(11,107,75,.22);
    color:#0b6b4b; font-size:.72rem;
  }

  /* kartu putih bersih yang menyambung di bawah judul */
  body.login-page .login-form-side{ padding:0 16px 32px; justify-content:center; }
  body.login-page .login-form-inner{ margin-top:0; }
  body.login-page .login-card{
    background:#fff;
    border:1px solid rgba(11,107,75,.10);
    box-shadow:0 26px 50px -26px rgba(11,61,42,.40), 0 2px 6px rgba(11,61,42,.06);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  body.login-page .login-card::before{ display:none; }
}
@media (max-width:991.98px) and (prefers-reduced-motion: reduce){
  body.login-page .login-mobile-hero::before,
  body.login-page .login-mobile-hero-ring{ animation:none !important; }
}
/* ===== LATAR-V3 END ===== */

/* ===== LATAR-V4 START: polesan elegan (mobile saja) ===== */
@keyframes lgPulse{ 0%{transform:scale(1); opacity:.7;} 100%{transform:scale(1.35); opacity:0;} }

@media (max-width:991.98px){
  /* medali logo: cincin emas berdenyut halus */
  body.login-page .login-mobile-hero-ring::after{
    content:""; position:absolute; inset:-7px; border-radius:50%;
    border:1.5px solid rgba(230,200,120,.8); pointer-events:none;
    animation:lgPulse 3.2s ease-out 1.2s infinite;
  }
  /* kop kecil emas di atas judul */
  body.login-page .login-mobile-hero-title{ letter-spacing:-.01em; }
  body.login-page .login-mobile-hero-title::before{
    content:"SISTEM INFORMASI ABSENSI"; display:block; margin-bottom:5px;
    font:700 .6rem/1 'Inter',sans-serif; letter-spacing:.18em; color:#b08a2e;
  }

  /* kartu lebih mewah dan lebih ringkas */
  body.login-page .login-card{
    border-radius:28px;
    border:1px solid rgba(230,200,120,.40);
    box-shadow:
      0 30px 56px -28px rgba(11,61,42,.45),
      0 2px 8px rgba(11,61,42,.06),
      0 0 0 5px rgba(255,255,255,.7);
    animation:lgUp .7s cubic-bezier(.2,.8,.2,1) .15s both;
  }
  body.login-page .login-card .card-body{ padding:24px 22px 18px !important; }
  body.login-page .login-card .h4{ font-size:1.3rem; position:relative; padding-bottom:12px; }
  body.login-page .login-card .h4::after{
    content:""; position:absolute; left:0; bottom:0; width:40px; height:3px; border-radius:3px;
    background:linear-gradient(90deg,#e6c878,#14a874);
  }
  body.login-page .login-card .text-center.small{
    font-size:.72rem; letter-spacing:.02em; margin-top:16px !important;
  }
}
@media (max-width:991.98px) and (prefers-reduced-motion: reduce){
  body.login-page .login-mobile-hero-ring::after,
  body.login-page .login-card{ animation:none !important; }
}
/* ===== LATAR-V4 END ===== */

/* ===== LATAR-V5 START: logo sejajar teks + kartu ringkas (mobile saja) ===== */
@media (max-width:991.98px){
  body.login-page .login-mobile-hero{
    grid-template-columns:78px 1fr; column-gap:16px; row-gap:8px;
    padding-top:calc(var(--lg-ph) + 18px); padding-bottom:16px;
  }
  /* logo rata tengah di samping blok tulisan */
  body.login-page .login-mobile-hero-ring{
    grid-column:1; grid-row:1 / span 2; align-self:center; margin-top:0;
    width:78px; height:78px;
    box-shadow:0 10px 22px -8px rgba(11,61,42,.40), 0 0 0 4px rgba(230,200,120,.18);
  }
  body.login-page .login-mobile-hero-ring img{ width:58px; height:58px; padding:3px; }

  /* kartu lebih ringkas */
  body.login-page .login-card .mb-4{ margin-bottom:14px !important; }
  body.login-page .login-card .h4{ padding-bottom:10px; }
  body.login-page .login-card .text-muted{ font-size:.84rem; }
}
/* ===== LATAR-V5 END ===== */

/* ===== LATAR-V6 START: foto berbingkai (mobile saja) ===== */
@media (max-width:991.98px){
  body.login-page .login-mobile-hero{
    --lg-ph:238px;
    padding-top:calc(var(--lg-ph) + 26px);
  }
  /* foto inset, sudut bulat, bingkai putih + garis emas tipis */
  body.login-page .login-mobile-hero::before{
    top:14px; left:16px; right:16px; height:calc(var(--lg-ph) - 14px);
    border-radius:26px;
    background-image:
      linear-gradient(180deg, rgba(6,48,36,.10) 0%, rgba(6,48,36,0) 30%, rgba(6,48,36,0) 66%, rgba(6,48,36,.26) 100%),
      url('../images/guru-hero-wide.webp');
    box-shadow:
      0 0 0 3px #fff,
      0 0 0 4.5px rgba(230,200,120,.95),
      0 18px 32px -14px rgba(11,61,42,.5);
  }
  /* hiasan berlian emas di tengah garis bawah bingkai */
  body.login-page .login-mobile-hero::after{
    content:""; position:absolute; z-index:2;
    left:50%; top:calc(var(--lg-ph) - 8px);
    width:16px; height:16px;
    transform:translateX(-50%) rotate(45deg);
    background:linear-gradient(135deg,#f3dc9a,#d4af5a);
    border:2px solid #fff; border-radius:3px;
    box-shadow:0 4px 10px -2px rgba(11,61,42,.45);
  }
}
/* ===== LATAR-V6 END ===== */

/* ===== LATAR-V7 START: slide foto otomatis (mobile saja) ===== */
@keyframes lgSlide{
  0%{opacity:0; transform:scale(1.08);}
  6%{opacity:1;}
  33%{opacity:1;}
  39%{opacity:0; transform:scale(1);}
  100%{opacity:0; transform:scale(1);}
}
@keyframes lgDot{
  0%,33%{background:#e6c878; transform:scale(1.35);}
  38%,100%{background:rgba(255,255,255,.55); transform:scale(1);}
}
@media (max-width:991.98px){
  /* ::before tinggal jadi bingkai; fotonya diganti slide */
  body.login-page .login-mobile-hero::before{ background-image:none; background-color:#0b3d2a; }
  body.login-page .lg-slides{
    position:absolute; z-index:1;
    top:14px; left:16px; right:16px; height:calc(var(--lg-ph) - 14px);
    border-radius:26px; overflow:hidden; isolation:isolate; background:#0b3d2a;
    animation:lgPhotoIn .8s ease both;
  }
  body.login-page .lg-slides::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(180deg, rgba(6,48,36,.08) 0%, rgba(6,48,36,0) 30%, rgba(6,48,36,0) 66%, rgba(6,48,36,.28) 100%);
  }
  body.login-page .lg-slide{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:50% 38%;
    opacity:0; animation:lgSlide 15s ease-in-out infinite both;
    will-change:opacity, transform;
  }
  body.login-page .lg-slide:nth-child(1){ animation-delay:0s;  object-position:50% 35%; }
  body.login-page .lg-slide:nth-child(2){ animation-delay:5s;  object-position:50% 36%; }
  body.login-page .lg-slide:nth-child(3){ animation-delay:10s; object-position:50% 40%; }

  body.login-page .lg-dots{
    position:absolute; z-index:3; left:0; right:0; bottom:18px;
    display:flex; justify-content:center; gap:7px;
  }
  body.login-page .lg-dots i{
    width:6px; height:6px; border-radius:50%;
    background:rgba(255,255,255,.55);
    animation:lgDot 15s infinite both;
  }
  body.login-page .lg-dots i:nth-child(1){ animation-delay:0s; }
  body.login-page .lg-dots i:nth-child(2){ animation-delay:5s; }
  body.login-page .lg-dots i:nth-child(3){ animation-delay:10s; }
}
@media (max-width:991.98px) and (prefers-reduced-motion: reduce){
  body.login-page .lg-slides{ animation:none !important; }
  body.login-page .lg-slide{ animation:none !important; opacity:0; }
  body.login-page .lg-slide:first-child{ opacity:1; }
  body.login-page .lg-dots i{ animation:none !important; }
  body.login-page .lg-dots i:first-child{ background:#e6c878; }
}
/* ===== LATAR-V7 END ===== */

/* ===== LATAR-V8 START: latar desktop berganti otomatis ===== */
@media (min-width:992px){
  /* foto 1: foto hijau yang lama (versi WebP lebih ringan), tampilan sama seperti semula */
  html.lg-bg-0 .login-split{
    background-image:
      linear-gradient(90deg, rgba(6,48,36,.80) 0%, rgba(6,48,36,.60) 30%, rgba(6,48,36,.28) 48%, rgba(6,48,36,.10) 62%, rgba(6,48,36,.02) 100%),
      url('../images/guru-hero-wide.webp');
  }
  /* foto 2: guru berbaris di halaman (lebih terang, overlay lebih gelap) */
  html.lg-bg-1 .login-split{
    background-image:
      linear-gradient(90deg, rgba(6,48,36,.84) 0%, rgba(6,48,36,.66) 30%, rgba(6,48,36,.38) 50%, rgba(6,48,36,.36) 70%, rgba(6,48,36,.46) 100%),
      url('../images/guru-desk-2.webp');
    background-position:center, center 40%;
  }
  /* foto 3: foto bersama dengan piala */
  html.lg-bg-2 .login-split{
    background-image:
      linear-gradient(90deg, rgba(6,48,36,.84) 0%, rgba(6,48,36,.66) 30%, rgba(6,48,36,.38) 50%, rgba(6,48,36,.36) 70%, rgba(6,48,36,.46) 100%),
      url('../images/guru-desk-3.webp');
    background-position:center, center 42%;
  }
}
/* ===== LATAR-V8 END ===== */

/* ===== LATAR-V9 START: kartu & kolom isian kaca transparan (desktop) ===== */
@media (min-width:992px){
  /* kartu: kaca hijau gelap tipis, supaya tulisan putih tetap terbaca */
  body.login-page .login-card{
    background:rgba(5,34,24,.40);
    -webkit-backdrop-filter:blur(16px) saturate(130%); backdrop-filter:blur(16px) saturate(130%);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 30px 70px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
  }
  body.login-page .login-card .h4,
  body.login-page .login-card .text-muted{ text-shadow:0 1px 10px rgba(0,0,0,.6); }

  /* kolom isian: kaca bening */
  body.login-page .lg-field{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.34);
    box-shadow:0 10px 26px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  body.login-page .lg-field:focus-within{
    background:rgba(255,255,255,.20);
    box-shadow:0 0 0 2px rgba(47,208,154,.75), 0 0 0 7px rgba(47,208,154,.16), 0 18px 34px -12px rgba(20,168,116,.5);
  }
  body.login-page .lg-field input{ color:#fff; caret-color:#7be3b8; }
  body.login-page .lg-field label{ color:rgba(255,255,255,.85); text-shadow:0 1px 6px rgba(0,0,0,.45); }
  body.login-page .lg-field input:focus + label,
  body.login-page .lg-field input:not(:placeholder-shown) + label{ color:#7be3b8; }

  body.login-page .lg-chip{
    background:rgba(255,255,255,.18); color:#b6f2d8;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.2);
  }
  body.login-page .lg-field:focus-within .lg-chip{
    background:linear-gradient(145deg,#22c88c,#0b6b4b); color:#fff;
  }
  body.login-page .lg-eye{ color:rgba(255,255,255,.88); }
  body.login-page .lg-eye:hover{ background:rgba(255,255,255,.16); color:#fff; }

  /* autofill Chrome: ganti warna terang dengan hijau gelap yang serasi */
  body.login-page .lg-field input:-webkit-autofill,
  body.login-page .lg-field input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 100px rgba(10,60,44,.92) inset;
    -webkit-text-fill-color:#fff; caret-color:#7be3b8;
    transition:background-color 9999s ease-out 0s;
  }
}
/* ===== LATAR-V9 END ===== */

/* ===== LATAR-V10 START: kartu & kolom isian full transparan (desktop) ===== */
@media (min-width:992px){
  /* bayangan lembut di foto (bukan kotak) supaya tulisan tetap terbaca */
  body.login-page .login-form-side::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(62% 72% at 50% 50%, rgba(4,30,21,.45), rgba(4,30,21,0) 72%);
  }
  body.login-page .login-form-inner{ z-index:1; }

  /* kartu: full transparan, hanya garis tepi tipis */
  body.login-page .login-card{
    background:transparent;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border:1px solid rgba(255,255,255,.30);
    box-shadow:none;
  }
  body.login-page .login-card .h4,
  body.login-page .login-card .text-muted{ text-shadow:0 1px 8px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.4); }

  /* kolom isian: tanpa isi, hanya garis tepi */
  body.login-page .lg-field{
    background:transparent;
    border:1.5px solid rgba(255,255,255,.60);
    box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  body.login-page .lg-field:focus-within{
    background:transparent;
    border-color:rgba(47,208,154,.95);
    box-shadow:0 0 0 4px rgba(47,208,154,.20);
  }
  body.login-page .lg-field input{ color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); }
  body.login-page .lg-field label{ color:rgba(255,255,255,.92); text-shadow:0 1px 6px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.4); }
  body.login-page .lg-field input:focus + label,
  body.login-page .lg-field input:not(:placeholder-shown) + label{ color:#8af0c6; }
  body.login-page .lg-eye{ text-shadow:0 1px 6px rgba(0,0,0,.6); }

  /* autofill: jangan ubah warna kolom */
  body.login-page .lg-field input:-webkit-autofill,
  body.login-page .lg-field input:-webkit-autofill:focus{
    -webkit-box-shadow:none;
    -webkit-text-fill-color:#fff; caret-color:#8af0c6;
    transition:background-color 600000s 0s, color 600000s 0s;
  }
}
/* ===== LATAR-V10 END ===== */

/* ===== LATAR-V11 START: kolom isian tetap transparan saat autofill (desktop) ===== */
@media (min-width:992px){
  body.login-page .lg-field input:-webkit-autofill,
  body.login-page .lg-field input:-webkit-autofill:hover,
  body.login-page .lg-field input:-webkit-autofill:focus,
  body.login-page .lg-field input:-webkit-autofill:active,
  body.login-page .lg-field input:autofill{
    -webkit-box-shadow:none !important;
    box-shadow:none !important;
    -webkit-text-fill-color:#fff !important;
    caret-color:#8af0c6;
    transition:background-color 600000s 0s, color 600000s 0s !important;
  }
}
/* ===== LATAR-V11 END ===== */