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

body{
font-family:'Poppins',sans-serif;
background:
radial-gradient(circle at top left, rgba(0,162,255,.18), transparent 25%),
radial-gradient(circle at bottom right, rgba(255,196,61,.15), transparent 25%),
linear-gradient(160deg,#00112d,#002b63,#001947);
color:#fff;
min-height:100vh;
overflow-x:hidden;
position:relative;
}

/* background animasi */
body::before{
content:"";
position:fixed;
width:200%;
height:200%;
background:
repeating-linear-gradient(
45deg,
rgba(255,255,255,.02) 0px,
rgba(255,255,255,.02) 2px,
transparent 2px,
transparent 18px
);
animation:bgMove 18s linear infinite;
z-index:-1;
}

@keyframes bgMove{
from{
transform:translate(0,0);
}
to{
transform:translate(-180px,-180px);
}
}

/* HEADER */
.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 30px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.1);
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 8px 25px rgba(0,0,0,.25);
}

.header-left,
.header-right {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1; /* Kunci Keseimbangan: Sisi kiri dan kanan diberi jatah lebar yang sama */
}

.header-left {
    justify-content: flex-start;
}

.header-right {
    justify-content: flex-end;
}

.title-box {
    flex: 2; /* Teks dipaksa mengambil ruang tengah secara presisi */
    text-align: center;
}

.logo-box img {
    height: 58px;
    width: auto;
    transition: .3s;
    filter: drop-shadow(0 0 10px rgba(255,255,255,.15));
}

.logo-box img:hover {
    transform: scale(1.06);
}

.title-box h1 {
    font-size: 34px;
    margin-bottom: 5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-shadow: 0 4px 15px rgba(0,0,0,.35);
}

.title-box p {
    font-size: 15px;
    opacity: .9;
}

/* CARD */
.box{
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.12);
max-width:760px;
margin:30px auto;
padding:30px;
border-radius:26px;
color:#fff;
box-shadow:
0 15px 40px rgba(0,0,0,.35),
0 0 30px rgba(255,255,255,.04);
animation:fadeUp .8s ease;
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* KUOTA */
.kuota{
background:rgba(255,255,255,.09);
padding:18px;
border-radius:18px;
margin-bottom:22px;
line-height:2;
text-align:center;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 5px 18px rgba(0,0,0,.15);
font-size:15px;
}

/* FORM */
label{
display:block;
font-weight:600;
margin:14px 0 8px;
font-size:15px;
}

input,select{
width:100%;
padding:15px;
border:none;
border-radius:14px;
font-size:15px;
margin-bottom:12px;
background:rgba(255,255,255,.95);
transition:.3s;
outline:none;
}

input:focus,
select:focus{
transform:translateY(-2px);
box-shadow:
0 0 0 3px rgba(255,196,61,.35),
0 8px 20px rgba(0,0,0,.15);
}

/* BUTTON */
button{
width:100%;
padding:16px;
border:none;
border-radius:16px;
background:linear-gradient(135deg,#FFC43D,#ffb300);
color:#000;
font-size:16px;
font-weight:700;
cursor:pointer;
margin-top:16px;
transition:.3s;
box-shadow:0 8px 20px rgba(255,196,61,.25);
}

button:hover{
transform:translateY(-3px);
box-shadow:0 12px 25px rgba(255,196,61,.4);
}

/* GRID */
.grid2{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.grid3{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:12px;
}

/* BARANG */
.barang-box{
background:rgba(255,255,255,.08);
padding:18px;
border-radius:18px;
margin-bottom:10px;
border:1px solid rgba(255,255,255,.08);
}

.barang-row{
display:flex !important;
align-items:center !important;
gap:18px !important;
margin-bottom:16px;
padding:10px 12px;
border-radius:14px;
transition:.3s;
}

.barang-row:hover{
background:rgba(255,255,255,.05);
}

.barang-row:last-child{
margin-bottom:0;
}

.barang-row label{
display:inline-flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
gap:12px !important;
margin:0 !important;
padding:0 !important;
text-align:left !important;
width:220px !important;
white-space:nowrap !important;
color:#fff;
}

.barang-row input[type="checkbox"]{
width:18px;
height:18px;
accent-color:#FFC43D;
cursor:pointer;
}

.barangInput{
display:none;
flex:1;
margin:0;
background:#fff;
}

/* ALERT */
.error,.success{
padding:18px;
border-radius:18px;
margin-bottom:20px;
text-align:center;
font-weight:500;
animation:fadeUp .5s ease;
}

.error{
background:rgba(231,76,60,.15);
border:1px solid rgba(231,76,60,.4);
color:#fff;
backdrop-filter:blur(8px);
}

.success{
background:rgba(46,204,113,.15);
border:1px solid rgba(46,204,113,.4);
color:#fff;
backdrop-filter:blur(8px);
}

.nomor-box{
background:linear-gradient(135deg,#000,#222);
color:#fff;
font-size:42px;
padding:16px;
border-radius:18px;
margin:18px 0;
font-weight:bold;
box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.pdf-btn{
display:inline-block;
padding:14px 22px;
background:linear-gradient(135deg,#001947,#003c8f);
color:#fff;
text-decoration:none;
border-radius:14px;
font-weight:600;
transition:.3s;
margin-top:10px;
}

.pdf-btn:hover{
transform:translateY(-2px);
}

/* FLOAT HOME */
.floating-home{
position:fixed;
bottom:24px;
right:24px;
width:68px;
height:68px;
background:linear-gradient(135deg,#FFC43D,#ffb300);
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
box-shadow:
0 8px 25px rgba(0,0,0,.35),
0 0 20px rgba(255,196,61,.25);
transition:.3s;
z-index:999;
}

.floating-home:hover{
transform:scale(1.08) rotate(5deg);
}

.floating-home img{
width:32px;
}

/* FOOTER */
.footer-section{
background:rgba(255,255,255,.08);
backdrop-filter:blur(12px);
color:#fff;
padding:22px 10px;
margin-top:50px;
text-align:center;
border-top:1px solid rgba(255,255,255,.08);
}

.footer-icons{
display:flex;
justify-content:center;
gap:22px;
margin-bottom:14px;
}

.footer-icons img{
width:30px;
transition:.3s;
}

.footer-icons img:hover{
transform:translateY(-4px) scale(1.08);
}

.footer-address{
font-size:14px;
line-height:1.7;
opacity:.9;
}

/* MODAL */
#modalPeringatan{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
backdrop-filter:blur(8px);
justify-content:center;
align-items:center;
z-index:9999;
padding:20px;
}

.modal-box{
background:rgba(255,255,255,.96);
color:#000;
width:100%;
max-width:620px;
padding:28px;
border-radius:24px;
text-align:left;
animation:fadeUp .4s ease;
box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.modal-box h2{
text-align:center;
margin-bottom:18px;
color:#00215E;
font-size:28px;
}

.modal-box ol{
padding-left:20px;
line-height:2;
margin-bottom:20px;
}

.modal-box button{
margin-top:10px;
}

/* MOBILE */
@media(max-width:768px){

/* HEADER */
.top-header{
flex-direction:column !important;
justify-content:center !important;
align-items:center !important;
text-align:center !important;
padding:14px 10px !important;
gap:6px !important;
}

/* LOGO AREA */
.header-left,
.header-right{
position:static !important;
transform:none !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
margin:0 !important;
width:auto !important;
}

.header-left{
order:1;
gap:8px;
}

.title-box{
order:2;
}

.header-right{
order:3;
margin-top:-6px;
}

/* LOGO */
.logo-box img{
height:32px !important;
}

/* TITLE */
.title-box h1{
font-size:18px !important;
line-height:1.2 !important;
margin-bottom:2px !important;
}

.title-box p{
font-size:11px !important;
opacity:.9;
}

/* CARD */
.box{
width:calc(100% - 10px) !important;
margin:8px auto !important;
padding:12px !important;
border-radius:18px !important;
}

/* KUOTA */
.kuota{
padding:12px !important;
font-size:13px !important;
line-height:1.6 !important;
border-radius:16px !important;
margin-bottom:14px !important;
}

/* FORM */
label{
font-size:13px !important;
margin:8px 0 4px !important;
}

/* INPUT */
input,
select{
padding:12px !important;
font-size:13px !important;
border-radius:12px !important;
margin-bottom:8px !important;
}

/* BUTTON */
button{
padding:13px !important;
font-size:14px !important;
border-radius:14px !important;
margin-top:10px !important;
}

/* GRID */
.grid2,
.grid3{
grid-template-columns:1fr !important;
gap:6px !important;
}

/* BARANG */
.barang-box{
padding:10px !important;
border-radius:14px !important;
}

.barang-row{
flex-direction:column !important;
align-items:flex-start !important;
gap:6px !important;
padding:8px !important;
margin-bottom:8px !important;
}

.barang-row label{
width:100% !important;
font-size:13px !important;
}

.barangInput{
width:100%;
}

/* ALERT */
.success,
.error{
padding:12px !important;
font-size:13px !important;
border-radius:14px !important;
}

/* NOMOR */
.nomor-box{
font-size:28px !important;
padding:10px !important;
margin:10px 0 !important;
}

/* PDF BUTTON */
.pdf-btn{
width:100%;
padding:12px !important;
font-size:13px !important;
text-align:center;
}

/* FLOAT BUTTON */
.floating-home{
width:50px !important;
height:50px !important;
right:12px !important;
bottom:12px !important;
}

.floating-home img{
width:22px !important;
}

/* FOOTER */
.footer-section{
padding:18px 10px 75px !important;
margin-top:24px !important;
}

.footer-icons{
gap:14px !important;
flex-wrap:wrap;
}

.footer-icons img{
width:24px !important;
}

.footer-address{
font-size:11px !important;
line-height:1.5 !important;
}

/* MODAL */
.modal-box{
padding:16px !important;
border-radius:16px !important;
max-height:85vh;
overflow-y:auto;
}

.modal-box h2{
font-size:20px !important;
}

.modal-box ol{
font-size:13px !important;
line-height:1.6 !important;
}

}