*{
box-sizing:border-box;
}

body{

background:#f4f7fb;

}

.checkout{

max-width:900px;

margin:40px auto;

background:white;

padding:40px;

border-radius:20px;

box-shadow:
0 10px 40px rgba(0,0,0,.08);

}

.checkout h1{

color:#082B67;

margin-bottom:30px;

}

.grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:20px;

}

input,
select,
textarea{

width:100%;

padding:16px;

border:1px solid #ddd;

border-radius:12px;

font-size:15px;

margin-bottom:15px;

}

textarea{

height:140px;

}

.summary{

background:#082B67;

color:white;

padding:20px;

border-radius:14px;

margin-bottom:25px;

line-height:2;

}

button{

width:100%;

padding:18px;

background:#082B67;

color:white;

border:none;

border-radius:14px;

font-weight:800;

cursor:pointer;

}

.upload{

padding:20px;

border:2px dashed #082B67;

border-radius:14px;

margin-bottom:20px;

}

.success{

background:#eafdf0;

padding:20px;

border-radius:14px;

}

@media(max-width:768px){

.checkout{

margin:15px;

padding:20px;

}

.grid{

grid-template-columns:1fr;

}

}

.claim{

display:block;

margin-top:30px;

background:white;

color:#082B67;

padding:18px;

border-radius:14px;

text-align:center;

font-weight:800;

text-decoration:none;

}

.claim:hover{

opacity:.95;

}

.payment-box{

margin-top:40px;

background:white;

padding:25px;

border-radius:22px;

}



.rekening{

padding:20px;

background:#f6f7fb;

border-radius:16px;

line-height:2;

margin-bottom:25px;

}



.qris{

text-align:center;

}



.qris img{

width:260px;

max-width:100%;

border-radius:18px;

}



.upload{

margin-top:25px;

}



.checkoutbtn{

margin-top:25px;

width:100%;

height:60px;

background:#082B67;

color:white;

font-size:18px;

font-weight:800;

border:none;

border-radius:18px;

}



@media(max-width:768px){

.payment-box{

padding:18px;

}



.qris img{

width:220px;

}

}

.waorder{

display:flex;

align-items:center;

justify-content:center;

height:55px;

background:#19b45b;

color:white;

text-decoration:none;

border-radius:16px;

font-weight:700;

margin-top:20px;

}