/* ================= RESET & BASE ================= */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Poppins',sans-serif;color:#1a1a2e;background:#fff;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}

/* ================= NAVBAR ================= */
.navbar{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06);padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:72px;}
.nav-brand{display:flex;align-items:center;gap:12px;}
.nav-brand .brand-icon{width:44px;height:44px;background:#007A33;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;}
.nav-brand .brand-icon svg{width:22px;height:22px;}
.nav-brand .brand-text h3{font-size:15px;font-weight:600;color:#1a1a2e;line-height:1.2;}
.nav-brand .brand-text small{font-size:11px;color:#888;}
.nav-menu{display:flex;align-items:center;gap:6px;}
.nav-menu a{display:flex;align-items:center;gap:6px;padding:8px 18px;border-radius:999px;font-size:13px;font-weight:500;color:#555;transition:.25s;}
.nav-menu a svg{width:16px;height:16px;}
.nav-menu a:hover{background:#E6F4EA;color:#007A33;}
.nav-menu a.active{background:#007A33;color:#fff;}
.nav-menu a.active:hover{background:#006028;}
.btn-login-admin{display:flex;align-items:center;gap:8px;padding:10px 22px;background:#007A33;color:#fff;border-radius:12px;font-size:13px;font-weight:600;transition:.25s;border:none;cursor:pointer;}
.btn-login-admin svg{width:18px;height:18px;}
.btn-login-admin:hover{background:#006028;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,122,51,.25);}

/* ================= HERO ================= */
.hero{background:linear-gradient(135deg,#005a25 0%,#007A33 40%,#009940 100%);padding:80px 40px 90px;text-align:center;color:#fff;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:-60%;right:-20%;width:600px;height:600px;background:rgba(255,255,255,.04);border-radius:50%;}
.hero::after{content:'';position:absolute;bottom:-40%;left:-15%;width:500px;height:500px;background:rgba(255,255,255,.03);border-radius:50%;}
.hero-shield{width:80px;height:80px;background:rgba(255,184,0,.15);border:3px solid #FFB800;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 28px;animation:pulse 2.5s infinite;}
.hero-shield svg{width:36px;height:36px;color:#FFB800;}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,184,0,.3);}50%{transform:scale(1.05);box-shadow:0 0 0 18px rgba(255,184,0,0);}}
.hero h1{font-size:42px;font-weight:700;margin-bottom:14px;letter-spacing:-.5px;}
.hero h2{font-size:20px;font-weight:400;opacity:.9;margin-bottom:12px;}
.hero p{font-size:15px;opacity:.75;max-width:600px;margin:0 auto;line-height:1.7;}

/* ================= SECTION ================= */
.section{padding:60px 40px;}
.section-title{text-align:center;margin-bottom:40px;}
.section-title h2{font-size:28px;font-weight:700;color:#1a1a2e;}
.section-title p{color:#666;font-size:14px;margin-top:6px;}
.section-title .line{width:60px;height:4px;background:linear-gradient(90deg,#007A33,#FFB800);border-radius:4px;margin:12px auto 0;}

/* ================= STATS ================= */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:30px;}
.stat-card{background:#fff;border-radius:16px;padding:28px 24px;box-shadow:0 4px 20px rgba(0,0,0,.06);display:flex;align-items:center;gap:18px;transition:.3s;}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.1);}
.stat-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.stat-icon svg{width:24px;height:24px;}
.stat-icon.si-blue{background:linear-gradient(135deg,#2F80ED,#56CCF2);}
.stat-icon.si-green{background:linear-gradient(135deg,#27AE60,#6FCF97);}
.stat-icon.si-gold{background:linear-gradient(135deg,#F2994A,#F2C94C);}
.stat-icon.si-red{background:linear-gradient(135deg,#EB5757,#F2994A);}
.stat-info p{font-size:13px;color:#888;margin-bottom:4px;}
.stat-info h3{font-size:26px;font-weight:700;color:#1a1a2e;}

/* ================= ABOUT / SEJARAH ================= */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;}
.about-img{border-radius:16px;overflow:hidden;height:320px;background:#e0e0e0;display:flex;align-items:center;justify-content:center;}
.about-img svg{width:80px;height:80px;color:#bbb;}
.about-text h3{font-size:22px;font-weight:600;margin-bottom:12px;color:#007A33;}
.about-text p{color:#555;line-height:1.8;font-size:14px;}

/* ================= PUBLIC TABLE ================= */
.pub-table-wrap{background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.06);overflow:hidden;}
.pub-table-wrap table{width:100%;border-collapse:collapse;}
.pub-table-wrap th{background:#f8faf8;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#888;padding:14px 20px;text-align:left;}
.pub-table-wrap td{padding:14px 20px;border-top:1px solid #f1f1f1;font-size:14px;}
.pub-table-wrap tr:hover{background:#f9fdfb;}
.pub-filter{display:flex;gap:12px;margin-bottom:20px;}
.pub-filter input,.pub-filter select{flex:1;padding:12px 16px;border:1px solid #e0e0e0;border-radius:12px;font-size:14px;font-family:'Poppins',sans-serif;transition:.2s;}
.pub-filter input:focus,.pub-filter select:focus{border-color:#007A33;outline:none;box-shadow:0 0 0 3px rgba(0,122,51,.1);}

/* ================= BADGE (public) ================= */
.pub-badge{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:500;}
.pub-badge.aktif{background:#dcfce7;color:#166534;}
.pub-badge.dipinjam{background:#fef3c7;color:#92400e;}
.pub-badge.rusak{background:#fee2e2;color:#991b1b;}
.pub-badge.perbaikan{background:#ffedd5;color:#9a3412;}
.pub-badge.menunggu{background:#e0e7ff;color:#3730a3;}
.pub-badge.disetujui{background:#dcfce7;color:#166534;}
.pub-badge.ditolak{background:#fee2e2;color:#991b1b;}
.pub-badge.dikembalikan{background:#f3f4f6;color:#374151;}

/* ================= FORM ================= */
.form-card{background:#fff;border-radius:16px;padding:36px;box-shadow:0 4px 20px rgba(0,0,0,.06);max-width:700px;margin:0 auto;}
.form-card h3{font-size:20px;font-weight:600;margin-bottom:24px;color:#007A33;}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:13px;font-weight:500;color:#444;margin-bottom:6px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1px solid #e0e0e0;border-radius:12px;font-size:14px;font-family:'Poppins',sans-serif;transition:.2s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#007A33;outline:none;box-shadow:0 0 0 3px rgba(0,122,51,.1);}
.form-group textarea{height:100px;resize:vertical;}
.btn-submit{background:#007A33;color:#fff;border:none;padding:14px 32px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:.25s;font-family:'Poppins',sans-serif;}
.btn-submit:hover{background:#006028;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,122,51,.25);}

/* ================= INFO PAGE ================= */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.info-card{background:#fff;border-radius:16px;padding:30px;box-shadow:0 4px 20px rgba(0,0,0,.06);transition:.3s;}
.info-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.1);}
.info-card .ic-icon{width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,#007A33,#009940);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:16px;}
.info-card .ic-icon svg{width:24px;height:24px;}
.info-card h4{font-size:17px;font-weight:600;margin-bottom:8px;color:#1a1a2e;}
.info-card p{font-size:13px;color:#666;line-height:1.7;}

/* ================= LOGIN PAGE ================= */
.login-page{min-height:100vh;background:linear-gradient(135deg,#E6F4EA 0%,#d4edda 50%,#c3e6cb 100%);display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{background:#fff;border-radius:20px;padding:48px 40px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.08);text-align:center;}
.login-card .login-logo{width:64px;height:64px;background:#007A33;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:#fff;}
.login-card .login-logo svg{width:30px;height:30px;}
.login-card h2{font-size:22px;font-weight:700;margin-bottom:4px;color:#1a1a2e;}
.login-card .login-sub{font-size:13px;color:#888;margin-bottom:30px;}
.login-card .form-group{text-align:left;}
.login-card .form-group input{background:#f8faf8;}
.login-card .btn-masuk{width:100%;background:#007A33;color:#fff;border:none;padding:14px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:.25s;font-family:'Poppins',sans-serif;margin-top:8px;}
.login-card .btn-masuk:hover{background:#006028;box-shadow:0 4px 18px rgba(0,122,51,.3);}
.login-card .back-link{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:13px;color:#007A33;font-weight:500;}
.login-card .back-link:hover{text-decoration:underline;}
.login-error{background:#fee2e2;color:#991b1b;padding:10px 16px;border-radius:10px;font-size:13px;margin-bottom:16px;}

/* ================= FOOTER ================= */
.pub-footer{background:#1a1a2e;color:#fff;padding:40px;text-align:center;}
.pub-footer .footer-brand{font-size:18px;font-weight:600;margin-bottom:6px;}
.pub-footer .footer-sub{font-size:13px;color:#888;margin-bottom:20px;}
.pub-footer .footer-line{width:60px;height:2px;background:#007A33;margin:0 auto 20px;}
.pub-footer .footer-copy{font-size:12px;color:#666;}

/* ================= ALERT ================= */
.alert-success{background:#dcfce7;color:#166534;padding:12px 18px;border-radius:12px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.alert-success svg{width:18px;height:18px;}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
    .navbar{padding:0 16px;height:60px;}
    .menu-toggle{display:block !important;}
    .nav-menu{
        position:absolute;
        top:60px;
        left:0;
        right:0;
        background:#fff;
        flex-direction:column;
        padding:20px;
        box-shadow:0 10px 20px rgba(0,0,0,0.1);
        display:none;
        gap:10px;
        z-index: 1001;
    }
    .nav-menu.active{display:flex;}
    .nav-menu a{width:100%; border-radius:10px; padding: 12px 20px;}
    .btn-login-admin{display:none;}
    
    .hero{padding:50px 20px 60px;}
    .hero h1{font-size:26px;}
    .hero h2{font-size:16px;}
    .section{padding:40px 16px;}
    .stats-grid{grid-template-columns:1fr 1fr;}
    .about-grid{grid-template-columns:1fr;}
    .info-grid{grid-template-columns:1fr;}
    .pub-filter{flex-direction:column;}
    .login-card{padding:32px 24px;}

    /* Footer Mobile */
    footer > div {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 30px !important;
    }
}
.brand-logo img{
    width:48px;
    height:48px;
    object-fit:contain;
    border-radius:10px;
}
.about-img img{
    width:100%;
    height:320px;
    object-fit:cover;
    border-radius:20px;
    display:block;
}