/* =========================================
   RAPXZ DOWNLOADER — DONASI
   Neo Brutalism v2
========================================= */

:root{

--bg:#F7F7F7;
--card:#FFFFFF;
--text:#111111;

--yellow:#FFD84D;
--blue:#8BE9FD;
--green:#7DFF9A;
--red:#FF7B7B;
--pink:#FF9ECF;

--border:4px solid #111;
--shadow:8px 8px 0 #111;
--shadow-hover:12px 12px 0 #111;

--radius:18px;

--container:1180px;

}

/* ========================================= */

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

html{
scroll-behavior:smooth;
}

body{
font-family:"Plus Jakarta Sans",sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
line-height:1.6;
}

a{
text-decoration:none;
color:inherit;
}

button{
font:inherit;
cursor:pointer;
}

main{
width:min(var(--container),92%);
margin:auto;
padding:26px 0 48px;
}

/* =========================================
NAVBAR
========================================= */

.navbar{
position:sticky;
top:0;
z-index:999;
height:72px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 18px;
background:#fff;
border-bottom:var(--border);
box-shadow:0 6px 0 #111;
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-size:27px;
font-weight:900;
letter-spacing:.5px;
}

.logo span{
padding:6px 10px;
background:#111;
color:#fff;
font-size:13px;
font-weight:800;
border-radius:10px;
}

.menu-btn{
width:54px;
height:54px;
display:grid;
place-items:center;
font-size:24px;
font-weight:900;
background:var(--yellow);
border:var(--border);
box-shadow:6px 6px 0 #111;
transition:.18s;
}

.menu-btn:hover{
transform:translate(-3px,-3px);
box-shadow:10px 10px 0 #111;
}

.menu-btn:active{
transform:translate(2px,2px);
box-shadow:2px 2px 0 #111;
}

/* =========================================
SIDEBAR
========================================= */

.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
opacity:0;
visibility:hidden;
transition:.25s;
z-index:998;
}

.overlay.active{
opacity:1;
visibility:visible;
}

.sidebar{
position:fixed;
left:-320px;
top:0;
width:295px;
height:100vh;
background:#fff;
border-right:var(--border);
padding:22px;
display:flex;
flex-direction:column;
gap:12px;
transition:.28s;
overflow-y:auto;
z-index:999;
}

.sidebar.active{
left:0;
}

.side-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:14px;
}

.side-head h2{
font-size:24px;
font-weight:900;
}

#closeMenu{
width:46px;
height:46px;
display:grid;
place-items:center;
font-size:28px;
background:var(--red);
border:var(--border);
box-shadow:5px 5px 0 #111;
}

.sidebar>a{
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
background:#fff;
border:var(--border);
box-shadow:6px 6px 0 #111;
font-weight:800;
transition:.18s;
}

.sidebar>a:hover{
transform:translate(-3px,-3px);
box-shadow:10px 10px 0 #111;
}

.sidebar>a.active{
background:var(--pink);
}

.sidebar i{
font-size:22px;
}

.side-bottom{
margin-top:auto;
padding-top:18px;
display:flex;
flex-direction:column;
gap:10px;
}

.side-bottom h3{
font-size:13px;
letter-spacing:2px;
font-weight:900;
opacity:.75;
}

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

.hero{
min-height:38vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:18px 0 24px;
}

.hero-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 18px;
background:var(--pink);
border:var(--border);
box-shadow:var(--shadow);
font-size:14px;
font-weight:900;
margin-bottom:18px;
}

.hero-badge i{
font-size:20px;
}

.hero h1{
font-size:clamp(36px,6vw,60px);
font-weight:900;
line-height:1.08;
max-width:760px;
margin-bottom:16px;
}

.hero h1 span{
display:inline-block;
margin-top:8px;
padding:8px 18px;
background:var(--yellow);
border:var(--border);
box-shadow:var(--shadow);
}

.hero p{
max-width:600px;
font-size:16px;
font-weight:600;
opacity:.8;
}

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

.donation-wrap{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:26px;
align-items:start;
margin-top:20px;
}

.don-card{
background:var(--card);
border:var(--border);
box-shadow:var(--shadow);
border-radius:var(--radius);
padding:26px;
}

.don-card h2{
display:flex;
align-items:center;
gap:10px;
font-size:22px;
font-weight:900;
margin-bottom:6px;
}

.don-card h2 i{
font-size:26px;
}

.don-card .sub{
font-size:14px;
font-weight:600;
opacity:.7;
margin-bottom:20px;
}

.field{
margin-bottom:18px;
}

.field label{
display:block;
font-size:13px;
font-weight:800;
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:.5px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="number"]{
width:100%;
height:54px;
padding:0 16px;
border:var(--border);
border-radius:12px;
font-size:15px;
font-weight:700;
outline:none;
background:#fff;
}

.field input:focus{
background:#fffceb;
}

.anon-row{
display:flex;
align-items:center;
gap:10px;
font-size:13px;
font-weight:700;
margin-bottom:18px;
}

.anon-row input{
width:20px;
height:20px;
accent-color:#111;
}

.preset-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-bottom:14px;
}

.preset-btn{
background:#fff;
border:var(--border);
border-radius:12px;
padding:14px 6px;
font-weight:900;
font-size:14px;
box-shadow:5px 5px 0 #111;
transition:.15s;
}

.preset-btn:hover{
transform:translate(-2px,-2px);
box-shadow:7px 7px 0 #111;
}

.preset-btn.active{
background:var(--green);
transform:translate(2px,2px);
box-shadow:2px 2px 0 #111;
}

.amount-hint{
font-size:12px;
font-weight:700;
opacity:.6;
margin-bottom:20px;
}

.btn-donate{
width:100%;
height:60px;
background:var(--pink);
border:var(--border);
border-radius:14px;
font-size:16px;
font-weight:900;
box-shadow:6px 6px 0 #111;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
transition:.15s;
}

.btn-donate:hover{
transform:translate(-3px,-3px);
box-shadow:10px 10px 0 #111;
}

.btn-donate:active{
transform:translate(3px,3px);
box-shadow:none;
}

.btn-donate:disabled{
opacity:.6;
cursor:not-allowed;
transform:none;
box-shadow:6px 6px 0 #111;
}

/* =========================================
QR RESULT CARD
========================================= */

.qr-card{
text-align:center;
}

.qr-empty{
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
padding:40px 10px;
opacity:.55;
text-align:center;
}

.qr-empty i{
font-size:52px;
}

.qr-empty p{
font-size:14px;
font-weight:700;
max-width:220px;
}

.qr-status{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 16px;
border:var(--border);
border-radius:99px;
font-size:12px;
font-weight:900;
letter-spacing:.5px;
margin-bottom:16px;
}

.qr-status.pending{
background:var(--yellow);
}

.qr-status.success{
background:var(--green);
}

.qr-status.expired,
.qr-status.error{
background:var(--red);
}

.qr-status .dot{
width:8px;
height:8px;
border-radius:50%;
background:#111;
animation:pulse 1.2s infinite;
}

@keyframes pulse{
0%,100%{opacity:1;}
50%{opacity:.3;}
}

#qrImage{
width:230px;
height:230px;
margin:0 auto 16px;
padding:12px;
background:#fff;
border:var(--border);
border-radius:14px;
box-shadow:var(--shadow);
display:flex;
align-items:center;
justify-content:center;
}

#qrImage img,
#qrImage canvas{
width:100%;
height:100%;
image-rendering:pixelated;
}

.qr-amount{
font-size:30px;
font-weight:900;
margin-bottom:4px;
}

.qr-orderid{
font-size:12px;
font-weight:700;
opacity:.6;
margin-bottom:16px;
}

.qr-timer{
font-size:14px;
font-weight:800;
background:#f4f4f4;
border:3px solid #111;
border-radius:10px;
padding:8px 14px;
display:inline-block;
margin-bottom:18px;
}

.qr-timer.danger{
background:var(--red);
}

.qr-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:center;
}

.qr-actions button,
.qr-actions a{
flex:1;
min-width:120px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
border:3px solid #111;
border-radius:10px;
font-weight:800;
font-size:13px;
background:#fff;
box-shadow:4px 4px 0 #111;
transition:.15s;
}

.qr-actions button:hover,
.qr-actions a:hover{
transform:translate(-2px,-2px);
box-shadow:6px 6px 0 #111;
}

.qr-success-box{
padding:20px 10px;
}

.qr-success-box i{
font-size:56px;
color:#1a7f37;
}

.qr-success-box h3{
font-size:22px;
font-weight:900;
margin:10px 0 4px;
}

.qr-success-box p{
font-size:13px;
font-weight:600;
opacity:.75;
}

/* =========================================
HOW TO SECTION
========================================= */

.howto-section{
margin-top:70px;
}

.section-title{
text-align:center;
margin-bottom:30px;
}

.section-title h2{
font-size:32px;
font-weight:900;
margin-bottom:8px;
}

.section-title p{
font-size:15px;
font-weight:600;
opacity:.7;
}

.howto-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

.howto-card{
background:#fff;
border:var(--border);
border-radius:var(--radius);
padding:22px;
box-shadow:var(--shadow);
}

.howto-card .num{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
background:var(--yellow);
border:3px solid #111;
border-radius:50%;
font-weight:900;
margin-bottom:12px;
}

.howto-card h3{
font-size:16px;
font-weight:900;
margin-bottom:6px;
}

.howto-card p{
font-size:13px;
font-weight:600;
opacity:.75;
}

/* =========================================
FOOTER
========================================= */

footer{
margin-top:80px;
background:#fff;
border-top:var(--border);
padding:40px 0;
}

.footer-box{
width:min(var(--container),92%);
margin:auto;
text-align:center;
}

.footer-box h2{
font-size:26px;
font-weight:900;
}

.footer-box p{
margin-top:8px;
font-weight:700;
opacity:.75;
}

.footer-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin:22px 0;
}

.footer-links a{
background:var(--yellow);
border:3px solid #111;
padding:10px 16px;
font-weight:900;
border-radius:10px;
}

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

@media(max-width:900px){

.donation-wrap{
grid-template-columns:1fr;
}

.howto-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:520px){

.preset-grid{
grid-template-columns:repeat(3,1fr);
}

.howto-grid{
grid-template-columns:1fr;
}

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

.qr-actions button,
.qr-actions a{
min-width:100%;
}

}