/* ================= GLOBAL ================= */
*{
  box-sizing: border-box;
}

body{
  margin:0;
  font-family:'Poppins',sans-serif;

   background: radial-gradient(circle at 20% 10%, rgba(120,160,255,0.25), transparent 40%),
              radial-gradient(circle at 90% 90%, rgba(120,160,255,0.15), transparent 40%),
              linear-gradient(
                135deg,
                #0f1f4b 0%,
                #1f3f8a 40%,
                #2f5fc2 70%,
                #1a3a7a 100%
              );
}

/* ================= CONTAINER ================= */
.container{
  max-width:900px;
  margin:80px auto;
  padding:45px;

    background: #8b6b2e; /* 🔥 gold gelap elegan */

  border-radius:24px;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.6),
    inset 0 2px 12px rgba(255,255,255,0.15);

  color:#f8fafc; /* teks jadi terang */
}

/* ================= TOP LOGOS ================= */
.top-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;

  margin-bottom:10px;
}

.top-logos img{
  height:65px;

  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.6))
    drop-shadow(0 0 10px rgba(250,204,21,0.3));

  transition: all 0.3s ease;
}

/* hover biar hidup dikit */
.top-logos img:hover{
  transform: translateY(-3px) scale(1.05);

  filter:
    drop-shadow(0 6px 15px rgba(0,0,0,0.8))
    drop-shadow(0 0 15px rgba(250,204,21,0.6));
}

@media(max-width:600px){
  .top-logos img{
    height: 70px;
  }
}

/* ================= TITLE ================= */
h1{
  text-align:center;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  margin-top: 0px;
  margin-bottom:10px;

  color:#ffffff;
}

/* ================= SECTION TITLE ================= */
h3{
  margin:35px 0 15px;
  color:#ffffff; /* gold gelap */
  font-size:16px;
  letter-spacing:0.5px;
}

label{
  display:block;
  margin:20px 0 10px;

  color:#ffffff;
  font-size:16px;
  font-weight:600;
}

/* ================= GRID ================= */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.full{
  grid-column:span 2;
}

/* ================= INPUT ================= */
input, select, textarea{
  width:100%;
  padding:15px;
  border-radius:14px;

  border:1.5px solid transparent;

  background:#ffffff;
  color:#0f172a;

  font-size:14px;

  transition: all 0.25s ease;
}

/* placeholder */
input::placeholder,
textarea::placeholder{
  color:#94a3b8;
}

/* ================= GLOW TERANG 🔥 ================= */
input:focus, select:focus, textarea:focus{
  outline:none;

  border:1.5px solid #facc15;

  box-shadow:
    0 0 0 3px rgba(250,204,21,0.4),
    0 0 20px rgba(250,204,21,0.6),
    0 0 40px rgba(250,204,21,0.4);

  transform: translateY(-2px) scale(1.01);
}

/* hover halus */
input:hover, select:hover, textarea:hover{
  border-color:#e2e8f0;
}

/* textarea */
textarea{
  min-height:110px;
  resize:none;
}

/* ================= BUTTON ================= */
button{
  width:100%;
  margin-top:30px;
  padding:18px;

  border:none;
  border-radius:14px;

  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:16px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);

  background:#555;
  color:#ccc;

  transition: all 0.3s ease;
}

/* aktif */
button.active{
 background: linear-gradient(
    120deg,
    #cfd9ff,
    #9fb4ff,
    #6f8cff,
    #9fb4ff,
    #cfd9ff
  );

  background-size: 300% 300%;

  color: white;

  cursor: pointer;

  box-shadow:
    0 10px 25px rgba(120,160,255,0.5),
    0 0 20px rgba(120,160,255,0.4);
}

/* hover tombol */
button.active:hover{
  transform: translateY(-3px) scale(1.02);

  box-shadow:
    0 15px 35px rgba(255, 255, 255, 0.7),
    0 0 30px rgba(255, 255, 255, 0.6);
}

/* klik */
button:active{
  transform: scale(0.96);
}

/* ================= CHECKBOX ================= */
.check{
  margin-top:25px;
  display:flex;
  align-items:center;
  gap:10px;
}

/* biar gak glow */
.check input{
  width:18px;
  height:18px;
  accent-color:#facc15;
  box-shadow:none !important;
}

/* ================= BACK BUTTON ================= */
.back-btn{
  position:fixed;
  top:25px;
  left:25px;

  width:50px;
  height:50px;

  border-radius:50%;

  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,0.15);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.5);

  transition: all 0.3s ease;
}

/* arrow */
.back-btn::before{
  content:"";
  width:12px;
  height:12px;

  border-left:2px solid white;
  border-bottom:2px solid white;

  transform:rotate(45deg);
  display:block;
  margin:auto;
  margin-top:17px;
}

/* hover */
.back-btn:hover{
  background: linear-gradient(135deg,#facc15,#f59e0b);

  transform: scale(1.1);

  box-shadow:
    0 10px 30px rgba(250,204,21,0.6);
}

.back-btn:hover::before{
  border-color:#111;
}

/* ================= NIS ANIMATION ================= */
.hidden{
  display:none;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:0.3s;
}

.show{
  max-height:80px;
  opacity:1;
}

/* ================= MOBILE ================= */
@media(max-width:600px){
  .container{
    margin:40px 15px;
    padding:25px;
  }

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

  .full{
    grid-column:span 1;
  }
}

/* ===== NIK RIGHT INDICATOR ===== */

.nik-wrapper{
  position:relative;
}

.nik-wrapper input{
  padding-right:70px;
}

.nik-counter{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  font-weight:600;
  color:#ef4444;
}

.nik-counter.done{
  color:#22c55e;
}

/* ================= FIX SECTION GRID ================= */

.grid h3{
  grid-column: 1 / -1;   /* paksa full lebar */
  margin-top:35px;
  margin-bottom:5px;
}

/* mobile tetap rapi */
@media(max-width:600px){
  .grid h3{
    grid-column:1;
  }
}

/* ================= FIX ALIGN INPUT ================= */

.grid input,
.grid select,
.grid textarea{
  width:100%;
}

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

.nik-wrapper{
  position:relative;
  width:100%;
}

.nik-wrapper input{
  padding-right:70px;
}

.nik-count{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  font-weight:600;
  color:#ef4444;
}

.nik-count.done{
  color:#22c55e;
}

/* ================= SIZE CHART ================= */

.sizechart{
  grid-column:1 / -1;
  width:100%;
  border-radius:14px;
  margin:10px 0 20px;
}

/*backbutton*/

.back-btn{
  position:fixed;
  top:25px;
  left:25px;

  width:50px;
  height:50px;

  border-radius:50%;

  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,0.15);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.5);

  transition: all 0.3s ease;
}

/* arrow */
.back-btn::before{
  content:"";
  width:12px;
  height:12px;

  border-left:2px solid white;
  border-bottom:2px solid white;

  transform:rotate(45deg);
  display:block;
  margin:auto;
  margin-top:17px;
}

/* hover */
.back-btn:hover{
  background: linear-gradient(135deg,#facc15,#f59e0b);

  transform: scale(1.1);

  box-shadow:
    0 10px 30px rgba(250,204,21,0.6);
}

.back-btn:hover::before{
  border-color:#111;
}

/* ================= EMAIL WARNING ================= */

.email-wrapper{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.email-warning{
  font-size:12px;
  color:#ffffff;
  opacity:0.9;
}

/* kalau error */
.email-warning.error{
  color:#ef4444;
}

/* kalau valid */
.email-warning.success{
  color:#22c55e;
}

/* ================= TERMS BOX ================= */
.terms-box{
  margin-top:25px;
  padding:18px 20px;

  border-radius:16px;

  background: rgba(250,204,21,0.08);
  border:1px solid rgba(250,204,21,0.4);

  font-size:13px;
  line-height:1.6;

  color:#ffffff;

  box-shadow:
    inset 0 0 20px rgba(250,204,21,0.15),
    0 10px 30px rgba(0,0,0,0.3);
}

.terms-box strong{
  display:block;
  margin-bottom:10px;
  color:#ffffff;
  font-size:14px;
}

.terms-box ul{
  padding-left:18px;
  margin:0;
}

.terms-box li{
  margin-bottom:6px;
}