/* Base */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',sans-serif;color:#333;line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
header{position:fixed;top:0;left:0;right:0;background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.1)}
header .container{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.logo h1{font-size:1.3rem}
.logo img{height:80px;display:block}
nav ul{list-style:none;display:flex;gap:1.2rem}
nav a{color:#fff;text-decoration:none}
.btn-register{background:#ffd700;color:#333 !important;padding:.4rem .8rem;border-radius:20px;font-weight:600}

/* Hero */
.hero{min-height:70vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;text-align:center;padding-top:100px}
.hero .site-logo{height:100px;margin-bottom:12px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))}
.hero h1{font-size:2.2rem;margin-bottom:.5rem}
.hero h2{color:#ffd700;margin-bottom:.5rem}
.btn-primary{background:#ffd700;color:#333;padding:.8rem 1.2rem;border-radius:30px;text-decoration:none;font-weight:600}

/* Sections */
section{padding:70px 0}
.section-header{text-align:center;margin-bottom:2rem}
.section-header h2{font-size:2rem}
.underline{width:70px;height:4px;background:linear-gradient(135deg,#2563eb,#0ea5e9);margin:10px auto;border-radius:3px}
.steps{display:flex;gap:.6rem;justify-content:center;align-items:center;margin-top:.8rem}
.step{padding:.35rem .6rem;border:1.5px solid #e9ecef;border-radius:999px;font-size:.85rem;color:#667eea;background:#f7f8fc}
.step.done{background:#eaf0ff;border-color:#c9d6ff}
.step.active{background:#ffd700;color:#333;border-color:#ffd700;font-weight:600}
.about{background:#f7f8fc}
.about-content{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.about-image img{width:100%;border-radius:12px;box-shadow:0 8px 25px rgba(0,0,0,.15)}
.detail{display:flex;gap:12px;align-items:center;background:#fff;padding:12px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);margin:.6rem 0}
.detail i{color:#667eea}

/* Registration containers */
.registration-option{background:#fff;padding:20px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.card{background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.card-header{padding:14px 18px;border-bottom:1px solid #eef2f7}
.card-body{padding:16px 18px}
.summary{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.summary li{display:flex;justify-content:space-between;align-items:center}
.summary li.total strong{color:#0b7f3b}
.note{margin-top:10px;color:#6c757d;font-size:.9rem}
.bank{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}
.bank-logo{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.bank-info>div{display:flex;gap:.6rem}
.upload-form{display:grid;gap:.8rem}
.upload-area{border:2px dashed #cbd5e0;border-radius:12px;padding:16px;display:flex;gap:.8rem;align-items:center;cursor:pointer}
.upload-area input{display:none}
.upload-hint .icon{font-size:1.4rem;color:#667eea}
.btn-submit.full{width:100%}
.registration-form{display:grid;gap:1rem}
.form-group{display:grid;gap:.4rem}
.form-group input,.form-group select,.form-group textarea{padding:.9rem;border:2px solid #e9ecef;border-radius:8px}
.btn-submit{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:.9rem 1.2rem;border-radius:8px;text-decoration:none;display:inline-block}

/* Stand Layout */
.stand-legend{display:flex;gap:1rem;align-items:center;margin-bottom:10px}
.legend{display:inline-block;width:16px;height:16px;border-radius:4px}
.legend.available{background:#28a745}
.legend.reserved{background:#dc3545}

.stand-layout{display:flex;gap:2rem;justify-content:center;align-items:start;margin:1rem 0}
.stand-middle{display:flex;flex-direction:column;gap:.6rem}
.stand-layout.bottom{margin-top:1rem}
.stand-column{display:grid;gap:.6rem}
.stand-block{display:flex;gap:2rem}
.stand-box{width:70px;height:70px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600;text-decoration:none}
.stand-box.available{background:#28a745;color:#fff}
.stand-box.available:hover{filter:brightness(1.1)}
.stand-box.reserved{background:#dc3545;color:#fff;cursor:not-allowed}
.stand-box.info{background:#6c757d;color:#fff}
.side-left,.side-right{display:flex;flex-direction:column;align-items:center}
.side-left .stand-box.info,.side-right .stand-box.info{margin-top:.8rem}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:2000}
.modal{background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.2);padding:20px;max-width:420px;width:92%}

/* Footer */
footer{background:#2c3e50;color:#fff;padding:30px 0}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.footer-links ul{list-style:none}
.footer-links a{color:#bdc3c7;text-decoration:none}
.footer-bottom{text-align:center;margin-top:14px;color:#bdc3c7}

@media(max-width:768px){
  .about-content{grid-template-columns:1fr}
  .stand-box{width:56px;height:56px}
  .pay-grid{grid-template-columns:1fr}
  .hero .site-logo{height:72px}
}

/* Admin Table Enhancements */
.table-wrap{overflow:auto}
.admin-table{width:100%;border-collapse:separate;border-spacing:0;min-width:960px}
.admin-table thead th{position:sticky;top:0;background:#f4f6fb;border-bottom:2px solid #e9ecef;text-align:left;padding:12px}
.admin-table tbody td{padding:12px;border-bottom:1px solid #eef2f7}
.admin-table tbody tr:hover{background:#fafbff}
.admin-table thead th:first-child,.admin-table tbody td:first-child{border-left:1px solid #e9ecef}
.admin-table thead th:last-child,.admin-table tbody td:last-child{border-right:1px solid #e9ecef}
.admin-table thead tr:first-child th{border-top:1px solid #e9ecef}
.admin-table tbody tr:last-child td{border-bottom:1px solid #e9ecef}

.badge{display:inline-block;padding:.25rem .5rem;border-radius:999px;font-size:.8rem;font-weight:600}
.badge.pay-pending{background:#fff5cc;color:#8a6d3b;border:1px solid #ffe08a}
.badge.pay-uploaded{background:#eaf7ff;color:#0c5460;border:1px solid #b3e5ff}
.badge.pay-verified{background:#e6ffed;color:#0b7f3b;border:1px solid #a7f3d0}
.badge.app-pending{background:#fff5cc;color:#8a6d3b;border:1px solid #ffe08a}
.badge.app-approved{background:#e6ffed;color:#0b7f3b;border:1px solid #a7f3d0}
.badge.app-rejected{background:#ffe6e6;color:#721c24;border:1px solid #f5c6cb}

.admin-toolbar .link, .registration-option .link{color:#2563eb;text-decoration:none}
.instansi-logos{margin-top:14px; height:56px}
.admin-toolbar .link:hover, .registration-option .link:hover{text-decoration:underline}