/* =============================================== */
/* CYBER-NEON 2.0: GLOBAL STYLES & VARIABLES      */
/* =============================================== */

:root {
    /* Warna Neon Utama */
    --neon-cyan: #00eaff;
    --neon-magenta: #ff0077;
    --neon-green: #39ff14;
    --neon-yellow: #fff200;

    /* Warna Background & Glassmorphism */
    --bg-dark: #050510; 
    --card-bg: rgba(255, 255, 255, 0.04); /* Latar Glassmorphism */
    --glass-border: rgba(255, 255, 255, 0.1);
    --blur-intensity: 10px;

    /* Font Futuristik */
    --primary-font: 'Audiowide', 'Poppins', sans-serif;
    --monospace-font: 'Consolas', 'Courier New', monospace;
}

/* 1. Body & Latar Belakang Bergerak (Nuansa Hidup) */
body {
    background-color: var(--bg-dark);
    font-family: var(--primary-font);
    color: #f0f0f0;
    /* Latar Belakang Grid Bergerak Lambat */
    background-image: linear-gradient(to right, var(--neon-cyan) 1px, transparent 1px), 
                      linear-gradient(to bottom, var(--neon-cyan) 1px, transparent 1px);
    background-size: 50px 50px;
    background-blend-mode: soft-light;
    animation: background-move 120s linear infinite; /* Animasi super lambat */
}
/* =============================================== */
/* API CARD LAYOUT & RESPONSIVITAS                 */
/* =============================================== */

/* Pastikan elemen grid utama memiliki tinggi penuh */

.no-scroll { overflow: hidden; }

@keyframes background-move {
    from { background-position: 0 0; }
    to { background-position: 100% 100%; }
}

/* Loading Screen */
#loadingScreen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-dark);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.loading-bar {
    width: 200px;
    height: 5px;
    background: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
    margin-bottom: 20px;
    animation: load-pulse 1.5s infinite alternate;
}
.glitch-text {
    color: var(--neon-magenta);
    text-shadow: 0 0 5px var(--neon-magenta);
    font-family: var(--primary-font);
}
@keyframes load-pulse {
    0% { width: 50px; opacity: 0.5; }
    100% { width: 200px; opacity: 1; }
}


/* 2. Scrollbar Futuristik */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { 
    background: var(--neon-magenta); 
    border-radius: 4px;
    box-shadow: 0 0 5px var(--neon-magenta);
}

/* 3. Animasi Glow dan Flicker */
@keyframes neon-glow-pulse {
    0% { filter: drop-shadow(0 0 5px rgba(0, 234, 255, 0.5)); }
    50% { filter: drop-shadow(0 0 15px var(--neon-cyan)); }
    100% { filter: drop-shadow(0 0 5px rgba(0, 234, 255, 0.5)); }
}
@keyframes flicker-heavy {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 24%, 55% { opacity: 0.9; }
}

/* =============================================== */
/* HEADER & NAVIGATION BAR (NAVBAR)                */
/* =============================================== */

.navbar {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(0, 234, 255, 0.3);
}

#header, #name {
    font-family: var(--primary-font);
    color: var(--neon-cyan);
    text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
    animation: neon-glow-pulse 3s infinite alternate;
}

#versionHeader {
    color: var(--neon-green);
    text-shadow: 0 0 5px var(--neon-green);
}
#uptime-text {
    font-family: var(--monospace-font);
    font-weight: bold;
    color: var(--neon-cyan) !important;
    animation: neon-glow-pulse 2s infinite alternate, flicker-heavy 10s infinite;
}

/* =============================================== */
/* STICKY CATEGORY HEADER (NAVIGASI)               */
/* =============================================== */

.category-section h4 {
    /* Sticky Header Kategori */
    position: sticky;
    top: 60px; /* Di bawah navbar */
    z-index: 10;
    padding: 10px 0;
    background: var(--bg-dark);
    border-bottom: 2px solid var(--neon-magenta) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s;
}

/* =============================================== */
/* STATS CARD (GLASSMORHISM & PULSING)             */
/* =============================================== */

.stat-card {
    /* Glassmorphism */
    background: var(--card-bg) !important;
    backdrop-filter: blur(var(--blur-intensity));
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: 15px;
}

.stat-card h1, .stat-card strong {
    color: var(--neon-yellow);
    text-shadow: 0 0 5px var(--neon-yellow);
    animation: neon-glow-pulse 4s infinite alternate;
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--neon-magenta);
    box-shadow: 0 0 20px rgba(255, 0, 119, 0.5);
}

/* =============================================== */
/* API CARD & METHOD TAGS                          */
/* =============================================== */
/* API Item (Kolom Grid) */
/* =============================================== */
/* API CARD LAYOUT & RESPONSIVITAS                 */
/* =============================================== */

/* 1. Atur elemen ROW sebagai Flex Container */
/* Ini penting agar kolom-kolom (api-item) di dalamnya selalu sejajar */
.row {
    display: flex; 
    flex-wrap: wrap; 
    /* Gunakan kelas Bootstrap 'g-4' atau 'gy-4' di index.html
       untuk mengatur jarak antar kolom dan baris. */
}

/* 2. API Item (Kolom Grid: col-12 col-sm-6 col-lg-4) */
/* =============================================== */
/* API CATALOGUE CARD (CRYSTAL LENS)               */
/* =============================================== */

.api-item {
    /* Gaya API Card yang sudah ada... */
    /* Pastikan ada margin/padding agar tidak terlalu rapat antar card (Sudah ditangani oleh g-3 di index.html) */
    /* Jika ingin API Card sedikit lebih besar dan rapi: */
    width: 100%; 
    height: 100%; /* Penting agar semua kartu di satu baris tingginya sama */
    display: flex; /* Memastikan konten di dalamnya terstruktur dengan baik */
    flex-direction: column;
}

/* Pastikan ada jarak yang cukup antara navbar dan konten utama */
main {
    padding-top: 80px; /* Sesuaikan jika navbar terlalu tinggi */
}

/* 3. API Card - Kunci untuk Tata Letak Internal */
.api-card {
    /* Ambil seluruh tinggi dari parent (.api-item) */
    width: 100%;
    height: 100%; 
    
    /* Gunakan Flexbox untuk memisahkan konten dan tombol */
    display: flex;
    flex-direction: column;
    
    background: rgba(30,30,30,0.8);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    
    padding: 15px; 
    transition: transform 0.3s ease;
}

/* 4. Konten Utama Card (judul, deskripsi) */
/* Ini akan mengambil semua ruang vertikal yang tersisa, 
   mendorong tombol ke bagian bawah card. */
.api-card > div:first-child {
    flex-grow: 1; 
    margin-bottom: 10px; /* Beri jarak antara deskripsi dan footer */
}

/* 5. Deskripsi API - Batasi Panjang */
.api-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Batasi maksimal 3 baris */
    -webkit-box-orient: vertical;
}

/* 6. Footer Card (Tombol) - Pastikan konsisten di bawah */
.api-card-footer {
    padding-top: 10px; /* Jarak dari deskripsi */
}

/* 7. Perbaikan Mobile (jika Anda memiliki media query sebelumnya) */
@media (max-width: 575.98px) {
    /* Hapus properti .api-item yang bertentangan dengan Bootstrap di mobile */
    .api-item {
        /* Hapus width: 100%; atau properti lain yang memaksa lebar, 
           Biarkan Bootstrap col-12 yang mengatur di mobile. */
    }
}
/* =============================================== */
/* LOG STREAMING & HISTORY (TERMINAL AKTIF)        */
/* =============================================== */

/* Ubah .log-stream-container dan .history-container */
.log-stream-container, .history-container {
    max-height: 350px; /* Atur tinggi maksimum agar tidak terlalu panjang */
    overflow-y: auto;  /* Tambahkan scroll bar vertikal jika konten melebihi max-height */
    padding-right: 10px; /* Beri sedikit padding agar scrollbar tidak menempel */
}

/* Gaya item log */
.request-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-family: var(--monospace-font);
    border: 1px solid var(--glass-border);
    transition: background-color 0.3s ease;
}

/* KETERANGAN STATUS LOG */
/* Pastikan warna teks status code memiliki neon glow */
.status-ok .status-code { color: var(--neon-green); text-shadow: 0 0 5px var(--neon-green); }
.status-warn .status-code { color: var(--neon-yellow); text-shadow: 0 0 5px var(--neon-yellow); }
.status-err .status-code { color: var(--neon-magenta); text-shadow: 0 0 5px var(--neon-magenta); }

/* Perbaikan untuk HTTP Method tag (berikan latar belakang) */
.http-method {
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 3px;
    margin-right: 8px;
    font-size: 0.8rem;
    min-width: 60px; /* Agar semua method punya lebar yang kurang lebih sama */
    display: inline-block;
    text-align: center;
}

.method-GET { background-color: rgba(57, 255, 20, 0.2); color: var(--neon-green); border: 1px solid var(--neon-green); }
.method-POST { background-color: rgba(255, 0, 119, 0.2); color: var(--neon-magenta); border: 1px solid var(--neon-magenta); }
.method-PUT, .method-PATCH { background-color: rgba(0, 234, 255, 0.2); color: var(--neon-cyan); border: 1px solid var(--neon-cyan); }
.method-DELETE { background-color: rgba(255, 242, 0, 0.2); color: var(--neon-yellow); border: 1px solid var(--neon-yellow); }

/* Perbaikan untuk item history agar lebih rapih */
.history-item {
    padding: 8px 0;
    border-bottom: 1px dashed var(--glass-border);
}
.history-item:last-child {
    border-bottom: none;
}

/* Optional: Perbaikan Scrollbar (Gaya Neon) */
.log-stream-container::-webkit-scrollbar,
.history-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.log-stream-container::-webkit-scrollbar-thumb,
.history-container::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 3px;
}
.log-stream-container::-webkit-scrollbar-track,
.history-container::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
.api-path {
    font-family: var(--monospace-font);
    font-size: 1rem;
    color: #ffffff;
    word-break: break-all;
}

/* =============================================== */
/* UPGRADE BUTTON (LIQUID NEON)                    */
/* =============================================== */

.btn-futuristic {
    position: relative;
    padding: 8px 18px; 
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    overflow: hidden;
    transition: all 0.4s ease;
    background: transparent;
    color: var(--neon-cyan);
    border: 2px solid var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 234, 255, 0.5);
    z-index: 1;
    /* GAYA SELECT FILTER BARU */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2300eaff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.btn-futuristic:hover {
    color: var(--bg-dark);
    box-shadow: 0 0 25px var(--neon-cyan), 0 0 50px var(--neon-cyan);
}

.btn-futuristic::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, var(--neon-cyan) 30%, var(--neon-magenta));
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-futuristic:hover::before { left: 0; }

/* =============================================== */
/* LOG STREAMING & HISTORY                         */
/* =============================================== */

.request-item {
    padding: 8px 10px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--monospace-font);
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid;
    transition: all 0.1s;
}
.request-item:hover {
    background: rgba(0, 234, 255, 0.1);
}
.status-ok { border-left-color: var(--neon-green) !important; color: var(--neon-green) !important; }
.status-warn { border-left-color: var(--neon-cyan) !important; color: var(--neon-cyan) !important; }
.status-err { border-left-color: var(--neon-magenta) !important; color: var(--neon-magenta) !important; }

.request-item strong.status-code {
    text-shadow: 0 0 8px currentColor;
    animation: flicker-heavy 10s infinite;
}

/* =============================================== */
/* MODAL API RESPONSE & SIDEBAR                    */
/* =============================================== */

.modal-content {
    background: rgba(10, 10, 30, 0.9) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--neon-cyan);
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0, 234, 255, 0.5), 0 0 5px var(--neon-magenta);
}

.offcanvas {
    background: rgba(10, 10, 30, 0.95) !important; 
    backdrop-filter: blur(10px);
    border-right: 2px solid var(--neon-cyan);
}

/* =============================================== */
/* MEDIA QUERIES UNTUK RESPONSIVITAS MOBILE        */
/* =============================================== */

@media (max-width: 992px) {
    main.pt-5 {
        padding-top: 5rem !important;
    }
    #name {
        font-size: 2.5rem !important;
        text-align: center;
    }
    .stat-card:hover {
        transform: none;
    }
    .api-item {
        width: 100%; 
    }
    /* Kategori Sticky di mobile akan berada di bawah search */
    .category-section h4 {
        top: 100px; /* Jarak yang lebih besar dari atas */
    }
    .col-lg-4 {
        margin-top: 30px; 
    }
    /* Sembunyikan Uptime yang terlalu panjang di mobile */
    .d-none.d-md-block {
        display: none !important;
    }
    .modal-dialog {
        margin: 0;
        min-height: 100vh;
    }
    .modal-content {
        height: 100vh;
        border-radius: 0;
    }
    .offcanvas-start {
        width: 80% !important; 
    }
}
.category-link {
    display: block;
    padding: 12px 15px;
    margin-bottom: 5px;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    font-family: var(--primary-font);
    font-size: 0.9rem;
}
.category-link:hover {
    background: rgba(0, 234, 255, 0.1);
    color: var(--neon-cyan);
    border-left-color: var(--neon-cyan);
    transform: translateX(5px);
}
.category-link.active {
    background: rgba(255, 0, 119, 0.15); 
    color: var(--neon-magenta);
    border-left-color: var(--neon-magenta);
    font-weight: bold;
    box-shadow: 0 0 8px rgba(255, 0, 119, 0.3);
}

/* =============================================== */
/* MEDIA QUERIES UNTUK RESPONSIVITAS MOBILE        */
/* =============================================== */

@media (max-width: 992px) {
    /* 1. Tata Letak Utama (Main Content) */
    main.pt-5 {
        padding-top: 5rem !important;
    }
    
    /* 2. Judul dan Font */
    #name {
        font-size: 2.5rem !important;
        text-align: center;
    }
    #description {
        text-align: center;
    }
    .display-4 {
        font-size: 2rem;
    }
    
    /* 3. Stat Card (Diatur Ulang) */
    .stat-card {
        margin-bottom: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    }
    .stat-card:hover {
        transform: none;
    }
    .stat-card h1 {
        font-size: 1.8rem;
    }

    /* 4. API Card (Lebar Penuh) */
    .api-item {
        width: 100%; 
    }
    .col-lg-4, .col-lg-8 {
        padding-left: var(--bs-gutter-x, 0.75rem);
        padding-right: var(--bs-gutter-x, 0.75rem);
    }
    
    /* 5. Metode HTTP dan Endpoint (Penyesuaian Font) */
    .http-method {
        font-size: 0.75rem;
        padding: 3px 6px;
    }
    .api-path {
        font-size: 0.9rem;
    }
    
    /* 6. Kolom Log Stream dan History */
    .col-lg-4 {
        margin-top: 30px; 
    }
    #streamContainer, #requestHistoryList {
        max-height: 250px;
    }

    /* 7. Navbar dan Hamburger Button */
    .navbar-brand {
        font-size: 1.2rem;
    }
    /* Sembunyikan Uptime yang terlalu panjang di mobile */
    .d-none.d-md-block {
        display: none !important;
    }
    
    /* 8. Modal (Ukuran Penuh Layar) */
    .modal-dialog {
        margin: 0;
        min-height: 100vh;
    }
    .modal-content {
        height: 100vh;
        border-radius: 0;
    }
    #apiResponseContent, #apiCodeExample {
        max-height: 300px;
    }
    
    /* 9. Sidebar (Offcanvas) */
    .offcanvas-start {
        width: 80% !important; 
    }
}