/* ===== Tema (warna mengikuti logo BoomRO: biru langit, navy, oranye, pink) ===== */
:root{
  --bg:#031422;--panel:rgba(5,30,52,.9);--panel2:rgba(16,62,100,.62);--line:rgba(110,195,255,.24);
  --fg:#eaf6ff;--mut:#8fb4d0;--hi:#38c8ff;--acc:#f7931e;--acc2:#ffc94d;--accfg:#3a1d00;--blue:#1d6fc4;
  --ok:#3ddc97;--err:#ff6b6b;--shade:rgba(3,20,34,.78);--glow:rgba(56,200,255,.35);
  --ro1:#4aa3e8;--ro2:#1c5fa8;--ro3:#123f73;--rob:#082a4d;
}
[data-theme=halloween]{--bg:#120a1c;--panel:rgba(28,14,40,.9);--panel2:rgba(60,28,70,.6);--line:rgba(190,140,255,.25);--hi:#c79bff;--acc:#ff8a2a;--acc2:#ffc27a;--accfg:#1c0a00;--shade:rgba(16,6,26,.78);--glow:rgba(255,138,42,.4);--ro1:#8a5bd6;--ro2:#5b2f9c;--ro3:#3b1d6b;--rob:#240f45}
[data-theme=christmas]{--bg:#0a1a1a;--panel:rgba(10,32,30,.9);--panel2:rgba(20,60,50,.6);--line:rgba(120,230,170,.25);--hi:#6fe3a0;--acc:#ff5a5a;--acc2:#ffa0a0;--accfg:#fff;--shade:rgba(4,22,20,.78);--glow:rgba(255,90,90,.4);--ro1:#3fb283;--ro2:#1f7d5b;--ro3:#145a41;--rob:#0b3b2a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--fg);background:var(--bg);font:15px/1.55 system-ui,"Segoe UI",Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;letter-spacing:.5px;margin:0 0 12px}
h1{font-size:28px}h2{font-size:21px}h3{font-size:17px;color:var(--acc)}
.mut{color:var(--mut)}.small{font-size:13px}
.up{color:var(--ok)}.down{color:var(--err)}

/* latar peta RO */
.scene{position:fixed;inset:0;z-index:-2;background:var(--bgmap) center/cover no-repeat;filter:saturate(.9)}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,18,.45),rgba(6,8,18,.75) 55%,var(--bg))}

/* pemuat: poring berjalan */
#loader{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .45s}
#loader.hide{opacity:0;pointer-events:none}

/* sprite RO */
.spr{display:inline-block;image-rendering:pixelated;background-repeat:no-repeat;animation:spr var(--dur,800ms) steps(var(--n,1)) infinite}
@keyframes spr{to{background-position-x:var(--end)}}
.spr.flip{transform-origin:center;scale:-1 1}
.hover-jump{transition:translate .15s}.hover-jump:hover{translate:0 -8px}

/* bar status */
.statusbar{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;padding:6px 12px;background:rgba(0,0,0,.65);font-size:12.5px;color:var(--mut);border-bottom:1px solid var(--line)}
.statusbar b{color:var(--fg)}.statusbar b.up{color:var(--ok)}.statusbar b.down{color:var(--err)}

/* header */
.top{display:flex;align-items:center;gap:18px;padding:12px 22px;background:var(--shade);backdrop-filter:blur(6px);border-bottom:2px solid var(--acc);position:sticky;top:0;z-index:20}
.brand{font:700 24px Georgia,serif;color:var(--acc);text-shadow:0 0 14px var(--glow)}
.top nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:auto}
.top nav a{color:var(--fg);padding:6px 2px;border-bottom:2px solid transparent}
.top nav a:hover{color:var(--acc);border-color:var(--acc);text-decoration:none}
.burger{display:none;margin-left:auto;background:transparent;color:var(--fg);font-size:24px;padding:0 8px}

/* tata letak */
.wrap{display:grid;grid-template-columns:290px 1fr;gap:22px;max-width:1240px;width:100%;margin:22px auto;padding:0 16px;flex:1}
aside{display:flex;flex-direction:column;gap:16px}
main{min-width:0}
.panel,.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(4px)}
.card{margin-bottom:18px}
.panel h3{border-bottom:1px solid var(--line);padding-bottom:8px}

/* form & tombol */
input,select{width:100%;max-width:380px;padding:10px 12px;margin:0 0 10px;background:rgba(0,0,0,.38);color:var(--fg);border:1px solid var(--line);border-radius:8px}
aside input{max-width:none}
input:focus,select:focus{outline:2px solid var(--acc);border-color:transparent}
form label{display:block;margin:12px 0 4px;color:var(--mut)}
.btn,button{display:inline-block;background:linear-gradient(180deg,var(--acc2),var(--acc));color:var(--accfg);border:0;border-radius:999px;padding:9px 18px;font-weight:700;cursor:pointer;text-align:center;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.btn:hover,button:hover{text-decoration:none;filter:brightness(1.1);transform:translateY(-1px)}
.btn.block{display:block;width:100%;margin-bottom:9px}
.btn.alt{background:var(--panel2);color:var(--fg);border:1px solid var(--line)}
.btn.blue{background:linear-gradient(180deg,#5b8cf0,var(--blue));color:#fff}
.btn.gold{background:linear-gradient(180deg,#ffe28a,#e8b64a);color:#3a2800}
button[disabled]{opacity:.4;cursor:not-allowed}
.btns .btn:last-child{margin-bottom:0}

/* tabel */
table{width:100%;border-collapse:collapse}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--acc);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.6px}
tr:hover td{background:rgba(255,255,255,.03)}
.kv th{text-transform:none;color:var(--mut);font-weight:500;font-size:14px;letter-spacing:0}
.kv td{text-align:right;font-weight:600;color:var(--fg)}

.flash{padding:11px 16px;border-radius:10px;margin-bottom:14px;border:1px solid var(--line)}
.flash.ok{background:rgba(24,80,56,.8);border-color:var(--ok)}.flash.err{background:rgba(90,28,36,.8);border-color:var(--err)}

/* hero */
.hero{position:relative;min-height:320px;border-radius:16px;overflow:hidden;border:1px solid var(--acc);box-shadow:0 0 28px var(--glow);margin-bottom:20px;background:var(--bgmap) center/cover}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,18,.92) 0,rgba(6,8,18,.55) 55%,rgba(6,8,18,.15))}
.hero .txt{position:relative;padding:34px 30px;max-width:560px}
.hero h1{font-size:34px;color:var(--fg);text-shadow:0 2px 14px #000}
.hero h1 em{color:var(--acc);font-style:normal}
.hero .stats{display:flex;gap:22px;margin:14px 0 20px;color:var(--mut)}
.hero .stats b{display:block;font-size:22px;color:var(--fg)}
.lineup{position:absolute;right:16px;bottom:10px;display:flex;align-items:flex-end;gap:2px}
.lineup .boss{margin-right:6px}

/* kartu top ranking */
.podium{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
.pcard{position:relative;border:1px solid var(--line);border-radius:14px;padding:12px 10px 14px;text-align:center;background:linear-gradient(180deg,var(--panel2),var(--panel))}
.pcard.p1{border-color:#ffd24a;box-shadow:0 0 22px rgba(255,210,74,.35)}
.pcard.p2{border-color:#cfd6e6}.pcard.p3{border-color:#d08a52}
.pcard .stage{height:150px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px}
.pcard .rk{position:absolute;top:8px;left:12px;font:700 22px Georgia,serif;color:var(--acc)}
.pcard b{display:block;font-size:16px}
.pcard small{color:var(--mut)}

/* footer + berjalan */
footer{margin-top:30px;position:relative;background:linear-gradient(180deg,transparent,rgba(0,0,0,.65));padding-top:70px;overflow:hidden}
.walkers{position:relative;height:96px;border-bottom:2px solid var(--acc)}
.walker{position:absolute;bottom:0;left:0;will-change:transform}
.walker.r{animation:walk-r linear infinite}.walker.l{animation:walk-l linear infinite}
@keyframes walk-r{from{transform:translateX(-160px)}to{transform:translateX(calc(100vw + 160px))}}
@keyframes walk-l{from{transform:translateX(calc(100vw + 160px))}to{transform:translateX(-160px)}}
.copy{text-align:center;color:var(--mut);padding:14px 0 22px;font-size:13px}

@media(max-width:900px){
  .wrap{grid-template-columns:1fr}
  aside{order:2}
  .lineup{position:relative;right:auto;bottom:auto;justify-content:center;flex-wrap:wrap;padding-bottom:10px}
  .hero::before{background:rgba(6,8,18,.7)}
}
@media(max-width:700px){
  .burger{display:block}
  .top nav{display:none;flex-direction:column;width:100%;margin:0}
  body.navopen .top nav{display:flex}
  .top{flex-wrap:wrap}
  th,td{padding:7px 4px;font-size:13px}
  .hero h1{font-size:26px}
}
@media(prefers-reduced-motion:reduce){.spr,.walker{animation:none!important}}

/* ===== Beranda baru ===== */
.center{text-align:center}.r{text-align:right}
.wrap{grid-template-columns:300px 1fr}
.logo{position:relative;display:block;height:92px;margin-bottom:-34px;z-index:5;text-decoration:none!important}
.logo-txt{position:absolute;left:8px;bottom:26px;font:700 38px Georgia,serif;color:var(--acc);text-shadow:0 3px 0 #000,0 0 22px var(--glow);letter-spacing:1px}
.logo-spr{position:absolute;right:-8px;bottom:-6px;pointer-events:none;animation:bob 3s ease-in-out infinite alternate}
@keyframes bob{to{translate:0 -8px}}
.signin h2{text-align:center;margin-top:6px}
.btnrow{display:flex;gap:8px;margin-top:2px}.btnrow .btn{flex:1;padding:8px 6px;font-size:13px}
.feed{max-height:230px;overflow:hidden;mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
.feed:hover{overflow-y:auto}
.feeditem{padding:8px 10px;border:1px solid transparent;border-bottom:1px solid var(--line);border-radius:10px;font-size:13px;display:flex;flex-direction:column;gap:1px}
.feeditem:hover{background:var(--panel2);border-color:var(--line)}
.feeditem b{color:var(--acc)}.feeditem small{color:var(--mut);font-size:11px}
.tip{position:relative;cursor:help}
.tipbox{display:none;position:absolute;left:50%;top:calc(100% + 8px);translate:-50% 0;background:#1e2a44;border:1px solid var(--line);border-radius:8px;padding:10px 14px;white-space:nowrap;z-index:50;text-align:left;color:var(--fg)}
.tipbox table td{padding:3px 10px;border:0;font-size:12px}
.tip:hover .tipbox{display:block}
#fall{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
#fall span{position:absolute;top:-30px;animation:fall linear infinite;opacity:.85}
@keyframes fall{0%{transform:translate(0,-5vh) rotate(0)}100%{transform:translate(-40px,105vh) rotate(360deg)}}

.slider{position:relative;height:320px;border-radius:16px;overflow:visible;margin-bottom:20px;border:1px solid var(--acc);box-shadow:0 0 28px var(--glow)}
.slide{position:absolute;inset:0;border-radius:16px;background:center/cover;opacity:0;transition:opacity .7s;overflow:hidden}
.slide.on{opacity:1}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,18,.85),rgba(6,8,18,.35) 60%,transparent)}
.cap{position:absolute;left:0;bottom:0;right:0;padding:22px 26px;background:linear-gradient(transparent,rgba(0,0,0,.75));display:flex;flex-direction:column;gap:4px;max-width:70%}
.cap b{font:700 24px Georgia,serif;color:#fff}.cap span{color:#d7dcf0}.cap .btn{align-self:flex-start;margin-top:8px}
.sl-arrow{position:absolute;top:50%;translate:0 -50%;width:40px;height:40px;border-radius:50%;padding:0;opacity:0;transition:opacity .25s;z-index:6}
.slider:hover .sl-arrow{opacity:1}.sl-prev{left:-18px}.sl-next{right:-18px}
.sl-dots{position:absolute;bottom:-18px;left:0;right:0;text-align:center;line-height:0}
.sl-dots i{display:inline-block;width:10px;height:10px;margin:0 4px;border-radius:50%;background:#556;cursor:pointer}.sl-dots i.on{background:var(--acc)}
.decor{position:absolute;right:-6px;bottom:-4px;display:flex;align-items:flex-end;pointer-events:none;z-index:5}

.tabs{padding:14px 18px 18px}
.tabbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;border-bottom:2px solid var(--acc);padding-bottom:10px}
.tab,.region{background:var(--panel2);color:var(--fg);border:1px solid var(--line);box-shadow:none;padding:8px 18px}
.tab.on,.region.on{background:linear-gradient(180deg,var(--acc2),var(--acc));color:var(--accfg);border-color:transparent}
.woebadge{margin-left:auto;font-size:12px;color:var(--mut);background:rgba(0,0,0,.3);padding:6px 12px;border-radius:999px}
.pane{display:none;animation:fadeup .4s}.pane.on{display:block}
.regpane{display:none}.regpane.on{display:block}
.regionbar{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:4px}.region{padding:6px 14px;font-size:13px;white-space:nowrap}
@keyframes fadeup{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
details.news{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:rgba(0,0,0,.18)}
details.news summary{cursor:pointer;padding:12px 16px;display:flex;justify-content:space-between;gap:12px;font-weight:700;list-style:none}
details.news summary::-webkit-details-marker{display:none}
details.news summary small{color:var(--mut);font-weight:400}
.nbody{padding:0 16px 14px;color:#cfd5ee}
.split{display:grid;grid-template-columns:minmax(220px,.9fr) 1.2fr;gap:16px}
.splitvis,.splittab{background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:14px;padding:14px;min-width:0}
.splitvis h4,.splittab h4{margin:0 0 8px;font:700 14px Georgia,serif;color:var(--acc);text-transform:uppercase;letter-spacing:.6px}
tr.top1 td{background:rgba(255,210,74,.12)}tr.top2 td{background:rgba(207,214,230,.1)}tr.top3 td{background:rgba(208,138,82,.1)}
.pill{border-radius:999px;font-size:12px;padding:7px 14px}
.mapthumb{height:110px;border-radius:10px;background:center/cover;border:1px solid var(--line);margin-bottom:6px}
.rc{position:relative;height:250px}.rc.empty{display:grid;place-items:center;height:120px}
.rc-stage{position:absolute;inset:0}
.rc-item{position:absolute;left:50%;top:48%;width:150px;text-align:center;transition:filter .2s}
.rc-spr{height:160px;display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(0 8px 8px rgba(0,0,0,.4))}
.rc-name{margin-top:6px;font-size:12px;font-weight:700;background:rgba(0,0,0,.55);padding:3px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s}
.rc-name small{display:block;font-weight:400;color:var(--mut);font-size:10px}
.rc-item.front .rc-name{opacity:1}
.musicbtn{position:fixed;left:16px;bottom:16px;width:46px;height:46px;border-radius:50%;background:var(--panel);border:1px solid var(--acc);color:var(--acc);display:grid;place-items:center;font-size:22px;cursor:pointer;z-index:70;animation:bob 2s ease-in-out infinite alternate}
.musicbtn.off{opacity:.55;animation:none}
@media(max-width:900px){.split{grid-template-columns:1fr}.logo{height:70px}.logo-txt{font-size:30px}.slider{height:240px}.cap{max-width:100%}.decor{display:none}.sl-prev{left:6px}.sl-next{right:6px}}

/* ===== Gaya jendela Ragnarok (judul biru berbingkai, tombol bevel) ===== */
a{color:var(--hi)}
h1,h2{color:var(--fg)}h3,h4{color:var(--hi)}
th{color:var(--hi)}
.scene::after{background:linear-gradient(180deg,rgba(2,26,48,.35),rgba(3,22,38,.78) 55%,var(--bg))}
.statusbar{background:linear-gradient(#020b14,#04141f);border-bottom:1px solid #0b3a5c;color:#9fc3dc}
.top{background:linear-gradient(var(--ro1),var(--ro2) 48%,var(--ro3));border-top:2px solid #cfe9ff;border-bottom:3px solid var(--rob);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.28),0 6px 16px rgba(0,0,0,.55);padding:6px 22px}
.top .brand img{height:46px;width:auto;display:block;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
.top nav{gap:6px}
.top nav a{color:#12365f;background:linear-gradient(#ffffff,#d3e6f8 55%,#b9d3ee);border:1px solid #274f80;border-radius:5px;padding:5px 15px;font-weight:700;font-size:14px;text-shadow:0 1px 0 #fff;box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--rob);border-bottom-color:#274f80}
.top nav a:hover{background:linear-gradient(#fffbe6,#ffe29a 55%,#ffc761);border-color:#8a5200;color:#4a2a00;text-decoration:none;transform:translateY(-1px)}
.top nav a:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(0,0,0,.35)}
.panel,.card{border:2px solid rgba(120,200,255,.38);border-radius:8px;padding:0 16px 14px;overflow:hidden;background:var(--panel);box-shadow:0 8px 26px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.35)}
.panel>h2,.panel>h3,.card>h2:first-child,.card>h3:first-child{margin:0 -16px 12px;padding:8px 14px;background:linear-gradient(var(--ro1),var(--ro2) 55%,var(--ro3));color:#fff;border-bottom:2px solid var(--rob);border-top:1px solid #cfe9ff;text-shadow:0 1px 0 var(--rob);font:700 14px system-ui,"Segoe UI",sans-serif;letter-spacing:.3px;text-transform:none}
.panel>h2{text-align:center;font-size:16px}
.card:not(.tabs){padding:14px 18px 16px}
.card:not(.tabs)>h2:first-child,.card:not(.tabs)>h3:first-child{margin:-14px -18px 12px}
.tabs{padding:0 18px 18px}
.tabs .tabbar{margin:0 -18px 14px;padding:8px 18px;background:linear-gradient(var(--ro1),var(--ro2) 55%,var(--ro3));border-bottom:2px solid var(--rob);border-top:1px solid #cfe9ff}
.tab,.region{color:#12365f;background:linear-gradient(#ffffff,#d3e6f8 55%,#b9d3ee);border:1px solid #274f80;border-radius:5px;font-weight:700;box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--rob);padding:6px 16px;font-size:13px}
.tab.on,.region.on{background:linear-gradient(#ffd878,#f7931e);border-color:#8a4d00;color:#3a1d00;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 #7a4200}
.woebadge{background:rgba(0,0,0,.35);color:#d7ecff;border:1px solid rgba(255,255,255,.25)}
.regionbar{margin-bottom:12px}
.btn,button{background:linear-gradient(#ffd878,#f7931e);color:#3a1d00;border:1px solid #8a4d00;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 0 #7a4200;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.btn.alt{background:linear-gradient(#ffffff,#d3e6f8 55%,#b9d3ee);color:#12365f;border:1px solid #274f80;box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--rob)}
.btn.blue{background:linear-gradient(#5ec3ff,#1d79d0);border-color:#0b3f78;color:#fff;text-shadow:0 1px 0 #0b3f78;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 #08305c}
.btn.gold{background:linear-gradient(#fff0a0,#ffc23a);border-color:#8a5a00;color:#4a2a00}
.btn.pill{border-radius:999px}
.tab:hover,.region:hover,.btn:hover,button:hover{filter:brightness(1.08)}
.logo{height:auto;margin:0 0 -14px;display:block}
.logo img{width:100%;max-width:280px;display:block;margin:0 auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45)) drop-shadow(0 0 16px var(--glow));image-rendering:auto}
.logo-spr{right:-4px;bottom:-14px}
.slider{border:2px solid rgba(120,200,255,.5);border-radius:10px;box-shadow:0 0 28px var(--glow)}
.slide{border-radius:8px}
.sl-dots i.on{background:var(--acc)}
.feeditem b{color:var(--hi)}
.splitvis h4,.splittab h4{color:var(--hi);font-family:system-ui,"Segoe UI",sans-serif}
.rc-name{background:rgba(0,20,40,.7);border:1px solid rgba(120,200,255,.3)}
.kv th{color:var(--mut)}
.input,input,select{background:rgba(0,16,30,.6)}
input:focus,select:focus{outline-color:var(--hi)}
footer .walkers{border-bottom:3px solid var(--ro2)}

/* ===== Header: logo besar + hewan RO, menu beranimasi ===== */
.top{gap:22px;padding:6px 22px 10px;align-items:center}
.brand{position:relative;display:block;flex:0 0 auto;margin-right:10px;line-height:0}
.brand img{height:88px;width:auto;display:block;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(56,200,255,.45));transition:transform .25s}
.brand:hover img{transform:scale(1.04) rotate(-1deg)}
.pets{position:absolute;left:0;right:0;bottom:-12px;height:0;pointer-events:none}
.pet{position:absolute;bottom:0;left:0;animation:patrol 7s linear infinite}
.pet.p2{animation-duration:9s;animation-delay:-3s}
.pet.p3{animation-name:patrol-l;animation-duration:11s;animation-delay:-5s}
@keyframes patrol{0%{transform:translateX(-30px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(190px);opacity:0}}
@keyframes patrol-l{0%{transform:translateX(190px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(-30px);opacity:0}}
.top nav a{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:4px;animation:navbob 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.45s)}
@keyframes navbob{0%,100%{translate:0 0}50%{translate:0 -2px}}
.top nav a::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-18deg);transition:left .5s}
.top nav a:hover::after{left:130%}
.top nav a:hover{animation:navjump .55s ease}
@keyframes navjump{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-9px) scale(.94,1.1)}60%{transform:translateY(0) scale(1.1,.88)}80%{transform:translateY(-3px) scale(.98,1.04)}100%{transform:translateY(0) scale(1,1)}}
.top nav a.on{background:linear-gradient(#ffd878,#f7931e);border-color:#8a4d00;color:#3a1d00;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.navpet{display:inline-block;margin:-10px 0 -8px -6px;animation:hop 1.1s ease-in-out infinite;pointer-events:none}
@keyframes hop{0%,100%{translate:0 0}50%{translate:0 -4px}}

/* ===== Notifikasi (hilang sendiri 5 detik) ===== */
#toasts{position:fixed;top:78px;right:16px;z-index:200;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:11px 14px;background:linear-gradient(#0b3a62,#07253f);color:#fff;border:2px solid #7fc8ff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.55);cursor:pointer;animation:toastin .35s cubic-bezier(.2,1.3,.4,1)}
.toast.ok{border-color:#4be3a1}.toast.err{border-color:#ff7b7b}
.toast span{flex:1}.toast .x{font-style:normal;font-size:20px;line-height:1;opacity:.7}
.toast.out{opacity:0;translate:40px 0;transition:all .4s}
@keyframes toastin{from{opacity:0;translate:60px 0}to{opacity:1;translate:0 0}}

/* ===== Loading: transparan, poring jelas ===== */
#loader{background:rgba(3,20,34,.35);pointer-events:none}
#loader .spr{filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}
#loader p{margin:14px 0 0;padding:6px 16px;background:rgba(3,20,34,.75);border:1px solid rgba(120,200,255,.4);border-radius:999px;font-size:13px}

/* ===== Live chat ===== */
#chat{position:fixed;right:16px;bottom:16px;z-index:90;width:320px;max-width:calc(100vw - 24px)}
#chat-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;background:linear-gradient(var(--ro1),var(--ro2) 55%,var(--ro3));color:#fff;border:2px solid #cfe9ff;border-bottom-color:var(--rob);border-radius:8px 8px 0 0;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.5);text-shadow:0 1px 0 var(--rob)}
#chat:not(.open) #chat-toggle{border-radius:8px}
#chat-toggle b{background:#0a2c52;border:1px solid #7fc8ff;border-radius:999px;padding:0 9px;font-size:12px}
#chat-new{width:10px;height:10px;border-radius:50%;background:#ff5a5a;box-shadow:0 0 8px #ff5a5a;animation:hop .7s infinite}
#chat-box{background:rgba(4,26,46,.97);border:2px solid #7fc8ff;border-top:0;border-radius:0 0 8px 8px;display:flex;flex-direction:column;height:340px}
#chat-box[hidden]{display:none}
#chat-online{padding:6px 12px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chat-log{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.cm{font-size:13px;line-height:1.35;word-break:break-word}.cm b{color:var(--hi);margin-right:6px}.cm.me b{color:var(--acc2)}.cm small{color:var(--mut);margin-left:6px;font-size:10px}
#chat-form{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
#chat-form input{margin:0;max-width:none;flex:1;padding:7px 10px}
#chat-form .btn{padding:6px 14px}

/* ===== Responsif ===== */
@media(max-width:1000px){.top nav a{padding:5px 10px;font-size:13px}.brand img{height:72px}}
@media(max-width:760px){
  .statusbar{font-size:11px;gap:4px 12px;padding:5px 8px}
  .top{flex-wrap:wrap;gap:8px;padding:6px 12px}
  .brand img{height:60px}.pets{display:none}
  .burger{display:block;margin-left:auto;background:linear-gradient(#fff,#cfe3f5);color:#12365f;border:1px solid #274f80;padding:2px 12px;font-size:22px}
  .top nav{display:none;flex-direction:column;width:100%;margin:0}
  body.navopen .top nav{display:flex}
  .top nav a{justify-content:center;padding:9px}
  #toasts{top:68px}
  #chat{right:8px;bottom:8px;width:calc(100vw - 16px)}
}

/* hewan RO berpatroli di ruang kosong samping logo */
.petzone{position:relative;flex:1 1 auto;height:70px;min-width:90px;overflow:hidden;pointer-events:none}
.pet{position:absolute;bottom:2px;left:0;transform:none!important;animation:petwalk 10s linear infinite!important}
.pet.p2{animation-duration:13s!important;animation-delay:-4s!important}
.pet.p3{animation-name:petwalk-l!important;animation-duration:16s!important;animation-delay:-7s!important}
.pet.p4{animation-duration:12s!important;animation-delay:-9s!important}
@keyframes petwalk{from{left:-60px}to{left:100%}}
@keyframes petwalk-l{from{left:100%}to{left:-60px}}
.pets{display:none}
@media(max-width:1180px){.petzone{display:none}}

/* ===== Database, storage, akun ===== */
.ico{display:inline-block;width:24px;height:24px;vertical-align:middle;image-rendering:pixelated}
.ico.none{background:rgba(255,255,255,.06);border:1px dashed var(--line);border-radius:4px}
.searchrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.searchrow input,.searchrow select{margin:0;max-width:340px;flex:1 1 200px}
.tabs-lite .tabbar{margin:0 -18px 12px}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.pager a{padding:5px 11px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--fg)}
.pager a.on{background:linear-gradient(#ffd878,#f7931e);color:#3a1d00;border-color:#8a4d00}
.chip{display:inline-block;background:rgba(56,200,255,.14);border:1px solid var(--line);border-radius:999px;padding:1px 9px;font-size:12px;margin:1px 0}
.ref{color:var(--acc2)}
.desc{background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:8px;padding:12px;line-height:1.6}
.detail h2 small{font-size:13px}
.accrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.avatar{width:60px;height:60px;border-radius:12px;display:grid;place-items:center;font:700 28px Georgia,serif;color:#fff;background:linear-gradient(var(--ro1),var(--ro3));border:2px solid #cfe9ff}
.accname{font:700 22px Georgia,serif}
.accbtns{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.chargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:10px}
.charcard{background:linear-gradient(rgba(16,62,100,.45),rgba(4,26,46,.6));border:2px solid var(--line);border-radius:10px;padding:10px 10px 14px;text-align:center}
.charcard.online{border-color:#3ddc97}
.charstage{height:190px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;background:radial-gradient(ellipse at 50% 90%,rgba(56,200,255,.22),transparent 65%)}
.charname{font-weight:700;font-size:16px}.charjob{color:var(--hi);font-size:13px}.charsub{color:var(--mut);font-size:12px}
.charcard form{margin-top:8px}
.card h2:not(:first-child){margin-top:0}

@media(max-width:900px){
  .wrap{grid-template-columns:minmax(0,1fr);padding:0 12px;margin-top:16px}
  aside{order:2}
  main{order:1}
  .split{grid-template-columns:minmax(0,1fr)}
  .accbtns{margin-left:0}
}

/* ===== Maskot gambar Ragnarok, animasi halus (GPU) ===== */
.mascot{position:relative;display:inline-block;line-height:0;vertical-align:bottom}
.mascot .mb{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 100%;animation:mhop 1.1s cubic-bezier(.45,0,.55,1) infinite;will-change:transform;image-rendering:auto;filter-origin:center}
.mascot .sh{position:absolute;left:12%;right:12%;bottom:-3px;height:7px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(2px);animation:mshadow 1.1s cubic-bezier(.45,0,.55,1) infinite}
.m-lunatic .mb{animation-name:mhop2}.m-baphomet .mb{animation-name:msway;animation-duration:2.6s}
@keyframes mhop{0%,100%{transform:translateY(0) scale(1.06,.92)}20%{transform:translateY(0) scale(.97,1.05)}50%{transform:translateY(-14%) scale(.97,1.04)}80%{transform:translateY(0) scale(.97,1.05)}92%{transform:translateY(0) scale(1.06,.92)}}
@keyframes mhop2{0%,100%{transform:translateY(0) rotate(-2deg) scale(1.04,.95)}50%{transform:translateY(-10%) rotate(2deg) scale(.98,1.03)}}
@keyframes msway{0%,100%{transform:rotate(-2.5deg) scaleY(1)}50%{transform:rotate(2.5deg) scaleY(1.02)}}
@keyframes mshadow{0%,100%{transform:scaleX(1.05);opacity:.9}50%{transform:scaleX(.7);opacity:.4}}
.mascot.xf .mb{scale:-1 1}
.mascot.big .mb,.mascot.big .sh{animation-duration:.9s}/* lompat-jalan: dua maskot dekat logo, pelan dan kecil */
.pet{display:block;position:absolute;bottom:4px;left:0;animation:petwalk 16s linear infinite!important;transform:none!important}
.pet.p2{animation-duration:22s!important;animation-delay:-9s!important;animation-name:petwalk-l!important}
.walker .mascot .mb{animation-duration:.8s}
.navpet{margin:-8px 2px -10px -8px;animation:none}
#loader .mascot{filter:drop-shadow(0 4px 0 rgba(0,0,0,.2))}
.petzone{height:64px}

/* ---- kursor bergaya Ragnarok + efek klik ---- */
html,body{cursor:url(/assets/cursors/arrow.svg) 8 3,auto}
a,button,.btn,.tab,.region,[role=button],summary,select,label[for],.crow,.sl-dots i,input[type=submit],input[type=checkbox],input[type=radio]{cursor:url(/assets/cursors/hand.svg) 8 3,pointer}
input[type=text],input[type=password],input[type=email],input[type=search],textarea{cursor:text}
.clickfx{position:fixed;width:0;height:0;pointer-events:none;z-index:9999}
.clickfx i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#ffd978;box-shadow:0 0 6px #ff9d2e;animation:clickfx .55s ease-out forwards;transform:rotate(var(--a)) translateX(0)}
@keyframes clickfx{to{transform:rotate(var(--a)) translateX(26px) scale(.2);opacity:0}}
@media(pointer:coarse){.clickfx{display:none}}

/* ---- sprite tidak dipecah-pecah (halus) ---- */
.spr{image-rendering:auto}
.emb{display:inline-block;vertical-align:middle;image-rendering:pixelated;flex:none}
.emb.none{border:2px dashed var(--line);border-radius:6px;opacity:.5;box-sizing:border-box}

/* ---- castle: peta + bendera ---- */
.cview{display:none}.cview.on{display:block}
.cmap{position:relative;height:190px;border-radius:10px;background:center/cover;border:2px solid #274f80;box-shadow:inset 0 0 40px rgba(0,10,30,.55)}
.cmap b{position:absolute;left:10px;bottom:8px;color:#fff;font-size:15px;text-shadow:0 2px 0 #0b2f57,0 0 8px #0b2f57;letter-spacing:.5px}
.crow{transition:background .15s}.crow:hover{background:rgba(255,157,46,.14)}.crow.on{background:rgba(255,157,46,.28);outline:1px solid #ff9d2e}
.crow .emb{margin-right:4px}
@media(max-width:700px){.cmap{height:150px}}

/* ===== Tombol gaya Ragnarok: bevel ganda, kilap kaca, tekan & cahaya ===== */
.btn,button{position:relative;overflow:hidden;isolation:isolate;border-radius:7px;border:2px solid #5a3000;padding:7px 18px;font-weight:800;letter-spacing:.3px;
  background:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.06) 52%,rgba(0,0,0,.06) 53%,rgba(0,0,0,.10)),linear-gradient(#ffd467,#f08a12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 -2px 0 rgba(120,60,0,.35),0 3px 0 #6e3a00,0 5px 8px rgba(0,0,0,.35);
  transition:transform .12s ease,filter .15s ease,box-shadow .12s ease}
.btn::after,button::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:-1;background:linear-gradient(105deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);transition:left .5s ease}
.btn:hover,button:hover{filter:brightness(1.07) saturate(1.1);transform:translateY(-1px);box-shadow:inset 0 0 0 1px #fff,inset 0 -2px 0 rgba(120,60,0,.35),0 4px 0 #6e3a00,0 7px 12px rgba(0,0,0,.4),0 0 12px rgba(255,200,80,.55)}
.btn:hover::after,button:hover::after{left:120%}
.btn:active,button:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 2px 4px rgba(90,40,0,.45),0 1px 0 #6e3a00}
.btn.alt{background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.1) 52%,rgba(0,40,90,.06) 53%,rgba(0,40,90,.12)),linear-gradient(#eaf4ff,#a9c9ea);border-color:#1d4a7c;
  box-shadow:inset 0 0 0 1px #fff,inset 0 -2px 0 rgba(20,70,130,.3),0 3px 0 #0f3560,0 5px 8px rgba(0,0,0,.3)}
.btn.alt:hover{box-shadow:inset 0 0 0 1px #fff,inset 0 -2px 0 rgba(20,70,130,.3),0 4px 0 #0f3560,0 7px 12px rgba(0,0,0,.35),0 0 12px rgba(120,200,255,.6)}
.btn.blue{background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.05) 52%,rgba(0,0,40,.08) 53%,rgba(0,0,40,.16)),linear-gradient(#63c7ff,#1a6fc4);border-color:#06335f;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,30,80,.4),0 3px 0 #06284d,0 5px 8px rgba(0,0,0,.35)}
.btn.gold{background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.1) 52%,rgba(120,70,0,.06) 53%,rgba(120,70,0,.12)),linear-gradient(#fff2a8,#f4b52a);border-color:#7a4a00}
.btn.pill{border-radius:999px}
.tab,.region{border-radius:7px 7px 3px 3px;border:2px solid #1d4a7c;padding:5px 16px;font-weight:800;color:#12365f;
  background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.1) 52%,rgba(0,40,90,.06) 53%,rgba(0,40,90,.12)),linear-gradient(#eaf4ff,#a9c9ea);
  box-shadow:inset 0 0 0 1px #fff,0 2px 0 #0f3560;transition:transform .12s,filter .15s}
.tab.on,.region.on{color:#3a1d00;border-color:#6a3a00;background:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.08) 52%,rgba(120,60,0,.08) 53%,rgba(120,60,0,.14)),linear-gradient(#ffd467,#f08a12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 2px 0 #6e3a00,0 0 10px rgba(255,170,40,.5)}
.tab:hover,.region:hover{transform:translateY(-1px)}
nav a{border:2px solid #1d4a7c;box-shadow:inset 0 0 0 1px #fff,0 3px 0 #0f3560,0 5px 8px rgba(0,0,0,.3)}
nav a.on{border-color:#6a3a00;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 3px 0 #6e3a00,0 0 12px rgba(255,170,40,.55)}
nav a:active{transform:translateY(2px)}
#chat-form .btn{padding:5px 14px}
.btn[disabled],button[disabled]{filter:grayscale(.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 2px 0 #555}
@media(prefers-reduced-motion:reduce){.btn::after,button::after{display:none}}

/* ---- Chat mode lihat saja (tamu) ---- */
.chat-ro{padding:9px 12px;border-top:1px solid var(--line);font-size:13px;color:var(--mut);text-align:center}.chat-ro a{color:#7fc8ff;font-weight:700}
#chat-toggle em{font-style:normal;font-weight:400;opacity:.8}

/* ---- Ruang Discord di tengah ---- */
.discord{max-width:760px;margin:0 auto 16px;text-align:center}
.discord iframe{display:block;width:100%;max-width:560px;height:420px;margin:10px auto 0;border:2px solid #5865f2;border-radius:10px;background:#2b2d31}
.dc-ph{margin:10px auto 0;max-width:560px;padding:26px 18px;border:2px dashed #5865f2;border-radius:12px;background:linear-gradient(180deg,rgba(88,101,242,.16),rgba(88,101,242,.04));display:flex;flex-direction:column;align-items:center;gap:8px}
.dc-logo{width:56px;height:56px;border-radius:16px;background:linear-gradient(#7983f5,#4752c4);display:grid;place-items:center;font-size:28px;color:#fff;box-shadow:0 4px 0 #2f3894}
.dc-ph p{margin:0;max-width:440px}

/* ---- Pemilih bahasa di header ---- */
nav{position:relative}
.lang{position:relative;display:inline-block;margin-left:6px;align-self:center}
.lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;font-weight:800;font-size:13px;color:#12365f;border:2px solid #1d4a7c;
  background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.1) 52%,rgba(0,40,90,.06) 53%,rgba(0,40,90,.12)),linear-gradient(#eaf4ff,#a9c9ea);box-shadow:inset 0 0 0 1px #fff,0 3px 0 #0f3560,0 5px 8px rgba(0,0,0,.3)}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{filter:brightness(1.07)}
.lang .globe{font-size:15px;line-height:1}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);z-index:80;margin:0;padding:6px;list-style:none;min-width:170px;border-radius:9px;border:2px solid #7fc8ff;background:linear-gradient(#0f4a7e,#0a2c52);box-shadow:0 10px 24px rgba(0,0,0,.55)}
.lang li a{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;color:#fff;font-weight:600;text-decoration:none}
.lang li a b{display:inline-grid;place-items:center;width:30px;height:22px;border-radius:4px;background:#ffd467;color:#3a1d00;font-size:12px;border:1px solid #6a3a00}
.lang li a:hover{background:rgba(127,200,255,.22)}.lang li a.on{background:rgba(255,212,103,.25)}
.lang:not([open]) ul{display:none}

/* ---- Testimonial ---- */
.testi .btn{margin:8px 0 0}
.tbanner{display:flex;align-items:flex-end;gap:18px;overflow:hidden;padding:0 18px;background:linear-gradient(135deg,rgba(255,212,103,.22),rgba(30,120,200,.25))}
.tbanner img{height:180px;width:auto;margin:-4px 0 0;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.tbanner .tb-text{padding:18px 0;flex:1}
.tbanner h2{margin:0 0 6px}
.tform textarea{width:100%;min-height:110px;resize:vertical}
.tform .cnt{float:right}
.tlist .t-item{padding:10px 0;border-top:1px solid var(--line)}
.tlist .t-item:first-child{border-top:0}
@media(max-width:700px){.tbanner img{height:120px}}

nav .lang li a{color:#fff;background:none;border:0;box-shadow:none;text-shadow:none;padding:7px 10px;transform:none;font-size:14px}
nav .lang li a:hover{background:rgba(127,200,255,.22)}
nav .lang li a.on{background:rgba(255,212,103,.25)}
nav .lang li a b{color:#3a1d00}
.btnrow .btn{padding:6px 2px;font-size:12px;letter-spacing:0}

/* slider: bayangan teks selebar penuh (tanpa tepi keras) + karakter menyatu dengan latar */
.cap{max-width:none;padding-top:46px;background:linear-gradient(transparent,rgba(0,0,0,.55) 55%,rgba(0,0,0,.78))}
.cap>*{max-width:62%}
.slide::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 60%,rgba(0,0,0,.35))}
.decor{right:10px;bottom:6px;gap:4px}
.decor .spr{filter:drop-shadow(0 7px 5px rgba(0,0,0,.55)) brightness(.94) saturate(.95)}

/* ===== Galeri foto & video ===== */
.gallery{padding:16px}
.g-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.g-kinds{display:inline-flex;gap:6px;padding:5px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.gk{border-radius:999px;padding:8px 18px;font-size:14px;color:#cfe3f7;background:none;border:0;box-shadow:none;text-shadow:none;display:inline-block;font-weight:800}
.gk::after{display:none}
.gk.on{color:#3a1d00;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0) 55%),linear-gradient(#ffb04a,#f2711c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 3px 10px rgba(255,120,20,.45)}
.g-cats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.g-cats[hidden]{display:none}
.gc{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 16px;font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#cfe3f7;background:rgba(255,255,255,.07);border:1px solid var(--line);box-shadow:none;text-shadow:none}
.gc::after{display:none}
.gc b{background:rgba(0,0,0,.4);border-radius:999px;padding:0 8px;font-size:12px;color:#ffd467}
.gc.on{color:#ffb04a;border-color:#ff8a2a;background:rgba(255,138,42,.14)}
.g-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:10px;max-height:420px;overflow-y:auto;padding-right:6px}
.g-grid.flat{max-height:none;overflow:visible}
.g-grid::-webkit-scrollbar{width:8px}.g-grid::-webkit-scrollbar-thumb{background:#c8602a;border-radius:6px}
.gi{position:relative;display:block;overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#0a1a2c;cursor:zoom-in}
.gi[hidden]{display:none}
.g-grid:not(.flat) .gi.big{grid-column:span 2;grid-row:span 2}
.gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.gi:hover img{transform:scale(1.07)}
.gi .gt{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 7px;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .2s}
.gi:hover .gt{opacity:1}
.gi .play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-style:normal;color:#fff;font-size:18px;background:rgba(0,0,0,.55);border:2px solid #fff;padding-left:3px}
.g-empty{grid-column:1/-1}
.lightbox{position:fixed;inset:0;z-index:9998;background:rgba(2,8,18,.88);display:grid;place-items:center;animation:lbin .2s ease}
.lb-box{max-width:min(92vw,1100px);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:8px}
.lb-box img{max-width:100%;max-height:82vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.lb-video{width:min(92vw,960px);aspect-ratio:16/9;border:0;border-radius:8px;background:#000}
.lb-cap{color:#fff;font-weight:700}
.lb-x{position:absolute;top:14px;right:18px;width:42px;height:42px;border-radius:50%;font-size:26px;line-height:1;padding:0}
@keyframes lbin{from{opacity:0}}
.adm .card{margin:0}.adm label{display:block;margin-top:8px}
.adm-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.adm-item{display:flex;flex-direction:column;gap:6px}.adm-item .gi{height:120px}
@media(max-width:900px){.g-grid{grid-template-columns:repeat(2,1fr)}.gk{padding:7px 12px}}
@media(max-width:480px){.g-grid{grid-auto-rows:120px}.g-kinds{width:100%}.gk{flex:1}}

/* ---- Live chat sebagai panel sidebar (bukan popup) ---- */
aside #chat{position:static;width:auto;max-width:none;z-index:auto}
aside #chat h3{display:flex;align-items:center;gap:8px}
#chat-n{background:#0a2c52;border:1px solid #7fc8ff;border-radius:999px;padding:0 9px;font-size:12px;color:#fff}
#chat h3 em{font-style:normal;font-weight:400;opacity:.8;font-size:12px}
#chat #chat-log{height:230px;flex:none;border:1px solid var(--line);border-radius:8px;background:rgba(0,10,25,.45);margin:6px 0}
#chat #chat-form{padding:0;border-top:0}
#chat #chat-online{padding:0 0 2px;border:0}

.howto .steps{margin:8px 0 12px;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.howto .steps li::marker{color:#ffb04a;font-weight:800}
.howto .steps b{display:block;color:#7fd0ff}

/* ---- Syarat & Ketentuan ---- */
.terms-short{margin:6px 0 10px;padding-left:20px;font-size:13px;display:flex;flex-direction:column;gap:5px}
.terms-short li::marker{color:#ffb04a;font-weight:800}
.terms{margin:10px 0 0;padding-left:24px;display:flex;flex-direction:column;gap:14px}
.terms li::marker{color:#ffb04a;font-weight:800}
.terms b{display:block;color:#7fd0ff;margin-bottom:2px}

.chk{display:flex;align-items:center;gap:7px;margin:2px 0 10px;font-size:13px;color:var(--mut);cursor:pointer}
.chk input{width:auto;margin:0;accent-color:#ff9d2e}
.mob-signin,.navscrim,.navclose{display:none}

/* tombol hamburger (3 garis) bergaya tombol RO */
.burger i{display:block;width:20px;height:3px;border-radius:2px;background:#12365f;margin:4px auto}
.btnduo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btnduo .btn{margin:0;display:block;text-align:center}

/* ===== Ponsel: logo di tengah, blok Sign In langsung di bawah logo, menu hamburger dari samping ===== */
@media(max-width:760px){
  .top{position:relative;z-index:260;display:flex;justify-content:center;align-items:center;padding:6px 12px 8px;gap:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .brand{margin:0 auto}
  .brand img{height:62px}
  .burger{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:block;width:46px;height:42px;padding:0;margin:0;border-radius:8px;
    background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.1) 52%,rgba(0,40,90,.06) 53%,rgba(0,40,90,.12)),linear-gradient(#eaf4ff,#a9c9ea);border:2px solid #1d4a7c;box-shadow:inset 0 0 0 1px #fff,0 3px 0 #0f3560}
  .burger:active{transform:translateY(-50%) translateY(2px)}
  .mob-signin{display:block;margin:12px 12px 0}
  .mob-signin h2{margin-bottom:10px}
  .mob-signin input{margin-bottom:8px}
  .mob-signin .btnduo{margin-top:4px;padding-bottom:2px}
  .signin{display:none}
  .petzone{display:none}

  .top nav{position:fixed;top:0;left:0;bottom:0;z-index:300;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:9px;width:min(82vw,310px);margin:0;padding:64px 16px 22px;overflow-y:auto;
    background:linear-gradient(180deg,#1f78bd,#12589a 35%,#0b3a68);border-right:3px solid #cfe9ff;box-shadow:14px 0 34px rgba(0,0,0,.55);
    transform:translateX(-105%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s}
  body.navopen .top nav{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .top nav::before{content:"MENU";position:absolute;top:18px;left:18px;font:800 15px system-ui,sans-serif;letter-spacing:2px;color:#fff;text-shadow:0 1px 0 #0b3a68}
  .top nav a{justify-content:flex-start;padding:12px 14px;font-size:15px;margin:0}
  .navclose{display:block;position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:50%;padding:0;font-size:24px;line-height:1}
  .navscrim{display:block;position:fixed;inset:0;z-index:250;background:rgba(2,8,18,.55);opacity:0;pointer-events:none;transition:opacity .25s}
  body.navopen .navscrim{opacity:1;pointer-events:auto}
  body.navopen{overflow:hidden}
  .lang{margin:10px 0 0;display:block}
  .lang summary{width:100%;justify-content:center;padding:9px 10px}
  .lang ul{position:static;margin-top:8px;box-shadow:none;background:rgba(0,20,50,.55);border-color:rgba(207,233,255,.5)}

  /* tampilan lebih rapi di layar kecil */
  .statusbar{font-size:11px;gap:2px 10px;padding:4px 8px;justify-content:center}
  .wrap{padding-left:12px;padding-right:12px;gap:12px}
  h1{font-size:22px;margin:12px 0 8px}
  .card:not(.tabs){padding:12px 14px 14px}
  .card:not(.tabs)>h2:first-child,.card:not(.tabs)>h3:first-child{margin:-12px -14px 10px}
  label{font-size:13px;margin-top:8px}
  input,select,textarea{padding:10px 12px;font-size:16px}
  .tabs{padding:0 12px 14px}.tabs .tabbar{margin:0 -12px 12px;padding:8px 10px;flex-wrap:wrap;gap:6px}
  .tab,.region{padding:6px 12px;font-size:12.5px}
  .btn,button{padding:9px 14px}
  .slider{height:200px}
}@media(max-width:760px){.lang summary{display:flex}}

/* ---- efek klik ala Ragnarok Classic: kotak "cell" isometrik biru + bintang emas ---- */
.clickfx::before{content:"";position:absolute;left:-15px;top:-15px;width:30px;height:30px;border:2px solid #aee6ff;background:rgba(110,200,255,.32);box-shadow:0 0 10px rgba(120,210,255,.9),inset 0 0 6px rgba(255,255,255,.7);
  transform:scaleY(.5) rotate(45deg);animation:cellfx .5s ease-out forwards}
@keyframes cellfx{0%{opacity:1;transform:scaleY(.5) rotate(45deg) scale(.45)}60%{opacity:.9}100%{opacity:0;transform:scaleY(.5) rotate(45deg) scale(1.5)}}
.clickfx i{left:-5px;top:-5px;width:10px;height:10px;border-radius:0;background:linear-gradient(#fff6c2,#ffc83a);box-shadow:none;filter:drop-shadow(0 0 3px #ff9d2e);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:starfx .6s ease-out forwards}
@keyframes starfx{0%{transform:rotate(var(--a)) translateX(6px) scale(.5);opacity:1}100%{transform:rotate(var(--a)) translateX(30px) scale(1.1);opacity:0}}

/* status server di bar atas: ON hijau, OFF merah */
.statusbar .svc b{display:inline-flex;align-items:center;gap:5px;padding:0 8px;border-radius:999px;font-size:11px;letter-spacing:.5px}
.statusbar .svc b i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.statusbar .svc b.on{color:#35e27d;background:rgba(53,226,125,.14);border:1px solid rgba(53,226,125,.45)}
.statusbar .svc b.off{color:#ff5a5a;background:rgba(255,90,90,.14);border:1px solid rgba(255,90,90,.5)}
.statusbar .svc b.off i{animation:svcblink 1.2s steps(2) infinite}
@keyframes svcblink{50%{opacity:.25}}

/* ===== Wiki ===== */
.wiki{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;align-items:start}
.wiki-nav{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
.wiki-search{width:100%;margin:0 0 10px}
.wiki-menu>summary{cursor:pointer;font-weight:800;color:var(--hi);margin-bottom:6px}
.wiki-tree,.wiki-tree ul{list-style:none;margin:0;padding:0}
.wiki-tree ul{margin-left:12px;border-left:1px solid var(--line);padding-left:8px}
.wiki-tree li{margin:1px 0}.wiki-tree li[hidden]{display:none}
.wiki-tree a{display:block;padding:6px 9px;border-radius:6px;color:var(--fg);font-size:14px;line-height:1.3;text-decoration:none}
.wiki-tree a:hover{background:rgba(127,200,255,.16)}
.wiki-tree a.on{background:linear-gradient(#ffd467,#f08a12);color:#3a1d00;font-weight:800}
.wiki-tree .grp>details>summary{cursor:pointer;padding:6px 9px;font-weight:800;color:#ffd467;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.wiki-body{padding:18px 22px 22px;overflow:hidden;min-width:0}
.wiki-body h1{font-size:28px;margin:0 0 14px}
.wiki-body h2{font-size:22px;margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.wiki-body h3{font-size:18px;margin:20px 0 8px}.wiki-body h4{font-size:16px;margin:16px 0 6px}
.wiki-body p,.wiki-body li{line-height:1.65}
.wiki-body ul,.wiki-body ol{padding-left:24px}.wiki-body li::marker{color:#ffb04a}
.wiki-body img{max-width:100%;height:auto;border-radius:6px;vertical-align:middle}
.wiki-body figure{margin:14px 0;text-align:center}
.wiki-body figcaption:empty{display:none}
.wiki-body hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.wiki-body .tbl,.wiki-body>div:has(>table){overflow-x:auto;margin:12px 0}
.wiki-body table{border-collapse:collapse;min-width:100%}
.wiki-body th,.wiki-body td{border:1px solid var(--line);padding:8px 10px;vertical-align:top;text-align:left}
.wiki-body th{background:rgba(31,120,189,.35);color:#fff;font-size:13px}
.wiki-body tr:nth-child(even) td{background:rgba(255,255,255,.03)}
.wiki-body td p{margin:2px 0}
.wiki-body td img{max-height:120px}
.wiki-body code{background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:.92em}
.wiki-body pre{background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:8px;padding:12px 14px;overflow:auto}
.wiki-body pre code{background:none;border:0;padding:0}
.wiki-body blockquote{margin:14px 0;padding:10px 16px;border-left:4px solid #ff9d2e;background:rgba(255,157,46,.09);border-radius:0 8px 8px 0}
.wiki-body blockquote p{margin:6px 0}
.wiki-body .hint{margin:14px 0;padding:10px 16px;border-radius:8px;border:1px solid;border-left-width:5px}
.wiki-body .hint p{margin:6px 0}
.wiki-body .hint-info{background:rgba(108,196,255,.12);border-color:#6cc4ff}
.wiki-body .hint-warning{background:rgba(255,176,46,.12);border-color:#ffb02e}
.wiki-body .hint-success{background:rgba(63,220,138,.12);border-color:#3fdc8a}
.wiki-body .hint-danger{background:rgba(255,107,107,.12);border-color:#ff6b6b}
.wiki-body mark{background:none;color:inherit}
.wiki-pn{display:flex;justify-content:space-between;gap:10px;margin-top:26px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.wiki-pn .btn{max-width:48%;white-space:normal;text-align:left}
@media(max-width:900px){.wiki{grid-template-columns:1fr}.wiki-nav{position:static;max-height:none}.wiki-menu:not([open]) .wiki-tree{display:none}.wiki-body{padding:14px}.wiki-body h1{font-size:22px}}
.wrap.wiki-wide{grid-template-columns:1fr}.wrap.wiki-wide>aside{display:none}


/* ---- Teks SEO di footer ---- */
.seo-text{max-width:1100px;margin:0 auto;padding:18px 20px 6px;color:var(--mut);font-size:13px;line-height:1.7;text-align:left}
.seo-text h2{margin:0 0 8px;font-size:15px;color:#cfe3f7}
.seo-text p{margin:6px 0}
.seo-text .seo-links{margin-top:10px}.seo-text .seo-links a{color:#9be0ff;text-decoration:none;margin-right:2px}.seo-text .seo-links a:hover{text-decoration:underline}

/* ===== Menu admin ringkas (sidebar) + panel admin ===== */
.admbadge{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;font-size:10px;letter-spacing:.6px;color:#3a1d00;background:linear-gradient(#ffe28a,#f0a020);vertical-align:middle}
.iconbar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.iconbar a{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:7px;text-decoration:none;color:#12365f;font-size:10.5px;font-weight:800;
  background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.1) 52%,rgba(0,40,90,.06) 53%,rgba(0,40,90,.12)),linear-gradient(#eaf4ff,#a9c9ea);border:2px solid #1d4a7c;box-shadow:inset 0 0 0 1px #fff,0 2px 0 #0f3560}
.iconbar a i{font-style:normal;font-size:17px;line-height:1.1}
.iconbar a:hover{filter:brightness(1.07)}
.admh{margin:6px 0 5px;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#ffd467;background:rgba(0,0,0,.28)}
.admgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px}
.admgrid a{display:block;padding:6px 8px;border-radius:6px;font-size:12px;font-weight:700;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(127,200,255,.14);border:1px solid rgba(127,200,255,.4)}
.admgrid a:hover{background:rgba(255,176,46,.25);border-color:#ffb02e}
.admtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.stat{padding:12px 14px;border-radius:10px;background:rgba(0,20,40,.55);border:1px solid var(--line)}
.stat b{display:block;font-size:22px;color:#ffd467}.stat span{font-size:12px;color:var(--mut)}
.svcchip{display:inline-flex;align-items:center;gap:6px;margin:3px 6px 3px 0;padding:3px 10px;border-radius:999px;font-weight:700;font-size:13px}
.svcchip i{width:8px;height:8px;border-radius:50%;background:currentColor}
.svcchip.on{color:#35e27d;background:rgba(53,226,125,.14);border:1px solid rgba(53,226,125,.45)}.svcchip.off{color:#ff5a5a;background:rgba(255,90,90,.14);border:1px solid rgba(255,90,90,.5)}
form.inl{display:inline}.btn.xs{padding:2px 9px;font-size:12px}
.inlform{display:flex;gap:8px;flex-wrap:wrap}.inlform input{flex:1;min-width:140px;margin:0}
.toolrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}

/* admin: chip status, tombol berbahaya, kotak password baru, form aksi */
.chip.bad{background:rgba(255,90,90,.2);border-color:#ff5a5a;color:#ffb3b3}.chip.ok{background:rgba(53,226,125,.18);border-color:#35e27d;color:#9af0bd}
.btn.bad{background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.05) 52%,rgba(60,0,0,.1) 53%,rgba(60,0,0,.2)),linear-gradient(#ff8a8a,#d02a2a);border-color:#6e0b0b;color:#fff;text-shadow:0 1px 0 #6e0b0b}
.newpw{border-color:#ffb02e;background:rgba(255,176,46,.1)}.pwbox{text-align:center;margin:8px 0}.pwbox code{font-size:26px;letter-spacing:3px;padding:8px 16px;border-radius:8px;background:#04141f;border:2px dashed #ffb02e;color:#ffd467;user-select:all}
.actform{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.actform label{display:block;margin:0 0 6px}.admsplit{align-items:start}
.charmini{text-align:center;margin:4px 0 8px;min-height:120px}
.acts{white-space:nowrap}

/* ===== Template wiki (bisa dipakai di editor HTML) + editor admin ===== */
.wiki-body .wiki-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:14px 0}
.wiki-body .wiki-card{padding:12px 16px;border-radius:10px;background:rgba(0,20,40,.45);border:1px solid var(--line)}
.wiki-body .wiki-card h3{margin:0 0 6px;font-size:16px}.wiki-body .wiki-card p{margin:4px 0}
.wiki-body .wiki-banner{margin:14px 0;padding:22px 24px;border-radius:12px;text-align:center;background:linear-gradient(135deg,rgba(31,120,189,.55),rgba(255,157,46,.25));border:1px solid rgba(207,233,255,.4)}
.wiki-body .wiki-banner h2{margin:0 0 6px;border:0;padding:0;font-size:24px}.wiki-body .wiki-banner p{margin:0}
.wiki-body iframe,.wiki-body .wiki-video{display:block;width:100%;max-width:760px;aspect-ratio:16/9;margin:14px auto;border:0;border-radius:10px;background:#000}
.wiki-body details{margin:10px 0;padding:8px 14px;border-radius:8px;background:rgba(0,20,40,.4);border:1px solid var(--line)}
.wiki-body summary{cursor:pointer;font-weight:700;color:#9be0ff}
.wikiform textarea{width:100%;font:13px/1.5 Consolas,Menlo,monospace;min-height:380px}
.snipbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}.snipbar select{width:auto;margin:0;padding:3px 8px}
.fmtrow{display:flex;gap:18px;margin-bottom:6px}.fmtrow label{display:flex;gap:6px;align-items:center;margin:0}.fmtrow input{width:auto;margin:0}
.prevbox{padding:6px 4px}
.wikiup{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}.wikiup figure{margin:0;text-align:center}.wikiup img{max-width:100%;max-height:110px;border-radius:6px;border:1px solid var(--line)}.wikiup code{font-size:11px;word-break:break-all}
tr.dim td{opacity:.55}

/* barisan tombol admin yang sejajar (tinggi & jarak sama) */
.actrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.actrow form,.actrow form.inl{display:flex;margin:0}
.actrow .btn,.actrow button{margin:0;padding:9px 20px;font-size:14px;line-height:1.2;min-height:40px;display:inline-flex;align-items:center;justify-content:center;font-family:inherit}

/* tombol aksi di tabel admin: semua sama tinggi, sejajar, tidak turun baris */
.btn.xs,button.xs{height:30px;min-width:34px;padding:0 12px;margin:0;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;vertical-align:middle;box-sizing:border-box}
form.inl{display:inline-flex;margin:0;vertical-align:middle}
td.acts{white-space:nowrap}
.rowacts{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.rowacts .pair{display:inline-flex;gap:2px}
.rowacts .pair .btn.xs,.rowacts .pair button.xs{min-width:30px;padding:0 8px}
.rowacts .pair button.xs:first-child{border-radius:6px 0 0 6px}.rowacts .pair form:last-child button.xs{border-radius:0 6px 6px 0}
main .card table{width:100%}
@media(max-width:900px){.card:has(td.acts){overflow-x:auto}}

/* ---- anti-getar: elemen yang disorot kursor tidak boleh bergerak (kalau bergerak, area sorot ikut bergeser dan efeknya bolak-balik) ---- */
.top nav a:hover{animation:none!important;transform:none!important;translate:0 0!important}
.btn:hover,button:hover,.tab:hover,.region:hover,.btn.xs:hover,.iconbar a:hover,.admgrid a:hover{transform:none!important;translate:none!important}
.hover-jump:hover{translate:none}
.pcard:hover .hover-jump{translate:0 -8px}

.slidethumb{width:150px;height:46px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block}
.slideform .inlform>div{flex:1;min-width:220px}