:root {
    --primary: #00f0ff;
    --primary-dark: #00b7cc;
    --bg: #0d0e17;
    --card: rgba(20, 25, 45, 0.7);
    --text: #e0f7ff;
    --text-muted: #a3d9ff;
    --accent: #ff00ea;
    --glow: 0 0 18px rgba(0, 240, 255, 0.55);
    --danger: #ff3366;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
    background:var(--bg);
    color:var(--text);
    font-family:'Roboto Mono', monospace;
    min-height:100vh;
    font-size:15px;
    background-image:
            radial-gradient(circle at 20% 10%, rgba(0,240,255,0.07) 0%, transparent 60%),
            radial-gradient(circle at 80% 90%, rgba(255,0,234,0.05) 0%, transparent 60%);
    background-attachment:fixed;
}
.container { max-width:1000px; margin:0 auto; padding:1rem; }
header { text-align:center; padding:2rem 0 1.5rem; }
h1 {
    font-family:'Orbitron', sans-serif;
    font-size:clamp(2.2rem, 8vw, 3.6rem);
    font-weight:900;
    background:linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:var(--glow);
}
.subtitle { color:var(--text-muted); font-size:clamp(0.9rem, 3.5vw, 1.1rem); letter-spacing:1.5px; }

.tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:0.7rem; margin:1.5rem 0; }
.tab-btn {
    padding:0.8rem 1.4rem;
    background:var(--card);
    border:1px solid rgba(0,240,255,0.25);
    border-radius:999px;
    color:var(--text-muted);
    font-family:'Orbitron', sans-serif;
    font-weight:600;
    font-size:0.9rem;
    cursor:pointer;
    transition:all 0.35s;
    backdrop-filter:blur(10px);
}
.tab-btn:hover, .tab-btn.active {
    background:linear-gradient(135deg, rgba(0,240,255,0.2), rgba(255,0,234,0.12));
    border-color:var(--primary);
    color:var(--primary);
    box-shadow:var(--glow);
    transform:translateY(-2px);
}

.card {
    background:var(--card);
    border-radius:14px;
    padding:1.5rem;
    border:1px solid rgba(0,240,255,0.18);
    backdrop-filter:blur(12px);
    box-shadow:0 8px 32px rgba(0,0,0,0.45);
    margin-bottom:1.5rem;
}

.form-grid { display:grid; grid-template-columns:1fr; gap:1.2rem; }
.form-group { display:flex; flex-direction:column; gap:0.45rem; }
label { color:var(--text-muted); font-size:0.85rem; letter-spacing:0.8px; }
input, button, select {
    padding:0.85rem 1rem;
    border:1px solid rgba(0,240,255,0.3);
    border-radius:10px;
    background:rgba(255,255,255,0.04);
    color:white;
    font-family:inherit;
    font-size:0.95rem;
}
input:focus, select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 14px rgba(0,240,255,0.45); }
button {
    background:linear-gradient(90deg, var(--primary), #0099cc);
    border:none;
    color:black;
    font-weight:bold;
    cursor:pointer;
    margin-top:0.6rem;
    padding:1rem;
    font-size:1rem;
}
button:hover { transform:translateY(-2px); box-shadow:var(--glow); }
.btn-danger {
    background:linear-gradient(90deg, var(--danger), #cc0052);
    color:black;
}
.btn-edit {
    background:linear-gradient(90deg, #ffaa00, #cc8800);
    color:black;
}

#checker-input {
    font-size:clamp(1.4rem, 6vw, 2rem);
    text-align:center;
    letter-spacing:3px;
    width:100%;
    max-width:320px;
    margin:1.5rem auto;
    display:block;
}
#result { margin-top:1.8rem; font-size:clamp(1.1rem, 5vw, 1.5rem); text-align:center; }

.status-aktif { color:#00ff9d; text-shadow:0 0 10px #00ff9d88; }
.status-kadaluarsa { color:var(--danger); text-shadow:0 0 10px #ff336688; }

#tabelProduk { width:100%; border-collapse:collapse; font-size:0.85rem; }
th, td { padding:0.8rem 0.6rem; text-align:left; border-bottom:1px solid rgba(0,240,255,0.12); }
th { background:rgba(0,240,255,0.08); color:var(--primary); font-family:'Orbitron', sans-serif; font-size:0.8rem; }
tr:hover { background:rgba(0,240,255,0.06); }
.action-buttons { display:flex; gap:0.5rem; margin-top:0.5rem; }
.action-buttons button { padding:0.4rem 0.6rem; font-size:0.8rem; margin:0; }

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}
.modal.hidden {
    display: none;
}
.modal-content {
    background: var(--card);
    border: 1px solid rgba(0,240,255,0.25);
    border-radius: 16px;
    padding: 1.8rem;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
}
.modal-content h2 {
    color: var(--primary);
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    margin-bottom: 1.2rem;
    font-size: 1.4rem;
}

@media (max-width:480px) {
    .hide-small { display:none; }
    th, td { padding:0.7rem 0.4rem; }
    .card { padding:1.2rem; }
    .action-buttons { flex-direction:column; }
    .modal-content { padding: 1.4rem; }
}