:root{
  --etn-red:#B3001B;
  --etn-dark:#0f172a;
  --etn-gray:#6B7280;
  --etn-border:#e5e7eb;
  
}

/* Canvas penuh – memenuhi layar */
.etnps-viewport{
  min-height:100vh; height:100vh; /* full screen */
  display:flex; align-items:center; justify-content:center;
  padding:0px;
  background: radial-gradient(1200px 600px at 20% 20%, #eef3ff 0%, #fde8ef 45%, #ffffff 100%);
}
.etnps-login-wrap{
  width:100%; max-width:100%; height:100%; /* isi penuh area */
  background:#fff;
  border:0px solid var(--etn-border);
  border-radius:0px;
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1.5fr 0.9fr;
  overflow:hidden;
}

/* HERO kiri – TANPA overlay/ungu; teks di tengah kiri */
.etnps-hero{
  position:static; isolation:isolate;
  background-image: var(--etnps-hero);
  background-size: cover; background-position: center;
}
.etnps-hero__content{
  position:absolute; left:40px; top:80%; transform:translateY(-50%);
  color:#fff; text-align:left; max-width:80%;
}
.etnps-logo{width:162px;height:auto;border-radius:8px;display:none;}
.img-login{width:122px;height:auto;text-align:center;margin-bottom:30px;}
.etnps-hero__content h1{font-size:55px;line-height:1.2;margin:12px 0 6px;text-shadow:0 2px 8px rgba(0,0,0,.25);color:#fff;}
.etnps-hero__content p{opacity:.95;margin:0;text-shadow:0 1px 6px rgba(0,0,0,.25);font-size:25px;}

/* CARD kanan */
.etnps-card{position:relative;background:#ffffff;display:flex;flex-direction:column;justify-content:center;padding:40px 32px}
.etnps-card .etnps-form{max-width:660px;margin:0 auto;width:100%}
.etnps-footer-note{margin-top:28px;text-align:center;color:var(--etn-gray)}

/* Auth page header */
.etnps-auth__header {
  text-align: center;
  margin-bottom: 32px;
}

.etnps-auth__logo {
  height: 50px;
  margin-bottom: 20px;
}

.etnps-auth__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--etn-dark);
  margin: 0 0 8px;
}

.etnps-auth__subtitle {
  font-size: 15px;
  color: var(--etn-gray);
  margin: 0;
}

.etnps-auth__footer {
  text-align: center;
  margin-top: 24px;
}

.etnps-link {
  color: #8B5CF6;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: color 0.2s;
}

.etnps-link:hover {
  color: #7c3aed;
}

/* Form controls */
.etnps-form h2{margin:0 0 14px;font-size:22px;color:var(--etn-dark);text-align:center;}
.etnps-form label{display:block;font-weight:600;margin:12px 0 6px;color:var(--etn-dark)}
.etnps-form input{width:100%;padding:12px 14px;border:1px solid var(--etn-border);border-radius:var(--radius);outline:none;background:#fff}
.etnps-form input:focus{border-color:#8B5CF6; box-shadow:0 0 0 4px rgba(139,92,246,.15)}
.etnps-input-password{position:relative}
.etnps-input-group{position:relative}
.etnps-input-group input{padding-right:45px}
.etnps-input-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border:none;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--etn-gray);
  transition:color 0.2s;
  padding:0;
}
.etnps-input-toggle:hover{color:var(--etn-dark)}
.field-error{
  font-size:13px;
  color:#dc2626;
  margin-top:4px;
  display:none;
}
.field-error.active{display:block}

/* Remember & Forgot sejajar rapi */
.etnps-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap; /* jangan bungkus di layar lebar */
      margin: 0px 0px 0px;
}

.etnps-panel-links {
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
}

.etnps-remember{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  margin:0;
  white-space:nowrap;      /* cegah teks "me" turun baris */
  flex:0 0 auto;           /* jangan dipaksa mengecil berlebih */
}

.etnps-remember input[type="checkbox"]{
  margin:0;
  vertical-align:middle;   /* sejajarkan centang dengan teks */
  line-height:1;           /* rapikan baseline */
}

.etnps-alert.etnps-alert--success {
    background: #e8f8ed;
    padding: 10px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #c8e9d2;
}

/* === Eye / Eye-off icon toggle === */
.etnps-toggle-pw {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  outline: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  transition: opacity .2s ease;
}

/* Default: hidden password → eye-off */
.etnps-toggle-pw {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3l18 18'/><path d='M10.73 5.08A10.94 10.94 0 0 1 12 5c7 0 10 7 10 7a17.9 17.9 0 0 1-3.09 4.23'/><path d='M6.61 6.61A17.9 17.9 0 0 0 2 12s3 7 10 7a10.94 10.94 0 0 0 2.92-.39'/><path d='M9.88 9.88A3 3 0 0 0 12 15a3 3 0 0 0 2.12-.88'/></svg>");
}

/* Saat terlihat (type=text) → eye on */
.etnps-toggle-pw.is-on {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/><circle cx='12' cy='12' r='3'/></svg>");
}

/* Hover/focus tanpa ubah background */
.etnps-toggle-pw:hover,
.etnps-toggle-pw:focus,
.etnps-toggle-pw:active {
  background-color: transparent !important;
  box-shadow: none !important;
  opacity: .8; /* opsional efek ringan saat hover */
}

/* Hilangkan highlight mobile */
.etnps-toggle-pw {
  -webkit-tap-highlight-color: transparent;
}

/* default: hidden state => eye-off (dicoret) */
.etnps-toggle-pw{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M3 3l18 18'/>\
<path d='M10.73 5.08A10.94 10.94 0 0 1 12 5c7 0 10 7 10 7a17.9 17.9 0 0 1-3.09 4.23'/>\
<path d='M6.61 6.61A17.9 17.9 0 0 0 2 12s3 7 10 7a10.94 10.94 0 0 0 2.92-.39'/>\
<path d='M9.88 9.88A3 3 0 0 0 12 15a3 3 0 0 0 2.12-.88'/>\
</svg>");
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}

/* on: visible state => eye (tanpa coret) */
.etnps-toggle-pw.is-on{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/>\
<circle cx='12' cy='12' r='3'/>\
</svg>");
}


/* Di layar kecil, izinkan wrap agar layout tetap rapi */
@media (max-width: 480px){
  .etnps-actions{ flex-wrap:wrap; }
  .etnps-remember{ order:1; }
  .etnps-actions .etnps-link{ order:2; }
}

/* Tombol full-width + radius 3px */
.etnps-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--radius);border:0;cursor:pointer;font-weight:600;width:100%;justify-content: center;margin-top:20px;}
.etnps-btn--primary{background: linear-gradient(90deg, #a70606, #1d023f);color:#fff;}
.etnps-btn--primary:hover{filter:brightness(1.02)}
.etnps-btn__spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.6);border-top-color:#fff;border-radius:50%;display:none;animation:spin 1s linear infinite}
.etnps-btn.loading .etnps-btn__spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.etnps-form__notice{margin-top:12px;font-size:14px}
.etnps-form__notice.error{color:#b91c1c}
.etnps-form__notice.success{color:#065f46}

/* Link */
.etnps-link{color:#0c51b1;text-decoration:none;font-weight:600;font-size:15px;}
.etnps-link:hover{text-decoration:underline}

/* Pusatkan logo di atas heading Sign in */
.etnps-logo--form{
  display:block;
  margin:0 auto 30px;   /* auto kiri-kanan = center */
  width:96px;           /* opsional: samakan ukuran */
  height:auto;
}

/* ===== Scroll handling untuk form Register saat viewport pendek ===== */
#etnps-register.etnps-form {
  /* Biar tetap proporsional di layar normal */
  max-height: min(680px, calc(100vh - 80px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px; /* sedikit ruang agar scrollbar tidak menimpa teks */
}

/* Kalau layarnya benar-benar pendek, turunkan batasnya lagi */
@media (max-height: 740px) {
  #etnps-register.etnps-form {
    max-height: calc(100vh - 48px);
  }
}

/* (Opsional) rapikan scrollbar di WebKit */
#etnps-register.etnps-form::-webkit-scrollbar {
  width: 8px;
}
#etnps-register.etnps-form::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 8px;
}



/* RESPONSIVE */
@media (max-width:1024px){
  .etnps-login-wrap{grid-template-columns:1fr}
  .etnps-hero{min-height:260px}
  .etnps-hero__content{position:relative;left:auto;top:auto;transform:none;padding:28px 22px}
  .etnps-card{padding:28px 20px}
  .etnps-hero__content h1 {
    font-size: 35px;
    text-align: center;
}

.etnps-hero__content p {
    font-size: 20px;
    text-align: center;
}


.etnps-hero__content {
        position: relative;
        left: auto;
        top: 20%;
        transform: none;
        padding: 28px 22px;
        max-width: 100%;
    }
}
@media (max-width:480px){
  .etnps-viewport{padding:0px}
  .etnps-login-wrap{border-radius:0px;height:auto;min-height:100%}
  .etnps-hero__content h1{font-size:24px}
  .etnps-hero__content p {
    font-size: 16px;
    line-height:22px;
    text-align: center;
}
}

/* ======================================================
   LAYOUT LOGIN & REGISTER (FULL HEIGHT FIX)
   ====================================================== */
.etnps-auth {
  display: grid;
  grid-template-columns: 1fr 500px;
  min-height: 100vh;        /* kunci tinggi penuh layar */
  overflow: hidden;         /* cegah scroll global */
}

/* Cover kiri: tetap pas layar */
.etnps-cover {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;            /* full layar */
  overflow: hidden;
}
.etnps-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Panel kanan: bisa scroll sendiri */
.etnps-panel {
  max-height: 100vh;

  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Form Register: kalau terlalu tinggi, scroll internal */
#etnps-register.etnps-form {
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding-right: 6px; /* beri ruang agar scrollbar tidak menimpa teks */
}

/* Responsif mobile: cover di atas, form di bawah */
@media (max-width: 900px) {
  .etnps-auth {
    grid-template-columns: 1fr;
  }
  .etnps-cover {
    height: 40vh;
    position: relative;
  }
  .etnps-panel {
    max-height: none;
    overflow: visible;
    padding: 0px;
  }
}


* ====== ACTIONS: Remember + Forgot ====== */
.etnps-actions{
  display:grid;
  grid-template-columns: 1fr auto; /* label kiri, link kanan */
  align-items:center;
  column-gap:7px;
  row-gap:5px;
  margin:0px 0 0;
}

/* Label checkbox tetap inline dan sejajar */
.etnps-remember{
  display:inline-flex !important;   /* override .etnps-form label {display:block} */
  align-items:center;
  gap:5px;
  margin:0;
  white-space:nowrap;               /* teks tidak turun baris */
  line-height:1.2;
}

a.etnps-link.etnps-forgot {
    font-size: 12px !important;
}

label.etnps-remember span {
    font-size: 12px;
}

/* Ukuran & baseline checkbox (iOS Safari friendly) */
.etnps-remember input[type="checkbox"]{
  margin:0;
  width:15px;
  height:15px;
  vertical-align:middle;
  accent-color:#b20000;             /* warna centang (browser modern) */
}

/* Link "Forgot" rapih dan tidak menimpa elemen lain */
.etnps-actions .etnps-forgot{
  justify-self:end;                 /* dorong ke kanan di layar lebar */
  white-space:nowrap;
}

/* ——— Breakpoints ——— */

/* Tablet potrait & mobile: tumpuk 2 baris */
@media (max-width: 768px){
  .etnps-actions{
    grid-template-columns: 1fr;     /* baris 1: remember, baris 2: forgot */
  }
  .etnps-actions .etnps-forgot{
    justify-self:start;             /* rata kiri agar tidak ‘menimpa’ */
  }
}

/* iPhone kecil / sangat sempit */
@media (max-width: 420px){
  .etnps-remember span{ font-size:12px; }
  .etnps-actions .etnps-forgot{ font-size:12px; }
  .etnps-remember input[type="checkbox"]{
  margin:0;
  width:15px;
  height:15px;
  vertical-align:middle;
  accent-color:#111827;             /* warna centang (browser modern) */
}
}

/* ===== Modal Notification ===== */
.etnps-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.etnps-modal.is-open {
  opacity: 1;
}

.etnps-modal__dialog {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 90%;
}

.etnps-modal__body {
  padding: 40px 24px;
  text-align: center;
}

@keyframes modalBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}