/* ==========================================================================
   ÜÇEL1 OTOMOTİV - ANA CSS DOSYASI (V40 - EKSİKSİZ, GENİŞLETİLMİŞ MASTER SÜRÜM)
   ========================================================================== */

/* --- 1. GENEL AYARLAR VE DEĞİŞKENLER --- */
:root {
    --primary-color: #e62117;
    --dark-bg: #111111;
    --light-grey: #f4f4f4;
    --text-color: #333333;
    --white: #ffffff;
    --orange-color: #f66d0e;
    --transition: all 0.3s ease;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Poppins', sans-serif; 
}

body { 
    background-color: var(--light-grey); 
    color: var(--text-color); 
    line-height: 1.6; 
    overflow-x: hidden; 
    transition: background-color 0.4s ease, color 0.4s ease;
}

.container { 
    width: 90%; 
    max-width: 1200px; 
    margin: 0 auto; 
}

/* --- 2. HEADER VE NAVİGASYON --- */
header { 
    background: rgba(0, 0, 0, 0.98); 
    color: #ffffff; 
    padding: 15px 0; 
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 1000; 
    transition: var(--transition); 
}

header.scrolled { 
    padding: 8px 0; 
    background: #000; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
}

.header-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

#logo { 
    display: flex; 
    align-items: center; 
    text-decoration: none; 
}

#logo img { 
    height: 60px; 
    width: auto; 
    transition: var(--transition); 
    margin-right: 10px; 
}

header.scrolled #logo img { 
    height: 45px; 
}

#logo h3 { 
    color: #fff; 
    font-size: 1.4rem; 
    font-weight: 700; 
    letter-spacing: 1px; 
}

nav { 
    display: flex; 
    align-items: center; 
    gap: 25px; 
}

.nav-links a { 
    color: #fff; 
    text-decoration: none; 
    font-weight: 500; 
    transition: var(--transition); 
}

.nav-links a:hover, 
.nav-links a.active { 
    color: var(--primary-color); 
}

.menu-toggle { 
    display: none; 
    color: #fff; 
    font-size: 1.8rem; 
    cursor: pointer; 
}

/* --- 3. ÜST MENÜ BUTONLARI VE PROFİL --- */
.auth-buttons { 
    display: flex; 
    gap: 10px; 
    align-items: center; 
}

.btn-login { 
    color: #fff; 
    text-decoration: none; 
    padding: 8px 12px; 
    font-weight: 500; 
    transition: var(--transition); 
}

.btn-login:hover { 
    color: var(--primary-color); 
}

.btn-register { 
    background: var(--primary-color); 
    color: #fff; 
    padding: 8px 18px; 
    border-radius: 5px; 
    text-decoration: none; 
    font-weight: 600; 
    transition: var(--transition); 
}

.btn-register:hover { 
    background: #c91c13; 
}

.user-profile-nav { 
    display: flex; 
    align-items: center; 
    background: rgba(255, 255, 255, 0.07); 
    padding: 6px 15px; 
    border-radius: 50px; 
    border: 1px solid rgba(255, 255, 255, 0.15); 
    transition: var(--transition); 
}

.user-profile-nav:hover { 
    background: rgba(255, 255, 255, 0.12); 
    border-color: var(--primary-color); 
}

.user-profile-nav i.fa-circle-user { 
    font-size: 1.6rem; 
    color: var(--primary-color); 
    margin-right: 12px; 
}

.user-info { 
    display: flex; 
    flex-direction: column; 
    margin-right: 15px; 
    text-align: left; 
}

.user-info span { 
    font-size: 0.65rem; 
    color: #aaa; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    line-height: 1; 
    margin-bottom: 2px; 
}

.user-info strong { 
    font-size: 0.85rem; 
    color: var(--white); 
    font-weight: 600; 
    line-height: 1; 
}

#logoutBtn { 
    background: none; 
    border: none; 
    color: #ff4d4d; 
    font-size: 1.1rem; 
    cursor: pointer; 
    padding: 5px; 
    transition: transform 0.2s ease; 
    display: flex; 
    align-items: center; 
}

#logoutBtn:hover { 
    transform: scale(1.2); 
    color: #ff1a1a; 
}

/* --- 4. GECE GÜNDÜZ BUTONU (THEME SWITCH) --- */
.theme-switch { 
    font-size: 17px; 
    position: relative; 
    display: inline-block; 
    width: 60px; 
    height: 32px; 
    margin-right: 10px; 
}

.theme-switch input { 
    opacity: 0; 
    width: 0; 
    height: 0; 
}

.slider-theme { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #f1f5f9; 
    border: 2px solid #cbd5e1; 
    transition: .4s; 
    border-radius: 30px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 5px; 
}

.slider-theme .sun-icon { 
    color: #f59e0b; 
    font-size: 14px; 
    z-index: 1; 
}

.slider-theme .moon-icon { 
    color: #94a3b8; 
    font-size: 14px; 
    z-index: 1; 
}

.slider-theme:before { 
    position: absolute; 
    content: ""; 
    height: 22px; 
    width: 22px; 
    border-radius: 20px; 
    left: 3px; 
    bottom: 3px; 
    background-color: #fff; 
    transition: .4s; 
    z-index: 2; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}

input:checked + .slider-theme { 
    background-color: #1e293b; 
    border-color: #334155; 
}

input:checked + .slider-theme .moon-icon { 
    color: #f1f5f9; 
}

input:checked + .slider-theme:before { 
    transform: translateX(28px); 
    background-color: #0f172a; 
}

/* --- 5. HERO BÖLÜMÜ --- */
.hero { 
    height: 75vh; 
    background-size: cover; 
    background-position: center; 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: #fff; 
    margin-top: 60px; 
    transition: background-image 0.8s ease-in-out; 
}

.hero-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.7); 
}

.hero-content { 
    position: relative; 
    z-index: 1; 
}

.hero-content h1 { 
    font-size: 3.5rem; 
    font-weight: 800; 
    margin-bottom: 20px; 
}

.btn-primary { 
    background: var(--primary-color); 
    color: #fff; 
    padding: 15px 30px; 
    text-decoration: none; 
    border-radius: 5px; 
    font-weight: bold; 
    display: inline-block; 
    transition: var(--transition); 
}

.btn-primary:hover { 
    background: #c91c13; 
    transform: translateY(-3px); 
}

/* --- 6. KAMPANYA SLIDER --- */
.campaign-slider-wrapper { 
    position: relative; 
    overflow: hidden; 
    margin: 50px auto; 
    max-width: 1200px; 
    padding: 0 20px; 
}

.camp-slide { 
    flex-shrink: 0; 
    display: flex; 
    flex-wrap: wrap; 
    box-sizing: border-box; 
    width: 100%; 
    transition: 0.4s; 
}

.camp-slide div { 
    transition: background-color 0.4s; 
}

.camp-dot { 
    transition: all 0.3s ease; 
}

.camp-dot:hover { 
    background: var(--primary-color) !important; 
    transform: scale(1.2); 
}

#camp-prev:hover, 
#camp-next:hover { 
    background: var(--light-grey); 
    color: var(--primary-color); 
}

/* --- 7. SLAYT VE VİTRİN KARTLARI --- */
.brands-section { 
    padding: 50px 0; 
    background: var(--white); 
    margin-top: 60px; 
    margin-bottom: 60px; 
    border-radius: 10px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
    transition: 0.4s; 
}

.section-title { 
    text-align: center; 
    font-size: 2rem; 
    margin-bottom: 35px; 
    color: var(--text-color); 
    transition: 0.4s; 
}

.slider-wrapper { 
    display: flex; 
    align-items: center; 
    position: relative; 
    padding: 0 45px; 
}

.slider-content { 
    overflow-x: auto; 
    scroll-behavior: smooth; 
    scroll-snap-type: x mandatory; 
    width: 100%; 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

.slider-content::-webkit-scrollbar { 
    display: none; 
}

.slider-track { 
    display: inline-flex; 
    gap: 20px; 
    padding: 10px 0; 
}

.brand-card { 
    background: var(--light-grey); 
    padding: 25px; 
    text-align: center; 
    border-radius: 10px; 
    border: 1px solid #e2e8f0; 
    min-width: 240px; 
    scroll-snap-align: start; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.4s, border-color 0.4s; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}

.brand-card img { 
    height: 60px; 
    max-width: 150px; 
    object-fit: contain; 
    margin-bottom: 15px; 
}

.brand-card span { 
    display: block; 
    font-weight: 600; 
    color: var(--text-color); 
    transition: 0.4s; 
}

.brand-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 6px 12px rgba(0,0,0,0.1); 
    border-color: var(--primary-color); 
}

.btn-view-all { 
    display: block; 
    width: fit-content; 
    margin: 40px auto 0; 
    background: var(--orange-color); 
    color: #fff; 
    padding: 12px 25px; 
    border-radius: 5px; 
    text-decoration: none; 
    font-weight: 600; 
    text-transform: uppercase; 
    transition: 0.3s; 
}

.btn-view-all:hover { 
    background: #d95a09; 
    transform: translateY(-2px); 
}

.nav-btn { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: var(--white); 
    border: 1px solid #ddd; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    cursor: pointer; 
    z-index: 5; 
    transition: 0.3s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

.nav-btn:hover { 
    background: var(--light-grey); 
    color: var(--primary-color); 
    border-color: var(--primary-color); 
}

.prev-btn { left: 0; } 
.next-btn { right: 0; }

/* ==========================================================================
   8. İNTERAKTİF ARAÇ DİYAGRAMI (DIŞA AÇILAN KUTU & MOBİL KAYDIRMALI MENÜ)
   ========================================================================== */
.interactive-diagram-section { 
    position: relative; 
    background: var(--white); 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    border: 1px solid #e2e8f0; 
    transition: 0.4s;
}

/* Üst ve Alt Sekmeler */
.diagram-tabs-top, 
.diagram-tabs-bottom { 
    display: flex; 
    flex-wrap: wrap; 
    background: var(--white); 
    transition: 0.4s; 
}

.diagram-tabs-top { 
    border-bottom: 1px solid #e2e8f0; 
}

.diagram-tabs-bottom { 
    border-top: 1px solid #e2e8f0; 
}

.d-tab { 
    flex: 1; 
    min-width: 140px; 
    padding: 15px 10px; 
    text-align: center; 
    cursor: pointer; 
    font-weight: 600; 
    font-size: 0.95rem; 
    color: #64748b; 
    border-bottom: 4px solid transparent; 
    transition: all 0.3s ease; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 8px; 
}

.diagram-tabs-bottom .d-tab { 
    border-bottom: none; 
    border-top: 4px solid transparent; 
}

.d-tab i { 
    font-size: 1.8rem; 
    color: #cbd5e1; 
    transition: 0.3s; 
}

.d-tab:hover { 
    color: var(--text-color); 
    background: var(--light-grey); 
}

.diagram-tabs-top .d-tab.active { 
    color: var(--primary-color); 
    border-bottom-color: var(--primary-color); 
    background: var(--light-grey); 
}

.diagram-tabs-bottom .d-tab.active { 
    color: var(--primary-color); 
    border-top-color: var(--primary-color); 
    background: var(--light-grey); 
}

.d-tab.active i { 
    color: var(--primary-color); 
}

/* Dışa Açılan Yapı İçin Ana Gövde */
.diagram-main-layout {
    display: flex;
    width: 100%;
    height: 550px;
    background: #4a5568;
    overflow: hidden; 
    position: relative;
}

/* Resim Konteyneri */
.diagram-container { 
    flex: 1; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: all 0.4s ease;
}

.watermark-text { 
    position: absolute; 
    font-size: 10vw; 
    font-weight: 900; 
    color: rgba(255,255,255,0.03); 
    white-space: nowrap; 
    z-index: 1; 
    pointer-events: none; 
    text-transform: uppercase; 
}

.diagram-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    z-index: 2; 
    position: relative; 
    pointer-events: none; 
    filter: brightness(0.9); 
}

/* Noktalar */
.hotspot { 
    position: absolute; 
    width: 45px; 
    height: 45px; 
    background: white; 
    border-radius: 50%; 
    z-index: 10; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    color: #111; 
    font-size: 1.2rem; 
    transition: all 0.3s ease; 
    transform: translate(-50%, -50%); 
}

.hotspot::after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    border: 2px solid var(--primary-color); 
    animation: pulse 2s infinite; 
}

.hotspot:hover, 
.hotspot.active { 
    background: var(--primary-color); 
    color: white; 
    transform: translate(-50%, -50%) scale(1.15); 
    box-shadow: 0 0 15px var(--primary-color); 
}

.hotspot:hover::after, 
.hotspot.active::after { 
    display: none; 
}

@keyframes pulse { 
    0% { transform: scale(1); opacity: 1; } 
    100% { transform: scale(1.6); opacity: 0; } 
}

/* DIŞA AÇILAN YAN PENCERE (Sidebar) */
.diagram-sidebar { 
    width: 0; 
    opacity: 0;
    background: #1e293b; 
    border-left: 0px solid var(--primary-color); 
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    color: white;
    white-space: nowrap; 
}

.diagram-sidebar.active { 
    width: 350px; 
    opacity: 1;
    border-left: 4px solid var(--primary-color); 
}

.sidebar-inner-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 350px; 
}

.sidebar-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 25px; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    padding-bottom: 15px; 
}

.diagram-sidebar h3 { 
    font-size: 1.4rem; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    color: white; 
    margin: 0; 
    white-space: normal;
}

.sidebar-header i.fa-xmark { 
    color: #cbd5e1; 
    transition: 0.3s; 
}

.sidebar-header i.fa-xmark:hover { 
    color: var(--primary-color); 
    transform: rotate(90deg); 
}

.sidebar-body { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 20px;
}

.diagram-sidebar p { 
    color: #cbd5e1; 
    line-height: 1.7; 
    font-size: 0.95rem; 
    white-space: normal;
}

/* Fiyat ve Stok Bölümü */
.price-stok-group { 
    background: rgba(255,255,255,0.05); 
    padding: 20px; 
    border-radius: 8px; 
    border: 1px solid rgba(255,255,255,0.1); 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

.info-fiyat, 
.info-stok, 
.info-years { 
    font-size: 1rem; 
    color: #f1f5f9; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.info-fiyat i, 
.info-stok i, 
.info-years i { 
    color: var(--primary-color); 
    font-size: 1.1rem; 
}

.info-fiyat strong { 
    font-size: 1.6rem; 
    color: #10b981; 
    font-weight: 700; 
}

.info-fiyat small { 
    font-size: 0.75rem; 
    color: #94a3b8; 
    margin-left: 5px; 
}

.info-stok span { 
    color: #10b981; 
    font-weight: 600; 
}

.info-years span { 
    color: #cbd5e1; 
    font-weight: 500; 
}

.btn-detail-diagram { 
    width: 100%;
    text-align: center;
    display: inline-block; 
    padding: 12px 20px; 
    background: var(--primary-color); 
    color: white; 
    text-decoration: none; 
    border-radius: 6px; 
    transition: 0.3s; 
    font-weight: 600; 
    font-size: 1rem; 
}

.btn-detail-diagram:hover { 
    background: #c91c13; 
    transform: translateY(-2px);
}

/* ==========================================================================
   9. UIVERSE GÜVEN KARTLARI (TRUST BADGES)
   ========================================================================== */
.features-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
    margin-top: 20px; 
    margin-bottom: 80px; 
}

.uiverse-card {
    width: 100%;
    height: 100%;
    background: var(--white);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.4s ease-in-out;
    position: relative;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    z-index: 1;
}

.uiverse-card::before {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background: var(--primary-color);
    border-radius: 50%;
    z-index: -1;
    transition: 0.6s ease-in-out;
    top: -40px;
    right: -40px;
    opacity: 0.05;
}

.uiverse-card:hover::before {
    transform: scale(12);
    opacity: 1;
}

.uiverse-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 15px 35px rgba(230, 33, 23, 0.25);
    transform: translateY(-10px);
}

.uiverse-card i {
    font-size: 3.5rem;
    color: var(--primary-color);
    margin-bottom: 25px;
    transition: 0.5s ease-in-out;
}

.uiverse-card:hover i {
    color: #fff;
    transform: scale(1.1) translateY(-10px);
}

.uiverse-card h3 { 
    font-size: 1.3rem; 
    margin-bottom: 15px; 
    z-index: 2; 
    transition: 0.4s; 
    color: var(--text-color); 
}

.uiverse-card:hover h3 { 
    color: #fff; 
}

.uiverse-card p { 
    font-size: 0.95rem; 
    color: #64748b; 
    z-index: 2; 
    transition: 0.4s; 
    line-height: 1.6;
}

.uiverse-card:hover p { 
    color: #fff; 
    opacity: 0.95; 
}

/* ==========================================================================
   10. ANA SAYFA SİPARİŞ FORMU VE KİLİT EKRANI
   ========================================================================== */
.order-section { 
    background: var(--white); 
    padding: 40px; 
    border-radius: 10px; 
    margin-top: 40px; 
    margin-bottom: 60px; 
    position: relative; 
    z-index: 10; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    transition: 0.4s; 
}

.order-form-container { 
    position: relative; 
}

.modern-form .form-row { 
    display: flex; 
    gap: 20px; 
}

.form-group { 
    margin-bottom: 18px; 
    flex: 1; 
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    outline: none;
    font-size: 1rem;
    transition: 0.3s;
    background: var(--light-grey);
    color: var(--text-color);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-color);
    background: var(--white);
    box-shadow: 0 0 10px rgba(230,33,23,0.1);
}

/* SİPARİŞ FORMU — PARÇA EKLEME LİSTESİ (sepet benzeri) */
.parca-ekle-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.parca-ekle-row .form-group { margin-bottom: 0; }
.parca-ekle-row select { min-width: 150px; }
.parca-ekle-row input[type="text"] { min-width: 180px; }
.parca-ekle-row input[type="number"] { width: 80px; }
.btn-parca-ekle {
    background: var(--dark-bg);
    color: #fff;
    border: none;
    padding: 0 22px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    flex-shrink: 0;
}
.btn-parca-ekle:hover { background: var(--primary-color); }
#parca-listesi {
    list-style: none;
    padding: 0;
    margin: 0 0 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#parca-listesi li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--light-grey);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.92rem;
    color: var(--text-color);
}
#parca-listesi li .parca-kaldir {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
}
#parca-listesi-bos-uyari {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0 0 15px;
}

.checkbox-group { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    margin: 15px 0; 
    font-size: 0.9rem; 
    color: #64748b; 
    transition: 0.4s; 
}

.checkbox-group a { 
    color: var(--primary-color); 
    text-decoration: none; 
    font-weight: 600; 
}

.btn-submit-main { 
    width: 100%; 
    background: var(--dark-bg); 
    color: #fff; 
    padding: 15px; 
    border: none; 
    border-radius: 8px; 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 1.1rem; 
    transition: 0.3s; 
}

.btn-submit-main:hover { 
    background: var(--primary-color); 
}

/* FORM KİLİT EKRANI (OVERLAY) */
.form-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    z-index: 100; 
    border-radius: 10px; 
    text-align: center; 
    padding: 20px; 
    transition: opacity 0.3s ease; 
}

.form-overlay i { 
    font-size: 3rem; 
    color: var(--primary-color); 
    margin-bottom: 15px; 
}

.form-overlay h3 { 
    color: var(--text-color); 
    margin-bottom: 10px; 
    transition: 0.4s; 
}

.form-overlay p { 
    color: #64748b; 
}

.form-overlay .btn-login-trigger { 
    background: var(--primary-color); 
    color: white; 
    padding: 10px 25px; 
    border-radius: 5px; 
    text-decoration: none; 
    font-weight: 600; 
    margin-top: 10px; 
}

.form-locked input, 
.form-locked textarea, 
.form-locked button { 
    pointer-events: none; 
}


/* ==========================================================================
   11. PROFİL VE DASHBOARD TASARIMI
   ========================================================================== */
.dashboard-body { 
    background-color: #f0f2f5; 
    transition: 0.4s; 
}

.profile-wrapper { 
    display: flex; 
    max-width: 1300px; 
    margin: 100px auto 50px; 
    gap: 30px; 
    padding: 0 20px; 
}

.profile-sidebar { 
    flex: 1; 
    max-width: 300px; 
    background: var(--white); 
    border-radius: 15px; 
    padding: 30px 20px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); 
    height: fit-content; 
    border: 1px solid #e2e8f0; 
    transition: 0.4s; 
}

.avatar-circle { 
    width: 80px; 
    height: 80px; 
    background: var(--light-grey); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto 15px; 
    border: 2px solid var(--primary-color); 
    transition: 0.4s; 
}

.avatar-circle i { 
    font-size: 2.5rem; 
    color: var(--primary-color); 
    margin: 0; 
}

.user-brief { 
    text-align: center; 
    border-bottom: 1px solid #e2e8f0; 
    padding-bottom: 20px; 
    margin-bottom: 20px; 
}

.user-brief h3 { 
    font-size: 1.2rem; 
    color: var(--text-color); 
    transition: 0.4s; 
}

.user-brief p { 
    font-size: 0.8rem; 
    color: #64748b; 
    text-transform: uppercase; 
}

.profile-tabs { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.tab-btn { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    padding: 15px; 
    border: none; 
    background: none; 
    border-radius: 10px; 
    cursor: pointer; 
    font-size: 1rem; 
    color: #64748b; 
    font-weight: 500; 
    transition: all 0.3s ease; 
    text-align: left; 
}

.tab-btn i { 
    font-size: 1.2rem; 
    width: 25px; 
}

.tab-btn:hover { 
    background: var(--light-grey); 
    color: var(--primary-color); 
}

.tab-btn.active { 
    background: var(--primary-color); 
    color: white; 
}

.profile-content { 
    flex: 3; 
    background: var(--white); 
    border-radius: 15px; 
    padding: 40px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); 
    min-height: 600px; 
    border: 1px solid #e2e8f0; 
    transition: 0.4s; 
}

.tab-content { 
    display: none; 
    opacity: 0; 
    transform: translateY(10px); 
    transition: all 0.4s ease; 
}

.tab-content.active { 
    display: block; 
    opacity: 1; 
    transform: translateY(0); 
}

.profile-content h2 { 
    margin-bottom: 30px; 
    font-size: 1.8rem; 
    color: var(--text-color); 
    border-left: 5px solid var(--primary-color); 
    padding-left: 15px; 
    transition: 0.4s; 
}

/* Sipariş Kartları */
.order-card {
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--order-accent, #cbd5e1);
    padding: 0 20px 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
    transition: 0.3s;
    background: var(--white);
    box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

.order-card:hover {
    border-left-color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.order-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 -20px 16px;
    padding: 14px 20px;
    background: var(--light-grey);
    border-bottom: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0;
}

.order-card-top .otk-takip {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.order-card-top .otk-tarih {
    color: #94a3b8;
    font-size: 0.78rem;
}

.order-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 4px 0 4px;
    color: var(--text-color);
    font-size: 0.9rem;
}

.order-info-row span i {
    color: #94a3b8;
    margin-right: 6px;
    width: 14px;
    text-align: center;
}

.order-note-box {
    background: rgba(59, 130, 246, 0.07);
    border-left: 3px solid #3b82f6;
    border-radius: 4px;
    padding: 10px 14px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--text-color);
}

.status-badge {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-badge.cancelled {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.status-badge.info {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.status-badge.success {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.status-badge.pending {
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
}

/* Sipariş Durum Takibi (Order Tracker) */
.order-tracker {
    display: flex;
    align-items: flex-start;
    margin: 15px 0 5px;
}

.tracker-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.tracker-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 13px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
    transition: 0.3s;
}

.tracker-step .dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 0.7rem;
    z-index: 1;
    transition: 0.3s;
}

.tracker-step .label {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 6px;
    font-weight: 600;
    line-height: 1.3;
}

.tracker-step.done .dot,
.tracker-step.active .dot {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.tracker-step.done:not(:last-child)::after {
    background: var(--primary-color);
}

.tracker-step.done .label,
.tracker-step.active .label {
    color: var(--text-color);
}

/* 5 adım (Talep Alındı/Fiyat Verildi/Onaylandı/Kargoda/Teslim Edildi) dar
   ekranlarda yan yana sığmıyor — her adımın etiketi komşu adımın üzerine
   taşıp okunmaz bir yığın hâline geliyordu. Dar ekranda adımlar yatay yerine
   dikey bir liste olarak (nokta solda, etiket sağında) diziliyor; bağlayıcı
   çizgi kaldırıldı (dikeyde piksel-hassas hizalaması kırılgan olurdu) —
   sıralı noktalar zaten ilerlemeyi yeterince net anlatıyor. */
@media (max-width: 576px) {
    .order-tracker {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .tracker-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        width: 100%;
    }
    .tracker-step:not(:last-child)::after {
        display: none;
    }
    .tracker-step .dot {
        flex-shrink: 0;
    }
    .tracker-step .label {
        margin-top: 0;
        margin-left: 10px;
        text-align: left;
        font-size: 0.78rem;
    }
}

.btn-cancel {
    background: var(--white); 
    border: 1px solid #e62117; 
    color: #e62117; 
    padding: 10px 15px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: 600; 
    transition: 0.3s; 
}

.btn-cancel:hover {
    background: #e62117;
    color: white;
}

/* Hesap Güvenliği — Tehlikeli Bölge */
.danger-zone {
    margin-top: 40px;
    padding: 20px 25px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 4px solid #ef4444;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.04);
}

.danger-zone h3 {
    color: #ef4444;
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.danger-zone p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

html.dark-mode .danger-zone {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
}

/* Garaj Kartları */
.garage-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 20px; 
    margin-top: 20px; 
}

.garage-card { 
    background: var(--white); 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    padding: 25px 20px; 
    text-align: center; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
    transition: 0.3s; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}

.garage-card:hover { 
    transform: translateY(-5px); 
    border-color: var(--primary-color); 
    box-shadow: 0 8px 25px rgba(230, 33, 23, 0.1); 
}

.garage-card i.fa-car { 
    font-size: 3rem; 
    color: #cbd5e1; 
    margin-bottom: 15px; 
    transition: 0.3s; 
}

.garage-card:hover i.fa-car { 
    color: var(--primary-color); 
}

.garage-card strong { 
    font-size: 1.1rem; 
    color: var(--text-color); 
    margin-bottom: 5px; 
    transition: 0.4s; 
}

.sidebar-footer { 
    margin-top: 30px; 
    padding-top: 20px; 
    border-top: 1px solid #e2e8f0; 
}


/* ==========================================================================
   12. CUSTOM MODAL (Yeni Araç Ekleme)
   ========================================================================== */
.custom-modal { 
    display: none; 
    position: fixed; 
    z-index: 3000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    align-items: center; 
    justify-content: center; 
}

.custom-modal.show { 
    display: flex; 
}

.modal-content { 
    background-color: var(--white); 
    padding: 30px; 
    border-radius: 12px; 
    width: 90%; 
    max-width: 400px; 
    position: relative; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    animation: modalFadeIn 0.3s ease; 
    transition: 0.4s; 
}

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

.close-modal { 
    position: absolute; 
    right: 20px; 
    top: 15px; 
    font-size: 1.8rem; 
    font-weight: bold; 
    color: #888; 
    cursor: pointer; 
    transition: 0.2s; 
}

.close-modal:hover { 
    color: var(--primary-color); 
}


/* ==========================================================================
   13. PREMIUM İLETİŞİM FORMLARI (Brave Moose)
   ========================================================================== */
.premium-form-container { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

/* NOT: .premium-input-group / .premium-input / .premium-label / :focus durumu
   burada değil, aşağıda "HATA DÜZELTMELERİ VE PROFİL (UIVERSE) YÜZEN ETİKET
   CSS'LERİ" bölümünde (gece moduna uyumlu, var(--text-color)/var(--white)
   kullanan) sürümüyle tanımlanır. Buradaki eski/sabit renkli sürüm daha önce
   burayla orada aynı seçici iki kez tanımlandığı için "ölü" kod haline
   gelmişti; ayrıca eski sürümün :focus haldeki etiket arka planını sabit
   #fff yapması, gece modunda etiketin arkasında beyaz bir leke olarak
   görünmesine (gerçek bir görsel hataya) yol açıyordu. Sadece hâlâ ihtiyaç
   duyulan ve başka yerde tanımlanmayan textarea kuralı burada kalıyor. */
textarea.premium-input + .premium-label {
    top: 25px;
}

.premium-btn {
    background: linear-gradient(135deg, #e62117, #bd1610); 
    color: white; 
    padding: 15px; 
    border: none; 
    border-radius: 10px; 
    font-size: 1.1rem; 
    font-weight: bold; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    box-shadow: 0 5px 15px rgba(230, 33, 23, 0.3); 
}

.premium-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 20px rgba(230, 33, 23, 0.4); 
}


/* ==========================================================================
   14. SOSYAL MEDYA KARTLARI (Funny Cat)
   ========================================================================== */
/* ==========================================================================
   YENİ SOSYAL MEDYA KARTLARI (Uiverse Great Ape 33)
   ========================================================================== */
.new-social-wrapper {
    display: inline-flex;
    list-style: none;
    gap: 15px;
    margin-top: 5px;
    padding: 0;
}

.new-social-wrapper .new-social-icon {
    position: relative;
    background: rgba(255, 255, 255, 0.05); /* Footer uyumlu hafif saydam zemin */
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.new-social-wrapper .new-social-icon a {
    color: #cbd5e1;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: 0.3s;
    text-decoration: none;
}

.new-social-wrapper .social-tooltip {
    position: absolute;
    top: 0;
    font-size: 0.85rem;
    background: #ffffff;
    color: #0f172a;
    padding: 5px 12px;
    border-radius: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 10;
}

/* Tooltip Ok ucu (Altındaki minik üçgen) */
.new-social-wrapper .social-tooltip::before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    background: inherit; /* Arka plan rengini otomatik alır */
    bottom: -3px;
    left: 50%;
    transform: translate(-50%) rotate(45deg);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Hover Efektleri (Balonun yukarı çıkması) */
.new-social-wrapper .new-social-icon:hover .social-tooltip {
    top: -45px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.new-social-wrapper .new-social-icon:hover {
    transform: translateY(-5px);
}

.new-social-wrapper .new-social-icon:hover a {
    color: #ffffff; /* Fare gelince ikonlar bembeyaz olur */
}

/* Markalara Özel Hover Renkleri */
.new-social-wrapper .new-social-icon.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.new-social-wrapper .new-social-icon.facebook:hover {
    background: #1877F2;
}
.new-social-wrapper .new-social-icon.whatsapp:hover {
    background: #25D366;
}

/* Balon (Tooltip) Renginin Markaya Göre Değişmesi */
.new-social-wrapper .new-social-icon.instagram:hover .social-tooltip {
    background: #dc2743;
    color: #fff;
}
.new-social-wrapper .new-social-icon.facebook:hover .social-tooltip {
    background: #1877F2;
    color: #fff;
}
.new-social-wrapper .new-social-icon.whatsapp:hover .social-tooltip {
    background: #25D366;
    color: #fff;
}
/* ==========================================================================
   15. CANLI DESTEK SİSTEMİ (LIVE CHAT)
   ========================================================================== */
.live-chat-widget { 
    position: fixed; 
    bottom: 90px; 
    right: 20px; 
    z-index: 9999; 
    display: none; 
    flex-direction: column; 
    align-items: flex-end; 
}

.chat-toggle-btn { 
    width: 60px; 
    height: 60px; 
    background: #0f172a; 
    color: white; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.8rem; 
    cursor: pointer; 
    box-shadow: 0 10px 25px rgba(15,23,42,0.4); 
    transition: all 0.3s ease; 
    border: none; 
    position: relative; 
}

.chat-toggle-btn:hover { 
    transform: scale(1.1); 
    background: #e62117; 
}

.chat-badge { 
    position: absolute; 
    top: -5px; 
    right: -5px; 
    background: #e62117; 
    color: white; 
    border-radius: 50%; 
    width: 22px; 
    height: 22px; 
    font-size: 1rem; 
    font-weight: bold; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
    animation: bounce 1s infinite; 
}

.chat-window { 
    width: 350px; 
    height: 450px; 
    background: var(--white); 
    border-radius: 15px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); 
    margin-bottom: 15px; 
    display: none; 
    flex-direction: column; 
    overflow: hidden; 
    border: 1px solid #e2e8f0; 
    transition: 0.4s; 
}

.chat-header { 
    background: #0f172a; 
    color: white; 
    padding: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-weight: bold; 
    border-bottom: 3px solid var(--primary-color); 
}

.chat-header i { 
    cursor: pointer; 
    color: #cbd5e1; 
    transition: 0.2s; 
}

.chat-header i:hover { 
    color: white; 
    transform: rotate(90deg); 
}

.chat-body { 
    flex: 1; 
    padding: 15px; 
    overflow-y: auto; 
    background: var(--light-grey); 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    transition: 0.4s; 
}

.chat-msg { 
    padding: 10px 15px; 
    border-radius: 15px; 
    max-width: 80%; 
    font-size: 0.9rem; 
    line-height: 1.4; 
    position: relative; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

.chat-msg.admin { 
    background: #e62117; 
    color: white; 
    align-self: flex-start; 
    border-bottom-left-radius: 2px; 
}

.chat-msg.customer { 
    background: var(--white); 
    border: 1px solid #e2e8f0; 
    color: var(--text-color); 
    align-self: flex-end; 
    border-bottom-right-radius: 2px; 
    transition: 0.4s; 
}

.chat-msg small { 
    display: block; 
    font-size: 0.7rem; 
    opacity: 0.7; 
    margin-top: 5px; 
    text-align: right; 
}

.chat-footer { 
    padding: 10px; 
    background: var(--white); 
    border-top: 1px solid #e2e8f0; 
    display: flex; 
    gap: 10px; 
    transition: 0.4s; 
}

.chat-footer input { 
    flex: 1; 
    padding: 12px; 
    border: 1px solid #cbd5e1; 
    border-radius: 25px; 
    outline: none; 
    background: var(--light-grey); 
    color: var(--text-color); 
    transition: 0.4s; 
}

.chat-footer button { 
    background: #e62117; 
    color: white; 
    border: none; 
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: 0.3s; 
}

.chat-footer button:hover {
    background: #c91c13;
    transform: scale(1.05);
}

/* ==========================================================================
   15b. SİPARİŞ TAKİP WIDGET (FLOATING) — canlı destek balonuyla aynı desen,
   sol altta (whatsapp-float'ın üstünde) — nav bar'daki "Sipariş Takip"
   linkinin yerini alıyor, siteyi ilk açan/sipariş vermemiş ziyaretçiye de
   göze batmadan her sayfada erişilebilir kalıyor.
   ========================================================================== */
.order-track-widget {
    position: fixed;
    bottom: 90px;
    left: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* siparis-takip.html kendi sayfasında bu widget zaten gösterilmiyor (script.js),
   ama sabit konumlu WhatsApp balonu hâlâ orada — sayfanın kısa boyu yüzünden
   mobilde "Sipariş Takip Numarası" kutusunun/"Sorgula" butonunun üzerine
   biniyordu. Alt boşluk, kartı balonun bulunduğu bölgenin üstüne itiyor. */
#takip-main {
    padding-top: 60px;
    padding-bottom: 60px;
}
/* Bu sayfaya özel: hero + form kartı toplamı dar telefon ekranlarında viewport
   yüksekliğine çok yakındı; alttaki sabit WhatsApp butonuyla "Sorgula"
   butonunun köşesi çakışıyordu (ölçüldü: ~98px). Sadece BU sayfanın hero'su
   (#takip-hero — .about-hero'yu paylaşan diğer sayfaları etkilemez) kısaltılıp
   kart üstündeki boşluk azaltılarak ölçülmüş, net bir boşluk bırakıldı. */
@media (max-width: 576px) {
    #takip-main {
        padding-top: 24px;
        padding-bottom: 150px;
    }
    #takip-hero {
        height: 210px;
    }
}

.order-track-toggle-btn {
    width: 55px;
    height: 55px;
    background: #0f172a;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(15,23,42,0.4);
    transition: all 0.3s ease;
    border: none;
}

.order-track-toggle-btn:hover {
    transform: scale(1.1);
    background: #e62117;
}

.order-track-window {
    width: 350px;
    max-width: calc(100vw - 40px);
    max-height: min(520px, 70vh);
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    margin-bottom: 15px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.order-track-window.open {
    display: flex;
}

.order-track-header {
    background: #0f172a;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    border-bottom: 3px solid var(--primary-color);
    flex-shrink: 0;
}

.order-track-header i {
    cursor: pointer;
    color: #cbd5e1;
    transition: 0.2s;
}

.order-track-header i:hover {
    color: white;
    transform: rotate(90deg);
}

.order-track-form {
    display: flex;
    gap: 8px;
    padding: 15px;
    background: var(--white);
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.order-track-form input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 25px;
    outline: none;
    background: var(--light-grey);
    color: var(--text-color);
    text-transform: uppercase;
    min-width: 0;
}

.order-track-form button {
    background: #e62117;
    color: white;
    border: none;
    padding: 0 18px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    flex-shrink: 0;
}

.order-track-form button:hover {
    background: #c91c13;
}

.order-track-body {
    flex: 1;
    padding: 0 15px 15px;
    overflow-y: auto;
    background: var(--light-grey);
}

.order-track-empty {
    text-align: center;
    padding: 30px 10px;
    color: #94a3b8;
}

.order-track-empty i {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 10px;
    opacity: 0.6;
}

.order-track-fullpage-link {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 0.8rem;
    color: #3b82f6;
    background: var(--white);
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
    text-decoration: none;
}

.order-track-fullpage-link:hover {
    text-decoration: underline;
}

/* Admin Paneli İçin Sohbet Kutusu */
.admin-chat-container { 
    display: flex; 
    height: 500px; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    overflow: hidden; 
}

.admin-chat-list { 
    width: 30%; 
    background: #f8fafc; 
    border-right: 1px solid #e2e8f0; 
    overflow-y: auto; 
}

.admin-chat-item { 
    padding: 15px; 
    border-bottom: 1px solid #e2e8f0; 
    cursor: pointer; 
    transition: 0.2s; 
}

.admin-chat-item:hover, 
.admin-chat-item.active { 
    background: #fff; 
    border-left: 4px solid #e62117; 
}

.admin-chat-box { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    background: white; 
}


/* ==========================================================================
   16. GİRİŞ YAP & KAYIT OL SAYFALARI
   ========================================================================== */
.auth-page { 
    background-color: #0f172a; 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    margin: 0; 
    transition: background-image 0.8s ease-in-out; 
}

.auth-container {
    width: 100%;
    max-width: 450px;
    padding: 20px;
}

/* Mobilde giriş/kayıt kartının alt kısmı (ör. "Hemen Kayıt Olun" linki), sol altta
   sabit duran WhatsApp/sipariş takip butonlarının arkasında kalıp tıklanamaz hale
   geliyordu — kart dikeyde ortalandığı için bazı ekran yüksekliklerinde tam o
   bölgeye denk geliyordu. Alt boşluk eklenince kart yukarı kayıyor, çakışma kalkıyor. */
@media (max-width: 576px) {
    .auth-page {
        padding-bottom: 160px;
    }
}

.auth-logo { 
    text-align: center; 
    margin-bottom: 25px; 
}

.auth-logo img { 
    height: 70px; 
    border-radius: 50%; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

.auth-box { 
    background: var(--white); 
    padding: 40px; 
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    text-align: center; 
    transition: 0.4s; 
}

.auth-box h2 { 
    color: var(--text-color); 
    margin-bottom: 10px; 
    font-size: 1.8rem; 
    transition: 0.4s; 
}

.auth-box p { 
    color: #64748b; 
    margin-bottom: 30px; 
    font-size: 0.95rem; 
}

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

.auth-form .input-group i { 
    position: absolute; 
    left: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: #aaa; 
    font-size: 1.1rem; 
}

.auth-form input { 
    width: 100%; 
    padding: 15px 15px 15px 45px; 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    outline: none; 
    font-family: inherit; 
    transition: var(--transition); 
    background: var(--light-grey); 
    color: var(--text-color); 
}

.auth-form input:focus { 
    border-color: var(--primary-color); 
    background: var(--white); 
    box-shadow: 0 0 0 3px rgba(230, 33, 23, 0.1); 
}

.auth-options { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 0.9rem; 
    margin-bottom: 25px; 
}

.auth-options label { 
    cursor: pointer; 
    color: #64748b; 
}

.auth-options .forgot-pass { 
    color: var(--primary-color); 
    text-decoration: none; 
    font-weight: 600; 
}

.btn-auth { 
    width: 100%; 
    background: var(--primary-color); 
    color: #fff; 
    border: none; 
    padding: 15px; 
    border-radius: 8px; 
    font-size: 1.1rem; 
    font-weight: 600; 
    cursor: pointer; 
    transition: var(--transition); 
}

.btn-auth:hover { 
    background: #c91c13; 
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px rgba(230,33,23,0.3); 
}

.auth-footer { 
    margin-top: 30px; 
    font-size: 0.95rem; 
    color: #64748b; 
}

.auth-footer a { 
    color: var(--text-color); 
    font-weight: 700; 
    text-decoration: none; 
    transition: 0.4s; 
}

.auth-footer a:hover {
    color: var(--primary-color);
}

/* Kayıt formu (4 alan) girişten daha uzun olduğu için sadece .auth-page'e
   padding-bottom eklemek kısa telefonlarda alttaki sabit WhatsApp/sipariş
   takip butonlarıyla "Giriş Yapın" linkinin çakışmasını tam kapatamıyordu —
   kart burada biraz sıkılaştırılıyor (sadece mobilde, masaüstü aynı kalıyor).
   NOT: Bu kural bilerek .auth-box/.auth-logo/.input-group'un asıl
   tanımlarından SONRA duruyor — aksi halde eşit özgüllükte (specificity),
   sonra gelen kazanacağından media query'nin hiçbir etkisi olmuyordu. */
@media (max-width: 576px) {
    .auth-logo {
        margin-bottom: 12px;
    }
    .auth-logo img {
        height: 50px;
    }
    .auth-box {
        padding: 28px 24px;
    }
    .auth-box p {
        margin-bottom: 18px;
    }
    .auth-form .input-group {
        margin-bottom: 14px;
    }
}


/* ==========================================================================
   17. MAĞAZA LİNKLERİ, ARAMA ÇUBUĞU VE VİTRİN
   ========================================================================== */
.market-links { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    margin-top: 10px; 
}

.market-btn { 
    background: #222; 
    color: #fff !important; 
    padding: 10px 15px; 
    border-radius: 5px; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 0.9rem; 
    font-weight: 500; 
    transition: var(--transition); 
    border: 1px solid #333; 
    width: fit-content; 
}

.market-btn:hover { 
    background: var(--primary-color); 
    border-color: var(--primary-color); 
    transform: translateX(5px); 
}

.search-bar-container { 
    max-width: 600px; 
    margin: 0 auto 50px auto; 
    position: relative; 
}

.search-bar-container input { 
    width: 100%; 
    padding: 15px 20px 15px 50px; 
    border: 2px solid #e2e8f0; 
    border-radius: 30px; 
    font-size: 1.1rem; 
    outline: none; 
    transition: var(--transition); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    background: var(--white); 
    color: var(--text-color); 
}

.search-bar-container input:focus { 
    border-color: var(--primary-color); 
    box-shadow: 0 5px 20px rgba(230, 33, 23, 0.15); 
}

.search-bar-container i { 
    position: absolute; 
    left: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: #888; 
    font-size: 1.2rem; 
}

.brands-grid-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 30px; 
    padding-bottom: 60px; 
}

.brands-grid-container .brand-card { 
    min-width: unset; 
    margin-bottom: 0; 
}


/* ==========================================================================
   18. ANİMASYON, TOAST VE YÜZEN BUTONLAR
   ========================================================================== */
.animate-up { 
    opacity: 1; 
    transform: none; 
    transition: all 0.7s ease; 
}

html.js-ready .animate-up { 
    opacity: 0; 
    transform: translateY(30px); 
}

html.js-ready .animate-up.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

.whatsapp-float { 
    position: fixed; 
    bottom: 20px; 
    left: 20px; 
    background: #25d366; 
    color: #fff; 
    border-radius: 50%; 
    width: 55px; 
    height: 55px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 30px; 
    z-index: 100; 
    text-decoration: none; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
    transition: 0.3s; 
}

.whatsapp-float:hover { 
    transform: scale(1.1); 
}

.top-btn { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    background: var(--primary-color); 
    color: #fff; 
    border: none; 
    border-radius: 50%; 
    width: 45px; 
    height: 45px; 
    cursor: pointer; 
    z-index: 100; 
    opacity: 0; 
    transition: 0.3s; 
    font-size: 1.2rem; 
}

.top-btn.show { 
    opacity: 1; 
}

.toast { 
    position: fixed; 
    top: 85px; 
    right: 20px; 
    background: #10b981; 
    color: #fff; 
    padding: 15px 25px; 
    border-radius: 8px; 
    z-index: 2000; 
    transform: translateX(150%); 
    transition: 0.5s; 
    font-weight: 600; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
}

.toast.show { 
    transform: translateX(0); 
}


/* ==========================================================================
   19. FOOTER (ALT BİLGİ)
   ========================================================================== */
footer { 
    background: #0f172a; 
    color: #fff; 
    padding: 60px 0 20px; 
    border-top: 5px solid var(--primary-color); 
}

.footer-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr; 
    gap: 40px; 
}

footer a, 
footer a:visited { 
    color: #cbd5e1; 
    text-decoration: none; 
    display: block; 
    margin-bottom: 10px; 
    transition: 0.3s; 
}

footer a:hover { 
    color: var(--primary-color); 
    padding-left: 5px; 
}

.footer-bottom { 
    text-align: center; 
    margin-top: 40px; 
    border-top: 1px solid #1e293b; 
    padding-top: 20px; 
    font-size: 0.85rem; 
    color: #64748b; 
}


/* ==========================================================================
   20. GECE MODU (DARK MODE) DEĞİŞKENLERİ VE GEÇİŞLER
   ========================================================================== */

/* Tema geçişini tetikleyen ana sınıf */
html.dark-mode {
    --light-grey: #0f172a; /* Zemin koyu lacivert */
    --white: #1e293b; /* Kartlar ve formlar koyu gri */
    --text-color: #f1f5f9; /* Yazılar açık gri/beyaz */
    --dark-bg: #f8fafc; /* Normalde koyu olan şeyler açık olacak */
}

/* Gece Modunda Özel Arayüz Ayarlamaları */
html.dark-mode .d-tab { 
    color: #cbd5e1; 
}

html.dark-mode .d-tab:hover { 
    background: #334155; 
    color: #fff; 
}

html.dark-mode .diagram-tabs-top .d-tab.active,
html.dark-mode .diagram-tabs-bottom .d-tab.active { 
    background: #0f172a; 
    color: var(--primary-color); 
}

html.dark-mode .diagram-sidebar { 
    background: rgba(15,23,42,1); 
    box-shadow: -10px 0 30px rgba(0,0,0,0.8); 
}

html.dark-mode .diagram-sidebar h3 { 
    color: #fff; 
}

html.dark-mode .diagram-sidebar p { 
    color: #cbd5e1; 
}

html.dark-mode .price-stok-group { 
    background: rgba(0,0,0,0.2); 
    border-color: #334155; 
}

html.dark-mode .info-fiyat, 
html.dark-mode .info-stok, 
html.dark-mode .info-years { 
    color: #f1f5f9; 
}

html.dark-mode .info-fiyat strong { 
    color: #10b981; 
}

html.dark-mode .camp-slide > div { 
    background: #1e293b !important; 
}

html.dark-mode .camp-slide h2 { 
    color: #fff !important; 
}

html.dark-mode .diagram-tabs-top, 
html.dark-mode .diagram-tabs-bottom { 
    background: #1e293b; 
    border-color: #334155; 
}

html.dark-mode .form-group input,
html.dark-mode .form-group textarea,
html.dark-mode .form-group select {
    border-color: #334155;
}

html.dark-mode #parca-listesi li {
    background: #1e293b;
    border-color: #334155;
}

html.dark-mode .nav-btn { 
    background: #1e293b; 
    border-color: #334155; 
    color: #f1f5f9; 
}

html.dark-mode .nav-btn:hover { 
    background: #334155; 
    color: var(--primary-color); 
}

html.dark-mode .order-card,
html.dark-mode .garage-card,
html.dark-mode .uiverse-card {
    border-color: #334155;
}

/* border-color shorthand yukarıda sol kenarın renkli accent'ini de gri
   yaptığı için (aynı özgüllük, sonraki kural kazanır), burada geri veriliyor. */
html.dark-mode .order-card {
    border-left-color: var(--order-accent, #475569);
}

html.dark-mode .order-card-top {
    border-bottom-color: #334155;
}

html.dark-mode .tracker-step:not(:last-child)::after {
    background: #334155;
}

html.dark-mode .tracker-step .dot {
    border-color: #334155;
    color: #64748b;
}

html.dark-mode .tracker-step .label {
    color: #64748b;
}

html.dark-mode .tracker-step.done:not(:last-child)::after {
    background: var(--primary-color);
}

/* Güven Kartları Gece Modu Eki */
html.dark-mode .uiverse-card {
    background: #1e293b;
    border-color: #334155;
}

html.dark-mode .uiverse-card h3 {
    color: #f1f5f9;
}

html.dark-mode .uiverse-card p {
    color: #cbd5e1;
}

/* ==========================================================================
   21. MOBİL UYUMLULUK VE KAYDIRMALI MENÜLER (MEDIA QUERIES)
   ========================================================================== */

@media (max-width: 992px) {
    .profile-wrapper { 
        flex-direction: column; 
        margin-top: 80px; 
    }
    
    .profile-sidebar { 
        max-width: 100%; 
    }
    
    .footer-grid { 
        grid-template-columns: 1fr 1fr; 
    }
}

@media (max-width: 768px) {
    .menu-toggle { 
        display: block; 
    }
    
    nav { 
        position: absolute; 
        top: 100%; 
        left: 0; 
        width: 100%; 
        background: rgba(0,0,0,0.95); 
        flex-direction: column; 
        padding: 20px; 
        display: none; 
        border-bottom: 3px solid var(--primary-color); 
    }
    
    nav.active {
        display: flex;
    }

    /* Profil sayfası: tab menüsü dikey yığın yerine yatay kaydırmalı pill satırı olur */
    .profile-tabs {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
    }

    .profile-tabs .tab-btn {
        flex: 0 0 auto;
        padding: 10px 16px;
        white-space: nowrap;
    }

    .hero-content h1 {
        font-size: 2.2rem; 
    }
    
    .modern-form .form-row { 
        flex-direction: column; 
    }
    
    .brand-card { 
        min-width: 200px; 
    }
    
    .footer-grid { 
        grid-template-columns: 1fr; 
        gap: 30px; 
        text-align: center; 
    }
    
    .features-grid { 
        grid-template-columns: 1fr; 
    }
    
    /* Mobil Diyagram Ayarları - Kaydırmalı Sekmeler */
    .diagram-tabs-top, 
    .diagram-tabs-bottom {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
    }
    
    .diagram-tabs-top::-webkit-scrollbar, 
    .diagram-tabs-bottom::-webkit-scrollbar {
        display: none; 
    }
    
    .d-tab {
        min-width: 110px;
        flex-shrink: 0;
        padding: 10px;
        font-size: 0.85rem;
    }
    
    .d-tab i { 
        font-size: 1.4rem; 
    }
    
    .diagram-main-layout {
        height: 420px;
    }

    .diagram-container {
        height: 420px;
    }

    /* Noktalar masaüstünde geniş bir alana (550px yükseklik) göre
       yerleştirilmişti; dar mobil kapta aynı sabit 45px boyutuyla üst üste
       biniyorlardı. Burada hem daha küçük yapılıyor hem de birbirine en
       yakın iki nokta (elektrik/süspansiyon) dikeyde ayrılıyor. */
    .hotspot {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }

    .hotspot[data-target="elektrik"] {
        top: 38% !important;
    }

    .hotspot[data-target="suspansiyon"] {
        top: 58% !important;
    }

    .diagram-sidebar {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%; 
        border-left: none; 
        z-index: 30;
    }
    
    .diagram-sidebar.active { 
        width: 100%; 
    }
    
    .sidebar-inner-content { 
        width: 100%; 
        padding: 20px; 
    }
    
    .diagram-sidebar h3 { 
        font-size: 1.2rem; 
    }
    
    .diagram-sidebar p { 
        font-size: 0.85rem; 
    }
    
    .price-stok-group { 
        padding: 15px; 
    }
    
    .info-fiyat strong {
        font-size: 1.3rem;
    }
}

/* ==========================================================
   HATA DÜZELTMELERİ (FOOTER VE KARANLIK MOD LOGOLARI)
   ========================================================== */

/* Footer başlıkları karanlık moda geçse bile HER ZAMAN beyaz kalsın */
footer h3, 
footer h4 {
    color: #ffffff !important;
    margin-bottom: 15px;
}

/* Karanlık modda, siyah logoların arka planına şık bir beyaz fon ver */
html.dark-mode .brand-card img {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Karanlık modda marka isimlerinin kesinlikle beyaz kalmasını sağla */
html.dark-mode .brand-card span {
    color: #ffffff !important;
}
/* ==========================================================
   HATA DÜZELTMELERİ VE PROFİL (UIVERSE) YÜZEN ETİKET CSS'LERİ
   ========================================================== */

/* 1. Üst Navigasyondaki Siyah Yazı Hatasını Giderme (Gece Modu) */
html.dark-mode .user-info strong {
    color: #ffffff !important;
}
html.dark-mode .user-info span {
    color: #cbd5e1 !important;
}

/* 2. Premium Uiverse Form Inputları (Yüzen Etiket - Floating Label) */
.premium-input-group { 
    position: relative; 
    margin-bottom: 20px; 
}
.premium-input { 
    width: 100%; 
    padding: 18px 15px; 
    border: 2px solid #e2e8f0; 
    border-radius: 10px; 
    background-color: transparent !important; 
    color: var(--text-color); 
    font-size: 1rem; 
    outline: none; 
    transition: all 0.3s ease; 
}
.premium-label { 
    position: absolute; 
    left: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: #64748b; 
    transition: all 0.3s ease; 
    pointer-events: none; 
    background: var(--white); 
    padding: 0 5px; 
}

/* Kutuya tıklanınca veya içinde yazı varken etiketin yukarı kayması */
.premium-input:focus, 
.premium-input:not(:placeholder-shown) { 
    border-color: var(--primary-color); 
    box-shadow: 0 0 10px rgba(230, 33, 23, 0.1);
}
.premium-input:focus ~ .premium-label, 
.premium-input:not(:placeholder-shown) ~ .premium-label { 
    top: 0; 
    font-size: 0.85rem; 
    color: var(--primary-color); 
    font-weight: 700; 
}

/* 3. Profil Sayfası Gece Modu Uyumları */
html.dark-mode .dashboard-body { 
    background-color: #0f172a; 
}
html.dark-mode .profile-sidebar, 
html.dark-mode .profile-content { 
    background-color: #1e293b; 
    border-color: #334155; 
}
html.dark-mode .premium-input { 
    border-color: #334155; 
    color: #f1f5f9; 
}
html.dark-mode .premium-label { 
    background: #1e293b; 
    color: #94a3b8; 
}
html.dark-mode .premium-input:focus ~ .premium-label, 
html.dark-mode .premium-input:not(:placeholder-shown) ~ .premium-label { 
    color: var(--primary-color); 
}
html.dark-mode .user-brief h3 { 
    color: #f1f5f9; 
}
html.dark-mode .custom-modal .modal-content {
    background-color: #1e293b;
    border: 1px solid #334155;
}
html.dark-mode .custom-modal h3 {
    color: #f1f5f9;
}
/* ==========================================================================
   ÖZEL FORM DOĞRULAMA (CUSTOM VALIDATION) TASARIMI
   ========================================================================== */

/* Hatalı input kırmızıya döner ve parlar */
.input-error {
    border-color: #ef4444 !important;
    background-color: #fffaf9 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2) !important;
}

/* Hata mesajı yazısı */
.custom-error-msg {
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: 600;
    display: block;
    margin-top: 6px;
    margin-left: 5px;
    animation: shakeError 0.4s ease-in-out;
    text-align: left;
}

/* Gece modunda hata mesajı */
html.dark-mode .input-error {
    background-color: rgba(239, 68, 68, 0.05) !important;
}

/* Titreme Animasyonu */
@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}
/* ==========================================================================
   HAKKIMIZDA SAYFASI ÖZEL TASARIMLARI (GARANTİLİ GÜNCELLEME)
   ========================================================================== */

/* Merkeze Alınmış Yazı Alanı */
.about-text-center {
    margin-bottom: 70px;
}

/* Şık Liste Düzeni */
.about-check-list-center { 
    list-style: none !important; /* Standart siyah noktaları kesinlikle gizler */
    padding: 0; 
    margin: 0 auto; 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
}

.about-check-list-center li { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-weight: 600; 
    color: var(--text-color); 
    background: var(--white);
    padding: 12px 25px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    transition: var(--transition);
}

.about-check-list-center li:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
}

.about-check-list-center li i { 
    color: var(--primary-color); 
    font-size: 1.2rem; 
}

/* İstatistik (Sayaç) Kutusu - YATAY DÜZEN */
.stats-wrapper { 
    background: #1e293b; 
    padding: 50px 30px; 
    border-radius: 20px; 
    margin-bottom: 80px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); 
}

.stats-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr) !important; /* 4 Kutu Yan Yana Dizilmesi ZORUNLU KILINDI */
    gap: 20px; 
    text-align: center; 
    align-items: center;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat-box i { 
    font-size: 3rem; 
    color: var(--primary-color); 
    margin-bottom: 15px; 
}

.stat-box h3 { 
    font-size: 2.8rem; 
    color: white; 
    margin-bottom: 5px; 
    font-weight: 800; 
    line-height: 1;
}

.stat-box p { 
    color: #94a3b8; 
    font-size: 0.95rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 600; 
    margin: 0;
}

/* Karanlık Mod Uyumları */
html.dark-mode .about-text-center h2 { color: #f1f5f9; }
html.dark-mode .about-check-list-center li { background: #1e293b; color: #f1f5f9; border-color: #334155; }
html.dark-mode .stats-wrapper { background: #0f172a; border: 1px solid #334155; }

/* Mobil Uyum */
@media (max-width: 992px) {
    .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 40px; }
}
@media (max-width: 576px) {
    .stats-grid { grid-template-columns: 1fr !important; }
    .about-check-list-center { flex-direction: column; align-items: stretch; text-align: center; }
    .about-check-list-center li { justify-content: center; }
}
/* ==========================================================================
   GÜNCELLENMİŞ HAKKIMIZDA HERO TASARIMI (KESİN ÇÖZÜM)
   ========================================================================== */

/* Hakkımızda Sayfası İçin Özel Hero Kapsayıcısı */
.about-hero {
    height: 45vh; /* Başlığın yüksekliği */
    background-color: #0f172a; /* Resim yüklenmezse arka plan rengi */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Arka plan resmi sabit kalsın (Parallax efekti) */
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    margin-top: 70px; /* Header yüksekliği kadar boşluk */
    transition: background-image 0.8s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Diğer öğelerin üzerinde kalsın */
}

/* Okunabilirlik İçin Arka Plan Katmanı (Overlay) */
.about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Koyu bir gradyan ekliyoruz */
    background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9));
    z-index: -1; /* Arka plan resminin altında kalsın */
}

/* Metin İçerik Kapsayıcısı */
.about-hero-content {
    position: relative;
    z-index: 10; /* Overlay üzerinde kalsın */
    text-align: center;
    color: #fff; /* Metin rengi beyaz */
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Ana Başlık (Hakkımızda) */
.about-hero-title {
    font-size: 3.5rem; /* Masaüstü başlık boyutu */
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Okunabilirlik için gölge */
    color: #fff;
}

/* Slogan Metni (Pırıl Pırıl, Okunabilir Hale Getirme) */
.about-hero-slogan {
    font-size: 1.1rem;
    color: #cbd5e1; /* Soluk beyaz, okunabilir */
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Gölge ile okunabilirliği artırıyoruz */
}

/* Gece Modu Uyumları */
html.dark-mode .about-hero {
    background-color: #0f172a; /* Daha koyu renk */
}
html.dark-mode .about-hero-overlay {
    background-image: linear-gradient(rgba(10, 15, 30, 0.95), rgba(10, 15, 30, 0.95)); /* Çok daha koyu bir gradyan */
}
html.dark-mode .about-hero-title, 
html.dark-mode .about-hero-slogan {
    color: #fff; /* Gece modunda da beyaz kalsın */
}

/* Mobil Uyumlu Tasarım */
@media (max-width: 768px) {
    .about-hero {
        height: 35vh; /* Mobilde daha kısa */
    }
    .about-hero-title {
        font-size: 2.2rem; /* Mobilde başlık boyutu */
    }
    .about-hero-slogan {
        font-size: 1rem; /* Mobilde slogan boyutu */
    }
}
/* ==========================================================================
   İLETİŞİM SAYFASI ÖZEL TASARIMI
   ========================================================================== */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: stretch;
}
.contact-info-panel {
    background: #0f172a;
    color: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.03"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
.c-info-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}
.c-info-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-info-item strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #f1f5f9;
}
.c-info-item p {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}
.contact-form-panel {
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

html.dark-mode .contact-form-panel { background: #1e293b; border-color: #334155; }
html.dark-mode .map-container { border-color: #334155; }

@media (max-width: 992px) {
    .contact-wrapper { grid-template-columns: 1fr; }
}
/* ==========================================================================
   İLETİŞİM SAYFASI HARİTA PANELİ VE GECE MODU SİHRİ
   ========================================================================== */

/* Harita Kapsayıcı Kartı */
.map-section-wrapper {
    margin-top: 60px;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: var(--transition);
}

/* Haritanın Üstündeki Şık Başlık */
.map-header {
    padding: 25px 30px;
    background: #0f172a;
    color: white;
    text-align: center;
}
.map-header h2 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: white;
}
.map-header p {
    color: #94a3b8;
    margin: 0;
    font-size: 0.95rem;
}

/* Harita Iframe Ayarları */
.map-container {
    height: 450px;
    width: 100%;
    line-height: 0; /* Altındaki gereksiz boşluğu siler */
}
.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    transition: filter 0.5s ease; /* Gece moduna geçerken yumuşak geçiş */
}

/* =========================================
   DARK MODE HARİTA FİLTRESİ (SİHİRLİ KOD)
   ========================================= */
html.dark-mode .map-section-wrapper {
    background: #1e293b;
    border-color: #334155;
}

html.dark-mode .map-container iframe {
    /* Bu filtre renkleri tersine çevirip haritayı gerçek bir "Dark Mode" haritası yapar! */
    filter: invert(90%) hue-rotate(180deg) brightness(85%) contrast(85%);
}

/* ==========================================================================
   MOBİL TİPOGRAFİ VE BOŞLUK SIKILAŞTIRMASI
   Masaüstü için ayarlanmış büyük başlık/istatistik boyutları ve geniş bölüm
   boşlukları mobilde küçük ekrana taşınmadan olduğu gibi kalıyordu; bu da
   "her şey aşırı büyük ve dağınık görünüyor" hissine yol açıyordu. Bazı
   başlıklar satır-içi style ile boyutlandırıldığı, bazı class'lar (ör.
   .stats-wrapper/.stat-box) ise dosyanın daha aşağısında ikinci kez
   tanımlandığı için (aksi halde kaskad sırasında onlar kazanıyordu) bu blok
   dosyanın en sonuna, tüm kuralları !important ile ezerek eklendi.
   ========================================================================== */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.5rem !important;
        margin-bottom: 20px !important;
    }

    .brands-section {
        padding: 30px 0 !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    #dyn-home-diag-title {
        font-size: 1.6rem !important;
    }

    #dyn-home-diag-desc {
        font-size: 0.9rem !important;
    }

    #sec-home-diagram {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }

    #sec-home-features {
        margin-bottom: 40px !important;
    }

    #dyn-story-title {
        font-size: 1.7rem !important;
        margin-bottom: 15px !important;
    }

    #dyn-story-p1, #dyn-story-p2 {
        font-size: 1rem !important;
    }

    .about-text-center {
        margin-bottom: 35px !important;
    }

    .stats-wrapper {
        padding: 30px 20px !important;
        margin-bottom: 40px !important;
    }

    .stat-box i {
        font-size: 2rem !important;
        margin-bottom: 8px !important;
    }

    .stat-box h3 {
        font-size: 2rem !important;
    }

    /* Footer mobilde tüm sütunları ortalıyor (text-align:center) ama
       "Sahibinden/Oto Çıkma" butonları bir flex kutusu olduğundan text-align
       onları etkilemiyor ve sola yapışık kalıyorlardı — flex kutusunu da
       ortalıyoruz. */
    .market-links {
        align-items: center !important;
    }

    /* Sabit (fixed) WhatsApp balonu ve "yukarı çık" butonu ekranın alt
       köşelerinde asılı durduğundan, sayfanın en altına kadar inildiğinde
       footer'daki telif hakkı yazısının üzerine biniyordu. Footer'a yeterli
       alt boşluk vererek bu çakışmayı önlüyoruz. */
    .footer-bottom {
        padding-bottom: 90px !important;
    }
}