*{box-sizing:border-box;margin:0;padding:0}html{font-family:Arial,Helvetica,sans-serif}body{min-height:100vh;color:#fff;background:radial-gradient(circle at top right,rgba(255,0,0,.17),transparent 35%),linear-gradient(135deg,#790000,#b50000 48%,#720000);display:grid;place-items:center;padding:24px}.login-shell{width:100%;max-width:470px}.login-card{position:relative;padding:30px;border:1px solid rgba(255,255,255,.23);border-radius:28px;background:linear-gradient(145deg,rgba(105,0,0,.94),rgba(55,0,0,.95));box-shadow:0 25px 70px rgba(0,0,0,.35);isolation:isolate}.login-card:before{content:"";position:absolute;inset:-3px;border-radius:30px;padding:2px;background:conic-gradient(from var(--a),#ff004c,#ff7a00,#ffe600,#35ff00,#00ffd5,#00a2ff,#6b00ff,#ff00d4,#ff004c);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:spin 4s linear infinite;filter:drop-shadow(0 0 7px rgba(255,255,255,.7))}.login-logo{display:flex;justify-content:center;margin-bottom:20px}.login-logo img{width:220px;max-width:75%;height:auto;display:block;border-radius:8px;padding:3px;background:linear-gradient(#000,#000) padding-box,linear-gradient(90deg,#ff004c,#ffad00,#fff000,#00ff88,#00d9ff,#7300ff,#ff00c8,#ff004c) border-box;border:2px solid transparent;background-size:100% 100%,400% 100%;animation:logo 3s linear infinite;box-shadow:0 0 18px rgba(255,0,120,.35)}.eyebrow{text-align:center;color:#ffd34f;font-size:12px;font-weight:800;letter-spacing:2px;margin-bottom:7px}.login-card h1{text-align:center;font-size:34px;line-height:1.1;margin-bottom:8px}.login-copy{text-align:center;color:#f5dede;font-size:14px;line-height:1.55;margin-bottom:24px}label{display:block;font-size:13px;font-weight:800;margin:15px 0 8px}input{width:100%;height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.22);outline:none;background:#3f0505;color:#fff;padding:0 14px;font-size:15px;font-weight:700}input:focus{border-color:#ffc84b;box-shadow:0 0 0 3px rgba(255,200,75,.13)}.password-wrap{position:relative}.password-wrap input{padding-right:52px}.password-wrap button{position:absolute;right:6px;top:6px;width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}.login-message{min-height:21px;margin-top:12px;font-size:12px;color:#ffd15d;text-align:center}.login-message.error{color:#ffb1b1}.login-button{width:100%;height:52px;border:0;border-radius:14px;background:#060606;color:#fff;font-weight:900;cursor:pointer;transition:.18s ease}.login-button:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.25)}.login-button:disabled{opacity:.58;cursor:wait;transform:none}.security-note{text-align:center;color:#d9bcbc;font-size:11px;line-height:1.45;margin-top:17px}@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes spin{to{--a:360deg}}@keyframes logo{to{background-position:0 0,400% 50%}}@media(max-width:520px){body{padding:14px}.login-card{padding:22px 18px;border-radius:22px}.login-card h1{font-size:28px}} /* =========================================================

/* =========================================================
   HS GROUP TITLE
========================================================= */

.login-brand-title {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  width: fit-content;

  margin: 10px auto 14px;
  padding: 12px 24px 14px;

  border: 3px solid transparent;
  border-radius: 7px;

  background:
    linear-gradient(
      180deg,
      #740000,
      #3b0000
    ) padding-box,

    linear-gradient(
      90deg,
      #00ffff,
      #ffe600,
      #ff1744,
      #ff00cc,
      #00ffff
    ) border-box;

  background-size:
    100% 100%,
    250% 250%;

  animation:
    hsBorderMove 6s linear infinite;

  box-shadow:
    0 0 8px rgba(0,255,255,.75),
    0 0 16px rgba(255,0,80,.45),
    inset 0 0 10px rgba(255,255,255,.06);

  overflow: hidden;
}


@keyframes hsBorderMove {
  0% {
    background-position:
      0 0,
      0% 50%;
  }

  100% {
    background-position:
      0 0,
      200% 50%;
  }
}


.login-brand-title span {
  display: inline-block;

  font-family:
    "Arial Black",
    Impact,
    "Trebuchet MS",
    sans-serif;

  font-size:
    clamp(34px, 4.5vw, 48px);

  line-height: 1;

  font-weight: 900;
  font-style: italic;

  letter-spacing: -1px;

  transform:
    skewX(-7deg);

  text-transform:
    uppercase;
}


/* HS GOLD METALLIC */

.hs-text {
  color: #ffd600;

  -webkit-text-stroke:
    1px #fff59a;

  text-shadow:
    0 1px 0 #ffe765,
    0 2px 0 #ffc400,
    0 3px 0 #d88900,
    0 4px 0 #7c4200,

    0 0 6px rgba(255,255,180,.95),
    0 0 12px rgba(255,214,0,.85),
    0 0 18px rgba(255,120,0,.65);
}


/* GROUP SILVER METALLIC */

.group-text {
  color: #ffffff;

  -webkit-text-stroke:
    1px #eeeeee;

  text-shadow:
    0 1px 0 #ffffff,
    0 2px 0 #d6d6d6,
    0 3px 0 #9c9c9c,
    0 4px 0 #4d4d4d,

    0 0 7px rgba(255,255,255,.90),
    0 0 13px rgba(255,255,255,.55),
    0 0 20px rgba(255,0,90,.65);
}


/* SHINE EFFECT */

.login-brand-title::after {
  content: "";

  position: absolute;

  top: 0;
  left: -45%;

  width: 34%;
  height: 100%;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    );

  transform:
    skewX(-20deg);

  animation:
    hsTitleShine 4.5s ease-in-out infinite;
}


@keyframes hsTitleShine {
  0%,
  62% {
    left: -45%;
  }

  100% {
    left: 125%;
  }
}


/* =========================================================
   INPUT - NEON RED
========================================================= */

.login-card input,
.login-wrapper input,
.login-box input {
  min-height: 48px;

  border:
    2px solid rgba(255,55,85,.75) !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      180deg,
      rgba(35,0,0,.92),
      rgba(20,0,0,.95)
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 0 5px rgba(255,23,68,.35),
    inset 0 0 7px rgba(255,0,55,.08);

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}


.login-card input:focus,
.login-wrapper input:focus,
.login-box input:focus {
  border-color:
    #ff1744 !important;

  outline:
    none !important;

  box-shadow:
    0 0 6px #ff1744,
    0 0 13px rgba(255,23,68,.65),
    0 0 20px rgba(255,0,60,.30),

    inset 0 0 8px rgba(255,0,55,.10);

  transform:
    translateY(-1px);
}


.login-card input::placeholder,
.login-wrapper input::placeholder,
.login-box input::placeholder {
  color:
    #9d9d9d !important;
}


/* =========================================================
   LOGIN BUTTON - FINAL
========================================================= */

.login-btn,
button[type="submit"] {
  position: relative;
  overflow: hidden;

  display: flex !important;
  align-items: center;
  justify-content: center;

  gap: 18px;

  width: 100%;
  min-height: 58px;

  margin-top: 18px;

  border:
    2px solid #ff3150 !important;

  border-radius:
    18px !important;

  background:
    linear-gradient(
      180deg,
      #1d1d1d 0%,
      #090909 50%,
      #000000 100%
    ) !important;

  color:
    #ffffff !important;

  cursor:
    pointer;

  box-shadow:
    0 0 6px #ff1744,
    0 0 14px rgba(255,23,68,.70),
    0 0 25px rgba(255,0,65,.35),

    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -5px 10px rgba(255,0,50,.15);

  transition:
    transform .15s ease,
    filter .15s ease,
    box-shadow .15s ease;
}


/* LOGIN LABEL */

.login-label {
  position: relative;
  z-index: 2;

  font-family:
    "Arial Black",
    Impact,
    sans-serif;

  font-size:
    clamp(20px, 3vw, 27px);

  font-weight: 900;
  font-style: italic;

  letter-spacing:
    2px;

  color:
    #ffffff;

  text-shadow:
    0 1px 0 #ffffff,
    0 2px 0 #bbbbbb,
    0 3px 0 #666666,

    0 0 7px rgba(255,255,255,.95),
    0 0 14px rgba(255,30,80,.70);
}


/* ARROWS */

.login-arrow {
  position: relative;
  z-index: 2;

  color:
    #ff3150;

  font-family:
    "Arial Black",
    Impact,
    sans-serif;

  font-size:
    clamp(22px, 3vw, 30px);

  font-weight:
    900;

  text-shadow:
    0 0 6px #ff1744,
    0 0 13px rgba(255,23,68,.85);
}


/* TOP GLOW LINE */

.login-btn::before,
button[type="submit"]::before {
  content: "";

  position: absolute;

  top: 0;
  left: 9%;

  width: 82%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ffffff,
      #ff1744,
      #ffffff,
      transparent
    );

  box-shadow:
    0 0 7px #ff1744,
    0 0 13px rgba(255,23,68,.75);
}


/* MOVING SHINE */

.login-btn::after,
button[type="submit"]::after {
  content: "";

  position: absolute;

  top: 0;
  left: -40%;

  width: 28%;
  height: 100%;

  background:
    linear-gradient(
      115deg,
      transparent,
      rgba(255,255,255,.22),
      transparent
    );

  transform:
    skewX(-25deg);

  animation:
    loginButtonShine 4s ease-in-out infinite;
}


@keyframes loginButtonShine {
  0%,
  68% {
    left: -40%;
  }

  100% {
    left: 125%;
  }
}


/* HOVER */

.login-btn:hover,
button[type="submit"]:hover {
  transform:
    translateY(-2px);

  filter:
    brightness(1.12);

  box-shadow:
    0 0 8px #ff1744,
    0 0 20px rgba(255,23,68,.85),
    0 0 32px rgba(255,0,65,.45),

    inset 0 1px 0 rgba(255,255,255,.30);
}


/* PRESSED */

.login-btn:active,
button[type="submit"]:active {
  transform:
    translateY(2px)
    scale(.99);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 520px) {

  .login-brand-title {
    gap: 8px;

    padding:
      10px 15px 12px;
  }

  .login-brand-title span {
    font-size:
      31px;
  }

  .login-btn,
  button[type="submit"] {
    min-height:
      52px;

    gap:
      12px;
  }

}

/* =========================================================
   FINAL BACKGROUND + GLASS LOGIN PANEL
========================================================= */

html,
body {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh !important;

  background:
    url("./assets/login-bg.webp")
    center center / cover no-repeat fixed !important;
}

/* Keep the actual login wrapper transparent */
.login-shell {
  background: transparent !important;
}

/* Transparent red glass panel */
.login-card {
  position: relative;

  background:
    linear-gradient(
      145deg,
      rgba(110, 0, 0, 0.58),
      rgba(40, 0, 0, 0.48)
    ) !important;

  backdrop-filter: blur(3px) saturate(125%);
  -webkit-backdrop-filter: blur(3px) saturate(125%);
}

/* Inputs stay readable above the background */
.login-card input {
  background:
    linear-gradient(
      180deg,
      rgba(35, 0, 0, 0.88),
      rgba(15, 0, 0, 0.92)
    ) !important;

  color: #ffffff !important;
}

/* Mobile background focus */
@media (max-width: 768px) {
  body {
    background-position: 68% center !important;
    background-attachment: scroll !important;
  }
}

/* =========================================================
   MOON SPARKLE + SHOOTING STAR FINAL
========================================================= */

body {
  position: relative;
  overflow: hidden;
}


/* =========================================================
   KILAU BULAN - LEBIH KECIL / TIDAK MELEBAR
========================================================= */

body::before {
  content: "";

  position: fixed;

  /* SESUAI POSISI BULAN DI BACKGROUND */
  top: 3.5%;
  left: 4.5%;

  /* AREA EFEK DIPERKECIL */
  width: 24vw;
  height: 24vw;

  max-width: 330px;
  max-height: 330px;

  min-width: 220px;
  min-height: 220px;

  pointer-events: none;

  z-index: 1;

  border-radius: 50%;

  background:

    radial-gradient(
      circle at 24% 26%,
      #ffffff 0 2px,
      rgba(255,255,255,.95) 3px,
      transparent 8px
    ),

    radial-gradient(
      circle at 56% 20%,
      #ffffff 0 2px,
      rgba(255,220,220,.95) 3px,
      transparent 9px
    ),

    radial-gradient(
      circle at 74% 42%,
      #ffffff 0 2px,
      rgba(255,190,190,.90) 3px,
      transparent 9px
    ),

    radial-gradient(
      circle at 40% 54%,
      #ffffff 0 2px,
      rgba(255,220,220,.95) 3px,
      transparent 8px
    ),

    radial-gradient(
      circle at 67% 69%,
      #ffffff 0 2px,
      rgba(255,190,190,.92) 3px,
      transparent 9px
    ),

    radial-gradient(
      circle at 31% 76%,
      #ffffff 0 1.5px,
      rgba(255,210,210,.90) 3px,
      transparent 8px
    ),

    radial-gradient(
      circle at center,
      rgba(255,255,255,.08) 0%,
      rgba(255,60,60,.08) 45%,
      transparent 72%
    );

  filter:
    drop-shadow(0 0 4px #ffffff)
    drop-shadow(0 0 8px rgba(255,255,255,.85))
    drop-shadow(0 0 14px rgba(255,40,40,.80));

  animation:
    moonTwinkleFinal 3.5s ease-in-out infinite;

}


/* =========================================================
   ANIMASI KILAU BULAN
========================================================= */

@keyframes moonTwinkleFinal {

  0%,
  100% {
    opacity: .40;

    transform:
      scale(.98);
  }

  18% {
    opacity: 1;

    transform:
      scale(1.015);
  }

  35% {
    opacity: .55;

    transform:
      scale(1);
  }

  52% {
    opacity: .95;

    transform:
      scale(1.025);
  }

  72% {
    opacity: .45;

    transform:
      scale(.99);
  }

  88% {
    opacity: 1;

    transform:
      scale(1.015);
  }

}


/* =========================================================
   ACCESSIBILITY
   HENTIKAN ANIMASI JIKA USER MEMILIH REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  body::before,
  body::after {
    animation: none !important;
  }

}

/* =========================================================
   METEOR 3D - FINAL ULTRA SMOOTH
========================================================= */

.meteor-layer {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  height: 46vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;

  /* buat layer GPU sendiri */
  transform: translateZ(0);
  contain: layout paint;
}


/* =========================================================
   BADAN METEOR
========================================================= */

.meteor {
  position: absolute;

  width: 120px;
  height: 10px;

  opacity: 0;

  border-radius: 999px;

  transform-origin: left center;

  /*
     GPU optimization.
     Meteor hanya mengubah transform + opacity.
  */
  will-change: transform, opacity;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transform: translateZ(0);

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,240,220,.95) 6%,
      rgba(255,140,80,.85) 16%,
      rgba(255,55,35,.65) 34%,
      rgba(255,20,20,.28) 58%,
      rgba(255,0,0,.08) 80%,
      transparent 100%
    );

  /*
     Drop shadow dikurangi.
     Ini jauh lebih ringan dibanding 3 drop-shadow.
  */
  filter:
    drop-shadow(0 0 7px rgba(255,100,60,.75));

  animation-name: meteorNatural;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


/* =========================================================
   KEPALA METEOR
========================================================= */

.meteor::after {
  content: "";

  position: absolute;

  left: -5px;
  top: 50%;

  width: 14px;
  height: 14px;

  transform: translateY(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 32% 28%,
      #ffffff 0%,
      #fff7e8 12%,
      #ffd09b 25%,
      #ff8a45 42%,
      #ff3b1f 60%,
      #b51208 78%,
      #4b0502 100%
    );

  /*
     box-shadow lebih murah daripada
     filter blur bergerak
  */
  box-shadow:
    0 0 4px rgba(255,255,255,.95),
    0 0 9px rgba(255,170,100,.75),
    0 0 15px rgba(255,50,20,.45);
}


/* =========================================================
   EKOR METEOR
========================================================= */

.meteor::before {
  content: "";

  position: absolute;

  left: 7px;
  top: 50%;

  width: 110px;
  height: 18px;

  /*
     perspective + rotateY DIHAPUS
     supaya rendering lebih ringan
  */
  transform: translateY(-50%);

  transform-origin: left center;

  clip-path:
    polygon(
      0 34%,
      100% 48%,
      100% 52%,
      0 66%
    );

  background:
    linear-gradient(
      90deg,
      rgba(255,245,225,.55) 0%,
      rgba(255,170,105,.45) 14%,
      rgba(255,80,40,.32) 32%,
      rgba(255,35,25,.18) 55%,
      rgba(255,10,10,.07) 76%,
      transparent 100%
    );

  /*
     JANGAN gunakan filter:blur()
     pada objek yang bergerak.
  */
  opacity: .88;
}


/* =========================================================
   POSISI + TIMING
========================================================= */

.meteor-1 {
  top: 7%;
  left: 8%;
  width: 78px;

  animation-delay: 0s;
  animation-duration: 7.2s;
}

.meteor-2 {
  top: 14%;
  left: 30%;
  width: 105px;

  animation-delay: -2.1s;
  animation-duration: 8.1s;
}

.meteor-3 {
  top: 6%;
  left: 54%;
  width: 88px;

  animation-delay: -4.4s;
  animation-duration: 7.5s;
}

.meteor-4 {
  top: 18%;
  left: 72%;
  width: 115px;

  animation-delay: -1.2s;
  animation-duration: 8.7s;
}

.meteor-5 {
  top: 27%;
  left: 18%;
  width: 68px;

  animation-delay: -5.5s;
  animation-duration: 7.9s;
}

.meteor-6 {
  top: 31%;
  left: 48%;
  width: 92px;

  animation-delay: -3.2s;
  animation-duration: 8.4s;
}

.meteor-7 {
  top: 11%;
  left: 87%;
  width: 72px;

  animation-delay: -6.3s;
  animation-duration: 9s;
}


/* =========================================================
   GERAKAN METEOR
   HANYA TRANSFORM + OPACITY
========================================================= */

@keyframes meteorNatural {

  0% {
    opacity: 0;

    transform:
      translate3d(120px, -110px, 0)
      rotate(-38deg);
  }

  6% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  94% {
    opacity: 0;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(-330px, 330px, 0)
      rotate(-38deg);
  }
}


/* LOGIN TETAP PALING DEPAN */

.login-shell,
.login-card {
  position: relative;
  z-index: 10;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .meteor-layer {
    height: 42vh;
  }

  .meteor {
    width: 65px;
    height: 3px;
  }

  .meteor::after {
    width: 7px;
    height: 7px;
  }

  .meteor::before {
    width: 65px;
    height: 12px;
  }
}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

  .meteor {
    animation: none !important;
    display: none;
  }

}