a{color:#fff;text-decoration:none}
a:hover{color:#FFF80C}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}
html,body{overflow-x:hidden;background-color:#120e27;color:#fff}
body{position:relative;width:100%;padding-bottom:80px}
.header{background-color:#17132c;padding:.85rem 1rem;display:flex;flex-direction:column;align-items:stretch;gap:.65rem;border-radius:10px;width:100%}
.header-main{display:flex;align-items:center;gap:.75rem;width:100%}
.header-logo{flex-shrink:0;display:flex;align-items:center;line-height:0}
.header-logo img{height:40px;width:auto;display:block}
.btn-group{display:flex;gap:.5rem;margin-left:auto;flex-shrink:0}
.btn{padding:.5rem 1rem;border:none;border-radius:5px;font-weight:700;cursor:pointer}
.btn-login{background-color:#0c7800;color:#fff}
.btn-register{background-color:#c304b9;color:#fff;animation:glowBorder 1.2s infinite}
@keyframes glowBorder{50%{box-shadow:0 0 8px #fff}}
.top-games{background-color:#120749;display:grid;grid-template-columns:repeat(5,1fr);padding:1rem;gap:.5rem}
.game-item{text-align:center;text-decoration:none;color:#fff;font-weight:600;padding:.5rem;border-radius:15px;transition:background .2s ease}
.game-item:hover{background-color:#b91c55}
.game-item img{height:40px;margin-bottom:.25rem}
.game-item span{display:block;font-size:.85rem;white-space:nowrap}
.footer{text-align:left;margin:1.5rem;color:#7336f6;padding-bottom:2rem}
.footer-description{text-align:left;margin-top:1rem;font-size:.9rem;line-height:1.5;color:#ddd}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background-color:#fff;display:flex;justify-content:space-around;align-items:center;padding:.5rem 0;box-shadow:0 -2px 10px rgba(0,0,0,.2);z-index:999}
.bottom-nav div{display:flex;flex-direction:column;align-items:center;color:#2C032F;font-size:.75rem;font-weight:700}
.bottom-nav img{height:30px;margin-bottom:.25rem;object-fit:contain}
.bottom-nav a[href="/cari"] img{height:32px;width:32px;border-radius:50%}
.desktop-nav{display:flex;gap:1rem;align-items:center;color:#fff;font-weight:700}
.nav-item{cursor:pointer}
.dropdown{position:relative}
.dropdown-content{display:none;position:absolute;background-color:#3b014b;top:100%;left:0;padding:1rem;border-radius:10px;z-index:1000}
.dropdown-content div{padding:.5rem 1rem;white-space:nowrap}
.dropdown:hover .dropdown-content{display:block}
.mobile-menu{position:fixed;top:0;left:-100%;width:80%;height:100%;background:#1e001f;color:#fff;z-index:9999;padding:1.5rem;transition:left .3s ease}
.mobile-menu.active{left:0}
.mobile-menu-header{text-align:center}
.mobile-menu-list{list-style:none;padding:0;margin-top:2rem}
.mobile-menu-list li{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;font-weight:700}
.mobile-menu-list img{width:24px;height:24px;object-fit:contain}
.mobile-menu-list a[href="/cari"] img{width:28px;height:28px;border-radius:50%}
.support-btn{display:flex;align-items:center;justify-content:center;background-color:#27930a;padding:1rem;margin:1rem;border-radius:10px;color:#fff;font-weight:700}
.social-icons{display:flex;justify-content:center;gap:1rem;margin:2rem 0}
.social-icons div{background-color:#340996;padding:1rem;border-radius:10px}
.back-bar{background:#380484;padding:1rem;display:flex;align-items:center;gap:1rem}
.back-button{background:#e30771;border:none;color:#fff;font-size:1.5rem;padding:.3rem .7rem;border-radius:12px;cursor:pointer;transition:background-color .2s ease}
.back-button:hover{background-color:rgba(255,255,255,.2)}
@media (max-width:768px){
.team-logos{flex-direction:column;gap:1rem}
.desktop-nav{display:none}
.header{padding:.65rem .85rem}
.header-logo img{transform:scale(1);transform-origin:left center}
.mobile-menu-header img{transform:scale(1)}
.top-games{padding:.75rem;gap:.25rem}
.game-item{padding:.5rem .25rem}
.game-item img{height:36px}
.game-item span{font-size:.85rem}
}
@media (min-width:769px){
.header{
  display:grid;
  grid-template-areas:"logo" "search" "nav";
  justify-items:center;
  align-items:center;
  padding:1rem 1.25rem 1.15rem;
  gap:.85rem;
  max-width:none;
  margin:0;
}
.header-main{display:contents}
.header-logo{grid-area:logo}
.header-logo img{height:46px}
.site-search-wrap{grid-area:search;flex:none;width:min(460px,92vw);max-width:460px;margin:0}
.desktop-nav{grid-area:nav;display:flex!important;gap:1.75rem;justify-content:center;width:auto;margin:0;flex-wrap:wrap}
.btn-group{display:none!important}
.bottom-nav{display:none!important}
.mobile-menu{display:none!important}
body{padding-bottom:0}
}

/* SEO body content (rendered before <footer>) */
.page-seo{margin:2rem 12px;padding:1.25rem 1.5rem;background:#1c1237;color:#d7d7d7;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.35);line-height:1.7}
.page-seo h1,.page-seo h2,.page-seo h3{color:#ffcc00;margin:1rem 0 .5rem;text-align:left}
.page-seo h1{font-size:1.4rem;border-bottom:1px solid rgba(255,204,0,.25);padding-bottom:.4rem}
.page-seo h2{font-size:1.2rem;border-bottom:1px solid rgba(255,204,0,.2);padding-bottom:.3rem}
.page-seo h3{font-size:1rem;color:#ffd96a}
.page-seo p{margin:.5rem 0;text-align:justify}
.page-seo ul{margin:.5rem 0 .8rem 1.2rem;padding:0}
.page-seo ul li{margin:.25rem 0;list-style-type:disc}
.page-seo strong{color:#fff}
.page-seo a{color:#ffd96a;text-decoration:underline}
.breadcrumb{margin:0 1rem 1.25rem;font-size:.85rem;color:#bbb}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:0}
.breadcrumb li{display:inline-flex;align-items:center}
.breadcrumb li+li::before{content:"›";margin:0 .4rem;color:#888}
.breadcrumb a{color:#fff;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline;color:#ffcc00}
.breadcrumb .bc-current{color:#ffcc00;font-weight:600}

/* Breadcrumbs */
.breadcrumb{margin:0;padding:10px 16px;font-size:.82rem;color:#aaa;background:rgba(0,0,0,.25);border-bottom:1px solid rgba(255,255,255,.06)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0;gap:0}
.breadcrumb li{display:inline-flex;align-items:center;max-width:100%}
.breadcrumb li+li::before{content:'›';margin:0 8px;color:#666;flex-shrink:0}
.breadcrumb a{color:#ffd96a;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;display:inline-block;vertical-align:bottom}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .bc-current{color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;display:inline-block;vertical-align:bottom}
@media (min-width:769px){.breadcrumb a{max-width:none}.breadcrumb .bc-current{max-width:none;white-space:normal}}

@media (max-width:768px){.page-seo{margin:1.5rem 8px;padding:1rem 1.1rem}.page-seo h1{font-size:1.2rem}.page-seo h2{font-size:1.05rem}}

/* Site search */
.site-search-wrap{position:relative;flex:1;min-width:0;max-width:560px}
.site-search-form{display:flex;align-items:stretch;gap:0;background:#120e27;border:1px solid rgba(255,255,255,.12);border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.site-search-field{display:flex;align-items:center;flex:1;min-width:0;padding:0 .85rem 0 1rem}
.site-search-form input{flex:1;min-width:0;width:100%;background:transparent;border:none;color:#fff;padding:.65rem 0;font-size:.92rem;outline:none}
.site-search-form input::placeholder{color:#7a7a8c}
.site-search-submit{background:transparent;border:none;padding:.2rem .35rem .2rem 0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;transition:transform .15s ease}
.site-search-submit:hover{transform:scale(1.06)}
.site-search-btn-icon{display:block;width:34px;height:34px;object-fit:contain}
.site-search-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;list-style:none;margin:0;padding:.25rem 0;background:#1c1237;border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.45);max-height:320px;overflow:auto;z-index:1200}
.site-search-suggest li{border-top:1px solid rgba(255,255,255,.06)}
.site-search-suggest li:first-child{border-top:none}
.site-search-suggest a{display:block;padding:.6rem .85rem;color:#fff;text-decoration:none;font-size:.88rem;line-height:1.35}
.site-search-suggest a:hover{background:rgba(115,54,246,.22);color:#fff}
.site-search-suggest strong{font-weight:700;color:#fff}
.site-search-suggest small{display:block;color:#aaa;font-size:.74rem;margin-top:.15rem}
.mobile-search-form{display:flex;gap:.5rem;margin:1.25rem 0 .5rem;padding:0 .25rem}
.mobile-search-form input{flex:1;background:#120e27;border:1px solid rgba(255,255,255,.15);color:#fff;padding:.7rem .85rem;border-radius:999px;font-size:.92rem}
.mobile-search-form button{background:transparent;border:none;padding:0;line-height:0;cursor:pointer;flex-shrink:0}
.mobile-search-form button img{display:block;width:32px;height:32px;object-fit:contain}
@media (max-width:768px){
.site-search-wrap{max-width:none}
.site-search-form input{font-size:.85rem;padding:.55rem 0}
.site-search-field{padding:0 .55rem 0 .75rem}
.site-search-btn-icon{width:32px;height:32px}
}
@media (min-width:769px){
.site-search-wrap{margin:0}
.site-search-btn-icon{width:36px;height:36px}
.site-search-form input{padding:.7rem 0;font-size:.95rem}
}