/* --- TEMEL AYARLAR --- */
/* HTML Background Rengi Kontrolü */
html { 
    background-color: #0f131a; 
    transition: background-color 0.3s; 
}

/* Light Modda HTML Background Rengini Değiştir (Store altı siyah kalmasın diye) */
html:has(body.light-mode) { 
    background-color: #949494; 
}

body { 
    color: #e2e8f0; 
    overflow-x: hidden; 
    transition: background-color 0.3s, color 0.3s; 
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0f131a; }
::-webkit-scrollbar-thumb { background: #4a5568; }
::-webkit-scrollbar-thumb:hover { background: #facc15; }

.text-outline { -webkit-text-stroke: 2px rgba(255, 255, 255, 0.1); color: transparent; }
.text-outline-bold { -webkit-text-stroke: 1px #2d3748; color: transparent; }

.perspective-container { perspective: 1000px; }

#loader { position: fixed; inset: 0; background: #0f131a; z-index: 9999; display: flex; justify-content: center; align-items: center; flex-direction: column; }
#loader-bar { height: 100%; background: #facc15; width: 0%; }

/* Sayfa Geçişleri */
.page-section { display: none; opacity: 0; transition: opacity 0.4s ease-in-out; }
.page-section.active { display: block; opacity: 1; }

.cursor-blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.store-item { opacity: 1; transition: opacity 0.2s ease-in-out; }
.store-item.hidden-item { display: none; }
.store-item.filtering { opacity: 0; }
.filter-btn.active { background-color: white; color: black; border-color: white; }

/* =========================================
   LIGHT MODE OVERRIDES
   ========================================= */

/* 1. Global Arkaplan */
body.light-mode,
body.light-mode #home-page,
body.light-mode #scripts-page,
body.light-mode #scripts-preview,
body.light-mode #contact-section,
body.light-mode .bg-\[\#0f131a\],
body.light-mode .bg-\[\#0c1016\],
body.light-mode .bg-\[\#0a0c10\] {
    background-color: #949494 !important;
    color: #1a202c !important;
}

/* 2. Kart Tasarımları */
body.light-mode .skill-card,
body.light-mode .preview-card,
body.light-mode .store-item,
body.light-mode .project-img-container,
body.light-mode .bg-\[\#151921\],
body.light-mode #modal-box,
body.light-mode .md\:col-span-2.bg-\[\#151921\] {
    background-color: #e5e5e5 !important;
    border-color: #525252 !important;
    color: #000 !important;
}

/* 3. Metin Renkleri */
body.light-mode h1, body.light-mode h2, body.light-mode h3, 
body.light-mode .text-white, body.light-mode .font-block.text-white {
    color: #000000 !important;
}
body.light-mode .text-gray-400, body.light-mode .text-gray-500, body.light-mode .text-gray-600 {
    color: #111111 !important;
}

/* 4. Renk Dönüşümleri & Logo Ayarı */
body.light-mode .text-const-blue { color: #ef4444 !important; }
body.light-mode .bg-const-blue { background-color: #ef4444 !important; }
body.light-mode .border-const-blue { border-color: #ef4444 !important; }
body.light-mode .hover\:border-const-blue:hover { border-color: #ef4444 !important; }
body.light-mode .hover\:text-const-blue:hover { color: #ef4444 !important; }
body.light-mode .bg-const-blue\/10 { background-color: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; }
body.light-mode .bg-const-blue\/20 { background-color: rgba(239, 68, 68, 0.2) !important; }

/* ÖZEL: HEADER LOGOSU İÇİN BIM YAZISINI KIRMIZI YAP (Light Modda) */
body.light-mode #navbar .text-const-yellow {
    color: #ef4444 !important;
}

/* 5. İletişim Formu */
body.light-mode .contact-form-gsap .bg-\[\#050505\],
body.light-mode .contact-form-gsap .bg-\[\#1a1a1a\] {
    background-color: #e5e5e5 !important;
    border-color: #404040 !important;
    color: #000 !important;
}
body.light-mode input, body.light-mode textarea {
    color: #000000 !important; border-bottom-color: #000000 !important;
}
body.light-mode input::placeholder, body.light-mode textarea::placeholder {
    color: #444 !important;
}

/* 6. Modal & Footer Çizgileri */
body.light-mode .bg-\[\#1a1a1a\] {
    background-color: #d4d4d4 !important; color: #000 !important; border-bottom-color: #a3a3a3 !important;
}
body.light-mode .border-gray-800, body.light-mode .border-gray-700 {
    border-color: #d4d4d4 !important;
}

/* 7. Navbar */
body.light-mode #navbar {
    background-color: #949494 !important; color: #000 !important; mix-blend-mode: normal !important; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
body.light-mode .text-outline { -webkit-text-stroke: 2px rgba(0, 0, 0, 0.3); }
body.light-mode .text-outline-bold { -webkit-text-stroke: 1px #000; }
body.light-mode #loader { background-color: #949494; }