/* =========================================
   LOGIN
========================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body.login-page {

  font-family:'DM Sans',sans-serif;

  min-height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

 background:
        linear-gradient(rgba(34, 24, 18, 0.75),
        rgba(34, 24, 18, 0.75)),
        url('assets/image/jemurkopi.jpg');

  padding:1.5rem;
}

/* =========================================
   WRAPPER
========================================= */

.lp-wrap {

  display:grid;

  grid-template-columns:1fr;

  width:100%;

  max-width:430px;

  min-height:auto;

  border-radius:22px;

  overflow:hidden;

  box-shadow:
    0 24px 60px rgba(0,0,0,0.22);
}

.lp-right {

  background:#F8F5F0;

  padding:2.7rem;

  width:100%;

  position:relative;
}

/* =========================================
   DECORATION
========================================= */

.deco-tr {

  position:absolute;

  top:0;
  right:0;

  width:120px;
  height:120px;

  border-left:1px solid rgba(216,195,165,.18);

  border-bottom:1px solid rgba(216,195,165,.18);

  border-radius:0 0 0 100%;

  pointer-events:none;
}

.deco-bl {

  position:absolute;

  bottom:0;
  left:0;

  width:80px;
  height:80px;

  border-right:1px solid rgba(216,195,165,.18);

  border-top:1px solid rgba(216,195,165,.18);

  border-radius:0 100% 0 0;

  pointer-events:none;
}

/* =========================================
   FORM HEAD
========================================= */

.form-eyebrow{

  font-size:11px;

  letter-spacing:.14em;

  text-transform:uppercase;

  color:#DDB892;

  margin-bottom:10px;
}

.form-title{

  font-family: 'DM Sans', sans-serif;


  font-size:36px;

  font-weight:700;

  color:#2F1B12;

  margin-bottom:6px;

  line-height:1.1;
}

.form-sub{

  font-size:14px;

  color:#6B705C;

  line-height:1.6;

  margin-bottom:1.8rem;
}

/* =========================================
   ERROR
========================================= */

.alert-error {

  background:#FEF0EF;

  border:1px solid #F5C4B8;

  border-left:3px solid #D4534A;

  border-radius:10px;

  padding:12px 14px;

  display:flex;

  align-items:flex-start;

  gap:10px;

  font-size:13px;

  color:#8B2A20;

  margin-bottom:1.3rem;

  animation:shake .4s ease;
}

.alert-error svg{

  flex-shrink:0;

  width:17px;
  height:17px;

  stroke:#D4534A;

  margin-top:1px;
}

/* =========================================
   FIELD
========================================= */

.field{
  margin-bottom:1.1rem;
}

.field-label {

  display:flex;

  align-items:center;

  gap:6px;

  font-size:12px;

  font-weight:600;

  color:#5A4336;

  letter-spacing:.06em;

  text-transform:uppercase;

  margin-bottom:8px;
}

.field-label svg{

  width:14px;
  height:14px;

  stroke:#588157;

  flex-shrink:0;
}

.input-wrap{
  position:relative;
}

.input-wrap svg.ic {

  position:absolute;

  left:13px;
  top:50%;

  transform:translateY(-50%);

  width:17px;
  height:17px;

  stroke:#A1887F;

  pointer-events:none;
}

input[type=text],
input[type=password] {

  width:100%;

  padding:13px 14px 13px 42px;

  background:#FFFDF9;

  border:1px solid #D8C3A5;

  border-radius:11px;

  font-size:15px;

  font-family:'DM Sans',sans-serif;

  color:#2F1B12;

  outline:none;

  transition:
    border-color .2s,
    box-shadow .2s,
    background .2s;
}

input[type=text]:focus,
input[type=password]:focus {

  border-color:#588157;

  background:white;

  box-shadow:
    0 0 0 3px rgba(88,129,87,.12);
}

input::placeholder{
  color:#9C8B80;
}

.eye-btn {

  position:absolute;

  right:12px;
  top:50%;

  transform:translateY(-50%);

  background:none;

  border:none;

  cursor:pointer;

  padding:4px;

  display:flex;

  align-items:center;
}

.eye-btn svg{

  width:17px;
  height:17px;

  stroke:#A1887F;
}

.row-extra{

  display:flex;

  justify-content:flex-end;

  margin:-2px 0 1.2rem;
}

.forgot{

  font-size:13px;

  color:#588157;

  text-decoration:none;

  font-weight:500;
}

.forgot:hover{
  text-decoration:underline;
}

/* =========================================
   SUBMIT BUTTON
========================================= */

.btn-submit {

  width:100%;

  padding:13px;

  background:#3A5A40;

  color:white;

  border:none;

  border-radius:11px;

  font-size:15px;

  font-weight:600;

  font-family:'DM Sans',sans-serif;

  cursor:pointer;

  letter-spacing:.03em;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  transition:
    background .2s,
    transform .15s,
    box-shadow .2s;
}

.btn-submit:hover{

  background:#588157;

  box-shadow:
    0 8px 20px rgba(58,90,64,0.18);
}

.btn-submit:active{
  transform:scale(.985);
}

.btn-submit svg{

  width:18px;
  height:18px;

  stroke:white;
}

/* =========================================
   DIVIDER
========================================= */

.divider{

  display:flex;

  align-items:center;

  gap:12px;

  margin:1.4rem 0;
}

.divider-line{

  flex:1;

  height:1px;

  background:#EAD8C4;
}

.divider-text{

  font-size:11px;

  color:#A1887F;

  letter-spacing:.08em;

  white-space:nowrap;
}

/* =========================================
   NOTICE
========================================= */

.notice {

  background:#EDF6EE;

  border:1px solid #D8E8DC;

  border-left:3px solid #588157;

  border-radius:10px;

  padding:12px 14px;

  display:flex;

  gap:10px;

  align-items:flex-start;
}

.notice svg{

  width:17px;
  height:17px;

  stroke:#588157;

  flex-shrink:0;

  margin-top:1px;
}

.notice-text{

  font-size:13px;

  color:#5A4336;

  line-height:1.6;
}

.notice-text strong{

  font-weight:600;

  color:#2F1B12;
}

/* =========================================
   MINI STATS
========================================= */

.mini-stats{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:10px;

  margin-top:1.3rem;
}

.mini-stat{

  background:#FFFDF9;

  border:1px solid #EAD8C4;

  border-radius:10px;

  padding:11px 10px;

  text-align:center;
}

.mini-stat-num{

 font-family: 'DM Sans', sans-serif;

  font-size:22px;

  font-weight:700;

  color:#2F1B12;

  display:block;

  line-height:1;
}

.mini-stat-lbl{

  font-size:10px;

  color:#8A7B70;

  letter-spacing:.05em;

  text-transform:uppercase;

  display:block;

  margin-top:4px;
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(12px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes shake{

  0%,100%{
    transform:translateX(0);
  }

  20%,60%{
    transform:translateX(-4px);
  }

  40%,80%{
    transform:translateX(4px);
  }
}

.animate{
  animation:fadeUp .55s ease both;
}

.d1{animation-delay:.15s}
.d2{animation-delay:.22s}
.d3{animation-delay:.28s}
.d4{animation-delay:.34s}
.d5{animation-delay:.40s}
.d6{animation-delay:.46s}