/* =======================
   THEME & BASICS
======================= */
:root{
  --bg-1:#0b0f16;
  --bg-2:#121826;
  --txt:#E8ECF6;
  --muted:#a7afc0;
  --accent:#56A0FF;
  --accent-2:#8B5CF6;
  --ring: rgba(86,160,255,.35);
}

html,body{background:transparent;color:var(--txt)}
a{text-decoration:none}
.fw-extrabold{font-weight:800}

/* Text gradient */
.text-gradient{
  background: linear-gradient(90deg,#56A0FF,#8B5CF6);
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
}

/* Glass */
.bg-glass,.glass{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  border-radius: 16px;
}

/* Service card hover */
.service-card{
  background: radial-gradient(120% 120% at 100% 0%, rgba(86,160,255,.08), transparent 50%),
              radial-gradient(120% 120% at 0% 100%, rgba(139,92,246,.08), transparent 50%),
              rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{
  transform: translateY(-4px);
  border-color: rgba(86,160,255,.35);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.service-card .icon{font-size:22px}

/* =======================
   GLOBAL GRADIENT (page-home)
======================= */
body.page-home{ background:#0b0f16; }
body.page-home .bg-canvas{
  position: fixed;
  inset: 0;                    /* isi viewport */
  z-index: -1;
  pointer-events: none;
}
body.page-home .bg-canvas::before,
body.page-home .bg-canvas::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(42vw 34vh at 18% 12%, rgba(86,160,255,.28), transparent 62%),
    radial-gradient(48vw 38vh at 82% 0%,  rgba(139,92,246,.28), transparent 62%),
    linear-gradient(180deg, #0b0f16 0%, #0d121b 55%, #121826 100%);
  background-repeat:no-repeat;
  background-attachment:fixed; /* aman saat scroll/zoom */
  opacity:.92;
}
body.page-home .bg-canvas::after{ opacity:.78; transform: translate3d(2vw,-1vh,0); }

@media (max-width: 991.98px){
  body.page-home .bg-canvas::before,
  body.page-home .bg-canvas::after{
    background:
      radial-gradient(60vw 42vh at 20% 14%, rgba(86,160,255,.26), transparent 64%),
      radial-gradient(66vw 44vh at 80% 2%,   rgba(139,92,246,.26), transparent 64%),
      linear-gradient(180deg, #0b0f16 0%, #0d121b 55%, #121826 100%);
  }
}

/* =======================
   HERO
======================= */
.feature-cards{ max-width:1120px; margin-inline:auto; }
.hero-sub  { max-width: 820px; margin:.75rem auto 0; }
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

.btn-primary{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  border:0;
}
.btn-primary:hover{filter:brightness(1.06)}

/* KPI bar */
.kpi-meter{height:6px; background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden}
.kpi-meter>i{display:block; height:100%; width:0; background:linear-gradient(90deg,#56A0FF,#8B5CF6); animation:fill-bar 2.2s ease forwards}
@keyframes fill-bar{to{width:var(--val,68%)}}

/* Marquee */
.fx-scroll{ --speed:26s; overflow:hidden; mask-image: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.fx-scroll .track{ display:flex; gap:.5rem; width:max-content; animation: slide-x var(--speed) linear infinite; }
.fx-scroll:hover .track{ animation-play-state: paused; }
@keyframes slide-x { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Cards */
.fx-card{ position:relative; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.fx-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.45) }
.reveal.in.fx-card{ animation:cardFloat 7s ease-in-out .1s infinite alternate }
@keyframes cardFloat{ from{transform:translateY(-1px)} to{transform:translateY(-6px)} }
.fx-card .fx-shine{ position:absolute; inset:0; pointer-events:none; border-radius:16px;
  background: radial-gradient(120px 60px at 20% 0%, rgba(124,77,255,.08), transparent 60%),
              radial-gradient(120px 60px at 80% 100%, rgba(86,160,255,.08), transparent 60%); mix-blend-mode:screen; opacity:.6;
  animation:shinePan 8s linear infinite; }
@keyframes shinePan{ 0%{background-position:0% 0%, 100% 100%} 50%{background-position:50% 50%, 50% 50%} 100%{background-position:100% 0%, 0% 100%} }

/* Progress tiny */
.progress-anim{ --h:8px; height:var(--h); background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden }
.progress-anim .progress-bar{ width:0; height:100%; background:linear-gradient(90deg,#56A0FF,#8B5CF6); border-radius:999px; box-shadow:0 0 16px rgba(124,77,255,.35); transition:width 1.2s cubic-bezier(.22,1,.36,1); }
.progress-anim.play .progress-bar{ width: var(--w,72%) }

/* Meter besar (kartu Terukur) */
.meter{ --h: 8px; position: relative; height: var(--h); background: rgba(255,255,255,.10); border-radius: 999px; overflow: hidden; isolation:isolate; }
.meter .bar{ position:absolute; inset:0; width: 0%; background:linear-gradient(90deg,#56A0FF,#8B5CF6); border-radius: 999px; box-shadow:0 0 16px rgba(124,77,255,.35); transition: width 900ms cubic-bezier(.22,1,.36,1); }
.meter .sweep{ position:absolute; inset:0; background: radial-gradient(60px 8px at 0% 50%, rgba(255,255,255,.65), transparent 60%); mix-blend-mode:screen; transform: translateX(-100%); animation: sweep 2.2s linear infinite; opacity:.75; }
@keyframes sweep{ to { transform: translateX(120%); } }

/* ===========================
   STABILITY TIMELINE (kartu “Stabil”)
=========================== */
.stability-wrap{
  --gap: 6px;
  --h: 10px;
  position: relative;
  width: 100%;
  max-width: 920px;           /* batasi supaya tidak melebar */
  margin-inline: auto;
  padding-top: .75rem;
}

.stability-timeline{
  height: var(--h);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  padding: 6px 10px;
  overflow: hidden;
}
.stability-timeline .track{
  display:flex; align-items:center; gap:var(--gap);
}
.stability-timeline .tick{
  flex: 0 0 calc((100% - (var(--n,36) - 1) * var(--gap)) / var(--n,36));
  height: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  transform-origin:center;
  opacity:.75;
  animation: tickGrow .7s ease both;
}
.stability-timeline .tick.peak{ background: linear-gradient(90deg,#56A0FF,#8B5CF6); opacity:1; box-shadow:0 0 10px rgba(124,77,255,.35); }
.stability-timeline .tick.drop{ background: linear-gradient(90deg,#ffb36b,#ff6b6b); opacity:.95; }
@keyframes tickGrow{ from{transform:scaleY(.3);opacity:.2} to{transform:scaleY(1);opacity:1} }

/* Badge kecil di tengah */
.stability-badge{
  position:absolute; left:50%; top:-12px; transform:translateX(-50%);
  font-size:.75rem; padding:4px 10px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px; white-space:nowrap; color:var(--txt);
}

/* Mini-card “Terukur” melayang */
.stability-float{ position:absolute; left:12px; top:-6px; width:240px; max-width:85%; }
.stability-float .mini{
  border-radius: 14px; padding: 12px;
  background: rgba(14,18,26,.8); border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.stability-float .progress-anim{ --h:6px; }

/* Responsif: mini-card pindah ke bawah */
@media (max-width: 991.98px){
  .stability-float{ position: static; width: 100%; max-width:100%; margin-top: 12px; }
}

/* Misc */
.navbar.sticky-top{
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, transparent 86%, #0b0f16 14%);
}

/* =========================
   STABILITY (final override)
   ========================= */

/* Kartu Stabil: pembungkus */
.stability-wrap{
  --gap: 6px;                /* jarak antar tick */
  --h: 10px;                 /* tinggi track */
  --pad: 12px;               /* padding kanan-kiri track */
  position: relative;
  width: 100%;
  max-width: 900px;          /* tidak melebar */
  margin: 6px auto 0;        /* selalu center */
  padding: 28px 10px 14px;   /* ruang atas untuk badge */
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;          /* rapi */
}

/* Rail + tick */
.stability-timeline{
  height: var(--h);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  padding: 0 var(--pad);
  position: relative;
}

.stability-timeline .track{
  position: absolute; inset: 0 var(--pad);
  height: var(--h);
  display: grid;
  grid-template-columns: repeat(var(--n,48), 1fr); /* tick rata */
  align-items: center;
  gap: var(--gap);
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}
.stability-timeline.play .track{ opacity:1; transform:none; }

.stability-timeline .tick{
  height: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  transform-origin: center;
  animation: tickPulse 1.8s ease-in-out infinite;
  animation-play-state: paused;
}
.stability-timeline.play .tick{ animation-play-state: running; }

.stability-timeline .tick.peak{
  background: linear-gradient(90deg,#56A0FF,#8B5CF6);
  box-shadow: 0 0 12px rgba(124,77,255,.35);
  opacity: 1;
}
.stability-timeline .tick.drop{
  background: linear-gradient(90deg,#ffb36b,#ff6b6b);
  opacity: .95;
}

@keyframes tickPulse{
  0%,100%{ transform: scaleY(1) }
  50%    { transform: scaleY(1.5) }
}

/* Badge kecil – SELALU di atas rail, tidak menghalangi klik */
.stability-badge{
  position: absolute;
  left: 50%;
  top: 6px;                             /* di atas rail */
  transform: translateX(-50%);
  padding: 4px 10px;
  font-size: .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--txt);
  white-space: nowrap;
  pointer-events: none;                 /* tidak menutupi apa pun */
}

/* Mini tile opsional (kalau dipakai) – rapikan supaya tidak “kabur” */
.stability-float{
  position: absolute;
  left: 12px;
  top: -4px;
  transform: translateY(-100%);         /* mengambang di atas */
}
.stability-float .mini{
  width: clamp(200px, 32vw, 260px);
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(14,18,26,.82);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* Responsif */
@media (max-width: 991.98px){
  .stability-wrap{ max-width: 100%; }
  .stability-float{ position: static; transform:none; margin-top: 10px; }
  .stability-float .mini{ width: 100%; }
}

/* ==== STABLE HEATMAP ==== */
.hm-wrap{
  position: relative;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px;
}

.hm-grid{
  --gap: 4px;
  --h: 12px;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--gap);
  height: var(--h);
  align-items: center;
  isolation: isolate;
}

/* Band "jam emas" — dibangun oleh JS melalui CSS var */
.hm-grid::before{
  content:"";
  position:absolute; inset:0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(86,160,255,.12), rgba(139,92,246,.12));
  transform: translateX(var(--peak-x,0)) scaleX(var(--peak-w,0));
  transform-origin: left center;
  z-index: 0; /* di bawah sel */
}

/* Sel heatmap */
.hm-cell{
  height: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.08); /* default (kosong) */
  opacity: .85;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transform: scaleY(.92);
  animation: hmIn .5s ease both;
  z-index: 1;
}
@keyframes hmIn{ from{ transform:scaleY(0); opacity:0 } to{ transform:scaleY(.92); opacity:1 } }

/* State warna */
.hm-cell.ok   { background: linear-gradient(90deg,#2EC4B6,#56A0FF); }
.hm-cell.busy { background: linear-gradient(90deg,#FFD166,#FF9F1C); }
.hm-cell.drop { background: linear-gradient(90deg,#EF476F,#8B5CF6); }

/* Titik legend */
.hm-dot{ display:inline-block; width:.7rem; height:.7rem; border-radius:50% }
.hm-dot.hm-ok   { background: linear-gradient(90deg,#2EC4B6,#56A0FF) }
.hm-dot.hm-busy { background: linear-gradient(90deg,#FFD166,#FF9F1C) }
.hm-dot.hm-drop { background: linear-gradient(90deg,#EF476F,#8B5CF6) }

/* Responsif */
@media (max-width: 575.98px){
  .hm-grid{ --gap:3px; --h:10px; }
}

/* ===== Stabil: layout bersih dan tidak melebar ===== */
.stability-wrap{
  position: relative;
  max-width: 920px;       /* batasi lebar agar tidak melebar ke tepi */
  margin: 8px auto 0;
}

/* Badge di kanan atas area card (parent card-body adalah relatif by default dari bootstrap).
   Jika butuh lebih presisi, bungkus badge dalam .stability-wrap dan ubah ke absolute. */
.stability-range{ user-select:none; }

/* Timeline bar */
.stability-timeline{
  --h: 14px;
  --gap: 8px;
  position: relative;
  height: var(--h);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  padding: 8px 12px;     /* memberi ruang sisi untuk track */
}

.stability-timeline .track{
  display: grid;
  grid-template-columns: repeat(var(--n,36), 1fr);
  gap: var(--gap);
  align-items: center;
  height: calc(var(--h) - 8px);
  opacity: 0;
  transform: translateY(6px);
  transition: .5s ease;
}
.stability-timeline.play .track{ opacity: 1; transform: none; }

.stability-timeline .tick{
  height: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  opacity: .75;
  transform-origin: center;
  animation: tickPulse 1.8s ease-in-out infinite;
  animation-play-state: paused;
}
.stability-timeline.play .tick{ animation-play-state: running; }
@keyframes tickPulse{
  0%,100%{ transform: scaleY(1) }
  50%    { transform: scaleY(1.5) }
}

/* penanda peak & drop */
.stability-timeline .tick.peak{
  background: linear-gradient(90deg,#56A0FF,#8B5CF6);
  box-shadow: 0 0 14px rgba(124,77,255,.35);
  opacity: 1;
}
.stability-timeline .tick.drop{
  background: linear-gradient(90deg,#ffb36b,#ff6b6b);
  opacity: .95;
}

/* Mini floating tile */
.stability-float{
  position: absolute;
  left: 10px;
  bottom: -56px;                /* menempel di bawah timeline */
  width: 260px;
  max-width: 80%;
}
.stability-float .mini{
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(12,15,22,.6);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* Responsif: mini tile jadi in-flow pada layar kecil */
@media (max-width: 991.98px){
  .stability-float{
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
  }
}

/* =========================
   STABILITY CARD (scoped)
   ========================= */
.stability-card .stb-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; margin-bottom:.75rem;
}
.stability-card .stb-badge{
  font-size:.75rem; padding:.35rem .6rem; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08); color:var(--txt);
  white-space:nowrap;
}

/* Timeline wrapper */
.stability-card .stb-timeline{
  --h: 12px;         /* tinggi garis utama */
  --gap: 6px;        /* jarak antar tick */
  --scale: 20px;     /* tinggi skala tipis di atas */
  position:relative; border-radius:14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  padding: 14px 16px 12px;
  overflow:hidden;
}

/* garis utama */
.stability-card .stb-timeline .line{
  position:relative; height:var(--h);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.08));
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}

/* shimmering halus */
.stability-card .stb-timeline .sweep{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60px 8px at 0% 50%, rgba(255,255,255,.55), transparent 60%);
  mix-blend-mode:screen; transform: translateX(-100%);
  animation: stb-sweep 2.8s linear infinite;
  opacity:.7;
}
@keyframes stb-sweep{ to{ transform:translateX(120%); } }

/* kontainer ticks */
.stability-card .stb-timeline .ticks{
  position:absolute; inset:0 10px;
  display:flex; align-items:center; gap:var(--gap);
}

/* tiap tick */
.stability-card .stb-timeline .tick{
  flex: 0 0 calc((100% - (var(--n,60) - 1) * var(--gap)) / var(--n,60));
  height: 100%; border-radius:999px; opacity:.7;
  background: rgba(255,255,255,.18);
  transform-origin:center;
  animation: stb-pulse 1.5s ease-in-out infinite;
  animation-play-state: paused;
}
.stability-card .stb-timeline.play .tick{ animation-play-state:running; }
@keyframes stb-pulse{ 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.45)} }

.stability-card .tick.ok   { background: rgba(255,255,255,.18); }
.stability-card .tick.peak { background: linear-gradient(90deg,#56A0FF,#8B5CF6); box-shadow:0 0 12px rgba(124,77,255,.35); opacity:1; }
.stability-card .tick.drop { background: linear-gradient(90deg,#ffb36b,#ff6b6b); opacity:.95; }

/* skala tipis di atas (mark jam) */
.stability-card .stb-timeline .scale{
  position:absolute; left:16px; right:16px; top:6px; height:var(--scale);
  pointer-events:none; opacity:.45;
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.25) 0 1px,
      transparent 1px calc(100%/24)
    );
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* legend */
.stability-card .stb-legend .dot{
  width:.7rem; height:.7rem; border-radius:999px; display:inline-block; margin-right:.4rem;
}
.stability-card .dot-ok   { background: linear-gradient(90deg,#7f8ea3,#a6b0c2); }
.stability-card .dot-peak { background: linear-gradient(90deg,#56A0FF,#8B5CF6); }
.stability-card .dot-drop { background: linear-gradient(90deg,#ffb36b,#ff6b6b); }

/* responsif */
@media (max-width: 575.98px){
  .stability-card .stb-timeline{ padding:12px 12px 10px; }
  .stability-card .stb-timeline .scale{ top:4px }
}

/* ---------- MOBILE TWEAKS: hero, navbar auth, footer ---------- */

/* Paksa baris baru di mobile; desktop kembali inline */
.break-hero { display: block; }
@media (min-width: 992px){
  .break-hero { display: inline; }
}

/* Kecilkan paragraf lead di hero untuk mobile */
@media (max-width: 575.98px){
  .hero-sub{
    font-size: .95rem;     /* lebih kecil */
    line-height: 1.5;
    margin-top: .5rem;
  }
}

/* Spasi tombol "Log in" & "Sign Up" saat menu collapse (mobile) */
@media (max-width: 991.98px){
  .navbar .navbar-nav { gap: .5rem; }          /* spasi antar item */
  .navbar .navbar-nav .btn {                   /* padding lebih enak di jempol */
    padding: .5rem .9rem;
  }
  /* Jika dua tombol berurutan, tambah sedikit jarak */
  .navbar .navbar-nav .btn + .btn { margin-left: .5rem; }
}

/* Footer di mobile: rata tengah + link ditumpuk rapi */
.site-footer .container { row-gap: .5rem; }
@media (max-width: 575.98px){
  .site-footer .container{
    justify-content: center !important;
    text-align: center;
  }
  .site-footer .container > small{
    order: 2;                  /* teks © di bawah link */
    width: 100%;
    margin-top: .35rem;
  }
  .site-footer .container > .d-flex{
    order: 1;                  /* link di atas */
    width: 100%;
    justify-content: center;
    gap: 1rem;
  }
}

/* --- Header login terpusat --- */
.login-head{
  display:grid;
  place-items:center;
  gap:10px;
}

/* Logo + nudge halus ke kanan */
.login-logo{
  height: 32px;            /* sesuaikan bila perlu */
  display:block;
  transform: translateX(var(--logo-nudge, 3px)); /* geser halus ke kanan */
}

/* Progress mini di bawah logo tetap center */
.login-meter{ margin-inline:auto; }


/* --- Header login terpusat --- */
.login-head{
  display:grid;
  place-items:center;
  gap:10px;
}

/* Logo + nudge halus ke kanan */
.login-logo{
  height: 32px;            /* sesuaikan bila perlu */
  display:block;
  transform: translateX(var(--logo-nudge, 3px)); /* geser halus ke kanan */
}

/* Progress mini di bawah logo tetap center */
.login-meter{ margin-inline:auto; }

:root { --logo-nudge: 3px; }        /* desktop */
@media (max-width: 575.98px){
  :root { --logo-nudge: 2px; }      /* mobile */
}

/* Pusatkan brand + scanner */
.login-brand{
  display:flex;
  flex-direction:column;
  align-items:center;        /* center horizontal */
  justify-content:center;    /* center vertical di blok itu */
  gap:10px;
  margin-bottom:8px;
  width:100%;
  text-align:center;
}

/* Logo benar-benar center */
.brand-logo{
  height:34px;
  display:block;
  margin:0 auto;             /* pastikan tidak ada offset kiri/kanan */
  filter: drop-shadow(0 6px 18px rgba(124,77,255,.25))
          drop-shadow(0 2px 8px rgba(86,160,255,.25));
}

/* Bar scanner selalu center dan proporsional */
.scanbar{
  width:min(260px, 68%);     /* responsif */
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
  margin-inline:auto;        /* kunci center */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* “Lampu” yang menyapu */
.scanbar i{
  position:absolute;
  left:0; top:0; bottom:0;
  width:22%;
  border-radius:999px;
  background:linear-gradient(90deg,#56A0FF,#8B5CF6);
  box-shadow:0 0 16px rgba(124,77,255,.45), 0 0 8px rgba(86,160,255,.45);
  animation:scanSweep 2.6s ease-in-out infinite;
  opacity:.95;
}

/* Animasi menyapu kiri–kanan */
@keyframes scanSweep{
  0%   { transform: translateX(0%); }
  50%  { transform: translateX(355%); } /* cukup panjang agar terlihat menyapu seluruh bar */
  100% { transform: translateX(0%); }
}

/* Judul di tengah (opsional) */
.login-title{
  margin: 6px 0 14px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing:.4px;
  text-align:center;
}

/* --- Head / center alignment --- */
.login-head{
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap:.35rem; margin-bottom:.5rem;
}
.login-logo{
  display:block; height:38px; /* sesuaikan */
  margin-inline:auto; filter: drop-shadow(0 4px 18px rgba(139,92,246,.25));
}

/* --- Title --- */
.login-title{
  font-weight:800;
  letter-spacing:.12em;       /* kesan “console” */
  text-transform:uppercase;
}

/* --- Meter / “scan bar” --- */
.login-meter{
  position:relative;
  width:min(240px, 70%);      /* responsif */
  height:10px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  margin:2px auto 10px;
}
.login-meter::before{
  /* garis-garis kecil */
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.15) 0 8px,
      transparent 8px 16px
    );
  opacity:.35;
}
.login-meter__tick{
  position:absolute; top:0; left:-20%;
  width:18%; height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, #56A0FF, #8B5CF6);
  box-shadow: 0 0 24px rgba(124,77,255,.45);
  animation: scan 2.4s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes scan{
  from{ transform: translateX(0) }
  to  { transform: translateX(600%) }
}

/* --- Form spacing --- */
.login-form{ margin-top:.75rem; }
.login-form .form-control{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color:#E8ECF6;
}
.login-form .form-control:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem var(--ring);
}

/* --- Footer links (kiri–kanan rapi, mobile jadi center) --- */
.login-footer{
  margin-top:.75rem;
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
}
@media (max-width: 575.98px){
  .login-footer{ flex-direction:column; gap:.5rem; text-align:center; }
  .login-meter{ width: 76%; }
}

/* Fallback: kalau JS tidak aktif / error, tetap tampilkan konten .reveal */
html:not(.has-anim) .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* (opsional) bila JS aktif, kita kunci lagi animasinya seperti semula */
html.has-anim .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
html.has-anim .reveal.in {
  opacity: 1;
  transform: none;
}