/* ============ Aura Kingdom Origin — portal v3 "Aurora Midnight" ============ */
@font-face { font-family:'Cinzel'; src:url('fonts/cinzel-700.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Exo 2'; src:url('fonts/exo2-700.woff2') format('woff2'); font-weight:100 900; font-display:swap; }

:root {
  --hero-bg: url('../img/bg/hero_bg.jpg');
  --gold:#e8b04b; --gold-hi:#ffd98a; --gold-deep:#d6951f;
  --cyan:#7cc7ff; --cyan-deep:#4da3e8;
  --dc:#5865f2; --dc-hi:#7983f5;
  --ink:#04060d; --ink2:#070b16; --panel:rgba(255,255,255,.045);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:"Exo 2","Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(1600px 900px at 12% -10%, rgba(64,38,140,.22), transparent 55%),
    radial-gradient(1400px 800px at 92% 12%, rgba(20,90,160,.16), transparent 55%),
    radial-gradient(1200px 900px at 50% 115%, rgba(140,70,30,.10), transparent 60%),
    #04060d;
  color:#dfe6f5; line-height:1.65; overflow-x:hidden;
}
#topbar-glow { position:fixed; top:0; left:0; right:0; height:3px; z-index:500;
  background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--cyan) 50%, var(--gold) 80%, transparent);
  background-size:200% auto; animation:topshine 7s linear infinite; opacity:.85; }
@keyframes topshine { to { background-position:200% center; } }

a { color:#8fd0ff; text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background:rgba(232,176,75,.35); color:#fff; }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#070a14; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#3a4a7a,#1c2440); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }

.wrap { max-width:1160px; margin:0 auto; padding:0 22px; position:relative; }

/* ---------- starfield ---------- */
#stars { position:fixed; inset:0; z-index:0; opacity:.85; }
/* ---------- salju 3D (cahaya salju) ---------- */
#snowfx { position:fixed; inset:0; z-index:1; pointer-events:none; }

/* ---------- typography ---------- */
h1,h2,.display { font-family:Cinzel,"Times New Roman",serif; }
.goldtext {
  background:linear-gradient(100deg,#f6d992 10%,#e8b04b 35%,#fff3cf 50%,#e8b04b 65%,#f6d992 90%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 5s linear infinite;
}
@keyframes shine { to { background-position:200% center; } }

/* ---------- BOOT LOADER ---------- */
#boot { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:radial-gradient(900px 520px at 50% 32%, #141b38 0%, #04060d 75%); transition:opacity .7s ease; }
#boot.hide { opacity:0; pointer-events:none; }
#boot .bl { font-family:Cinzel,serif; font-size:clamp(24px,4.5vw,38px); letter-spacing:5px; color:#fff; text-shadow:0 0 30px rgba(232,176,75,.6), 0 0 80px rgba(232,176,75,.25); }
#boot .bl span { color:var(--gold); }
#boot .sub { font-size:10.5px; letter-spacing:3px; color:#8ea0c4; text-transform:uppercase; }
#boot .bootlogo { width:clamp(110px,18vw,170px); height:auto; filter:drop-shadow(0 12px 42px rgba(232,176,75,.45)); animation:bootpulse 2s ease-in-out infinite; }
@keyframes bootpulse { 0%,100%{transform:scale(1); filter:drop-shadow(0 12px 42px rgba(232,176,75,.45))} 50%{transform:scale(1.06); filter:drop-shadow(0 16px 60px rgba(232,176,75,.75))} }
#boot .track { width:300px; height:3px; border-radius:2px; background:rgba(255,255,255,.09); overflow:hidden; }
#boot .fill { height:100%; width:0; background:linear-gradient(90deg,var(--gold),#ffe9ad); border-radius:2px; transition:width .12s linear; box-shadow:0 0 14px var(--gold); }
#boot .pct { font-size:12px; color:#8ea0c4; letter-spacing:2px; }
#boot .tip { font-size:12px; color:#5c6b8f; font-style:italic; min-height:18px; }

/* ---------- NAV ---------- */
nav { position:sticky; top:0; z-index:9000; display:flex; align-items:center; gap:4px; padding:12px 0; flex-wrap:wrap;
  background:rgba(4,6,13,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06); }
nav .logo { margin-right:auto; font-family:Cinzel,serif; font-size:16px; letter-spacing:2.5px; color:#fff; font-weight:700;
  text-shadow:0 0 18px rgba(232,176,75,.35); display:flex; align-items:center; gap:9px; }
nav .logo .navlogo { width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(232,176,75,.5)); }
nav .logo span { color:var(--gold); }
nav a { padding:7px 14px; border-radius:18px; font-size:12.5px; font-weight:500; color:#c6d2ec; border:1px solid transparent; transition:all .18s ease; }
nav a:hover { border-color:rgba(232,176,75,.55); background:rgba(232,176,75,.10); text-decoration:none; transform:translateY(-1px); }
nav a.on { color:var(--gold); border-color:rgba(232,176,75,.45); background:rgba(232,176,75,.08); }
nav a.btnnav { background:linear-gradient(180deg,#f2c877,var(--gold-deep)); color:#241a05; font-weight:700; border:none; box-shadow:0 4px 16px rgba(232,176,75,.3); }
nav a.btnnav:hover { filter:brightness(1.08); }
nav a.dcnav { display:inline-flex; align-items:center; gap:6px; background:rgba(88,101,242,.14); border-color:rgba(88,101,242,.5); color:#aab4ff; font-weight:600; }
nav a.dcnav svg { width:15px; height:15px; }
nav a.dcnav:hover { background:var(--dc); border-color:var(--dc); color:#fff; box-shadow:0 4px 18px rgba(88,101,242,.45); }

/* ---------- dropdown nav (Guide) ---------- */
.navdd { position:relative; }
.navdd .ddtoggle { cursor:pointer; user-select:none; }
.navdd .caret { font-size:9px; opacity:.7; transition:transform .18s ease; display:inline-block; margin-left:2px; }
.navdd .ddmenu { position:absolute; top:calc(100% + 8px); left:0; min-width:190px; padding:8px;
  background:linear-gradient(180deg,#171a2e,#10121f); border:1px solid rgba(232,176,75,.35); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.65), 0 0 30px rgba(232,176,75,.07);
  display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:9999; }
.navdd:hover .ddmenu, .navdd.open .ddmenu { opacity:1; visibility:visible; transform:translateY(0); }
.navdd:hover .caret, .navdd.open .caret { transform:rotate(180deg); }
.navdd .ddmenu a { padding:9px 12px; border-radius:9px; font-size:12.5px; text-align:left; white-space:nowrap; }
.navdd .ddmenu a:hover { background:rgba(232,176,75,.12); border-color:transparent; transform:translateX(3px); }

/* ---------- HERO ---------- */
.hero { position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background:var(--hero-bg) center 30%/cover; opacity:.38; filter:saturate(1.1); }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,6,13,.55), rgba(4,6,13,.25) 40%, rgba(4,6,13,.92)); }
.hero .bgfx { position:absolute; inset:0; z-index:1; }
.hero .shade { position:relative; z-index:3; padding:70px 22px; max-width:940px; }
.hero .hlogo { margin-bottom:6px; }
.hero .hlogo img { width:clamp(160px,26vw,280px); height:auto; filter:drop-shadow(0 10px 42px rgba(232,176,75,.35)); animation:floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.hero .chips { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.hero .chip { font-size:10.5px; letter-spacing:2px; padding:5px 14px; border-radius:20px; text-transform:uppercase;
  border:1px solid rgba(232,176,75,.45); color:#eecb7e; background:rgba(8,10,20,.55); backdrop-filter:blur(4px); font-weight:600; }
.hero h1 { font-size:clamp(40px,8vw,78px); letter-spacing:6px; color:#fff; text-shadow:0 6px 40px rgba(0,0,0,.95); font-weight:700; line-height:1.05; }
.hero .tag { font-size:clamp(13.5px,2vw,17.5px); color:#c9d5ef; margin:18px auto 32px; max-width:620px; text-shadow:0 2px 14px #000; font-weight:400; }
.cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 34px; border-radius:28px; font-size:14px; font-weight:700; letter-spacing:1px;
  background:linear-gradient(180deg,#f4cd7e,var(--gold-deep)); color:#221903; border:1px solid #ffe3a1;
  box-shadow:0 8px 26px rgba(232,176,75,.4); transition:transform .18s ease, box-shadow .18s ease; text-transform:uppercase; }
.btn::after { content:""; position:absolute; top:0; left:-80%; width:50%; height:100%; transform:skewX(-25deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transition:left .5s ease; }
.btn:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 14px 34px rgba(232,176,75,.55); text-decoration:none; }
.btn:hover::after { left:130%; }
.btn.ghost { background:rgba(255,255,255,.06); color:#eef3ff; border:1px solid rgba(255,255,255,.35); box-shadow:none; backdrop-filter:blur(6px); }
.btn.ghost::after { display:none; }
.btn.dcbtn { background:linear-gradient(180deg,var(--dc-hi),var(--dc)); color:#fff; border:1px solid #99a3ff; box-shadow:0 8px 26px rgba(88,101,242,.4); }
.btn.dcbtn svg { width:19px; height:19px; }
.btn.dcbtn:hover { box-shadow:0 14px 34px rgba(88,101,242,.6); }

/* ---------- SEASON PASS MINI (panel utama) ---------- */
.spmini { display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:7px; }
.spm-day { display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 4px 6px; border-radius:11px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); }
.spm-day.today { border-color:rgba(232,176,75,.8); box-shadow:0 0 12px rgba(232,176,75,.15); }
.spm-day.locked { opacity:.38; filter:grayscale(.8); }
.spm-n { font-family:Cinzel,serif; font-size:11.5px; color:var(--gold); font-weight:700; }
.spm-it { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; }
.spm-it img { width:30px; height:30px; border-radius:7px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.spm-it.prem img { border-color:rgba(201,167,255,.45); }
.spm-ok { position:absolute; top:-4px; right:-7px; font-size:11px; color:#37d67a; font-weight:900; text-shadow:0 0 6px rgba(55,214,122,.7); }
.spm-c { font-size:8.5px; font-weight:800; letter-spacing:.5px; padding:2px 8px; border-radius:10px; cursor:pointer;
  background:linear-gradient(180deg,#f2c877,var(--gold-deep)); color:#241a05; border:none; font-family:inherit; }
.spm-c:hover { box-shadow:0 3px 10px rgba(232,176,75,.5); }

/* ---- SEASON PASS PREMIUM UNLOCK (panel) ---- */
.spunlock { background:linear-gradient(180deg, rgba(201,167,255,.08), rgba(201,167,255,.02)); border:1px solid rgba(201,167,255,.35);
  border-radius:13px; padding:14px 16px; margin-bottom:14px; }
.spunlock.on { border-color:rgba(55,214,122,.4); background:linear-gradient(180deg, rgba(55,214,122,.07), rgba(55,214,122,.02)); }
.spu-info { display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
.spu-info b { font-family:Cinzel,serif; font-size:12px; letter-spacing:2px; color:#c9a7ff; }
.spu-info span { font-size:11.5px; color:#b9c9ea; line-height:1.5; }
.spu-chars { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.spu-ch { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 14px; border-radius:11px; cursor:pointer;
  background:rgba(8,10,20,.6); border:1px solid rgba(255,255,255,.18); color:#e6ecfa; font-family:inherit; transition:all .15s ease; }
.spu-ch b { font-size:13px; }
.spu-ch small { font-size:10px; color:#8ea0c4; }
.spu-ch:hover { border-color:rgba(201,167,255,.6); }
.spu-ch.sel { border-color:#c9a7ff; box-shadow:0 0 12px rgba(201,167,255,.3); background:rgba(201,167,255,.12); }
.spu-ch.done { opacity:.45; cursor:not-allowed; }
.spu-buy { padding:10px 26px; border-radius:16px; font-size:12px; font-weight:800; letter-spacing:1px; cursor:pointer;
  background:linear-gradient(180deg,#c9a7ff,#8b5cf6); color:#1a1030; border:none; font-family:inherit; text-transform:uppercase; }
.spu-buy:disabled { background:rgba(255,255,255,.06); color:#5f6f92; cursor:not-allowed; }
.spm-lock { font-size:12px; opacity:.6; }

/* ---------- STAT STRIP ---------- */
.statstrip { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:34px auto 6px; }
.stat { position:relative; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:18px 16px; text-align:center;
  transition:transform .2s ease, border-color .2s ease; }
.stat::before { content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; transition:opacity .25s; }
.stat:hover { transform:translateY(-3px); border-color:rgba(232,176,75,.4); }
.stat:hover::before { opacity:1; }
.stat .k { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#8ea0c4; font-weight:600; }
.stat .v { font-size:clamp(18px,2.6vw,26px); font-weight:800; color:#fff; margin-top:5px; font-variant-numeric:tabular-nums; }
.stat .v.gold { color:var(--gold); } .stat .v.cyan { color:var(--cyan); } .stat .v.green { color:#37d67a; } .stat .v.red { color:#ff5f56; }
.stat .s { font-size:11px; color:#7c8db0; }

/* ---------- SECTION ---------- */
section { margin:78px 0; }
h2 { font-size:clamp(22px,3.4vw,32px); color:#fff; letter-spacing:3px; text-align:center; font-weight:700; }
.subhead { text-align:center; color:#8ea0c4; font-size:14px; margin:10px auto 38px; max-width:620px; }
.orn { display:flex; align-items:center; justify-content:center; gap:12px; margin:14px 0 34px; color:var(--gold); }
.orn::before, .orn::after { content:""; height:1px; width:64px; background:linear-gradient(90deg,transparent,var(--gold)); }
.orn::after { background:linear-gradient(90deg,var(--gold),transparent); }

/* reveal on scroll */
.rv { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.rv.in { opacity:1; transform:none; }

/* ---------- DISCORD SECTION ---------- */
.dcwrap { display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center;
  background:linear-gradient(120deg, rgba(88,101,242,.14), rgba(88,101,242,.04) 55%, rgba(232,176,75,.06));
  border:1px solid rgba(88,101,242,.45); border-radius:24px; padding:34px 38px; position:relative; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.5), 0 0 46px rgba(88,101,242,.10); }
.dcwrap::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(500px 240px at 12% 0%, rgba(88,101,242,.20), transparent 65%); }
.dcwrap:hover { border-color:rgba(121,131,245,.75); }
.dcicon { width:96px; height:96px; border-radius:26px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--dc-hi), #404dcc); color:#fff;
  box-shadow:0 14px 40px rgba(88,101,242,.45), inset 0 2px 0 rgba(255,255,255,.25);
  animation:dcfloat 4.5s ease-in-out infinite; position:relative; z-index:1; }
.dcicon svg { width:54px; height:54px; }
@keyframes dcfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.dcbody { position:relative; z-index:1; }
.dcbody h3 { font-family:Cinzel,serif; font-size:20px; letter-spacing:2px; color:#fff; margin-bottom:10px; }
.dcbody h3 span { color:#aab4ff; }
.dcbody p { font-size:13.5px; color:#b9c6e4; max-width:520px; }
.dcfeat { list-style:none; margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:7px 22px; }
.dcfeat li { font-size:12.5px; color:#9fb0d6; }
.dcact { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.dcact .btn.dcjoin { padding:15px 30px; border-radius:28px; font-size:14.5px; white-space:nowrap;
  background:linear-gradient(180deg,var(--dc-hi),var(--dc)); color:#fff; border:1px solid #99a3ff;
  box-shadow:0 10px 30px rgba(88,101,242,.5); }
.dcact .btn.dcjoin:hover { box-shadow:0 16px 40px rgba(88,101,242,.65); transform:translateY(-3px) scale(1.03); }
.dcact small { font-size:10.5px; color:#7c8db0; letter-spacing:1px; }
@media (max-width:900px){ .dcwrap { grid-template-columns:1fr; text-align:center; gap:20px; padding:26px; }
  .dcicon { margin:0 auto; } .dcbody p { margin:0 auto; } .dcfeat { text-align:left; } }

/* ---------- CLASS GRID ---------- */
.classgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(236px,1fr)); gap:18px; perspective:1400px; }
.ccard { background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10); border-radius:18px; overflow:hidden; cursor:pointer;
  transform-style:preserve-3d; transition:box-shadow .35s ease, border-color .35s ease; will-change:transform; }
.ccard:hover { border-color:rgba(232,176,75,.65); box-shadow:0 30px 60px rgba(0,0,0,.65), 0 0 40px rgba(232,176,75,.15); }
.ccard .ph { height:250px; overflow:hidden; position:relative; background:#0a0f20; transform-style:preserve-3d; }
.ccard .ph img { width:100%; height:100%; object-fit:cover; object-position:top center; will-change:transform; }
.ccard .ph::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 48%, rgba(4,6,13,.94)); }
.ccard .nm { position:absolute; bottom:10px; left:16px; z-index:2; font-family:Cinzel,serif; font-size:19px; font-weight:700; color:#fff; letter-spacing:1.5px; text-shadow:0 3px 14px #000; }
.ccard .nm small { display:block; font-size:9.5px; color:var(--gold); letter-spacing:3px; text-transform:uppercase; font-family:"Exo 2",sans-serif; font-weight:600; }
.ccard .bd { padding:13px 16px 16px; }
.ccard .ds { font-size:12.5px; color:#a4b4d8; min-height:42px; }
.ccard .more { font-size:11px; color:#8fd0ff; margin-top:10px; display:flex; align-items:center; gap:6px; letter-spacing:.5px; }
.ccard .bars { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.ccard.open .bars { max-height:150px; margin-top:14px; }
.brow { display:flex; align-items:center; gap:9px; margin:6px 0; font-size:11px; color:#8ea0c4; font-weight:600; }
.brow .lbl { width:36px; text-transform:uppercase; letter-spacing:1px; }
.brow .tr { flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.brow .fl { height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold-hi)); transition:width .6s cubic-bezier(.2,.7,.3,1); box-shadow:0 0 8px rgba(232,176,75,.4); }
.brow:nth-child(3) .fl { background:linear-gradient(90deg,#5db9ff,#b7e4ff); box-shadow:0 0 8px rgba(124,199,255,.4); }
.brow:nth-child(4) .fl { background:linear-gradient(90deg,#2ecf6e,#a5f2c6); box-shadow:0 0 8px rgba(55,214,122,.4); }
.ccard .wn { display:inline-block; margin-top:12px; font-size:10px; color:#eecb7e; border:1px solid rgba(232,176,75,.4); border-radius:16px; padding:3px 12px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; }

/* ---------- EIDOLON ---------- */
.eidogrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; perspective:1400px; }
.ecard { position:relative; border-radius:18px; overflow:visible; border:1px solid rgba(255,255,255,.10); cursor:pointer;
  background:#0a0f20; transform-style:preserve-3d; transition:box-shadow .35s ease, border-color .35s ease; will-change:transform; }
.ecard:hover { border-color:rgba(232,176,75,.6); box-shadow:0 30px 60px rgba(0,0,0,.7), 0 0 40px rgba(232,176,75,.18); }
.ecard .ph { height:250px; position:relative; overflow:hidden; border-radius:17px 17px 0 0; transform-style:preserve-3d; }
.ecard .ph img { width:100%; height:100%; object-fit:cover; object-position:center 18%; will-change:transform; }
.ecard .ph::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(4,6,13,.85)), radial-gradient(400px 200px at 50% -10%, rgba(232,176,75,.12), transparent); }
.glint { position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen; }
.ecard .tag { position:absolute; top:10px; right:10px; z-index:2; font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
  background:rgba(232,176,75,.85); color:#241a05; padding:3px 9px; border-radius:12px; font-weight:800; }
.ecard.anim .tag { animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(232,176,75,.5)} 50%{box-shadow:0 0 0 7px rgba(232,176,75,0)} }
.ecard .nm { position:absolute; left:14px; right:14px; bottom:12px; z-index:2; font-family:Cinzel,serif; font-size:17px; color:#fff; letter-spacing:1px; }
.ecard .nm small { display:block; font-family:"Exo 2",sans-serif; font-size:11px; color:#b9c9ea; font-weight:400; margin-top:2px; }

/* ---------- NEWS ---------- */
.newsgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.ncard { background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:18px 20px; position:relative; transition:border-color .2s ease, transform .2s ease; }
.ncard:hover { border-color:rgba(232,176,75,.45); transform:translateY(-3px); }
.ncard .date { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:700; }
.nbadge { display:inline-block; margin-left:8px; font-size:8.5px; letter-spacing:1.5px; padding:2px 9px; border-radius:10px; font-weight:800; vertical-align:1px; }
.nbadge.t-update { border:1px solid rgba(124,199,255,.5); color:#8fd0ff; background:rgba(124,199,255,.08); }
.nbadge.t-info { border:1px solid rgba(55,214,122,.5); color:#7ce8a4; background:rgba(55,214,122,.08); }
.nbadge.t-mnt { border:1px solid rgba(255,95,86,.5); color:#ff8f88; background:rgba(255,95,86,.08); }
.ncard h3 { font-family:Cinzel,serif; color:#fff; font-size:16px; margin:7px 0 6px; letter-spacing:.5px; }
.ncard p { font-size:12.5px; color:#9aacd0; }

/* ---------- PANEL / FORM (shared register) ---------- */
.panel { max-width:500px; margin:44px auto; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.13); border-radius:20px; padding:30px; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.panel h1 { font-family:Cinzel,serif; font-size:24px; color:#fff; letter-spacing:2px; margin-bottom:6px; }
.panel h1 span { color:var(--gold); }
.panel .sub { font-size:12.5px; color:#8ea0c4; margin-bottom:20px; }
label { display:block; font-size:10.5px; color:#a9b8d8; margin:14px 0 5px; letter-spacing:2px; text-transform:uppercase; font-weight:600; }
input[type=text], input[type=password] { width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:#0a0f20; color:#eaf1ff; font-size:14.5px; outline:none; font-family:inherit; transition:border-color .18s, box-shadow .18s; }
input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,176,75,.15); }
button, .btnfull { width:100%; margin-top:22px; padding:13px; border-radius:26px; border:none; cursor:pointer; display:block; text-align:center;
  background:linear-gradient(180deg,#f4cd7e,var(--gold-deep)); color:#221903; font-size:15px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; font-family:inherit;
  box-shadow:0 8px 22px rgba(232,176,75,.35); transition:transform .15s, box-shadow .15s; }
button:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(232,176,75,.5); }
.msg { margin-top:18px; padding:13px 15px; border-radius:12px; font-size:13.5px; }
.msg.ok { background:rgba(55,214,122,.12); border:1px solid rgba(55,214,122,.5); color:#9df0c0; }
.msg.err { background:rgba(255,95,86,.10); border:1px solid rgba(255,95,86,.5); color:#ffb3ad; }

/* ---------- STEPS / BOXES / RANK ---------- */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:780px){ .grid2 { grid-template-columns:1fr; } }
.cbox { background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:22px 24px; }
.cbox h3 { font-family:Cinzel,serif; color:#fff; font-size:15.5px; margin-bottom:14px; letter-spacing:1px; }
.cbox h3 span { color:var(--gold); }
ol.steps { list-style:none; counter-reset:s; }
ol.steps li { counter-increment:s; padding:10px 0 10px 40px; position:relative; font-size:13.5px; color:#c3cfe9; border-bottom:1px dashed rgba(255,255,255,.06); }
ol.steps li:last-child { border-bottom:none; }
ol.steps li::before { content:counter(s); position:absolute; left:0; top:9px; width:25px; height:25px; border-radius:50%; text-align:center; line-height:23px;
  background:rgba(232,176,75,.13); border:1px solid rgba(232,176,75,.55); color:var(--gold); font-weight:700; font-size:12px; }
code { background:#0a0f20; border:1px solid rgba(124,199,255,.25); color:#8fd3ff; padding:1px 7px; border-radius:6px; font-size:12px; font-family:Consolas,monospace; }
table.rank { width:100%; border-collapse:collapse; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; }
table.rank th, table.rank td { padding:11px 16px; text-align:left; font-size:14px; border-bottom:1px solid rgba(255,255,255,.06); }
table.rank th { background:rgba(232,176,75,.12); color:var(--gold); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
table.rank tr:last-child td { border-bottom:none; }
table.rank td.r { color:var(--gold); font-weight:800; width:44px; }
.lv { color:var(--cyan); font-weight:700; }

/* ---------- misc ---------- */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:20px 0 4px; }
.brand b { font-family:Cinzel,serif; font-size:20px; letter-spacing:2px; color:#fff; }
.brand b span { color:var(--gold); }
.brand small { display:block; font-size:9.5px; letter-spacing:3px; color:#8ea0c4; text-transform:uppercase; }
footer { margin-top:70px; padding:28px 0 34px; border-top:1px solid rgba(255,255,255,.07); font-size:12px; color:#73839f; text-align:center; position:relative; z-index:2; }
footer .fbrand { font-family:Cinzel,serif; color:#cdd9f2; letter-spacing:3px; font-size:14px; margin-bottom:12px; }
footer .fbrand span { color:var(--gold); }
footer a { color:#8fd0ff; margin:0 8px; }

/* ---------- SOCIAL ICONS (footer) ---------- */
.fsocial { display:flex; justify-content:center; gap:16px; margin-bottom:14px; }
.fsocial .soc { display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin:0;
  border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(10,14,28,.6);
  color:#cfd9ee; transition:all .2s ease; }
.fsocial .soc svg { width:20px; height:20px; }
.fsocial .soc:hover { transform:translateY(-4px) scale(1.08); border-color:transparent; color:#fff; }
.fsocial .soc.dc { border-color:rgba(88,101,242,.55); color:#aab4ff; }
.fsocial .soc.dc:hover { background:var(--dc); box-shadow:0 6px 20px rgba(88,101,242,.45); }
footer .flegal { margin-top:10px; font-size:11px; color:#73839f; letter-spacing:.5px; }
footer .flegal a { color:#8ea0c4; margin:0 2px; }
footer .flegal a:hover { color:var(--gold); }

/* ---------- DOWNLOAD BUTTONS ---------- */
.dlwrap { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:26px 0 8px; }
.dlbtn { display:flex; align-items:center; gap:14px; padding:16px 30px; min-width:270px; border-radius:16px;
  border:1px solid rgba(255,255,255,.16); background:rgba(10,14,28,.55); backdrop-filter:blur(6px);
  transition:all .2s ease; }
.dlbtn:hover { transform:translateY(-4px); text-decoration:none; }
.dlbtn .dlic { width:34px; height:34px; flex:none; color:#cfd9ee; transition:color .2s ease; }
.dlbtn .dlt { display:flex; flex-direction:column; text-align:left; }
.dlbtn .dlt b { font-size:15px; color:#fff; letter-spacing:.5px; }
.dlbtn .dlt small { font-size:11px; color:#9aacd0; margin-top:2px; }
.dlbtn.gdrive:hover { border-color:rgba(38,132,252,.6); box-shadow:0 10px 28px rgba(38,132,252,.3); background:rgba(12,24,44,.75); }
.dlbtn.gdrive:hover .dlic { color:#1a73e8; }
.dlbtn.mfire:hover { border-color:rgba(46,163,242,.6); box-shadow:0 10px 28px rgba(46,163,242,.3); background:rgba(12,24,44,.75); }
.dlbtn.mfire:hover .dlic { color:#2ea3f2; }
.dlmirror { text-align:center; font-size:12px; color:#73839f; margin-bottom:10px; }
#toTop { position:fixed; right:22px; bottom:22px; z-index:300; width:44px; height:44px; border-radius:50%; border:1px solid rgba(232,176,75,.5);
  background:rgba(10,14,28,.85); color:var(--gold); font-size:18px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; backdrop-filter:blur(6px); }
#toTop.show { opacity:1; pointer-events:auto; }
#toTop:hover { transform:translateY(-3px); }

/* ---------- DISCORD FLOAT WIDGET (sisi kanan) ---------- */
#dcside { position:fixed; right:0; top:46%; z-index:400; }
.dcs-pill { display:flex; align-items:center; gap:8px; padding:12px 16px 12px 14px; cursor:pointer; user-select:none;
  background:linear-gradient(135deg, #5865f2, #404dcc); color:#fff;
  border:1px solid rgba(153,163,255,.55); border-right:none;
  border-radius:26px 0 0 26px; box-shadow:0 10px 30px rgba(88,101,242,.45);
  transition:transform .25s cubic-bezier(.2,.7,.3,1.3), box-shadow .25s ease; }
.dcs-pill svg { width:22px; height:22px; flex:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.dcs-pill .dcs-count { font-size:12.5px; font-weight:800; letter-spacing:.5px; white-space:nowrap;
  display:flex; align-items:center; gap:6px; max-width:0; overflow:hidden; opacity:0;
  transition:max-width .3s ease, opacity .3s ease; }
#dcside:hover .dcs-pill, #dcside.open .dcs-pill { transform:translateX(-4px); }
#dcside:hover .dcs-pill .dcs-count, #dcside.open .dcs-pill .dcs-count { max-width:120px; opacity:1; }
.dcs-pill .dot { width:7px; height:7px; border-radius:50%; background:#3ba55d; box-shadow:0 0 8px rgba(59,165,93,.9);
  animation:dcsblink 2s ease-in-out infinite; flex:none; }
@keyframes dcsblink { 0%,100%{opacity:1} 50%{opacity:.45} }

.dcs-pop { position:absolute; right:14px; top:calc(100% + 12px); width:290px; opacity:0; visibility:hidden;
  transform:translateY(-8px) scale(.97); transform-origin:top right;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  background:linear-gradient(180deg, #171a2e, #10121f); border:1px solid rgba(88,101,242,.5); border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.7), 0 0 40px rgba(88,101,242,.12); overflow:hidden; }
#dcside:hover .dcs-pop, #dcside.open .dcs-pop { opacity:1; visibility:visible; transform:none; }
.dcs-head { display:flex; align-items:center; gap:12px; padding:15px 16px 13px;
  background:linear-gradient(135deg, rgba(88,101,242,.28), rgba(88,101,242,.08)); border-bottom:1px solid rgba(88,101,242,.3); }
.dcs-ic { width:42px; height:42px; flex:none; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #7983f5, #404dcc); color:#fff; box-shadow:0 8px 22px rgba(88,101,242,.5); }
.dcs-ic svg { width:24px; height:24px; }
.dcs-ht b { display:block; font-family:Cinzel,serif; font-size:14.5px; color:#fff; letter-spacing:.5px; line-height:1.25; }
.dcs-ht small { display:flex; align-items:center; gap:5px; font-size:11px; color:#aab4ff; margin-top:3px; }
.dcs-ht .dot { width:6px; height:6px; border-radius:50%; background:#3ba55d; box-shadow:0 0 6px rgba(59,165,93,.9); }
.dcs-bd { padding:14px 16px; }
.dcs-bd p { font-size:12px; color:#b9c6e4; line-height:1.55; margin:0 0 12px; }
.dcs-stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.dcs-stats > div { text-align:center; padding:9px 6px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.dcs-stats b { display:block; font-size:17px; color:#fff; font-variant-numeric:tabular-nums; }
.dcs-stats span { font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:#8ea0c4; }
.dcs-join { display:block; margin:0 16px 16px; padding:11px; border-radius:12px; text-align:center;
  background:linear-gradient(180deg, #7983f5, #5865f2); color:#fff; font-size:12.5px; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; text-decoration:none; border:1px solid #99a3ff;
  box-shadow:0 8px 22px rgba(88,101,242,.4); transition:transform .15s, box-shadow .15s, filter .15s; }
.dcs-join:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(88,101,242,.55); filter:brightness(1.08); text-decoration:none; }

@media (max-width:640px){
  #dcside { top:auto; bottom:80px; }
  .dcs-pop { width:250px; }
  .dcs-pill .dcs-count { max-width:120px; opacity:1; } /* mobile: selalu tampil */
}

/* ============================================================
   RESPONSIVE MOBILE — nav hamburger + rapian layout HP
   ============================================================ */

/* ---- tombol hamburger (hidden di desktop) ---- */
.navburger { display:none; }

/* ---- tablet: kecilkan nav ---- */
@media (max-width:920px) {
  nav { gap:2px; padding:10px 0; }
  nav a { padding:6px 9px; font-size:11.5px; }
  nav .logo { font-size:13px; letter-spacing:1.5px; }
  nav .logo .navlogo { width:24px; height:24px; }
  .statstrip { grid-template-columns:repeat(2,1fr); margin-top:24px; }
}

/* ---- HP: hamburger menu ---- */
@media (max-width:720px) {
  .navburger {
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:9px; border-radius:12px; cursor:pointer;
    background:rgba(255,255,255,.06); border:1px solid rgba(232,176,75,.4);
    margin-left:auto; order:99; flex:none;
  }
  .navburger span { display:block; height:2px; border-radius:2px; background:var(--gold); transition:transform .25s ease, opacity .2s ease; }
  .navburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .navburger.open span:nth-child(2) { opacity:0; }
  .navburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  /* nav jadi dropdown panel dari atas */
  nav { flex-wrap:wrap; }
  nav .logo { order:1; }
  nav > a, nav > .navdd { display:none; }
  nav.open > a, nav.open > .navdd { display:block; width:100%; }
  nav.open { padding-bottom:14px; }
  nav.open > a { padding:11px 14px; border-radius:10px; font-size:13.5px; }
  nav.open > a + a { margin-top:2px; }
  nav.open .navdd .ddtoggle { display:block; width:100%; text-align:left; }
  nav.open .navdd .ddmenu { position:static; opacity:1; visibility:visible; transform:none;
    background:rgba(232,176,75,.05); border:none; box-shadow:none; margin:2px 0 6px; padding:4px 10px; }
  nav.open .navdd .ddmenu a { padding:9px 14px; }

  /* hero lebih kompak */
  .hero { min-height:78vh; }
  .hero .hlogo img { width:clamp(120px,34vw,180px); }
  .hero .chips { flex-wrap:wrap; justify-content:center; gap:6px; }
  .hero .chips .chip { font-size:10px; padding:5px 10px; }
  .hero h1 { font-size:clamp(30px,9vw,44px); }

  /* statstrip 2 kolom */
  .statstrip { grid-template-columns:repeat(2,1fr); gap:9px; }
  .stat { padding:13px 10px; }
  .stat .v { font-size:19px; }

  /* section padding & judul */
  section { padding:0 4px; }
  h2 { font-size:clamp(24px,6.5vw,34px); }
  .subhead { font-size:12.5px; }

  /* footer & misc */
  footer { font-size:11px; text-align:center; }
  .dlwrap { flex-direction:column; }
  .dlbtn { width:100%; }

  /* toTop button jangan nutupin konten */
  #toTop { bottom:14px; right:14px; width:40px; height:40px; }
}

/* ---- HP sempit (<400px): 1 kolom stat ---- */
@media (max-width:400px) {
  .statstrip { grid-template-columns:1fr; }
  .rgrid { grid-template-columns:1fr; }
}

/* ============================================================
   PROTEKSI TAMBAHAN (mobile + umum)
   ============================================================ */

/* anti text-selection halus di UI navigasi (susah di-select buat copy-paste scam) */
nav, .btnnav, .regbtn, .dlbtn, .ccard .nm, .hero h1 {
  -webkit-user-select:none; user-select:none;
}

/* anti highlight-tap biru saat tap di mobile (iOS/Android) */
* { -webkit-tap-highlight-color: rgba(232,176,75,.18); }

/* smooth scroll buat anchor (mobile friendly) */
html { scroll-behavior:smooth; }

/* form input: cegah zoom otomatis iOS (font input < 16px memicu zoom) */
@media (max-width:720px) {
  .inp, input[type="text"], input[type="password"], input[type="email"],
  input[type="number"], select, textarea {
    font-size:16px !important;
  }
}

/* print: sembunyikan efek & nav (kalau ada yang print halaman) */
@media print {
  #snowfx, #stars, nav, #toTop, #boot { display:none !important; }
  body { background:#fff !important; color:#000 !important; }
}

/* ---- tabel responsif: scroll horizontal di HP ---- */
.tbscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
.tbscroll table { min-width:560px; }
@media (max-width:720px) {
  table.rank th, table.rank td { padding:8px 10px; font-size:12px; white-space:nowrap; }
}