/* === NEON THEME — Play Go Laba === */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --bg-deep:#0a0a1a;
    --bg-surface:#111128;
    --bg-card:#16162e;
    --neon-cyan:#00f0ff;
    --neon-magenta:#ff00e5;
    --neon-green:#39ff14;
    --neon-yellow:#f0ff00;
    --text-primary:#e0e0f0;
    --text-muted:#7a7a9e;
    --font-display:'Orbitron',sans-serif;
    --font-body:'Inter','Segoe UI',system-ui,sans-serif;
    --glow-cyan:0 0 8px rgba(0,240,255,.6),0 0 24px rgba(0,240,255,.25);
    --glow-magenta:0 0 8px rgba(255,0,229,.6),0 0 24px rgba(255,0,229,.25);
}

body{
    font-family:var(--font-body);
    background:var(--bg-deep);
    color:var(--text-primary);
    line-height:1.7;
    min-height:100vh;
}

a{color:var(--neon-cyan);text-decoration:none;transition:color .2s,text-shadow .2s}
a:hover{color:#fff;text-shadow:var(--glow-cyan)}

/* ===== BANNER ===== */
.neon-banner{
    position:relative;
    text-align:center;
    padding:4rem 1.5rem 3rem;
    background:linear-gradient(180deg,#0d0d2b 0%,var(--bg-deep) 100%);
    overflow:hidden;
}
.neon-banner::before{
    content:'';
    position:absolute;
    top:-60%;left:50%;transform:translateX(-50%);
    width:600px;height:600px;
    background:radial-gradient(circle,rgba(0,240,255,.12) 0%,transparent 70%);
    pointer-events:none;
}
.neon-banner__title{
    font-family:var(--font-display);
    font-size:2.8rem;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#fff;
    text-shadow:var(--glow-cyan);
}
.neon-banner__title a{color:inherit;text-decoration:none}
.neon-banner__title a:hover{text-shadow:var(--glow-magenta);color:#fff}
.neon-banner__tagline{
    margin-top:.6rem;
    font-size:1.05rem;
    color:var(--text-muted);
    letter-spacing:.5px;
}
.neon-banner--compact{padding:2rem 1.5rem 1.5rem}
.neon-banner--compact .neon-banner__title{font-size:1.6rem}

/* ===== NAV ===== */
.neon-nav{
    text-align:center;
    padding:.7rem 0;
    background:var(--bg-surface);
    border-top:1px solid rgba(0,240,255,.15);
    border-bottom:1px solid rgba(0,240,255,.15);
    position:sticky;top:0;z-index:10;
    backdrop-filter:blur(10px);
}
.neon-nav__link{
    display:inline-block;
    margin:0 1rem;
    padding:.3rem 0;
    font-size:.9rem;
    font-weight:500;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:1px;
    border-bottom:2px solid transparent;
    transition:color .2s,border-color .2s,text-shadow .2s;
}
.neon-nav__link:hover{color:var(--neon-cyan);text-shadow:var(--glow-cyan);border-bottom-color:var(--neon-cyan)}
.neon-nav__link--on{color:var(--neon-cyan);border-bottom-color:var(--neon-cyan);text-shadow:var(--glow-cyan)}

/* ===== GRID ===== */
.grid-zone{
    max-width:900px;
    margin:2.5rem auto;
    padding:0 1.25rem;
}

/* ===== CARD ===== */
.card{
    background:var(--bg-card);
    border:1px solid rgba(0,240,255,.1);
    border-radius:14px;
    overflow:hidden;
    margin-bottom:2.5rem;
    transition:transform .25s,box-shadow .25s,border-color .25s;
}
.card:hover{
    transform:translateY(-4px);
    border-color:var(--neon-cyan);
    box-shadow:0 0 20px rgba(0,240,255,.15),0 8px 40px rgba(0,0,0,.4);
}
.card__thumb img{
    width:100%;height:320px;object-fit:cover;display:block;
    filter:brightness(.85);
    transition:filter .3s;
}
.card:hover .card__thumb img{filter:brightness(1)}
.card__info{padding:1.8rem 2rem 2rem}
.card__details{
    display:flex;gap:1rem;
    font-size:.8rem;
    color:var(--text-muted);
    margin-bottom:.7rem;
    flex-wrap:wrap;
    align-items:center;
}
.pill{
    display:inline-block;
    font-size:.7rem;
    font-weight:600;
    padding:3px 12px;
    border-radius:20px;
    text-transform:uppercase;
    letter-spacing:.6px;
}
.card__headline{
    font-family:var(--font-display);
    font-size:1.35rem;
    font-weight:700;
    margin-bottom:.5rem;
    line-height:1.3;
}
.card__headline a{color:var(--text-primary);text-decoration:none}
.card__headline a:hover{color:var(--neon-cyan);text-shadow:var(--glow-cyan)}
.card__summary{color:var(--text-muted);margin-bottom:1rem;font-size:.95rem}
.card__cta{
    display:inline-block;
    font-weight:600;
    font-size:.9rem;
    color:var(--neon-magenta);
    transition:color .2s,text-shadow .2s;
}
.card__cta:hover{color:#fff;text-shadow:var(--glow-magenta)}

/* ===== READER (single post) ===== */
.reader{
    max-width:800px;
    margin:0 auto;
    padding:2rem 1.25rem 3rem;
}
.reader__cover{
    width:100%;height:380px;object-fit:cover;display:block;
    border-radius:14px;
    margin-bottom:2rem;
    border:1px solid rgba(0,240,255,.15);
    box-shadow:0 0 30px rgba(0,240,255,.08);
}
.reader__details{
    display:flex;gap:1rem;
    font-size:.8rem;
    color:var(--text-muted);
    margin-bottom:.6rem;
    flex-wrap:wrap;
    align-items:center;
}
.reader__details .pill a{color:inherit;text-decoration:none}
.reader__title{
    font-family:var(--font-display);
    font-size:1.9rem;
    font-weight:700;
    color:#fff;
    margin-bottom:1rem;
    line-height:1.3;
    text-shadow:0 0 12px rgba(0,240,255,.15);
}
.reader__lead{
    color:var(--text-muted);
    font-size:1.05rem;
    margin-bottom:1.5rem;
    border-left:3px solid var(--neon-cyan);
    padding-left:1rem;
}
.reader__body{color:var(--text-primary)}
.reader__body h2{
    font-family:var(--font-display);
    font-size:1.25rem;
    color:var(--neon-cyan);
    margin:2rem 0 .8rem;
    text-shadow:0 0 6px rgba(0,240,255,.2);
}
.reader__body p{color:#b0b0cc;margin-bottom:1.1rem;font-size:1rem}
.reader__body p strong{color:var(--text-primary)}
.reader__back{
    display:inline-block;
    margin-top:2.5rem;
    font-weight:600;
    color:var(--neon-magenta);
    transition:color .2s,text-shadow .2s;
}
.reader__back:hover{color:#fff;text-shadow:var(--glow-magenta)}

/* ===== VOID (empty/404) ===== */
.void-msg{
    text-align:center;
    padding:5rem 1rem;
    color:var(--text-muted);
    font-size:1.1rem;
}
.void-msg__code{
    font-family:var(--font-display);
    font-size:4rem;
    font-weight:900;
    color:var(--neon-magenta);
    text-shadow:var(--glow-magenta);
    margin-bottom:1rem;
}

/* ===== FOOTER ===== */
.neon-footer{
    position:relative;
    text-align:center;
    padding:2.5rem 1rem;
    color:var(--text-muted);
    font-size:.82rem;
    margin-top:3rem;
}
.neon-footer__glow{
    position:absolute;
    top:0;left:0;right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--neon-cyan),var(--neon-magenta),transparent);
    box-shadow:0 0 8px rgba(0,240,255,.4);
}

/* ===== SINGLE VIEW (body class) ===== */
body.single-view .neon-banner{padding:1.8rem 1.5rem}
body.single-view .neon-banner__title{font-size:1.6rem}

/* ===== RESPONSIVE ===== */
@media(max-width:600px){
    .neon-banner__title{font-size:1.8rem}
    .neon-banner--compact .neon-banner__title{font-size:1.3rem}
    .card__thumb img{height:200px}
    .card__info{padding:1.2rem 1.4rem 1.4rem}
    .card__headline{font-size:1.1rem}
    .reader__cover{height:200px}
    .reader__title{font-size:1.35rem}
    .neon-nav__link{margin:0 .5rem;font-size:.78rem}
}