/* ================= GLOBAL (SAFE) ================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}



html,
body{
background:#000;
color:#fff;
line-height:1.5;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

a{
text-decoration:none;
}

/* ================= EVM ACCENT ================= */

:root{
--accent:#facc15;
--accent-hover:#fde047;
}

/* ================= CONTAINER ================= */

.container{
padding:56px 20px 40px;
text-align:center;
}

/* ================= LOGO ================= */

.container .logo{
width:104px;
margin:0 auto 14px;
display:block;

filter:
drop-shadow(
0 0 12px rgba(250,204,21,0.10)
);
}

/* ================= HERO ================= */

.container h1{
margin-bottom:10px;
font-size:30px;
font-weight:600;
line-height:1.2;
letter-spacing:-0.5px;
color:#fff;
}

.container .subtitle{
max-width:650px;
margin:0 auto 14px;
color:#9ca3af;
font-size:15px;
line-height:1.9;
}

.container .micro-top{
margin-bottom:24px;
font-size:13px;
color:var(--accent);
}

/* ================= STATS ================= */

.container .stats{
display:inline-block;
background:#1c1c1c;
border:1px solid #2a2a2a;
border-radius:30px;
padding:8px 24px;
font-size:13px;
color:#aaa;
}

/* ================= NETWORK STATUS ================= */

.network-status{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
width:100%;
padding:8px 16px;
background:#1c1c1c;
border:1px solid #2a2a2a;
border-radius:30px;
font-size:13px;
}

.container > .network-status{
max-width:368px;
margin:0 auto 32px; /* Jarak ke Card */
}

.container .card > .stats{
margin:0 auto 28px; /* Jarak ke Input */
}

.network-online,
.network-offline{
display:flex;
align-items:center;
font-weight:500;
}

.network-online{
color:#22c55e;
}

.network-offline{
color:#ef4444;
}

.network-dot{
width:8px;
height:8px;
border-radius:50%;
background:currentColor;
margin-right:6px;
animation:statusPulse 1.8s infinite;
}

.network-divider{
color:#666;
}

.network-avg{
display:flex;
align-items:center;
gap:4px;
color:#bdbdbd;
}

.network-avg::before{
content:"⚡";
color:#facc15;
}

@keyframes statusPulse{
0%{
opacity:1;
transform:scale(1);
}

50%{
opacity:.35;
transform:scale(1.3);
}

100%{
opacity:1;
transform:scale(1);
}
}

/* ================= CARD ================= */

.container .card{
background:#111;
border:1px solid #222;
border-radius:16px;
max-width:368px;
width:100%;
margin:0 auto 30px;
padding:32px;

box-shadow:0 8px 30px rgba(0,0,0,0.5);

display:flex;
flex-direction:column;
}

/* ================= FAUCET RULES CARD ================= */

.container .rules-card{
background:#111;
border:1px solid #222;
border-radius:16px;
max-width:fit-content; 
width:100%;
margin:40px auto 60px;
padding:28px 32px;

box-shadow:0 8px 30px rgba(0,0,0,.5);

text-align:left;
}

.container .rules-card h2{
margin:0 0 18px;
padding:0;
border:none;
font-size:22px;
color:#fff;
}

.container .rules-card ul{
margin:0;
padding-left:20px;
color:#aaa;
}

.container .rules-card li{
margin-bottom:14px;
line-height:1.8;
}

.container .rules-card li:last-child{
margin-bottom:0;
}

/* ================= INPUT ================= */

.container input{
width:100%;
padding:16px;
border-radius:8px;
border:none;
font-size:15px;
text-align:center;
outline:none;
background:#fff;
color:#000;
margin:0 0 28px 0;
}

.container input::placeholder{
color:#888;
}

/* ================= CAPTCHA ================= */

.container .captcha-box{
display:flex;
justify-content:center;
width:100%;
margin:0 0 20px 0;
}

/* ================= BUTTON ================= */

.container button{
width:100%;
padding:16px;
border:none;
border-radius:8px;
background:var(--accent);
color:#000;
font-weight:600;
cursor:pointer;
transition:0.2s;
font-size:15px;
margin:0;
}

.container button:hover{
opacity:0.9;
}

/* ================= STATUS ================= */

.container .status{
margin-top:-10px;
font-size:14px;
line-height:1.8;
}

.success{
color:#22c55e;
}

.success-detail{
color:#ef4444;
}

.error{
color:#ef4444;
}

.cooldown{
color:var(--accent);
}

/* ================= TX LINK ================= */

.tx-link{
display:inline-block;
margin-top:10px;
font-size:13px;
color:#3b82f6;
}

/* ================= SPINNER ================= */

.spinner{
width:16px;
height:16px;
border:2px solid #000;
border-top:2px solid transparent;
border-radius:50%;
display:inline-block;
margin-right:8px;
animation:spin 0.6s linear infinite;
vertical-align:middle;
}

@keyframes spin{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}

/* ================= CONTENT ================= */

.container section{
max-width:800px;
margin:32px auto 0;
text-align:left;
padding:0 2px;
}

/* SECTION TITLE */

.container section h2{
margin-bottom:26px;
font-size:26px;
font-weight:600;
line-height:1.3;
letter-spacing:-0.4px;
color:#fff;
}

/* PARAGRAPH */

.container section p{
color:#a1a1aa;
font-size:15px;
line-height:2;
margin-bottom:28px;
font-weight:400;
letter-spacing:0.1px;
}

/* LAST PARAGRAPH */

.container section p:last-child{
margin-bottom:0;
}

/* LIST */

.container section ul{
color:#a1a1aa;
font-size:15px;
line-height:1.9;
padding-left:18px;
margin-bottom:24px;
}

/* LIST ITEM */

.container section ul li{
margin-bottom:10px;
padding-left:2px;
}

/* STRONG */

.container section b,
.container section strong{
color:#fff;
font-weight:600;
}

/* ================= FAQ ================= */

.container .faq-item{
border-top:1px solid #1b1b1b;
padding:18px 0;
}

.container .faq-question{
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
font-weight:500;
font-size:15px;
line-height:1.7;
color:#fff;
gap:20px;
}

.container .faq-question::after{
content:"+";
font-size:18px;
font-weight:600;
color:#fff;
flex-shrink:0;
}

.container .faq-item.active .faq-question::after{
content:"−";
}

.container .faq-answer{
display:none;
padding-top:14px;
}

.container .faq-answer p{
margin:0;
color:#a1a1aa;
font-size:14px;
line-height:1.95;
}

.container .faq-item.active .faq-answer{
display:block;
}

/* ================= INTERNAL LINKS ================= */

.container .faucet-links{
margin-top:56px;
font-size:13px;
text-align:center;
line-height:2.4;
padding:0 10px;
}

.container .faucet-links a{
color:var(--accent);
margin:0 5px;
transition:0.2s;
}

.container .faucet-links a:hover{
opacity:0.85;
}

.promo-floating-stack {
    position:fixed;
    top:76px;
    left:50%;
    z-index:9998;
    display:flex;
    flex-direction:column;
    gap:10px;
    width:min(760px,calc(100% - 40px));
    max-height:calc(100vh - 88px);
    overflow-y:auto;
    pointer-events:none;
    transform:translateX(-50%);
}

.promo-floating-stack[hidden] {
    display:none;
}

.promo-slot {
    width:100%;
    margin:0;
    position:relative;
    overflow:visible;
    box-sizing:border-box;
    pointer-events:auto;
}

.promo-close {
    position:absolute;
    top:8px;
    right:10px;
    z-index:2;
    display:block;
    width:auto;
    height:auto;
    padding:0;
    border:0;
    background:transparent;
    color:#d1d5db;
    font:inherit;
    font-size:22px;
    line-height:1;
    cursor:pointer;
}

.promo-close:hover {
    color:#facc15;
}

.promo-slot > .promo-announcement-content,
.promo-slot > .promo-campaign-content,
.promo-slot > .promo-running-content {
    padding-right:44px;
}

.promo-advertisement {
    width:100%;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow:visible;
    padding-top:10px;
    box-sizing:border-box;
}

.promo-advertisement-content {
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:visible;
}

.promo-advertisement-content iframe {
    max-width:100%;
    border:0;
}

.promo-announcement {
    width:100%;
    padding-left:30px;
    box-sizing:border-box;
}

.promo-announcement-content {
    width:100%;
    position:relative;
    padding:13px 16px;
    background:linear-gradient(135deg,#0d0d0d,#111);
    border:1px solid #242424;
    border-left:2px solid #facc15;
    border-radius:10px;
    color:#d1d5db;
    font-size:13px;
    line-height:1.55;
    text-align:left;
    box-sizing:border-box;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.promo-announcement-content a,
.promo-campaign-content a {
    color:#facc15;
    font-weight:500;
    text-decoration:none;
}

.promo-announcement-content a:hover,
.promo-campaign-content a:hover {
    text-decoration:underline;
}

.promo-announcement-content::before {
    content:"📢";
    position:absolute;
    left:-29px;
    top:50%;
    transform:translateY(-50%);
    width:22px;
    text-align:center;
    font-size:15px;
    line-height:1;
}

.promo-runningText {
    width:100%;
    padding-left:30px;
    box-sizing:border-box;
    overflow:visible;
}

.promo-runningText .promo-running-content {
    width:100%;
    position:relative;
    padding:13px 16px;
    background:linear-gradient(135deg,#0d0d0d,#111);
    border:1px solid #242424;
    border-left:2px solid #facc15;
    border-radius:10px;
    color:#b7bcc5;
    font-size:13px;
    line-height:1.55;
    box-sizing:border-box;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.promo-runningText .promo-running-content::before {
    content:"🚀";
    position:absolute;
    left:-29px;
    top:50%;
    transform:translateY(-50%);
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    line-height:1;
    z-index:1;
}

/* =========================================
   RUNNING TEXT: TRUE CONTINUOUS TICKER LOOP
========================================= */

.promo-runningText .promo-running-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
}

.promo-running-track {
    display: flex;
    /* Tambahan vendor prefix untuk max-content */
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    /* Animasi menggeser track sejauh tepat 50% dari total lebar */
    -webkit-animation: promo-ticker 60s linear infinite;
    animation: promo-ticker 60s linear infinite;
    will-change: transform;
}

.promo-running-group {
    display: flex;
    align-items: center;
    /* gap: 60px;  <-- GAP DIHAPUS AGAR KOMPATIBEL DENGAN HP LAMA */
    padding-right: 60px; /* Jarak penutup sebelum masuk ke duplikat grup berikutnya */
}

.promo-running-group span {
    display: inline-block;
    color: #b7bcc5;
    font-size: 13px;
    margin-right: 60px; /* PENGGANTI GAP UNTUK SPASI ANTAR TEKS */
}

/* Hilangkan margin di teks paling akhir supaya tidak mengganggu padding-right grup */
.promo-running-group span:last-child {
    margin-right: 0;
}

.promo-runningText .promo-running-group a {
    color:#facc15;
    font-weight:500;
    text-decoration:none;
}

.promo-runningText .promo-running-group a:hover {
    text-decoration:underline;
}

@-webkit-keyframes promo-ticker {
    0% { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes promo-ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =========================================
   HOVER & RESPONSIVE
========================================= */

.promo-runningText .promo-running-content {
    transition: border-color .2s ease, box-shadow .2s ease;
}

.promo-runningText .promo-running-content:hover {
    border-color:#333;
    border-left-color:#facc15;
    box-shadow:0 6px 18px rgba(0,0,0,.24);
}

@media(max-width:768px){
    .promo-runningText {
        padding-left:27px;
    }
    .promo-runningText .promo-running-content {
        padding:11px 13px;
        border-radius:9px;
        font-size:12px;
    }
    .promo-runningText .promo-running-content::before {
        left:-26px;
        width:20px;
        height:20px;
        font-size:14px;
    }
    .promo-running-group {
        /* gap: 40px; <-- DIHAPUS */
        padding-right: 40px;
    }
    .promo-running-group span {
        font-size: 12px;
        margin-right: 40px; /* PENGGANTI GAP DI MOBILE */
    }
    .promo-running-group span:last-child {
        margin-right: 0;
    }
    .promo-running-track {
        -webkit-animation-duration: 30s;
        animation-duration: 50s; /* Kecepatan di mobile */
    }
}

.promo-campaign {
    width:100%;
    padding-left:30px;
    box-sizing:border-box;
}

.promo-campaign-content {
    width:100%;
    position:relative;
    padding:13px 16px;
    background:linear-gradient(135deg,#0d0d0d,#111);
    border:1px solid #242424;
    border-left:2px solid #facc15;
    border-radius:10px;
    color:#d1d5db;
    font-size:13px;
    line-height:1.55;
    text-align:left;
    box-sizing:border-box;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.promo-campaign-content::before {
    content:"🎁";
    position:absolute;
    left:-29px;
    top:50%;
    transform:translateY(-50%);
    width:22px;
    text-align:center;
    font-size:15px;
    line-height:1;
}

.promo-announcement-content,
.promo-campaign-content {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.promo-announcement-content:hover,
.promo-campaign-content:hover {
    border-color:#333;
    border-left-color:#facc15;
    box-shadow:0 6px 18px rgba(0,0,0,.24);
}

@media(max-width:768px){
    .promo-floating-stack {
        top:72px;
        width:calc(100% - 24px);
        max-height:calc(100vh - 84px);
    }

    .promo-slot {
        margin:11px 0;
    }
    .promo-announcement,
    .promo-campaign,
    .promo-running {
        padding-left:27px;
    }
    .promo-announcement-content,
    .promo-campaign-content {
        padding:11px 13px;
        border-radius:9px;
        font-size:12px;
    }
    .promo-announcement-content::before,
    .promo-campaign-content::before {
        left:-26px;
        width:20px;
        font-size:14px;
    }
}

/* ================= RESPONSIVE ================= */

@media(min-width:768px){

.container{
padding:88px 20px 50px;
}

.container h1{
font-size:34px;
}

.container .subtitle{
font-size:16px;
}

}

@media(max-width:768px){.container section h2{
font-size:22px;
margin-bottom:24px;
}

.container section p{
font-size:15px;
line-height:2.05;
margin-bottom:30px;
}

.container section ul{
font-size:15px;
line-height:1.9;
}

.container section ul li{
margin-bottom:10px;
}

.container .faq-question{
font-size:15px;
}

.container .faq-answer p{
font-size:14px;
line-height:1.95;
}

}