/* Auth (Login) Styles – unified (desktop + mobile) */
/* Variables */
:root {
  --login-sage: #8b9e7c;
  --login-sage-light: #9db08e;
  --login-sage-dark: #7a8c6b;
  --login-beige: #e8e4d8;
  --login-beige-light: #f0ede3;
  --login-white: #ffffff;
  --login-orange: #d4a574;
  --login-red: #990000;
  --login-shadow: 0 8px 32px rgba(0,0,0,0.15);
  --login-shadow-strong: 0 12px 48px rgba(0,0,0,0.25);
}

body.auth-mode {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
  background: linear-gradient(135deg, var(--login-beige) 0%, var(--login-sage) 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Decorative Circles */
.circle-decoration { position:absolute; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0.35)); z-index:0; }
.circle-left { width:420px; height:420px; left:-180px; bottom:-180px; }
.circle-right { width:340px; height:340px; right:-120px; bottom:-120px; }

/* Brand Header (Desktop) */
.brand-header { position:absolute; top:40px; left:40px; z-index:10; }
.brand-logo { display:flex; align-items:center; gap:12px; }
.logo-icon { width:48px; height:48px; object-fit:contain; display:block; }
.partner-icon{ width:48px; height:48px; max-width:48px; max-height:48px; object-fit:contain; display:block; align-self:center; filter:drop-shadow(0 1px 2px rgba(0,0,0,.15)); position:relative; top:-6px; }
.brand-text { font-size:28px; font-weight:700; color:#2c2c2c; letter-spacing:.5px; }

/* Mobile Header */
.mobile-header { display:none; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; height:240px; background:var(--login-sage); border-radius:0 0 50% 50%; z-index:5; }
.mobile-logo { position:absolute; bottom:60px; left:50%; transform:translateX(-50%); text-align:center; }
.mobile-logo-row{ display:flex; align-items:center; justify-content:center; gap:8px; }
.logo-mobile { width:60px; height:60px; margin:0 auto 8px; display:block; }
.brand-mobile { font-size:24px; font-weight:700; color:var(--login-white); }
.partner-mobile{ width:60px; height:60px; max-width:60px; max-height:60px; display:block; margin:8px auto 0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.15)); position:relative; top:-6px; }

/* Layout */
.login-container { position:relative; z-index:1; min-height:100vh; }
/* Watermark: keep above decorative circles (z-index:1) but behind content */
.bg-himatif-blur{ position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:clamp(420px, 55vw, 900px); aspect-ratio:1/1; background-repeat:no-repeat; background-size:contain; background-position:center; filter:blur(4px) saturate(95%) opacity(.22); pointer-events:none; z-index:1; }
.login-main { display:flex; align-items:center; justify-content:space-between; min-height:100vh; padding:60px 44px 44px; gap:48px; max-width:1180px; margin:0 auto; position:relative; z-index:2; }

.login-left { flex:1; display:flex; flex-direction:column; align-items:center; gap:40px; text-align:center; }
.illustration { width:100%; max-width:480px; }
.hero-img { width:100%; height:auto; max-height:240px; object-fit:contain; }
.tagline { font-size:22px; line-height:1.4; font-weight:600; color:#2c2c2c; margin:0; max-width:520px; }

/* Right / Card */
.login-right { flex:0 0 380px; position:relative; }
.login-badge { display:none; position:absolute; top:-30px; left:50%; transform:translateX(-50%); background:rgba(230,230,230,.92); color:#222; padding:8px 24px; border-radius:20px; font-size:14px; font-weight:600; z-index:10; }

.login-card { position:relative; background:linear-gradient(to bottom,#ffffff 0%,#f9faf8 18%,#eef3ef 34%,#e0e9e0 50%,#d1ddcf 64%, var(--login-sage-light) 78%, var(--login-sage) 100%); border-radius:20px; box-shadow:var(--login-shadow-strong); padding:105px 0 60px; }
.login-cap { position:absolute; top:0; left:50%; transform:translate(-50%, -50%); width:210px; height:105px; background:var(--login-sage); border-radius:105px 105px 0 0; display:flex; align-items:center; justify-content:center; box-shadow:var(--login-shadow); }
.login-cap span { color:var(--login-white); font-size:22px; font-weight:700; letter-spacing:.4px; margin-top:14px; }

.login-panel { 
  /* Acrylic / glass effect */
  background:rgba(139,158,124,.42); /* semi-transparent sage */
  margin:0 26px; 
  border-radius:20px; 
  padding:30px 26px; 
  box-shadow:0 6px 28px -8px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.20); 
  backdrop-filter:blur(9px) saturate(50%); 
  -webkit-backdrop-filter:blur(9px) saturate(50%);
  border:1px solid rgba(255,255,255,.24);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  /* Fallback solid color when backdrop-filter unsupported */
  .login-panel { background:var(--login-sage); box-shadow:var(--login-shadow); border:0; }
}

/* Form */
.login-form { display:flex; flex-direction:column; gap:24px; margin-bottom:24px; }
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field label { display:flex; align-items:center; gap:8px; color:var(--login-white); font-size:16px; font-weight:600; }
.form-field input { width:100%; height:40px; border:none; border-radius:8px; background:var(--login-white); padding:0 12px; font-size:13.5px; box-sizing:border-box; position:relative; }
/* Icon container */
.icon-holder { position:relative; }
.icon-holder .form-icon { display:none; }

.password-field { position:relative; display:flex; align-items:center; }
.password-field input { padding-right:40px; padding-left:12px; }

/* Material Icon font utility */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size:22px; }

.password-toggle { position:absolute; right:5px; top:50%; transform:translateY(-50%); background:var(--login-white); border:none; width:30px; height:30px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px #cdd5c9 inset; }
.password-toggle:focus-visible { outline:2px solid var(--login-orange); outline-offset:2px; }

/* Buttons */
.btn-masuk { background:var(--login-orange); color:var(--login-white); border:none; border-radius:8px; padding:8px 36px; font-size:15px; font-weight:700; letter-spacing:.35px; cursor:pointer; align-self:center; margin-top:2px; box-shadow:0 3px 12px rgba(0,0,0,.16); transition:all .2s ease; }
.btn-masuk:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.25); }
.btn-masuk:active { transform:translateY(0); }

/* Divider & Google */
.divider { text-align:center; color:#222; font-size:16px; font-weight:600; margin:20px 0; }
.btn-google { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; background:var(--login-red); color:var(--login-white); border:none; border-radius:6px; padding:12px 20px; font-size:16px; font-weight:600; cursor:not-allowed; opacity:.95; }
.google-icon { background:var(--login-white); color:var(--login-red); width:28px; height:28px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; }

/* Alerts */
.alert { padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; border:1px solid transparent; }
.alert.error { background:#ffebee; color:#b71c1c; border-color:#ef9a9a; }
.alert.info { background:#e8f5e8; color:#2e7d32; border-color:#a5d6a7; }

/* Accessibility helpers */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Mobile */
@media (max-width: 768px) {
  .brand-header, .login-cap { display:none; }
  .mobile-header, .login-badge { display:block; }
  .login-main { flex-direction:column; padding:0 20px 40px; gap:0; justify-content:flex-start; padding-top:280px; }
  .login-left { display:none; }
  .login-right { flex:none; width:100%; max-width:400px; margin:0 auto; }
  .login-card { background:transparent; box-shadow:none; padding:60px 0 40px; }
  .login-panel { 
    background:rgba(139,158,124,.45); 
    margin:0; 
    border-radius:26px; 
    padding:42px 34px 64px; 
    backdrop-filter:blur(12px) saturate(145%); 
    -webkit-backdrop-filter:blur(12px) saturate(145%);
    box-shadow:0 8px 30px -8px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.22);
    border:1px solid rgba(255,255,255,.26);
  }
  @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .login-panel { background:linear-gradient(135deg, var(--login-sage-light), #a8b49a); box-shadow:var(--login-shadow); border:0; }
  }
  .btn-masuk { font-size:16px; padding:14px 40px; }
  .circle-left { width:300px; height:300px; left:-150px; bottom:-100px; }
  .circle-right { width:250px; height:250px; right:-80px; bottom:-80px; }
  .bg-himatif-blur{ left:50%; top:50%; transform:translate(-50%, -50%); width:clamp(300px, 85vw, 640px); aspect-ratio:1/1; filter:blur(3px) opacity(.18); z-index:1; }
}

@media (min-width:1600px){
  .login-main { max-width:1600px; }
  .tagline { font-size:30px; }
}