:root{
  --ink:#070B1E;
  --ink-2:#0D1330;
  --ink-3:#141B3F;
  --peri:#7C8CFF;
  --coral:#FF5E7A;
  --cyan:#45E3D8;
  --amber:#FFB84D;
  --text:#E9ECFF;
  --muted:#9AA3C7;
  --line:rgba(124,140,255,.16);
  --glass:rgba(20,27,63,.55);
  --r:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--ink);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.6;
}
::selection{background:var(--peri);color:var(--ink)}
h1,h2,h3,.display{font-family:'Unbounded',sans-serif;line-height:1.15}
.mono{font-family:'JetBrains Mono',monospace}

/* ====== BACKDROP ====== */
.bg-grid{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124,140,255,.18), transparent 60%),
    radial-gradient(ellipse 40% 40% at 90% 80%, rgba(69,227,216,.07), transparent 60%),
    radial-gradient(ellipse 40% 40% at 5% 60%, rgba(255,94,122,.06), transparent 60%);
}
.bg-grid::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(124,140,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(124,140,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 30%,transparent 80%);
}

/* ====== NAVBAR ====== */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 5vw;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:rgba(7,11,30,.62);
  border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);perspective:600px}
.logo-icon{
  width:42px;height:42px;object-fit:contain;display:block;
  mix-blend-mode:screen;transform-style:preserve-3d;
  animation:logoSpin 9s linear infinite;
}
@keyframes logoSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.logo-name{font-family:'Unbounded';font-weight:700;font-size:1.05rem;letter-spacing:.08em}
.logo-name em{font-style:normal;color:var(--peri)}
.logo-name-img{height:35.7px;width:auto;display:block;mix-blend-mode:screen}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none}
.nav-links a{
  color:var(--muted);text-decoration:none;font-weight:600;font-size:.88rem;
  padding:9px 16px;border-radius:99px;transition:.25s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--text);background:rgba(124,140,255,.12)}

.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-btn{
  background:none;border:none;margin:0;color:var(--muted);font-weight:600;font-size:.88rem;
  padding:9px 16px;border-radius:99px;cursor:pointer;font-family:inherit;line-height:normal;transition:.25s;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-dropdown-btn:hover{color:var(--text);background:rgba(124,140,255,.12)}
.nav-dropdown .caret{font-size:.7em;transition:transform .2s}
.nav-dropdown.open .caret{transform:rotate(180deg)}
.nav-dropdown-menu{
  display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:max-content;
  background:rgba(13,19,48,.97);border:1px solid var(--line);border-radius:14px;
  padding:8px;list-style:none;box-shadow:0 24px 54px rgba(0,0,0,.5);
  backdrop-filter:blur(14px);z-index:150;
}
.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dropdown-menu li a{
  display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;color:var(--muted);
  text-decoration:none;font-size:.86rem;font-weight:600;transition:.2s;white-space:nowrap;
}
.nav-dropdown-menu li a:hover{color:var(--text);background:rgba(124,140,255,.1)}
.nav-dropdown-icon{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.nav-search{display:flex;align-items:center;gap:8px}
.nav-search-input{
  width:190px;padding:9px 16px;border:1px solid var(--line);background:rgba(7,11,30,.5);
  color:var(--text);font-family:inherit;font-size:.85rem;border-radius:99px;outline:none;transition:border-color .25s;
}
.nav-search-input:focus{border-color:var(--peri)}
.nav-search-btn{
  background:rgba(20,27,63,.6);border:1px solid var(--line);border-radius:99px;
  color:var(--text);font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:7px;padding:9px 18px 9px 14px;transition:.25s;flex-shrink:0;white-space:nowrap;
}
.nav-search-btn:hover{border-color:var(--peri);background:rgba(124,140,255,.15)}
.nav-search-btn-icon{color:var(--peri)}
.nav-search-btn-text{font-family:'Unbounded',sans-serif;font-size:.75rem;font-weight:700}
.nav-cta{
  font-family:'JetBrains Mono';font-size:.8rem;font-weight:700;
  color:var(--ink);background:linear-gradient(120deg,var(--peri),var(--cyan));
  border:none;padding:11px 20px;border-radius:99px;cursor:pointer;
  transition:.25s;box-shadow:0 0 0 0 rgba(124,140,255,.4);
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,140,255,.35)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:1.2rem;padding:6px 12px;cursor:pointer}
/* Ikon cari khusus mobile — form .nav-search disembunyikan total di layar sempit (lihat media
   query di bawah), jadi tanpa ini pencarian tidak bisa diakses sama sekali dari navbar mobile. */
.nav-search-icon{
  display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  color:var(--text);font-size:1.05rem;align-items:center;justify-content:center;
  text-decoration:none;flex-shrink:0;transition:.25s;
}
.nav-search-icon:hover{border-color:var(--peri);background:rgba(124,140,255,.12)}

/* ====== HERO ====== */
.hero{
  min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;gap:4vw;
  align-items:center;padding:56px 5vw 60px;position:relative;
}
#scene3d{position:absolute;inset:0;z-index:0;opacity:.85}
.hero-copy{position:relative;z-index:2}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono';font-size:.75rem;letter-spacing:.18em;
  color:var(--cyan);border:1px solid rgba(69,227,216,.35);
  padding:8px 16px;border-radius:99px;background:rgba(69,227,216,.06);
  margin-bottom:26px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}
.hero h1{
  font-size:clamp(2.1rem,4.6vw,3.9rem);font-weight:700;margin-bottom:24px;
}
.hero h1 .grad{
  background:linear-gradient(110deg,var(--peri) 10%,var(--cyan) 55%,var(--coral) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:var(--muted);font-size:1.05rem;max-width:52ch;margin-bottom:36px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.btn-main{
  font-family:'Unbounded';font-size:.85rem;font-weight:600;color:var(--ink);
  background:linear-gradient(120deg,var(--peri),var(--cyan));
  padding:16px 30px;border-radius:14px;text-decoration:none;
  transition:.3s;display:inline-block;
}
.btn-main:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 34px rgba(124,140,255,.4)}
.btn-ghost{
  font-family:'Unbounded';font-size:.85rem;font-weight:600;color:var(--text);
  border:1px solid var(--line);padding:16px 30px;border-radius:14px;text-decoration:none;
  transition:.3s;background:rgba(20,27,63,.4);backdrop-filter:blur(8px);
}
.btn-ghost:hover{border-color:var(--peri);background:rgba(124,140,255,.1)}
.hero-stats{display:flex;gap:38px;margin-top:52px;flex-wrap:wrap}
.stat b{font-family:'Unbounded';font-size:1.5rem;color:var(--text)}
.stat span{display:block;font-size:.8rem;color:var(--muted);font-family:'JetBrains Mono'}

/* Kartu 3D unggulan */
.hero-visual{position:relative;z-index:2;perspective:1200px}
.tilt-stack{position:relative;transform-style:preserve-3d;transition:transform .18s ease-out}
.card-featured{
  background:linear-gradient(160deg,rgba(30,40,90,.85),rgba(13,19,48,.9));
  border:1px solid rgba(124,140,255,.3);border-radius:26px;
  padding:30px;transform-style:preserve-3d;
  box-shadow:0 40px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(233,236,255,.08);
  backdrop-filter:blur(14px);
}
.card-featured .tag{
  display:inline-block;font-family:'JetBrains Mono';font-size:.7rem;font-weight:700;
  letter-spacing:.15em;color:var(--ink);background:var(--coral);
  padding:6px 14px;border-radius:99px;transform:translateZ(50px);
}
.card-featured h3{font-size:1.35rem;margin:18px 0 12px;transform:translateZ(40px)}
.card-featured p{
  color:var(--muted);font-size:.92rem;transform:translateZ(30px);
  text-align:justify;text-justify:inter-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-featured p.expanded{-webkit-line-clamp:unset;overflow:visible}
.fs-readmore{
  display:inline-block;margin-top:8px;background:none;border:none;color:var(--cyan);
  font-family:'JetBrains Mono';font-size:.75rem;font-weight:700;cursor:pointer;padding:0;
  transform:translateZ(30px);
}
.fs-readmore:hover{color:var(--peri)}
.card-featured .art{
  height:190px;border-radius:16px;margin:22px 0 8px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,94,122,.4), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(124,140,255,.5), transparent 55%),
    linear-gradient(140deg,#1A2350,#0D1330);
  transform:translateZ(24px);border:1px solid var(--line);
}
.art .shape{position:absolute;border-radius:22%;border:2px solid rgba(233,236,255,.35);animation:floaty 6s ease-in-out infinite}
.art .s1{width:74px;height:74px;top:24px;left:36px;transform:rotate(18deg)}
.art .s2{width:44px;height:44px;bottom:28px;right:52px;border-radius:50%;border-color:var(--cyan);animation-delay:1.4s}
.art .s3{width:56px;height:56px;top:52px;right:120px;transform:rotate(-14deg);border-color:var(--coral);animation-delay:2.6s}
.art.has-img{background-size:cover;background-position:center}
@keyframes floaty{50%{transform:translateY(-14px) rotate(24deg)}}

/* Slideshow "Games Unggulan" */
.fs-slide{display:none}
.fs-slide.active{display:block;animation:fsFade .6s ease}
@keyframes fsFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fs-dots{display:flex;gap:8px;justify-content:center;margin-top:16px;transform:translateZ(40px)}
.fs-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(233,236,255,.25);cursor:pointer;padding:0;transition:.25s}
.fs-dot:hover{background:rgba(233,236,255,.5)}
.fs-dot.active{background:var(--cyan);width:22px;border-radius:5px}
.card-mini{
  position:absolute;background:var(--glass);border:1px solid var(--line);
  border-radius:16px;padding:14px 18px;backdrop-filter:blur(14px);
  font-family:'JetBrains Mono';font-size:.75rem;color:var(--text);
  box-shadow:0 20px 44px rgba(0,0,0,.4);
  display:flex;align-items:center;gap:10px;
}
.card-mini b{color:var(--cyan)}
.mini-1{top:-26px;right:-14px;transform:translateZ(90px);animation:floaty 5s ease-in-out infinite}
.mini-2{bottom:-24px;left:-20px;transform:translateZ(70px);animation:floaty 7s ease-in-out infinite reverse}

/* ====== TICKER ====== */
.ticker{
  margin-top:82px; /* jarak agar tidak tertutup navbar yang position:fixed */
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(13,19,48,.6);overflow:hidden;display:flex;position:relative;z-index:2;
}
.ticker-label{
  flex-shrink:0;font-family:'Unbounded';font-size:.72rem;font-weight:700;
  background:linear-gradient(120deg,var(--coral),var(--amber));color:var(--ink);
  padding:14px 22px;display:flex;align-items:center;letter-spacing:.1em;
  position:relative;z-index:1;box-shadow:4px 0 12px rgba(7,11,30,.5);
}
.ticker-track{display:flex;gap:0;animation:tick 45s linear infinite;white-space:nowrap;align-items:center}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span,.ticker-track a{
  font-family:'JetBrains Mono';font-size:.82rem;color:var(--muted);
  padding:14px 28px;display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;transition:color .2s;
}
.ticker-track a:hover{color:var(--text)}
.ticker-track span::after,.ticker-track a::after{content:"◆";color:var(--peri);font-size:.6rem}
@keyframes tick{to{transform:translateX(-50%)}}

/* ====== SECTIONS ====== */
section{padding:96px 5vw;position:relative}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-eyebrow{
  font-family:'JetBrains Mono';font-size:.75rem;letter-spacing:.22em;
  color:var(--peri);margin-bottom:14px;display:flex;align-items:center;gap:12px;
}
.sec-eyebrow::before{content:"";width:34px;height:1px;background:var(--peri)}
.sec-head h2{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:700}
.sec-head p{color:var(--muted);margin-top:14px}

/* Kategori 3D */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;perspective:1400px}
.cat-card{
  position:relative;border-radius:var(--r);padding:30px 26px;min-height:300px;
  background:linear-gradient(165deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line);transform-style:preserve-3d;
  transition:transform .18s ease-out, box-shadow .3s;cursor:pointer;
  display:flex;flex-direction:column;overflow:visible;
}
.cat-card:hover{box-shadow:0 34px 70px rgba(0,0,0,.55)}
.cat-icon{
  width:66px;height:66px;border-radius:18px;display:grid;place-items:center;
  font-size:1.7rem;margin-bottom:22px;transform:translateZ(46px);
  border:1px solid rgba(233,236,255,.14);
}
.cat-card h3{font-size:1.1rem;margin-bottom:10px;transform:translateZ(36px)}
.cat-card p{color:var(--muted);font-size:.88rem;flex:1;transform:translateZ(26px)}
.cat-count{
  font-family:'JetBrains Mono';font-size:.75rem;margin-top:18px;
  transform:translateZ(30px);display:flex;justify-content:space-between;align-items:center;
}
.cat-count .arrow{transition:.3s}
.cat-card:hover .arrow{transform:translateX(6px)}
.cat-card::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(233,236,255,.09), transparent 45%);
  opacity:0;transition:.3s;pointer-events:none;
}
.cat-card:hover::after{opacity:1}
.c-games .cat-icon{background:rgba(255,94,122,.18);color:var(--coral)}
.c-games .cat-count{color:var(--coral)}
.c-apps .cat-icon{background:rgba(124,140,255,.18);color:var(--peri)}
.c-apps .cat-count{color:var(--peri)}
.c-tuto .cat-icon{background:rgba(69,227,216,.18);color:var(--cyan)}
.c-tuto .cat-count{color:var(--cyan)}
.c-news .cat-icon{background:rgba(255,184,77,.18);color:var(--amber)}
.c-news .cat-count{color:var(--amber)}

/* ====== MENU GAMES & APLIKASI ====== */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.filter-chip{
  font-family:'JetBrains Mono';font-size:.76rem;font-weight:700;letter-spacing:.06em;
  color:var(--muted);background:rgba(20,27,63,.5);border:1px solid var(--line);
  padding:9px 18px;border-radius:99px;cursor:pointer;transition:.25s;
}
.filter-chip:hover{color:var(--text);border-color:var(--peri)}
.filter-chip.active{color:var(--ink);background:linear-gradient(120deg,var(--peri),var(--cyan));border-color:transparent}
#menu-games .filter-chip.active{background:linear-gradient(120deg,var(--coral),var(--amber))}

.item-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.item-card{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--ink-2);transition:transform .35s,box-shadow .35s,border-color .35s,opacity .4s;
  display:flex;flex-direction:column;
}
.item-card:hover{transform:translateY(-8px);box-shadow:0 26px 56px rgba(0,0,0,.5)}
#menu-games .item-card:hover{border-color:rgba(255,94,122,.5)}
#menu-aplikasi .item-card:hover{border-color:rgba(124,140,255,.5)}
.item-cover{height:130px;position:relative;display:grid;place-items:center;font-size:3rem;overflow:hidden}
.item-cover::before{content:"";position:absolute;inset:0;transition:transform .6s}
.item-card:hover .item-cover::before{transform:scale(1.08)}
.item-cover .emoji{position:relative;z-index:1;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));transition:transform .4s}
.item-card:hover .item-cover .emoji{transform:scale(1.15) rotate(-4deg)}
.badge{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:'JetBrains Mono';font-size:.66rem;font-weight:700;letter-spacing:.1em;
  padding:5px 12px;border-radius:99px;color:var(--ink);
}
.badge.baru{background:var(--cyan)}
.badge.update{background:var(--amber)}
.badge.populer{background:var(--coral)}
.item-body{padding:22px;display:flex;flex-direction:column;flex:1;gap:10px}
.item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.item-body h3{font-size:1rem;font-weight:600;font-family:'Plus Jakarta Sans'}
.rating{font-family:'JetBrains Mono';font-size:.78rem;color:var(--amber);white-space:nowrap}
.item-body p{
  color:var(--muted);font-size:.85rem;flex:1;text-align:justify;text-justify:inter-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.item-body p.expanded{-webkit-line-clamp:unset;overflow:visible}
.item-readmore{
  display:inline-block;margin:-6px 0 4px;background:none;border:none;color:var(--cyan);
  font-family:'JetBrains Mono';font-size:.72rem;font-weight:700;cursor:pointer;padding:0;text-align:left;
}
.item-readmore:hover{color:var(--peri)}
.item-specs{
  display:flex;gap:8px;flex-wrap:wrap;
  font-family:'JetBrains Mono';font-size:.68rem;color:var(--muted);
}
.item-specs span{border:1px solid var(--line);border-radius:8px;padding:4px 10px;background:rgba(7,11,30,.5)}
.item-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.ver{font-family:'JetBrains Mono';font-size:.7rem;color:var(--muted)}
.btn-get{
  font-family:'Unbounded';font-size:.68rem;font-weight:600;text-decoration:none;
  padding:10px 20px;border-radius:12px;transition:.3s;color:var(--ink);
}
#menu-games .btn-get{background:linear-gradient(120deg,var(--coral),var(--amber))}
#menu-aplikasi .btn-get{background:linear-gradient(120deg,var(--peri),var(--cyan))}
.btn-get:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.btn-get-disabled{background:rgba(154,163,199,.15)!important;color:var(--muted)!important;cursor:not-allowed}
.btn-get-disabled:hover{transform:none!important;box-shadow:none!important}
.item-card.hide{display:none}
.empty-note{
  grid-column:1/-1;text-align:center;color:var(--muted);
  font-family:'JetBrains Mono';font-size:.85rem;padding:40px 0;
  border:1px dashed var(--line);border-radius:var(--r);
}


.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{
  border-radius:var(--r);overflow:hidden;background:var(--ink-2);
  border:1px solid var(--line);transition:transform .35s,box-shadow .35s,border-color .35s;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;
}
.post:hover{transform:translateY(-10px) rotateX(2deg);border-color:rgba(124,140,255,.45);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.post-thumb{height:180px;position:relative;overflow:hidden}
.post-thumb .fill{position:absolute;inset:0;transition:transform .6s}
.post:hover .fill{transform:scale(1.07)}
.t-games .fill{background:radial-gradient(circle at 30% 30%,rgba(255,94,122,.55),transparent 60%),linear-gradient(150deg,#251133,#0D1330)}
.t-apps .fill{background:radial-gradient(circle at 70% 40%,rgba(124,140,255,.55),transparent 60%),linear-gradient(150deg,#121a45,#0D1330)}
.t-tuto .fill{background:radial-gradient(circle at 50% 70%,rgba(69,227,216,.45),transparent 60%),linear-gradient(150deg,#0c2a33,#0D1330)}
.t-news .fill{background:radial-gradient(circle at 60% 30%,rgba(255,184,77,.45),transparent 60%),linear-gradient(150deg,#2b2010,#0D1330)}
.post-thumb .glyph{
  position:absolute;inset:0;display:grid;place-items:center;font-size:3rem;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));transition:transform .5s;
}
.post:hover .glyph{transform:translateY(-6px) scale(1.1)}
.post-body{padding:24px;display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;gap:12px;align-items:center;font-family:'JetBrains Mono';font-size:.7rem;margin-bottom:14px}
.chip{padding:4px 12px;border-radius:99px;font-weight:700;letter-spacing:.08em}
.chip.games{background:rgba(255,94,122,.15);color:var(--coral)}
.chip.apps{background:rgba(124,140,255,.15);color:var(--peri)}
.chip.tuto{background:rgba(69,227,216,.13);color:var(--cyan)}
.chip.news{background:rgba(255,184,77,.14);color:var(--amber)}
.post-meta time{color:var(--muted)}
.post h3{font-size:1rem;margin-bottom:10px;font-weight:600}
.post p{color:var(--muted);font-size:.87rem;flex:1}
.read{margin-top:18px;font-family:'JetBrains Mono';font-size:.78rem;color:var(--peri);display:flex;align-items:center;gap:8px}
.post:hover .read{gap:14px}
.read{transition:gap .3s}

/* Tutorial steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{
  border:1px solid var(--line);border-radius:var(--r);padding:30px;
  background:linear-gradient(165deg,rgba(20,27,63,.7),rgba(13,19,48,.8));
  position:relative;transition:.35s;
}
.step:hover{transform:translateY(-8px);border-color:rgba(69,227,216,.4)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:'Unbounded';font-weight:800;font-size:2.6rem;
  background:linear-gradient(180deg,var(--cyan),transparent 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:14px;
}
.step h3{font-size:1rem;margin-bottom:10px}
.step p{color:var(--muted);font-size:.88rem}
.step .lvl{
  position:absolute;top:26px;right:24px;font-family:'JetBrains Mono';font-size:.68rem;
  color:var(--cyan);border:1px solid rgba(69,227,216,.35);padding:4px 12px;border-radius:99px;
}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc-card{
  border:1px solid var(--line);border-radius:var(--r);padding:30px;
  background:linear-gradient(165deg,rgba(20,27,63,.7),rgba(13,19,48,.8));
  transition:.35s;
}
.svc-card:hover{transform:translateY(-8px);border-color:rgba(124,140,255,.4)}
.svc-icon{font-size:2rem;display:block;margin-bottom:14px}
.svc-card h3{font-size:1rem;margin-bottom:10px}
.svc-card p{color:var(--muted);font-size:.88rem}

/* Berita list */
.news-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.news-row{
  display:grid;grid-template-columns:110px 1fr auto;gap:26px;align-items:center;
  padding:26px 10px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);
  transition:.3s;border-radius:8px;
}
.news-row:hover{background:rgba(124,140,255,.06);padding-left:22px}
.news-row time{font-family:'JetBrains Mono';font-size:.75rem;color:var(--muted)}
.news-row h3{font-size:1.02rem;font-weight:600;font-family:'Plus Jakarta Sans'}
.news-row .go{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--peri);transition:.3s;flex-shrink:0;
}
.news-row:hover .go{background:var(--peri);color:var(--ink);transform:rotate(-45deg)}

/* Newsletter */
.cta-box{
  border-radius:32px;padding:70px 5vw;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#161F52,#0B1030);border:1px solid rgba(124,140,255,.3);
}
.cta-box::before,.cta-box::after{
  content:"";position:absolute;border-radius:26%;border:2px solid rgba(124,140,255,.25);
  animation:floaty 8s ease-in-out infinite;
}
.cta-box::before{width:130px;height:130px;top:-30px;left:8%;transform:rotate(20deg)}
.cta-box::after{width:90px;height:90px;bottom:-20px;right:10%;border-color:rgba(69,227,216,.3);animation-delay:2s}
.cta-box h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:14px}
.cta-box p{color:var(--muted);max-width:54ch;margin:0 auto 34px}
.cta-form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.cta-form input{
  background:rgba(7,11,30,.7);border:1px solid var(--line);border-radius:14px;
  padding:15px 22px;color:var(--text);font-family:'Plus Jakarta Sans';font-size:.92rem;
  width:min(340px,80vw);outline:none;transition:.3s;
}
.cta-form input:focus{border-color:var(--peri);box-shadow:0 0 0 4px rgba(124,140,255,.15)}
.cta-form button{
  font-family:'Unbounded';font-size:.82rem;font-weight:600;color:var(--ink);
  background:linear-gradient(120deg,var(--peri),var(--cyan));border:none;
  padding:15px 28px;border-radius:14px;cursor:pointer;transition:.3s;
}
.cta-form button:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(124,140,255,.4)}
.cta-note{margin-top:18px;font-family:'JetBrains Mono';font-size:.72rem;color:var(--muted)}

/* Footer */
footer{border-top:1px solid var(--line);padding:56px 5vw 34px;background:rgba(7,11,30,.8)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.foot-grid p{color:var(--muted);font-size:.88rem;margin-top:16px;max-width:34ch}
.foot-grid h4{font-family:'JetBrains Mono';font-size:.75rem;letter-spacing:.2em;color:var(--peri);margin-bottom:18px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:10px}
.foot-grid a{color:var(--muted);text-decoration:none;font-size:.9rem;transition:.25s}
.foot-grid a:hover{color:var(--text);padding-left:5px}
.foot-bottom{
  border-top:1px solid var(--line);padding-top:26px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:'JetBrains Mono';font-size:.74rem;color:var(--muted);
}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* Responsif */
@media(max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3,.steps,.item-grid,.svc-grid{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr;gap:70px;padding-top:56px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .nav-links,.nav-cta,.nav-search{display:none}
  .burger{display:block}
  .nav-search-icon{display:flex}
  .nav-links.open{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:rgba(7,11,30,.97);padding:18px 5vw 26px;border-bottom:1px solid var(--line);
    max-height:calc(100vh - 74px);overflow-y:auto;
  }
  /* Submenu "Tools Apps" default-nya min-width:max-content (bisa meluber ke luar layar sempit
     kalau labelnya panjang, mis. "Kalkulator Subnet IP"). Perbaikan pertama pakai max-width:100%
     ternyata salah — parent-nya (.nav-dropdown, tombol togglenya) lebarnya cuma sesempit teks
     tombol itu sendiri (~120px), jadi submenu ikut terjepit sempit dan teksnya bertumpuk.
     Pakai satuan viewport langsung, bukan %, supaya lebar submenu independen dari parent-nya. */
  .nav-dropdown-menu{left:0;min-width:220px;max-width:80vw}
  .nav-dropdown-menu li a{white-space:normal}
  .grid-3,.steps,.grid-4,.item-grid,.svc-grid{grid-template-columns:1fr}
  .news-row{grid-template-columns:1fr auto;gap:14px}
  .news-row time{grid-column:1/-1}
  .foot-grid{grid-template-columns:1fr}
  .mini-1{right:0}.mini-2{left:0}
}

/* ====== NAV AUTH LINK (dinamis via session) ====== */
.nav-auth{
  font-family:'JetBrains Mono';font-size:.8rem;font-weight:700;
  color:var(--text);border:1px solid var(--line);
  padding:9px 18px;border-radius:99px;text-decoration:none;transition:.25s;
}
.nav-auth:hover{border-color:var(--peri);background:rgba(124,140,255,.1)}

/* ====== CHAT WIDGET ====== */
.d-none{display:none!important}
.chat-widget{position:fixed;right:24px;bottom:24px;z-index:300;font-family:'Plus Jakarta Sans',sans-serif}
.chat-toggle{
  width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(120deg,var(--peri),var(--cyan));font-size:1.5rem;
  display:grid;place-items:center;position:relative;
  box-shadow:0 10px 30px rgba(124,140,255,.45);transition:.25s;
}
.chat-toggle:hover{transform:translateY(-3px) scale(1.05)}
.chat-badge{
  position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;
  background:var(--coral);border:2px solid var(--ink);
}
.chat-panel{
  position:absolute;bottom:74px;right:0;width:340px;max-width:calc(100vw - 48px);
  height:460px;max-height:70vh;background:var(--ink-2);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.chat-head{
  padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  font-family:'Unbounded',sans-serif;font-size:.85rem;color:var(--text);
  background:linear-gradient(120deg,rgba(124,140,255,.15),rgba(69,227,216,.1));flex-shrink:0;
}
.chat-close{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;line-height:1}
.chat-close:hover{color:var(--text)}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:82%;padding:9px 13px;border-radius:14px;font-size:.85rem;line-height:1.5;word-wrap:break-word}
.chat-msg.guest{align-self:flex-end;background:linear-gradient(120deg,var(--peri),var(--cyan));color:var(--ink);border-bottom-right-radius:4px}
.chat-msg.admin{align-self:flex-start;background:var(--ink-3);color:var(--text);border:1px solid var(--line);border-bottom-left-radius:4px}
.chat-msg .chat-time{display:block;font-size:.64rem;opacity:.75;margin-top:4px;font-family:'JetBrains Mono'}
.chat-form{padding:18px;display:flex;flex-direction:column;gap:12px;margin:auto 0}
.chat-form label{font-size:.78rem;color:var(--muted)}
.chat-form input{
  width:100%;background:rgba(7,11,30,.7);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;color:var(--text);font-family:inherit;font-size:.85rem;outline:none;margin-top:4px;
}
.chat-form input:focus{border-color:var(--peri)}
.chat-form button{
  font-family:'Unbounded',sans-serif;font-size:.78rem;font-weight:600;color:var(--ink);
  background:linear-gradient(120deg,var(--peri),var(--cyan));border:none;padding:12px;border-radius:10px;cursor:pointer;
}
.chat-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);flex-shrink:0}
.chat-input-row textarea{
  flex:1;background:rgba(7,11,30,.7);border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  color:var(--text);font-family:inherit;font-size:.85rem;resize:none;outline:none;max-height:80px;
}
.chat-input-row textarea:focus{border-color:var(--peri)}
.chat-input-row button{width:44px;flex-shrink:0;border:none;border-radius:10px;background:linear-gradient(120deg,var(--peri),var(--cyan));color:var(--ink);font-size:1.1rem;cursor:pointer}
.chat-status-closed{text-align:center;color:var(--muted);font-size:.78rem;padding:12px;font-style:italic;flex-shrink:0}
.chat-note{color:var(--muted);font-size:.72rem;text-align:center}
.chat-empty{color:var(--muted);font-size:.82rem;text-align:center;margin:auto}
.chat-err{color:var(--coral);font-size:.78rem;text-align:center}
@media(max-width:480px){.chat-panel{width:calc(100vw - 32px);right:-8px}}