/* styles.css - header fixed + rapi, warna asli dipertahankan */
:root{
  --bg1:#24004a;
  --bg2:#6a00ff;
  --accent:#ffde59;
  --pink:#ff63b8;
  --white:#ffffff;
  --glass: rgba(255,255,255,0.06);
  --nav-active: rgba(255,255,255,0.08);

  /* header height: sesuaikan jika ingin lebih kecil/besar */
  --header-height: 72px;
  --container-max: 1200px;
}

/* reset / base */
*{box-sizing:border-box}
html,body{height:100%; scroll-behavior:smooth; margin:0; padding:0;}
body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--white);
  background: var(--bg2)
}

/* subtle grid floor (ornament) */
body::after{
  content:"";
  position:fixed;
  left:0;right:0;bottom:0;height:35vh;
  background:
    linear-gradient(180deg, transparent, rgba(255,255,255,0.02)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 30px);
  transform:skewX(-12deg);
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:0;
}


/* Header / Nav - FIXED */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-height);
  display:flex;
  align-items:center;
  z-index:999;
  padding:10px 28px;
  transition:background .18s ease, box-shadow .18s ease, backdrop-filter .18s ease;
  background: linear-gradient(180deg, rgba(36,0,74,0.30), rgba(36,0,74,0.18));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* smaller header when scrolled (optional) */
.site-header.scrolled{
  background: linear-gradient(180deg, rgba(36,0,74,0.42), rgba(36,0,74,0.26));
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}

/* container for nav */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--container-max);
  margin:0 auto;
  width:100%;
  gap:12px;
}

/* nav items */
.nav-left{
  list-style:none;
  display:flex;
  gap:14px;
  padding:0;
  margin:0;
  align-items:center;
}
.nav-left li{display:flex;align-items:center}
.nav-left li a{
  color:rgba(255,255,255,0.95);
  text-decoration:none;
  letter-spacing:1px;
  font-size:14px;
  padding:8px 12px;
  border-radius:10px;
  transition: background .18s ease, color .18s ease, transform .12s ease;
  display:inline-block;
}
.nav-left li a:hover{ transform:translateY(-2px) }
.nav-left li.active a,
.nav-left li a:hover{
  background:var(--nav-active);
  color:var(--white);
}

/* Logo image - gunakan kelas .site-logo untuk kontrol ukuran/fit */
.logo{
  display:flex;
  align-items:center;
  gap:12px;               /* jarak antara image dan teks (jika ada) */
  font-weight:600;
  line-height:1;
}

/* Gaya khusus untuk image logo */
.site-logo{
  display:block;
  width:auto;             /* lebar mengikuti proporsi */
  height:44px;            /* default height desktop */
  object-fit:contain;
  -webkit-user-select: none;
  user-select: none;
}

/* Jika Anda masih menggunakan teks logo (.logo-text), pastikan tampil rapi */
.logo-text{
  color:var(--pink);
  font-weight:700;
  letter-spacing:1px;
  font-size:18px;
  margin-left:4px;
}

/* Optional: jika ingin logo clickable (ke beranda) gunakan .logo a wrapper */
.logo a { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:inherit; }

/* Hero & main content */
.hero{
  min-height:78vh;
  display:flex;
  align-items:center;
  z-index:2;
  position:relative;
  padding:40px 20px 100px;
}
.hero-inner{
  max-width:var(--container-max);
  margin:0 auto;
  display:flex;
  gap:40px;
  align-items:center;
  padding:10px;
  width:100%;
}

/* left hexagon image (kept) */
.left{flex:0 0 42%;display:flex;justify-content:center}
.hexagon{
  width:420px;height:480px;padding:10px;
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius:18px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 40px rgba(0,0,0,0.45), inset 0 0 40px rgba(255,255,255,0.01);
  transform:rotate(-6deg);position:relative;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  border:10px solid rgba(255,255,255,0.06);
}
.hexagon img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;transform:rotate(6deg)}

/* right content */
.right{flex:1;color:var(--white);padding-right:20px;position:relative}
.big-title{
  font-family: "Bebas Neue", sans-serif;
  font-size:clamp(48px, 12vw, 140px);
  margin:0;
  line-height:0.85;
  letter-spacing:2px;
  color:var(--pink);
  position:relative;
  z-index:2;
  -webkit-text-stroke: 2px rgba(0,0,0,0.25);
  text-transform:uppercase;
  /* NOTE: glitch animation preserved exactly as requested */
}
/* the glitch pseudo-elements remain unchanged (keep animation) */
.big-title::before,
.big-title::after{
  content:attr(data-text);
  position:absolute;
  left:0;top:0;
  width:100%;
  overflow:hidden;
  clip-path:rect(0,9999px,9999px,0);
  -webkit-clip-path: inset(0 0 0 0);
  opacity:0.85;
}
.big-title::before{
  color:#00fff6;
  z-index:1;
  transform:translate(-6px,-2px);
  mix-blend-mode:screen;
  animation:glitchTop 2.5s infinite linear;
}
.big-title::after{
  color:#fffd70;
  z-index:1;
  transform:translate(6px,2px);
  mix-blend-mode:screen;
  animation:glitchBottom 2.7s infinite linear;
}
@keyframes glitchTop{
  0%{transform:translate(-6px,-2px)}
  20%{transform:translate(-6px,2px)}
  40%{transform:translate(-2px,-1px)}
  60%{transform:translate(-6px,-4px)}
  80%{transform:translate(-3px,2px)}
  100%{transform:translate(-6px,-2px)}
}
@keyframes glitchBottom{
  0%{transform:translate(6px,2px)}
  20%{transform:translate(8px,-2px)}
  40%{transform:translate(3px,1px)}
  60%{transform:translate(6px,4px)}
  80%{transform:translate(2px,-2px)}
  100%{transform:translate(6px,2px)}
}

/* subtitle / tagline */
.subtitle{font-family:"Bebas Neue", sans-serif;font-size:clamp(28px, 6vw, 68px);margin:6px 0 0;color:#ffffff;text-transform:uppercase;letter-spacing:2px}
.tagline{display:inline-block;margin-top:10px;color:var(--accent);font-weight:700;background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));padding:6px 12px;border-radius:8px;letter-spacing:2px}
.lead{color:rgba(255,255,255,0.88);max-width:54ch;margin-top:18px;font-size:15px}

/* inline link style (used in hero) */
.inline-link{color:var(--pink);font-weight:700;text-decoration:underline; background: rgba(255,255,255,0.02); padding:4px 8px; border-radius:8px}

/* CTA buttons */
.btn-cta, .btn-primary {
  display:inline-block;
  margin-top:12px;
  background:linear-gradient(90deg,#fff,#f7f7ff);
  color:#3a0060;
  font-weight:700;
  letter-spacing:1px;
  text-decoration:none;
  padding:10px 18px;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(106,0,255,0.32);
  border:3px solid rgba(255,255,255,0.10);
  transition: transform .15s ease, box-shadow .15s ease, filter .12s;
}
.btn-cta:hover, .btn-primary:hover{ transform:translateY(-4px); box-shadow:0 20px 60px rgba(106,0,255,0.45) }

/* ghost button */
.btn-ghost{display:inline-block;margin-top:12px;background:transparent;border:1px solid rgba(255,255,255,0.12);color:var(--white);padding:10px 18px;border-radius:12px}

/* list/table area */
.bgn-main-2{background-color: var(--bg1);justify-content:center;display:flex;width:100%;padding:60px 20px 140px}
.container{max-width:1100px;margin:0 auto;width:100%}
.list-header{text-align:center;margin-bottom:18px}
.list-title{font-size:28px;font-weight:700;margin:0;color:var(--pink)}
.list-subtitle{color:var(--accent);margin:6px 0 0}
.table-wrap{overflow:auto;border-radius:12px;padding:6px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}

/* tables */
table{width:100%;border-collapse:collapse;background: rgba(255,255,255,0.03)}
th, td{border:1px solid rgba(255,255,255,0.12);padding:12px 20px;text-align:center;color:var(--white)}
th{background-color:var(--accent);color:black;font-weight:700}

/* form card */
.form-card{background: rgba(255,255,255,0.03); padding:22px; border-radius:12px; max-width:760px; margin:0 auto; color:rgba(255,255,255,0.92); box-shadow:0 10px 40px rgba(0,0,0,0.5)}
.form-title{color:var(--pink);margin:0 0 6px 0}
.form-row{margin:12px 0;display:flex;flex-direction:column}
.form-row label{font-size:14px;margin-bottom:6px;color:var(--white)}
.form-row input, .form-row select, .form-row textarea{padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:rgba(0,0,0,0.25);color:var(--white);outline:none}
.form-row input::placeholder{color:rgba(255,255,255,0.45)}
.hint{font-size:12px;color:rgba(255,255,255,0.6);margin-top:6px}

/* claim result */
.claim-result{margin-top:12px;padding:12px;border-radius:8px;font-weight:700}
.claim-result.info{background:rgba(255,255,255,0.04);color:var(--white)}
.claim-result.success{background:linear-gradient(90deg, rgba(0,255,153,0.12), rgba(0,255,153,0.06));color:#a7ffdf}
.claim-result.error{background:linear-gradient(90deg, rgba(255,99,99,0.08), rgba(255,99,99,0.03));color:#ffd6d6}

/* small helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* page content containers */
.content, .claim-guide, .akun-gacor{max-width:1100px;margin:0 auto;padding:24px}

/* action-row utility */
.action-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* responsive */
@media (max-width:980px){
  :root{ --header-height: 64px }
  .nav-left{ gap:10px }
  .hero-inner{flex-direction:column;align-items:center;padding:24px}
  .left{order:2;flex-basis:auto;margin-top:20px}
  .right{order:1;text-align:center;padding-top:24px}
  .hexagon{width:320px;height:320px}
  .big-title{font-size:56px}
  .subtitle{font-size:36px}
  .lead{max-width:40ch;margin:14px auto 0}
  .site-header{padding:8px 16px}
  .site-logo{ height:40px; }
  .body {
      background-size: 100%;
  }
}

@media (max-width:560px){
  :root{ --header-height: 60px }
  .hexagon{width:220px;height:260px}
  .big-title{font-size:44px}
  .subtitle{font-size:26px}
  .nav-left li a{font-size:13px;padding:6px 8px}
  .container{padding:0 12px}
  .form-card{padding:16px}
  .site-logo{ height:32px; }
  .logo-text{ display:none; } /* sembunyikan teks logo di layar kecil jika perlu */
    .body {
      background-size: 100%;
  }
}