/* HendriHub Global Style v3.0
   Fixed: Z-index, Duplicates, Image Animations, Hover Behavior
*/

/* --- 1. RESET & GLOBAL --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

:root {
    --accent-color: #3b82f6; /* Warna utama dinamis */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --text-primary: #f8f8f8;
    --text-secondary: #a0a0a0;
}

body { 
    background-color: var(--bg-primary); 
    color: var(--text-primary); 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden;
}

/* Efek Grain/Noise agar tidak terlalu "Classic/Kosong" */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.02;
    z-index: 9999;
    pointer-events: none;
}

/* Scrollbar Estetik */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { 
    background: var(--bg-secondary); 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: var(--accent-color); 
    opacity: 0.8; 
}

/* --- 2. CURSOR SYSTEM (FIXED) --- */

/* HANYA hide cursor di body untuk desktop, TIDAK di semua elemen */
@media (min-width: 1025px) {
    body { 
        cursor: none !important; 
    }
    
    /* Restore cursor untuk elemen interaktif supaya tetap ada visual feedback */
    a, button, input, textarea, select, [role="button"], .cursor-pointer {
        cursor: none !important; /* Tetap none tapi custom cursor akan muncul */
    }
}

#cursor-dot, #cursor-ring {
    position: fixed;
    top: 0; 
    left: 0;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%); 
    display: none;
    transition: all 0.15s ease-out;
}

#cursor-dot { 
    width: 6px; 
    height: 6px; 
    background: var(--accent-color); 
    border-radius: 50%; 
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#cursor-ring { 
    width: 34px; 
    height: 34px; 
    border: 1.5px solid var(--accent-color); 
    border-radius: 50%; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1025px) { 
    #cursor-dot, #cursor-ring { display: block; } 
}

/* Hover effect untuk cursor */
body.cursor-hover #cursor-ring { 
    width: 60px; 
    height: 60px; 
    background: var(--accent-color); 
    opacity: 0.15;
    border-color: var(--accent-color);
}

body.cursor-hover #cursor-dot { 
    transform: translate(-50%, -50%) scale(0.8); 
    opacity: 0.8; 
}

/* --- 3. BENTO SYSTEM (IMPROVED) --- */

.bento-card { 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 32px; 
    position: relative; 
    overflow: hidden; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    isolation: isolate; 
}

/* Glow Effect - Lebih Subtle (tidak terlalu silau) */
.bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        color-mix(in srgb, var(--accent-color), transparent 92%),
        transparent 40%
    );
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.bento-card:hover { 
    border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
    box-shadow: 0 0 30px -10px color-mix(in srgb, var(--accent-color), transparent 70%);
    transform: translateY(-2px);
}

.bento-card:hover::before { 
    opacity: 1; 
}

/* Konten di dalam bento tetap di depan */
.bento-card > * { 
    position: relative; 
    z-index: 2; 
}

/* --- 4. HOVER BEHAVIOR (FIXED: Individual, bukan barengan) --- */

/* Base transition untuk semua elemen */
.bento-card p, 
.bento-card span, 
.bento-card i, 
.bento-card h3 {
    transition: all 0.3s ease;
}

/* Hover HANYA untuk service cards (yang punya gambar background) */
.bento-card:has(img) p,
.bento-card:has(img) span:not([style*="color: var(--accent-color)"]):not([class*="text-"]) { 
    transition: color 0.3s ease;
}

.bento-card:has(img):hover p,
.bento-card:has(img):hover span:not([style*="color: var(--accent-color)"]):not([class*="text-"]) { 
    color: #ffffff;
}

/* Icon dengan accent color di-hover parent (IMPROVED) */
.bento-card:hover .w-12[style*="var(--accent-color)"],
.bento-card:hover .w-10[style*="var(--accent-color)"],
.bento-card:hover .w-14[style*="var(--accent-color)"],
.bento-card:hover .w-16[style*="var(--accent-color)"] {
    transform: scale(1.05);
}

/* Icon dengan warna brand (WhatsApp, Instagram, dll) TIDAK berubah saat parent hover */
.bento-card [style*="#25D366"],
.bento-card [style*="#E4405F"],
.bento-card [style*="#1877F2"],
.bento-card [style*="#5865F2"],
.bento-card [style*="#1769FF"] {
    /* Tetap pada warna aslinya */
}

/* Individual icon hover (langsung di-hover) - IMPROVED */
.bento-card [style*="#25D366"]:hover i,
.bento-card [style*="#E4405F"]:hover i,
.bento-card [style*="#1877F2"]:hover i,
.bento-card [style*="#5865F2"]:hover i,
.bento-card [style*="#1769FF"]:hover i,
.bento-card [style*="var(--accent-color)"]:hover i {
    transform: scale(1.1);
}

/* Icon circles individual hover (ANY icon) */
.w-12:hover,
.w-10:hover,
.w-14:hover,
.w-16:hover {
    transform: scale(1.1) !important;
    transition: transform 0.2s ease;
}

/* Email button dan Support button ISOLATED dari parent hover */
button.bento-card,
.bento-card button,
.bento-card > a > .bento-card {
    isolation: isolate;
}

/* Support Me card (nested bento) tidak terpengaruh parent */
.bento-card .bento-card {
    isolation: isolate;
}

.bento-card .bento-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* --- 5. NAVIGATION --- */

nav {
    padding: 1.5rem 0.5rem;
    position: sticky;
    top: 0;
    z-index: 2000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(10px);
    background: rgba(10, 10, 10, 0.8);
}

/* --- 6. MENU OVERLAY (FIXED: Z-index lebih tinggi) --- */

#menuOverlay { 
    display: none; 
    position: fixed; 
    inset: 0; 
    background: rgba(10, 10, 10, 0.98); 
    z-index: 9000;
    backdrop-filter: blur(20px); 
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto; /* Bisa scroll kalau kepanjangan */
    padding-top: 6rem; /* Kasih space dari atas */
    padding-bottom: 3rem; /* Kasih space dari bawah */
}

#menuOverlay.active {
    opacity: 1;
}

/* Menu content wrapper positioning */
#menuOverlay > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

/* Menu link size (FIXED: Lebih kecil, tidak nabrak) */
.menu-link { 
    font-size: clamp(1.5rem, 5vw, 2.8rem); /* LEBIH KECIL: 1.75→1.5, 6vw→5vw, 3.5→2.8 */
    font-weight: 900; 
    text-transform: uppercase; 
    font-style: italic; 
    color: transparent; 
    -webkit-text-stroke: 1px rgba(255,255,255,0.2); 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    text-decoration: none;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
    padding: 0.4rem 0; /* 0.5rem → 0.4rem (lebih compact) */
}

.menu-link:hover { 
    color: white; 
    -webkit-text-stroke: 1px white; 
    transform: translateX(10px);
    letter-spacing: 0.02em;
}

/* Menu link responsive */
@media (max-width: 768px) {
    .menu-link {
        font-size: clamp(1.25rem, 7vw, 2rem); /* LEBIH KECIL di mobile */
        padding: 0.3rem 0;
    }
    
    #menuOverlay {
        padding-top: 6rem;
    }
}

@media (max-width: 480px) {
    .menu-link {
        font-size: clamp(1rem, 8vw, 1.75rem); /* LEBIH KECIL lagi di hp kecil */
    }
    
    #menuOverlay {
        padding-top: 5rem;
    }
}
/* --- 7. UTILITIES & ANIMATIONS --- */

.gradient-text { 
    background: linear-gradient(135deg, var(--accent-color) 0%, #8b5cf6 100%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

/* Smooth fade in animation */
@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-flow > * { 
    opacity: 0; 
    animation: fadeInUp 0.8s ease-out forwards; 
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Photo effects untuk biodata.html */
.photo-side {
    position: relative;
}

.gradient-overlay {
    background: linear-gradient(
        to top,
        rgba(10, 10, 10, 0.95) 0%,
        rgba(10, 10, 10, 0.7) 40%,
        transparent 100%
    );
}

/* --- 8. SECTION SPACING (FIXED: Tidak tabrakan) --- */

section {
    scroll-margin-top: 80px; /* Untuk smooth scroll */
}

/* Header section spacing (lebih besar) */
section > div:first-child {
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    section > div:first-child {
        margin-bottom: 3rem;
    }
}

/* --- 9. RESPONSIVE TYPOGRAPHY (IMPROVED) --- */

/* Base font sizes yang lebih baik untuk mobile */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Base font lebih besar di mobile */
    }
    
    /* Heading sizes untuk mobile */
    h1 {
        font-size: clamp(2.5rem, 10vw, 4rem) !important;
    }
    
    h2 {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    }
    
    h3 {
        font-size: clamp(1.2rem, 5vw, 2rem) !important;
    }
    
    /* Text sizes minimal 11px di mobile (tidak terlalu kecil) */
    .text-\[10px\],
    .text-\[9px\],
    .text-\[8px\],
    .text-\[7px\] {
        font-size: 11px !important;
    }
    
    /* Padding dan spacing di mobile */
    .bento-card {
        padding: 1.5rem !important;
    }
    
    /* Navigation mobile */
    nav {
        padding: 1rem 0.5rem;
    }
}

/* Tablet improvements */
@media (min-width: 769px) and (max-width: 1024px) {
    .text-\[10px\] { font-size: 11px !important; }
    .text-\[9px\] { font-size: 10px !important; }
    .text-\[8px\] { font-size: 9px !important; }
}

/* --- 10. COLOR SYSTEM OVERRIDES (100% CSS VARIABLE) --- */

/* Pastikan semua warna biru menggunakan CSS variable */
.text-blue-500, 
.text-blue-600,
.text-blue-400,
.text-blue-300 { 
    color: var(--accent-color) !important; 
}

.bg-blue-500, 
.bg-blue-600,
.bg-blue-400 { 
    background-color: var(--accent-color) !important; 
}

.border-blue-500, 
.border-blue-600,
.border-blue-400 { 
    border-color: var(--accent-color) !important; 
}

/* Hover states */
.hover\:text-blue-500:hover,
.hover\:text-blue-600:hover,
.hover\:text-blue-400:hover { 
    color: var(--accent-color) !important; 
}

.hover\:bg-blue-500:hover,
.hover\:bg-blue-600:hover { 
    background-color: var(--accent-color) !important; 
    opacity: 0.9; 
}

.hover\:border-blue-500:hover,
.hover\:border-blue-600:hover { 
    border-color: var(--accent-color) !important; 
}

/* Group hover states */
.group:hover .group-hover\:text-blue-500,
.group:hover .group-hover\:text-blue-400 {
    color: var(--accent-color) !important;
}

/* Accent color untuk icon colors di service cards */
.text-amber-500 { color: #f59e0b !important; } /* Keep amber for SD */
.text-purple-500, .text-purple-400 { color: #8b5cf6 !important; } /* Keep purple */
.text-red-500 { color: #ef4444 !important; } /* Keep red for UTBK */
.text-green-500, .text-green-400 { color: #10b981 !important; } /* Keep green */
.text-orange-500, .text-orange-400 { color: #f59e0b !important; } /* Keep orange */
.text-pink-500 { color: #ec4899 !important; } /* Keep pink */

/* Tapi border hover tetap pakai accent */
.hover\:border-amber-500:hover,
.hover\:border-blue-500:hover,
.hover\:border-purple-500:hover,
.hover\:border-red-500:hover {
    border-color: var(--accent-color) !important;
}

/* --- 11. SPECIAL COMPONENTS --- */

/* Scroll progress bar */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background-color: var(--accent-color);
    z-index: 9000;
    transition: width 0.1s ease;
}

/* Modal styles (untuk va-service.html dan math-edu.html) */
.modal-content {
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab active state */
.tab-active { 
    color: var(--accent-color) !important; 
    border-bottom: 2px solid var(--accent-color); 
}

/* Workflow step hover */
.workflow-step:hover .step-number { 
    opacity: 1; 
    transform: translateY(-5px); 
}

/* --- 12. IMAGE LOADING ANIMATIONS (FIXED) --- */

/* Fade in hanya untuk content images (bukan logo/icons) */
img.fade-in,
.photo-side img,
.bento-card img {
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Logo dan icons langsung muncul (no fade) */
nav img,
.fa-solid,
.fa-brands {
    opacity: 1 !important;
    animation: none !important;
}

/* Lazy load blur effect (IMPROVED) */
img[loading="lazy"] {
    filter: blur(10px);
    opacity: 0;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

img[loading="lazy"].loaded {
    filter: blur(0);
    opacity: 1;
}

/* Fallback jika JS gagal load class */
img[loading="lazy"]:not(.loaded) {
    animation: lazyFallback 0.5s ease-out 1s forwards;
}

@keyframes lazyFallback {
    to { 
        filter: blur(0); 
        opacity: 1; 
    }
}

/* --- 13. ACCESSIBILITY --- */

/* Focus states untuk keyboard navigation */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Reduced motion untuk users yang prefer */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    #cursor-dot,
    #cursor-ring {
        display: none !important;
    }
}

/* --- 14. PRINT STYLES --- */
@media print {
    #cursor-dot,
    #cursor-ring,
    #scroll-progress,
    #menuOverlay,
    nav button {
        display: none !important;
    }
}