/*
Theme Name: QUEENSEO 2025
Description: Premium mobile-first theme dengan footer emoji modern
Version: 2025.11.19
*/

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

body {
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:#000;color:#ddd;line-height:1.8;
    padding-bottom:90px;min-height:100vh;
}

a {text-decoration:none;color:inherit;}
img {max-width:100%;display:block;height:auto;}

/* HEADER */
.header{background:var(--dark);padding:12px 15px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:10;}
.logo img{max-width:230px;width:100%;}
.marquee{flex:1 1 320px;color:var(--gold);font-weight:bold;font-size:14px;overflow:hidden;white-space:nowrap;text-align:center;}
.marquee span{display:inline-block;padding-left:100%;animation:marquee 32s linear infinite;}
@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.btn-group{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.btn{padding:12px 28px;font-size:16px;font-weight:700;border-radius:12px;min-width:120px;text-align:center;transition:.3s;}
.btn-masuk{background:linear-gradient(180deg,var(--gold),var(--primary));color:#000;}
.btn-daftar{background:linear-gradient(180deg,var(--red),var(--darkred));color:#fff;}
.btn:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(241,110,0,.5);}

/* BANNER & JACKPOT */
.banner{margin:10px 0;overflow:hidden;}
.banner img{width:100%;border-radius:12px;box-shadow:0 8px 25px rgba(241,110,0,.3);}
.jackpot{text-align:center;margin:20px 10px;}
.jackpot img{border-radius:12px;box-shadow:0 8px 20px rgba(255,215,0,.3);}

/* PROVIDER */
.provider-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:20px 12px;max-width:1400px;margin:0 auto;}
.provider-grid img{border-radius:10px;transition:transform .4s;box-shadow:0 4px 15px rgba(0,0,0,.6);}
.provider-grid img:hover{transform:scale(1.08);}

/* ARTIKEL */
.single-article{max-width:1000px;margin:40px auto 20px;padding:0 15px;background:linear-gradient(135deg,#111,#0a0a1a);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.8);border:1px solid #333;}
.article-thumb{width:100%;height:220px;object-fit:cover;border-bottom:4px solid var(--primary);}
.article-body{padding:25px;}
.article-title{font-size:26px;color:var(--gold);margin-bottom:15px;text-align:center;font-weight:800;}
.article-meta{text-align:center;color:#aaa;font-size:14px;margin-bottom:20px;}
.article-content{font-size:15px;color:#ccc;text-align:justify;}
.article-content p{margin-bottom:18px;}
.article-content strong{color:var(--gold);}
.btn-article{display:block;margin:30px auto 10px;width:280px;background:linear-gradient(90deg,var(--primary),#ff9d00);color:#000;font-weight:800;padding:14px;border-radius:50px;text-align:center;font-size:16px;transition:.3s;}
.btn-article:hover{background:var(--gold);transform:scale(1.05);box-shadow:0 10px 25px rgba(241,110,0,.6);}

/* FOOTER MENU – EMOJI MODERN */
.footer-menu{
    position:fixed;bottom:0;left:0;right:0;
    background:linear-gradient(180deg,#1a1a2e,var(--dark));
    border-top:3px solid var(--primary);
    display:flex;padding:8px 0;z-index:999;
    box-shadow:0 -6px 20px rgba(241,110,0,.4);
}
.footer-menu a{
    flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
    color:var(--gold);font-size:11px;font-weight:700;letter-spacing:0.5px;
    padding:8px 0;position:relative;transition:.3s;
}
.footer-menu a.active{color:#fff;}
.footer-menu a.active::before{
    content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);
    width:40px;height:3px;background:var(--primary);border-radius:3px;
}
.footer-menu i{
    font-style:normal;font-size:26px;margin-bottom:4px;display:block;
}
.footer-menu a:nth-child(1) i::before{content:"Home"}
.footer-menu a:nth-child(2) i::before{content:"Login"}
.footer-menu a:nth-child(3) i::before{content:"Register"}
.footer-menu a:nth-child(4) i::before{content:"Link"}
.footer-menu a:nth-child(5) i::before{content:"Chat"}

/* RESPONSIVE */
@media(min-width:480px){.provider-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:640px){
    .header{padding:15px 30px;}.marquee{font-size:15px;}
    .btn{padding:14px 35px;font-size:18px;}
    .provider-grid{grid-template-columns:repeat(4,1fr);}
    .article-title{font-size:28px;}
}
@media(min-width:768px){
    .header{flex-wrap:nowrap;padding:18px 40px;}
    .logo img{max-width:270px;}
    .provider-grid{grid-template-columns:repeat(5,1fr);gap:22px;padding:40px 20px;}
    .article-thumb{height:300px;}
}
@media(min-width:1024px){
    .provider-grid{grid-template-columns:repeat(6,1fr);}
}