/*header.css*/
/* 1. FONT YÜKLENENE KADAR SAYFAYI GÖSTERME (OPSİYONEL AMA ETKİLİ) */
html {
    visibility: hidden;
}

html {
    background-color: #f4f7f6;
}

/* Aydınlık mod varsayılanı */
body.dark-mode {
    background: #18181b !important;
}

/* Font yüklendiğinde veya hata oluştuğunda sayfayı göster */
html.fonts-loaded {
    visibility: visible;
}

/* 2. GLOBAL STİLLER */
body {
    font-family: 'Inter', 'Segoe UI Variable', 'Segoe UI', sans-serif !important;
    letter-spacing: -0.011em !important;
    font-weight: 450 !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background-color: #f4f7f6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

:root {
    --main-grad: linear-gradient(135deg, #7209b7 0%, #4361ee 100%);
    --font-main: 'Outfit', sans-serif;
}

body {
    font-family: var(--font-main);
}

/* Ana Kapsayıcıyı jilet gibi hizalar */
.header-logo-text {
    display: flex !important;
    align-items: center;
    /* Dikeyde her şeyi milimetrik merkeze çeker */
    justify-content: flex-start;
    gap: 0;
    /* Aradaki boşluğu margin-right ile yönettiğimiz için 0 kalsın */
    text-decoration: none !important;
    line-height: normal;
    /* Tarayıcı varsayılanını sıfırla */
}

/* Dıştaki Beyaz Kutu (HEMEN) */
.logo-accent-header {
    font-family: 'Outfit', sans-serif !important;
    background: #fff !important;
    padding: 6px 14px;
    border-radius: 12px;
    margin-right: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

    /* İçindeki HEMEN yazısını merkeze çivile */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* Kutunun yüksekliğini sabitleyerek yanındakiyle eşitleyebiliriz */
    height: 42px;
    box-sizing: border-box;
}

/* İçteki Gradyan Yazı (HEMEN) */
.gradient-text {
    font-weight: 900 !important;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #7209b7, #4361ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    /* Flex içinde olduğu için block iyidir */
    line-height: 1;
}

/* İNDİRSENE yazısı - OPTİK DENGELEME */
.logo-flow-text {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 900 !important;
    display: inline-block;

    font-size: 1.45rem;
    letter-spacing: 0.5px;

    /* Noktaları kurtaran güvenli alan */
    line-height: 1.4;

    vertical-align: middle;
    transform: translateY(1px);
    /* 3px fazlaydı, 1px ile yukarı çektik */

    background: linear-gradient(to right, #ffffff 25%, #7209b7 40%, #4361ee 60%, #ffffff 75%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shineAnim 3.5s linear infinite;
}

/* Animasyon */
@keyframes shineAnim {
    to {
        background-position: 200% center;
    }
}

/* --- NAVBAR VE ÇİZGİLER (ORİJİNAL) --- */
.tech-header {
    position: relative;
    width: 100%;
    z-index: 9999;
    padding: 25px 0;
}

.navbar {
    background: var(--main-grad) !important;
    border-radius: 40px !important;
    box-shadow: 0 15px 40px rgba(67, 97, 238, 0.3);
    padding: 12px 30px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative;
}

@media (min-width: 992px) {
    .navbar {
        max-width: 1100px;
        margin: 0 auto !important;
        flex-direction: column !important;
        gap: 15px;
    }

    .navbar::after {
        content: '';
        width: 80%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent);
        position: absolute;
        top: 58px;
        left: 10%;
    }

    .navbar-nav {
        flex-direction: row !important;
        gap: 20px;
    }
}

.nav-link {
    color: #fff !important;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 5px 0 !important;
    transition: 0.3s;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #fff;
    transition: width 0.3s ease;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.nav-link:hover::after {
    width: 100%;
}

/* Oyun */
.i-oyun {
    color: #ffca28 !important;
}

/* Sarı Oyun */
.i-prog {
    color: #2ec4b6 !important;
}

/* Turkuaz Program */
.i-sist {
    color: #ff5722 !important;
}

/* Turuncu Sistem */
.i-andr {
    color: #a2d149 !important;
}

/* Yeşil Android */

/* --- MOBİL ÖZEL  --- */
#customToggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
}

@media (max-width: 991px) {
    #navbarCollapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(15px);
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #navbarCollapse.show {
        display: flex !important;
    }

    .navbar-nav {
        background: var(--main-grad);
        padding: 40px !important;
        border-radius: 40px !important;
        width: 85% !important;
        /* Genişliği kilitle */
        flex-direction: column !important;
        gap: 15px;
    }

    /* Dark Mode Nav Ayarı - BÜYÜKLÜK BURADA EŞİTLENİYOR */
    body.dark-mode .navbar-nav {
        background: #27272a !important;
        /* Sadece renk değişir */
        width: 85% !important;
        /* Gündüzle aynı genişlik */
        padding: 40px !important;
        /* Gündüzle aynı padding */
        border-radius: 40px !important;
        /* Gündüzle aynı ovallik */
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Küçük ve Oynak Mobil Arama */
.mobile-search-item {
    margin-top: 15px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}

.m-search-form {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 3px;
    max-width: 200px;
    margin: 0 auto;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.m-search-form:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.m-search-form input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 6px 10px;
    color: #fff;
    font-size: 12px;
    outline: none;
    width: 50px;
}

.m-search-form button {
    background: #fff;
    color: #4361ee;
    border: none;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    transition: 0.2s;
}

.m-search-form button:active {
    transform: scale(0.9);
}


/* --- GECE GÜNDÜZ BUTON TASARIMI --- */
.theme-toggle-btn {
    position: absolute;
    right: 15px;
    /* Arama butonuyla aynı hiza */
    top: 65px;
    /* Arama butonunun hemen altı (Mesafeyi buradan ayarlayabilirsin) */
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.theme-toggle-btn:hover {
    background: #fff;
    color: #4361ee;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(67, 97, 238, 0.3);
}

/* İkonun tatlı dönme animasyonu */
.theme-icon {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- APPLE STYLE SWITCH (RENKLER SABİTLENDİ) --- */
.apple-switch-wrapper {
    position: absolute;
    right: 50px;
    /* Arama butonuna göre milimetrik hizalandı */
    top: 65px;
    z-index: 1000;
}

.apple-switch-label {
    width: 65px;
    height: 32px;
    /* !important ile Dark Mode'un bu şeffaflığı bozmasını engelledik */
    background: rgba(255, 255, 255, 0.15) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    /* Çizginin gece de beyaz kalması için kilitledik */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* İçindeki İkonlar */
.apple-switch-label i {
    font-size: 14px;
    z-index: 1;
    transition: 0.4s;
}

.icon-sun {
    color: #ffca28 !important;
}

/* Gündüz ikonu hep sarı */
.icon-moon {
    color: #cbd5e1 !important;
    opacity: 0.5;
}

/* Kayan Top (Ball) */
.apple-switch-ball {
    position: absolute;
    left: 4px;
    width: 24px;
    height: 24px;
    background: #fff !important;
    /* Top başlangıçta hep beyaz */
    border-radius: 50%;
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* --- SADECE AKTİF (DARK) DURUMDAKİ DEĞİŞİM --- */
.apple-switch-input:checked+.apple-switch-label {
    background: #27272a !important;
    /* Aktifken Apple koyu grisi */
    border-color: #4361ee !important;
}

.apple-switch-input:checked+.apple-switch-label .apple-switch-ball {
    transform: translateX(33px);
    /* Aktifken senin o efsane gradyanın */
    background: linear-gradient(135deg, #7209b7, #4361ee) !important;
}

.apple-switch-input:checked+.apple-switch-label .icon-sun {
    opacity: 0.5;
    color: #fff !important;
}

.apple-switch-input:checked+.apple-switch-label .icon-moon {
    opacity: 1;
    color: #fff !important;
}

/* Gizli Checkbox */
.apple-switch-input {
    display: none;
}

/* ------------------------------------------------------------------------
   1. SCROLLBAR & RENK GEÇİŞLERİ (RENKLER HIZLI, HAREKET YAVAŞ)
   ------------------------------------------------------------------------ */
::-webkit-scrollbar {
    width: 10px;
    background-color: #f4f7f6;
}

::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
    border: 2px solid #f4f7f6;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

body.dark-mode::-webkit-scrollbar {
    background-color: #18181b !important;
}

body.dark-mode::-webkit-scrollbar-thumb {
    background-color: #3f3f46 !important;
    border-color: #18181b !important;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background-color: #52525b !important;
}

/* Renkler (background, color) 0.3s ile hızlı değişsin (Dark mod için) */
body,
input,
textarea,
a,
div,
span,
p,
h1,
h2,
h3 {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ------------------------------------------------------------------------
   2. ŞELALE ANİMASYONLARI (REVEAL FIX)
   ------------------------------------------------------------------------ */
.reveal-item,
.reveal-flow,
.slider-reveal,
.footer-reveal,
.comment-group {
    opacity: 0;
    transform: translateY(30px) translateZ(0);
    /* GPU Hızlandırma */
    will-change: transform, opacity;
    /* Tarayıcıya haber ver */

    /* Animasyon süresi (Yavaş ve Akıcı) */
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color 0.3s ease,
        /* Renk yine hızlı değişsin */
        border-color 0.3s ease !important;
}

/* JS 'active' sınıfını ekleyince devreye girer */
.reveal-item.active,
.reveal-flow.active,
.slider-reveal.active,
.footer-reveal.active,
.comment-group.active {
    opacity: 1 !important;
    transform: translateY(0) translateZ(0) !important;
}

/* ------------------------------------------------------------------------
   3. ANA YAPI & DARK MODE RENKLERİ
   ------------------------------------------------------------------------ */
body.dark-mode {
    background-color: #18181b !important;
    /* Zinc-900 */
    color: #e4e4e7 !important;
}

/* --- YENİ EKLENDİ: ETIKET SAYFASI ARKA PLAN DÜZELTMESİ --- */
body.dark-mode .etiket-wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

/* KARTLARIN KARARTILMASI */
body.dark-mode .modern-flow-card,
body.dark-mode .post-main-card,
body.dark-mode .legal-card,
body.dark-mode .tech-contact-card,
body.dark-mode .slider-item,
body.dark-mode .populer-yazilar-container,
body.dark-mode .gaming-social-compact,
body.dark-mode .comments-section,
body.dark-mode .modern-footer-compact,
body.dark-mode .modal-card,
body.dark-mode .auth-container,
body.dark-mode .contact-side-form,
body.dark-mode .reply-form-container,
body.dark-mode .etiket-modern-card .card-inner-content,
body.dark-mode .dashboard-card,
body.dark-mode .profile-sidebar,
body.dark-mode .profile-content {
    background-color: #27272a !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------------------
   4. HOVER BEYAZLAMA SORUNU (KESİN ÇÖZÜM)
   ------------------------------------------------------------------------ */
body.dark-mode .modern-flow-card:hover,
body.dark-mode .slider-item:hover,
body.dark-mode .pop-card-item:hover,
body.dark-mode .etiket-modern-card:hover .card-inner-content,
body.dark-mode .bounce-effect:hover {
    background-color: #3f3f46 !important;
    /* Açık griye dön */
    background-image: none !important;
    /* BEYAZ GRADYANI SİL */
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-5px) translateZ(0) !important;
    /* Zıplamayı koru */
}

/* ------------------------------------------------------------------------
   5. HEADER KORUMASI (MOBİL/DESKTOP AYRIMI)
   ------------------------------------------------------------------------ */
body.dark-mode .navbar-nav {
    background: transparent !important;
    /* Masaüstünde şeffaf */
}

@media (max-width: 991px) {
    body.dark-mode #navbarCollapse {
        background: rgba(24, 24, 27, 0.98) !important;
    }

    body.dark-mode .navbar-nav {
        background: #27272a !important;
        /* Sadece mobilde kutu olsun */
        padding: 20px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* ------------------------------------------------------------------------
   6. İÇERİK OKUNABİLİRLİĞİ (PARLAK METİNLER)
   ------------------------------------------------------------------------ */
body.dark-mode .article-body,
body.dark-mode .article-body p,
body.dark-mode .article-body span,
body.dark-mode .article-body div,
body.dark-mode .article-body li,
body.dark-mode .legal-content p,
body.dark-mode .info-desc {
    color: #e4e4e7 !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .article-body strong,
body.dark-mode .article-body b,
body.dark-mode .flow-main-title,
body.dark-mode .widget-title,
body.dark-mode .post-full-title {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body.dark-mode .article-body a {
    color: #fff !important;
}

/* --- [YENİ] #ETİKETLER BAŞLIĞINI BEYAZ YAP --- */
body.dark-mode .tag-label {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    /* Hafif gölge ile patlat */
}

/* ------------------------------------------------------------------------
   7. LİNKLER & DİĞER DETAYLAR
   ------------------------------------------------------------------------ */
body.dark-mode a {
    color: #a5b4fc;
}

body.dark-mode a:hover {
    color: #fff;
}

/* Başlık Linkleri */
body.dark-mode .flow-post-title a,
body.dark-mode .post-title-link,
body.dark-mode .slider-title a,
body.dark-mode .mini-title a {
    color: #f4f4f5 !important;
}

body.dark-mode .flow-post-title a:hover,
body.dark-mode .post-title-link:hover,
body.dark-mode .slider-title a:hover,
body.dark-mode .mini-title a:hover {
    color: #4361ee !important;
    text-shadow: 0 0 15px rgba(67, 97, 238, 0.4);
}

/* --- [YENİ] YANIT FORMU (JS İLE GELEN KUTU) DÜZELTMESİ --- */
/* JS tarafından eklenen 'dynamic-form-container' içindeki div'in inline stilini eziyoruz */
body.dark-mode .dynamic-form-container>div {
    background-color: #27272a !important;
    /* Beyazı Koyu Gri Yap */
    border-color: rgba(255, 255, 255, 0.1) !important;
    /* Kenarlığı silik yap */
    color: #ffffff !important;
}

/* "X kişisine yanıt veriyorsun" yazısı */
body.dark-mode .dynamic-form-container>div>div:first-child {
    color: #a5b4fc !important;
    /* Açık mor/mavi tonu */
}

/* Yorumlar & Sidebar */
body.dark-mode .chat-bubble {
    background-color: #3f3f46 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #e4e4e7 !important;
}

body.dark-mode .reply-row .chat-bubble {
    background-color: #27272a !important;
    border: 1px dashed rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .chat-name {
    color: #fff !important;
}

body.dark-mode .chat-date {
    color: #f472b6 !important;
}

body.dark-mode .chat-message {
    color: #d4d4d8 !important;
}

body.dark-mode .pop-card-item,
body.dark-mode .item-content,
body.dark-mode .modern-tag-item {
    background-color: #18181b !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #e4e4e7 !important;
}

body.dark-mode .pop-card-item:hover,
body.dark-mode .item-content:hover,
body.dark-mode .modern-tag-item:hover {
    background-color: #27272a !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Butonlar & Pagination */
body.dark-mode .load-more-btn,
body.dark-mode .read-more-btn-mini,
body.dark-mode .flow-read-more {
    background: #18181b !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .load-more-btn:hover {
    background: #4361ee !important;
    border-color: #4361ee !important;
}

body.dark-mode .pagination-wrapper a,
body.dark-mode .modern-pagination a,
body.dark-mode .pagination-container a {
    background: #27272a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

body.dark-mode .pagination-wrapper a:hover {
    background: #3f3f46 !important;
    border-color: #7209b7 !important;
}

body.dark-mode .copyright-mini,
body.dark-mode .footer-mini-slogan {
    color: #71717a !important;
}

body.dark-mode .footer-action-bar {
    background: #18181b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .search-wrapper-main,
body.dark-mode .category-main-content {
    background-color: transparent !important;
}

/* Sayfanın en altındaki o kaçak boşluğu engellemek için */
html,
body {
    background-color: #f8fafc;
    /* Aydınlık mod rengin */
}

body.dark-mode {
    background-color: #18181b !important;
    /* Footer ile aynı renk yap ki çizgi sırıtmasın */
}

/* Kategori veya içerik kapsayıcın için */
.category-master-layout,
.modern-contact-area {
    margin-bottom: -1px !important;
    /* Footer üzerine 1px biner, boşluk kalmaz */
}

/* =======================================================
   HEADER TABANLI DARK MODE GÖRSEL OPTİMİZASYONU
   ======================================================= */
body.dark-mode img {
    /* Resimlerin parlaklığını %70'e çekip renkleri biraz yumuşatıyoruz */
    filter: brightness(0.7) saturate(0.9);
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Mouse ile üzerine gelindiğinde resmi parlat */
body.dark-mode img:hover {
    filter: brightness(1) saturate(1);
}

/* ÖZEL MUAFİYETLER: Logo ve ikonlar kararmasın */
body.dark-mode .logo-text-outside,
body.dark-mode .logo-box-inside img,
body.dark-mode .swal2-icon,
body.dark-mode i,
body.dark-mode .nav-link i {
    filter: brightness(1) !important;
}

/* Slider ve Post resimleri için ekstra derinlik */
body.dark-mode .flow-post-img,
body.dark-mode .slider-img {
    border-radius: 15px;
    /* Eğer köşeler keskinse yumuşatır */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* =======================================================
   DARK MODE BAĞIŞIKLIK SİSTEMİ (SIYAHLIK BİTİRİCİ)
   ======================================================= */

.desktop-search-wrapper .d-search-input,
body.dark-mode .desktop-search-wrapper .d-search-input {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border: none !important;
}

.desktop-search-wrapper .d-search-input.active,
body.dark-mode .desktop-search-wrapper .d-search-input.active {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* =======================================================
   APPLE SWITCH - %100 ŞEFFAF KORUMA (NİHAİ ÇÖZÜM)
   ======================================================= */

/* 1. ARKA PLAN: Gündüz neyse gece de o! */
.apple-switch-wrapper .apple-switch-label,
body.dark-mode .apple-switch-wrapper .apple-switch-label {
    background: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* 2. TOP (BALL): Gece de bembeyaz kalsın */
.apple-switch-wrapper .apple-switch-ball,
body.dark-mode .apple-switch-wrapper .apple-switch-ball {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

/* 3. AKTİF DURUM (SADECE TOP SAĞA KAYINCA) */
/* Eğer sağa kayınca da şeffaf kalsın dersen burayı elleme */
.apple-switch-input:checked+.apple-switch-label,
body.dark-mode .apple-switch-input:checked+.apple-switch-label {
    /* Burayı da şeffaf yapıyorum ki tam istediğin gibi olsun */
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.apple-switch-input:checked+.apple-switch-label .apple-switch-ball,
body.dark-mode .apple-switch-input:checked+.apple-switch-label .apple-switch-ball {
    transform: translateX(33px) !important;
    background: linear-gradient(135deg, #7209b7, #4361ee) !important;
}

/* =======================================================
   DARK MODE - GENEL FORM VE INPUT ZIRHI
   ======================================================= */
body.dark-mode .modern-input,
body.dark-mode .tech-input,
body.dark-mode textarea,
body.dark-mode .m-search-form input {
    background-color: #27272a !important;
    /* Koyu Gri */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.dark-mode .modern-input:focus,
body.dark-mode .tech-input:focus {
    background-color: #18181b !important;
    /* Odaklanınca daha koyu */
    border-color: #4361ee !important;
    box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15) !important;
}

/* Input placeholder (ipucu) yazıları görünür olsun */
body.dark-mode ::placeholder {
    color: #94a3b8 !important;
    opacity: 0.7;
}

/* İletişim sayfasındaki form kartı */
body.dark-mode .contact-side-form {
    background-color: #27272a !important;
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* =======================================================
   6. MASAÜSTÜ ARAMA - KOMPAKT & SERİ (V46 NEON UPDATE)
   ======================================================= */
@media (min-width: 992px) {

    /* Kapsayıcı (DEĞİŞMEDİ) */
    .desktop-search-wrapper {
        position: absolute;
        right: 22px;
        top: 5px;
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center;
        z-index: 1000;
    }

    /* Apple Switch Konumu (DEĞİŞMEDİ) */
    .apple-switch-wrapper:not(.mobile-switch-fix) {
        position: absolute !important;
        right: 20px !important;
        top: 65px !important;
        display: block !important;
    }

    /* FORM KUTUSU */
    #dSearchForm {
        background: transparent !important;
        width: 42px !important;
        height: 40px !important;
        border-radius: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        position: relative;
        padding: 0 !important;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        border: 1px solid transparent !important;
        cursor: pointer !important;
        outline: none !important;
    }

    /* 🌟 FORM AÇIK HALİ (AKTİF - GÜNDÜZ MODU) */
    #dSearchForm.active {
        width: 200px !important;
        background: #ffffff !important;
        border: 1px solid rgba(67, 97, 238, 0.3) !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
        /* Gölgeyi biraz yumuşattım */
    }

    body.dark-mode #dSearchForm.active {
        background: #27272a !important;
        /* Koyu Gri */

        /* 👇 İŞTE MOBİLDEKİ O MEŞHUR MAVİ NEON 👇 */
        border: 1.5px solid rgba(67, 97, 238, 0.8) !important;
        box-shadow: 0 0 15px rgba(67, 97, 238, 0.5) !important;
    }

    /* INPUT (YAZI ALANI) */
    html body #dSearchInput.d-search-input {
        width: 0 !important;
        opacity: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #333333 !important;
        font-size: 13px !important;
        /* Yazı boyutu ideal */
        font-weight: 600 !important;
        letter-spacing: 0.3px;
        outline: none !important;
        padding: 0 !important;
        transition: opacity 0.2s ease !important;
        /* Yazı daha çabuk gelsin */
        height: 100%;
    }

    /* INPUT (AÇIKKEN) */
    html body #dSearchForm.active #dSearchInput.d-search-input {
        width: 100% !important;
        opacity: 1 !important;
        padding-left: 18px !important;
        padding-right: 40px !important;
    }

    /* 🔵 BUTON (NET & KESKİN) */
    html body #dSearchBtn.d-search-btn {
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;

        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        right: 2px !important;
        top: 2px !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        outline: none !important;
        font-size: 16px !important;
        box-shadow: none !important;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* KAPALIYKEN HOVER: Neon Parlama */
    html body #dSearchBtn.d-search-btn:hover {
        transform: scale(1.15);
        /* Çok abartı büyümesin */
        box-shadow: 0 0 20px rgba(67, 97, 238, 0.6), 0 0 5px rgba(255, 255, 255, 0.4) !important;
        border-color: rgba(67, 97, 238, 0.5) !important;
        background: rgba(255, 255, 255, 0.25) !important;
    }

    /* AÇIKKEN BUTON */
    html body #dSearchForm.active #dSearchBtn.d-search-btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #4361ee !important;
        transform: scale(1);
        text-shadow: none !important;
    }

    html body #dSearchForm.active #dSearchBtn.d-search-btn:hover {
        transform: scale(1.1) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Placeholder Rengi */
    #dSearchInput::placeholder {
        color: #999 !important;
        font-weight: 400;
    }

    /* Dark Mode Uyumu - Input Yazısı */
    body.dark-mode #dSearchInput.d-search-input {
        color: #ffffff !important;
    }
}

/* --- MOBİL: İÇ İÇE GEÇME FİX --- */
@media (max-width: 991px) {
    .mobile-switch-fix {
        width: 65px !important;
        /* Kutu genişliğini zorla sabitle */
        height: 32px !important;
        display: block !important;
    }

    #navbarCollapse .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}


/* --- MOBİL ARAMA KUTUSU SİYAH ARKA PLAN TEMİZLİĞİ --- */
@media (max-width: 991px) {

    /* 1. Arama formunun kendisini şeffaf yap */
    body.dark-mode .m-search-form {
        background: rgba(255, 255, 255, 0.1) !important;
        /* Gündüzdeki şeffaflık */
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: none !important;
    }

    /* 2. KRİTİK: Input içindeki o siyahlığı tamamen siler */
    body.dark-mode .m-search-form input {
        background: transparent !important;
        /* Siyahlığı öldüren satır */
        background-color: transparent !important;
        color: #ffffff !important;
        outline: none !important;
    }

    /* 3. Arama butonu yanındaki çizgiyi ve alanı temizle */
    body.dark-mode .mobile-search-item {
        background: transparent !important;
        border: none !important;
    }

    /* 4. "Arama..." yazısının rengini beyazlat */
    body.dark-mode .m-search-form input::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
    }
}


/* =======================================================
   🔍 MOBİL ARAMA KUTUSU - OVAL ÇERÇEVE & DARK MODE FIX
   ======================================================= */

/* 1. Dıştaki Ana Kapsayıcıyı Oval ve Parlak Yap */
body.dark-mode .m-search-form {
    background: rgba(255, 255, 255, 0.05) !important;
    /* Çok hafif transparan iç dolgu */
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    /* İşte o istediğin oval çerçeve */
    border-radius: 50px !important;
    /* Tam oval (stadyum tipi) görünüm */
    padding: 5px 8px 5px 15px !important;
    /* İç boşlukları dengele */
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* 2. İçerideki Input'u Tamamen Görünmez Yap (Sadece Yazı Kalsın) */
body.dark-mode .m-search-form input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
}

/* 3. Arama Butonunu (İkonu) Yuvarlak ve Belirgin Yap */
body.dark-mode .m-search-form button {
    background: #ffffff !important;
    color: #4361ee !important;
    /* Senin ana mavi rengin */
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    /* Buton da tam yuvarlak olsun */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    margin-left: 10px !important;
}

/* 4. Hover Efekti (Üzerine Gelince Çerçeve Parlasın) */
body.dark-mode .m-search-form:focus-within {
    border-color: #4361ee !important;
    /* Odaklanınca mavi yansıma */
    background: rgba(67, 97, 238, 0.1) !important;
    box-shadow: 0 0 15px rgba(67, 97, 238, 0.3) !important;
}

/* =======================================================
   🔍 MOBİL ARAMA KUTUSU - HEM GÜNDÜZ HEM GECE OVAL STİL
   ======================================================= */

/* 1. Dıştaki Ana Kapsayıcı (Gündüz ve Gece Ortak) */
.m-search-form {
    background: rgba(255, 255, 255, 0.15) !important;
    /* Gündüz biraz daha belirgin şeffaflık */
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50px !important;
    padding: 5px 8px 5px 15px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* 2. İçerideki Input (Gündüz ve Gece Ortak) */
.m-search-form input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    /* Yazı her zaman beyaz kalsın, gradyan üzerinde net okunur */
    font-weight: 600 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Arama Butonu (Beyaz Yuvarlak) */
.m-search-form button {
    background: #ffffff !important;
    color: #4361ee !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    margin-left: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* 4. Placeholder Rengi (Gündüz için biraz daha opak) */
.m-search-form input::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 5. Fokus Olunca Parlama (Masaüstüyle uyumlu) */
.m-search-form:focus-within {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

/* 1. Önce eski tüm kaba çizgileri ve borderları her iki modda da sil */
.mobile-search-item {
    border-top: none !important;
    padding-top: 15px !important;
    position: relative !important;
}

/* 2. Gündüz ve Gece Ortak: Arama kutusunun ÜSTÜNE o meşhur çizgi */
@media (max-width: 991px) {
    .mobile-search-item::before {
        content: '';
        display: block;
        width: 80% !important;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent) !important;
        margin: 0 auto 15px auto !important;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #27272a inset !important;
    /* Arkaplanı kart rengine göm */
    transition: background-color 999999s ease-in-out 0s !important;
    border: none !important;
    outline: none !important;
}

html body.dark-mode #dSearchForm.active {
    border: 1.5px solid rgba(67, 97, 238, 0.8) !important;
    box-shadow: 0 0 18px rgba(67, 97, 238, 0.5) !important;
    background-color: #27272a !important;
    /* Mobildeki o yumuşak geçişi buraya da çektik */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 3. DARK MODE INPUT ÖZEL: Chrome Beyazlığını Göm (V57 ORİJİNAL) */
html body.dark-mode #dSearchForm.active #dSearchInput:-webkit-autofill {
    border: none !important;
    background-color: #27272a !important;
    -webkit-box-shadow: 0 0 0 1000px #27272a inset !important;
}

/* 4. MASAÜSTÜ ARAMA - FOCUS ANINDAKİ ÇİZGİLERİ SİL (V57 ORİJİNAL) */
#dSearchInput:focus,
#dSearchInput:active,
#dSearchInput:-webkit-autofill:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 5. CHROME HAYALET İKONLARINI GİZLE (V57 ORİJİNAL) */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

/* Sadece Yönetici Tacı İçin Özel Efekt */
.kral-ikonu {
    color: #ffd700 !important;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.8));
    font-size: 17px;
    transform: translateY(-2px);
    margin-right: 4px;
}

/* ÜYE ASTRONOTU TASARIMI */
.user-ikonu {
    color: #06b6d4 !important;
    /* Uzay Mavisi / Cyan */
    font-size: 16px;
    margin-right: 4px;

    /* Hafif Mavi Neon Parlama */
    filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.6));
    animation: floating 3s ease-in-out infinite;
    display: inline-block;
}

/* Süzülme Keyframes (Aşağı Yukarı Hareket) */
@keyframes floating {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-3px) rotate(5deg);
    }

    /* Hafif yukarı ve sağa döner */
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* --- MARKET KAPSÜLÜ (SABİT) --- */
.header-market-widgets {
    position: absolute !important;
    left: 20px !important;
    top: 27% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;

    /* Gap ve Padding'i orta karar yaptım */
    gap: 6px !important;
    padding: 4px 6px !important;

    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    z-index: 1000 !important;
}

/* --- BUTON GÖVDESİ (32px - İDEAL BOY) --- */
.mini-btn {
    width: 32px !important;
    height: 32px !important;

    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    font-size: 15px !important;

    transition: all 0.3s ease !important;
}

/* --- HOVER GENEL --- */
.mini-btn:hover {
    transform: scale(1.2) translateY(-2px) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
    border-color: #fff !important;
}

/* --- SİHİR BURADA: ORJİNAL LOGOLAR --- */
.mini-btn:hover i {
    color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    /*  LOGO RESİM BOYUTU  */
    width: 20px !important;
    height: 20px !important;

    display: inline-block !important;
}

/* 1. GOOGLE PLAY */
.mini-btn.btn-gplay:hover i {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/d/d0/Google_Play_Arrow_logo.svg') !important;
}

/* 2. APP STORE */
.mini-btn.btn-appstore:hover i {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/67/App_Store_%28iOS%29.svg') !important;
}

/* 3. GOOGLE PLUS (ORTALAMA FIX) */
.mini-btn.btn-gplus:hover i {
    color: #db4437 !important;
    background: none !important;
    -webkit-text-fill-color: #db4437 !important;
    filter: drop-shadow(0 2px 2px rgba(219, 68, 55, 0.3));
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* MOBİL GİZLEME */
@media (max-width: 991px) {
    .header-market-widgets {
        display: none !important;
    }
}

/* 1. Kural: Tasarımı bozmadan tüm animasyon sınıflarını pasifize et */
[data-aos],
.wow,
.animated,
.aos-init,
[data-aos][data-aos][data-aos-duration] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    /* display: block; SİLDİK - Tasarımı bozmasın diye */
}

/* 2. Kural: Mobildeki render motoruna 'bekleme' komutu ver */
:root {
    --aos-duration: 0s !important;
    --aos-delay: 0s !important;
}

/* 3. Kural: Sayfa yüklenirken beyaz ekran çakmasını önleyen kilit */
html {
    background-color: transparent;
}

.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(12px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    padding: 20px;
}

.auth-overlay.open {
    opacity: 1;
    pointer-events: all;
    display: flex;
}

.auth-box {
    width: 100%;
    max-width: 900px;
    min-height: 610px;
    background: #fff;
    border-radius: 30px;
    display: flex;
    overflow: hidden;
    position: relative;
    box-shadow: 0 50px 100px -20px rgba(114, 9, 183, 0.25);
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auth-overlay.open .auth-box {
    transform: scale(1);
}

/* KAPAT BUTONU */
.auth-close {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 24px;
    color: #94a3b8;
    cursor: pointer;
    z-index: 50;
    transition: 0.3s;
    background: none;
    border: none;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.auth-close:hover {
    color: #ef4444;
    transform: rotate(90deg);
}

.auth-visual {
    width: 42%;
    position: relative;
    background: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=1920&auto=format&fit=crop') center/cover;
    display: flex;
    align-items: flex-end;
    padding: 40px;
}

.auth-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(114, 9, 183, 0.95), rgba(67, 97, 238, 0.6));
    z-index: 1;
}

.auth-visual-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.auth-visual-content h2 {
    font-weight: 900;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 34px;
    line-height: 1.1;
    margin-bottom: 15px;
}

.auth-content {
    width: 58%;
    padding: 30px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

/* FORM GÖRÜNÜRLÜK (Alt alta gelmeyi önler) */
.auth-form-wrapper {
    display: none;
    width: 100%;
}

.auth-form-wrapper.active {
    display: block !important;
    animation: fadeIn 0.4s ease;
}

/* SEKME SİSTEMİ */
.auth-tabs {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px;
    margin-bottom: 25px;
    border-bottom: none;
}

.auth-tab {
    padding-bottom: 8px;
    font-weight: 800;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
    position: relative;
    border-bottom: 3px solid transparent;
}

.auth-tab.active {
    color: #7209b7;
    border-bottom: 3px solid #7209b7;
}

.auth-input-group {
    position: relative;
    margin-bottom: 18px;
}

.auth-input {
    width: 100%;
    height: 52px;
    border-radius: 14px;
    border: 2px solid #f1f5f9;
    padding-left: 48px;
    font-weight: 600;
    color: #334155;
    transition: all 0.3s ease;
    background: #f8fafc;
    font-size: 14px;
    outline: none;
}

.auth-input:hover,
.auth-input:focus {
    background: #fff;
    border-color: transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #7209b7 0%, #4361ee 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 10px 20px -5px rgba(114, 9, 183, 0.15);
    transform: translateY(-1px);
}

.auth-icon {
    position: absolute;
    left: 18px;
    top: 16px;
    color: #94a3b8;
    transition: 0.3s;
    font-size: 16px;
    z-index: 5;
}

.auth-input:focus+.auth-icon {
    color: #7209b7;
    transform: scale(1.1);
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
    -webkit-text-fill-color: #334155 !important;
    transition: background-color 5000s ease-in-out 0s;
    border-radius: 14px !important;
}

.auth-section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.pill-personal {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.pill-account {
    background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
    color: #9333ea;
    border: 1px solid #f5d0fe;
}

.auth-pill-msg {
    margin-top: 20px;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    display: none;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.5s ease;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
}

/* Başarı & Yönlendirme Hapı (Success Pill) */
.auth-pill-msg.success {
    background: linear-gradient(135deg, #7209b7 0%, #4361ee 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(67, 97, 238, 0.3);
}

/* Hata Hapı (Error Pill) */
.auth-pill-msg.error {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.1);
}

/* GÖNDER BUTONU */
.tech-btn-submit {
    width: 100%;
    height: 54px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #7209b7 0%, #4361ee 100%);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(114, 9, 183, 0.3);
}

.tech-btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(114, 9, 183, 0.4);
}

@media (max-width: 768px) {
    .auth-box {
        flex-direction: column;
        max-width: 450px;
        height: auto;
    }

    .auth-visual {
        width: 100%;
        height: 160px;
        padding: 25px;
    }

    .auth-content {
        width: 100%;
        padding: 30px 25px;
    }

    .auth-visual-content h2 {
        font-size: 24px;
    }

    .auth-visual-content p {
        display: none;
    }
}

/* Animasyonlar */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes onAutoFillStart {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

@keyframes onAutoFillCancel {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus,
body.dark-mode input:-webkit-autofill:active,
body.dark-mode textarea:-webkit-autofill,
body.dark-mode textarea:-webkit-autofill:hover,
body.dark-mode textarea:-webkit-autofill:focus,
body.dark-mode select:-webkit-autofill,
body.dark-mode select:-webkit-autofill:hover,
body.dark-mode select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #18181b inset !important;
    box-shadow: 0 0 0 1000px #18181b inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #18181b !important;
    color: #ffffff !important;
    transition: background-color 50000s ease-in-out 0s !important;
    animation-name: onAutoFillStart;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    caret-color: #ffffff !important;
}

body.dark-mode input:not(:-webkit-autofill) {
    animation-name: onAutoFillCancel;
}

body.dark-mode .js-autofill-fix {
    -webkit-box-shadow: 0 0 0 1000px #18181b inset !important;
    box-shadow: 0 0 0 1000px #18181b inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #18181b !important;
    color: #ffffff !important;
}

body.dark-mode .auth-box {
    background-color: #27272a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
    border-radius: 30px !important;
    color: #e4e4e7 !important;
}

body.dark-mode .auth-content {
    background-color: transparent !important;
    color: #e4e4e7 !important;
}

body.dark-mode .auth-input {
    background-color: #18181b !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

body.dark-mode .auth-input:hover,
body.dark-mode .auth-input:focus,
body.dark-mode .auth-input:active {
    border: 2px solid transparent !important;
    background: linear-gradient(#18181b, #18181b) padding-box, linear-gradient(135deg, #7209b7 0%, #4361ee 100%) border-box !important;
    box-shadow: 0 0 15px rgba(67, 97, 238, 0.25) !important;
    transform: translateY(-2px);
}

body.dark-mode .auth-input::placeholder {
    color: #71717a !important;
    opacity: 0.7 !important;
}

body.dark-mode .auth-icon {
    color: #94a3b8 !important;
    transition: 0.3s ease;
}

body.dark-mode .auth-input:focus+.auth-icon,
body.dark-mode .auth-input:hover+.auth-icon {
    color: #a855f7 !important;
}

body.dark-mode .auth-tab {
    color: #71717a !important;
    border-bottom: 3px solid transparent !important;
}

body.dark-mode .auth-tab.active {
    color: #ffffff !important;
    border-bottom-color: #4361ee !important;
}

body.dark-mode .remember-me {
    color: #a1a1aa !important;
}

body.dark-mode .custom-check {
    background-color: transparent !important;
    border: 2px solid #52525b !important;
}

body.dark-mode .forgot-pill {
    background-color: #18181b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a1a1aa !important;
}

body.dark-mode .forgot-pill:hover {
    border-color: #4361ee !important;
    color: #ffffff !important;
}

.auth-close:focus,
.auth-close:active {
    outline: none !important;
    border: none !important;
}

body.dark-mode .auth-close {
    color: #a1a1aa !important;
    background: transparent !important;
}

body.dark-mode .auth-close:hover {
    color: #ef4444 !important;
    transform: rotate(90deg);
}

body.dark-mode select.auth-input {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode select.auth-input option {
    background-color: #18181b !important;
    color: #ffffff !important;
}

body.dark-mode select.auth-input:hover,
body.dark-mode select.auth-input:focus {
    border-color: #4361ee !important;
    box-shadow: 0 0 15px rgba(67, 97, 238, 0.25) !important;
}

.user-name-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0px !important;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    color: inherit;
}

.nav-link.text-neon-effect i {
    margin-right: 6px !important;
    font-size: 15px !important;
    vertical-align: middle;
}

@media (max-width: 991px) {
    .user-name-label {
        font-size: 13px !important;
        max-width: 160px;
    }
}

@media (max-width: 991px) {

    /* 1. Ana taşıyıcıyı dikey hizaya zorla */
    .panel-wrapper .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* 2. SİDEBAR (MENÜ): Her zaman 1. sırada (En Üstte) */
    .col-lg-3.col-md-12 {
        order: 1 !important;
        margin-bottom: 25px !important;
        display: block !important;
    }

    /* 3. İÇERİK ALANI (Kartlar ve Sekmeler): Menünün altında */
    .col-lg-9.col-md-12 {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* İstatistik kartlarını içerik alanı içinde en başa al */
    .row.mb-4.cascade-group {
        order: -1 !important;
    }

    /* 4. ZIPLAMA ENGELİ: Reveal animasyonlarını panelde iptal et */
    .panel-wrapper.reveal-item,
    .panel-wrapper .reveal-item,
    .panel-wrapper .reveal-flow {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* 5. Sadece aktif olan sekme görünsün, tarayıcı pasiflere odaklanmasın */
    .panel-tab {
        display: none;
    }

    .panel-tab.active {
        display: block !important;
        order: 5 !important;
    }
}


/* 1. Ekran yüksekliği 650px'den azsa (Telefon Yatay Modu) */
@media screen and (max-height: 650px) {

    .auth-overlay {
        align-items: flex-start !important;
        /* Ortalamayı bırak, üste yasla */
        padding: 10px !important;
        overflow-y: auto !important;
        /* Dış katmanda scroll aç */
    }

    .auth-box {
        flex-direction: column !important;
        /* Yan yana değil alt alta olsun */
        height: auto !important;
        min-height: auto !important;
        /* O 610px zorlamasını kaldır */
        max-height: none !important;
        overflow: visible !important;
    }

    /* Resmi Gizle (Yatayda yer kaplamasın, sadece form kalsın) */
    .auth-visual {
        display: none !important;
    }

    .auth-content {
        width: 100% !important;
        padding: 20px !important;
        /* Boşlukları daralt */
    }

    /* Inputları biraz küçült ki ekrana sığsın */
    .auth-input {
        height: 45px !important;
    }

    .auth-input-group {
        margin-bottom: 12px !important;
    }
}

@media screen and (max-height: 650px) {

    /* 1. DIŞ KATMAN (Ortala) */
    .auth-overlay {
        align-items: center !important;
        /* Dikeyde ortala */
        padding: 15px !important;
        /* Kenarlardan biraz boşluk bırak */
        overflow: hidden !important;
        /* Dışta scroll olmasın */
    }

    /* 2. KUTU (Yan Yana Dizilim) */
    .auth-box {
        flex-direction: row !important;
        /* Görsel Sol, Form Sağ */
        width: 90% !important;
        /* Ekranın %90'ı */
        max-width: 750px !important;
        /* Çok da uzamasın */
        height: auto !important;
        max-height: 90vh !important;
        /* Ekranın %90 yüksekliği */
        min-height: auto !important;
        /* Zorunlu yüksekliği kaldır */
        border-radius: 20px !important;
        /* Köşeleri yuvarla */
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
        overflow: hidden !important;
        /* Taşanı gizle */
    }

    /* 3. SOL TARAF: GÖRSEL (Banner Değil, Sol Panel) */
    .auth-visual {
        display: flex !important;
        width: 35% !important;
        /* Genişliğin %35'i görsel */
        height: auto !important;
        /* Yükseklik otomatik (kutu kadar) */
        padding: 20px !important;
        align-items: center !important;
        justify-content: center !important;
        background-position: center !important;
    }

    /* Görsel İçeriği */
    .auth-visual-content h2 {
        font-size: 22px !important;
        text-align: center;
        margin: 0 !important;
    }

    .auth-visual-content p {
        display: none !important;
    }

    /* 4. SAĞ TARAF: FORM ALANI (Kaydırılabilir) */
    .auth-content {
        width: 65% !important;
        /* Genişliğin %65'i form */
        padding: 20px 25px !important;
        overflow-y: auto !important;
        max-height: 90vh !important;
        /* Yükseklik sınırı */
        display: block !important;
    }

    /* 5. KAPAT BUTONU (Sağ Üst Köşeye Sabitle) */
    .auth-close {
        position: absolute !important;
        top: 10px !important;
        right: 15px !important;
        color: #94a3b8 !important;
        /* Gri yap (Formun üstünde duracak) */
        background: transparent !important;
        z-index: 50;
    }

    /* Inputları biraz sıkılaştır */
    .auth-input-group {
        margin-bottom: 10px !important;
    }

    .auth-input {
        height: 42px !important;
        font-size: 13px !important;
    }

    .auth-tabs {
        margin-bottom: 15px !important;
        gap: 15px !important;
    }
}

@media (max-width: 991px) and (min-height: 651px) {

    /* Burası DİKEY tutuş için (Eski ayarların aynısı) */
    .auth-box {
        flex-direction: column !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    .auth-visual {
        width: 100% !important;
        height: 120px !important;
        padding: 20px !important;
        align-items: flex-end !important;
    }

    .auth-close {
        color: #fff !important;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #334155 !important;
    /* Koyu Yazı */
    -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
    /* Açık Gri Zemin */
    transition: background-color 999999s ease-in-out 0s !important;
    caret-color: #334155 !important;
    /* İmleç rengi */
    border: 2px solid #f1f5f9 !important;
    /* Sınırları koru */
    border-radius: 14px !important;
    /* Köşeleri koru */
}

/* 2. GECE MODU (Dark Mode) */
/* Arka planı koyu lacivert (#0f172a) yap, yazıyı beyaz yap */
body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus,
body.dark-mode input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    /* Beyaz Yazı */
    -webkit-box-shadow: 0 0 0 1000px #18181b inset !important;
    /* Koyu Zemin */
    border: 2px solid #334155 !important;
    /* Sınırları koyu moda uyarla */
}

/* 3. İKON KAYMASINI ENGELLEME */
/* Otomatik doldurma yapılsa bile ikon her zaman üste çıksın */
.auth-input-group {
    position: relative;
    z-index: 1;
}

.auth-icon {
    z-index: 10;
    /* İkonu en üste al */
    pointer-events: none;
    /* Tıklamayı engelleme */
}

/* 4. CHROME'UN SAÇMA SİYAH İKONLARINI GİZLE */
/* İsim veya telefon seçince çıkan o küçük siyah adam/telefon ikonunu siler */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

/* --- GİRİŞ FORMU ALT SATIR (BENİ HATIRLA & ŞİFREMİ UNUTTUM) --- */

.auth-remember-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 15px !important;
}

/* 1. YAZI RENKLERİ (Gündüz Siyah / Gece Beyaz) */
.remember-me,
.forgot-pill {
    color: #000000 !important;
    /* Varsayılan: Siyah */
    font-size: 13px !important;
    transition: none !important;
    /* Yazı rengi hoverda değişip kaybolmasın diye sabitledik */
}

/* Gece Modu (Dark Mode) İçin Yazı Rengi */
body.dark-mode .remember-me,
body.dark-mode .forgot-pill {
    color: #ffffff !important;
    /* Gece: Beyaz */
}

/* 2. CHECKBOX (Şeffaf Değil, Net Kutu) */
.checkbox-wrapper {
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.custom-check {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #ffffff !important;
    /* İçi her zaman beyaz */
    border: 2px solid #334155 !important;
    /* Belirgin çerçeve */
    border-radius: 4px;
}

/* Tıklandığında Mavi-Mor Gradyan dolsun */
.checkbox-wrapper input:checked~.custom-check {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
    border-color: transparent !important;
}

/* Tik İşareti */
.custom-check:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-wrapper input:checked~.custom-check:after {
    display: block;
}

/* GÜNDÜZ: Beyaz kutu, Siyah yazı */
.forgot-pill {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

/* GECE: Siyah kutu, Beyaz yazı */
body.dark-mode .forgot-pill {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
}

/* Hover efekti */
.forgot-pill:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

.auth-input-group .auth-icon {
    color: #6366f1;
    /* Mavi-Mor geçişindeki ana renk */
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* Input'a tıklandığında ikonun rengini canlandıralım */
.auth-input:focus+.auth-icon {
    color: #a855f7;
    /* Mor */
    opacity: 1;
    transform: scale(1.1);
}

#cookie-banner,
.cookie-banner,
[id*="cookie"] {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Modal açıkken süzülerek kaybolma efekti */
body.modal-acik #cookie-banner,
body.modal-acik .cookie-banner,
body.modal-acik [id*="cookie"] {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    /* Hafif aşağı doğru süzülür */
    visibility: hidden !important;
    pointer-events: none;
    /* Tıklanabilirliği engeller */
}

/* Alt Menü Ayarları */
.nav-item {
    position: relative;
    list-style: none;
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #18181b;
    /* Senin koyu rengin */
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 180px;
    display: none;
    /* Varsayılan kapalı */
    padding: 10px 0;
    border-radius: 8px;
    z-index: 9999;
}

.nav-item:hover .sub-menu {
    display: block;
}

/* Üstüne gelince aç */
.sub-menu li a {
    padding: 8px 15px;
    color: #a1a1aa !important;
    display: block;
    font-size: 13px;
    text-decoration: none;
}

.sub-menu li a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff !important;
}

.sub-ok {
    font-size: 10px;
    margin-left: 5px;
    opacity: 0.5;
}


/*header.css bitiş/*