/* --- 1. CORE (TEMEL AYARLAR) --- */
:root {
    --goji-neon: #00ff87;
    --goji-dark: #050608;
}

html {
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

body {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--goji-dark);
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
    font-family: inherit, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* Emoji fallback for all elements */
* {
    font-family: inherit, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
}

::-webkit-scrollbar { display: none; }

.font-title { letter-spacing: -0.5px; }
.whitespace-nowrap { white-space: nowrap !important; }
img { display: block; max-width: 100%; height: auto; }
::placeholder { color: #6b7280; opacity: 1; }

/* --- 2. UTILITY CLASSES --- */
.mask-gradient {
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.fade-text { 
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; 
    opacity: 1; 
    transform: translateY(0); 
    display: inline-block;
}

.hidden-fade { 
    opacity: 0; 
    transform: translateY(10px); 
}

/* --- 3. ANIMASYONLAR --- */
@keyframes neon-pulse {
    0%, 100% { text-shadow: 0 0 5px rgba(0,255,135,0.6); color: #fff; }
    50% { text-shadow: 0 0 20px rgba(0,255,135,1); color: #00ff87; }
}
.neon-text { animation: neon-pulse 2s infinite alternate ease-in-out; }

@keyframes float-gentle {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}
.animate-bounce-gentle { animation: float-gentle 2s cubic-bezier(0.16,1,0.3,1) infinite; }

@media (prefers-reduced-motion: reduce) {
    .neon-text { animation: none; color: #00ff87; }
    .animate-bounce-gentle { animation: none; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- 4. FORM & UI ELEMENTS --- */
.contact-option { border: 1px solid rgba(255, 255, 255, 0.15); color: #9ca3af; transition: all 0.2s ease; }
.contact-option:hover { background-color: rgba(255, 255, 255, 0.05); }
.contact-option.active { border-color: #00ff87 !important; color: white !important; background-color: rgba(0, 255, 135, 0.05) !important; box-shadow: 0 0 15px rgba(0, 255, 135, 0.1); }
.contact-option.active svg { color: #00ff87 !important; }

.app-glass { background: linear-gradient(145deg, rgba(20, 30, 25, 0.5) 0%, rgba(10, 12, 14, 0.8) 100%); backdrop-filter: blur(30px); border: 1px solid rgba(0, 255, 135, 0.12); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9); }
.app-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 60%; background: radial-gradient(circle, rgba(0, 255, 135, 0.1) 0%, transparent 70%); filter: blur(80px); z-index: -1; }

/* --- 5. LIVECHAT Z-INDEX AYARI (GİZLEME KALDIRILDI) --- */
/* Chat görünür olsun ama Modal'ın (z-max) altında kalsın */
#chat-widget-container, #chat-widget-minimized, [data-testid="widget-is-minimized"] {
    display: block !important; 
    visibility: visible !important; 
    opacity: 1 !important; 
    pointer-events: auto !important;
    z-index: 2147483640 !important; /* Modal'dan (2147483647) biraz düşük */
}

/* Modal açıldığında JS ile gizliyoruz zaten ama CSS ile de garantiye alalım */
body.modal-open #chat-widget-container {
    display: none !important;
}