/* styles/main.css (VERSI FINAL - Profil Baru & Navigasi Kecil) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
    --color-black-diamond: #0a0a0a; /* Fallback */
    --color-dark-gray: #1a1a1a;
    --color-accent: #00bcd4; /* Cyan Neon */
    --color-text-light: #e0e0e0;
    --color-shadow: rgba(0, 0, 0, 0.5);
    --color-gradient-start: #0f0a28; /* Deep Blue/Purple */
    --color-gradient-mid: #1a1a40;   /* Darker Blue/Purple */
    --color-gradient-end: #000000;   /* Black */
}

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

body {
    font-family: 'Poppins', sans-serif;
    color: var(--color-text-light);
    line-height: 1.6;
    background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-mid) 50%, var(--color-gradient-end) 100%);
    min-height: 100vh;
  padding-top: 0px; /* Jarak untuk navbar fixed */
}

/* --- Gaya Card Umum (Glassmorphism) --- */
.container-card {
    background-color: rgba(10, 10, 20, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 188, 212, 0.3);
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.4);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}
.container-card:hover { transform: translateY(-5px); box-shadow: 0 10px 40px rgba(0, 188, 212, 0.3); }

/* --- Input dan Tombol --- */
input[type="text"], input[type="password"], input[type="number"], textarea, select {
    width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid #333; border-radius: 6px; background-color: #2c2c2c; color: var(--color-text-light); transition: border-color 0.3s; resize: vertical; font-family: inherit;
}
input:focus, textarea:focus, select:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 8px rgba(0, 188, 212, 0.5); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300bcd4' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.btn-primary { background-color: var(--color-accent); color: var(--color-black-diamond); padding: 12px 25px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background-color 0.3s, transform 0.2s; text-transform: uppercase; }
.btn-primary:hover { background-color: #00e5ff; transform: scale(1.05); }

/* --- Gaya Navbar & Hamburger Menu (FIXED) --- */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background-color: rgba(17, 17, 17, 0.9); backdrop-filter: blur(5px); border-bottom: 1px solid #2a2a2a; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }
.hamburger-menu { cursor: pointer; padding: 10px; display: block; z-index: 101; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--color-accent); transition: all 0.3s ease-in-out; }
.nav-links { position: fixed; right: 0; top: 0; width: 250px; height: 100vh; background-color: rgba(30, 30, 30, 0.98); backdrop-filter: blur(10px); box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5); transition: transform 0.3s ease-in-out; transform: translateX(100%); list-style: none; padding: 80px 0 20px 0; z-index: 99; display: flex; flex-direction: column; }
.nav-links.active { transform: translateX(0); }
.nav-links li { border-bottom: 1px solid #2f2f2f; }
.nav-links li:first-child { padding: 15px 30px; color: #fff; background-color: #333; font-weight: 600; border-bottom: 2px solid var(--color-accent); margin-bottom: 10px; }
.nav-links a { display: block; padding: 15px 30px; color: var(--color-text-light); text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.nav-links a:hover { background-color: var(--color-accent); color: var(--color-black-diamond); }
.hamburger-menu.active .bar:nth-child(2) { opacity: 0; }
.hamburger-menu.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-menu.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* --- Gaya Dashboard Spesifik --- */

/* Profile Section (RE-ADDED) */
.profile-section {
    display: flex;
    align-items: center;
    background-color: rgba(30, 30, 50, 0.8);
    padding: 25px;
    border-radius: 12px;
    margin: 0px 50px 40px 50px; /* Margin atas dikurangi */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 5px 25px rgba(0,0,0,0.4);
}
.profile-pic { width: 70px; height: 70px; border-radius: 50%; background-color: #444; display: flex; justify-content: center; align-items: center; margin-right: 20px; overflow: hidden; flex-shrink: 0; }
.profile-pic i { font-size: 3em; color: #ccc; }
.profile-info h3 { margin: 0; font-size: 1.4em; color: var(--color-text-light); word-break: break-all; }
.profile-info p { margin: 5px 0 0 0; font-size: 1.6em; font-weight: bold; color: #4CAF50; }

/* Navigation Section (GRID LAYOUT - SMALLER BOXES) */
.navigation-section {
    display: grid;
    /* Membuat kolom otomatis, minimal 150px, maks 1fr */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Ukuran MIN diperkecil */
    gap: 15px; /* Jarak antar kotak dikurangi */
    padding: 0 50px;
    max-width: 1200px;
    margin: 40px auto;
}
.nav-box {
    background-color: var(--color-dark-gray);
    padding: 20px 15px; /* Padding vertikal dikurangi */
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text-light);
    border: 1px solid transparent;
}
.nav-box:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 188, 212, 0.3); border-color: var(--color-accent); }
.nav-box i { font-size: 2em; /* Ikon diperkecil */ color: var(--color-accent); margin-bottom: 8px; }
.nav-box h4 { margin: 0; font-size: 0.9em; /* Judul diperkecil */ }

/* Product Grid (Tetap Sama) */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 30px; }
.product-card { padding: 20px; border-radius: 8px; background-color: #252525; transition: all 0.3s ease; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px var(--color-shadow); border: 1px solid var(--color-accent); }

/* Modal Styling (Tetap Sama) */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); }
.modal-content { margin: 10% auto; padding: 30px; width: 80%; max-width: 500px; position: relative; }
.success-modal-content { margin: 15% auto; padding: 30px; width: 80%; max-width: 450px; text-align: center; position: relative; }
.close-btn { position: absolute; top: 10px; right: 20px; font-size: 30px; font-weight: bold; cursor: pointer; color: #ff0000; }
.success-modal-content .close-btn { color: #aaa; }


/* --- Gaya Admin Spesifik (Tetap Sama) --- */
.admin-header { background-color: #3a0000; padding: 20px; text-align: center; border-bottom: 3px solid #ff0000; }
.admin-container { padding: 50px; max-width: 1200px; margin: 0 auto; }
.data-section { margin-bottom: 40px; }
.data-section h2 { border-bottom: 2px solid var(--color-accent); padding-bottom: 10px; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; background-color: rgba(26, 26, 26, 0.8); margin-top: 20px; }
th, td { border: 1px solid #333; padding: 12px; text-align: left; }
th { background-color: var(--color-dark-gray); color: var(--color-accent); }
.form-add-saldo { display: flex; gap: 20px; align-items: flex-end; }
.form-add-saldo > div { flex: 1; }


/* Footer (Tetap Sama) */
.footer { text-align: center; padding: 20px; font-size: 0.8em; color: #555; margin-top: 50px; border-top: 1px solid #1f1f1f; }

/* Responsif (Termasuk Profil) */
@media (max-width: 768px) {
    body { padding-top: 50px; }
    .navbar { padding: 10px 20px; }
    .profile-section { flex-direction: column; align-items: flex-start; margin: 20px; }
    .profile-pic { margin-bottom: 15px; }
    .navigation-section { padding: 0 20px; margin: 30px auto; }
    .admin-container { padding: 20px; }
    .form-add-saldo { flex-direction: column; align-items: stretch; }
    .container-card { padding: 20px; }
    .modal-content, .success-modal-content { width: 90%; margin: 15% auto; }
}