/* =========================================================
   Auth Pages CSS
   File khusus untuk login.php dan register.php.
   Tidak mengubah user-ui.css.
   ========================================================= */

body.auth-custom-screen{
  background:
    radial-gradient(circle at top left, rgba(31,122,77,.10), transparent 320px),
    radial-gradient(circle at bottom right, rgba(231,199,106,.12), transparent 320px),
    linear-gradient(135deg,#f7faf7 0%,#eef6f0 48%,#ffffff 100%);
}

body.auth-custom-screen .nav-black{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e7efe9;
  backdrop-filter:blur(14px);
}

body.auth-custom-screen .brand-link,
body.auth-custom-screen .nav-auth-actions .btn-outline-light{
  color:#17232c!important;
}

body.auth-custom-screen .brand-mini{
  background:#1f7a4d;
  color:#fff;
}

body.auth-custom-screen .nav-auth-actions .btn-light{
  background:#1f7a4d;
  border-color:#1f7a4d;
  color:#fff;
}

body.auth-custom-screen .nav-auth-actions .btn-outline-light{
  border-color:#d4e3da;
  background:#fff;
}

.auth-page{
  min-height:calc(100vh - 140px);
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.72fr);
  gap:28px;
  align-items:stretch;
}

.auth-visual{
  position:relative;
  overflow:hidden;
  min-height:620px;
  padding:34px;
  border:1px solid #dfeadf;
  border-radius:30px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(240,249,243,.96)),
    radial-gradient(circle at 20% 20%,rgba(31,122,77,.13),transparent 280px);
  box-shadow:0 20px 55px rgba(24,45,32,.07);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.auth-visual:before{
  content:"";
  position:absolute;
  right:-86px;
  top:-96px;
  width:270px;
  height:270px;
  border-radius:50%;
  background:rgba(31,122,77,.08);
}

.auth-visual:after{
  content:"";
  position:absolute;
  left:38px;
  bottom:34px;
  width:210px;
  height:210px;
  border-radius:42px;
  border:1px solid rgba(31,122,77,.10);
  transform:rotate(-8deg);
}

.auth-visual > *{
  position:relative;
  z-index:1;
}

.auth-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  max-width:100%;
  padding:8px 12px;
  border:1px solid #d7e7dc;
  border-radius:999px;
  background:#fff;
  color:#1f7a4d;
  font-size:.8rem;
  font-weight:800;
}

.auth-kicker:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#1f7a4d;
}

.auth-title{
  max-width:680px;
  margin:26px 0 0;
  color:#17232c;
  font-size:clamp(2.35rem,4.8vw,4.95rem);
  line-height:.98;
  letter-spacing:-.075em;
  font-weight:900;
}

.auth-copy{
  max-width:570px;
  margin:20px 0 0;
  color:#5d6c65;
  font-size:1.02rem;
  line-height:1.7;
}

.auth-preview-card{
  max-width:520px;
  margin-top:40px;
  padding:22px;
  border:1px solid #dfeadf;
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 40px rgba(24,45,32,.06);
}

.auth-preview-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid #edf4ef;
}

.auth-preview-title{
  color:#17232c;
  font-weight:900;
  letter-spacing:-.03em;
}

.auth-preview-muted{
  color:#6a7970;
  font-size:.86rem;
}

.auth-preview-total{
  text-align:right;
}

.auth-preview-total strong{
  display:block;
  color:#1f7a4d;
  font-size:1.35rem;
  letter-spacing:-.04em;
}

.auth-preview-lines{
  display:grid;
  gap:12px;
  margin-top:18px;
}

.auth-preview-line{
  height:10px;
  border-radius:999px;
  background:#edf4ef;
}

.auth-preview-line:nth-child(1){width:92%}
.auth-preview-line:nth-child(2){width:72%}
.auth-preview-line:nth-child(3){width:84%}

.auth-benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:26px;
}

.auth-benefit{
  padding:14px;
  border:1px solid #dfeadf;
  border-radius:18px;
  background:rgba(255,255,255,.72);
}

.auth-benefit strong{
  display:block;
  color:#17232c;
  font-size:.92rem;
  margin-bottom:4px;
}

.auth-benefit span{
  color:#66756d;
  font-size:.78rem;
  line-height:1.45;
}

.auth-panel-wrap{
  display:flex;
  align-items:center;
}

.auth-panel{
  width:100%;
  padding:34px;
  border:1px solid #dfeadf;
  border-radius:28px;
  background:#fff;
  box-shadow:0 20px 55px rgba(24,45,32,.07);
}

.auth-logo{
  width:56px;
  height:56px;
  margin-bottom:24px;
  border-radius:18px;
  background:#1f7a4d;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:-.08em;
}

.auth-eyebrow{
  margin-bottom:8px;
  color:#1f7a4d;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:900;
}

.auth-panel-title{
  margin:0 0 8px;
  color:#17232c;
  font-size:2rem;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.055em;
}

.auth-panel-subtitle{
  margin-bottom:24px;
  color:#63736a;
  line-height:1.6;
}

.auth-form .form-label{
  color:#223129;
  font-size:.86rem;
  font-weight:800;
}

.auth-form .form-control{
  min-height:52px;
  border:1px solid #d8e6dd;
  border-radius:15px;
  background:#fbfdfb;
  font-weight:600;
}

.auth-form .form-control:focus{
  background:#fff;
  border-color:#91b99e;
  box-shadow:0 0 0 .2rem rgba(31,122,77,.10);
}

.auth-submit{
  min-height:52px;
  border-radius:15px;
  font-weight:850;
  background:#1f7a4d;
  border-color:#1f7a4d;
  color:#fff;
  box-shadow:0 12px 24px rgba(31,122,77,.18);
}

.auth-submit:hover{
  background:#16643f;
  border-color:#16643f;
  color:#fff;
}

.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:24px 0;
  color:#819087;
  font-size:.8rem;
}

.auth-divider:before,
.auth-divider:after{
  content:"";
  height:1px;
  flex:1;
  background:#e3ece6;
}

.auth-link{
  color:#63736a;
  font-size:.92rem;
}

.auth-link a{
  color:#1f7a4d;
  font-weight:850;
  text-decoration:none;
}

.auth-link a:hover{
  text-decoration:underline;
}

.auth-demo{
  margin-top:24px;
  padding:14px 15px;
  border:1px solid #e1ebe4;
  border-radius:16px;
  background:#f7faf8;
  color:#66756d;
  font-size:.84rem;
  line-height:1.55;
}

.auth-note{
  margin-top:14px;
  color:#78877f;
  font-size:.82rem;
  line-height:1.5;
}

@media(max-width:991.98px){
  .auth-page{
    grid-template-columns:1fr;
  }

  .auth-visual{
    min-height:420px;
  }

  .auth-benefits{
    grid-template-columns:1fr;
  }
}

@media(max-width:767.98px){
  body.auth-custom-screen{
    padding-bottom:0;
  }

  .auth-page{
    min-height:calc(100vh - 105px);
    gap:16px;
  }

  .auth-visual{
    display:none;
  }

  .auth-panel-wrap{
    align-items:flex-start;
  }

  .auth-panel{
    padding:26px 22px;
    border-radius:24px;
  }

  .auth-logo{
    margin-inline:auto;
  }

  .auth-eyebrow,
  .auth-panel-title,
  .auth-panel-subtitle,
  .auth-link,
  .auth-demo,
  .auth-note{
    text-align:center;
  }

  .auth-panel-title{
    font-size:1.85rem;
  }
}