:root{
 --bg:#060912;--bg2:#0a1020;--panel:#0f1727;--panel2:#121e32;
 --text:#f5f7fb;--muted:#aab6c8;--line:rgba(255,255,255,.10);
 --cyan:#31e6ff;--cyan2:#58ffd0;--violet:#8d5cff;--lime:#caff43;
 --radius:22px;--shadow:0 22px 70px rgba(0,0,0,.34);--max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.72;
 background:
 radial-gradient(circle at 10% -5%,rgba(49,230,255,.10),transparent 32%),
 radial-gradient(circle at 90% 6%,rgba(141,92,255,.13),transparent 33%),var(--bg);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.container{width:min(calc(100% - 34px),var(--max));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:999;background:rgba(6,9,18,.94);backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}
.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:12px;font-weight:950}
.logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#041017;font-weight:1000;box-shadow:0 0 28px rgba(49,230,255,.22)}
.brand em{font-style:normal;color:var(--cyan)}
.nav{display:flex;gap:19px;align-items:center}
.nav a{color:#dce4ef;font-size:.95rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--cyan)}
.actions{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line);font-weight:850}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--cyan2));color:#041017;border:0}
.btn-secondary{background:rgba(255,255,255,.05)}
.hero{padding:42px 0 22px}
.hero-card{position:relative;overflow:hidden;min-height:470px;border-radius:28px;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--panel)}
.hero-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,6,12,.95),rgba(2,6,12,.75) 48%,rgba(2,6,12,.15))}
.hero-content{position:relative;z-index:2;max-width:760px;padding:64px}
.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;border:1px solid rgba(49,230,255,.28);background:rgba(49,230,255,.06);color:var(--cyan);font-size:.79rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em}
h1,h2,h3{line-height:1.16;margin:0 0 14px}
h1{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.045em}
h2{font-size:clamp(1.75rem,3vw,2.55rem);letter-spacing:-.028em}
h3{font-size:1.22rem}
.lead{color:#ccd5e3;font-size:1.08rem;max-width:67ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px;padding:16px;border:1px solid var(--line);border-radius:20px;background:rgba(15,23,39,.80)}
.stat{padding:12px 14px}.stat strong{display:block}.stat span{color:var(--muted);font-size:.9rem}
.section{padding:38px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:22px}.section-head p{margin:0;color:var(--muted);max-width:62ch}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));box-shadow:var(--shadow)}
.card-media{aspect-ratio:16/10;background:var(--panel2)}.card-media img{width:100%;height:100%;object-fit:cover}.card-body{padding:19px}.kicker{color:var(--lime);font-size:.77rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.card p{color:var(--muted);margin-bottom:0}
.page-shell{padding:38px 0}.page-banner{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:24px;aspect-ratio:5/2;background:var(--panel)}.page-banner img{width:100%;height:100%;object-fit:cover}
.content-panel{margin-top:24px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(15,23,39,.76);padding:30px}
.breadcrumb{color:var(--muted);font-size:.9rem;margin-bottom:18px}.breadcrumb a{color:#dbe7f5}
.article-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;padding:38px 0}
.article{border:1px solid var(--line);border-radius:24px;background:rgba(15,23,39,.70);padding:32px}
.article-title{font-size:clamp(2.2rem,5vw,4rem)}.article p{color:#d6deea}.article h2{margin-top:38px}.article h3{margin-top:26px}
.article-banner{aspect-ratio:5/2;overflow:hidden;border:1px solid var(--line);border-radius:18px;margin:26px 0 30px;background:var(--panel2)}
.article-image{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:18px;margin:30px 0;background:var(--panel2)}
.article-banner img,.article-image img{width:100%;height:100%;object-fit:cover}
.toc{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:18px;margin:22px 0}.toc a{color:#cfefff}
.sidebar{position:sticky;top:98px;align-self:start;display:grid;gap:16px}.panel{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:20px}.panel p{color:var(--muted)}
.social-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.social-grid a{padding:10px 11px;border:1px solid var(--line);border-radius:10px;color:#dce7f4;font-size:.88rem}
.site-footer{margin-top:40px;border-top:1px solid var(--line);background:#050811}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;padding:38px 0}.footer-title{font-weight:900;margin-bottom:10px}.footer-links{display:grid;gap:8px;color:var(--muted)}.footer-bottom{padding:18px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.dev-note{border:1px dashed rgba(202,255,67,.35);background:rgba(202,255,67,.04);border-radius:14px;padding:16px;color:#dfe8ca}
@media(max-width:980px){.nav{display:none}.grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.article-shell{grid-template-columns:1fr}.sidebar{position:static}}
@media(max-width:680px){.actions .btn-secondary{display:none}.hero-content{padding:34px 24px}.hero-card{min-height:520px}.grid,.stats,.footer-grid{grid-template-columns:1fr}.article{padding:22px}.page-banner,.article-banner{aspect-ratio:16/9}}
/* FINAL RULE: BANNER IMAGE AND TEXT MUST NEVER OVERLAP */
.hero-card{
    position:relative;
    overflow:hidden;
    min-height:0;
    aspect-ratio:5/2;
    border-radius:28px;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    background:var(--panel);
}
.hero-card img{
    position:static;
    inset:auto;
    width:100%;
    height:100%;
    object-fit:cover;
}
.hero-card:after{display:none!important;content:none!important}
.hero-content{
    position:static;
    z-index:auto;
    max-width:none;
    padding:0;
}
.hero-copy{
    margin-top:18px;
    padding:28px 30px;
    border:1px solid var(--line);
    border-radius:22px;
    background:rgba(15,23,39,.80);
}
.hero-copy h1{font-size:clamp(2.5rem,5vw,4.6rem)}
.hero-copy .lead{max-width:75ch}
@media(max-width:680px){
    .hero-card{min-height:0;aspect-ratio:16/9}
    .hero-content{padding:0}
    .hero-copy{padding:22px}
}


/* =========================================================
   PREMIUM LAYOUT V2
   Banner/hero image separation rules above remain untouched.
   ========================================================= */

/* Remove the old developer-style stat strip from layout */
.stats{display:none!important}

/* Better spacing after hero copy */
.hero{padding-bottom:34px}
.hero-copy{
    margin-top:20px;
    padding:30px 32px;
    background:
      linear-gradient(180deg,rgba(17,26,44,.88),rgba(10,16,29,.88));
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.hero-copy .eyebrow{margin-bottom:8px}
.hero-copy h1{margin-bottom:16px}
.hero-copy .lead{margin-bottom:0}

/* Main section heading looks more editorial and premium */
.section{
    padding:44px 0;
}
.section-head{
    position:relative;
    align-items:flex-end;
    padding-bottom:18px;
    margin-bottom:24px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.section-head:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:92px;
    height:2px;
    background:linear-gradient(90deg,var(--cyan),var(--violet));
}
.section-head > div{max-width:620px}
.section-head p{
    max-width:500px;
    text-align:right;
    line-height:1.65;
}

/* Cards */
.card{
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.card:hover{
    transform:translateY(-4px);
    border-color:rgba(49,230,255,.28);
    box-shadow:0 26px 75px rgba(0,0,0,.40);
}
.card-body{padding:20px 20px 22px}
.card h3{margin-top:7px;margin-bottom:10px}
.card p{font-size:.94rem;line-height:1.65}

/* =========================================================
   PREMIUM FOOTER
   ========================================================= */
.site-footer{
    margin-top:52px;
    border-top:1px solid rgba(255,255,255,.08);
    background:
      radial-gradient(circle at 10% 0%,rgba(49,230,255,.06),transparent 28%),
      radial-gradient(circle at 88% 10%,rgba(141,92,255,.07),transparent 30%),
      #050811;
}
.footer-premium{
    padding:42px 0 24px;
}
.footer-top{
    display:grid;
    grid-template-columns:1.35fr .8fr .9fr;
    gap:42px;
    align-items:start;
}
.footer-brand-block .brand{
    margin-bottom:16px;
}
.footer-brand-block p{
    margin:0;
    max-width:480px;
    color:var(--muted);
    line-height:1.75;
}
.footer-cta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:22px;
}
.footer-heading{
    margin:0 0 15px;
    font-size:.86rem;
    text-transform:uppercase;
    letter-spacing:.11em;
    color:#f7f9fc;
}
.footer-nav{
    display:grid;
    gap:10px;
}
.footer-nav a{
    width:max-content;
    max-width:100%;
    color:var(--muted);
    transition:color .18s ease,transform .18s ease;
}
.footer-nav a:hover{
    color:var(--cyan);
    transform:translateX(3px);
}
.footer-contact-list{
    display:grid;
    gap:10px;
}
.footer-contact-item{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:42px;
    padding:9px 11px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;
    background:rgba(255,255,255,.025);
    color:#dce7f4;
}
.footer-contact-item:hover{
    border-color:rgba(49,230,255,.25);
    background:rgba(49,230,255,.05);
}
.footer-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    flex:0 0 8px;
    background:linear-gradient(135deg,var(--cyan),var(--violet));
    box-shadow:0 0 14px rgba(49,230,255,.32);
}
.footer-social-section{
    margin-top:30px;
    padding-top:26px;
    border-top:1px solid rgba(255,255,255,.07);
}
.footer-social-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:15px;
}
.footer-social-head p{
    margin:0;
    color:var(--muted);
    font-size:.9rem;
}
.footer-social-grid{
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:9px;
}
.footer-social-grid a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;
    background:rgba(255,255,255,.025);
    color:#cbd6e5;
    font-size:.86rem;
    text-align:center;
    transition:all .18s ease;
}
.footer-social-grid a:hover{
    color:#fff;
    border-color:rgba(49,230,255,.28);
    background:rgba(49,230,255,.055);
    transform:translateY(-2px);
}
.footer-bottom-premium{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:19px 0 22px;
    border-top:1px solid rgba(255,255,255,.07);
    color:#8390a4;
    font-size:.86rem;
}
.footer-bottom-links{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}
.footer-bottom-links a:hover{color:var(--cyan)}

/* Old footer layout should no longer influence the new footer */
.footer-grid{display:none!important}
.footer-bottom{display:none!important}

@media(max-width:1080px){
    .footer-social-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
    .section-head{align-items:flex-start;flex-direction:column}
    .section-head p{text-align:left;max-width:640px}
    .footer-top{grid-template-columns:1fr 1fr;gap:30px}
    .footer-brand-block{grid-column:1/-1}
}
@media(max-width:680px){
    .hero-copy{padding:23px}
    .footer-premium{padding-top:32px}
    .footer-top{grid-template-columns:1fr}
    .footer-brand-block{grid-column:auto}
    .footer-social-head{align-items:flex-start;flex-direction:column}
    .footer-social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .footer-bottom-premium{align-items:flex-start;flex-direction:column}
}

/* Brand asset final */
.brand .logo-image{display:block;width:100px;height:30px;object-fit:contain;flex:0 0 auto}
@media(max-width:600px){.brand .logo-image{width:90px;height:27px}}

/* HEADER BRAND FINAL: logo + E-Sports Indonesia */
.site-header .brand .logo-image{display:block;width:140px;height:42px;object-fit:contain;flex:0 0 auto}
.site-header .brand .brand-title{font-size:1.12rem;font-weight:900;letter-spacing:.02em;white-space:nowrap;color:var(--text)}
.site-header .brand .brand-title em{font-style:normal;color:var(--cyan)}
@media(max-width:600px){.site-header .brand .logo-image{width:126px;height:38px}.site-header .brand .brand-title{font-size:1rem}}