/* ==========================================
   BUMDes.NET Isolir Page
   ========================================== */

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

body{

    font-family:'Poppins',sans-serif;

    background:linear-gradient(135deg,#0f172a,#1e3a8a,#2563eb);

    min-height:100vh;

    color:#fff;

}

.background{

    position:fixed;

    width:100%;

    height:100%;

    background:
    radial-gradient(circle at top right,
    rgba(255,255,255,.08),
    transparent 40%);

    z-index:-1;

}

.container{

    width:95%;

    max-width:1100px;

    margin:auto;

    padding:40px 20px;

}

header{

text-align:center;

margin-bottom:45px;

animation:fadeDown .8s;

}

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.logo{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

}

.logo i{

    font-size:40px;

    color:#22c55e;

}

.logo h1{

    font-size:40px;

    font-weight:700;

}

header p{

    opacity:.8;

    margin-top:10px;

}

.hero a{

animation:fadeHero 1s;

}

@keyframes fadeHero{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.hero{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    border-radius:25px;

    padding:50px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

}

.wifi-icon{

    width:110px;

    height:110px;

    border-radius:50%;

    background:#ef4444;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:45px;

    margin-bottom:25px;

}

.hero h2{

    font-size:38px;

    margin-bottom:20px;

}

.hero p{

    max-width:750px;

    margin:auto;

    line-height:1.8;

    opacity:.95;

}
.status-card{

    margin-top:35px;

    background:white;

    color:#1e293b;

    border-radius:20px;

    padding:30px;

    text-align:center;

}

.status-card h3{

    margin-bottom:20px;

}

.status{

    background:#ef4444;

    color:white;

    padding:15px;

    border-radius:12px;

    font-weight:600;

    margin-bottom:15px;

}

.status2{

    background:#f59e0b;

    color:white;

    padding:15px;

    border-radius:12px;

    font-weight:600;

}
.button-group{

    margin:35px 0;

    display:flex;

    gap:20px;

    justify-content:center;

    flex-wrap:wrap;

}

.btn{

    text-decoration:none;

    padding:18px 35px;

    border-radius:15px;

    font-weight:600;

    transition:.3s;

}

.whatsapp{

    background:#22c55e;

    color:white;

}

.paid{

    background:#2563eb;

    color:white;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 25px rgba(0,0,0,.25);

}
.payment{

    background:white;

    color:#1e293b;

    border-radius:25px;

    padding:40px;

}

.payment h2{

    text-align:center;

    margin-bottom:35px;

}

.bank{

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:25px;

    margin-bottom:20px;

    transition:.3s;

}

.bank:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.bank strong{

    font-size:22px;

}
.faq{

    margin-top:40px;

    background:white;

    color:#1e293b;

    padding:40px;

    border-radius:25px;

}

.faq h2{

    text-align:center;

    margin-bottom:30px;

}

.faq-item{

    margin-bottom:30px;

}

.faq-item h3{

    color:#2563eb;

    margin-bottom:10px;

}

footer{

margin-top:60px;

padding:30px;

text-align:center;

background:rgba(255,255,255,.08);

backdrop-filter:blur(15px);

border-radius:20px;

}

footer hr{

margin:20px auto;

width:150px;

border:none;

height:1px;

background:rgba(255,255,255,.25);

}

footer h3{

    margin-bottom:10px;

}
@media(max-width:768px){

    .button-group{

flex-direction:column;

}

.btn{

width:100%;

text-align:center;

}

.bank{

padding:20px;

}

.hero{

padding:30px 20px;

}

.hero h2{

font-size:28px;

}

.logo h1{

font-size:28px;

}

.payment{

padding:25px;

}

.bank strong{

font-size:18px;

}

}
.copy-btn{

    margin-top:20px;

    background:#2563eb;

    color:white;

    border:none;

    padding:12px 18px;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.copy-btn:hover{

    background:#1d4ed8;

}

#toast{

    position:fixed;

    bottom:25px;

    right:25px;

    background:#22c55e;

    color:white;

    padding:16px 22px;

    border-radius:12px;

    display:none;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    z-index:999;

}
.faq-item{

margin-bottom:15px;

border-radius:15px;

overflow:hidden;

border:1px solid #dbeafe;

}

.faq-question{

width:100%;

padding:20px;

font-size:16px;

font-weight:600;

background:white;

border:none;

cursor:pointer;

display:flex;

justify-content:space-between;

align-items:center;

}

.faq-question span{

font-size:22px;

transition:.3s;

}

.faq-answer{

max-height:0;

overflow:hidden;

background:#f8fafc;

transition:max-height .4s ease;

padding:0 20px;

}

.faq-answer p{

padding:20px 0;

line-height:1.8;

}
.floating-wa{

position:fixed;

bottom:25px;

left:25px;

width:65px;

height:65px;

border-radius:50%;

background:#22c55e;

color:white;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

text-decoration:none;

box-shadow:0 10px 25px rgba(0,0,0,.25);

transition:.3s;

z-index:999;

animation:float 2s infinite;

}

.floating-wa:hover{

transform:scale(1.1);

}

@keyframes float{

0%{transform:translateY(0);}

50%{transform:translateY(-8px);}

100%{transform:translateY(0);}

}
body::before{

content:"";

position:fixed;

width:500px;

height:500px;

background:#60a5fa;

filter:blur(180px);

top:-150px;

right:-150px;

opacity:.25;

z-index:-2;

}

body::after{

content:"";

position:fixed;

width:450px;

height:450px;

background:#2563eb;

filter:blur(180px);

bottom:-150px;

left:-150px;

opacity:.25;

z-index:-2;

}
.progress-card{

margin-top:25px;

background:#fff;

padding:25px;

border-radius:20px;

color:#1e293b;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.progress-title{

font-weight:600;

margin-bottom:15px;

}

.progress{

width:100%;

height:12px;

background:#e2e8f0;

border-radius:20px;

overflow:hidden;

}

.progress-bar{

width:30%;

height:100%;

background:linear-gradient(90deg,#2563eb,#60a5fa);

animation:loading 2s infinite;

}

@keyframes loading{

0%{width:15%;}

50%{width:65%;}

100%{width:30%;}

}
.bank{

position:relative;

overflow:hidden;

}

.bank::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:rgba(37,99,235,.05);

transition:.5s;

}

.bank:hover::before{

left:100%;

}