/* BASE RESET & PREMIUM DARK AMBIENT */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
}

:root {
    --bg-gradient: linear-gradient(135deg, #0b0c0e 0%, #121317 50%, #090a0c 100%);
    /* Efek Kaca Super Jernih Khas iOS (IPhone Premium Glass) */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(25px) saturate(200%);
    --text-color: #f8fafc;
}

html {
    background-color: #090a0c;
    scroll-behavior: smooth;
}

body { 
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-color); 
    padding-bottom: 140px; 
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.modal-terbuka {
    overflow: hidden !important;
}

/* HEADER ULTRA-CLEAR GLASSMORPHISM */
header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 18px 20px; 
    background: rgba(15, 16, 20, 0.4); 
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    position: sticky; 
    top: 0; 
    z-index: 100; 
}
.nav-kiri { display: flex; align-items: center; gap: 16px; }
.menu-hamburger { font-size: 24px; cursor: pointer; color: #cbd5e1; padding: 4px; }

.judul-projek { 
    font-size: 20px; 
    font-weight: 800; 
    color: #ffffff; 
    letter-spacing: -0.5px; 
    opacity: 0; 
    transition: opacity 0.4s ease; 
}

.logo-profil { 
    width: 38px; 
    height: 38px; 
    background: var(--glass-bg); 
    border: 1px solid var(--glass-border); 
    color: #fff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 600; 
    font-size: 13px; 
    cursor: pointer; 
    overflow: hidden; 
    backdrop-filter: var(--glass-blur);
}
.logo-profil img { width: 100%; height: 100%; object-fit: cover; }

.container { max-width: 540px; margin: 0 auto; padding: 16px 0; }

/* HERO BANNER GLASSMORPHISM */
.banner-container { padding: 0 16px; margin-bottom: 28px; }
.banner-besar { 
    display: none; 
    width: 100%; 
    min-height: 140px; 
    background: var(--glass-bg); 
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 20px; 
    flex-direction: column; 
    justify-content: center; 
    padding: 24px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}
.banner-besar h2 { font-size: 22px; font-weight: 800; margin-bottom: 6px; color: #ffffff; position: relative; z-index: 2; letter-spacing: -0.3px; }
.banner-besar p { font-size: 13px; color: #94a3b8; line-height: 1.5; position: relative; z-index: 2; }
.img-banner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: none; }
.banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(9,10,12,0.85) 40%, rgba(9,10,12,0.2) 100%); z-index: 1; display: none; }

/* KATEGORI HEADER */
.kategori-section { margin-bottom: 32px; padding: 0 16px; scroll-margin-top: 90px; }
.kategori-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; margin-bottom: 16px; }
.kategori-judul { font-size: 17px; font-weight: 800; color: #ffffff; letter-spacing: -0.3px; text-transform: capitalize; }
.btn-lihat-semua { background: none; border: none; color: #38bdf8; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px; }

/* REBAHAN GRID CARD BARU (2 KOLOM SESUAI SKETSA) */
.list-vertikal { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 14px; 
}

/* KARTU GAYA BLOK BOX IPHONE */
.kartu-projek { 
    display: flex; 
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    text-decoration: none; 
    color: inherit; 
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.kartu-projek:active { 
    transform: scale(0.96); 
    background: rgba(255, 255, 255, 0.08); 
}

/* Bagian Atas Kartu (Visual & Informasi) */
.sisi-kiri-kartu { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 20px 14px 14px 14px; 
    text-align: center;
    gap: 12px;
}

.area-logo { 
    width: 60px; 
    height: 60px; 
    border-radius: 14px; 
    overflow: hidden; 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.area-logo img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease-in; }
.area-logo .emoji-fallback { font-size: 32px; }

.info-kartu { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    width: 100%; 
    overflow: hidden;
}
.nama-projek { font-size: 14.5px; font-weight: 700; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-tag-kartu { font-size: 11.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tombol Aksi di bagian bawah kartu (Kotak bawah di dalam sketsamu) */
.btn-unduh-palsu { 
    width: 100%;
    padding: 10px 0; 
    background: rgba(255, 255, 255, 0.04); 
    border-top: 1px solid var(--glass-border); 
    font-size: 12.5px; 
    font-weight: 700; 
    color: #38bdf8; 
    text-align: center; 
}

/* TOMBOL ALL BULAT MELAYANG (TETAP DI BAWAH) */
.fab-kategori { 
    display: none; 
    position: fixed; 
    bottom: 24px; 
    right: 20px; 
    background: #ffffff; 
    color: #090a0c; 
    width: 54px; 
    height: 54px; 
    border-radius: 50%; 
    font-weight: 800; 
    font-size: 13px; 
    border: none; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    z-index: 120; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
}
.fab-kategori:active { transform: scale(0.9); }

/* SIDEBAR NAV STYLE DYNAMIC */
.sidebar { position: fixed; top: 0; left: -280px; width: 280px; height: 100%; background: rgba(15, 16, 20, 0.6); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border-right: 1px solid var(--glass-border); z-index: 200; transition: left 0.4s cubic-bezier(0.1, 0.9, 0.2, 1); padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: 20px 0 40px rgba(0,0,0,0.5); }
.sidebar.active { left: 0; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--glass-border); padding-bottom: 12px; }
.sidebar-judul { font-size: 13px; font-weight: 700; color: #94a3b8; letter-spacing: 0.5px; text-transform: uppercase; }
.btn-tutup-sidebar { font-size: 18px; cursor: pointer; color: #94a3b8; padding: 4px; }

.sidebar-info-box { display: flex; flex-direction: column; gap: 4px; }
.info-nama-brand { font-size: 19px; font-weight: 800; color: #ffffff; letter-spacing: -0.3px; }
.info-desc { font-size: 12px; color: #64748b; font-weight: 500; }

.sidebar-sub-judul { font-size: 11px; font-weight: 700; color: #475569; letter-spacing: 0.8px; text-transform: uppercase; margin-top: 8px; margin-bottom: 2px; }
.panel-info-sidebar { background: rgba(255,255,255,0.02); border: 1px solid var(--glass-border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.baris-info-item { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.label-info-item { color: #94a3b8; font-weight: 500; }
.value-info-item { color: #ffffff; font-weight: 600; }
.status-badge { background: rgba(16, 185, 129, 0.1); color: #10b981; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; }

.panel-tentang-sidebar { background: rgba(255, 255, 255, 0.01); border: 1px solid var(--glass-border); border-radius: 14px; padding: 14px; color: #cbd5e1; font-size: 12.5px; line-height: 1.6; text-align: justify; }
.btn-request { display: block; text-align: center; background: #ffffff; color: #090a0c; text-decoration: none; padding: 14px; border-radius: 14px; font-size: 13.5px; font-weight: 700; margin-top: auto; box-shadow: 0 4px 15px rgba(255,255,255,0.15); transition: transform 0.2s; }
.btn-request:active { transform: scale(0.98); }

/* POP-UP OVERLAY MODAL */
.popup-kat-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); z-index: 400; display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.popup-kat-overlay.active { opacity: 1; pointer-events: auto; }
.popup-kat-box { background: rgba(20, 21, 26, 0.85); border-top: 1px solid var(--glass-border); border-radius: 28px 28px 0 0; width: 100%; max-height: 75%; padding: 24px 20px; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.1, 0.9, 0.2, 1); overflow-y: auto; }
.popup-kat-overlay.active .popup-kat-box { transform: translateY(0); }
.popup-kat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; position: sticky; top: 0; background: rgba(20, 21, 26, 0.01); padding-bottom: 10px; z-index: 10; }
.popup-kat-title { font-size: 18px; font-weight: 800; color: #fff; }
.popup-kat-close { font-size: 18px; color: #94a3b8; cursor: pointer; padding: 5px; }

.list-link-kat { display: flex; flex-direction: column; gap: 8px; }
.item-link-kat { padding: 14px 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--glass-border); border-radius: 14px; color: #e2e8f0; font-size: 14px; font-weight: 600; text-decoration: none; display: flex; justify-content: space-between; align-items: center; }

/* MODAL PROFIL */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); z-index: 300; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-box { background: rgba(25, 27, 34, 0.85); border: 1px solid var(--glass-border); padding: 28px; width: 85%; max-width: 340px; border-radius: 28px; text-align: center; transform: scale(0.85); transition: transform 0.3s cubic-bezier(0.1, 0.9, 0.2, 1); }
.modal-overlay.active .modal-box { transform: scale(1); }
.modal-avatar { width: 70px; height: 70px; background: var(--glass-bg); border: 1px solid var(--glass-border); font-size: 24px; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px auto; font-weight: 700; overflow: hidden; }
.modal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.modal-box h3 { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.modal-box p { font-size: 13px; color: #94a3b8; margin-bottom: 24px; }
.btn-tutup-modal { background: #ffffff; color: #090a0c; border: none; padding: 12px 24px; border-radius: 14px; font-weight: 700; width: 100%; cursor: pointer; }

/* SKELETON LOADING GAYA GRID */
.loading-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; width: 100%; padding: 0 16px; }
.skeleton-banner { grid-column: span 2; width: 100%; height: 140px; background: rgba(255,255,255,0.02); border-radius: 20px; animation: nyawaKedip 1.5s infinite ease-in-out; }
.skeleton-line { grid-column: span 2; width: 120px; height: 18px; background: rgba(255,255,255,0.02); border-radius: 4px; animation: nyawaKedip 1.5s infinite ease-in-out; }
.skeleton-card { width: 100%; height: 150px; background: rgba(255,255,255,0.02); border-radius: 20px; animation: nyawaKedip 1.5s infinite ease-in-out; }
@keyframes nyawaKedip { 0% { opacity: 0.3; } 50% { opacity: 0.7; } 100% { opacity: 0.3; } }

.screen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 150; display: none; }