/**
 * Cicekci E-Ticaret Sistemi - Ana Stil Dosyasi
 * Referans Tasarima Uygun Profesyonel Tasarim
 * @package Cicekci
 * @version 2.0.0
 */

/* =====================================================
   CSS DEGISKENLERI (RENK PALETI)
   ===================================================== */
:root {
    /* Ana Renkler */
    --primary-green: #2ECC71;
    --primary-green-dark: #27AE60;
    --primary-green-light: #58D68D;
    --accent-dark: #374151;
    --accent-dark-deep: #1f2937;
    --accent-dark-light: #4b5563;

    /* Nötr Renkler */
    --dark: #2C3E50;
    --dark-light: #34495E;
    --gray-dark: #7F8C8D;
    --gray: #95A5A6;
    --gray-light: #BDC3C7;
    --gray-lighter: #ECF0F1;
    --white: #FFFFFF;
    --off-white: #F8F9FA;

    /* Durum Renkleri */
    --success: #2ECC71;
    --danger: #E74C3C;
    --warning: #F39C12;
    --info: #3498DB;

    /* Tipografi */
    --font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-size-xxxl: 32px;

    /* Alanlar */
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 50px;

    /* Golge */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
    --shadow-xl: 0 12px 36px rgba(0,0,0,0.2);

    /* Gecis */
    --transition-fast: 0.15s ease;
    --transition: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* =====================================================
   RESET & TEMEL
   ===================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.6;
    color: var(--dark);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sticky Footer: Wrapper yaklasimi - body'ye eklenen 3. parti elementler layout bozmaz */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
}



a {
    color: var(--primary-green);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-green-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

button {
    font-family: var(--font-family);
    cursor: pointer;
}

/* =====================================================
   UST BAR (Telefon, Email, Linkler)
   ===================================================== */
.top-bar {
    background: var(--off-white);
    border-bottom: 1px solid var(--gray-lighter);
    padding: 8px 0;
    font-size: 13px;
}
.top-bar a, .top-bar strong { font-weight: 400; font-size: 13px; }

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-bar-left a,
.top-bar-left span {
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.top-bar-left a:hover {
    color: var(--primary-green);
}

.top-bar-left i {
    color: var(--primary-green);
    font-size: 14px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-bar-right a {
    color: var(--gray-dark);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.top-bar-right a:hover {
    color: var(--primary-green);
    background: rgba(46, 204, 113, 0.1);
}

/* =====================================================
   DUYURU BARI (Yesil Serit)
   ===================================================== */
.duyuru-bar {
    background: var(--primary-green);
    color: var(--white);
    padding: 10px 0;
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    min-height: 40px;
}

.duyuru-bar i {
    margin-right: 8px;
}

.duyuru-bar a {
    color: var(--white);
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .duyuru-bar-masaustu { display: none !important; }
}

/* =====================================================
   PALET 52'ye ÖZEL — Duyuru barı içinde ürün arama (nav'dan taşındı)
   Bu class'lar header.php'de YALNIZ header_palet==='palet_52' iken render edilir → ekstra scope gerekmez.
   Duyuru içeriği (sol/orta, flex:1+overflow) ile arama (sağ, sabit) arasında gap:16px → ASLA değmez.
   ===================================================== */
/* --p52-box-w: kutuların HEDEF genişliği = modern header'daki "Sipariş Takip" butonunun SOL kenarından
   container İÇERİK sağ kenarına (TR bayrağı) kadar olan İÇERİK-SABİT mesafe. Headless ölçüm: 408px
   (Sipariş Takip butonu 134 + Hesabım/♥/🛒/dil grubu & gap 274). Hem duyuru araması hem nav bölge seçici
   bu genişlikte + container sağına yaslı (margin-right:0) → SAĞ kenar TR bayrağında, SOL kenar Sipariş
   Takip'te → EŞİT boyut + dikey simetrik (istenen tasarım). Değişkeni YALNIZ palet_52'de render edilen
   .duyuru-arama/.p52-nav-bolge tüketir (wrapper data-header-palet="palet_8") → gerçek palet_8'e etki YOK.
   NOT: giriş-yapılmış "Hesabım" durumuna göre ölçüldü (ekran referansı); misafir "Üye Girişi" biraz geniş. */
[data-header-palet="palet_8"] { --p52-box-w: 408px; }
.duyuru-bar.duyuru-bar-arama { padding: 5px 0; }
.duyuru-bar-arama .container {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
}
/* ── palet_52 duyuru: SOLDAN SAĞA DAKTİLO (typewriter) — içerik SOLA hizalı → sabit soldan başlayıp sağa yazılır ──
   Efekt js/main.js initDuyuruTypewriter (harf harf yaz → 4sn dur → sil → döngü). İkon solda sabit, metin sağa
   doğru uzar. + yanıp sönen daktilo imleci (::after). Scope .duyuru-bar-arama → yalnız palet_52 (diğer paletler
   typewriter'ı ortada/kendi düzeninde kullanmaya devam eder). Tüm cihazlarda çalışır (metin taşarsa ellipsis). */
.duyuru-bar-arama .duyuru-bar-icerik {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;           /* soldan sağa daktilo: sabit sol başlangıç */
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
}
.duyuru-bar-arama .duyuru-bar-icerik i { margin-right: 0; flex: 0 0 auto; }
.duyuru-bar-arama .typewriter-duyuru { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.duyuru-bar-arama .typewriter-duyuru::after {
    content: '|'; margin-left: 1px; font-weight: 400; color: currentColor;
    animation: p52-daktilo-caret 1s step-end infinite;   /* yanıp sönen daktilo imleci */
}
@keyframes p52-daktilo-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .duyuru-bar-arama .typewriter-duyuru::after { animation: none; }
}
.duyuru-bar-arama .duyuru-arama {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 36px;
    /* Sağ kenar = container sağı (TR bayrağı); genişlik = --p52-box-w → sol kenar Sipariş Takip'te başlar
       (ST'yi GEÇMEZ). Bu TABAN kural mobil/tablet (768–991, menü YOK) içindir → duyuru metnine ~200px bırak.
       Masaüstünde (≥992) aşağıdaki media, nav menüsüyle çarpışmasın + bölge seçici ile AYNI genişlikte olsun
       diye calc(100% - 670px)'e daraltır. Her iki kutu da aynı .container + aynı formül → EŞİT + simetrik. */
    margin-right: 0;
    width: min(var(--p52-box-w, 408px), calc(100% - 200px));
    max-width: var(--p52-box-w, 408px);
    background: #fff;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 8px;                         /* alttaki .hum-pill butonları (7px) gibi — pill DEĞİL */
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: box-shadow .18s ease, border-color .18s ease;
}
.duyuru-bar-arama .duyuru-arama:focus-within {
    border-color: var(--primary-green, #16a34a);
    box-shadow: 0 3px 12px rgba(0,0,0,.16), 0 0 0 3px rgba(22,163,74,.15);
}
.duyuru-bar-arama .duyuru-arama-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    height: 100%;
    padding: 0 2px 0 18px;
    font-size: 13px;
    font-weight: 500;
    color: #2b3242;
    letter-spacing: .1px;
}
.duyuru-bar-arama .duyuru-arama-input::placeholder { color: #9aa2ad; font-weight: 400; }
.duyuru-bar-arama .duyuru-arama-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;                     /* arka fon YOK — sade ikon */
    cursor: pointer;
    width: 40px;
    height: 100%;
    color: #8b93a1;                             /* muted ikon */
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s ease;
}
.duyuru-bar-arama .duyuru-arama-btn:hover { color: var(--primary-green, #16a34a); }
.duyuru-bar-arama .duyuru-arama-btn:focus-visible { color: var(--primary-green, #16a34a); outline: none; }
/* Masaüstü (≥992, nav görünür): aramayı nav bölge seçici ile AYNI daraltma formülüne al → ikisi de
   min(--p52-box-w, calc(100% - 670px)) → geniş ekranda 408px, dar masaüstünde eşit küçülür (kompakt menüye
   çarpmaz). Böylece arama ile bölge her masaüstü genişliğinde birebir EŞİT + aynı sağ/sol kenar (simetrik). */
@media (min-width: 992px) {
    .duyuru-bar-arama .duyuru-arama { width: min(var(--p52-box-w, 408px), calc(100% - 670px)); }
}
@media (max-width: 767.98px) {
    .duyuru-bar-arama .duyuru-arama { display: none; }
    .duyuru-bar-arama .container { justify-content: center; }
}

/* =====================================================
   ANA HEADER
   ===================================================== */
.site-header {
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.header-top {
    background: var(--off-white);
    border-bottom: 1px solid var(--gray-lighter);
}

.header-top a {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.header-main {
    padding: 12px 0;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    height: 60px;
    width: auto;
    max-width: 100%;
    transition: var(--transition);
}

.logo:hover img {
    transform: scale(1.02);
}

.logo-text {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--dark);
}

.logo-text span {
    color: var(--primary-green);
}

/* Arama Kutusu - Premium Tasarim */
.search-form {
    width: 100%;
    max-width: 100%;
}

.search-form .input-group {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.search-form .input-group:hover {
    border-color: #dee2e6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.search-form .input-group:focus-within {
    background: #fff;
    border-color: var(--primary-green);
    box-shadow: 0 4px 16px rgba(46, 204, 113, 0.15);
}

.search-form .search-icon {
    display: flex;
    align-items: center;
    padding-left: 18px;
    color: #9ca3af;
    font-size: 16px;
    background: transparent;
    border: none;
}

.search-form .input-group:focus-within .search-icon {
    color: var(--primary-green);
}

.search-form .form-control {
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    color: #1f2937;
}

.search-form .form-control:focus {
    box-shadow: none;
    outline: none;
}

.search-form .form-control::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.search-form .btn {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    border: none;
    padding: 10px 20px;
    margin: 3px;
    border-radius: 10px !important;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

.search-form .btn:hover {
    background: linear-gradient(135deg, var(--primary-green-dark) 0%, #1e8449 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}

.search-form .btn:active {
    transform: translateY(0);
}

.search-form .btn i {
    font-size: 16px;
}

/* Bolge Secici */
.bolge-secici {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-green);
    color: var(--white);
    padding: 10px 16px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: var(--transition);
}

.bolge-secici:hover {
    background: var(--primary-green-dark);
}

.bolge-secici i {
    font-size: 16px;
}

/* Header Aksiyonlar */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--dark);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-align: center;
    transition: var(--transition);
    position: relative;
}

.header-action:hover {
    color: var(--primary-green);
}

/* Üyelik Hover Dropdown */
.uyelik-dropdown {
    cursor: pointer;
}

.uyelik-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: -10px;
    min-width: 160px;
    background: var(--white);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all 0.2s ease;
    z-index: 1000;
}

/* Fare ikon ile menu arasinda kaybolmasin diye gorünmez kopru */
.uyelik-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.uyelik-dropdown:hover .uyelik-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.uyelik-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 7px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.uyelik-menu-item:hover {
    background: #f0faf4;
    color: var(--primary-green);
}

.uyelik-menu-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.header-action i {
    font-size: 22px;
}

.header-action .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444; /* Bildirim zili/favori rozetiyle ayni kirmizi (eski var(--accent-dark) koyu gri kotu duruyordu) */
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--white); /* zil rozeti gibi beyaz halka → ikondan ayrisir */
}

/* =====================================================
   NAVIGASYON MENUSU
   ===================================================== */
.main-nav {
    background: var(--white);
    border-top: 1px solid var(--gray-lighter);
    border-bottom: 1px solid var(--gray-lighter);
}

/* Logo Menu Yaninda */
@media (min-width: 992px) {
    .header-main-logo-nav { display: none !important; }
}
.nav-logo-yaninda {
    flex: 0 0 auto;
    margin-right: 28px;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.nav-logo-yaninda img {
    display: block;
    width: auto;
}
.nav-logo-yaninda .nav-logo-text {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--gray-dark, #1f2937);
    white-space: nowrap;
}
.nav-container-flex.nav-with-logo {
    display: flex;
    align-items: center;
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 12px;
}
.nav-with-logo .navbar-nav {
    flex: 1;
    justify-content: flex-end;
    margin: 0;
    align-items: center;
}
.nav-with-logo .navbar-nav .nav-link {
    display: flex;
    align-items: center;
}

.navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.navbar-nav .nav-item {
    position: relative;
}

.navbar-nav .nav-item + .nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: #e0e0e0;
}

.navbar-nav .nav-link {
    color: var(--dark);
    font-weight: 500;
    font-size: var(--font-size-base);
    padding: 14px 18px;
    transition: var(--transition);
    position: relative;
}

.navbar-nav .nav-link:not(.dropdown-toggle)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--primary-green);
    transition: var(--transition);
    border-radius: 3px 3px 0 0;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-green);
}

.navbar-nav .nav-link:not(.dropdown-toggle):hover::after,
.navbar-nav .nav-link:not(.dropdown-toggle).active::after {
    width: 100%;
}

/* Dropdown Menu — Hover ile acilir */
@media (min-width: 992px) {
    .nav-item.dropdown {
        position: relative;
    }
    .nav-item.dropdown > .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
    }
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
        animation: dropdownFadeIn .2s ease;
    }
    .nav-item.dropdown > .dropdown-toggle::after {
        transition: transform .2s;
    }
    .nav-item.dropdown:hover > .dropdown-toggle::after {
        transform: rotate(180deg);
    }
}
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.nav-item .dropdown-menu {
    border: none;
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius);
    padding: 10px 0;
    min-width: 200px;
}

/* 10+ item varsa 2 sutun */
.nav-item .dropdown-menu.dropdown-multi {
    min-width: 400px;
}
.nav-item .dropdown-menu.dropdown-multi .dropdown-multi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.nav-item .dropdown-menu.dropdown-multi .dropdown-multi-grid .dropdown-item {
    white-space: nowrap;
}
@media (max-width: 991px) {
    .nav-item .dropdown-menu.dropdown-multi {
        min-width: auto;
    }
    .nav-item .dropdown-menu.dropdown-multi .dropdown-multi-grid {
        grid-template-columns: 1fr;
    }
}

.dropdown-menu .dropdown-item {
    padding: 10px 20px;
    font-weight: 500;
    color: var(--dark);
    transition: var(--transition);
}

.dropdown-menu .dropdown-item:hover {
    background: rgba(46, 204, 113, 0.1);
    color: var(--primary-green);
}

/* =====================================================
   URUN KARTI (Referans Tasarima Uygun)
   ===================================================== */
/* =====================================================
   URUN KARTI - MODERN KURUMSAL TASARIM
   ===================================================== */
.urun-kart {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
}

.urun-kart:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: #e8e8e8;
}

/* Urun Resmi — Shimmer Lazy Load */
@keyframes urun-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.urun-resim {
    display: block;
    position: relative;
    overflow: hidden;
    padding-top: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: urun-shimmer 1.6s ease-in-out infinite;
}

.urun-resim > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.urun-resim img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.urun-resim img.yukld {
    opacity: 1;
}

/* Resim yuklendi — shimmer durdur (CPU tasarrufu) */
.urun-resim.yukld-ok {
    animation: none;
    background: #f5f5f7;
}

.urun-kart:hover .urun-resim img {
    transform: scale(1.05);
}

/* Favori Butonu */
.urun-favori {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
    opacity: 0;
    padding: 0;
}

.urun-kart:hover .urun-favori {
    opacity: 1;
}

.urun-favori.active {
    opacity: 1;
    background: #fff;
}

.urun-favori i {
    font-size: 16px;
    color: #bbb;
    transition: all 0.2s ease;
    line-height: 1;
}

.urun-favori:hover i {
    color: #e74c3c;
    transform: scale(1.15);
}

.urun-favori.active i {
    color: #e74c3c;
}

/* Urun Slogan Badge */
.urun-slogan {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: #fff;
    padding: 4px 12px;
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Urun Bilgi */
.urun-bilgi {
    padding: 14px 18px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Urun Adi */
.urun-ad {
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #253D4E;
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.2px;
}

.urun-ad a {
    color: inherit;
    text-decoration: none;
}

.urun-ad a:hover {
    color: var(--primary-green);
}

/* Fiyat Alani */
.urun-fiyat-alan {
    font-family: 'Quicksand', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-bottom: 10px;
    margin-top: auto;
}

.badge-indirim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e74c3c;
    color: var(--white);
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    flex-shrink: 0;
}

.urun-fiyat-alan .eski-fiyat {
    font-size: 12px;
    color: #aaa;
    text-decoration: line-through;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: flex-start;
}

.urun-fiyat-alan .guncel-fiyat {
    font-size: 18px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.3px;
    white-space: nowrap;
    display: inline-flex;
    align-items: flex-start;
}

.fiyat-kurus {
    font-size: 0.7em;
    font-weight: 500;
    margin-top: 0;
    letter-spacing: 0;
}

/* Fiyat Gizli Uyari */
.fiyat-gizli-uyari {
    padding: 6px 0;
    margin-top: auto;
    margin-bottom: 10px;
}
.fiyat-gizli-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    padding: 5px 10px;
    background: #f3f4f6;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    transition: all .2s;
    line-height: 1.3;
}
.fiyat-gizli-link:hover {
    color: #059669;
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.fiyat-gizli-link i {
    font-size: 10px;
}
.fiyat-gizli-kucuk {
    color: #9ca3af;
    font-size: 13px;
}
.fiyat-gizli-mesaj {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
}

/* Teslimat Butonu */
.btn-teslimat {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 14px;
    background: transparent;
    color: #444;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    letter-spacing: 0.2px;
}

.btn-teslimat:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}

.btn-teslimat-wrap {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.btn-teslimat-wrap .btn-teslimat {
    flex: 1;
    min-width: 0;
}
/* --- Hizli Sepet Butonu - Kurumsal Tasarim --- */
.btn-hizli-sepet {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: linear-gradient(145deg, #ffffff, #f1f5f9);
    color: #475569;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04),
                inset 0 1px 0 rgba(255,255,255,0.9);
}
.btn-hizli-sepet::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.btn-hizli-sepet::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    pointer-events: none;
}
.btn-hizli-sepet i {
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1;
}
/* Hover */
.btn-hizli-sepet:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(16,185,129,0.28), 0 3px 8px rgba(0,0,0,0.06);
}
.btn-hizli-sepet:hover::before { opacity: 1; }
.btn-hizli-sepet:hover::after {
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.2);
}
.btn-hizli-sepet:hover i {
    color: #fff;
    transform: scale(1.18) rotate(-12deg);
}
/* Active (basili) */
.btn-hizli-sepet:active {
    transform: translateY(-1px) scale(0.93);
    transition-duration: 0.1s;
}
.btn-hizli-sepet:active i {
    transform: scale(0.85) rotate(0deg);
}
/* Eklendi (sepete eklendi) */
.btn-hizli-sepet.eklendi {
    pointer-events: none;
}
.btn-hizli-sepet.eklendi::before { opacity: 1; }
.btn-hizli-sepet.eklendi::after {
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.2);
}
.btn-hizli-sepet.eklendi i {
    color: #fff;
    animation: bhs-check 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes bhs-check {
    0%  { transform: scale(0) rotate(0deg); opacity: 0; }
    60% { transform: scale(1.35) rotate(-8deg); opacity: 1; }
    100%{ transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Resim uzerindeki sepet ikonu - masaustunde gizli */
.btn-hizli-sepet-resim { display: none; }

/* ============================================================
   "SEPETTE" OVERLAY — urun karti resminde (urun_kart_html)
   Urun mevcut sepetteyse resmin uzerinde: tik + "Sepete Eklendi"
   + "Sipariş Formuna Git" (link) + tek-tikla "Sepetten Cikar" (JS).
   .urun-resim (position:relative, kare) icini doldurur; favori(z:3)/
   slogan(z:2) rozetleri ustte kalsin diye z-index:1.
   ============================================================ */
.uk-sepette {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px;
    text-align: center;
    background: linear-gradient(180deg, rgba(15,23,42,.40) 0%, rgba(15,23,42,.60) 100%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: ukSepetteIn .34s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ukSepetteIn { from { opacity: 0; } to { opacity: 1; } }
.uk-sepette.uk-sepette-cikis { animation: ukSepetteOut .28s ease forwards; }
@keyframes ukSepetteOut { to { opacity: 0; visibility: hidden; } }

/* Ust alan (tik + yazi) — tiklanabilir link, ust bolgeyi doldurur → tikla siparis sayfasi */
.uk-sepette-ust {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
}
.uk-sepette-tik {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 27px;
    box-shadow: 0 8px 22px rgba(22,163,74,.45), 0 0 0 5px rgba(255,255,255,.16);
    animation: ukTikPop .5s cubic-bezier(.34,1.8,.5,1) .06s both;
}
@keyframes ukTikPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.uk-sepette-yazi {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
    letter-spacing: .2px;
    line-height: 1.2;
}

/* Alt aksiyon cubugu: "Sipariş Formuna Git" (link) + "Sepetten Cikar" (buton) */
.uk-sepette-alt {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
}
.uk-sepette-git {
    flex: 1 1 auto;
    max-width: 220px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.15;
    padding: 11px 12px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(21,128,61,.42);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.uk-sepette-git i { font-size: 15px; flex-shrink: 0; }
.uk-sepette-git span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uk-sepette-git:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(21,128,61,.52); filter: brightness(1.06); color: #fff; }
.uk-sepette-git:active { transform: translateY(0); }
.uk-sepette-sil {
    flex: 0 0 auto;
    width: 46px;
    border: none;
    background: rgba(15,23,42,.92);
    color: #fff;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
    transition: background .2s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.uk-sepette-sil:hover { background: #dc2626; transform: translateY(-1px); }
.uk-sepette-sil:active { transform: scale(.93); }
.uk-sepette-sil.yukleniyor { opacity: .55; pointer-events: none; }

/* Mobil / kucuk kart (2 kolon): daha kompakt; buton metni gerekirse 2 satira sarsin */
@media (max-width: 576px) {
    .uk-sepette { gap: 9px; padding: 10px; }
    .uk-sepette-ust { gap: 8px; }
    .uk-sepette-tik { width: 42px; height: 42px; font-size: 21px; box-shadow: 0 6px 16px rgba(22,163,74,.42), 0 0 0 4px rgba(255,255,255,.16); }
    .uk-sepette-yazi { font-size: 13px; }
    .uk-sepette-alt { gap: 6px; }
    .uk-sepette-git { font-size: 11px; padding: 8px 7px; border-radius: 10px; gap: 5px; white-space: normal; }
    .uk-sepette-git i { font-size: 13px; }
    .uk-sepette-git span { white-space: normal; }
    .uk-sepette-sil { width: 38px; font-size: 14px; border-radius: 10px; }
}
/* Cok dar ekran: tik biraz daha kucuk */
@media (max-width: 360px) {
    .uk-sepette-tik { width: 38px; height: 38px; font-size: 19px; }
    .uk-sepette-yazi { font-size: 12px; }
    .uk-sepette-git { font-size: 10.5px; padding: 7px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .uk-sepette, .uk-sepette-tik { animation: none !important; }
}

.sepet-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 280px;
    max-width: 380px;
    transform: translateX(120%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.sepet-toast.goster {
    transform: translateX(0);
}
.sepet-toast-icon {
    width: 32px;
    height: 32px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 18px;
}
.sepet-toast-body {
    flex: 1;
}
.sepet-toast-body strong {
    display: block;
    font-size: 14px;
    color: #15803d;
    margin-bottom: 2px;
}
.sepet-toast-body a {
    font-size: 13px;
    color: #16a34a;
    font-weight: 600;
    text-decoration: none;
}
.sepet-toast-body a:hover {
    text-decoration: underline;
}
.sepet-toast-close {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* =====================================================
   URUN KART STILLERI (Tema Editoru)
   ===================================================== */

/* Ortak: Puan Yildizi (eski - geri uyumluluk) */
.urun-puan { display:flex;gap:2px;margin-bottom:6px; }
.urun-puan i { font-size:12px;color:#f59e0b; }
.urun-puan .bi-star { color:#d1d5db; }

/* Kart Rating: Yildiz + Puan Skoru + Yorum Sayisi */
.urun-kart-rating { display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px; }
.ukr-stars { display:flex;gap:1px; }
.ukr-stars i { font-size:13px;color:#f59e0b; }
.ukr-stars .bi-star { color:#d1d5db; }
.ukr-stars .bi-star-half { color:#f59e0b; }
.ukr-score { font-size:14px;font-weight:700;color:#1f2937; }
.ukr-sep { color:#d1d5db;font-size:14px; }
.ukr-count { font-size:12px;color:#16a34a;font-weight:600; }
.ukr-count i { font-size:12px;margin-right:2px;color:#9ca3af; }

/* Hizalama Override */
.uk-hiza-sol .urun-bilgi { text-align:left !important; }
.uk-hiza-sol .urun-ad { text-align:left !important; }
.uk-hiza-sol .urun-fiyat-alan { justify-content:flex-start !important; }
.uk-hiza-sol .urun-kart-rating { justify-content:flex-start !important; }
.uk-hiza-orta .urun-bilgi { text-align:center !important; }
.uk-hiza-orta .urun-ad { text-align:center !important; }
.uk-hiza-orta .urun-fiyat-alan { justify-content:center !important; }
.uk-hiza-orta .urun-kart-rating { justify-content:center !important; }

/* Ortak: Stil butonlari */
.uk-buton {
    display:block;width:100%;text-align:center;padding:9px 14px;
    background:var(--primary-green);color:#fff;border:none;border-radius:10px;
    font-size:13px;font-weight:600;text-decoration:none;transition:all 0.2s;
    margin-top:auto;
}
.uk-buton:hover { background:var(--primary-green-dark);color:#fff;transform:translateY(-1px); }

.uk-buton-gradient {
    display:block;width:100%;text-align:center;padding:10px 14px;
    background:linear-gradient(135deg,var(--primary-green),var(--primary-green-dark));
    color:#fff;border:none;border-radius:10px;
    font-size:13px;font-weight:600;text-decoration:none;transition:all 0.2s;
    box-shadow:0 2px 8px rgba(0,0,0,0.12);margin-top:auto;
}
.uk-buton-gradient:hover { transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.18);color:#fff; }

.uk-buton-ikon {
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:10px;margin-left:auto;
    background:var(--primary-green);color:#fff;font-size:16px;
    text-decoration:none;transition:all 0.2s;
}
.uk-buton-ikon:hover { background:var(--primary-green-dark);color:#fff;transform:scale(1.08); }

.uk-alt-buton {
    display:block;width:100%;text-align:center;padding:10px;
    background:color-mix(in srgb, var(--primary-green) 10%, #fff);
    color:var(--primary-green);font-size:12px;font-weight:600;
    text-decoration:none;transition:all 0.2s;border-top:1px solid #f0f0f0;
}
.uk-alt-buton:hover { background:color-mix(in srgb, var(--primary-green) 18%, #fff);color:var(--primary-green-dark); }

.uk-buton-wrap {
    display:flex;gap:6px;align-items:stretch;margin-top:auto;
}
.uk-buton-wrap .uk-buton,
.uk-buton-wrap .uk-buton-gradient { flex:1;min-width:0; }
.uk-buton-wrap .uk-teslimat-alt { flex:1;min-width:0;display:flex;align-items:center; }
.uk-buton-wrap .btn-hizli-sepet { flex-shrink:0; }

.uk-alt-wrap {
    display:flex;align-items:stretch;border-top:1px solid #f0f0f0;
}
.uk-alt-wrap .uk-alt-buton { flex:1;border-top:none; }
.uk-alt-wrap .btn-hizli-sepet {
    flex-shrink:0;width:46px;display:flex;align-items:center;justify-content:center;
    border-radius:0; background:linear-gradient(145deg, #f9fafb, #f0f4f3);
    box-shadow:-1px 0 0 #e5e7eb, inset 0 1px 0 rgba(255,255,255,0.6);
    height:auto; border:none;
}
.uk-alt-wrap .btn-hizli-sepet::before { border-radius:0; }
.uk-alt-wrap .btn-hizli-sepet::after { border-radius:0; box-shadow:none; }
.uk-alt-wrap .btn-hizli-sepet:hover {
    transform:none; box-shadow:-1px 0 0 #e5e7eb, 0 4px 12px rgba(16,185,129,0.2);
}

.uk-tukendi { background:#f5f5f5 !important;color:#999 !important;cursor:not-allowed;pointer-events:none; }
.uk-tukendi-metin { color:#999 !important; }

.uk-teslimat-metin {
    display:block;font-size:11px;font-weight:600;
    color:var(--primary-green);margin-bottom:4px;letter-spacing:0.3px;
}

.uk-teslimat-alt {
    display:block;font-size:11px;font-weight:600;
    color:var(--primary-green);margin-top:4px;
}

/* --- Stil: Merkezi --- */
.uk-merkezi .urun-bilgi { text-align:center; }
.uk-merkezi .urun-ad { text-align:center; }
.uk-merkezi .urun-fiyat-alan { justify-content:center; }
.uk-merkezi .urun-puan { justify-content:center; }
.uk-merkezi .urun-kart-rating { justify-content:center; }

/* --- Stil: Klasik --- */
.uk-klasik { border:1px solid #e5e7eb;border-radius:10px; }
.uk-klasik:hover { border-color:#d1d5db; }
.uk-klasik .urun-bilgi { text-align:left; }
.uk-klasik .urun-ad { text-align:left;font-size:14px;font-weight:500; }
.uk-klasik .urun-favori { opacity:1; }
.uk-klasik-teslimat { display:block;font-size:12px;color:#16a34a;font-weight:600;margin-bottom:8px; }
.uk-klasik-teslimat i { font-size:11px;margin-right:2px; }
.uk-klasik-buton { display:block;text-align:center;padding:9px 14px;border:1.5px solid #d1d5db;border-radius:8px;color:#374151;font-size:13px;font-weight:500;text-decoration:none;transition:all 0.2s; }
.uk-klasik-buton:hover { border-color:var(--primary-green);color:var(--primary-green);background:#f0fdf4; }
.uk-klasik-buton.uk-tukendi { border-color:#e5e7eb;color:#9ca3af;cursor:not-allowed;background:#fafafa; }

/* --- Stil: Vitrin --- */
.uk-vitrin { overflow:hidden; }
.uk-vitrin .urun-bilgi { padding-bottom:0; }
.uk-vitrin .urun-puan { margin-bottom:4px; }

/* --- Stil: Minimal --- */
.uk-minimal { border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.uk-minimal:hover { box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-2px);border-color:#d1d5db; }
.uk-minimal .urun-bilgi { text-align:center;padding:16px 14px 0; }
.uk-minimal .urun-ad { text-align:center;font-size:13px;font-weight:500;margin-bottom:10px;min-height:2.6em;line-height:1.3; }
.uk-minimal .urun-ad a { color:#1f2937; }
.uk-minimal .urun-kart-rating { justify-content:center; }
.uk-minimal-marka { display:block;font-size:13px;font-weight:700;color:#6b7280;margin-bottom:2px; }
.uk-minimal-fiyat-alan { display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:4px; }
.uk-minimal-indirim-badge { background:#ea580c;color:#fff;font-size:14px;font-weight:700;line-height:1.2;padding:6px 10px;border-radius:6px;text-align:center; }
.uk-minimal-indirim-badge span { font-size:10px;font-weight:600;display:block;line-height:1; }
.uk-minimal-fiyatlar { text-align:left; }
.uk-minimal-eski { display:block;font-size:12px;color:#9ca3af;text-decoration:line-through;line-height:1.3; }
.uk-minimal-yeni { display:block;font-size:18px;font-weight:700;color:#1f2937;line-height:1.3; }
.uk-minimal-fiyatlar.uk-minimal-tek { text-align:center; }
.uk-minimal-fiyatlar.uk-minimal-tek .uk-minimal-yeni { font-size:20px; }
.uk-minimal-kdv { font-size:11px;color:#6b7280;margin-top:2px; }
.uk-minimal-sepet { border-top:1px solid #e5e7eb;padding:0;margin:auto -14px 0; }
.uk-minimal-sepet-btn { display:block;text-align:center;color:#374151;font-size:14px;font-weight:500;text-decoration:none;padding:12px 14px;transition:color 0.2s,background 0.2s;border-radius:0 0 11px 11px; }
.uk-minimal-sepet-btn:hover { color:#ea580c;background:#fef2f2; }
.uk-minimal-tukendi { color:#9ca3af !important;pointer-events:none;background:transparent !important; }

/* --- Stil: Modern --- */
.uk-modern { border:none;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.uk-modern:hover { box-shadow:0 6px 24px rgba(0,0,0,0.1);transform:translateY(-3px); }

/* --- Stil: Elegant --- */
.uk-elegant { border:none;border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,0.07); }
.uk-elegant:hover { box-shadow:0 8px 32px rgba(0,0,0,0.12);transform:translateY(-5px); }
.uk-elegant .urun-resim { border-radius:20px 20px 0 0; }

/* --- Stil: Taze Tema --- */
.uk-taze { border:none; border-radius:16px; box-shadow:0 1px 8px rgba(0,0,0,0.04); }
.uk-taze:hover { box-shadow:0 8px 28px rgba(0,0,0,0.09); transform:translateY(-4px); }
.uk-taze .urun-resim { border-radius:16px 16px 0 0; }
.uk-taze .urun-bilgi { padding:16px 18px 18px; }
.uk-taze .urun-slogan {
    position:static; display:inline-block;
    background:#fef6eb; color:#2eac66;
    font-size:13px; font-weight:700;
    padding:5px 14px; border-radius:6px;
    margin-bottom:10px; box-shadow:none;
    line-height:1.4; letter-spacing:0.2px;
    background-image:none;
}
.uk-taze .urun-ad { font-size:15px; font-weight:600; color:#1f2937; margin-bottom:8px; }
.uk-taze .urun-ad a { color:#1f2937; }
.uk-taze .urun-ad a:hover { color:var(--primary-green); }
.uk-taze .urun-puan { margin-bottom:8px; }
.uk-taze .urun-puan i { font-size:16px; }
.uk-taze .urun-fiyat-alan { margin-bottom:10px; align-items:baseline; }
.uk-taze .badge-indirim { font-size:12px; padding:3px 8px; border-radius:6px; }
.uk-taze .eski-fiyat { font-size:13px; }
.uk-taze .guncel-fiyat { font-size:18px; font-weight:800; color:#1f2937; }
.uk-taze-teslimat { display:block; font-size:13px; font-weight:600; color:#2563eb; margin-top:auto; letter-spacing:0.2px; }
.uk-taze-tukendi { color:#ef4444; }

/* --- Stil: Bold --- */
.uk-bold { }
.uk-bold .urun-ad { font-size:15px;font-weight:800; }
.uk-bold .guncel-fiyat { font-size:20px;font-weight:900; }
.uk-bold:hover { transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.1); }

/* --- Stil: Soft --- */
.uk-soft { background:#fafbfc;border:none;border-radius:20px;box-shadow:0 2px 12px rgba(0,0,0,0.04); }
.uk-soft:hover { box-shadow:0 6px 24px rgba(0,0,0,0.08);transform:translateY(-3px); }
.uk-soft .urun-resim { border-radius:20px 20px 0 0; }
.uk-soft .urun-bilgi { text-align:center; }
.uk-soft .urun-ad { text-align:center; }
.uk-soft .urun-fiyat-alan { justify-content:center; }
.uk-soft .urun-kart-rating { justify-content:center; }

.btn-teslimat.tukendi {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

/* Badge'ler (diger sayfalar icin) */
.badge-yeni {
    background: var(--primary-green);
    color: var(--white);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.badge-ozel {
    background: var(--accent-dark);
    color: var(--white);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

/* Eski class uyumlulugu (diger sayfalar icin) */
.urun-fiyat {
    font-family: 'Quicksand', sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.urun-fiyat .guncel-fiyat {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
}

.urun-fiyat .eski-fiyat {
    font-size: 13px;
    color: #aaa;
    text-decoration: line-through;
    font-weight: 400;
}

.btn-gonder {
    width: 100%;
    background: var(--primary-green);
    color: var(--white);
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: var(--font-size-base);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
    text-decoration: none;
}

.btn-gonder:hover {
    background: var(--primary-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.35);
}

.btn-gonder i {
    font-size: 18px;
}

/* =====================================================
   SLIDER / CAROUSEL
   ===================================================== */
.slider-wrapper {
    margin-bottom: 40px;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.slider-wrapper.slider-fullwidth {
    border-radius: 0;
    box-shadow: none;
}

.slider-wrapper .carousel-item img {
    width: 100%;
    height: auto;
    min-height: 200px;
    object-fit: cover;
    aspect-ratio: 3840 / 1000;
}

.slider-wrapper.slider-fullwidth .carousel-item img {
    max-height: 1000px;
}

/* Slider Caption Stili (eski — geri uyumluluk) */
.slider-wrapper .carousel-caption {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 50px 40px 35px;
    text-align: center;
}
.slider-wrapper .carousel-caption h3 {
    font-weight: 600;
    font-size: 28px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    margin-bottom: 8px;
}
.slider-wrapper .carousel-caption p {
    font-size: 16px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    margin-bottom: 0;
}

/* ===== Slider Icerik Wrapper (Yeni Konumlandirma Sistemi) ===== */
.slider-icerik-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    padding: 30px 50px;
    z-index: 2;
    pointer-events: none;
}
.slider-icerik-wrapper > * { pointer-events: auto; }

/* Konum: 9 pozisyon */
.slider-icerik-sol-ust     { align-items:flex-start; justify-content:flex-start; text-align:left; }
.slider-icerik-orta-ust    { align-items:flex-start; justify-content:center;     text-align:center; }
.slider-icerik-sag-ust     { align-items:flex-start; justify-content:flex-end;   text-align:right; }
.slider-icerik-sol-orta    { align-items:center;     justify-content:flex-start; text-align:left; }
.slider-icerik-orta-orta   { align-items:center;     justify-content:center;     text-align:center; }
.slider-icerik-sag-orta    { align-items:center;     justify-content:flex-end;   text-align:right; }
.slider-icerik-sol-alt     { align-items:flex-end;   justify-content:flex-start; text-align:left; }
.slider-icerik-orta-alt    { align-items:flex-end;   justify-content:center;     text-align:center; }
.slider-icerik-sag-alt     { align-items:flex-end;   justify-content:flex-end;   text-align:right; }

.slider-icerik-box {
    max-width: 50%;
    color: #fff;
}
.slider-baslik {
    font-size: 36px;
    font-weight: 700;
    color: inherit;
    margin: 0 0 10px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    line-height: 1.2;
}
.slider-aciklama {
    font-size: 16px;
    font-weight: 400;
    color: inherit;
    margin: 0 0 20px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25);
    line-height: 1.5;
    opacity: 0.92;
}
.slider-butonlar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* Orta hizali konumlarda butonlari ortala */
.slider-icerik-orta-ust .slider-butonlar,
.slider-icerik-orta-orta .slider-butonlar,
.slider-icerik-orta-alt .slider-butonlar { justify-content: center; }
/* Sag hizali konumlarda butonlari saga yasla */
.slider-icerik-sag-ust .slider-butonlar,
.slider-icerik-sag-orta .slider-butonlar,
.slider-icerik-sag-alt .slider-butonlar { justify-content: flex-end; }

.slider-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.slider-btn-filled {
    background: #fff;
    color: #1a1a1a;
    border-color: transparent;
}
.slider-btn-filled:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.slider-btn-outline {
    background: transparent;
    border-width: 2px;
    border-style: solid;
}
.slider-btn-outline:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Mobil: Slider icerik responsive */
@media (max-width: 991.98px) {
    .slider-icerik-wrapper { padding: 20px 25px; }
    .slider-icerik-box { max-width: 70% !important; }
    .slider-baslik { font-size: 24px !important; }
    .slider-aciklama { font-size: 14px !important; margin-bottom: 14px; }
    .slider-btn { padding: 8px 18px; font-size: 13px; }
}
@media (max-width: 767.98px) {
    .slider-icerik-wrapper { padding: 15px 18px; }
    /* --bpad-*: panelden girilen ic bosluk MOBILDE de uygulanmali. Eskiden sabit
       "16px 20px !important" inline var(--bpad-…) bildirimini eziyordu -> ayar telefonda
       tamamen olu kaliyordu. Fallback'ler eski sabit degerlerin AYNISI: ayarlanmamis
       tarafta gorunum degismez. (banner tarafi bunu zaten boyle yapiyor.) */
    .slider-icerik-box { max-width: 85% !important;
        padding: var(--bpad-u, 16px) var(--bpad-r, 20px) var(--bpad-b, 16px) var(--bpad-l, 20px) !important; }
    .slider-baslik { font-size: 18px !important; margin-bottom: 6px; }
    .slider-aciklama { font-size: 13px !important; margin-bottom: 10px; }
    .slider-btn { padding: 7px 14px; font-size: 12px; border-radius: 6px; }
    .slider-icerik-mobil-gizle { display: none !important; }
}

.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    background: var(--white);
    border-radius: 50%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    opacity: 0;
    transition: var(--transition);
}

.slider-wrapper:hover .carousel-control-prev,
.slider-wrapper:hover .carousel-control-next {
    opacity: 1;
}

.carousel-control-prev {
    left: 20px;
}

.carousel-control-next {
    right: 20px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) grayscale(100);
    width: 20px;
    height: 20px;
}

.carousel-indicators {
    bottom: 20px;
    gap: 6px;
    margin-bottom: 0;
}

.carousel-indicators [data-bs-target] {
    width: 32px;
    height: 4px;
    border: none;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.45);
    opacity: 1;
    transition: all 0.4s ease;
    margin: 0;
    padding: 0;
}

.carousel-indicators .active {
    width: 48px;
    background-color: #fff;
    opacity: 1;
}

/* Eski yuvarlak yesil gostergeler kaldirildi - yukaridaki [data-bs-target] kurallari gecerli */

/* =====================================================
   SLIDER GECIS EFEKTLERI
   ===================================================== */
/* Fade: Bootstrap carousel-fade varsayilan — ek kural gerekmez */

/* Zoom In */
.carousel-item.slider-efekt-zoom-in.active {
    animation: sliderZoomIn 0.8s ease-out both;
}
@keyframes sliderZoomIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Zoom Out */
.carousel-item.slider-efekt-zoom-out.active {
    animation: sliderZoomOut 0.8s ease-out both;
}
@keyframes sliderZoomOut {
    from { transform: scale(1.15); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Slide Left */
.carousel-item.slider-efekt-slide-left.active {
    animation: sliderSlideLeft 0.7s ease-out both;
}
@keyframes sliderSlideLeft {
    from { transform: translateX(80px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* Slide Right */
.carousel-item.slider-efekt-slide-right.active {
    animation: sliderSlideRight 0.7s ease-out both;
}
@keyframes sliderSlideRight {
    from { transform: translateX(-80px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* Slide Up */
.carousel-item.slider-efekt-slide-up.active {
    animation: sliderSlideUp 0.7s ease-out both;
}
@keyframes sliderSlideUp {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Flip */
.carousel-item.slider-efekt-flip.active {
    animation: sliderFlip 0.9s ease-out both;
}
@keyframes sliderFlip {
    from { transform: perspective(1200px) rotateY(80deg); opacity: 0; }
    to   { transform: perspective(1200px) rotateY(0); opacity: 1; }
}

/* Rotate */
.carousel-item.slider-efekt-rotate.active {
    animation: sliderRotate 0.8s ease-out both;
}
@keyframes sliderRotate {
    from { transform: rotate(-8deg) scale(0.9); opacity: 0; }
    to   { transform: rotate(0) scale(1); opacity: 1; }
}

/* Blur */
.carousel-item.slider-efekt-blur.active {
    animation: sliderBlur 0.8s ease-out both;
}
@keyframes sliderBlur {
    from { filter: blur(12px); opacity: 0; }
    to   { filter: blur(0); opacity: 1; }
}

/* Bounce */
.carousel-item.slider-efekt-bounce.active {
    animation: sliderBounce 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes sliderBounce {
    0%   { transform: translateY(-30px) scale(0.95); opacity: 0; }
    50%  { transform: translateY(6px) scale(1.01); opacity: 1; }
    70%  { transform: translateY(-3px) scale(1); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Efekt aktifken carousel-fade ile uyumluluk */
.carousel-fade .carousel-item[class*="slider-efekt-"] {
    transform: none; /* Bootstrap override - animasyon baslayana kadar */
}
.carousel-fade .carousel-item.active[class*="slider-efekt-"] {
    z-index: 1;
    opacity: 1;
    transition: none; /* Bootstrap opacity transition ile animasyon cakismasini onle */
}

/* =====================================================
   SLIDER YAZI EFEKTLERI (Caption text animations)
   Slayt aktif olunca 0.3s gecikmeyle tetiklenir
   ===================================================== */

/* Baslangic: Tum efektli metinler gorunmez baslar */
.carousel-item [class^="te-fx-"] {
    display: inline-block;
    opacity: 0;
}
.carousel-item.active [class^="te-fx-"] {
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

/* 1. Belirme (Fade In) */
.carousel-item.active .te-fx-fadeIn {
    animation: teFadeIn 0.8s ease-out 0.3s both;
}
@keyframes teFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 2. Asagi Yukari (Slide Up) */
.carousel-item.active .te-fx-slideUp {
    animation: teSlideUp 0.7s ease-out 0.3s both;
}
@keyframes teSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 3. Yukari Asagi (Slide Down) */
.carousel-item.active .te-fx-slideDown {
    animation: teSlideDown 0.7s ease-out 0.3s both;
}
@keyframes teSlideDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 4. Buyuyerek Giris (Zoom In) */
.carousel-item.active .te-fx-zoomIn {
    animation: teZoomIn 0.7s ease-out 0.3s both;
}
@keyframes teZoomIn {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

/* 5. Ziplama (Bounce) */
.carousel-item.active .te-fx-bounce {
    animation: teBounce 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
@keyframes teBounce {
    0%   { opacity: 0; transform: translateY(-40px); }
    50%  { opacity: 1; transform: translateY(8px); }
    70%  { transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 6. Isildama (Glow) - surekli tekrar */
.carousel-item.active .te-fx-glow {
    animation: teGlowIn 0.6s ease-out 0.3s both, teGlow 2s ease-in-out 1s infinite alternate;
}
@keyframes teGlowIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes teGlow {
    from { text-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.3); }
    to   { text-shadow: 0 0 15px rgba(255,255,255,0.9), 0 0 30px rgba(255,255,255,0.5), 0 0 45px rgba(255,215,0,0.3); }
}

/* 7. Daktilo (Typewriter) */
.carousel-item.active .te-fx-typewriter {
    animation: teTypewriter 3s steps(60, end) 0.3s both;
    overflow: hidden;
    white-space: nowrap;
}
@keyframes teTypewriter {
    from { max-width: 0; opacity: 1; }
    to   { max-width: 100vw; opacity: 1; }
}

/* 8. Titreme (Shake) */
.carousel-item.active .te-fx-shake {
    animation: teShakeIn 0.5s ease-out 0.3s both, teShake 0.6s ease-in-out 0.8s 1;
}
@keyframes teShakeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes teShake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-6px); }
    30%      { transform: translateX(6px); }
    45%      { transform: translateX(-4px); }
    60%      { transform: translateX(4px); }
    75%      { transform: translateX(-2px); }
    90%      { transform: translateX(2px); }
}

/* 9. 3D Donus (Flip) */
.carousel-item.active .te-fx-flip {
    animation: teFlip 0.8s ease-out 0.3s both;
}
@keyframes teFlip {
    from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    to   { opacity: 1; transform: perspective(400px) rotateX(0); }
}

/* 10. Dalga (Wave) */
.carousel-item.active .te-fx-wave {
    animation: teWaveIn 0.5s ease-out 0.3s both, teWave 2s ease-in-out 0.8s infinite;
}
@keyframes teWaveIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes teWave {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-4px) rotate(-1deg); }
    75%      { transform: translateY(4px) rotate(1deg); }
}

/* Slayt degisince efektleri sifirla */
.carousel-item:not(.active) [class^="te-fx-"] {
    animation: none;
    opacity: 0;
}

/* =====================================================
   KATEGORI KARTLARI
   ===================================================== */
.kategori-kart {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    padding: 25px 15px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid var(--gray-lighter);
}

.kategori-kart:hover {
    border-color: var(--primary-green);
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.kategori-kart img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 15px;
    border: 3px solid var(--gray-lighter);
    transition: var(--transition);
}

.kategori-kart:hover img {
    border-color: var(--primary-green);
}

.kategori-kart h6 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

/* =====================================================
   GIRIS SAYFASI
   ===================================================== */
.giris-sayfa {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--gray-lighter) 0%, var(--white) 100%);
}

.giris-kart {
    background: var(--white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 40px;
    width: 100%;
    max-width: 420px;
}

.giris-logo {
    text-align: center;
    margin-bottom: 30px;
}

.giris-logo img {
    height: 60px;
    margin: 0 auto 15px;
}

.giris-logo h2 {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 5px;
}

.giris-logo p {
    color: var(--gray);
    font-size: var(--font-size-sm);
}

/* Input Ikonlu */
.input-group-icon {
    position: relative;
    margin-bottom: 20px;
}

.input-group-icon i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
    font-size: 18px;
    z-index: 2;
}

.input-group-icon .form-control {
    padding-left: 48px;
    padding-right: 16px;
    height: 52px;
    border: 2px solid var(--gray-lighter);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: var(--transition);
}

.input-group-icon .form-control:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);
}

/* Giris Butonu */
.btn-giris {
    width: 100%;
    background: var(--accent-dark);
    color: var(--white);
    border: none;
    padding: 14px 24px;
    border-radius: var(--border-radius);
    font-size: var(--font-size-md);
    font-weight: 700;
    transition: var(--transition);
}

.btn-giris:hover {
    background: var(--accent-dark-deep);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.35);
}

.giris-linkler {
    text-align: center;
    margin-top: 25px;
}

.giris-linkler a {
    color: var(--gray-dark);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.giris-linkler a:hover {
    color: var(--primary-green);
}

/* =====================================================
   SEPET
   ===================================================== */
.sepet-wrapper {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.sepet-tablo {
    width: 100%;
}

.sepet-tablo thead {
    background: var(--off-white);
}

.sepet-tablo th {
    padding: 16px 20px;
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sepet-tablo td {
    padding: 20px;
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-lighter);
}

.sepet-urun {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sepet-urun-resim {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius);
    flex-shrink: 0;
}

.sepet-urun-bilgi h6 {
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--dark);
}

.sepet-urun-bilgi p {
    font-size: var(--font-size-sm);
    color: var(--gray);
    margin: 0;
}

/* Adet Kontrol */
.adet-kontrol {
    display: flex;
    align-items: center;
    border: 2px solid var(--gray-lighter);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.adet-kontrol button {
    width: 36px;
    height: 36px;
    background: var(--off-white);
    border: none;
    color: var(--dark);
    font-size: 18px;
    transition: var(--transition);
}

.adet-kontrol button:hover {
    background: var(--primary-green);
    color: var(--white);
}

.adet-kontrol input {
    width: 50px;
    height: 36px;
    text-align: center;
    border: none;
    font-weight: 700;
    font-size: var(--font-size-base);
}

/* Sepet Ozet */
.sepet-ozet {
    background: var(--off-white);
    border-radius: var(--border-radius-lg);
    padding: 25px;
}

.sepet-ozet h5 {
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--gray-lighter);
}

.sepet-ozet-satir {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: var(--font-size-base);
}

.sepet-ozet-satir.toplam {
    font-size: var(--font-size-lg);
    font-weight: 800;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 2px solid var(--gray-lighter);
}

/* =====================================================
   FORM ELEMANLARI
   ===================================================== */
.form-control {
    border: 2px solid var(--gray-lighter);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: var(--transition);
}

.form-control:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);
    outline: none;
}

.form-control::placeholder {
    color: var(--gray);
}

.form-label {
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--dark);
    margin-bottom: 8px;
}

.form-select {
    border: 2px solid var(--gray-lighter);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: var(--transition);
}

.form-select:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);
}

.form-check-input:checked {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

/* =====================================================
   BUTONLAR
   ===================================================== */
.btn {
    font-family: var(--font-family);
    font-weight: 700;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-green-dark);
    border-color: var(--primary-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.35);
}

.btn-secondary {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--white);
}

.btn-secondary:hover {
    background: var(--accent-dark-deep);
    border-color: var(--accent-dark-deep);
}

.btn-outline-primary {
    border: 2px solid var(--primary-green);
    color: var(--primary-green);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--primary-green);
    color: var(--white);
}

.btn-outline-secondary {
    border: 2px solid var(--gray-light);
    color: var(--dark);
    background: transparent;
}

.btn-outline-secondary:hover {
    background: var(--gray-lighter);
    border-color: var(--gray);
}

.btn-lg {
    padding: 16px 32px;
    font-size: var(--font-size-md);
}

.btn-sm {
    padding: 8px 16px;
    font-size: var(--font-size-sm);
}

/* =====================================================
   FOOTER
   NOT: Footer stilleri footer.php inline <style> blogundan yuklenir.
   Asagidaki tanimlar yedek/fallback olarak korunur.
   Cakisma durumunda footer.php inline CSS onceliklidir.
   ===================================================== */
.site-footer {
    background: var(--dark);
    color: var(--white);
    padding: 60px 0 0;
    margin-top: auto;
    flex-shrink: 0;
}

.footer-main {
    padding-bottom: 40px;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo img {
    height: 45px;
    filter: brightness(0) invert(1);
}

.footer-logo h4 {
    color: var(--white);
    font-weight: 700;
    font-size: var(--font-size-xl);
}

.footer-logo h4 span {
    color: var(--primary-green);
}

.footer-about p {
    color: var(--gray);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Sosyal Medya */
.sosyal-medya {
    display: flex;
    gap: 12px;
}

.sosyal-medya a {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 18px;
    transition: var(--transition);
}

.sosyal-medya a:hover {
    background: var(--primary-green);
    transform: translateY(-3px);
}

/* Footer Basliklar */
.footer-title {
    color: var(--white);
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 12px;
}

.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--primary-green);
    border-radius: 3px;
}

/* Footer Linkler */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--gray);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

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

/* Footer Iletisim */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    color: var(--gray);
    font-size: var(--font-size-sm);
}

.footer-contact i {
    color: var(--primary-green);
    font-size: 18px;
    margin-top: 2px;
}

.footer-contact a {
    color: var(--gray);
}

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

/* Footer Alt */
.footer-bottom {
    background: rgba(0,0,0,0.2);
    padding: 20px 0;
    margin-top: 40px;
}

.footer-bottom p {
    color: var(--gray);
    font-size: var(--font-size-sm);
    margin: 0;
}

.footer-bottom a {
    color: var(--gray);
}

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

/* =====================================================
   WHATSAPP SABIT BUTON
   ===================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: var(--transition);
    animation: pulse 2s infinite;
}

.whatsapp-float:hover {
    background: #128C7E;
    color: var(--white);
    transform: scale(1.1);
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 4px 30px rgba(37, 211, 102, 0.6);
    }
}

/* =====================================================
   URUN DETAY SAYFASI
   ===================================================== */
.urun-detay-wrapper {
    background: var(--white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
    padding: 30px;
}

.urun-detay-galeri {
    position: relative;
}

.urun-detay-resim {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--gray-lighter);
    margin-bottom: 15px;
}

.urun-detay-resim img {
    width: 100%;
    height: auto;
}

.urun-kucuk-resimler {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.urun-kucuk-resim {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border: 3px solid transparent;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

.urun-kucuk-resim:hover,
.urun-kucuk-resim.active {
    border-color: var(--primary-green);
}

.urun-kucuk-resim img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.urun-detay-bilgi h1 {
    font-size: var(--font-size-xxl);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 15px;
}

.urun-detay-fiyat {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.urun-detay-fiyat .guncel {
    font-size: var(--font-size-xxxl);
    font-weight: 800;
    color: var(--primary-green);
}

.urun-detay-fiyat .eski {
    font-size: var(--font-size-lg);
    color: var(--gray);
    text-decoration: line-through;
}

.urun-stok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.urun-stok.stokta {
    background: rgba(46, 204, 113, 0.15);
    color: var(--primary-green);
}

.urun-stok.tukendi {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

/* =====================================================
   SIPARIS ADIMLARI
   ===================================================== */
.siparis-adimlar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    padding: 20px;
    background: var(--off-white);
    border-radius: var(--border-radius-lg);
}

.siparis-adim {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gray);
}

.siparis-adim.aktif {
    color: var(--primary-green);
}

.siparis-adim.tamamlandi {
    color: var(--primary-green);
}

.adim-numara {
    width: 40px;
    height: 40px;
    background: var(--gray-lighter);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.siparis-adim.aktif .adim-numara {
    background: var(--primary-green);
    color: var(--white);
}

.siparis-adim.tamamlandi .adim-numara {
    background: var(--primary-green);
    color: var(--white);
}

.adim-text {
    font-weight: 600;
}

.adim-cizgi {
    width: 60px;
    height: 3px;
    background: var(--gray-lighter);
    margin: 0 15px;
    border-radius: 3px;
}

.siparis-adim.tamamlandi + .adim-cizgi {
    background: var(--primary-green);
}

/* =====================================================
   HESABIM
   ===================================================== */
.hesap-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
}

.hesap-menu {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    padding: 20px;
    height: fit-content;
}

.hesap-menu .nav {
    flex-direction: column;
}

.hesap-menu .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    color: var(--dark);
    font-weight: 600;
    border-radius: var(--border-radius);
    margin-bottom: 5px;
    transition: var(--transition);
}

.hesap-menu .nav-link i {
    font-size: 18px;
    color: var(--gray);
    transition: var(--transition);
}

.hesap-menu .nav-link:hover,
.hesap-menu .nav-link.active {
    background: var(--primary-green);
    color: var(--white);
}

.hesap-menu .nav-link:hover i,
.hesap-menu .nav-link.active i {
    color: var(--white);
}

.hesap-icerik {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    padding: 30px;
}

/* =====================================================
   SAYFALAMA
   ===================================================== */
.pagination {
    justify-content: center;
    margin-top: 40px;
    gap: 5px;
}

.pagination .page-link {
    border: none;
    border-radius: var(--border-radius);
    padding: 10px 16px;
    color: var(--dark);
    font-weight: 600;
    background: var(--off-white);
    transition: var(--transition);
}

.pagination .page-link:hover {
    background: var(--primary-green);
    color: var(--white);
}

.pagination .page-item.active .page-link {
    background: var(--primary-green);
    color: var(--white);
}

/* =====================================================
   ALERT / BILDIRIMLER
   ===================================================== */
.alert {
    border: none;
    border-radius: var(--border-radius);
    padding: 16px 20px;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert i {
    font-size: 20px;
    margin-top: 2px;
}

.alert-success {
    background: rgba(46, 204, 113, 0.15);
    color: var(--primary-green-dark);
}

.alert-danger {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

.alert-warning {
    background: rgba(243, 156, 18, 0.15);
    color: var(--accent-dark-deep);
}

.alert-info {
    background: rgba(52, 152, 219, 0.15);
    color: var(--info);
}

/* =====================================================
   BREADCRUMB
   ===================================================== */
.breadcrumb {
    background: transparent;
    padding: 15px 0;
    margin-bottom: 20px;
}

.breadcrumb-item {
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: var(--gray);
}

.breadcrumb-item a {
    color: var(--gray-dark);
}

.breadcrumb-item a:hover {
    color: var(--primary-green);
}

.breadcrumb-item.active {
    color: var(--primary-green);
    font-weight: 600;
}

/* =====================================================
   BOLUM BASLIKLARI
   ===================================================== */
.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title h2 {
    font-size: var(--font-size-xxl);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 10px;
}

.section-title p {
    color: var(--gray);
    font-size: var(--font-size-base);
    max-width: 600px;
    margin: 0 auto;
}

/* =====================================================
   BADGE / ETIKET
   ===================================================== */
.badge {
    font-weight: 700;
    font-size: var(--font-size-xs);
    padding: 5px 10px;
    border-radius: var(--border-radius-full);
}

.badge-success {
    background: var(--primary-green);
    color: var(--white);
}

.badge-danger {
    background: var(--danger);
    color: var(--white);
}

.badge-warning {
    background: var(--accent-dark);
    color: var(--white);
}

.badge-info {
    background: var(--info);
    color: var(--white);
}

/* =====================================================
   LOADING / YUKLENIYOR
   ===================================================== */
.loading {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--gray-lighter);
    border-top-color: var(--primary-green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* =====================================================
   ANIMASYONLAR
   ===================================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

.fade-in {
    animation: fadeIn 0.5s ease;
}

.fade-in-up {
    animation: fadeInUp 0.5s ease;
}

.fade-in-down {
    animation: fadeInDown 0.5s ease;
}

/* =====================================================
   SLIDER - MOBILDE GIZLEME
   ===================================================== */
@media (max-width: 767.98px) {
    .slider-sadece-masaustu {
        display: none !important;
    }
}

/* =====================================================
   RESPONSIVE - TABLET
   ===================================================== */
@media (max-width: 991.98px) {
    .top-bar {
        display: none;
    }

    .header-main,
    [data-header-palet] .header-main {
        padding: 0 !important;
    }

    .header-main .container > .row,
    [data-header-palet] .header-main .container > .row {
        min-height: 56px;
        gap: 0 !important;
    }

    .search-form {
        display: none;
    }

    .header-actions,
    [data-header-palet] .header-actions {
        gap: 6px !important;
    }

    .header-action,
    [data-header-palet] .header-action {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 0;
        padding: 0 !important;
        transition: background 0.2s ease;
    }

    .header-action:active {
        background: rgba(0,0,0,0.05);
    }

    .header-action span:not(.badge),
    [data-header-palet] .header-action span:not(.badge) {
        display: none !important;
    }

    .hesap-wrapper {
        grid-template-columns: 1fr;
    }

    .hesap-menu {
        position: sticky;
        top: 80px;
    }

    .hesap-menu .nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 10px;
    }

    .hesap-menu .nav-link {
        white-space: nowrap;
        margin-bottom: 0;
    }

    .urun-kart .urun-bilgi {
        padding: 12px 14px 14px;
    }

    .urun-ad {
        font-size: 14px;
    }

    .urun-fiyat-alan .guncel-fiyat,
    .urun-fiyat .guncel-fiyat {
        font-size: 16px;
    }

    .urun-fiyat-alan .eski-fiyat {
        font-size: 11px;
    }

    .badge-indirim {
        font-size: 10px;
    }
}

/* =====================================================
   RESPONSIVE - MOBIL
   ===================================================== */
@media (max-width: 767.98px) {
    :root {
        --font-size-base: 14px;
    }

    /* ---- Mobil Header Premium ---- */
    .site-header {
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .header-main,
    [data-header-palet] .header-main {
        padding: 0 !important;
    }

    .header-main .container,
    [data-header-palet] .header-main .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .header-main .container > .row,
    [data-header-palet] .header-main .container > .row {
        min-height: 52px;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }

    /* Logo — palet override'lari dahil, mobilde daima esnek duzende */
    .header-main .col-6.col-lg-3:first-child {
        flex: 1 1 auto !important;
        max-width: none !important;
        width: auto !important;
    }

    .logo {
        gap: 8px;
    }

    .logo-text {
        font-size: 17px;
        letter-spacing: -0.3px;
    }

    /* Aksiyonlar (sepet, hesap, hamburger) — palet override'lari dahil */
    .header-main .col-6.col-lg-2 {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: auto !important;
        padding-left: 0;
    }

    .header-actions,
    [data-header-palet] .header-actions {
        gap: 2px !important;
        flex-wrap: nowrap;
    }

    /* Palet override'larini da yenmek icin yuksek spesifisite */
    .header-action,
    [data-header-palet] .header-action {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px;
        position: relative;
        flex-direction: row;
        padding: 0 !important;
        gap: 0;
        font-size: inherit;
        text-transform: none;
        letter-spacing: normal;
    }

    .header-action i,
    [data-header-palet] .header-action i {
        font-size: 21px !important;
        line-height: 1;
    }

    .header-action .badge,
    .header-action .sepet-adet-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        font-size: 9px;
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        padding: 0 4px;
        border-radius: 8px;
    }

    /* Logo — palet override'lari dahil */
    .logo img,
    [data-header-palet] .logo img {
        height: 38px;
        max-height: 38px;
        object-fit: contain;
    }

    /* Hamburger */
    .mobil-menu-btn {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        margin-left: 2px;
    }

    .mobil-menu-btn:active {
        background: rgba(0,0,0,0.05);
    }

    .mobil-menu-btn:focus-visible {
        outline: 2px solid var(--primary-green);
        outline-offset: 2px;
    }

    .mobil-menu-bar {
        width: 18px;
        height: 1.5px;
    }

    .mobil-menu-bar:nth-child(2) {
        width: 14px;
    }

    /* ---- Mobil Kategori Hikaye — Kompakt & Simetrik ---- */
    .story-kategoriler {
        padding: 6px 0 8px;
    }

    /* Tum stiller: gap ve padding */
    .story-container {
        gap: 14px;
        padding: 6px 12px 8px;
    }

    .story-stil-kart .story-container {
        gap: 10px;
        padding: 6px 12px 8px;
    }

    /* Kart stili — 4lu gorunum + peek */
    .story-kart-gorsel {
        width: 72px;
        height: 80px;
        border-radius: 14px;
    }

    .story-kart-gorsel img {
        padding: 4px;
    }

    .story-stil-kart .story-name {
        max-width: 72px;
        font-size: 11px;
    }

    .story-stil-kart .story-item {
        gap: 6px;
    }

    /* Hikaye (ring) stili — 4lu gorunum + peek */
    .story-ring {
        width: 64px;
        height: 64px;
    }

    .story-item {
        gap: 6px;
    }

    .story-name {
        font-size: 11px;
        max-width: 72px;
        padding: 2px 6px;
    }

    /* Minimal stili */
    .story-stil-minimal .story-container {
        gap: 14px;
    }

    .story-minimal-avatar {
        width: 60px;
        height: 60px;
    }

    /* Kare stili */
    .story-kare-gorsel {
        width: 72px;
        height: 72px;
        border-radius: 14px;
    }

    /* Dogal stili */
    .story-dogal-avatar {
        width: 72px;
        height: 80px;
        border-radius: 14px;
    }

    .story-stil-dogal .story-container {
        gap: 10px;
        padding: 6px 12px 8px;
    }

    /* Nav oklari mobilde gizle */
    .story-nav {
        display: none;
    }

    .navbar-nav .nav-item + .nav-item::before { display: none; }
    .navbar-nav .nav-link {
        padding: 12px 14px !important;
        font-size: var(--font-size-sm);
    }

    .urun-kart .urun-bilgi {
        padding: 10px 12px 12px;
    }

    .urun-ad {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .urun-fiyat-alan {
        gap: 5px;
    }

    .urun-fiyat-alan .guncel-fiyat,
    .urun-fiyat .guncel-fiyat {
        font-size: 14px;
    }

    .urun-fiyat-alan .eski-fiyat,
    .urun-fiyat .eski-fiyat {
        font-size: 10px;
    }

    .badge-indirim {
        font-size: 9px;
        padding: 2px 5px;
    }

    .urun-slogan {
        font-size: 9px;
        padding: 3px 8px;
        top: 6px;
        right: 6px;
        border-radius: 6px;
    }

    .urun-favori {
        width: 28px;
        height: 28px;
        top: 6px;
        left: 6px;
        opacity: 1;
    }

    .urun-favori i {
        font-size: 13px;
    }

    .btn-teslimat {
        padding: 7px 6px;
        font-size: 11px;
        border-radius: 10px;
        white-space: nowrap;
    }
    /* Rating mobil ayarlari */
    .urun-kart-rating { gap:4px;margin-bottom:6px; }
    .ukr-stars i { font-size:11px; }
    .ukr-score { font-size:12px; }
    .ukr-sep { font-size:11px; }
    .ukr-count { font-size:10px; }
    .ukr-count i { font-size:10px; }
    /* Minimal mobil ayarlari */
    .uk-minimal .urun-bilgi { padding:10px 10px 0; }
    .uk-minimal .urun-ad { font-size:12px;min-height:2.4em;margin-bottom:8px; }
    .uk-minimal-marka { font-size:11px; }
    .uk-minimal-indirim-badge { font-size:12px;padding:4px 7px; }
    .uk-minimal-indirim-badge span { font-size:9px; }
    .uk-minimal-eski { font-size:11px; }
    .uk-minimal-yeni { font-size:15px; }
    .uk-minimal-fiyatlar.uk-minimal-tek .uk-minimal-yeni { font-size:16px; }
    .uk-minimal-kdv { font-size:10px; }
    .uk-minimal-sepet { margin:auto -10px 0; }
    .uk-minimal-sepet-btn { font-size:12px;padding:10px 10px; }
    .uk-minimal-fiyat-alan { gap:7px; }
    /* Klasik mobil ayarlari */
    .uk-klasik-teslimat { font-size:11px;margin-bottom:6px; }
    .uk-klasik-buton { font-size:12px;padding:7px 10px; }
    /* Bilgi alanindaki sepet ikonu mobilde gizle */
    .urun-bilgi .btn-hizli-sepet,
    .btn-teslimat-wrap .btn-hizli-sepet,
    .uk-buton-wrap .btn-hizli-sepet,
    .uk-alt-wrap .btn-hizli-sepet { display: none; }

    /* Resim uzerindeki sepet ikonu mobilde goster - Glass Morphism */
    .btn-hizli-sepet-resim {
        display: flex !important;
        position: absolute;
        bottom: 12px;
        right: 12px;
        z-index: 4;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(255,255,255,0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
        border: 1px solid rgba(255,255,255,0.5);
        color: #334155;
        font-size: 17px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
        overflow: hidden;
    }
    .btn-hizli-sepet-resim i {
        position: relative; z-index: 1;
        transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .btn-hizli-sepet-resim:active {
        transform: scale(0.88);
        background: rgba(16,185,129,0.92);
        border-color: rgba(16,185,129,0.3);
    }
    .btn-hizli-sepet-resim:active i { color: #fff; transform: scale(1.1); }
    .btn-hizli-sepet-resim.eklendi {
        background: rgba(16,185,129,0.92);
        border-color: rgba(16,185,129,0.3);
        pointer-events: none;
    }
    .btn-hizli-sepet-resim.eklendi i {
        color: #fff;
        animation: bhs-check 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    .sepet-toast {
        top: auto;
        bottom: 16px;
        right: 12px;
        left: 12px;
        min-width: auto;
        max-width: none;
    }

    .btn-gonder {
        padding: 10px 15px;
        font-size: var(--font-size-sm);
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 24px;
        bottom: 20px;
        right: 20px;
    }

    .site-footer {
        padding: 40px 0 0;
    }

    .footer-title {
        margin-bottom: 20px;
    }

    .sepet-tablo th,
    .sepet-tablo td {
        padding: 12px;
        font-size: var(--font-size-sm);
    }

    .sepet-urun-resim {
        width: 60px;
        height: 60px;
    }

    .siparis-adimlar {
        flex-wrap: wrap;
        gap: 15px;
    }

    .adim-cizgi {
        display: none;
    }

    .giris-kart {
        padding: 30px 20px;
    }

    .section-title h2 {
        font-size: var(--font-size-xl);
    }
}

/* =====================================================
   MOBIL HEADER — PREMIUM BUTON & IKONLAR
   ===================================================== */
/* Hamburger menu butonu — ozel cizgili tasarim */
.mobil-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    flex-shrink: 0;
}
.mobil-menu-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--dark);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobil-menu-bar:nth-child(2) {
    width: 16px;
}
.mobil-menu-btn:active .mobil-menu-bar:first-child {
    transform: translateY(7px) rotate(45deg);
}
.mobil-menu-btn:active .mobil-menu-bar:nth-child(2) {
    opacity: 0;
}
.mobil-menu-btn:active .mobil-menu-bar:last-child {
    transform: translateY(-7px) rotate(-45deg);
}

/* =====================================================
   MOBIL MENU (Offcanvas)
   ===================================================== */
.offcanvas {
    max-width: 280px;
}

.offcanvas-header {
    background: var(--primary-green);
    color: var(--white);
    padding: 14px 16px;
}

.offcanvas-title {
    font-weight: 700;
    font-size: 15px;
}

.offcanvas-header .btn-close {
    filter: brightness(0) invert(1);
}

.offcanvas-body {
    padding: 12px;
}

.offcanvas-body .mb-4 { margin-bottom: 10px !important; }

.offcanvas-body .input-group { margin-bottom: 0; }
.offcanvas-body .input-group .form-control { font-size: 13px; padding: 8px 12px; }
.offcanvas-body .input-group .btn { padding: 8px 12px; font-size: 13px; }

.offcanvas-body .form-label { font-size: 12px; margin-bottom: 4px; }
.offcanvas-body .form-select {
    font-size: 12px;
    padding: 7px 10px;
    border-color: #d1d5db;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offcanvas-body .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--dark);
    font-weight: 500;
    font-size: 14px;
    border-radius: 8px;
    margin-bottom: 2px;
    transition: var(--transition);
}

.offcanvas-body .nav-link i {
    font-size: 15px;
    color: var(--primary-green);
    width: 20px;
    text-align: center;
}

.offcanvas-body .nav-link:hover {
    background: rgba(46, 204, 113, 0.08);
    color: var(--primary-green);
}

.offcanvas-body .collapse .nav-link {
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 400;
}

.offcanvas-body .collapse .nav-link i {
    font-size: 12px;
    width: 16px;
}

/* =====================================================
   MOBIL MENU — BEYAZ / SİMETRİK  (#mobileMenu.mm-fullpage)   03.10.2026
   Zemin her zaman BEYAZ → hiçbir temanın rengiyle çatışmaz. Vurgu rengi YALNIZ
   tema değişkeninden (--primary-green) gelir; yumuşak tonlar color-mix ile ondan
   türetilir (desteklemeyen eski tarayıcıda nötr griye düşer — renk sabit YAZILMAZ).
   Simetri: hızlı erişim = 12 sütunluk ızgara, PHP her satırı tam dolduracak span verir
   (header.php "HIZLI ERİŞİM"); alt menü 2 eşit sütun; alt CTA eşit sütun.
   Yalnız #mobileMenu.mm-fullpage'yü hedefler → kategori #mobilFiltre drawer'ı ve
   panelin sınıfsız #mobileMenu'sü ETKİLENMEZ (panel de bu dosyayı yükler).
   En altta "ESKİ İŞARETLEME UYUMU": bu dosya ESKİ bir header.php ile birlikte
   yüklenirse (kısmi dağıtım) eski sınıflar da aynı beyaz görünümü alır.
   ===================================================== */
#mobileMenu.mm-fullpage {
    --mm-acc: var(--primary-green, #2ECC71);
    --mm-acc-soft: #f3f4f6;          /* color-mix yoksa nötr */
    --mm-acc-line: #e5e7eb;
    --mm-ink: #111827;
    --mm-text: #374151;
    --mm-muted: #6b7280;
    --mm-line: #eef0f3;
    --mm-soft: #f7f8fa;
    /* Menü tam ekran (100vw): her kullanımda AYNI değer — % kullanılsaydı dil şeridinin negatif kenarı
       kaba göre hesaplanır, tablette şerit tam genişliğe ulaşmazdı (ölçüldü). max() yedeği aşağıda @supports. */
    --mm-pad: max(18px, calc((100vw - 600px) / 2));
    --bs-offcanvas-width: 100%;
    width: 100%;
    max-width: 100%;
    border-right: 0;
    background: #fff;
    color: var(--mm-text);
    display: flex;
    flex-direction: column;
}
/* max() bilmeyen eski tarayıcı (Chrome <79, iOS <11.3): özel değişken hesaplanırken geçersizleşir ve dolgu 0 olurdu.
   (Değişkeni iki kez yazmak yedek VERMEZ — ikisi de ayrıştırmada geçerli sayılır.) */
@supports not (padding: max(1px, 2px)) {
    #mobileMenu.mm-fullpage { --mm-pad: 18px; }
}
/* Genel denetim 03.10.2026 — KONTRAST: vurgu doğrudan tema renginden geliyordu; açık temalarda (#ffe66d 1.25:1,
   varsayılan #2ECC71 2.1:1) beyaz zemindeki ikon / vurgu zeminindeki beyaz ikon okunmuyordu. Ön plan vurgusu
   koyulaştırılır; yumuşak zemin/çizgi HAM tema renginden türer (görünüm aynı kalır).
   1) relative color (Chrome 119+, Safari 16.4+, Firefox 128+): yalnız AÇIK renk kısılır (oklch L ≤ 0.56) — koyu temalar AYNEN.
   2) yalnız color-mix: sabit %58 koyulaştırma (açık sarı 3.7:1, yeşil 5.6:1).  3) hiçbiri: ham renk (eski davranış). */
@supports (color: color-mix(in srgb, red 10%, white)) {
    #mobileMenu.mm-fullpage {
        --mm-acc: color-mix(in srgb, var(--primary-green, #2ECC71) 58%, #000);
        --mm-acc-soft: color-mix(in srgb, var(--primary-green, #2ECC71) 9%, #fff);
        --mm-acc-line: color-mix(in srgb, var(--primary-green, #2ECC71) 28%, #fff);
    }
}
@supports (color: oklch(from red min(l, 0.5) c h)) {
    #mobileMenu.mm-fullpage { --mm-acc: oklch(from var(--primary-green, #2ECC71) min(l, 0.56) c h); }
}
#mobileMenu.mm-fullpage.offcanvas { max-width: 100%; }

/* Başlık — beyaz, ince alt çizgi: marka solda | [dil] [kapat] sağda */
#mobileMenu.mm-fullpage .offcanvas-header {
    flex: 0 0 auto;
    gap: 10px;
    background: #fff;
    color: var(--mm-ink);
    padding: 14px var(--mm-pad);
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--mm-line);
    box-shadow: none;
}
#mobileMenu.mm-fullpage .mm-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}
#mobileMenu.mm-fullpage .mm-brand-logo,
#mobileMenu.mm-fullpage .mm-brand > i {        /* ikincisi: eski header.php işaretlemesi */
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--mm-acc);
    color: #fff;
    font-size: 20px;
    opacity: 1;
}
#mobileMenu.mm-fullpage .offcanvas-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.1px;
    color: var(--mm-ink);
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Dil yuvası: boşsa (dil yok / JS gelmedi) yer kaplamaz */
#mobileMenu.mm-fullpage .mm-dil-yuva { display: inline-flex; flex: 0 0 auto; }
#mobileMenu.mm-fullpage .mm-dil-yuva:empty { display: none; }
/* Kapatma — nötr gri yuvarlak */
#mobileMenu.mm-fullpage .mm-close {
    margin-left: auto;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    background: #f3f4f6;
    color: var(--mm-ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    -webkit-tap-highlight-color: transparent;
}
#mobileMenu.mm-fullpage .mm-dil-yuva + .mm-close { margin-left: 0; }
@media (max-width: 374.98px) {
    #mobileMenu.mm-fullpage .offcanvas-title { font-size: 15.5px; }
    #mobileMenu.mm-fullpage .mm-brand { gap: 10px; }
}
/* Genel denetim 03.10.2026: 280px'te dil düğmesi yüzünden "Edirne Çiçekçi" "Edirne Çiçe…" oluyordu → rozet + yazı küçülür */
@media (max-width: 299.98px) {
    #mobileMenu.mm-fullpage .offcanvas-title { font-size: 14.5px; }
    #mobileMenu.mm-fullpage .mm-brand { gap: 8px; }
    #mobileMenu.mm-fullpage .mm-brand-logo,
    #mobileMenu.mm-fullpage .mm-brand > i { width: 32px; height: 32px; font-size: 16px; border-radius: 10px; }
}
#mobileMenu.mm-fullpage .mm-close:hover,
#mobileMenu.mm-fullpage .mm-close:focus-visible {
    background: #e9ebef;
    transform: rotate(90deg);
}
#mobileMenu.mm-fullpage .mm-close:focus-visible {
    outline: 2px solid var(--mm-acc);
    outline-offset: 2px;
}
#mobileMenu.mm-fullpage .mm-close:active { transform: rotate(90deg) scale(.93); }
#mobileMenu.mm-fullpage .mm-close > i { pointer-events: none; }

/* Gövde — dış: flex kolon, iç: kayan alan + sabit footer */
#mobileMenu.mm-fullpage .offcanvas-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: #fff;
}
#mobileMenu.mm-fullpage .mm-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 18px var(--mm-pad) 24px;
}
#mobileMenu.mm-fullpage .mm-scroll > * { flex-shrink: 0; margin-top: 0; margin-bottom: 0; }

/* Bölüm başlığı — küçük, sakin, büyük harf (kontrast: #6b7280 beyazda 4.8:1) */
#mobileMenu.mm-fullpage .mm-baslik {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mm-muted);
    margin: 0 2px 8px;
}

/* Dil paneli — JS kayan alanın EN ÜSTÜNE koyar; başlığın hemen altında tam genişlik bant */
#mobileMenu.mm-fullpage .mm-scroll > .mm-dil-panel {
    margin: -18px calc(var(--mm-pad) * -1) 0;
    padding: 14px var(--mm-pad);
    border: 0;
    border-bottom: 1px solid var(--mm-line);
    border-radius: 0;
    background: var(--mm-soft);
    box-shadow: none;
}

/* Arama — tek parça hap; ikon solda, gönder düğmesi içte sağda */
#mobileMenu.mm-fullpage .mm-ara {
    position: relative;
    display: flex;
    align-items: center;
}
#mobileMenu.mm-fullpage .mm-ara-ikon {
    position: absolute;
    left: 16px;
    font-size: 16px;
    color: #9ca3af;
    pointer-events: none;
}
#mobileMenu.mm-fullpage .mm-ara .form-control {
    height: 50px;
    padding: 0 56px 0 44px;
    font-size: 14.5px;
    color: var(--mm-ink);
    background: var(--mm-soft);
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    box-shadow: none;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#mobileMenu.mm-fullpage .mm-ara .form-control::placeholder { color: #6b7280; }   /* 04.10 denetim: #9ca3af 2,39:1 idi (onceden 2,56) */
#mobileMenu.mm-fullpage .mm-ara .form-control:focus {
    background: #fff;
    border-color: var(--mm-acc);
    box-shadow: 0 0 0 4px var(--mm-acc-soft);
}
#mobileMenu.mm-fullpage .mm-ara-btn {
    position: absolute;
    right: 5px;
    width: 40px;            /* genel denetim 03.10: 38 → 40 (dokunma hedefi; 50px kutuda 5px kenar) */
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--mm-acc);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease;
}
#mobileMenu.mm-fullpage .mm-ara-btn:hover { filter: brightness(1.06); }
#mobileMenu.mm-fullpage .mm-ara-btn:active { transform: scale(.94); }

/* Teslimat bölgesi tetiği — paylaşılan .bolge-arama-* görünümü menüde BEYAZ karta çevrilir
   (id-scope: urun.php'deki picker ve body seviyesindeki #menuBolgeFp etkilenmez) */
#mobileMenu.mm-fullpage #menuBolgeTetik {
    background: #fff;
    border: 1px solid var(--mm-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    cursor: pointer;
}
#mobileMenu.mm-fullpage #menuBolgeTetik:hover,
#mobileMenu.mm-fullpage #menuBolgeTetik:focus-visible {
    border-color: var(--mm-acc-line);
    box-shadow: 0 0 0 4px var(--mm-acc-soft);
    outline: none;
}
#mobileMenu.mm-fullpage #menuBolgeTetik.secildi { border-color: var(--mm-acc-line); background: #fff; }
#mobileMenu.mm-fullpage #menuBolgeTetik .bolge-arama-icon { width: 54px; height: 52px; }
#mobileMenu.mm-fullpage #menuBolgeTetik .bolge-arama-icon i {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--mm-acc-soft);
    color: var(--mm-acc);
    animation: none;
}
#mobileMenu.mm-fullpage #menuBolgeTetik .bolge-arama-icon i::after { display: none; }
#mobileMenu.mm-fullpage #menuBolgeTetik .bolge-arama-input {
    padding: 15px 40px 15px 0;
    font-size: 14.5px;
    color: var(--mm-ink);
    cursor: pointer;
}
#mobileMenu.mm-fullpage #menuBolgeTetik.secildi .bolge-arama-input::placeholder { color: var(--mm-ink); font-weight: 600; }
#mobileMenu.mm-fullpage #menuBolgeTetik .bolge-arama-ok { color: #9ca3af; }

/* Hızlı erişim — 12 sütunluk ızgara; span'leri PHP verir (satır başına toplam 12) */
#mobileMenu.mm-fullpage .mm-aksiyon {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
}
#mobileMenu.mm-fullpage .mm-span-3  { grid-column: span 3; }
#mobileMenu.mm-fullpage .mm-span-4  { grid-column: span 4; }
#mobileMenu.mm-fullpage .mm-span-6  { grid-column: span 6; }
#mobileMenu.mm-fullpage .mm-span-12 { grid-column: span 12; }
#mobileMenu.mm-fullpage .mm-karo {
    min-width: 0;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;            /* üstten: yazısı 2 satıra sarılan karonun ikonu da AYNI hizada kalır */
    gap: 8px;
    padding: 14px 4px 12px;
    background: #fff;
    border: 1px solid var(--mm-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    color: var(--mm-ink);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}
/* Satırda ≤2 karo → geniş karo: ikon + yazı yan yana */
#mobileMenu.mm-fullpage .mm-karo.mm-karo-yatay {
    flex-direction: row;
    justify-content: center;
    min-height: 60px;
    gap: 10px;
    padding: 10px 14px;
}
#mobileMenu.mm-fullpage .mm-karo:hover {
    border-color: var(--mm-acc-line);
    box-shadow: 0 0 0 4px var(--mm-acc-soft);
    color: var(--mm-ink);
}
#mobileMenu.mm-fullpage .mm-karo:active { transform: scale(.97); }
#mobileMenu.mm-fullpage .mm-karo-ikon {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--mm-acc-soft);
    color: var(--mm-acc);
    font-size: 18px;
}
#mobileMenu.mm-fullpage .mm-quick-odeme .mm-karo-ikon { background: var(--mm-acc); color: #fff; }
/* Yazı en çok İKİ satıra sarılır (dar telefonda "Sipariş Takibi" kesilmesin — ölçüldü: tek satırda
   ≤390px'te üç etiket "…" oluyordu); panelde girilen daha uzun özel etiket 2. satırda "…" ile biter. */
#mobileMenu.mm-fullpage .mm-karo-yazi {
    max-width: 100%;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--mm-ink);
    overflow: hidden;
    white-space: normal;
    overflow-wrap: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
#mobileMenu.mm-fullpage .mm-karo-yatay .mm-karo-yazi { font-size: 13px; text-align: left; }
/* Çok dar telefon (<375px): 4'lü satır 2+2'ye geçer — tek kelimelik etiket ("Favorilerim") 4 sütuna sığmıyor.
   Satır yine kabı tam doldurur (span 6 + span 6), simetri korunur. */
@media (max-width: 374.98px) {
    #mobileMenu.mm-fullpage .mm-span-3 { grid-column: span 6; }
    /* Alt menü tek sütun: 320px'te iki sütunda uzun kategori adı ("Açılış & Etkinlik Çiçekleri") iki satıra da sığmıyordu */
    #mobileMenu.mm-fullpage .mm-nav .mm-suralt.nav { grid-template-columns: minmax(0, 1fr); }   /* .nav: dosyada SONRA gelen temel kuralı ezmek için */
}
/* Genel denetim 03.10.2026: 280–300px'te yan yana iki YATAY karoda yazıya ~40px kalıyor, "Hesabım" "Hesab" diye
   kırpılıyordu (eski tasarımda 0 kesik — A/B ölçüldü) → <320px'te yatay karo dikey düzene döner (yazı ~110px). */
@media (max-width: 319.98px) {
    #mobileMenu.mm-fullpage .mm-karo.mm-karo-yatay { flex-direction: column; min-height: 88px; gap: 8px; padding: 14px 4px 12px; }
    #mobileMenu.mm-fullpage .mm-karo-yatay .mm-karo-yazi { font-size: 12px; text-align: center; }
}
/* Çıkış = kırmızı (beyazda 5.3:1) */
#mobileMenu.mm-fullpage .mm-hesap-cikis .mm-karo-ikon { background: #fdecee; color: #c42b3a; }
#mobileMenu.mm-fullpage .mm-hesap-cikis .mm-karo-yazi { color: #c42b3a; }
#mobileMenu.mm-fullpage .mm-hesap-cikis:hover { border-color: #f5c2c7; box-shadow: 0 0 0 4px #fdecee; }
/* Sayı rozeti — ikon köşesinde. JS display'i inline-block/'' set eder → display BURADA SET EDİLMEZ */
#mobileMenu.mm-fullpage .mm-hesap-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    box-sizing: border-box;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    color: #fff;
    background: #dc3545;
    border-radius: 999px;
    border: 2px solid #fff;
}

/* Üst düzey menü — beyaz liste, ince ayraç, sağda yön oku */
#mobileMenu.mm-fullpage .mm-nav {
    gap: 0;
    border: 1px solid var(--mm-line);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
}
#mobileMenu.mm-fullpage .mm-nav > .nav-item + .nav-item { border-top: 1px solid var(--mm-line); }
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 9px 16px 9px 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--mm-ink);
    border-radius: 0;
    transition: background .18s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent;
}
/* Düz linklerde sağ ok (accordion'ların kendi aşağı oku var) */
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link:not([data-bs-toggle])::after {
    content: "\F285";                       /* bi-chevron-right */
    font-family: "bootstrap-icons";
    margin-left: auto;
    font-size: 12px;
    color: #c4c9d1;
}
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link > span:not(.badge) {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link:hover,
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link:active,
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link[aria-expanded="true"] {
    background: var(--mm-soft);
    color: var(--mm-ink);
}
/* Öndeki ikon → yumuşak rozet, ikon tema renginde */
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link > i:first-child,
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link > span > i:first-child {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--mm-acc);
    background: var(--mm-acc-soft);
    border-radius: 12px;
    transition: background .18s ease, color .18s ease;
}
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link[aria-expanded="true"] > span > i:first-child {
    background: var(--mm-acc);
    color: #fff;
}
/* Accordion oku → sağa yasla + aç/kapa dönüşü */
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link > span + i {
    margin-left: auto;
    font-size: 12px;
    color: #c4c9d1;
    transition: transform .25s ease, color .18s ease;
}
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link[aria-expanded="true"] > span + i {
    transform: rotate(180deg);
    color: var(--mm-acc);
}

/* Alt menü (collapse) — İKİ EŞİT SÜTUN; "Tümünü Gör" tam genişlik */
#mobileMenu.mm-fullpage .mm-nav .collapse,
#mobileMenu.mm-fullpage .mm-nav .collapsing { background: var(--mm-soft); }
#mobileMenu.mm-fullpage .mm-nav .mm-suralt {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 4px 12px 14px;
}
#mobileMenu.mm-fullpage .mm-nav .mm-suralt > .nav-item { min-width: 0; }
#mobileMenu.mm-fullpage .mm-nav .mm-suralt > .mm-suralt-tumu { grid-column: 1 / -1; }
/* Tek sayıda alt öğe → sondaki yalnız kalan öğe tam genişlik (boş hücre bırakmaz).
   "Tümünü Gör" varsa o 1. satırı kapladığı için sayım çift konumdan, yoksa tek konumdan yapılır. */
#mobileMenu.mm-fullpage .mm-nav .mm-suralt > .mm-suralt-tumu ~ .nav-item:last-child:nth-child(even),
#mobileMenu.mm-fullpage .mm-nav .mm-suralt > .nav-item:first-child:not(.mm-suralt-tumu):last-child,
#mobileMenu.mm-fullpage .mm-nav .mm-suralt > .nav-item:first-child:not(.mm-suralt-tumu) ~ .nav-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
#mobileMenu.mm-fullpage .mm-nav .mm-suralt .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    height: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mm-text);
    background: #fff;
    border: 1px solid var(--mm-line);
    border-radius: 12px;
    margin: 0;
    transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
/* Ad en çok İKİ satıra sarılır (bağımsız denetim, müşteri verisi: tek satırda 390px'te 3, 320px'te 18 alt
   menü adı "…" oluyordu — "Açılış & Etkinlik Çiçekleri"). Daha uzunu 2. satırda "…" ile biter. */
#mobileMenu.mm-fullpage .mm-nav .mm-suralt .nav-link > span {
    min-width: 0;
    overflow: hidden;
    white-space: normal;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
#mobileMenu.mm-fullpage .mm-nav .mm-suralt .nav-link i {
    flex: 0 0 auto;
    font-size: 13px;
    width: auto;
    color: var(--mm-acc);
    text-align: center;
}
#mobileMenu.mm-fullpage .mm-nav .mm-suralt-tumu .nav-link {
    justify-content: center;
    color: var(--mm-ink);
    border-style: dashed;
    border-color: var(--mm-acc-line);
}
#mobileMenu.mm-fullpage .mm-nav .mm-suralt .nav-link:hover,
#mobileMenu.mm-fullpage .mm-nav .mm-suralt .nav-link:active {
    border-color: var(--mm-acc-line);
    color: var(--mm-ink);
    box-shadow: 0 0 0 3px var(--mm-acc-soft);
}

/* "Dil Seçimi (Translate)" ek bağlantısı (panelden açılırsa) — beyaz satır */
#mobileMenu.mm-fullpage .mm-dil-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 1px solid var(--mm-line);
    border-radius: 14px;
    color: var(--mm-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
#mobileMenu.mm-fullpage .mm-dil-link i { color: var(--mm-acc); }

/* Sabit alt CTA — tanımlı olanlar EŞİT sütun: Ara (beyaz) | WhatsApp (koyu marka yeşili) */
#mobileMenu.mm-fullpage .mm-footer {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 10px;
    background: #fff;
    border-top: 1px solid var(--mm-line);
    box-shadow: none;
    padding: 12px var(--mm-pad);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
#mobileMenu.mm-fullpage .mm-cta,
#mobileMenu.mm-fullpage .mm-footer > .btn {    /* ikincisi: eski header.php işaretlemesi */
    min-width: 0;
    width: auto;
    height: 52px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: filter .18s ease, transform .18s ease, border-color .18s ease;
    -webkit-tap-highlight-color: transparent;
}
#mobileMenu.mm-fullpage .mm-cta > span { overflow: hidden; text-overflow: ellipsis; }
#mobileMenu.mm-fullpage .mm-cta > i { flex: 0 0 auto; font-size: 17px; }
#mobileMenu.mm-fullpage .mm-cta:active { transform: scale(.97); }
#mobileMenu.mm-fullpage .mm-cta-tel,
#mobileMenu.mm-fullpage .mm-footer > .btn-outline-primary {
    background: #fff;
    border: 1px solid #e3e6ea;
    color: var(--mm-ink);
}
#mobileMenu.mm-fullpage .mm-cta-tel > i,
#mobileMenu.mm-fullpage .mm-footer > .btn-outline-primary > i { color: var(--mm-acc); }
#mobileMenu.mm-fullpage .mm-cta-tel:hover,
#mobileMenu.mm-fullpage .mm-footer > .btn-outline-primary:hover { border-color: var(--mm-acc-line); background: #fff; color: var(--mm-ink); }
#mobileMenu.mm-fullpage .mm-cta-wa,
#mobileMenu.mm-fullpage .mm-footer > .btn-success {
    background: #15803d;                    /* WhatsApp yeşili koyulaştırıldı: beyaz yazı 5:1 kontrast (#25D366 = 2:1) */
    border: 1px solid #15803d;
    color: #fff;
}
#mobileMenu.mm-fullpage .mm-cta-wa:hover,
#mobileMenu.mm-fullpage .mm-footer > .btn-success:hover { filter: brightness(.96); color: #fff; }
/* Çok dar ekran (≤350px): telefon numarası sığsın diye CTA'lar alt alta */
@media (max-width: 350px) {
    #mobileMenu.mm-fullpage .mm-footer { grid-template-columns: 1fr; gap: 8px; }
    #mobileMenu.mm-fullpage .mm-cta,
    #mobileMenu.mm-fullpage .mm-footer > .btn { height: 48px; }
}

/* ── ESKİ İŞARETLEME UYUMU (kısmi dağıtım: yeni style.css + ESKİ header.php) ──────────
   Eski menü: form.mb-4 > .input-group · .mb-4 > label.form-label · .mm-quick (Sipariş
   Takibi/Hızlı Ödeme + JS dil seçici) · .mm-hesap (yatay ikon ızgarası) · .mm-footer .btn.
   Yeni header.php bu sınıfları ÜRETMEZ (yeni: .mm-ara, .mm-baslik, .mm-aksiyon) →
   aşağıdaki kurallar yalnız eski işaretlemede eşleşir, yeni görünümü etkilemez. */
#mobileMenu.mm-fullpage .mm-scroll .input-group .form-control {
    height: 50px;
    font-size: 14.5px;
    padding: 0 18px;
    background: var(--mm-soft);
    border-color: var(--mm-line);
    border-radius: 999px 0 0 999px;
}
#mobileMenu.mm-fullpage .mm-scroll .input-group .btn {
    padding: 0 18px;
    border-radius: 0 999px 999px 0;
    background: var(--mm-acc);
    border-color: var(--mm-acc);
    color: #fff;
}
#mobileMenu.mm-fullpage .mm-scroll .form-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mm-muted) !important;
    margin: 0 2px 8px;
}
#mobileMenu.mm-fullpage .mm-scroll .form-label > i { display: none; }
#mobileMenu.mm-fullpage .mm-quick,
#mobileMenu.mm-fullpage .mm-hesap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    border: 0;
}
#mobileMenu.mm-fullpage .mm-quick:empty { display: none; }
#mobileMenu.mm-fullpage .mm-quick > *,
#mobileMenu.mm-fullpage .mm-hesap > * { min-width: 0; }
#mobileMenu.mm-fullpage .mm-quick > .translate-widget-mobile,
#mobileMenu.mm-fullpage .mm-scroll > .translate-widget-mobile { margin: 0; padding: 0; border-top: 0; }   /* ikincisi: ESKİ translate-widget.js liste kutusunu kayan alanın başına koyar */
/* Eski header'da dil karosu .mm-quick ızgarasında DİKEY karo olsun (JS'in kendi varsayılanı yatay satır) */
#mobileMenu.mm-fullpage .mm-quick > .mm-dil > .mm-dil-tetik { flex-direction: column; min-height: 88px; }
#mobileMenu.mm-fullpage .mm-quick > .mm-quick-siparis,
#mobileMenu.mm-fullpage .mm-quick > .mm-quick-odeme,
#mobileMenu.mm-fullpage .mm-hesap > .mm-hesap-item {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 4px;
    background: #fff;
    border: 1px solid var(--mm-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    color: var(--mm-ink);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
#mobileMenu.mm-fullpage .mm-quick > .mm-quick-siparis > i,
#mobileMenu.mm-fullpage .mm-quick > .mm-quick-odeme > i,
#mobileMenu.mm-fullpage .mm-hesap-ikon {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--mm-acc-soft);
    color: var(--mm-acc);
    font-size: 18px;
}
#mobileMenu.mm-fullpage .mm-quick > .mm-quick-odeme > i { background: var(--mm-acc); color: #fff; }
#mobileMenu.mm-fullpage .mm-quick > a > span,
#mobileMenu.mm-fullpage .mm-hesap-yazi { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--mm-ink); }
#mobileMenu.mm-fullpage .mm-hesap-cikis .mm-hesap-ikon { background: #fdecee; color: #c42b3a; }
#mobileMenu.mm-fullpage .mm-hesap-cikis .mm-hesap-yazi { color: #c42b3a; }
/* Ağustos öncesi header: Çıkış menü listesinde kırmızı satır (.nav-link.text-danger) */
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link.text-danger > i:first-child,
#mobileMenu.mm-fullpage .mm-nav > .nav-item > .nav-link.text-danger > span > i:first-child { background: #fdecee; color: #c42b3a; }

/* =====================================================
   OZEL SINIFLAR - Bootstrap tema rengi override
   NOT: Site temasinda "primary" = yesil (#2ECC71) olarak kullanilir.
   Bootstrap'in default mavisi (#0d6efd) yerine gecmistir.
   ===================================================== */
.text-primary { color: var(--primary-green) !important; }
.text-secondary { color: var(--accent-dark) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-muted { color: var(--gray) !important; }

.bg-primary { background-color: var(--primary-green) !important; }
.bg-secondary { background-color: var(--accent-dark) !important; }
.bg-light { background-color: var(--off-white) !important; }
.bg-dark { background-color: var(--dark) !important; }

/* =====================================================
   ILETISIM SAYFASI
   ===================================================== */
.iletisim-bilgi {
    background: var(--off-white);
    border-radius: var(--border-radius-lg);
    padding: 30px;
    height: 100%;
}

.iletisim-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.iletisim-item:last-child {
    margin-bottom: 0;
}

.iletisim-item-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.iletisim-item-icon i {
    color: var(--white);
    font-size: 20px;
}

.iletisim-item-content h6 {
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--dark);
}

.iletisim-item-content p,
.iletisim-item-content a {
    color: var(--gray-dark);
    font-size: var(--font-size-sm);
    margin: 0;
}

.iletisim-item-content a:hover {
    color: var(--primary-green);
}

/* Harita */
.harita-wrapper {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    height: 100%;
    min-height: 300px;
}

.harita-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* =====================================================
   PRINT STILLERI
   ===================================================== */
/* Print stilleri dosya sonundaki @media print blogunda birlestirildi */

/* =====================================================
   GENIS EKRAN - 5 KOLONLU URUN GRID (1500px+)
   ===================================================== */
@media (min-width: 1500px) {
    /* Container genisligini 1500px yap */
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1500px;
    }

    /* Urun kartlarinin boyutlarini ayarla */
    .urun-kart {
        min-width: 0;
    }

    /* Kart icindeki resimlerin oranini koru (tema ile override edilebilir) */
    .urun-resim {
        aspect-ratio: 1/1;
    }
}

/* =====================================================
   INSTAGRAM HIKAYE STILI KATEGORILER
   ===================================================== */
/* ==================== STORY KATEGORİLER (Instagram Hikaye Stili) ==================== */
.story-kategoriler {
    overflow: hidden;
    padding: 8px 0 12px;
}

.story-container {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    padding: 8px 5px 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.story-container::-webkit-scrollbar {
    display: none;
}

/* Kademeli giris animasyonu */
.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(20px);
    animation: storyFadeIn 0.5s ease forwards;
    animation-delay: calc(var(--i, 0) * 0.07s);
}

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

/* Hover: 3D float efekti */
.story-item:hover {
    transform: translateY(-6px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Donen Conic Gradient Ring */
.story-ring {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gradient cerceve - donen halka */
.story-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(
        from 0deg,
        #2ECC71 0%,
        #27AE60 15%,
        #1abc9c 30%,
        #3498db 45%,
        #9b59b6 55%,
        #e74c3c 65%,
        #f39c12 78%,
        #2ECC71 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: storyRingSpin 4s linear infinite;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

@keyframes storyRingSpin {
    to { transform: rotate(360deg); }
}

/* Hover'da ring parlaklik artisi */
.story-item:hover .story-ring::before {
    filter: brightness(1.3) saturate(1.2);
}

/* Dis glow efekti */
.story-ring::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #2ECC71 0%,
        #27AE60 15%,
        #1abc9c 30%,
        #3498db 45%,
        #9b59b6 55%,
        #e74c3c 65%,
        #f39c12 78%,
        #2ECC71 100%
    );
    filter: blur(10px);
    opacity: 0;
    z-index: -1;
    animation: storyRingSpin 4s linear infinite;
    transition: opacity 0.4s ease;
}

/* Hover'da glow aktif */
.story-item:hover .story-ring::after {
    opacity: 0.5;
}

/* Beyaz simsek / shimmer gecisi */
.story-shimmer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}

.story-shimmer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 35%,
        rgba(255,255,255,0.6) 40%,
        rgba(255,255,255,0.9) 45%,
        rgba(255,255,255,0.6) 50%,
        transparent 55%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: storyShimmerSpin 2s linear infinite;
    animation-play-state: paused;
}

.story-item:hover .story-shimmer::before {
    opacity: 1;
    animation-play-state: running;
}

@keyframes storyShimmerSpin {
    to { transform: rotate(360deg); }
}

/* Avatar alani */
.story-avatar {
    position: relative;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s ease;
}

.story-item:hover .story-avatar {
    box-shadow: 0 4px 15px rgba(46,204,113,0.15);
}

.story-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

/* Hover'da resim zoom + parlaklik */
.story-item:hover .story-avatar img {
    transform: scale(1.12);
    filter: brightness(1.05);
}

/* Resim olmayan kategoriler */
.story-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2ECC71 0%, #1abc9c 50%, #27AE60 100%);
    background-size: 200% 200%;
    animation: storyPlaceholderShift 3s ease infinite;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes storyPlaceholderShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.story-placeholder i {
    font-size: 30px;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* Kategori ismi - pill stili */
.story-name {
    font-size: 12px;
    font-weight: 600;
    color: #2C3E50;
    text-align: center;
    max-width: 95px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 10px;
    border-radius: 12px;
    background: transparent;
    transition: all 0.3s ease;
}

.story-item:hover .story-name {
    color: #fff;
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    box-shadow: 0 2px 8px rgba(46,204,113,0.3);
}

/* ==================== STİL 2: KART (Pastel) ==================== */
.story-stil-kart {
    position: relative;
}

.story-stil-kart .story-container {
    gap: 20px;
    padding: 10px 40px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

/* Karusel oklar */
.story-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #555;
    font-size: 16px;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
}

.story-nav:hover {
    background: #2ECC71;
    color: #fff;
    border-color: #2ECC71;
}

.story-nav-prev { left: 0; }
.story-nav-next { right: 0; }

.story-stil-kart .story-item {
    gap: 10px;
}

.story-kart-gorsel {
    width: 130px;
    height: 140px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.story-kart-bg {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    transition: opacity 0.3s ease;
}

.story-kart-gorsel img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.story-stil-kart .story-item:hover .story-kart-gorsel {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.story-stil-kart .story-item:hover .story-kart-gorsel img {
    transform: scale(1.08);
}

.story-stil-kart .story-name {
    max-width: 130px;
    font-size: 13px;
    font-weight: 600;
    padding: 0;
    background: none;
}

.story-stil-kart .story-item:hover .story-name {
    color: #2ECC71;
    background: none;
    box-shadow: none;
}

.story-stil-kart .story-placeholder {
    border-radius: 20px;
}

/* ==================== STİL 3: MİNİMAL ==================== */
.story-stil-minimal .story-container {
    gap: 32px;
}

.story-stil-minimal .story-item {
    gap: 10px;
}

.story-minimal-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e8e8e8;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.35s ease;
}

.story-minimal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.story-stil-minimal .story-item:hover .story-minimal-avatar {
    border-color: #2ECC71;
    box-shadow: 0 4px 18px rgba(46,204,113,0.2);
    transform: translateY(-4px);
}

.story-stil-minimal .story-item:hover .story-minimal-avatar img {
    transform: scale(1.08);
}

.story-stil-minimal .story-name {
    max-width: 80px;
    font-size: 12px;
    padding: 0;
    background: none;
}

.story-stil-minimal .story-item:hover .story-name {
    color: #2ECC71;
    background: none;
    box-shadow: none;
}

.story-stil-minimal .story-placeholder {
    border-radius: 50%;
}

/* ==================== STİL 4: KARE ==================== */
.story-stil-kare .story-container {
    gap: 20px;
}

.story-stil-kare .story-item {
    gap: 10px;
}

.story-kare-gorsel {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    overflow: hidden;
    background: #f8f9fa;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-radius 0.3s ease;
}

.story-kare-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.story-stil-kare .story-item:hover .story-kare-gorsel {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-radius: 20px;
}

.story-stil-kare .story-item:hover .story-kare-gorsel img {
    transform: scale(1.1);
}

.story-stil-kare .story-name {
    max-width: 100px;
    font-size: 12px;
    font-weight: 700;
    padding: 0;
    background: none;
}

.story-stil-kare .story-item:hover .story-name {
    color: #2ECC71;
    background: none;
    box-shadow: none;
}

.story-stil-kare .story-placeholder {
    border-radius: 16px;
}

/* ==================== STİL 5: DOGAL (Sade) ==================== */
.story-stil-dogal {
    position: relative;
}

.story-stil-dogal .story-container {
    gap: 24px;
    padding: 10px 40px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.story-stil-dogal .story-item {
    gap: 8px;
    animation: none;
    opacity: 1;
    transform: none;
}

.story-stil-dogal .story-item:hover {
    transform: none;
}

.story-dogal-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f2f5;
    flex-shrink: 0;
}

.story-dogal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-stil-dogal .story-name {
    max-width: 100px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    padding: 0;
    background: none;
    white-space: normal;
    line-height: 1.3;
}

.story-stil-dogal .story-item:hover .story-name {
    color: #333;
    background: none;
    box-shadow: none;
}

.story-stil-dogal .story-placeholder {
    border-radius: 50%;
}

/* ==================== STORY RESPONSİVE ==================== */

/* Mobil */
@media (max-width: 767.98px) {
    .story-container {
        gap: 18px;
        padding: 6px 5px 8px;
    }

    .story-ring {
        width: 72px;
        height: 72px;
    }

    .story-name {
        font-size: 11px;
        max-width: 72px;
        padding: 2px 8px;
    }

    .story-placeholder i {
        font-size: 24px;
    }

    .story-item {
        gap: 8px;
    }

    /* Kart stili mobil */
    .story-kart-gorsel {
        width: 100px;
        height: 110px;
        border-radius: 16px;
    }

    .story-stil-kart .story-container {
        padding: 8px 32px;
        gap: 14px;
    }

    .story-stil-kart .story-name {
        max-width: 100px;
        font-size: 11px;
    }

    .story-nav {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    /* Minimal stili mobil */
    .story-minimal-avatar {
        width: 64px;
        height: 64px;
    }

    .story-stil-minimal .story-name {
        max-width: 64px;
    }

    /* Kare stili mobil */
    .story-kare-gorsel {
        width: 76px;
        height: 76px;
        border-radius: 12px;
    }

    .story-stil-kare .story-name {
        max-width: 76px;
    }

    /* Dogal stili mobil */
    .story-dogal-avatar {
        width: 72px;
        height: 72px;
    }

    .story-stil-dogal .story-container {
        padding: 8px 32px;
        gap: 16px;
    }

    .story-stil-dogal .story-name {
        max-width: 72px;
        font-size: 11px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .story-ring {
        width: 82px;
        height: 82px;
    }

    .story-name {
        max-width: 82px;
    }

    .story-container {
        gap: 22px;
    }

    .story-kart-gorsel {
        width: 115px;
        height: 125px;
    }

    .story-minimal-avatar {
        width: 72px;
        height: 72px;
    }

    .story-kare-gorsel {
        width: 88px;
        height: 88px;
    }

    .story-dogal-avatar {
        width: 85px;
        height: 85px;
    }
}

/* Buyuk ekran - ortalama */
@media (min-width: 992px) {
    .story-container {
        justify-content: center;
        flex-wrap: wrap;
        overflow-x: visible;
    }

    /* Kart ve dogal stili: buyuk ekranda da scroll olabilir (cok kategori varsa) */
    .story-stil-kart .story-container,
    .story-stil-dogal .story-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: center;
    }
}

/* =====================================================================
   HIKAYE STILLERI 6-9 — vitrin / ayrac / madalyon / kutu   (18.09.2026)
   ---------------------------------------------------------------------
   🔴 BU BLOK BILEREK DOSYANIN BU NOKTASINDA (hikaye bolumunun EN SONUNDA,
      responsive bloklarindan SONRA) durur. Iki sebep:
      1) Buradaki her secici `.story-stil-<yeni>` ile baslar → en az iki sinif
         (0,2,0) ozgullugu vardir ve yukaridaki GENEL `.story-name` / `.story-item`
         mobil kurallarini (0,1,0) dogal olarak ezer. Tek sinifli `.story-stil-ayrac`
         kurali da `.story-kategoriler`den SONRA geldigi icin kazanir.
      2) Blok tamamen EKLEMEDIR: ustteki hicbir satira dokunulmaz → bu dosya
         bu stillerin olmadigi ESKI bir siteye kopyalansa bile tek bir secici
         eslesmez (eski markup'ta `story-stil-vitrin` vb. sinif hic uretilmez),
         cikti birebir ayni kalir (§13).
   Renkler mevcut marka paletinden: #2ECC71 / #27AE60 / #2C3E50.
   ===================================================================== */

/* ==================== STIL 6: VITRIN (gorsel dolu + perde) ==================== */
.story-stil-vitrin {
    position: relative;                 /* .story-nav oklari buna gore konumlanir */
}

.story-stil-vitrin .story-container {
    gap: 14px;
    padding: 10px 40px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

/* Ad, gorselin UZERINE tasinir → ortak `.story-name` markup'i degismeden kalir. */
.story-stil-vitrin .story-item {
    position: relative;
    gap: 0;
}

.story-vitrin-gorsel {
    position: relative;
    width: 118px;
    height: 128px;
    border-radius: 12px;
    overflow: hidden;
    background: #EDF3F0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.story-vitrin-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-vitrin-gorsel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    background: linear-gradient(to top, rgba(28,42,36,0.82), rgba(28,42,36,0));
    pointer-events: none;
}

.story-stil-vitrin .story-name {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 8px;
    z-index: 2;
    max-width: none;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 0;
    background: none;
}

.story-stil-vitrin .story-item:hover .story-vitrin-gorsel {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(44,62,80,0.14);
}

.story-stil-vitrin .story-item:hover .story-name {
    color: #fff;
    background: none;
    box-shadow: none;
}

.story-stil-vitrin .story-placeholder {
    border-radius: 12px;
}

/* ==================== STIL 7: AYRACLI PANEL ==================== */
.story-stil-ayrac {
    position: relative;
    padding-left: 44px;                 /* ok dugmeleri panelin DISINDA kalsin */
    padding-right: 44px;
}

.story-stil-ayrac .story-container {
    gap: 0;                             /* ayraclar hucreler arasinda; bosluk padding ile */
    padding: 18px 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    background: #F7FAF9;
    border: 1px solid #EBF0EE;
    border-radius: 16px;
}

.story-stil-ayrac .story-item {
    position: relative;
    gap: 10px;
    padding: 4px 14px;
}

/* Ince ayrac — ilk hucrenin SOLUNDA cizilmez (`+` birlesimi) */
.story-stil-ayrac .story-item + .story-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: #E4EBE8;
}

/* Panel icindeki hucre YUKSELMEZ: ayrac cizgisi kayardi (tasarim da statik). */
.story-stil-ayrac .story-item:hover {
    transform: none;
}

.story-ayrac-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #E6EDEA;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.story-ayrac-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-stil-ayrac .story-item:hover .story-ayrac-avatar {
    border-color: #2ECC71;
    box-shadow: 0 4px 12px rgba(46,204,113,0.18);
}

.story-stil-ayrac .story-name {
    max-width: 118px;
    font-size: 11.5px;
    padding: 0;
    background: none;
}

.story-stil-ayrac .story-item:hover .story-name {
    color: #2ECC71;
    background: none;
    box-shadow: none;
}

.story-stil-ayrac .story-placeholder {
    border-radius: 50%;
}

/* ==================== STIL 8: MADALYON (cift cerceve) ==================== */
.story-stil-madalyon {
    position: relative;
}

.story-stil-madalyon .story-container {
    gap: 14px;
    padding: 10px 40px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.story-stil-madalyon .story-item {
    position: relative;
    gap: 0;
    width: 118px;
    padding: 14px 8px 12px;
    background: #fff;
    border: 1px solid #E7ECEF;
    border-radius: 4px;
    transition: border-color 0.25s ease;
}

/* Ikinci (ic) cerceve */
.story-stil-madalyon .story-item::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid #F1F5F7;
    border-radius: 2px;
    pointer-events: none;
}

.story-stil-madalyon .story-item:hover {
    transform: none;
    border-color: #CBD8D2;
}

.story-madalyon-avatar {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    overflow: hidden;
    background: #F6F9F8;
}

.story-madalyon-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ad ile madalyon arasindaki ince yesil ayrac — ek markup GEREKTIRMEZ. */
.story-stil-madalyon .story-name::before {
    content: '';
    display: block;
    width: 22px;
    height: 1px;
    background: #2ECC71;
    margin: 11px auto 8px;
}

.story-stil-madalyon .story-name {
    max-width: 100%;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2C3E50;
    /* 🔴 2px yatay pay: kutu GENISLIGI metnin ilerleme (advance) genisligine esit oldugunda
       `overflow:hidden` harflerin MUREKKEBINI kirpiyordu — Quicksand'in buyuk harflerinde
       (P, R, O) 3x yakinlastirilmis ekran goruntusunde net gorunuyordu. Kirpma CSS tasmasi
       degil GLIF tasmasi oldugu icin scrollWidth==clientWidth olcumu bunu YAKALAMAZ. */
    padding: 0 2px;
    background: none;
}

.story-stil-madalyon .story-item:hover .story-name {
    color: #2C3E50;
    background: none;
    box-shadow: none;
}

.story-stil-madalyon .story-placeholder {
    border-radius: 50%;
}

/* ==================== STIL 9: KUTU CERCEVE ==================== */
.story-stil-kutu {
    position: relative;
}

.story-stil-kutu .story-container {
    gap: 14px;
    padding: 10px 40px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.story-stil-kutu .story-item {
    gap: 11px;
}

.story-kutu-gorsel {
    width: 108px;
    height: 108px;
    border: 1.5px solid #E4EAEE;
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.story-kutu-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-stil-kutu .story-item:hover {
    transform: none;
}

.story-stil-kutu .story-item:hover .story-kutu-gorsel {
    border-color: #2ECC71;
    background: #FAFDFB;
}

.story-stil-kutu .story-name {
    max-width: 108px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2C3E50;
    padding: 0 2px;                 /* glif kirpilmasi — bkz. madalyon notu */
    background: none;
}

.story-stil-kutu .story-item:hover .story-name {
    color: #2ECC71;
    background: none;
    box-shadow: none;
}

.story-stil-kutu .story-placeholder {
    border-radius: 2px;
}

/* ---- Yeni stiller: mobil (≤767.98px) ----
   🔴 YATAY PADDING 32px BILEREK: ok dugmeleri (.story-nav, 36px) mobilde de GORUNUR kalir
      (`.story-nav{display:none}` mobil kurali dosyada DAHA ONCE geldigi icin sonraki
      `.story-nav{display:flex}` tarafindan eziliyor — mevcut `kart` stilinde de boyle).
      Padding 12px iken ok, ilk/son kategorinin UZERINE biniyordu (ekran goruntusuyle
      yakalandi); `kart` stilinin mobil padding'i (8px 32px) ile ayni degere cekildi. */
@media (max-width: 767.98px) {
    .story-stil-vitrin .story-container {
        gap: 10px;
        padding: 8px 32px;
    }

    .story-vitrin-gorsel {
        width: 84px;
        height: 92px;
        border-radius: 10px;
    }

    .story-stil-vitrin .story-name {
        font-size: 10.5px;
        max-width: none;
        padding: 0;
        left: 4px;
        right: 4px;
        bottom: 6px;
    }

    .story-stil-ayrac {
        padding-left: 34px;
        padding-right: 34px;
    }

    .story-stil-ayrac .story-container {
        gap: 0;
        padding: 12px 2px;
    }

    .story-stil-ayrac .story-item {
        gap: 6px;
        padding: 2px 9px;
    }

    .story-ayrac-avatar {
        width: 54px;
        height: 54px;
    }

    .story-stil-ayrac .story-name {
        max-width: 74px;
        font-size: 11px;
        padding: 0;
    }

    .story-stil-madalyon .story-container {
        gap: 10px;
        padding: 8px 32px;
    }

    .story-stil-madalyon .story-item {
        width: 94px;
        padding: 10px 6px;
        gap: 0;
    }

    .story-madalyon-avatar {
        width: 54px;
        height: 54px;
    }

    .story-stil-madalyon .story-name {
        max-width: 100%;
        font-size: 9px;
        letter-spacing: 0.06em;
        padding: 0 2px;
    }

    .story-stil-madalyon .story-name::before {
        margin: 8px auto 6px;
    }

    .story-stil-kutu .story-container {
        gap: 10px;
        padding: 8px 32px;
    }

    .story-stil-kutu .story-item {
        gap: 8px;
    }

    .story-kutu-gorsel {
        width: 80px;
        height: 80px;
    }

    .story-stil-kutu .story-name {
        max-width: 80px;
        font-size: 9.5px;
        padding: 0 2px;
    }
}

/* ---- Yeni stiller: tablet (768-991.98px) ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .story-vitrin-gorsel {
        width: 104px;
        height: 112px;
    }

    .story-ayrac-avatar {
        width: 58px;
        height: 58px;
    }

    .story-stil-madalyon .story-item {
        width: 106px;
    }

    .story-madalyon-avatar {
        width: 60px;
        height: 60px;
    }

    .story-kutu-gorsel {
        width: 94px;
        height: 94px;
    }

    .story-stil-kutu .story-name {
        max-width: 94px;
    }
}

/* ---- Yeni stiller: buyuk ekran (cok kategori varsa yatay kaydirma) ---- */
@media (min-width: 992px) {
    .story-stil-vitrin .story-container,
    .story-stil-ayrac .story-container,
    .story-stil-madalyon .story-container,
    .story-stil-kutu .story-container,
    .story-stil-cifthalka .story-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        /* 🔴 `safe` ZORUNLU — duz `center` ile OLCULEN kusur (18.09.2026, Chrome 1440px,
           14 kategori): tasan icerik iki yana ESIT dagilir, ama `scrollLeft` 0'in altina
           inemedigi icin SOLDAKI tasma ASLA kaydirilamaz → ilk 2-3 kategori kalici olarak
           erisilemez (ok dugmesi de kurtarmaz). `safe center` tasma anında hizalamayi
           basa dusurur → 14/14 kategoriye erisilir; icerik sigiyorsa yine ortalanir.
           Destegi olmayan eski tarayicida bildirim gecersiz sayilir ve yukaridaki genel
           `.story-container { justify-content: center }` gecerli kalir (eski davranis).
           NOT: ayni kusur `kart` ve `dogal` stillerinde de VARDIR (olculdu: 3 ve 2 kategori
           erisilemiyor) — orasi BILEREK degistirilmedi; mevcut sitelerin gorunumunu
           degistirmemek icin ayri bir karar olarak birakildi. */
        justify-content: safe center;
    }
}


/* =====================================================================
   HIKAYE STILI 10 — CIFT HALKA   (18.09.2026, kullanici tasarim onayi "B")
   ---------------------------------------------------------------------
   Hedef: 8 kategori satiri TAM doldurur ve gorsel mevcut TUM stillerden
   buyuktur. Iki tasarim karari olculerek alindi:

   (1) OGE GENISLIGI SABIT px DEGIL, `calc((100% - (n-1)*gap) / n)`.
       Sabit px ile (ornegin 144 px + 20 px gap) toplam 1292 px eder ve
       1296 px'lik kapsayicida sagda 4 px acik kalirdi; kapsayici genisligi
       palet/ekran/panel ile degistigi icin hicbir sabit deger tutmaz.
       `calc` her genislikte BIREBIR doldurur.

   (2) DIS INCE HALKA `::before` ILE MUTLAK KONUMLU cizilir, `border` ile
       DEGIL. Border+padding katmanlari fotografin capindan px calar:
       ic halka + iki bosluk + dis halka ile 144 px'lik bir kutuda fotograf
       114 px'e dusuyordu — mevcut `kart` stilinin 130 px'inden KUCUK.
       Mutlak konumlu halka layout'a girmedigi icin fotograf ~132 px kalir
       (1296 px kapsayici, 8 kategori) — yani en buyugu.

   §13: Bu blok %100 EKLEMEDIR. Her secici `.story-stil-cifthalka` ya da
   `.story-cifthalka-avatar` tasir; bu siniflar eski surumlerin markup'inda
   HIC uretilmez, dolayisiyla eski bir siteye kopyalansa tek bir secici bile
   eslesmez.
   ===================================================================== */

.story-stil-cifthalka {
    position: relative;
}

.story-stil-cifthalka .story-container {
    /* --hc-n: satirdaki kategori sayisi · --hc-gap: aralarindaki bosluk.
       Oge genisligi bu ikisinden turer; kirilma noktalarinda yalniz bu iki
       degeri degistirmek yeterlidir. */
    --hc-n: 8;
    --hc-gap: 20px;
    gap: var(--hc-gap);
    /* Yatay padding = dis halkanin DISA TASMA payi (inset 5px + 1px border = 6px).
       Daha azi olursa son ogenin halkasi kaydirma alanini buyutur ve satir
       "tam dolu" olmaktan cikar (olculdu: 6px padding oncesi scrollWidth 1298 /
       clientWidth 1296). Ok dugmeleri (`.story-nav`) mutlak konumludur
       (left/right: 0) ve referans tasarimdaki gibi ilk/son dairenin kenarina biner. */
    padding: 12px 6px 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.story-stil-cifthalka .story-item {
    gap: 12px;
    width: calc((100% - (var(--hc-n) - 1) * var(--hc-gap)) / var(--hc-n));
    flex: 0 0 calc((100% - (var(--hc-n) - 1) * var(--hc-gap)) / var(--hc-n));
    /* Cok az kategoride dev dairelere donusmesin. */
    max-width: 190px;
}

.story-cifthalka-avatar {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    /* IC halka: AKTIF TEMANIN primary rengi.
       `--primary-green` degiskenini `header.php` her istekte `:root`a yazar ve degeri
       AKTIF Header Tasarim Paletinin `renk_primary` alanindan gelir (tema onizlemesi de
       kapsanir) — yani tema degisince halka rengi kendiliginden degisir.
       Yedek deger: degisken tanimsiz kalirsa (cok eski bir header.php) marka yesili. */
    border: 3px solid var(--primary-green, #2ECC71);
    /* Halka ile fotograf arasindaki beyaz bosluk. */
    padding: 3px;
    background: #fff;
    box-sizing: border-box;
    transition: transform 0.25s ease;
}

/* DIS ince halka — mutlak konumlu overlay: layout'u etkilemez, yani
   fotografin capindan px CALMAZ (bkz. blok basindaki (2) numarali karar). */
.story-cifthalka-avatar::before {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid #E7ECEF;
    border-radius: 50%;
    pointer-events: none;
    transition: border-color 0.25s ease;
}

.story-cifthalka-avatar img {
    width: 100%;
    /* 🔴 `height: 100%` KULLANILMAZ: ust kutunun yuksekligi icerige bagli oldugu icin
       yuzde DONGUSELDIR, `auto`ya duser ve gorselin KENDI orani daireyi uzatir
       (olculdu: 144.5 px genislik, 160.2 px yukseklik — yani daire degil yumurta).
       `aspect-ratio` + `height: auto` kutuyu KARE yapar, `object-fit: cover` kirpar. */
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.story-stil-cifthalka .story-item:hover .story-cifthalka-avatar {
    transform: translateY(-4px);
}

.story-stil-cifthalka .story-item:hover .story-cifthalka-avatar::before {
    border-color: #CBD8D2;
}

/* Ad ustundeki kisa cizgi — AKTIF TEMANIN primary rengi (halka ile ayni degisken).
   EK MARKUP GEREKTIRMEZ (madalyon ile ayni desen). */
.story-stil-cifthalka .story-name::before {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-green, #2ECC71);
    margin: 0 auto 7px;
}

.story-stil-cifthalka .story-name {
    /* 🔴 `border-box` ZORUNLU: asagidaki `padding: 0 2px` content-box'ta max-width'e
       EKLENIR, ad kutusu ogeden 4 px genis olur ve 8'li satiri tasirir
       (olculdu: scrollWidth 1298 / clientWidth 1296). */
    box-sizing: border-box;
    max-width: 100%;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #2C3E50;
    /* 2px yatay pay: kutu genisligi metnin advance genisligine esitken
       `overflow:hidden` buyuk harflerin MUREKKEBINI kirpiyor (madalyon/kutu
       stillerinde olculdu). */
    padding: 0 2px;
    background: none;
}

.story-stil-cifthalka .story-item:hover .story-name {
    color: #2C3E50;
    background: none;
    box-shadow: none;
}

.story-stil-cifthalka .story-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

/* Tablet: 8 daire cok kucuk kalirdi -> 5'li satir. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .story-stil-cifthalka .story-container {
        --hc-n: 5;
        --hc-gap: 16px;
        padding: 10px 6px 8px;
    }
    .story-stil-cifthalka .story-item { gap: 10px; }
    .story-stil-cifthalka .story-name { font-size: 11px; }
}

/* Mobil: 3'lu satir + yatay kaydirma (daire ~118 px, parmakla rahat). */
@media (max-width: 767.98px) {
    .story-stil-cifthalka .story-container {
        --hc-n: 3;
        --hc-gap: 14px;
        padding: 8px 6px;
    }
    .story-stil-cifthalka .story-item { gap: 9px; max-width: none; }
    .story-cifthalka-avatar { border-width: 2px; padding: 3px; }
    .story-cifthalka-avatar::before { inset: -4px; }
    .story-stil-cifthalka .story-name { font-size: 10.5px; letter-spacing: 0.07em; }
    .story-stil-cifthalka .story-name::before { margin: 0 auto 6px; }
}

/* ==================== BANNER MODUL SISTEMI ==================== */

.banner-modul {
    width: 100%;
    margin: 0 auto;
}

.banner-grid {
    display: grid;
    gap: 20px;
}

/* 1li Banner - Tam Genislik */
.banner-1li .banner-grid {
    grid-template-columns: 1fr;
}

/* 2li Banner */
.banner-2li .banner-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* 3lu Banner */
.banner-3lu .banner-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* 4lu Banner */
.banner-4lu .banner-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* 5li Banner */
.banner-5li .banner-grid {
    grid-template-columns: repeat(5, 1fr);
}

/* 6li Banner */
.banner-6li .banner-grid {
    grid-template-columns: repeat(6, 1fr);
}

/* 1+2 Banner (1 buyuk ust, 2 kucuk alt) */
.banner-1-2 .banner-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
}
.banner-1-2 .banner-item.slot-1 {
    grid-column: span 2;
}

/* 2+1 Banner (2 kucuk ust, 1 buyuk alt) */
.banner-2-1 .banner-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
}
.banner-2-1 .banner-item.slot-3 {
    grid-column: span 2;
}

/* 1+3 Banner (1 buyuk sol, 3 kucuk sag dikey) */
.banner-1-3 .banner-grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(3, 1fr);
}
.banner-1-3 .banner-item.slot-1 {
    grid-row: span 3;
}

/* 1+4 Banner */
.banner-1-4 .banner-grid {
    grid-template-columns: 3fr repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.banner-1-4 .banner-item.slot-1 {
    grid-row: span 2;
}

/* 3+1 Banner (3 kucuk sol dikey, 1 buyuk sag) */
.banner-3-1 .banner-grid {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(3, 1fr);
}
.banner-3-1 .banner-item.slot-4 {
    grid-row: span 3;
}

/* 4+1 Banner */
.banner-4-1 .banner-grid {
    grid-template-columns: repeat(2, 1fr) 3fr;
    grid-template-rows: repeat(2, 1fr);
}
.banner-4-1 .banner-item.slot-5 {
    grid-row: span 2;
}

/* Urun Arasi Banner - Urun karti boyutunda */
.banner-urun {
    margin-bottom: 0 !important;
}
.banner-urun .banner-grid {
    display: block;
}
.banner-urun .banner-item {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
}
.banner-urun .banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner-urun .banner-overlay {
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}
.banner-urun .banner-overlay h3 {
    font-size: 18px;
    margin-bottom: 5px;
}
.banner-urun .banner-overlay p {
    font-size: 13px;
    margin-bottom: 10px;
}
.banner-urun .banner-btn {
    padding: 8px 16px;
    font-size: 12px;
}

/* Banner Item */
.banner-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.banner-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    border-radius: 12px;
}

.banner-item:hover img {
    transform: scale(1.05);
}

/* Banner Overlay */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Ic bosluk panelden yonetilir; set edilmeyen taraf breakpoint varsayilanini korur */
    padding: var(--bpad-u, 30px) var(--bpad-r, 35px) var(--bpad-b, 30px) var(--bpad-l, 35px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    color: #fff;
    border-radius: 12px;
}

/* Baslik/Alt baslik VARSAYILAN rengi BEYAZ — panel Canli Onizleme (.ko-h3 #fff) ve urun-arasi
   banner (.banner-urun-overlay color:#fff) ile AYNI. Renk panelden ayarlanmadiginda (banner_resim.baslik_renk='')
   inline stil basilmaz ve bu varsayilan uygulanir. Eskiden #1a1a1a idi → onizleme beyaz/site siyah tutarsizligi
   ("beyaz sectim siyah kaldi"). Panelde renk secilirse inline `style="color:.."` bunu ezer (banner_metin_stil). */
.banner-overlay h3 {
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 6px;
    line-height: 1.15;
    color: #fff;
}

.banner-overlay p {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 16px;
    color: #e2e8f0;
}

/* Baslik/Alt baslik cerceve (border) kutusu: metni sarsin diye inline-block + ic bosluk (border inline stille gelir) */
.banner-overlay h3.banner-cerceveli,
.banner-overlay p.banner-cerceveli,
.banner-urun-overlay h4.banner-cerceveli,
.banner-urun-overlay .banner-urun-ust.banner-cerceveli,
/* SLIDER: ayni cerceve kutusu slider basligi/aciklamasi icin de gecerli
   (panel/slider.php slayt modali banner_metin_stil() ile ayni sinifi uretir) */
.slider-icerik-box h3.banner-cerceveli,
.slider-icerik-box p.banner-cerceveli {
    display: inline-block;
    padding: 0.08em 0.4em;
    border-radius: 6px;
}

/* ==================== BANNER SLOT EFEKTLERI (slot bazli — .banner-item / .banner-urun-resim icine gomulu) ====
   Katman resmin ustunde AMA metin overlay'inin ALTINDA (DOM sirasi: img -> efekt -> overlay; z-index YOK ->
   overlay dogal olarak ustte = yazi net kalir). pointer-events:none -> tiklama <a>'ya gecer.
   Efekt SADECE bu .banner-efekt'i iceren banner_resim'e uygulanir (baskasini etkilemez). */
.banner-efekt {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}
.banner-efekt span {
    position: absolute;
    top: -12%;
    display: block;
    line-height: 1;
    will-change: transform, top, opacity;
}
/* Parcacik konum/boyut/zamanlama cesitliligi (14 parcacik) — TUM efektler paylasir */
.banner-efekt span:nth-child(1)  { left: 5%;  font-size: 14px; animation-duration: 7.0s;  animation-delay: 0.0s; }
.banner-efekt span:nth-child(2)  { left: 12%; font-size: 10px; animation-duration: 9.5s;  animation-delay: 1.3s; }
.banner-efekt span:nth-child(3)  { left: 20%; font-size: 16px; animation-duration: 6.2s;  animation-delay: 2.5s; }
.banner-efekt span:nth-child(4)  { left: 28%; font-size: 11px; animation-duration: 8.4s;  animation-delay: 0.7s; }
.banner-efekt span:nth-child(5)  { left: 36%; font-size: 13px; animation-duration: 10.0s; animation-delay: 3.2s; }
.banner-efekt span:nth-child(6)  { left: 44%; font-size: 9px;  animation-duration: 7.7s;  animation-delay: 1.9s; }
.banner-efekt span:nth-child(7)  { left: 52%; font-size: 15px; animation-duration: 6.8s;  animation-delay: 4.0s; }
.banner-efekt span:nth-child(8)  { left: 60%; font-size: 12px; animation-duration: 9.0s;  animation-delay: 0.4s; }
.banner-efekt span:nth-child(9)  { left: 68%; font-size: 10px; animation-duration: 8.0s;  animation-delay: 2.1s; }
.banner-efekt span:nth-child(10) { left: 76%; font-size: 14px; animation-duration: 6.5s;  animation-delay: 3.6s; }
.banner-efekt span:nth-child(11) { left: 83%; font-size: 11px; animation-duration: 9.8s;  animation-delay: 1.1s; }
.banner-efekt span:nth-child(12) { left: 90%; font-size: 16px; animation-duration: 7.3s;  animation-delay: 2.8s; }
.banner-efekt span:nth-child(13) { left: 96%; font-size: 9px;  animation-duration: 8.7s;  animation-delay: 0.9s; }
.banner-efekt span:nth-child(14) { left: 15%; font-size: 12px; animation-duration: 10.5s; animation-delay: 4.5s; }

@keyframes bnrDus {
    0%   { top: -12%; opacity: 0; transform: translateX(0) rotate(0deg); }
    8%   { opacity: 1; }
    50%  { transform: translateX(14px) rotate(180deg); }
    92%  { opacity: 1; }
    100% { top: 112%; opacity: 0; transform: translateX(-10px) rotate(360deg); }
}
@keyframes bnrDusHizli { 0% { top: -12%; opacity: 0; } 10% { opacity: .85; } 100% { top: 112%; opacity: 0; } }
@keyframes bnrYuksel {
    0%   { top: 112%; opacity: 0; transform: translateX(0) scale(.9); }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: -12%; opacity: 0; transform: translateX(18px) scale(1.15); }
}

/* Dusen emoji efektleri: ortak animasyon (bnrDus) */
.banner-efekt-kar span, .banner-efekt-kalp span, .banner-efekt-yaprak span,
.banner-efekt-isilti span, .banner-efekt-yildiz span, .banner-efekt-konfeti span {
    animation-name: bnrDus; animation-timing-function: linear; animation-iteration-count: infinite;
}
.banner-efekt-damla span { animation-name: bnrDusHizli; animation-timing-function: ease-in; animation-iteration-count: infinite; }
.banner-efekt-balon span, .banner-efekt-bokeh span { animation-name: bnrYuksel; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

/* Emoji icerigi ::before ile (span BOS -> emoji CSS'ten; dingbatlar CSS color ile renklenir) */
.banner-efekt-kar span::before    { content: '\2744'; color: #fff; text-shadow: 0 0 4px rgba(255,255,255,.7); }
.banner-efekt-kalp span::before   { content: '\2764'; color: #ff4d6d; }
.banner-efekt-yaprak span::before { content: '\1F338'; }
.banner-efekt-damla span::before  { content: '\1F4A7'; }
.banner-efekt-isilti span::before { content: '\2728'; }
.banner-efekt-yildiz span::before { content: '\2B50'; }
.banner-efekt-isilti span, .banner-efekt-yildiz span { filter: drop-shadow(0 0 3px rgba(255,240,150,.85)); }

/* Konfeti: CSS-cizili renkli kareler */
.banner-efekt-konfeti span { width: 8px; height: 8px; border-radius: 2px; }
.banner-efekt-konfeti span:nth-child(3n+1) { background: #ff5d8f; }
.banner-efekt-konfeti span:nth-child(3n+2) { background: #ffd166; }
.banner-efekt-konfeti span:nth-child(3n)   { background: #4cc9f0; }

/* Balon: seffaf yukselen daireler */
.banner-efekt-balon span {
    width: 16px; height: 16px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.12));
    box-shadow: inset 0 0 6px rgba(255,255,255,.5);
}
/* Bokeh: yumusak renkli isik daireleri */
.banner-efekt-bokeh span {
    width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,182,193,.55), rgba(255,182,193,0) 70%);
    filter: blur(2px);
}
.banner-efekt-bokeh span:nth-child(2n) { background: radial-gradient(circle, rgba(173,216,230,.5), rgba(173,216,230,0) 70%); }
.banner-efekt-bokeh span:nth-child(3n) { background: radial-gradient(circle, rgba(255,240,150,.5), rgba(255,240,150,0) 70%); }

/* Shine: capraz isik gecisi (indirim afisleri) — parcaciksiz, ::after sweep */
.banner-efekt-shine::after {
    content: '';
    position: absolute; top: -50%; left: -60%;
    width: 40%; height: 200%;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    transform: rotate(8deg);
    animation: bnrShine 3.5s ease-in-out infinite;
}
@keyframes bnrShine { 0% { left: -60%; } 60% { left: 130%; } 100% { left: 130%; } }

/* Erisilebilirlik: hareket azaltma tercihinde efekt kapali */
@media (prefers-reduced-motion: reduce) {
    .banner-efekt { display: none; }
}

/* ==== Banner CTA butonu: renk/gölge butonun kendi renginden turer (--btn-* custom property) ====
   Renk verilmezse asagidaki varsayilanlar (yesil) devreye girer = geriye tam uyumlu.
   Varyant siniflari (bcta-dolu/gradyan/outline/cam/minimal) yapisal gorunumu belirler. */
.banner-overlay .banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--btn-bg, linear-gradient(135deg, #2ECC71 0%, #27AE60 100%));
    color: var(--btn-renk, #fff);
    padding: 12px 30px;
    border-radius: var(--btn-radius, 28px);
    font-size: 16px;
    font-weight: 700;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(var(--btn-golge, 46,204,113), 0.35);
    position: relative;
    overflow: hidden;
    border: none;
}

/* Buton ok ikonu animasyonu */
.banner-overlay .banner-btn::after {
    content: '\2192';
    display: inline-block;
    transition: transform 0.35s ease;
    font-size: 18px;
}

/* Buton shimmer efekti (yalniz gradyan varyantta) */
.banner-overlay .banner-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: bannerBtnShimmer 3s ease-in-out infinite;
}

.banner-overlay .banner-btn:hover {
    background: var(--btn-hbg, var(--btn-bg, linear-gradient(135deg, #27AE60 0%, #1e8449 100%)));
    color: var(--btn-hrenk, var(--btn-renk, #fff));
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(var(--btn-golge, 46,204,113), 0.45);
    animation: none;
}

.banner-overlay .banner-btn:hover::after {
    transform: translateX(4px);
}

/* ==== Buton Varyantlari (hem ana banner hem urun-arasi butonda gecerli) ==== */
/* Gradyan (varsayilan): pulse + shimmer acik, gölge butonun renginde */
.banner-overlay .banner-btn.bcta-gradyan {
    animation: bannerBtnPulse 2.5s ease-in-out infinite;
}
/* Hover'da pulse dursun (base :hover ile ozgulluk esit oldugundan acikca ez) → hover'in guclu golgesi gorunur */
.banner-overlay .banner-btn.bcta-gradyan:hover {
    animation: none;
}
/* Diger tum varyantlarda pulse/shimmer kapali */
.banner-overlay .banner-btn.bcta-dolu::before,
.banner-overlay .banner-btn.bcta-outline::before,
.banner-overlay .banner-btn.bcta-cam::before,
.banner-overlay .banner-btn.bcta-minimal::before,
.banner-urun-btn.bcta-dolu::before,
.banner-urun-btn.bcta-outline::before,
.banner-urun-btn.bcta-cam::before,
.banner-urun-btn.bcta-minimal::before { display: none; }

/* Dolu: düz renk, hafif gölge */
.banner-overlay .banner-btn.bcta-dolu,
.banner-urun-btn.bcta-dolu {
    background: var(--btn-bg, #2563eb);
    box-shadow: 0 3px 10px rgba(var(--btn-golge, 37,99,235), 0.30);
}
/* Outline: seffaf zemin + renkli cerceve, hover'da dolar */
.banner-overlay .banner-btn.bcta-outline,
.banner-urun-btn.bcta-outline {
    background: transparent;
    color: var(--btn-accent, #fff);
    border: 2px solid var(--btn-accent, currentColor);
    box-shadow: none;
}
.banner-overlay .banner-btn.bcta-outline:hover,
.banner-urun-btn.bcta-outline:hover {
    background: var(--btn-accent, rgba(255,255,255,0.15));
    color: var(--btn-renk, #fff);
    box-shadow: 0 6px 18px rgba(var(--btn-golge, 0,0,0), 0.25);
}
/* Cam: yari seffaf beyaz + blur */
.banner-overlay .banner-btn.bcta-cam,
.banner-urun-btn.bcta-cam {
    background: rgba(255,255,255,0.18);
    color: var(--btn-renk, #fff);
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.banner-overlay .banner-btn.bcta-cam:hover,
.banner-urun-btn.bcta-cam:hover {
    background: rgba(255,255,255,0.30);
    color: var(--btn-renk, #fff);
}
/* Minimal: sadece yazi + ok, hover'da alt cizgi */
.banner-overlay .banner-btn.bcta-minimal,
.banner-urun-btn.bcta-minimal {
    background: transparent;
    color: var(--btn-accent, #fff);
    box-shadow: none;
    border: none;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 0;
}
.banner-overlay .banner-btn.bcta-minimal:hover,
.banner-urun-btn.bcta-minimal:hover {
    background: transparent;
    color: var(--btn-accent, #fff);
    text-decoration: underline;
    text-underline-offset: 4px;
    box-shadow: none;
}

/* Pulse animasyonu - dikkat cekici (glow butonun kendi renginde) */
@keyframes bannerBtnPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(var(--btn-golge, 46,204,113), 0.35); }
    50%      { box-shadow: 0 4px 25px rgba(var(--btn-golge, 46,204,113), 0.55), 0 0 0 6px rgba(var(--btn-golge, 46,204,113), 0.1); }
}

/* Shimmer animasyonu - parlama gecisi */
@keyframes bannerBtnShimmer {
    0%   { left: -100%; }
    50%  { left: 150%; }
    100% { left: 150%; }
}

/* Banner Hover Efektleri */
/* Varsayilan hover: zoom (mevcut .banner-item:hover img { transform: scale(1.05) }) */
/* yok: Hover efekti kaldir */
.banner-hover-yok .banner-item:hover img {
    transform: none;
}
/* parlaklik: Hover'da parlaklik artisi */
.banner-hover-parlaklik .banner-item:hover img {
    transform: none;
    filter: brightness(1.15);
}
.banner-hover-parlaklik .banner-item img {
    transition: transform 0.4s ease, filter 0.4s ease;
}
/* karartma: Hover'da karartma */
.banner-hover-karartma .banner-item:hover img {
    transform: none;
    filter: brightness(0.85);
}
.banner-hover-karartma .banner-item img {
    transition: transform 0.4s ease, filter 0.4s ease;
}
/* yukari: Hover'da yukari kaydir */
.banner-hover-yukari .banner-item:hover img {
    transform: translateY(-5px);
}

/* simsek: Beyaz simsek / isiltili gecis */
.banner-hover-simsek .banner-item {
    position: relative;
    overflow: hidden;
}
.banner-hover-simsek .banner-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0) 25%,
        rgba(255,255,255,0.4) 45%,
        rgba(255,255,255,0.8) 50%,
        rgba(255,255,255,0.4) 55%,
        rgba(255,255,255,0) 75%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    transition: none;
}
.banner-hover-simsek .banner-item:hover::before {
    animation: banner-simsek 0.7s ease forwards;
}
.banner-hover-simsek .banner-item:hover img {
    transform: none;
}
@keyframes banner-simsek {
    0% { left: -100%; }
    100% { left: 150%; }
}

/* parlama: Neon parlak cerceve glow */
.banner-hover-parlama .banner-item {
    transition: box-shadow 0.4s ease;
}
.banner-hover-parlama .banner-item:hover {
    box-shadow: 0 0 15px rgba(46,204,113,0.5), 0 0 35px rgba(46,204,113,0.25), inset 0 0 15px rgba(46,204,113,0.1);
}
.banner-hover-parlama .banner-item:hover img {
    transform: none;
    filter: brightness(1.05);
}
.banner-hover-parlama .banner-item img {
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* sallanma: Hafif 3D tilt / sallanma */
.banner-hover-sallanma .banner-item {
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
}
.banner-hover-sallanma .banner-item:hover {
    transform: perspective(600px) rotateY(4deg) rotateX(2deg);
}
.banner-hover-sallanma .banner-item:hover img {
    transform: none;
}

/* gecis: Siyah-beyazdan renge gecis */
.banner-hover-gecis .banner-item img {
    filter: grayscale(100%);
    transition: transform 0.4s ease, filter 0.5s ease;
}
.banner-hover-gecis .banner-item:hover img {
    filter: grayscale(0%);
    transform: none;
}

/* Banner Golge Efektleri */
.banner-golge-hafif .banner-item {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.banner-golge-orta .banner-item {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.banner-golge-guclu .banner-item {
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

/* Mobile Responsive */
@media (max-width: 767.98px) {
    .banner-grid {
        gap: 10px;
    }

    .banner-2li .banner-grid,
    .banner-3lu .banner-grid,
    .banner-4lu .banner-grid,
    .banner-5li .banner-grid,
    .banner-6li .banner-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 3lu ve 5li: Ilk banner tam genislik, geri kalanlar 2'li (bosluk onleme) */
    .banner-3lu .banner-item.slot-1,
    .banner-5li .banner-item.slot-1 {
        grid-column: span 2;
    }

    .banner-1-2 .banner-grid,
    .banner-2-1 .banner-grid {
        grid-template-columns: 1fr;
    }

    .banner-1-2 .banner-item.slot-1,
    .banner-2-1 .banner-item.slot-3 {
        grid-column: span 1;
    }

    .banner-1-3 .banner-grid,
    .banner-3-1 .banner-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .banner-1-3 .banner-item.slot-1,
    .banner-3-1 .banner-item.slot-4 {
        grid-row: span 1;
    }

    .banner-1-4 .banner-grid,
    .banner-4-1 .banner-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .banner-1-4 .banner-item.slot-1,
    .banner-4-1 .banner-item.slot-5 {
        grid-column: span 2;
        grid-row: span 1;
    }

    .banner-item {
        border-radius: 8px;
    }

    .banner-item img {
        border-radius: 8px;
    }

    .banner-overlay {
        padding: var(--bpad-u, 8px) var(--bpad-r, 10px) var(--bpad-b, 8px) var(--bpad-l, 10px);
        border-radius: 8px;
        align-items: flex-end;
        text-align: right;
    }

    .banner-overlay h3 {
        font-size: 11px;
        line-height: 1.2;
        margin: 0 0 1px;
    }

    .banner-overlay p {
        font-size: 9px;
        margin: 0 0 4px;
    }

    .banner-overlay .banner-btn {
        padding: 3px 10px;
        font-size: 9px;
        border-radius: 16px;
        gap: 3px;
        animation: none;
    }

    .banner-overlay .banner-btn::after {
        font-size: 10px;
    }

    .banner-overlay .banner-btn::before {
        display: none;
    }
}

/* Kucuk Mobil (<=480px) */
@media (max-width: 480px) {
    .banner-overlay {
        padding: var(--bpad-u, 5px) var(--bpad-r, 7px) var(--bpad-b, 5px) var(--bpad-l, 7px);
    }

    .banner-overlay h3 {
        font-size: 10px;
    }

    .banner-overlay p {
        font-size: 8px;
        margin: 0 0 3px;
    }

    .banner-overlay .banner-btn {
        padding: 2px 8px;
        font-size: 8px;
    }

    .banner-overlay .banner-btn::after {
        display: none;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .banner-4lu .banner-grid,
    .banner-6li .banner-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 4lu: Ilk banner tam genislik, geri kalan 3'lu (bosluk onleme) */
    .banner-4lu .banner-item.slot-1 {
        grid-column: span 3;
    }

    /* 5li: 2 kolon + ilk banner tam genislik (bosluk onleme) */
    .banner-5li .banner-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .banner-5li .banner-item.slot-1 {
        grid-column: span 2;
    }

    .banner-overlay {
        padding: var(--bpad-u, 14px) var(--bpad-r, 18px) var(--bpad-b, 14px) var(--bpad-l, 18px);
    }

    .banner-overlay h3 {
        font-size: 18px;
    }

    .banner-overlay p {
        font-size: 13px;
    }

    .banner-overlay .banner-btn {
        padding: 7px 16px;
        font-size: 12px;
    }
}

/* Urun Arasi Banner Kart */
.banner-urun-kart {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    min-height: 380px;
}
.banner-urun-kart a {
    display: block;
    height: 100%;
}
.banner-urun-resim {
    position: relative;
    height: 100%;
    min-height: 380px;
}
.banner-urun-resim img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.banner-urun-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--bpad-u, 25px) var(--bpad-r, 20px) var(--bpad-b, 25px) var(--bpad-l, 20px);
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    color: #fff;
    border-radius: 0 0 16px 16px;
}
.banner-urun-ust {
    display: block;
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 5px;
}
.banner-urun-overlay h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.3;
}
.banner-urun-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--btn-bg, #2563eb);
    color: var(--btn-renk, #fff);
    padding: 10px 18px;
    border-radius: var(--btn-radius, 8px);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(var(--btn-golge, 37,99,235), 0.28);
    border: none;
}
.banner-urun-btn:hover {
    background: var(--btn-hbg, var(--btn-bg, #1d4ed8));
    color: var(--btn-hrenk, var(--btn-renk, #fff));
    box-shadow: 0 6px 18px rgba(var(--btn-golge, 37,99,235), 0.38);
}
.banner-urun-kart:hover img {
    transform: scale(1.05);
    transition: transform 0.5s ease;
}
.banner-urun-resim img {
    transition: transform 0.5s ease;
}

/* Urun Arasi Banner: Kose yuvarlaklik (CSS degisken) */
.banner-col[style*="--buk-radius"] .banner-urun-kart,
.banner-col[style*="--buk-radius"] .banner-urun-resim img {
    border-radius: var(--buk-radius, 16px);
}

/* Urun Arasi Banner: Hover Efektleri */
.banner-hover-yok .banner-urun-kart:hover img {
    transform: none;
}
.banner-hover-parlaklik .banner-urun-kart img {
    transition: transform 0.4s ease, filter 0.4s ease;
}
.banner-hover-parlaklik .banner-urun-kart:hover img {
    transform: none;
    filter: brightness(1.15);
}
.banner-hover-karartma .banner-urun-kart img {
    transition: transform 0.4s ease, filter 0.4s ease;
}
.banner-hover-karartma .banner-urun-kart:hover img {
    transform: none;
    filter: brightness(0.85);
}
.banner-hover-yukari .banner-urun-kart:hover img {
    transform: translateY(-5px);
}
.banner-hover-simsek .banner-urun-resim::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.4) 55%, rgba(255,255,255,0) 75%, transparent 100%);
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    transition: none;
}
.banner-hover-simsek .banner-urun-kart:hover .banner-urun-resim::before {
    animation: banner-simsek 0.7s ease forwards;
}
.banner-hover-simsek .banner-urun-kart:hover img {
    transform: none;
}
.banner-hover-parlama .banner-urun-kart {
    transition: box-shadow 0.4s ease;
}
.banner-hover-parlama .banner-urun-kart:hover {
    box-shadow: 0 0 15px rgba(46,204,113,0.5), 0 0 35px rgba(46,204,113,0.25), inset 0 0 15px rgba(46,204,113,0.1);
}
.banner-hover-parlama .banner-urun-kart img {
    transition: transform 0.4s ease, filter 0.4s ease;
}
.banner-hover-parlama .banner-urun-kart:hover img {
    transform: none;
    filter: brightness(1.05);
}
.banner-hover-sallanma .banner-urun-kart {
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
}
.banner-hover-sallanma .banner-urun-kart:hover {
    transform: perspective(600px) rotateY(4deg) rotateX(2deg);
}
.banner-hover-sallanma .banner-urun-kart:hover img {
    transform: none;
}
.banner-hover-gecis .banner-urun-kart img {
    filter: grayscale(100%);
    transition: transform 0.4s ease, filter 0.5s ease;
}
.banner-hover-gecis .banner-urun-kart:hover img {
    filter: grayscale(0%);
    transform: none;
}

/* Urun Arasi Banner: Golge Efektleri */
.banner-golge-hafif .banner-urun-kart {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.banner-golge-orta .banner-urun-kart {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.banner-golge-guclu .banner-urun-kart {
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

@media (max-width: 767.98px) {
    .banner-urun-kart,
    .banner-urun-resim {
        min-height: 280px;
    }
    .banner-urun-overlay h4 {
        font-size: 16px;
    }
    .banner-urun-btn {
        padding: 8px 14px;
        font-size: 12px;
    }
}

/* Vitrin Banner (sol: 1 buyuk + 2 kucuk | sag: 3 esit) */
.banner-vitrin .banner-grid {
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 1fr 1fr 1fr;
}
.banner-vitrin .banner-item {
    overflow: hidden;
}
.banner-vitrin .banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner-vitrin .banner-item.slot-1 {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
    min-height: 340px;
}
.banner-vitrin .banner-item.slot-2 {
    grid-column: 7 / 11;
    grid-row: 1;
}
.banner-vitrin .banner-item.slot-3 {
    grid-column: 7 / 11;
    grid-row: 2;
}
.banner-vitrin .banner-item.slot-4 {
    grid-column: 1 / 4;
    grid-row: 3;
    min-height: 160px;
}
.banner-vitrin .banner-item.slot-5 {
    grid-column: 4 / 7;
    grid-row: 3;
}
.banner-vitrin .banner-item.slot-6 {
    grid-column: 7 / 11;
    grid-row: 3;
}

@media (max-width: 991.98px) {
    .banner-vitrin .banner-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .banner-vitrin .banner-item.slot-1 {
        grid-column: span 2;
        grid-row: auto;
        min-height: 280px;
    }
    .banner-vitrin .banner-item.slot-2,
    .banner-vitrin .banner-item.slot-3,
    .banner-vitrin .banner-item.slot-4,
    .banner-vitrin .banner-item.slot-5,
    .banner-vitrin .banner-item.slot-6 {
        grid-column: auto;
        grid-row: auto;
        min-height: 160px;
    }
}

@media (max-width: 575.98px) {
    .banner-vitrin .banner-grid {
        grid-template-columns: 1fr;
    }
    .banner-vitrin .banner-item.slot-1 {
        grid-column: 1;
        min-height: 220px;
    }
}

/* =====================================================
   GENIS EKRAN - Satirda 5 Urun (>= 1400px)
   ===================================================== */
@media (min-width: 1400px) {
    .urunler .row > .col-xxl-5urun {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* =====================================================
   URUN TOOLBAR - Baslik, Siralama & Tumunu Gor
   Bootstrap row g-4 ile urun gridine birebir hizali
   ===================================================== */

/* Urun Baslik (Slogan) */
.urun-baslik h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--dark);
    margin: 0 0 2px 0;
    letter-spacing: -0.3px;
}

.urun-baslik p {
    font-size: 14px;
    color: #8c939b;
    margin: 0;
    font-weight: 400;
}

@media (max-width: 767.98px) {
    .urun-baslik {
        text-align: center;
        margin-bottom: 4px;
    }

    .urun-baslik h2 {
        font-size: 19px;
    }

    .urun-baslik p {
        font-size: 13px;
    }
}

@media (max-width: 575.98px) {
    .urun-baslik h2 {
        font-size: 17px;
    }

    .urun-baslik p {
        font-size: 12px;
    }
}

/* Siralama Dropdown */
.siralama-dropdown {
    position: relative;
}

.siralama-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1;
    border: 1.5px solid #e2e5e9;
    background: #f7f8f9;
    color: var(--dark);
    transition: all 0.25s ease;
}

.siralama-btn:hover {
    border-color: #cdd1d6;
    background: #eef0f2;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.siralama-btn.acik {
    border-color: var(--primary-green);
    background: #f0faf4;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
}

/* Sort icon animasyonu */
.siralama-icon-spin {
    color: var(--primary-green);
    font-size: 15px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.siralama-btn:hover .siralama-icon-spin {
    transform: rotate(180deg);
}

.siralama-btn.acik .siralama-icon-spin {
    transform: rotate(180deg);
    animation: icon-pulse 1.5s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Chevron */
.siralama-chevron {
    font-size: 11px;
    color: #9ca3af;
    margin-left: 2px;
    transition: transform 0.25s ease;
}

.siralama-btn.acik .siralama-chevron {
    transform: rotate(180deg);
    color: var(--primary-green);
}

/* --- Tumunu Gor Butonu --- */
.tumunu-gor-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid #e2e5e9;
    background: #f7f8f9;
    color: var(--dark);
    transition: all 0.25s ease;
}

.tumunu-gor-btn:hover {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--white);
    box-shadow: 0 4px 16px rgba(46, 204, 113, 0.3);
    transform: translateY(-1px);
}

/* Ok icon animasyonu */
.tumunu-gor-icon {
    font-size: 14px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tumunu-gor-btn:hover .tumunu-gor-icon {
    transform: translateX(5px);
    animation: arrow-bounce 0.6s ease-in-out infinite alternate;
}

@keyframes arrow-bounce {
    0% { transform: translateX(3px); }
    100% { transform: translateX(7px); }
}

/* --- Dropdown Menu --- */
.siralama-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 4px;
    margin: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.2s ease;
}

.siralama-menu.acik {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.siralama-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--dark);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.siralama-item:hover {
    background: #f5f6f7;
    padding-left: 18px;
}

.siralama-item.aktif {
    color: var(--primary-green);
    font-weight: 600;
    background: rgba(46, 204, 113, 0.07);
}

/* --- Responsive: sm --- */
@media (max-width: 767.98px) {
    .siralama-btn,
    .tumunu-gor-btn {
        height: 42px;
        font-size: 13px;
        padding: 0 14px;
    }

    .siralama-btn span strong {
        display: none;
    }

    .siralama-btn span::after {
        content: 'Sirala';
        font-weight: 600;
    }
}

/* --- Responsive: xs --- */
@media (max-width: 575.98px) {
    .siralama-btn,
    .tumunu-gor-btn {
        height: 40px;
        font-size: 12px;
        padding: 0 10px;
        gap: 5px;
        border-radius: 10px;
    }
}

/* =====================================================
   ERISILEBIRLIK (a11y) - Klavye Navigasyonu
   ===================================================== */
:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

/* Skip Link (Ekran okuyucu) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary-green);
    color: var(--white);
    padding: 10px 20px;
    z-index: 10000;
    font-weight: 600;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* =====================================================
   PRINT STILLERI
   ===================================================== */
@media print {
    .top-bar,
    .site-header,
    .main-nav,
    .site-footer,
    .whatsapp-float,
    .bolge-secici-wrapper,
    .hf-tab,
    .hf-panel,
    .duyuru-popup-overlay,
    .sidebar,
    .topbar,
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    img {
        max-width: 100% !important;
    }
}


/* =====================================================
   HEADER OZEL STILLERI (Favori Badge + Bolge Secici)
   ===================================================== */

/* Favori Badge */
.favori-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff; /* zil/sepet rozetiyle tutarli beyaz halka */
}
.header-action {
    position: relative;
}

/* =====================================================
   BOLGE SECICI - DROPDOWN TASARIM (GENIS)
   ===================================================== */
.bolge-secici-wrapper {
    position: relative;
}

.bolge-secici-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.bolge-secici-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    filter: brightness(1.08);
}

.bolge-secici-btn.active {
    border-radius: 12px 12px 0 0;
}

.bolge-secici-btn .bolge-icon {
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.bolge-secici-btn .bolge-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.bolge-secici-btn .bolge-label {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bolge-secici-btn .bolge-value {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bolge-secici-btn .bolge-arrow {
    font-size: 14px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.bolge-secici-btn.active .bolge-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.bolge-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    max-height: 420px;
    overflow: hidden;
    /* flex-column: header + liste(esner, kayar) + "Seçimi İptal Et" butonu → buton HER ZAMAN tam görünür,
       alttan kırpılmaz (eski: header60+liste250+buton56=366 > max350 → buton kesiliyordu). Tüm paletler. */
    display: flex;
    flex-direction: column;
}

.bolge-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bolge-dropdown-header {
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    background: #f9fafb;
}

.bolge-dropdown-header h6 {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 10px;
}

.bolge-search {
    position: relative;
}

.bolge-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    transition: all 0.2s;
}

.bolge-search input:focus {
    outline: none;
    border-color: #22c55e;
}

.bolge-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.bolge-dropdown-list {
    flex: 1 1 auto;
    min-height: 0;          /* flex-child'ın iç kaydırması için ZORUNLU (yoksa taşar, butonu kırpar) */
    max-height: 250px;
    overflow-y: auto;
    padding: 8px;
}

.bolge-dropdown-list::-webkit-scrollbar {
    width: 6px;
}

.bolge-dropdown-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.bolge-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    color: #374151;
    text-decoration: none;
    transition: all 0.15s;
    margin-bottom: 2px;
}

.bolge-item:hover {
    background: #f0fdf4;
    color: #15803d;
}

.bolge-item.active {
    background: #22c55e;
    color: white;
}

.bolge-item .bolge-item-name {
    font-weight: 600;
}

.bolge-item .bolge-item-price {
    font-size: 12px;
    color: #6b7280;
}

.bolge-item.active .bolge-item-price {
    color: rgba(255,255,255,0.8);
}

/* Bolge Iptal Butonu */
.bolge-iptal-btn {
    display: block;
    flex: 0 0 auto;                 /* kırpılmaz, tam görünür (flex-column'da sabit alt öğe) */
    width: calc(100% - 16px);
    margin: 8px 8px 10px;           /* altta biraz nefes (kullanıcı isteği) */
    padding: 10px;
    background: #fef2f2;
    border: 2px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s;
}

.bolge-iptal-btn:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.bolge-no-result {
    text-align: center;
    padding: 20px;
    color: #9ca3af;
}

/* =====================================================
   KURUMSAL FOOTER
   ===================================================== */
/* ========== KURUMSAL FOOTER ========== */
.site-footer {
    background: var(--footer-bg, #111827);
    color: var(--footer-text, #e5e7eb);
    padding: 0;
    margin-top: auto;
    flex-shrink: 0;
    position: relative;
}
.footer-wave {
    color: var(--footer-bg, #111827);
    margin-top: -1px;
    line-height: 0;
}
.footer-wave svg {
    width: 100%;
    height: 40px;
    display: block;
}
.footer-main {
    padding: 50px 0 30px;
}

/* Marka */
.footer-brand {}
.footer-logo { margin-bottom: 16px; }
.footer-logo img { height: 40px; filter: brightness(0) invert(1); }
.footer-logo h4 { color: #fff; font-weight: 800; font-size: 22px; margin: 0; }
.footer-logo h4 span { color: var(--footer-accent, #10b981); }
.footer-desc {
    color: var(--footer-muted, #9ca3af);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Sosyal */
.footer-social {
    display: flex;
    gap: 10px;
}
.footer-social a {
    width: 38px;
    height: 38px;
    background: color-mix(in srgb, var(--footer-muted, #9ca3af) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--footer-muted, #9ca3af) 12%, transparent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--footer-link, var(--footer-muted, #9ca3af));
    font-size: 16px;
    transition: all .25s ease;
    text-decoration: none;
}
.footer-social a:hover {
    background: var(--footer-accent, #10b981);
    border-color: var(--footer-accent, #10b981);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--footer-accent, #10b981) 30%, transparent);
}

/* WhatsApp Destek Kutusu */
.footer-wa-box {
    background: rgba(37, 211, 102, 0.08);
    border: 1px solid rgba(37, 211, 102, 0.2);
    border-radius: 14px;
    padding: 18px;
}
.footer-wa-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--footer-heading, #fff);
    font-size: 15px;
    font-family: var(--font-family, 'Quicksand', sans-serif);
}
.footer-wa-icon-pulse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #25d366;
    border-radius: 50%;
    color: #fff;
    font-size: 17px;
    animation: waPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes waPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
    50% { box-shadow: 0 0 0 10px rgba(37,211,102,0); }
}
.footer-wa-desc {
    color: var(--footer-muted, #9ca3af);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px;
}
.footer-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    background: #25d366;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}
.footer-wa-btn:hover {
    background: #1fb855;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37,211,102,0.35);
}
.footer-wa-hours {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    color: #d1d5db;
    font-size: 13px;
}
.footer-wa-hours i {
    font-size: 18px;
    color: var(--footer-muted, #9ca3af);
}
.footer-wa-hours small {
    color: var(--footer-muted, #9ca3af);
    font-size: 11px;
}
.footer-wa-hours strong {
    color: var(--footer-heading, #fff);
    font-size: 13px;
}

/* Basliklar */
.footer-heading {
    color: var(--footer-heading, #fff);
    font-family: var(--font-family, 'Quicksand', sans-serif);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
    letter-spacing: 0.5px;
}
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--footer-accent, #10b981);
    border-radius: 2px;
}

/* Navigasyon Linkleri */
.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav li {
    margin-bottom: 10px;
}
.footer-nav a {
    color: var(--footer-link, var(--footer-muted, #9ca3af));
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.footer-nav a::before {
    content: '';
    width: 0;
    height: 1px;
    background: var(--footer-accent, #10b981);
    transition: width .2s ease;
}
.footer-nav a:hover {
    color: var(--footer-accent, #10b981);
}
.footer-nav a:hover::before {
    width: 12px;
}

/* Iletisim Listesi */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.fci-icon {
    width: 36px;
    height: 36px;
    background: color-mix(in srgb, var(--footer-accent, #10b981) 10%, transparent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fci-icon i {
    color: var(--footer-accent, #10b981);
    font-size: 15px;
}
.fci-text {
    font-size: 13px;
    color: var(--footer-muted, #9ca3af);
    line-height: 1.5;
    padding-top: 7px;
}
.fci-text a {
    color: var(--footer-muted, #9ca3af);
    text-decoration: none;
    transition: color .2s;
}
.fci-text a:hover {
    color: var(--footer-accent, #10b981);
}

/* Footer Alt Bar */
.footer-bar {
    background: var(--footer-bar-bg, var(--footer-bg, #111827));
    border-top: 1px solid color-mix(in srgb, var(--footer-bar-text, var(--footer-muted, #6b7280)) 15%, transparent);
    padding: 10px 0;
    color: var(--footer-bar-text, var(--footer-muted, #6b7280));
}
.footer-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-copy {
    color: var(--footer-muted, #6b7280);
    font-size: 13px;
    margin: 0;
}
.footer-powered-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: color-mix(in srgb, var(--footer-bar-text, var(--footer-muted, #9ca3af)) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--footer-bar-text, var(--footer-muted, #9ca3af)) 12%, transparent);
    color: var(--footer-bar-text, var(--footer-muted, #9ca3af));
    font-size: 11px;
    text-decoration: none;
    border-radius: 50px;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
}
.footer-powered-btn::before {
    content: '';
    position: absolute;
    top: 0;left: -100%;
    width: 100%;height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--footer-accent, #10b981) 8%, transparent), transparent);
    transition: left .7s ease;
}
.footer-powered-btn:hover::before {
    left: 100%;
}
.footer-powered-btn:hover {
    border-color: color-mix(in srgb, var(--footer-accent, #10b981) 30%, transparent);
    background: color-mix(in srgb, var(--footer-accent, #10b981) 6%, transparent);
    color: var(--footer-text, #d1d5db);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--footer-accent, #10b981) 12%, transparent);
}
.fpb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;height: 18px;
    background: transparent;
    border: 1.5px solid var(--footer-bar-text, var(--footer-muted, #6b7280));
    border-radius: 50%;
    color: var(--footer-bar-text, var(--footer-muted, #9ca3af));
    font-size: 9px;
    flex-shrink: 0;
    animation: fpbSpin 8s linear infinite;
}
@keyframes fpbSpin {
    0%, 80%, 100% { transform: rotate(0deg); }
    90% { transform: rotate(360deg); }
}
.fpb-text {
    line-height: 1.3;
}
.fpb-text strong {
    color: var(--footer-bar-text, var(--footer-text, #d1d5db));
    font-weight: 700;
}
.footer-powered-btn:hover .fpb-text strong {
    color: var(--footer-accent, #10b981);
}
.fpb-arrow {
    font-size: 10px;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: all .3s ease;
}
.footer-powered-btn:hover .fpb-arrow {
    opacity: 1;
    transform: translate(0, 0);
}
.footer-bar-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.footer-bar-link {
    font-size: 13px;
    color: var(--footer-bar-text, var(--footer-muted, #6b7280));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .2s;
}
.footer-bar-link:hover {
    color: var(--footer-accent, #10b981);
}
.footer-bar-sep {
    width: 1px;
    height: 12px;
    background: color-mix(in srgb, var(--footer-bar-text, var(--footer-muted, #6b7280)) 20%, transparent);
    margin: 0 4px;
}
.footer-bar-text {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    color: var(--footer-bar-text, var(--footer-muted, #6b7280));
}
.footer-bar-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--footer-bar-text, var(--footer-muted, #6b7280));
}
.footer-badges {
    display: flex;
    gap: 12px;
}
.footer-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--footer-bar-text, var(--footer-muted, #6b7280));
    background: color-mix(in srgb, var(--footer-bar-text, var(--footer-muted, #6b7280)) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--footer-bar-text, var(--footer-muted, #6b7280)) 10%, transparent);
    padding: 6px 12px;
    border-radius: 8px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 991px) {
    .footer-main { padding: 40px 0 20px; }
}
@media (max-width: 768px) {
    .footer-wave svg { height: 24px; }
    .footer-bar-inner {
        flex-direction: column;
        text-align: center;
    }
    .footer-badges { justify-content: center; }
}
@media (max-width: 576px) {
    .footer-main { padding: 32px 0 16px; }
    .footer-heading { font-size: 14px; margin-bottom: 16px; }
    .footer-nav a { font-size: 12px; }
    .fci-text { font-size: 12px; }
    .footer-desc { font-size: 13px; }
    .footer-bar { padding-bottom: 64px; }
}

/* Site Haritasi Toggle */
.footer-sitemap-toggle {
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--footer-muted, #6b7280) 10%, transparent);
    background: color-mix(in srgb, var(--footer-muted, #6b7280) 6%, transparent);
    color: var(--footer-muted, #6b7280);
    transition: all .25s ease;
}
.footer-sitemap-toggle:hover {
    border-color: rgba(16,185,129,0.3);
    color: #10b981;
    background: rgba(16,185,129,0.06);
    text-decoration: none;
}

/* Sabit Butonlar (Sag Alt) */
.float-buttons {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.float-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    text-decoration: none;
    position: relative;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.06);
    transition: all .35s cubic-bezier(.4,0,.2,1);
    opacity: 0;
    transform: scale(0) translateY(30px);
    animation: fbIn .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
.float-btn:nth-child(1) { animation-delay: .3s; }
.float-btn:nth-child(2) { animation-delay: .5s; }
.float-btn:nth-child(3) { animation-delay: .7s; }
@keyframes fbIn {
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.float-btn::after {
    content: attr(title);
    position: absolute;
    right: calc(100% + 12px);
    white-space: nowrap;
    background: #1f2937;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    opacity: 0;
    transform: translateX(10px);
    transition: all .3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.float-btn:hover::after {
    opacity: 1;
    transform: translateX(0);
}
.float-btn:hover {
    transform: scale(1.18) translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
}
.float-btn:active {
    transform: scale(0.92);
    transition-duration: .1s;
}

/* Telefon */
.float-btn-phone { color: #f59e0b; }
.float-btn-phone:hover { color: #f59e0b; }
.float-btn-phone i { animation: fbRing 3s 2s ease-in-out infinite; }
@keyframes fbRing {
    0%, 100% { transform: rotate(0); }
    3% { transform: rotate(15deg); }
    6% { transform: rotate(-13deg); }
    9% { transform: rotate(11deg); }
    12% { transform: rotate(-9deg); }
    15% { transform: rotate(6deg); }
    18% { transform: rotate(0); }
}

/* Instagram */
.float-btn-insta { color: #e1306c; }
.float-btn-insta:hover { color: #e1306c; }
.float-btn-insta i { animation: fbBeat 2.5s 1.5s ease-in-out infinite; }
@keyframes fbBeat {
    0%, 100% { transform: scale(1); }
    8% { transform: scale(1.25); }
    16% { transform: scale(1); }
    24% { transform: scale(1.15); }
    32% { transform: scale(1); }
}

/* WhatsApp */
.float-btn-wa { color: #25d366; }
.float-btn-wa:hover { color: #25d366; }
.float-btn-wa i { animation: fbBounce 2s 2.5s ease-in-out infinite; }
@keyframes fbBounce {
    0%, 100% { transform: translateY(0); }
    15% { transform: translateY(-5px); }
    30% { transform: translateY(0); }
    45% { transform: translateY(-3px); }
    60% { transform: translateY(0); }
}

/* Yukari Cik Butonu */
.float-btn-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    color: #6b7280;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: scale(0) translateY(20px);
    transition: all .4s cubic-bezier(.34,1.56,.64,1);
}
.float-btn-top.gorunur {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}
.float-btn-top:hover {
    color: #10b981;
    transform: scale(1.18) translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
}
.float-btn-top i {
    transition: transform .3s ease;
}
.float-btn-top:hover i {
    animation: fbUpBounce .5s ease-in-out infinite;
}
@keyframes fbUpBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Label varsayilan gizli */
.float-btn-label { display:none; }

/* Sepet butonu sayaç rozeti (sabit butonlar — masaüstü + mobil) */
.float-btn-sepet i { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.float-btn-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    pointer-events: none;
    box-sizing: border-box;
}

/* ===== Sabit butonlar: aç/kapa toggle (gizle/göster) ===== */
.fb-toggle {
    order: -1;                 /* DOM'da son çocuk ama görsel olarak en üstte (buton nth-child animasyonları bozulmasın) */
    align-self: flex-end;      /* sağ üst köşeye minimal yaslanır */
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;           /* ikon biraz büyük */
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), color .2s ease, background .2s ease;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 2px;
}
.fb-toggle:hover { color: var(--primary-green, #10b981); transform: scale(1.12); }
.fb-toggle:active { transform: scale(.9); transition-duration: .1s; }
.fb-toggle i { transition: transform .3s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
/* Alt-bar (yatay dock) modunda toggle gösterilmez — mobilde kilitlenmeyi önler */
.float-buttons-alt .fb-toggle { display: none !important; }
/* Kapalıyken: toggle hariç her şey gizli (yalnız dikey mod) → yalnız toggle sağ altta kalır */
.float-buttons:not(.float-buttons-alt).fb-collapsed > :not(.fb-toggle) { display: none !important; }

/* ===== Mobil menü (offcanvas) açıkken hiçbir sabit/yüzen alan menünün üstünde kalmasın =====
   Menü SOLDAN açılır (offcanvas-start, z-index 1045). Menüden yüksek z-index'li TÜM kalıcı
   yüzen widget'lar gizlenir: sabit butonlar (sag+alt bar), yukarı-çık, canlı destek,
   Haftanın Fırsatı sol tab/panel (z9998 — sol kenarda, en kritik örtüşme), karşılaştırma barı
   (z10000, tam genişlik), fiyat-alarm toast konteyneri (z99999), Yapay Zeka Sipariş
   başlatıcısı (#asis-launcher — menünün alt CTA'larının üstüne biniyordu). Kendi backdrop'u olan
   modallar (duyuru/karşılaştırma modalı/çerez onayı) dokunulmaz — onlar menüden ayrı yönetilir. */
.float-buttons { transition: opacity .25s ease, visibility .25s ease; }
body.menu-acik .float-buttons,
body.menu-acik .float-btn-top,
body.menu-acik #canliDestek,
body.menu-acik #hfTab,
body.menu-acik #hfPanel,
body.menu-acik #compareBar,
body.menu-acik #fiyatAlarmPopupContainer,
body.menu-acik #asis-launcher {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media(max-width:768px) {
    .float-buttons { right: 16px; }
    .float-btn { width: 44px; height: 44px; font-size: 19px; }
    .float-btn::after { display: none; }
    .float-btn-top { bottom: 16px; right: 16px; }
    .sb-masaustu { display: none !important; }

    /* ===== Alt Bar Modu — KURUMSAL "yüzen cam bar" + hareketli bileşenler ===== */
    .float-buttons-alt {
        position: fixed;
        top: auto;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
        transform: none;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        gap: 2px;
        background: rgba(255,255,255,0.90);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        border: 1px solid rgba(17,24,39,0.06);
        box-shadow: 0 10px 30px rgba(17,24,39,0.14), 0 2px 8px rgba(17,24,39,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
        padding: 8px 4px;
        border-radius: 20px;
        z-index: 9999;
        animation: fbBarUp .55s cubic-bezier(.22,1,.36,1) both;
    }
    .float-buttons-alt .float-btn {
        width: auto;
        height: auto;
        flex: 1 1 0;
        min-width: 0;
        border-radius: 14px;
        box-shadow: none;
        background: transparent;
        flex-direction: column;
        gap: 4px;
        font-size: 18px;
        padding: 5px 3px;
        opacity: 0;
        transform: translateY(12px);
        animation: fbItemUp .5s cubic-bezier(.34,1.56,.64,1) forwards;
        transition: transform .25s cubic-bezier(.34,1.56,.64,1);
        -webkit-tap-highlight-color: transparent;
    }
    .float-buttons-alt .float-btn:nth-child(1) { animation-delay: .12s; }
    .float-buttons-alt .float-btn:nth-child(2) { animation-delay: .19s; }
    .float-buttons-alt .float-btn:nth-child(3) { animation-delay: .26s; }
    .float-buttons-alt .float-btn:nth-child(4) { animation-delay: .33s; }
    .float-buttons-alt .float-btn:nth-child(5) { animation-delay: .40s; }
    .float-buttons-alt .float-btn:nth-child(6) { animation-delay: .47s; }
    /* İkon: markanın renginden türetilmiş yumuşak disk (color-mix; desteklenmezse gri fallback) */
    .float-buttons-alt .float-btn i {
        position: relative;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 18px;
        background: #f3f4f6;
        background: color-mix(in srgb, currentColor 14%, #fff);
        transition: transform .28s cubic-bezier(.34,1.56,.64,1), background .2s ease;
    }
    /* Basılınca (tap): disk markaya dolar, ikon beyaz, hafif iç bası — anlık geri bildirim */
    .float-buttons-alt .float-btn:active { transform: translateY(1px); }
    .float-buttons-alt .float-btn:active i { transform: scale(.9); background: currentColor; }
    .float-buttons-alt .float-btn:active i::before { color: #fff; }
    /* WhatsApp (birincil CTA) — nazik, dikkat çeken nabız halkası */
    .float-buttons-alt .float-btn i.bi-whatsapp::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid currentColor;
        opacity: 0;
        animation: fbPulseRing 2.6s ease-out infinite;
        pointer-events: none;
    }
    .float-buttons-alt .float-btn:hover { box-shadow: none; transform: translateY(-1px); }
    .float-buttons-alt .float-btn-label {
        display: block;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0;
        color: #4b5563;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Sepet rozeti alt-barda disk üstünde küçülür */
    .float-buttons-alt .float-btn-badge { top: -5px; right: -5px; min-width: 16px; height: 16px; line-height: 16px; font-size: 9.5px; }
    /* "Yukarı Çık" butonu alt-bar ile çakışmasın → barın (10px alt + ~88px yükseklik)
       üstüne, 10px boşlukla kaldır. Çakışma dikey olduğundan tüm genişliklerde aynı. */
    .float-buttons-alt ~ .float-btn-top {
        bottom: calc(108px + env(safe-area-inset-bottom, 0px));
        right: 16px;
    }
}

/* ===== Sabit alt-bar (float-buttons-alt) hareket bileşenleri — keyframes ===== */
@keyframes fbBarUp {
    from { transform: translateY(140%); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@keyframes fbItemUp {
    to { opacity: 1; transform: none; }
}
@keyframes fbPulseRing {
    0%   { transform: scale(1);   opacity: .55; }
    100% { transform: scale(1.7); opacity: 0; }
}
/* Hareket azaltma tercihi: animasyonları kapat, öğeler görünür kalsın (opacity:0'da takılmasın) */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .float-buttons-alt,
    .float-buttons-alt .float-btn,
    .float-buttons-alt .float-btn i.bi-whatsapp::after { animation: none !important; }
    .float-buttons-alt .float-btn { opacity: 1 !important; transform: none !important; }
}

/* =====================================================
   SOL TAB
   ===================================================== */
/* ========== MOBIL GIZLEME ========== */
@media (max-width: 767.98px) {
    .hf-mobil-gizle { display: none !important; }
}

/* ========== SOL TAB ========== */
.hf-tab {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9998;
    background: linear-gradient(180deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
    color: #fff;
    padding: 14px 10px;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: 3px 0 18px rgba(0,0,0,0.15);
    transition: all .3s cubic-bezier(0.34,1.56,0.64,1);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    overflow: hidden;
}
.hf-tab:hover {
    padding-right: 14px;
    box-shadow: 5px 0 28px rgba(0,0,0,0.2);
    transform: translateY(-50%) scale(1.04);
    filter: brightness(1.1);
}
.hf-tab-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
    animation: hfGlow 2.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes hfGlow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}
.hf-tab-ico {
    font-size: 15px;
    writing-mode: horizontal-tb;
    animation: hfBounce 2s ease-in-out infinite;
}
@keyframes hfBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}
.hf-tab-text {
    font-family: 'Quicksand', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 1.5px;
}
.hf-tab-arr {
    font-size: 11px;
    writing-mode: horizontal-tb;
    animation: hfArr 1.5s ease-in-out infinite;
    opacity: 0.7;
}
@keyframes hfArr {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(3px); opacity: 1; }
}

/* ========== PANEL ========== */
.hf-panel {
    position: fixed;
    top: 50%;
    left: -400px;
    transform: translateY(-50%);
    width: 370px;
    max-width: 88vw;
    max-height: 85vh;
    z-index: 9999;
    background: #fff;
    border-radius: 0 20px 20px 0;
    box-shadow: 8px 0 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04);
    transition: left .45s cubic-bezier(0.25,0.46,0.45,0.94);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.hf-panel.aktif { left: 0; }

/* ========== HEADER ========== */
.hf-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    padding: 14px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.hf-header-title {
    margin: 0;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    font-size: 17px;
    font-weight: 700;
}
.hf-header-btn {
    background: rgba(255,255,255,0.18);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: all .2s;
}
.hf-header-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.08);
}

/* ========== BODY ========== */
.hf-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ========== CAROUSEL ========== */
.hf-carousel { width: 100%; }
.hf-slide { width: 100%; animation: hfFadeIn .3s ease; }
@keyframes hfFadeIn {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ========== URUN KARTI ========== */
.hf-urun {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

/* Resim */
.hf-urun-resim {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 85%;
    overflow: hidden;
    background: #f8f8f8;
    border-radius: 12px;
    margin: 0 auto;
}
.hf-urun-resim img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.hf-urun-resim:hover img { transform: scale(1.05); }
.hf-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: #10b981;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(16,185,129,0.3);
}

/* Bilgi */
.hf-urun-bilgi {
    padding: 14px 12px 4px;
    text-align: center;
}
.hf-teslimat {
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #10b981;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.hf-kod {
    font-family: 'Quicksand', sans-serif;
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 4px;
}
.hf-urun-ad {
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

/* Fiyat */
.hf-fiyat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}
.hf-eski-fiyat {
    font-size: 14px;
    color: #9ca3af;
    text-decoration: line-through;
    display: inline-flex;
    align-items: flex-start;
}
.hf-guncel-fiyat {
    font-family: 'Quicksand', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #1f2937;
    display: inline-flex;
    align-items: flex-start;
}

/* Gonder Butonu */
.hf-gonder-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 82%;
    margin: 0 auto;
    padding: 12px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 6px 20px rgba(16,185,129,0.3);
}
.hf-gonder-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(16,185,129,0.4);
    color: #fff;
    text-decoration: none;
}
.hf-tukendi { background: #9ca3af; cursor: not-allowed; box-shadow: none; }
.hf-tukendi:hover { transform: none; box-shadow: none; }

/* ========== DOT PAGINATION ========== */
.hf-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 6px 14px;
    background: #f3f4f6;
    border-radius: 16px;
}
.hf-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: #d1d5db;
    cursor: pointer;
    transition: all .3s ease;
    padding: 0;
}
.hf-dot.aktif {
    background: #10b981;
    width: 22px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(16,185,129,0.4);
}
.hf-dot:hover:not(.aktif) { background: #9ca3af; }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .hf-panel {
        width: 320px;
        max-width: 80vw;
        max-height: 80vh;
        border-radius: 0 16px 16px 0;
    }
    .hf-tab { padding: 12px 8px; }
    .hf-tab-text { font-size: 12px; }
    .hf-tab-ico { font-size: 13px; }
    .hf-urun-ad { font-size: 14px; }
    .hf-guncel-fiyat { font-size: 22px; }
    .hf-gonder-btn { width: 88%; padding: 11px 16px; font-size: 14px; }
    .hf-urun-bilgi { padding: 12px 10px 4px; }
    .hf-header { padding: 12px; }
    .hf-header-title { font-size: 15px; }
    .hf-body { padding: 10px; }
}
@media (max-width: 480px) {
    .hf-panel { width: 280px; max-width: 78vw; }
    .hf-tab { padding: 10px 7px; }
    .hf-tab-text { font-size: 11px; letter-spacing: 1px; }
    .hf-urun-ad { font-size: 13px; }
    .hf-guncel-fiyat { font-size: 20px; }
    .hf-gonder-btn { padding: 10px 14px; font-size: 13px; }
}

/* =====================================================
   DUYURU POPUP
   ===================================================== */
/* Duyuru Popup - Overlay */
.duyuru-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99999;
    opacity: 0;
    transition: opacity .4s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
}
.duyuru-overlay.goster {
    display: flex;
}
/* Modal */
.duyuru-modal {
    position: relative;
    max-width: 560px;
    width: 90%;
    max-height: 80vh;
    padding: 50px 40px 40px;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 50%, #f0fdf4 100%);
    border-radius: 24px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.2);
    overflow: hidden;
    transform: scale(0.85) translateY(30px);
    transition: transform .5s cubic-bezier(0.34,1.56,0.64,1);
    display: flex;
    flex-direction: column;
}
.duyuru-overlay.aktif {
    opacity: 1;
}
.duyuru-overlay.aktif .duyuru-modal {
    transform: scale(1) translateY(0);
}
/* Kapat butonu */
.duyuru-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.06);
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    z-index: 10;
}
.duyuru-close:hover {
    background: rgba(0,0,0,0.12);
    color: #1f2937;
    transform: rotate(90deg);
}
/* Parcaciklar */
.duyuru-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}
.duyuru-particle {
    position: absolute;
    font-size: 20px;
    opacity: 0.15;
    animation: dpFloat 15s infinite ease-in-out;
}
.duyuru-particle i { display: block; }
.dp-1 { top: 8%; left: 5%; color: #ec4899; animation-delay: 0s; font-size: 22px; }
.dp-2 { top: 18%; right: 8%; color: #f97316; animation-delay: -2s; font-size: 16px; }
.dp-3 { top: 55%; left: 6%; color: #a855f7; animation-delay: -4s; font-size: 20px; }
.dp-4 { top: 70%; right: 12%; color: #ef4444; animation-delay: -6s; font-size: 14px; }
.dp-5 { top: 12%; left: 65%; color: #eab308; animation-delay: -8s; font-size: 18px; }
.dp-6 { top: 82%; left: 20%; color: #ec4899; animation-delay: -10s; font-size: 16px; }
.dp-7 { top: 40%; right: 4%; color: #10b981; animation-delay: -12s; font-size: 22px; }
.dp-8 { top: 4%; left: 35%; color: #f43f5e; animation-delay: -14s; font-size: 12px; }
@keyframes dpFloat {
    0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 0.15; }
    25% { transform: translate(12px,-18px) rotate(90deg) scale(1.1); opacity: 0.25; }
    50% { transform: translate(-8px,-25px) rotate(180deg) scale(1); opacity: 0.2; }
    75% { transform: translate(15px,-12px) rotate(270deg) scale(1.15); opacity: 0.25; }
}
/* Icerik */
.duyuru-content {
    position: relative;
    z-index: 1;
    text-align: center;
    overflow-y: auto;
}
/* Ikon wrapper */
.duyuru-icon-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
}
.duyuru-icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #fecdd3 0%, #fce7f3 100%);
    border-radius: 50%;
    animation: dpPulse 2s infinite ease-in-out;
}
@keyframes dpPulse {
    0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%,-50%) scale(1.12); opacity: 0.3; }
}
.duyuru-icon-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 35px rgba(244,63,94,0.3);
    animation: dpBounce 2s infinite ease-in-out;
}
.duyuru-icon-main i {
    font-size: 38px;
    color: white;
}
@keyframes dpBounce {
    0%, 100% { transform: translate(-50%,-50%) translateY(0); }
    50% { transform: translate(-50%,-50%) translateY(-6px); }
}
.duyuru-icon-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 16px rgba(16,185,129,0.4);
    animation: dpWiggle 3s infinite ease-in-out;
}
.duyuru-icon-badge i {
    font-size: 18px;
    color: white;
}
@keyframes dpWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}
/* Baslik */
.duyuru-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 16px 0;
    animation: dpSlide 0.6s ease-out 0.2s both;
}
/* Body */
.duyuru-body {
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 28px;
    padding: 0 10px;
    max-height: 35vh;
    overflow-y: auto;
    animation: dpSlide 0.6s ease-out 0.3s both;
}
.duyuru-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
}
.duyuru-body p {
    margin-bottom: 10px;
}
@keyframes dpSlide {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
/* Mobil: MİNİMAL — çerçeve ve merkez ikon kümesi küçültüldü, fontlar korundu,
   uçuşan parçacık ikonları (dekoratif) gizlendi. .duyuru-* SADECE bu popup'a ait. */
@media (max-width: 768px) {
    .duyuru-modal {
        width: 92%;
        padding: 30px 22px 26px;
        border-radius: 18px;
    }
    .duyuru-icon-wrapper { width: 68px; height: 68px; margin-bottom: 16px; }
    .duyuru-icon-bg { width: 68px; height: 68px; }
    .duyuru-icon-main { width: 52px; height: 52px; }
    .duyuru-icon-main i { font-size: 23px; }
    .duyuru-icon-badge { width: 24px; height: 24px; top: 0; right: 0; }
    .duyuru-icon-badge i { font-size: 12px; }
    .duyuru-title { font-size: 21px; margin-bottom: 12px; }
    .duyuru-body { font-size: 14px; margin-bottom: 20px; }
    .duyuru-particle { display: none; }
}
@media (max-width: 480px) {
    .duyuru-modal { padding: 26px 16px 22px; border-radius: 16px; }
    .duyuru-icon-wrapper { width: 58px; height: 58px; margin-bottom: 12px; }
    .duyuru-icon-bg { width: 58px; height: 58px; }
    .duyuru-icon-main { width: 44px; height: 44px; }
    .duyuru-icon-main i { font-size: 20px; }
    .duyuru-icon-badge { width: 21px; height: 21px; }
    .duyuru-icon-badge i { font-size: 11px; }
    .duyuru-title { font-size: 18px; }
    .duyuru-body { font-size: 13px; max-height: 34vh; }
}

/* ===== TASARIM TEMALARI ===== */

/* Minimal */
/* 28.09.2026: tema zemini secicisi DUZELTILDI. Tema sinifi modalin KENDISINE basiliyor (footer.php: class="duyuru-modal duyuru-tema-x");
   eski secici ".duyuru-tema-x .duyuru-modal" (torun) hic eslesmiyor, zemin hep varsayilan acik renkte kaliyordu → "Karanlik" temada
   acik renkli yazi acik zemine dusuyordu. */
/* Resimli duyuruda metin kutusu (gorselin altinda) — tema renkleri metin duyurusuyla ayni */
.duyuru-resim-metin { padding: 16px 20px 18px; background: #fff; border-radius: 0 0 20px 20px; text-align: center; max-width: 90vw; box-sizing: border-box; }
.duyuru-resim-metin .duyuru-title { font-size: 19px; margin: 0 0 6px; }
.duyuru-resim-metin .duyuru-body { font-size: 14px; margin: 0; max-height: none; overflow: visible; }
.duyuru-resim-metin.duyuru-tema-karanlik { background: linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#1e1b4b 100%); }
.duyuru-resim-metin.duyuru-tema-kutlama { background: linear-gradient(135deg,#fef3c7 0%,#fff 50%,#fce7f3 100%); }
.duyuru-resim-metin.duyuru-tema-bilgi { background: linear-gradient(135deg,#eff6ff 0%,#fff 50%,#f0f9ff 100%); }
.duyuru-modal.duyuru-tema-uyg.duyuru-tema-minimal { background: #fff; }
.duyuru-tema-minimal .duyuru-icon-bg { background: #f3f4f6 !important; }
.duyuru-tema-minimal .duyuru-icon-main { background: #374151 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important; }
.duyuru-tema-minimal .duyuru-icon-badge { background: #10b981 !important; }
.duyuru-tema-minimal .duyuru-icon-badge i::before { content: "\F26A"; } /* bi-check-lg */
.duyuru-tema-minimal .duyuru-title { color: #111827; }
.duyuru-tema-minimal .duyuru-body { color: #6b7280; }
.duyuru-tema-minimal .duyuru-particle { display: none !important; }

/* Karanlik */
.duyuru-modal.duyuru-tema-uyg.duyuru-tema-karanlik { background: linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#1e1b4b 100%); }
.duyuru-tema-karanlik .duyuru-close { background: rgba(255,255,255,0.1); color: #c7d2fe; }
.duyuru-tema-karanlik .duyuru-close:hover { background: rgba(255,255,255,0.2); }
.duyuru-tema-karanlik .duyuru-icon-bg { background: linear-gradient(135deg,#4c1d95,#5b21b6) !important; opacity: 0.5; }
.duyuru-tema-karanlik .duyuru-icon-main { background: linear-gradient(135deg,#7c3aed,#a78bfa) !important; box-shadow: 0 12px 35px rgba(124,58,237,0.4) !important; }
.duyuru-tema-karanlik .duyuru-icon-badge { background: linear-gradient(135deg,#f59e0b,#fbbf24) !important; }
.duyuru-tema-karanlik .duyuru-icon-badge i::before { content: "\F586"; } /* bi-stars */
.duyuru-tema-karanlik .duyuru-title { color: #e0e7ff; }
.duyuru-tema-karanlik .duyuru-body { color: #a5b4fc; }
.duyuru-tema-karanlik .duyuru-particle { color: #818cf8 !important; opacity: 0.15 !important; }

/* Kutlama */
.duyuru-modal.duyuru-tema-uyg.duyuru-tema-kutlama { background: linear-gradient(135deg,#fef3c7 0%,#fff 50%,#fce7f3 100%); }
.duyuru-tema-kutlama .duyuru-icon-bg { background: linear-gradient(135deg,#fde68a,#fef3c7) !important; }
.duyuru-tema-kutlama .duyuru-icon-main { background: linear-gradient(135deg,#f59e0b,#ef4444) !important; box-shadow: 0 12px 35px rgba(245,158,11,0.35) !important; }
.duyuru-tema-kutlama .duyuru-icon-badge { background: linear-gradient(135deg,#ec4899,#f43f5e) !important; }
.duyuru-tema-kutlama .duyuru-icon-badge i::before { content: "\F17B"; } /* bi-balloon-fill */
.duyuru-tema-kutlama .duyuru-title { color: #92400e; }
.duyuru-tema-kutlama .duyuru-body { color: #78350f; }

/* Bilgi */
.duyuru-modal.duyuru-tema-uyg.duyuru-tema-bilgi { background: linear-gradient(135deg,#eff6ff 0%,#fff 50%,#f0f9ff 100%); }
.duyuru-tema-bilgi .duyuru-icon-bg { background: linear-gradient(135deg,#bfdbfe,#dbeafe) !important; }
.duyuru-tema-bilgi .duyuru-icon-main { background: linear-gradient(135deg,#3b82f6,#1d4ed8) !important; box-shadow: 0 12px 35px rgba(59,130,246,0.3) !important; }
.duyuru-tema-bilgi .duyuru-icon-badge { background: linear-gradient(135deg,#10b981,#059669) !important; }
.duyuru-tema-bilgi .duyuru-icon-badge i::before { content: "\F431"; } /* bi-info-circle-fill */
.duyuru-tema-bilgi .duyuru-title { color: #1e3a5f; }
.duyuru-tema-bilgi .duyuru-body { color: #475569; }

/* =====================================================
   CEREZ ONAY
   ===================================================== */
@keyframes cerezSlide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* Altta ortalı (simetrik), geniş + kısa; masaustunde tek satir (metin + butonlar). */
#cerezOnay{
  position:fixed; bottom:16px; left:0; right:0; margin-left:auto; margin-right:auto; z-index:99999;
  width:calc(100% - 32px); max-width:900px;
  display:none; align-items:center; gap:20px;
  background:#f0f4f8; border:1px solid #d0d8e0; border-radius:12px;
  padding:14px 22px; box-shadow:0 4px 24px rgba(0,0,0,.12); font-family:inherit;
  animation:cerezSlide .4s ease-out;
}
#cerezOnay.goster{ display:flex; }
#cerezOnay p{ margin:0; flex:1 1 auto; font-size:13.5px; line-height:1.55; color:#333; }
#cerezOnay .cerez-butonlar{ display:flex; gap:10px; flex-shrink:0; }
#cerezOnay button{ padding:9px 20px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s; }
#cerezOnay .cerez-kabul{ background:#1b4d8e; color:#fff; border:none; }
#cerezOnay .cerez-kabul:hover{ background:#143a6b; }
#cerezOnay .cerez-red{ background:#fff; color:#1b4d8e; border:2px solid #1b4d8e; }
#cerezOnay .cerez-red:hover{ background:#e8eef5; }
/* Tablet ve altı: dikey yığ, tam genişlik alt-sayfa (inline stil kalmadığı için media artık ETKİLİ) */
@media(max-width:768px){
  /* Mobilde çerez onay bandı HİÇ gösterilmez (kullanıcı isteği). .goster'i de ezmek için !important. */
  #cerezOnay, #cerezOnay.goster{ display:none !important; }
  #cerezOnay p{ font-size:13px; }
  #cerezOnay button{ flex:1; }
}

/* =====================================================
   CANLI DESTEK
   ===================================================== */
.cd-wrap{position:fixed;bottom:24px;left:24px;z-index:9999}
.cd-box{display:flex;align-items:center;gap:14px;background:#fff;border-radius:18px;padding:14px 44px 14px 14px;text-decoration:none;color:inherit;box-shadow:0 4px 24px rgba(37,211,102,.15),0 1px 4px rgba(0,0,0,.06);border:1.5px solid #e8f5e9;position:relative;transition:all .35s cubic-bezier(.4,0,.2,1);animation:cdEntry .6s cubic-bezier(.34,1.56,.64,1) both}
.cd-box:hover{transform:translateY(-3px);box-shadow:0 8px 36px rgba(37,211,102,.28),0 2px 8px rgba(0,0,0,.08);border-color:#25d366;color:inherit}
.cd-box:active{transform:translateY(-1px) scale(.98)}
.cd-box.gizli{animation:cdExit .35s cubic-bezier(.4,0,1,1) forwards}
@keyframes cdEntry{0%{opacity:0;transform:translateX(-30px) scale(.9)}60%{opacity:1;transform:translateX(6px) scale(1.02)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes cdExit{to{opacity:0;transform:translateX(-30px) scale(.9)}}
.cd-ikon{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);color:#fff;font-size:24px;flex-shrink:0;box-shadow:0 4px 12px rgba(37,211,102,.3);animation:cdFloat 3s ease-in-out infinite}
@keyframes cdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cd-durum{position:absolute;top:-2px;right:-2px;width:12px;height:12px;background:#22c55e;border-radius:50%;border:2.5px solid #fff;animation:cdBlink 2s ease-in-out infinite}
@keyframes cdBlink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.6)}50%{opacity:.7;box-shadow:0 0 0 5px rgba(34,197,94,0)}}
.cd-icerik{display:flex;flex-direction:column;gap:3px;min-width:0}
.cd-baslik{font-size:10.5px;font-weight:800;color:#25d366;letter-spacing:1.5px;text-transform:uppercase;line-height:1}
.cd-icerik strong{font-size:14px;color:#1f2937;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-kapat{position:absolute;top:4px;right:6px;background:rgba(0,0,0,.04);border:none;font-size:24px;color:#999;cursor:pointer;line-height:1;padding:4px 8px;border-radius:50%;transition:all .2s;z-index:2}
.cd-kapat:hover{color:#333;background:rgba(0,0,0,.1)}
@media(max-width:768px){.cd-masaustu{display:none !important}}
@media(max-width:768px){.cd-wrap{bottom:72px;left:12px;right:12px}.cd-box{padding:12px 42px 12px 12px;border-radius:14px;gap:10px;max-width:calc(100vw - 24px)}.cd-ikon{width:42px;height:42px;font-size:20px;border-radius:12px}.cd-baslik{font-size:9.5px}.cd-icerik strong{font-size:13px}}

/* ===========================================================
   HEADER PALET SISTEMI - 5 Farkli Tasarim
   =========================================================== */

/* Palet 1: Varsayilan (mevcut tasarim - degisiklik yok) */

/* Palet 2: Logo Orta — Arama sol, logo orta, aksiyonlar sag */
[data-header-palet="palet_2"] .header-main {
    padding: 18px 0;
}
[data-header-palet="palet_2"] .header-main .container > .row {
    position: relative;
    align-items: center;
    flex-wrap: nowrap;
}
/* Logo: absolute center */
[data-header-palet="palet_2"] .header-main .container > .row > .col-6.col-lg-3:first-child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: 0 0 auto;
    max-width: none;
    width: auto;
    text-align: center;
    z-index: 2;
    margin-bottom: 0;
}
[data-header-palet="palet_2"] .logo {
    justify-content: center;
}
[data-header-palet="palet_2"] .logo img {
    height: 75px;
}
/* Arama: sol taraf, aksiyonlarla ayni genislik */
[data-header-palet="palet_2"] .header-main .container > .row > .d-lg-block:not(.col-lg-3) {
    flex: 0 0 auto;
    max-width: 320px;
    width: 320px;
}
/* Bolge secici: bu palette gizle */
[data-header-palet="palet_2"] .header-main .container > .row > .d-lg-block.col-lg-3 {
    display: none !important;
}
/* Aksiyonlar: saga yasla */
[data-header-palet="palet_2"] .header-main .container > .row > .col-6.col-lg-2 {
    flex: 0 0 auto;
    max-width: none;
    margin-left: auto;
    position: static;
    transform: none;
}
[data-header-palet="palet_2"] .header-actions {
    justify-content: flex-end;
    gap: 18px;
}
/* Aksiyon butonlari: ikon ve yazi yan yana */
[data-header-palet="palet_2"] .header-action {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 0;
    font-weight: 500;
}
[data-header-palet="palet_2"] .header-action i {
    font-size: 20px;
}
@media (max-width: 991px) {
    [data-header-palet="palet_2"] .header-main {
        padding: 12px 0;
    }
    [data-header-palet="palet_2"] .header-main .container > .row {
        flex-wrap: wrap;
    }
    [data-header-palet="palet_2"] .header-main .container > .row > .col-6.col-lg-3:first-child {
        position: static;
        transform: none;
        flex: 0 0 50%;
        max-width: 50%;
        text-align: left;
    }
    [data-header-palet="palet_2"] .header-main .container > .row > .col-6.col-lg-2 {
        margin-left: 0;
    }
    [data-header-palet="palet_2"] .logo img {
        height: 60px;
    }
}

/* Palet 3: Kompakt (tek satir) */
[data-header-palet="palet_3"] .main-nav {
    background: transparent;
    border: none;
    position: static;
}
[data-header-palet="palet_3"] .main-nav .container {
    padding: 0;
}
[data-header-palet="palet_3"] .header-main .container > .row {
    align-items: center;
}
[data-header-palet="palet_3"] .site-header {
    border-bottom: 2px solid #f1f5f9;
}
[data-header-palet="palet_3"] .header-main {
    padding: 8px 0;
}
[data-header-palet="palet_3"] .search-form .input-group {
    border-radius: 50px;
    height: 40px;
}
[data-header-palet="palet_3"] .search-form .btn {
    border-radius: 0 50px 50px 0;
    padding: 6px 16px;
}
[data-header-palet="palet_3"] .header-action i {
    font-size: 20px;
}
[data-header-palet="palet_3"] .header-action span:last-child {
    display: none;
}
[data-header-palet="palet_3"] .header-actions {
    gap: 16px;
}

/* ============================================
   Palet 4: Kurumsal 1 — Modern Redesign
   ============================================ */
[data-header-palet="palet_4"] .header-main {
    padding: 18px 0 28px 0;
    border-bottom: none;
}
[data-header-palet="palet_4"] .header-main .container > .row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
}
[data-header-palet="palet_4"] .header-main .col-6.col-lg-3:first-child {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
}
[data-header-palet="palet_4"] .header-main .col-6.col-lg-2 {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
    margin-left: 0;
}
[data-header-palet="palet_4"] .site-header .search-form {
    max-width: 100%;
}
[data-header-palet="palet_4"] .main-nav {
    border-top: none;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}

/* --- P4: Aksiyonlar yeniden tasarim --- */
[data-header-palet="palet_4"] .header-actions {
    gap: 6px;
}
[data-header-palet="palet_4"] .header-action {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    color: #475569;
    transition: all 0.2s ease;
    background: transparent;
}
[data-header-palet="palet_4"] .header-action:hover {
    background: #f0fdf4;
    color: var(--primary-green-dark);
}
[data-header-palet="palet_4"] .header-action i {
    font-size: 20px;
}
[data-header-palet="palet_4"] .header-action .badge {
    top: 0;
    right: 2px;
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    background: #ef4444;
}

@media (min-width: 992px) {
    /* P4: Bolge secici gizle, arama genislet */
    [data-header-palet="palet_4"] .header-main .p4-bolge-col {
        display: none !important;
    }
    [data-header-palet="palet_4"] .header-main .d-none.d-lg-block[class*="col-lg-4"],
    [data-header-palet="palet_4"] .header-main .d-none.d-lg-block[class*="col-lg-6"] {
        display: block !important;
        flex: 1 1 0%;
        min-width: 0;
        max-width: none;
        padding: 0;
        position: relative;
    }

    /* P4: Arama — Kurumsal tasarim */
    [data-header-palet="palet_4"] .search-form {
        max-width: 100%;
    }
    [data-header-palet="palet_4"] .search-form .input-group {
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
        transition: border-color 0.2s ease;
    }
    [data-header-palet="palet_4"] .search-form .input-group:focus-within {
        border-color: #a83254;
    }
    [data-header-palet="palet_4"] .search-form .search-icon {
        display: none;
    }
    [data-header-palet="palet_4"] .search-form .form-control {
        border: none;
        box-shadow: none;
        padding: 12px 20px;
        font-size: 15px;
        background: transparent;
        color: #1f2937;
    }
    [data-header-palet="palet_4"] .search-form .form-control::placeholder {
        color: #9ca3af;
    }
    [data-header-palet="palet_4"] .search-form .form-control:focus {
        box-shadow: none;
    }
    [data-header-palet="palet_4"] .search-form .btn {
        background: #a83254;
        border: none;
        border-radius: 0;
        padding: 12px 20px;
        color: #fff;
        font-size: 16px;
        transition: background 0.2s ease;
    }
    [data-header-palet="palet_4"] .search-form .btn:hover {
        background: #8b2845;
    }

    /* P4: En cok arananlar */
    [data-header-palet="palet_4"] .p4-populer-aramalar {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: flex;
        align-items: center;
        gap: 3px;
        margin-top: 4px;
        font-size: 11px;
        color: #9ca3af;
        flex-wrap: wrap;
    }
    [data-header-palet="palet_4"] .p4-populer-aramalar strong {
        font-weight: 600;
        color: #6b7280;
        margin-right: 2px;
    }
    [data-header-palet="palet_4"] .p4-populer-aramalar a {
        color: #6b7280;
        text-decoration: none;
        padding: 1px 5px;
        border-radius: 4px;
        transition: all 0.2s ease;
    }
    [data-header-palet="palet_4"] .p4-populer-aramalar a:hover {
        color: #a83254;
        background: #fdf2f8;
    }

    /* --- P4: Nav flex container --- */
    [data-header-palet="palet_4"] .main-nav .nav-container-flex {
        display: flex;
        align-items: center;
        gap: 0;
    }
    [data-header-palet="palet_4"] .main-nav .navbar-nav {
        flex: 1;
        min-width: 0;
    }

    /* --- P4: Nav menu linkleri --- */
    [data-header-palet="palet_4"] .navbar-nav {
        flex-wrap: nowrap;
    }
    [data-header-palet="palet_4"] .navbar-nav .nav-link {
        font-size: clamp(10px, 0.85vw, 12.5px);
        padding: 13px clamp(6px, 0.7vw, 14px);
        font-weight: 600;
        color: #1e293b;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }
    [data-header-palet="palet_4"] .navbar-nav .nav-link i {
        font-size: clamp(10px, 0.8vw, 14px);
    }
    [data-header-palet="palet_4"] .navbar-nav .nav-link:hover,
    [data-header-palet="palet_4"] .navbar-nav .nav-link.active {
        color: var(--primary-green-dark);
    }
    [data-header-palet="palet_4"] .navbar-nav .nav-item + .nav-item::before {
        height: 16px;
        background: #e2e8f0;
        margin: 0 clamp(2px, 0.2vw, 6px);
    }

    /* --- P4: Nav sag bilgi alani --- */
    [data-header-palet="palet_4"] .p4-nav-info {
        flex: 0 0 auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 0;
    }
    [data-header-palet="palet_4"] .p4-info-sep {
        width: 1px;
        height: 28px;
        background: #e2e8f0;
        margin: 0 4px;
    }
    [data-header-palet="palet_4"] .p4-info-item {
        display: flex;
        align-items: center;
        gap: clamp(5px, 0.5vw, 10px);
        padding: 8px clamp(6px, 0.7vw, 14px);
        border-radius: 10px;
        text-decoration: none;
        color: #334155;
        transition: all 0.2s ease;
        white-space: nowrap;
    }
    [data-header-palet="palet_4"] .p4-info-item:hover {
        background: #f8fafc;
        color: #1e293b;
    }
    [data-header-palet="palet_4"] .p4-info-item > i {
        font-size: clamp(14px, 1.1vw, 20px);
        color: #64748b;
        flex-shrink: 0;
    }
    [data-header-palet="palet_4"] .p4-info-adres:hover > i {
        color: var(--primary-green);
    }
    [data-header-palet="palet_4"] .p4-info-teslimat > i {
        color: var(--primary-green);
    }
    [data-header-palet="palet_4"] .p4-info-text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }
    [data-header-palet="palet_4"] .p4-info-text strong {
        font-size: clamp(10px, 0.8vw, 12px);
        font-weight: 600;
        color: #1e293b;
    }
    [data-header-palet="palet_4"] .p4-info-text small {
        font-size: clamp(9px, 0.7vw, 10.5px);
        color: #94a3b8;
        font-weight: 500;
    }
    [data-header-palet="palet_4"] .p4-info-text small i {
        font-size: 8px;
        margin-left: 2px;
    }
    [data-header-palet="palet_4"] .p4-info-adres:hover .p4-info-text small {
        color: var(--primary-green);
    }

    /* Palet 4: Iletisim Popup */
    [data-header-palet="palet_4"] .p4-iletisim-popup {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        width: 320px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
        border: 1px solid #e5e7eb;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1050;
        white-space: normal;
    }
    [data-header-palet="palet_4"] .p4-iletisim-popup::before {
        content: '';
        position: absolute;
        top: -7px;
        left: 28px;
        width: 14px;
        height: 14px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-right: none;
        border-bottom: none;
        transform: rotate(45deg);
        z-index: 1;
    }
    [data-header-palet="palet_4"] .p4-info-adres:hover .p4-iletisim-popup {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    [data-header-palet="palet_4"] .p4-popup-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 18px;
        border-bottom: 1px solid #f3f4f6;
        font-size: 14px;
        font-weight: 700;
        color: #1f2937;
    }
    [data-header-palet="palet_4"] .p4-popup-header > i {
        font-size: 16px;
        color: #3b82f6;
    }
    [data-header-palet="palet_4"] .p4-popup-body {
        padding: 12px 18px;
    }
    [data-header-palet="palet_4"] .p4-popup-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid #f9fafb;
        font-size: 13px;
        color: #374151;
        line-height: 1.4;
    }
    [data-header-palet="palet_4"] .p4-popup-row:last-child {
        border-bottom: none;
    }
    [data-header-palet="palet_4"] .p4-popup-row > i {
        font-size: 14px;
        flex-shrink: 0;
        margin-top: 1px;
    }
    [data-header-palet="palet_4"] .p4-popup-row a {
        color: #374151;
        text-decoration: none;
        transition: color 0.2s;
    }
    [data-header-palet="palet_4"] .p4-popup-row a:hover {
        color: var(--primary-green);
    }
    [data-header-palet="palet_4"] .p4-popup-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 18px;
        border-top: 1px solid #f3f4f6;
        font-size: 12px;
        font-weight: 600;
        color: var(--primary-green);
        text-decoration: none;
        transition: background 0.2s;
        border-radius: 0 0 14px 14px;
    }
    [data-header-palet="palet_4"] .p4-popup-footer:hover {
        background: #f0fdf4;
        color: var(--primary-green-dark, #1a9c49);
    }
}

@media (max-width: 991px) {
    [data-header-palet="palet_4"] .header-main {
        padding: 18px 0 14px 0;
    }
    [data-header-palet="palet_4"] .header-main .container > .row {
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }
    [data-header-palet="palet_4"] .header-main .col-6.col-lg-3:first-child {
        flex: 0 0 50%;
        max-width: 50%;
    }
    [data-header-palet="palet_4"] .p4-nav-info {
        display: none;
    }
    [data-header-palet="palet_4"] .header-action {
        flex-direction: column;
        padding: 0;
        gap: 4px;
    }
}

/* Palet 5: E-Ticaret Pro */
[data-header-palet="palet_5"] .top-bar {
    background: #1e293b;
    color: #94a3b8;
    border-bottom: none;
}
[data-header-palet="palet_5"] .top-bar a {
    color: #cbd5e1 !important;
}
[data-header-palet="palet_5"] .top-bar a:hover {
    color: #fff !important;
}
[data-header-palet="palet_5"] .top-bar i {
    color: var(--primary-green);
}
[data-header-palet="palet_5"] .site-header {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
[data-header-palet="palet_5"] .search-form .input-group {
    border: 2px solid var(--primary-green);
    background: #fff;
}
[data-header-palet="palet_5"] .search-form .input-group:focus-within {
    border-color: var(--primary-green-dark);
    box-shadow: 0 0 0 3px rgba(46,204,113,0.15);
}
[data-header-palet="palet_5"] .search-form .btn {
    background: var(--primary-green);
    border-radius: 0 12px 12px 0;
    margin: 0;
    padding: 10px 24px;
}
[data-header-palet="palet_5"] .main-nav {
    background: var(--primary-green);
    border: none;
}
[data-header-palet="palet_5"] .navbar-nav .nav-link {
    color: #fff;
    font-weight: 600;
}
[data-header-palet="palet_5"] .navbar-nav .nav-link:hover,
[data-header-palet="palet_5"] .navbar-nav .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,0.15);
    border-radius: 6px;
}
[data-header-palet="palet_5"] .navbar-nav .nav-link::after {
    display: none;
}
[data-header-palet="palet_5"] .navbar-nav .nav-item + .nav-item::before {
    display: none;
}
[data-header-palet="palet_5"] .bolge-secici-btn {
    background: #f0fdf4;
    color: var(--primary-green-dark);
    border: 2px solid var(--primary-green);
}
[data-header-palet="palet_5"] .bolge-secici-btn:hover {
    background: var(--primary-green);
    color: #fff;
}

/* Palet 6: Minimal */
[data-header-palet="palet_6"] .top-bar { display: none !important; }
[data-header-palet="palet_6"] .header-main { padding: 16px 0; }
[data-header-palet="palet_6"] .site-header { box-shadow: none; border-bottom: 1px solid #f1f5f9; }
[data-header-palet="palet_6"] .search-form .input-group { border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; box-shadow: none; }
[data-header-palet="palet_6"] .search-form .btn { background: #374151; border-radius: 0 6px 6px 0; margin: 0; box-shadow: none; }
[data-header-palet="palet_6"] .main-nav { background: transparent; border: none; }
[data-header-palet="palet_6"] .navbar-nav .nav-link { font-size: 13px; padding: 10px 14px; }
[data-header-palet="palet_6"] .navbar-nav .nav-item + .nav-item::before { display: none; }
[data-header-palet="palet_6"] .header-action span:last-child { display: none; }
[data-header-palet="palet_6"] .header-actions { gap: 18px; }
[data-header-palet="palet_6"] .logo img { height: 50px; }

/* Palet 7: Sik Koyu */
[data-header-palet="palet_7"] .site-header { background: #1e293b; }
[data-header-palet="palet_7"] .header-main { padding: 14px 0; }
[data-header-palet="palet_7"] .logo-text { color: #fff; }
[data-header-palet="palet_7"] .header-action { color: #e2e8f0; }
[data-header-palet="palet_7"] .header-action:hover { color: var(--primary-green); }
[data-header-palet="palet_7"] .header-action .badge { background: var(--primary-green); }
[data-header-palet="palet_7"] .mobil-menu-bar { background: #e2e8f0; }
[data-header-palet="palet_7"] .search-form .input-group { background: #334155; border-color: #475569; }
[data-header-palet="palet_7"] .search-form .form-control { color: #fff; }
[data-header-palet="palet_7"] .search-form .form-control::placeholder { color: #94a3b8; }
[data-header-palet="palet_7"] .search-form .search-icon { color: #64748b; }
[data-header-palet="palet_7"] .search-form .btn { background: var(--primary-green); }
[data-header-palet="palet_7"] .main-nav { background: #0f172a; border-color: #334155; }
[data-header-palet="palet_7"] .navbar-nav .nav-link { color: #cbd5e1; }
[data-header-palet="palet_7"] .navbar-nav .nav-link:hover, [data-header-palet="palet_7"] .navbar-nav .nav-link.active { color: var(--primary-green); }
[data-header-palet="palet_7"] .navbar-nav .nav-link::after { background: var(--primary-green); }
[data-header-palet="palet_7"] .navbar-nav .nav-item + .nav-item::before { background: #475569; }
[data-header-palet="palet_7"] .bolge-secici-btn { background: var(--primary-green); }

/* Palet 8: Taze Cicek — Logo sol, genis arama, temiz beyaz */
[data-header-palet="palet_8"] .site-header {
    box-shadow: none;
    border-bottom: none;
}
[data-header-palet="palet_8"] .header-main {
    padding: 18px 0;
}
[data-header-palet="palet_8"] .header-main .container > .row {
    align-items: center;
    flex-wrap: nowrap;
}
/* Logo: sol, otomatik genislik */
[data-header-palet="palet_8"] .header-main .col-6.col-lg-3:first-child {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
    margin-bottom: 0;
}
[data-header-palet="palet_8"] .logo {
    justify-content: flex-start;
}
/* Bolge: gizle */
[data-header-palet="palet_8"] .header-main .container > .row > .d-lg-block.col-lg-3 {
    display: none !important;
}
/* Arama: esnek genislik, ortada */
[data-header-palet="palet_8"] .header-main .container > .row > .d-lg-block:not(.col-lg-3) {
    flex: 1 1 auto;
    max-width: 560px;
    padding: 0 30px;
}
/* Arama stili: duz dikdortgen, ince gri border, koyu mavi buton */
[data-header-palet="palet_8"] .search-form .input-group {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: none;
}
[data-header-palet="palet_8"] .search-form .input-group:hover {
    border-color: #9ca3af;
    box-shadow: none;
}
[data-header-palet="palet_8"] .search-form .input-group:focus-within {
    background: #fff;
    border-color: #1e3a8a;
    box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.08);
}
[data-header-palet="palet_8"] .search-form .search-icon {
    display: none;
}
[data-header-palet="palet_8"] .search-form .form-control {
    padding: 12px 16px;
    font-size: 14px;
}
[data-header-palet="palet_8"] .search-form .btn {
    background: #1e3a8a;
    border-radius: 2px !important;
    margin: 3px;
    box-shadow: none;
    padding: 10px 16px;
}
[data-header-palet="palet_8"] .search-form .btn:hover {
    background: #1e40af;
    transform: none;
    box-shadow: none;
}
/* Aksiyonlar: yatay duzende (ikon + yazi yan yana) */
[data-header-palet="palet_8"] .header-main .container > .row > .col-6.col-lg-2 {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
    margin-left: auto;
}
[data-header-palet="palet_8"] .header-actions {
    gap: 20px;
    flex-wrap: nowrap;
}
[data-header-palet="palet_8"] .header-action {
    flex-direction: row;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}
[data-header-palet="palet_8"] .header-action:hover {
    color: #1e3a8a;
}
[data-header-palet="palet_8"] .header-action i {
    font-size: 20px;
}
/* Sepet: koyu mavi daire ikon, yazi gizle, en sona tasi */
[data-header-palet="palet_8"] a[href*="sepet"].header-action {
    order: 10;
}
[data-header-palet="palet_8"] a[href*="sepet"].header-action > i {
    background: #1e3a8a;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
[data-header-palet="palet_8"] a[href*="sepet"].header-action > span:not(.badge) {
    display: none;
}
/* Nav: temiz beyaz, koyu mavi vurgu */
[data-header-palet="palet_8"] .main-nav {
    background: #fff;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}
[data-header-palet="palet_8"] .navbar-nav .nav-link {
    color: #374151;
    font-weight: 500;
    text-transform: none;
    font-size: 14px;
    letter-spacing: normal;
}
[data-header-palet="palet_8"] .navbar-nav .nav-link:hover,
[data-header-palet="palet_8"] .navbar-nav .nav-link.active {
    color: #1e3a8a;
    background: transparent;
    border-radius: 0;
}
[data-header-palet="palet_8"] .navbar-nav .nav-link:not(.dropdown-toggle)::after {
    background: #1e3a8a;
}
/* Nav sağı: kurumsal ürün arama — menü SOL, arama SAĞ; menü ile orantılı küçülür/büyür (clamp).
   SADECE palet_8 (data-attr + $_hp==='palet_8' PHP koşulu → diğer paletlerde ne markup ne CSS). */
[data-header-palet="palet_8"] .main-nav .nav-container-flex {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 22px);           /* menü↔arama boşluğu ekranla orantılı */
}
/* NOT: seçicilere `.site-header` eklendi → özgüllük (0,4,0)/(0,5,0) yükselir; admin özel menü
   boşluğu/padding'i ayarlarsa header.php:1031-1032 inline `<style>` (.site-header .main-nav...)
   kuralını EZMESİN, palet_8'in orantılı (clamp) padding/gap garantisi her zaman geçerli kalsın. */
[data-header-palet="palet_8"] .site-header .main-nav .navbar-nav {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;                            /* içerik solda; dar ekranda kompaktlaş */
    gap: clamp(0px, 0.3vw, 5px);             /* öğe arası boşluk orantılı */
    flex-wrap: nowrap;
}
[data-header-palet="palet_8"] .site-header .main-nav .navbar-nav .nav-link {
    white-space: nowrap;                     /* menü metni 2. satıra SARMASIN (tek satır) */
    padding-left: clamp(8px, 0.85vw, 18px);  /* öğe iç boşluğu ekranla orantılı → dar ekranda sığar */
    padding-right: clamp(8px, 0.85vw, 18px);
}
[data-header-palet="palet_8"] .p8-nav-arama {
    margin-left: auto;                       /* menünün sağ ucuna it */
    flex: 0 1 auto;
    display: flex;
    align-items: stretch;
    width: clamp(180px, 20vw, 340px);        /* ekranla orantılı: dar→180px, geniş→340px */
    min-width: 150px;                        /* baskı altında aşırı küçülmesin (kullanılabilir kalsın) */
    height: 42px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
[data-header-palet="palet_8"] .p8-nav-arama:focus-within {
    border-color: var(--primary-green, #16a34a);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}
[data-header-palet="palet_8"] .p8-nav-arama-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 16px;
    font-size: 14px;
    color: #374151;
    font-family: inherit;
}
[data-header-palet="palet_8"] .p8-nav-arama-input::placeholder { color: #9ca3af; }
[data-header-palet="palet_8"] .p8-nav-arama-btn {
    flex: 0 0 auto;
    width: 46px;
    border: none;
    cursor: pointer;
    background: var(--primary-green, #16a34a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: filter .15s;
}
[data-header-palet="palet_8"] .p8-nav-arama-btn:hover { filter: brightness(1.07); }
/* Arama nav'a taşındı → palet_8 üst alandaki (header-main) aramayı gizle: tek, temiz arama. */
[data-header-palet="palet_8"] .header-main .container > .row > .d-lg-block:not(.col-lg-3) {
    display: none !important;
}

/* ===== PALET 52'ye ÖZEL — Nav sağında teslimat bölge seçici (arama duyuru barına taşındı, yerine bölge) =====
   palet_1'in ÇALIŞAN .bolge-secici-wrapper dropdown bileşeni reuse (aynı id/JS/CSS). Burada YALNIZ nav
   konumu + genişliği ayarlanır. .p52-nav-bolge YALNIZ header_palet==='palet_52' iken render → doğal scope. */
.p52-nav-bolge {
    margin-left: auto;                          /* menünün sağ ucuna it → container sağına yaslı */
    /* Sağ kenar = container sağı (TR bayrağı) = üstteki duyuru araması ile AYNI; genişlik = --p52-box-w →
       sol kenar "Sipariş Takip"in solunda başlar (ST'yi GEÇMEZ). Arama ile AYNI formül (ikisi de aynı
       .container → 100% eşit) → EŞİT boyut + ortak sağ/sol kenar = dikey simetrik blok. calc(100% - 670px)
       kompakt menüye (~650) çarpmadan sığar; dar masaüstünde arama ile birlikte eşit küçülür. */
    margin-right: 0;
    flex: 0 0 auto;
    width: min(var(--p52-box-w, 408px), calc(100% - 670px));
    max-width: var(--p52-box-w, 408px);
}
/* Menü küçülmesin (nowrap öğeler taşımasın) → tüm küçülmeyi bölge emer. :has destekli tarayıcılarda menü
   ASLA kırpılmaz; desteklemeyen eski tarayıcıda mevcut davranışa güvenli düşer. Özgüllük palet_8 kuralını geçer. */
[data-header-palet="palet_8"] .nav-container-flex:has(.p52-nav-bolge) .navbar-nav { flex-shrink: 0; }
/* ===== PALET 52'ye ÖZEL — Nav menüsünü KOMPAKTLA =====
   Amaç: menü daralsın → arama + bölge kutuları "Sipariş Takip" çizgisinde biterken (ST'yi geçmeden) daha
   rahat/eşit genişlik alsın. Scope: `:has(.p52-nav-bolge)` (yalnız palet_52 render eder) + `.site-header
   .main-nav` (özgüllük, palet_8'in kendi nav padding/gap kuralını EZER) → GERÇEK palet_8 menüsü etkilenmez. */
[data-header-palet="palet_8"] .site-header .main-nav .nav-container-flex:has(.p52-nav-bolge) .navbar-nav .nav-link {
    padding-left: clamp(5px, 0.45vw, 9px);
    padding-right: clamp(5px, 0.45vw, 9px);
}
[data-header-palet="palet_8"] .site-header .main-nav .nav-container-flex:has(.p52-nav-bolge) .navbar-nav { gap: 0; }
[data-header-palet="palet_8"] .main-nav .nav-container-flex:has(.p52-nav-bolge) { gap: clamp(8px, 0.8vw, 14px); }
/* NOT: ayrı bir dar-ekran fallback'ine gerek YOK — kutuların width'i min(--p52-box-w, calc(100% - 670px))
   olduğundan dar ekranda kendiliğinden küçülür ve container sağına yaslı kalır; box-left = container_left + 670
   ≥ menü sağ kenarı olduğundan menüye ASLA çarpmaz (670 > kompakt menü ~650). <992'de nav gizli, bölge render
   edilmez; arama <768'de gizli, 768–991'de menüsüz taban formülü (calc(100% - 200px)) geçerli. */
/* Z-INDEX: dil (translate) açılır menüsü, alttaki nav satırındaki Teslimat Bölgesi kutusunun ÜSTÜNDE kalsın.
   header-main katmanını nav katmanının üstüne al → header-main içindeki .hum-dil-menu, nav'daki bölgeyi örter.
   Scope: .site-header:has(.p52-nav-bolge) → YALNIZ palet_52 (bölge nav'da). Aşağı açılan nav/bölge dropdown'ları
   header-main'in ALTINDA kalır (dikey örtüşme yok) → etkilenmez. position:relative offset'siz → layout DEĞİŞMEZ. */
[data-header-palet="palet_8"] .site-header:has(.p52-nav-bolge) .header-main { position: relative; z-index: 3; }
[data-header-palet="palet_8"] .site-header:has(.p52-nav-bolge) .main-nav { position: relative; z-index: 2; }
/* ── palet_52 bölge seçici: MİNİMAL yükseklik + KOYU SİLVER statik border + hareketli pin/ok ──
   Etiket ("Teslimat Bölgesi") header.php'de kaldırıldı → tek satır → kompakt. GENİŞLİK/YÜKSEKLİK DEĞİŞMEZ
   (.p52-nav-bolge width sabit + buton width:100%; padding + tek satır). DE-GREEN (kullanıcı görseli):
   yeşil dönen halka + yeşil glow KALDIRILDI → sakin, temiz görünüm. Hareket yalnız pin zıplaması + CTA ok kayması. */
.p52-nav-bolge .bolge-secici-btn {
    position: relative; z-index: 0;
    display: flex; align-items: center; gap: 9px; width: 100%; line-height: 1;
    padding: 10px 14px;                         /* dengeli minimal yükseklik (~40px) */
    background: #fff; color: #374151;
    border: 1px solid #94a3b8;                  /* KOYU SİLVER ince border (yeşil DEĞİL) */
    border-radius: 7px; box-shadow: none;
    transition: border-color .18s, box-shadow .18s;
}
.p52-nav-bolge .bolge-secici-btn:hover { border-color: #64748b; box-shadow: 0 2px 10px rgba(100,116,139,.22); }
/* Hareketli pin ikonu (konum işareti zıplaması) — nötr koyu ton (de-green) */
.p52-nav-bolge .bolge-secici-btn .bolge-icon {
    width: auto; height: auto; background: transparent; border-radius: 0; line-height: 1;
    font-size: 17px; color: #475569; display: inline-flex; flex: 0 0 auto;
}
.p52-nav-bolge .bolge-secici-btn .bolge-icon i {
    display: inline-block; animation: p52-pin-bounce 1.8s ease-in-out infinite;
}
@keyframes p52-pin-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.p52-nav-bolge .bolge-secici-btn .bolge-text { min-width: 0; }
.p52-nav-bolge .bolge-secici-btn .bolge-value { color: #1f2937; font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p52-nav-bolge .bolge-secici-btn.secildi .bolge-value { color: #334155; }
.p52-nav-bolge .bolge-secici-btn .bolge-arrow { color: #64748b; margin-left: auto; flex: 0 0 auto; }
.p52-nav-bolge .bolge-secici-btn:hover .bolge-arrow { color: #334155; }
/* ── palet_52 BOŞ DURUM: sağda "Buradan Başla" — SADE koyu bold yazı + kayan ok (hap/kutu YOK, de-green) ──
   Yalnız bölge SEÇİLİ DEĞİLKEN görünür (.bolge-secici-btn:not(.secildi)); seçilince PHP hiç render etmez.
   GENİŞLİK/YÜKSEKLİK BOZULMAZ: inline + margin-left:auto ile sağa yaslı; yazı yüksekliği pin (~17px) ile denk
   → buton sabit. Boş durumda "Bölge seçiniz" soluklaşır + chevron gizlenir (CTA'nın kendi oku var). Scope yalnız .p52-nav-bolge. */
.p52-nav-bolge .bolge-secici-btn:not(.secildi) .bolge-value { color: #6b7280; font-weight: 500; font-size: 13px; }
.p52-nav-bolge .bolge-secici-btn:not(.secildi) .bolge-arrow { display: none; }
.p52-nav-bolge .p52-cta {
    margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    line-height: 1; white-space: nowrap;
    color: #334155; font-size: 13px; font-weight: 700; letter-spacing: .2px;
}
.p52-nav-bolge .p52-cta-ok { font-size: 13px; color: #475569; animation: p52-cta-arrow 1.1s ease-in-out infinite; }
.p52-nav-bolge .bolge-secici-btn:hover .p52-cta { color: #1e293b; }
@keyframes p52-cta-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
/* NOT: eski 992–1199px "Bölge seçiniz" gizleme media query'si KALDIRILDI — bölge artık NAV yerine MAIN satırda
   (min-width:270px) → her masaüstü boyutunda "Bölge seçiniz" + "Buradan Başla" ellipsissiz sığar. */
/* Dropdown açıkken: üst köşeler düz → dropdown ile temiz birleşim (silver) */
.p52-nav-bolge .bolge-secici-btn.active { border-radius: 7px 7px 0 0; border-color: #94a3b8; border-bottom-color: transparent; }
.p52-nav-bolge .bolge-dropdown-menu { border-radius: 0 0 7px 7px; border: 1px solid #94a3b8; border-top: none; box-shadow: 0 15px 40px rgba(0,0,0,.12); }
/* Erişilebilirlik: hareket azaltma tercihinde tüm bölge animasyonları dursun */
@media (prefers-reduced-motion: reduce) {
    .p52-nav-bolge .bolge-secici-btn,
    .p52-nav-bolge .bolge-secici-btn::after,
    .p52-nav-bolge .bolge-secici-btn .bolge-icon i,
    .p52-nav-bolge .p52-cta,
    .p52-nav-bolge .p52-cta-ok { animation: none; }
}
/* Mobil */
@media (max-width: 991px) {
    [data-header-palet="palet_8"] .header-main .container > .row {
        flex-wrap: wrap;
    }
    [data-header-palet="palet_8"] .header-main .col-6.col-lg-3:first-child {
        flex: 0 0 50%;
        max-width: 50%;
    }
    [data-header-palet="palet_8"] .header-main .container > .row > .col-6.col-lg-2 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-left: 0;
    }
    [data-header-palet="palet_8"] .header-action {
        flex-direction: column;
        gap: 4px;
    }
    [data-header-palet="palet_8"] a[href*="sepet"].header-action {
        order: 0;
    }
    [data-header-palet="palet_8"] a[href*="sepet"].header-action > i {
        background: none;
        color: inherit;
        width: auto;
        height: auto;
        border-radius: 0;
        font-size: 22px;
    }
    [data-header-palet="palet_8"] a[href*="sepet"].header-action > span:not(.badge) {
        display: block;
    }
}

/* Palet 9: Modern Flat */
[data-header-palet="palet_9"] .site-header { box-shadow: none; background: #fafbfc; }
[data-header-palet="palet_9"] .search-form .input-group { border: none; background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
[data-header-palet="palet_9"] .search-form .btn { background: #374151; border-radius: 0 8px 8px 0; margin: 0; box-shadow: none; }
[data-header-palet="palet_9"] .main-nav { background: #fff; border-top: 1px solid #f1f5f9; border-bottom: 2px solid var(--primary-green); }
[data-header-palet="palet_9"] .header-action i { font-size: 20px; }

/* Palet 10: Lux */
[data-header-palet="palet_10"] .top-bar { background: #0f172a; color: #94a3b8; border: none; }
[data-header-palet="palet_10"] .top-bar a { color: #e2e8f0 !important; }
[data-header-palet="palet_10"] .top-bar a:hover { color: #fbbf24 !important; }
[data-header-palet="palet_10"] .top-bar i { color: #fbbf24; }
[data-header-palet="palet_10"] .site-header { box-shadow: 0 1px 0 #e5e7eb; }
[data-header-palet="palet_10"] .header-main { padding: 16px 0; }
[data-header-palet="palet_10"] .search-form .input-group { border: 1px solid #d4af37; border-radius: 0; background: #fff; }
[data-header-palet="palet_10"] .search-form .btn { background: #d4af37; color: #fff; border-radius: 0; margin: 0; }
[data-header-palet="palet_10"] .main-nav { background: #0f172a; border: none; }
[data-header-palet="palet_10"] .navbar-nav .nav-link { color: #e2e8f0; font-weight: 500; }
[data-header-palet="palet_10"] .navbar-nav .nav-link:hover, [data-header-palet="palet_10"] .navbar-nav .nav-link.active { color: #fbbf24; }
[data-header-palet="palet_10"] .navbar-nav .nav-link::after { background: #fbbf24; }
[data-header-palet="palet_10"] .navbar-nav .nav-item + .nav-item::before { background: #334155; }

/* Palet 11-15 */
[data-header-palet="palet_11"] .site-header { transition: all 0.3s ease; }
[data-header-palet="palet_11"] .search-form .input-group { border-radius: 50px; }
[data-header-palet="palet_11"] .search-form .btn { border-radius: 0 50px 50px 0; }
[data-header-palet="palet_11"] .main-nav { border-top: 2px solid var(--primary-green); border-bottom: none; }
[data-header-palet="palet_11"] .navbar-nav .nav-item + .nav-item::before { display: none; }

[data-header-palet="palet_12"] .site-header { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
[data-header-palet="palet_12"] .header-main .container { max-width: 100%; padding: 0 30px; }
[data-header-palet="palet_12"] .main-nav .container { max-width: 100%; padding: 0 30px; }
[data-header-palet="palet_12"] .search-form .input-group { border-radius: 6px; }
[data-header-palet="palet_12"] .search-form .btn { border-radius: 0 4px 4px 0; margin: 0; }
@media (max-width: 991px) { [data-header-palet="palet_12"] .header-main .container { padding: 0 15px; } }

[data-header-palet="palet_13"] .top-bar { background: var(--primary-green); color: #fff; border: none; padding: 6px 0; }
[data-header-palet="palet_13"] .top-bar a { color: #fff !important; }
[data-header-palet="palet_13"] .top-bar i { color: #fff; }
[data-header-palet="palet_13"] .main-nav { background: #f8fafc; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }

[data-header-palet="palet_14"] .site-header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-header-palet="palet_14"] .main-nav { background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-color: rgba(0,0,0,0.05); }
[data-header-palet="palet_14"] .search-form .input-group { background: rgba(255,255,255,0.8); border-color: rgba(0,0,0,0.08); }

[data-header-palet="palet_15"] .site-header { background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%); box-shadow: 0 2px 12px rgba(46,204,113,0.08); }
[data-header-palet="palet_15"] .main-nav { background: linear-gradient(90deg, var(--primary-green) 0%, var(--primary-green-dark) 100%); border: none; }
[data-header-palet="palet_15"] .navbar-nav .nav-link { color: #fff; font-weight: 600; }
[data-header-palet="palet_15"] .navbar-nav .nav-link:hover, [data-header-palet="palet_15"] .navbar-nav .nav-link.active { background: rgba(255,255,255,0.2); color: #fff; border-radius: 6px; }
[data-header-palet="palet_15"] .navbar-nav .nav-link::after { display: none; }
[data-header-palet="palet_15"] .navbar-nav .nav-item + .nav-item::before { display: none; }
[data-header-palet="palet_15"] .search-form .input-group { border-color: var(--primary-green); }

/* Palet 16-20 */
[data-header-palet="palet_16"] .top-bar { background: #1e293b; color: #94a3b8; border: none; font-size: 12px; padding: 6px 0; }
[data-header-palet="palet_16"] .top-bar a { color: #cbd5e1 !important; }
[data-header-palet="palet_16"] .site-header { box-shadow: none; border-bottom: 1px solid #e5e7eb; }
[data-header-palet="palet_16"] .search-form .input-group { border-radius: 6px; border-color: #cbd5e1; }
[data-header-palet="palet_16"] .search-form .btn { border-radius: 0 4px 4px 0; margin: 0; background: #374151; }
[data-header-palet="palet_16"] .main-nav { background: #374151; border: none; }
[data-header-palet="palet_16"] .navbar-nav .nav-link { color: #e2e8f0; font-size: 13px; }
[data-header-palet="palet_16"] .navbar-nav .nav-link:hover, [data-header-palet="palet_16"] .navbar-nav .nav-link.active { color: #fff; background: rgba(255,255,255,0.1); border-radius: 4px; }
[data-header-palet="palet_16"] .navbar-nav .nav-link::after { display: none; }
[data-header-palet="palet_16"] .navbar-nav .nav-item + .nav-item::before { background: #4b5563; }

[data-header-palet="palet_17"] .site-header { background: #fefce8; box-shadow: none; border-bottom: 2px solid #fde68a; }
[data-header-palet="palet_17"] .search-form .input-group { border-color: #fbbf24; border-radius: 50px; }
[data-header-palet="palet_17"] .search-form .btn { background: #f59e0b; border-radius: 0 50px 50px 0; margin: 0; }
[data-header-palet="palet_17"] .main-nav { background: #fffbeb; border-color: #fde68a; }
[data-header-palet="palet_17"] .navbar-nav .nav-link:hover, [data-header-palet="palet_17"] .navbar-nav .nav-link.active { color: #d97706; }
[data-header-palet="palet_17"] .navbar-nav .nav-link::after { background: #f59e0b; }
[data-header-palet="palet_17"] .bolge-secici-btn { background: #f59e0b; }

[data-header-palet="palet_18"] .top-bar { background: #450a0a; color: #fecaca; border: none; }
[data-header-palet="palet_18"] .top-bar a { color: #fecaca !important; }
[data-header-palet="palet_18"] .top-bar i { color: #f87171; }
[data-header-palet="palet_18"] .search-form .input-group { border-color: #991b1b; }
[data-header-palet="palet_18"] .search-form .btn { background: #991b1b; }
[data-header-palet="palet_18"] .main-nav { background: #7f1d1d; border: none; }
[data-header-palet="palet_18"] .navbar-nav .nav-link { color: #fecaca; }
[data-header-palet="palet_18"] .navbar-nav .nav-link:hover, [data-header-palet="palet_18"] .navbar-nav .nav-link.active { color: #fff; background: rgba(255,255,255,0.1); border-radius: 4px; }
[data-header-palet="palet_18"] .navbar-nav .nav-link::after { display: none; }
[data-header-palet="palet_18"] .navbar-nav .nav-item + .nav-item::before { background: #991b1b; }
[data-header-palet="palet_18"] .bolge-secici-btn { background: #991b1b; }

[data-header-palet="palet_19"] .top-bar { background: #0c4a6e; color: #bae6fd; border: none; }
[data-header-palet="palet_19"] .top-bar a { color: #e0f2fe !important; }
[data-header-palet="palet_19"] .top-bar i { color: #38bdf8; }
[data-header-palet="palet_19"] .search-form .input-group { border-color: #0ea5e9; }
[data-header-palet="palet_19"] .search-form .btn { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
[data-header-palet="palet_19"] .main-nav { background: linear-gradient(90deg, #0284c7, #0369a1); border: none; }
[data-header-palet="palet_19"] .navbar-nav .nav-link { color: #fff; font-weight: 600; }
[data-header-palet="palet_19"] .navbar-nav .nav-link:hover, [data-header-palet="palet_19"] .navbar-nav .nav-link.active { background: rgba(255,255,255,0.15); color: #fff; border-radius: 6px; }
[data-header-palet="palet_19"] .navbar-nav .nav-link::after { display: none; }
[data-header-palet="palet_19"] .navbar-nav .nav-item + .nav-item::before { display: none; }
[data-header-palet="palet_19"] .bolge-secici-btn { background: #0ea5e9; }

[data-header-palet="palet_20"] .top-bar { display: none !important; }
[data-header-palet="palet_20"] .site-header { box-shadow: none; border-bottom: 1px solid #f3f4f6; }
[data-header-palet="palet_20"] .header-main { padding: 20px 0; }
[data-header-palet="palet_20"] .search-form .input-group { border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 8px; box-shadow: none; }
[data-header-palet="palet_20"] .search-form .btn { background: #111827; border-radius: 0 6px 6px 0; margin: 0; box-shadow: none; }
[data-header-palet="palet_20"] .main-nav { background: #fff; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; }
[data-header-palet="palet_20"] .navbar-nav .nav-link { color: #374151; font-weight: 400; font-size: 14px; }
[data-header-palet="palet_20"] .navbar-nav .nav-link:hover, [data-header-palet="palet_20"] .navbar-nav .nav-link.active { color: #111827; }
[data-header-palet="palet_20"] .navbar-nav .nav-link::after { background: #111827; }
[data-header-palet="palet_20"] .navbar-nav .nav-item + .nav-item::before { display: none; }
[data-header-palet="palet_20"] .header-action { color: #374151; }
[data-header-palet="palet_20"] .header-action:hover { color: #111827; }
[data-header-palet="palet_20"] .bolge-secici-btn { background: #111827; border-radius: 8px; }

/* ============================================
   Palet 21: Pazar Yeri — Marketplace
   ============================================ */
[data-header-palet="palet_21"] .top-bar { background: #f5f5f5; border-bottom: none; }
[data-header-palet="palet_21"] .top-bar a { color: #333 !important; }
[data-header-palet="palet_21"] .header-main { padding: 12px 0; background: #fff; border-bottom: 1px solid #e0e0e0; }
[data-header-palet="palet_21"] .logo-text { color: #ff6000; font-weight: 700; font-size: 24px; }
[data-header-palet="palet_21"] .logo-text span { color: #ff6000; font-size: 11px; display: block; font-weight: 400; }
[data-header-palet="palet_21"] .search-form .input-group { border: 2px solid #ff6000; border-radius: 10px; overflow: hidden; background: #fff; }
[data-header-palet="palet_21"] .search-form .search-icon { display: flex; color: #999; }
[data-header-palet="palet_21"] .search-form .form-control { border: none; box-shadow: none; font-size: 14px; padding: 10px 14px; }
[data-header-palet="palet_21"] .search-form .form-control:focus { box-shadow: none; }
[data-header-palet="palet_21"] .search-form .btn { background: #ff6000; border: none; border-radius: 0; color: #fff; padding: 10px 18px; font-size: 16px; }
[data-header-palet="palet_21"] .search-form .btn:hover { background: #e55500; }
[data-header-palet="palet_21"] .bolge-secici-btn { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 8px 14px; }
[data-header-palet="palet_21"] .bolge-secici-btn .bolge-icon { background: transparent; color: #ff6000; box-shadow: none; font-size: 22px; width: auto; height: auto; }
[data-header-palet="palet_21"] .bolge-secici-btn .bolge-label { font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }
[data-header-palet="palet_21"] .bolge-secici-btn .bolge-value { font-size: 13px; font-weight: 600; color: #333; }
[data-header-palet="palet_21"] .header-action { flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: #333; padding: 6px 10px; border-radius: 8px; }
[data-header-palet="palet_21"] .header-action i { font-size: 20px; }
[data-header-palet="palet_21"] .header-action:hover { background: #fff3e6; color: #ff6000; }
[data-header-palet="palet_21"] .header-action .badge { background: #ff6000; }
[data-header-palet="palet_21"] .main-nav { background: #f5f5f5; border-top: none; border-bottom: 1px solid #e0e0e0; }
[data-header-palet="palet_21"] .navbar-nav .nav-link { color: #333; font-size: 13px; font-weight: 500; }
[data-header-palet="palet_21"] .navbar-nav .nav-link:hover, [data-header-palet="palet_21"] .navbar-nav .nav-link.active { color: #ff6000; }
[data-header-palet="palet_21"] .navbar-nav .nav-link::after { background: #ff6000; }

/* ============================================
   Palet 22: Vitrin — Orta Logo, Minimal
   ============================================ */
[data-header-palet="palet_22"] .top-bar { display: none !important; }
[data-header-palet="palet_22"] .main-nav { display: none !important; }
[data-header-palet="palet_22"] .header-main { padding: 16px 0; background: #fff; border-bottom: 1px solid #f0f0f0; }
[data-header-palet="palet_22"] .header-main .p4-bolge-col { display: none !important; }
[data-header-palet="palet_22"] .logo { text-align: center; }
[data-header-palet="palet_22"] .logo img { max-height: 45px; }
[data-header-palet="palet_22"] .logo-text { font-size: 22px; font-weight: 700; color: #1a1a1a; letter-spacing: 1px; }
[data-header-palet="palet_22"] .logo-text span { font-weight: 300; font-size: 11px; color: #999; display: block; }
[data-header-palet="palet_22"] .header-action { color: #1a1a1a; padding: 4px 8px; }
[data-header-palet="palet_22"] .header-action span:not(.badge) { display: none; }
[data-header-palet="palet_22"] .header-action i { font-size: 20px; }
[data-header-palet="palet_22"] .header-action:hover { color: #666; }
[data-header-palet="palet_22"] .search-form .input-group { border: 1px solid #e0e0e0; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: none; }
[data-header-palet="palet_22"] .search-form .search-icon { color: #999; }
[data-header-palet="palet_22"] .search-form .form-control { border: none; box-shadow: none; font-size: 13px; padding: 8px 12px; }
[data-header-palet="palet_22"] .search-form .btn { background: transparent; color: #999; border: none; font-size: 14px; padding: 8px 12px; }
[data-header-palet="palet_22"] .search-form .btn:hover { color: #333; }
@media (min-width: 992px) {
    [data-header-palet="palet_22"] .header-main .container > .row { flex-wrap: nowrap; gap: 16px; }
    [data-header-palet="palet_22"] .header-main .d-none.d-lg-block[class*="col-lg-4"],
    [data-header-palet="palet_22"] .header-main .d-none.d-lg-block[class*="col-lg-6"] {
        display: block !important; order: -1; flex: 0 0 220px; max-width: 220px;
    }
    [data-header-palet="palet_22"] .header-main .col-6.col-lg-3:first-child { flex: 1; max-width: none; text-align: center; order: 0; }
    [data-header-palet="palet_22"] .header-main .col-6.col-lg-2 { order: 1; flex: 0 0 auto; }
    [data-header-palet="palet_22"] .header-actions { gap: 4px; }
}

/* ============================================
   Palet 23: Mikro Bar — Ultra Minimal
   ============================================ */
[data-header-palet="palet_23"] .top-bar { display: none !important; }
[data-header-palet="palet_23"] .main-nav { display: none !important; }
[data-header-palet="palet_23"] .header-main { padding: 8px 0; background: #fff; border-bottom: 1px solid #f0f0f0; }
[data-header-palet="palet_23"] .search-form .input-group { border: none; background: transparent; box-shadow: none; }
[data-header-palet="palet_23"] .search-form .search-icon { color: #6b7280; font-size: 15px; }
[data-header-palet="palet_23"] .search-form .form-control { border: none; box-shadow: none; font-size: 13px; color: #6b7280; padding: 6px 10px; background: transparent; }
[data-header-palet="palet_23"] .search-form .form-control::placeholder { color: #9ca3af; }
[data-header-palet="palet_23"] .search-form .btn { display: none; }
[data-header-palet="palet_23"] .header-action { color: #6b7280; font-size: 12px; padding: 4px 8px; gap: 4px; }
[data-header-palet="palet_23"] .header-action span:not(.badge) { font-size: 12px; }
[data-header-palet="palet_23"] .header-action i { font-size: 14px; }
[data-header-palet="palet_23"] .header-action:hover { color: #374151; }
[data-header-palet="palet_23"] .bolge-secici-btn { background: transparent; border: none; padding: 4px 8px; box-shadow: none; }
[data-header-palet="palet_23"] .bolge-secici-btn .bolge-icon { display: none; }
[data-header-palet="palet_23"] .bolge-secici-btn .bolge-label { font-size: 11px; color: #6b7280; }
[data-header-palet="palet_23"] .bolge-secici-btn .bolge-value { font-size: 13px; font-weight: 600; color: #1f2937; }
@media (min-width: 992px) {
    [data-header-palet="palet_23"] .header-main .col-6.col-lg-3:first-child { display: none !important; }
    [data-header-palet="palet_23"] .header-main .container > .row { flex-wrap: nowrap; align-items: center; gap: 12px; }
    [data-header-palet="palet_23"] .header-main .d-none.d-lg-block[class*="col-lg-4"],
    [data-header-palet="palet_23"] .header-main .d-none.d-lg-block[class*="col-lg-6"] {
        display: block !important; flex: 1; max-width: 500px; order: -1;
    }
    [data-header-palet="palet_23"] .header-main .p4-bolge-col { display: block !important; flex: 0 0 auto; }
    [data-header-palet="palet_23"] .header-main .col-6.col-lg-2 { flex: 0 0 auto; margin-left: auto; }
}
@media (max-width: 991px) {
    [data-header-palet="palet_23"] .header-main .col-6.col-lg-3:first-child { display: block !important; flex: 0 0 50%; }
}

/* ============================================
   Palet 24: Teslimat Pro — Bolge + Genis Arama
   ============================================ */
[data-header-palet="palet_24"] .top-bar { display: none !important; }
[data-header-palet="palet_24"] .header-main { padding: 14px 0; background: #fff; border-bottom: 1px solid #e8e5e0; }
[data-header-palet="palet_24"] .logo img { max-height: 38px; }
[data-header-palet="palet_24"] .logo-text { font-size: 20px; font-weight: 600; color: #2d3a2e; }
[data-header-palet="palet_24"] .search-form .input-group { border: 1.5px solid #d4cfc7; border-radius: 8px; overflow: hidden; background: #fff; }
[data-header-palet="palet_24"] .search-form .search-icon { display: none; }
[data-header-palet="palet_24"] .search-form .form-control { border: none; box-shadow: none; font-size: 14px; padding: 11px 16px; }
[data-header-palet="palet_24"] .search-form .form-control:focus { box-shadow: none; }
[data-header-palet="palet_24"] .search-form .btn { background: #2d3a2e; border: none; border-radius: 0; color: #fff; padding: 11px 24px; font-size: 13px; font-weight: 600; letter-spacing: 1px; }
[data-header-palet="palet_24"] .search-form .btn:hover { background: #1e2820; }
[data-header-palet="palet_24"] .bolge-secici-btn { background: #fff; border: 1.5px solid #d4cfc7; border-radius: 8px; padding: 6px 12px; }
[data-header-palet="palet_24"] .bolge-secici-btn .bolge-icon { background: transparent; color: #2d3a2e; box-shadow: none; width: auto; height: auto; font-size: 18px; }
[data-header-palet="palet_24"] .bolge-secici-btn .bolge-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: #999; font-weight: 600; }
[data-header-palet="palet_24"] .bolge-secici-btn .bolge-value { font-size: 12px; font-weight: 600; color: #2d3a2e; }
[data-header-palet="palet_24"] .header-action { flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: #2d3a2e; padding: 4px 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
[data-header-palet="palet_24"] .header-action i { font-size: 20px; }
[data-header-palet="palet_24"] .header-action:hover { color: #4a6b4e; }
[data-header-palet="palet_24"] .main-nav { background: #faf8f5; border-bottom: 1px solid #e8e5e0; border-top: none; }
[data-header-palet="palet_24"] .navbar-nav .nav-link { color: #5a5347; font-size: 13px; font-weight: 500; }
[data-header-palet="palet_24"] .navbar-nav .nav-link:hover, [data-header-palet="palet_24"] .navbar-nav .nav-link.active { color: #2d3a2e; }
[data-header-palet="palet_24"] .navbar-nav .nav-link::after { background: #2d3a2e; }
[data-header-palet="palet_24"] .navbar-nav .nav-item + .nav-item::before { background: #d4cfc7; }
@media (min-width: 992px) {
    [data-header-palet="palet_24"] .header-main .container > .row { flex-wrap: nowrap; align-items: center; gap: 12px; }
    [data-header-palet="palet_24"] .header-main .col-6.col-lg-3:first-child { flex: 0 0 auto; max-width: none; width: auto; }
    [data-header-palet="palet_24"] .header-main .p4-bolge-col { display: block !important; flex: 0 0 auto; max-width: 180px; }
    [data-header-palet="palet_24"] .header-main .d-none.d-lg-block[class*="col-lg-4"],
    [data-header-palet="palet_24"] .header-main .d-none.d-lg-block[class*="col-lg-6"] {
        display: block !important; flex: 1 1 0%; min-width: 0; max-width: none;
    }
    [data-header-palet="palet_24"] .header-main .col-6.col-lg-2 { flex: 0 0 auto; }
}

/* ============================================
   Palet 25: Klasik Nav — Menu Satirinda
   ============================================ */
[data-header-palet="palet_25"] .top-bar { display: none !important; }
[data-header-palet="palet_25"] .main-nav { background: #faf8f5; border-bottom: 1px solid #e8e5e0; border-top: none; padding: 0; }
@media (min-width: 992px) {
    [data-header-palet="palet_25"] .header-main { display: none !important; }
    [data-header-palet="palet_25"] .main-nav .nav-container-flex { display: flex; align-items: center; gap: 0; }
    [data-header-palet="palet_25"] .nav-logo-yaninda { flex: 0 0 auto; margin-right: 24px; text-decoration: none; display: flex; align-items: center; }
    [data-header-palet="palet_25"] .nav-logo-yaninda img { max-height: 36px; }
    [data-header-palet="palet_25"] .nav-logo-text { font-size: 20px; font-weight: 600; color: #2d3a2e; white-space: nowrap; }
    [data-header-palet="palet_25"] .main-nav .navbar-nav { flex: 1; min-width: 0; justify-content: flex-start; }
    [data-header-palet="palet_25"] .navbar-nav .nav-link { color: #8b7355; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 16px 14px; }
    [data-header-palet="palet_25"] .navbar-nav .nav-link:hover, [data-header-palet="palet_25"] .navbar-nav .nav-link.active { color: #5a4530; }
    [data-header-palet="palet_25"] .navbar-nav .nav-link::after { background: #8b7355; }
    [data-header-palet="palet_25"] .navbar-nav .nav-item + .nav-item::before { display: none; }
    [data-header-palet="palet_25"] .p25-nav-sag { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 0; }
    [data-header-palet="palet_25"] .p25-telefon { font-size: 14px; color: #333; text-decoration: none; font-weight: 500; white-space: nowrap; padding: 0 12px; }
    [data-header-palet="palet_25"] .p25-telefon:hover { color: #8b7355; }
    [data-header-palet="palet_25"] .p25-sep { width: 1px; height: 22px; background: #d4cfc7; margin: 0 8px; }
    [data-header-palet="palet_25"] .p25-ikonlar { display: flex; align-items: center; gap: 6px; }
    [data-header-palet="palet_25"] .p25-ikon-btn { color: #333; font-size: 18px; padding: 6px 8px; text-decoration: none; position: relative; transition: color 0.2s; }
    [data-header-palet="palet_25"] .p25-ikon-btn:hover { color: #8b7355; }
    [data-header-palet="palet_25"] .p25-sepet-btn .badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; font-size: 9px; background: #8b7355; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 991px) {
    [data-header-palet="palet_25"] .header-main { display: block !important; }
    [data-header-palet="palet_25"] .nav-logo-yaninda, [data-header-palet="palet_25"] .p25-nav-sag { display: none; }
}

/* ============================================
   Palet 26: Editoryal — Buyuk Serif Logo Orta
   ============================================ */
[data-header-palet="palet_26"] .top-bar { display: none !important; }
[data-header-palet="palet_26"] .main-nav { display: none !important; }
[data-header-palet="palet_26"] .header-main { padding: 20px 0; background: #faf9f7; border-bottom: 1px solid #eee; }
[data-header-palet="palet_26"] .logo { text-align: center; }
[data-header-palet="palet_26"] .logo img { max-height: 40px; }
[data-header-palet="palet_26"] .logo-text { font-family: 'Georgia', 'Times New Roman', serif; font-size: 32px; font-weight: 400; color: #1a1a1a; letter-spacing: 2px; }
[data-header-palet="palet_26"] .logo-text span { display: block; font-family: sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; color: #999; margin-top: 2px; }
[data-header-palet="palet_26"] .header-main .p4-bolge-col { display: none !important; }
[data-header-palet="palet_26"] .header-action { color: #666; padding: 4px 8px; }
[data-header-palet="palet_26"] .header-action span:not(.badge) { display: none; }
[data-header-palet="palet_26"] .header-action i { font-size: 20px; font-weight: 300; }
[data-header-palet="palet_26"] .header-action:hover { color: #1a1a1a; }
[data-header-palet="palet_26"] .search-form .input-group { border: none; background: transparent; box-shadow: none; }
[data-header-palet="palet_26"] .search-form .search-icon { color: #666; font-size: 16px; }
[data-header-palet="palet_26"] .search-form .form-control { border: none; box-shadow: none; font-size: 13px; color: #666; padding: 6px 8px; background: transparent; max-width: 80px; }
[data-header-palet="palet_26"] .search-form .form-control::placeholder { color: #999; }
[data-header-palet="palet_26"] .search-form .btn { display: none; }
@media (min-width: 992px) {
    [data-header-palet="palet_26"] .header-main .container > .row { flex-wrap: nowrap; align-items: center; gap: 16px; }
    [data-header-palet="palet_26"] .header-main .d-none.d-lg-block[class*="col-lg-4"],
    [data-header-palet="palet_26"] .header-main .d-none.d-lg-block[class*="col-lg-6"] {
        display: block !important; order: -1; flex: 0 0 120px; max-width: 120px;
    }
    [data-header-palet="palet_26"] .header-main .col-6.col-lg-3:first-child { flex: 1; max-width: none; text-align: center; order: 0; }
    [data-header-palet="palet_26"] .header-main .col-6.col-lg-2 { order: 1; flex: 0 0 auto; }
    [data-header-palet="palet_26"] .header-actions { gap: 2px; }
}

/* =====================================================
   ÜRÜN KARTI AKSİYON SATIRI — "Hızlı Sipariş" + "İncele"
   (Eski tek "Gönder" butonunun yerini alir; tum kart stillerinde ortak,
    tema-bagimsiz. Hızlı Sipariş popup'i js/hizli-siparis.js delegasyonu ile acar.)

   🔴 02.09.2026 — IKI BUTON HER CIHAZDA YAN YANA VE ESIT GENISLIKTE (kullanici istegi).
   Onceki surumde UC ayri kusur vardi (gercek Chrome'da olculdu):
     (a) 430px ALTINDA `flex-direction:column` -> butonlar ALT ALTA idi;
     (b) 430px USTUNDE `flex:1.35` vs `flex:1` -> SIMETRIK DEGILDI;
     (c) `white-space:nowrap` + varsayilan `min-width:auto` -> flex KUCULTMESI CALISMIYOR,
         butonlar KARTIN DISINA TASIYORDU. Olcum: 1280px'te satir 152px ama butonlar
         114+80+8 = 202px -> "İncele" gorsel olarak KESILIYORDU (ekran goruntusuyle dogrulandi),
         992px'te ekran disina cikiyordu. Yani (c) MASAUSTUNDE DE canli bir hataydi.
   Cozum bu blokta: `min-width:0` (kucultmeyi acar) + iki butonda da `flex:1 1 0` (simetri) +
   `white-space:normal` & `overflow-wrap` (sigmayan etiket TASMAK yerine alt satira sarar).
   Dogrulama ve olculen sayilar: claude.md «URUN KARTI AKSIYON SATIRI» bolumu (5 bagimsiz denetci).
   ===================================================== */
.uk-act-row{
    display:flex; flex-direction:row; align-items:stretch;
    gap:8px; margin-top:10px; width:100%;
    /* 🔴 OLCUT VIEWPORT DEGIL, KARTIN KENDI GENISLIGI (asagidaki nota bak) */
    container-type:inline-size; container-name:ukact;
}
.uk-act{
    flex:1 1 0; min-width:0;              /* SIMETRI + flex kucultmesini AC (tasmanin kok nedeni) */
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:11px 10px; border-radius:11px; font-weight:700; font-size:13px;
    line-height:1.2; text-align:center; text-decoration:none; cursor:pointer;
    white-space:normal; overflow-wrap:break-word;   /* nowrap KALDIRILDI: sigmayan etiket sarar, TASMAZ */
    min-height:42px;   /* 🔴 DOKUNMA HEDEFI — KALDIRMA. Olculdu: bu satir olmadan buton
                          178-190px genisligindeki satirda 36.39px'e dusuyor. Denetimde bu kural
                          bantlarin icinde durdugu icin 180-249px araliginda HIC uygulanmiyordu. */
    border:1.5px solid transparent; transition:all .18s ease;
    -webkit-appearance:none; appearance:none; font-family:inherit;
}
/* Asagidaki iki kural SAVUNMA amaclidir; olcumde tasiyici DEGILLER (iptal edildiginde
   320/375/992/1280'de tek piksel degismedi) — kaldirilirsa gorunum bozulmaz, ama flex
   kucultmesinin baska bir yerde kilitlenmemesi icin birakildilar. */
.uk-act > span{ min-width:0; }
.uk-act i{ font-size:15px; line-height:1; flex:0 0 auto; }
.uk-act-hizli{
    background:var(--primary-green); color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
    box-shadow:0 2px 8px color-mix(in srgb, var(--primary-green) 28%, transparent);
}
.uk-act-hizli:hover{ background:var(--primary-green-dark); color:#fff; transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(0,0,0,.16);
    box-shadow:0 4px 14px color-mix(in srgb, var(--primary-green-dark) 34%, transparent); }
.uk-act-hizli:active{ transform:translateY(0); }
.uk-act-incele{
    background:#fff; color:var(--primary-green-dark); border-color:#e2e8f0;
}
.uk-act-incele:hover{ border-color:var(--primary-green); color:var(--primary-green-dark);
    background:#f7f7f7;
    background:color-mix(in srgb, var(--primary-green) 8%, #fff); }
.uk-act-row.uk-act-tek .uk-act-incele{ flex:1 1 100%; }
/* Modern/Taze/Varsayilan stillerde teslimat metni satiri (buton yerine kucuk etiket) */
.uk-teslimat-alt{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--primary-green-dark); margin-top:4px; }
.uk-teslimat-varsayilan{ margin-top:6px; }
/* Minimal stil sarmalayicisi icinde tam genislik */
.uk-minimal-sepet .uk-act-row{ margin-top:8px; }
/* 🔴 DAR KARTLARDA DA YAN YANA — olcut KARTIN genisligi (viewport DEGIL).
   Ayni viewport'ta kart genisligi izgaraya gore degisiyor (olculdu: 992px'te 118px ama
   360px'te 130px) -> medya sorgusu YANLIS olcuttur; onceki surum bu yuzden 430px altinda
   butonlari ALT ALTA yiginiyordu. §13: @container destegi olmayan eski tarayicida yalnizca
   yukaridaki taban kurallar gecerlidir -> butonlar yine YAN YANA ve ESIT kalir, dar kartta
   etiket alt satira sarar (tasma yok). Esikler olculerek secildi ("Sipariş" en uzun kelime:
   36px@11 / 39px@12 / 43px@13). */
/* §13 YEDEK — YALNIZ @container DESTEGI OLMAYAN eski tarayicilar icin. Modern tarayicida
   `@supports not` FALSE olur ve blok HIC uygulanmaz -> asagida olculen davranis birebir korunur.
   Yedeksiz olcum: 320px'te etiket 13px'te cok satira bolunup buton 196px'e uzuyordu (calisir ama cirkin). */
@supports not (container-type: inline-size){
    /* 🔴 Kart genisligi BILINEMEZ -> taban yedek viewport kapisi OLMADAN uygulanir ve
       IKON GIZLENIR (en buyuk yer tuketicisi: 15px + bosluk). Onceki hali yalniz
       `@media (max-width:575.98px)` icindeydi ve ikonu hic gizlemiyordu; bu, tam da bu
       degisikligin duzelttigi hatanin (viewport'u kart genisligi sanmak) yedekte
       TEKRARLANMASIYDI: olculdu, satir vp=575'te 237px ama vp=992'de 178px -> yardimin
       gerektigi yerde yedek hic devreye girmiyordu (992/1024'te buton 70.8px / 3 satir,
       320'de 94px / 5 satir, etiket hece ortasindan bolunuyordu).
       Bu hal ayni yerlerde 42px ve 46.4px veriyor; modern tarayicida `@supports not` FALSE
       oldugu icin blok HIC uygulanmaz (6/6 viewport'ta bayt-identik davranis olculdu). */
    .uk-act{ font-size:12px; padding:10px 7px; gap:0; min-height:42px; }
    .uk-act i{ display:none; }
    @media (max-width:430px){
        .uk-act{ font-size:11px; padding:9px 4px; min-height:40px; letter-spacing:-.1px; }
    }
}
/* 🔴 IKON, ETIKETI IKINCI SATIRA DUSURMEDIGI SURECE gosterilir; her bant TEK SATIR hedefler.
   Olculen ihtiyaclar (gercek Chrome): ikonlu tek satir icin buton >=118px, ikonsuz 13px icin
   >=95px, 12px icin >=85px, 11px icin >=69px. Esiklerin ILK hali yalniz en uzun KELIMEYI
   ("Sipariş" 35.66/38.91/42.14px) hesaba katiyordu; "Hızlı Sipariş" + ikon + bosluk BIRLIKTE
   olculmedigi icin 201-240px araligi "olu bolge" oluyor ve etiket 12 viewport'un 9'unda
   ikinci satira sariyordu (ikon tek basina 21px yiyor). Pay yetmezse bedel YALNIZCA ikinci
   satirdir — kirpma veya tasma DEGIL (`overflow-wrap` + `min-width:0` bunu garanti eder). */
@container ukact (max-width:249px){ .uk-act i{ display:none; } }
@container ukact (max-width:203px){ .uk-act{ font-size:12px; padding:10px 7px; } }
@container ukact (max-width:179px){ .uk-act{ font-size:11px; padding:9px 5px; } }
@container ukact (max-width:159px){ .uk-act{ padding:9px 4px; letter-spacing:-.1px; } }

/* =====================================================
   HIZLI SİPARİŞ MODAL (parent / listeleme tarafı)
   js/hizli-siparis.js tarafından yönetilir.
   ===================================================== */
.hs-modal-overlay{ position:fixed; inset:0; z-index:20000; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.55); padding:16px; }
.hs-modal-overlay.acik{ display:flex; }
html.hs-modal-open, body.hs-modal-open{ overflow:hidden !important; }
.hs-modal-box{ position:relative; width:100%; max-width:460px; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.35); max-height:92vh; display:flex; }
.hs-modal-frame{ width:100%; height:560px; max-height:92vh; border:0; display:block; background:#fff; transition:height .18s ease; }
.hs-modal-spinner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#fff; z-index:2; }
.hs-spin{ width:38px; height:38px; border:3px solid #e5e7eb; border-top-color:var(--primary-green,#2ECC71); border-radius:50%; animation:hs-spin .7s linear infinite; }
@keyframes hs-spin{ to{ transform:rotate(360deg); } }
@media (max-width:560px){
    .hs-modal-overlay{ padding:0; align-items:flex-end; }
    .hs-modal-box{ max-width:100%; border-radius:20px 20px 0 0; max-height:94vh; }
    .hs-modal-frame{ max-height:94vh; }
}
/* Hızlı Sipariş toast */
.hs-toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); z-index:20050; display:flex; align-items:center; gap:9px; background:var(--primary-green-dark,#27AE60); color:#fff; font-weight:600; font-size:14px; padding:13px 20px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; max-width:calc(100vw - 32px); }
.hs-toast.gorunur{ opacity:1; transform:translate(-50%,0); }
.hs-toast i{ font-size:18px; color:#d1fae5; }

/* ============================================================
   MODERN UST ALAN (header_ust_modern) — per-palet, tamamen izole.
   Sadece .hum-bar altinda gecerli; klasik header'a asla dokunmaz.
   ============================================================ */
.hum-bar{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
/* Modern aksiyon sutunu icerige gore boyutlanir + saga yaslar → tek satir, kartlar sikismaz.
   Sabit col-lg-N (25/41%) icerige dar kalip bar'i sikistirdiginda kartlar (flex-shrink) cokuyordu. */
@media (min-width:992px){
    .hum-col{ flex:0 0 auto; width:auto; max-width:none; margin-left:auto; }
}
.hum-bar .hum-pill{
    display:inline-flex; align-items:center; gap:7px; padding:12px 16px;
    border-radius:7px; font-size:13px; font-weight:600; line-height:1;
    white-space:nowrap; text-decoration:none; cursor:pointer; flex:0 0 auto;
    border:1.5px solid transparent; transition:all .18s ease; font-family:inherit;
}
.hum-bar .hum-pill i{ font-size:15px; }
.hum-bar .hum-pill-primary{
    background:var(--primary-green,#16a34a); color:#fff;
    border-color:var(--primary-green,#16a34a); box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.hum-bar .hum-pill-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.18); }
.hum-bar .hum-pill-outline{ background:#fff; color:#374151; border-color:#e5e7eb; }
.hum-bar .hum-pill-outline:hover{ border-color:var(--primary-green,#16a34a); color:var(--primary-green,#16a34a); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.hum-bar .hum-card{
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:4px;
    width:44px; height:44px; flex:0 0 auto; border-radius:12px; background:#fff; border:1.5px solid #e5e7eb;
    color:#374151; text-decoration:none; cursor:pointer; transition:all .18s ease;
}
.hum-bar .hum-card:hover{ border-color:var(--primary-green,#16a34a); color:var(--primary-green,#16a34a); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.hum-bar .hum-card i{ font-size:19px; }
/* Rozetler: favori KIRMIZI (klasikle uyumlu #ef4444), sepet YEŞİL — görsele birebir */
.hum-bar .hum-card .favori-badge,
.hum-bar .hum-card .badge{
    position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
    display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700;
    line-height:1; border-radius:999px; color:#fff; border:2px solid #fff;
}
.hum-bar .hum-card .favori-badge{ background:#ef4444; }
.hum-bar .hum-card .badge{ background:var(--primary-green,#16a34a); }
/* Dil kartı: MİNİMAL → beyaz kart (favori/sepet ile tutarlı) içinde küçük bayrak (kartı doldurmaz).
   overflow:hidden KULLANMA → açılan .hum-dil-menu (kart dışına taşan absolute) kırpılır/görünmez! */
.hum-bar .hum-dil > .hum-dil-bayrak{ width:26px; height:19px; border-radius:4px; object-fit:cover; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.10); }
.hum-bar .hum-dil > .hum-dil-emoji{ width:auto; height:auto; font-size:20px; border-radius:0; box-shadow:none; }
/* ── Dil bayraklari: CSS data-URI SVG (dosya/deploy BAGIMSIZ, CSP data: izinli, Windows'ta da
   gercek bayrak; emoji bolge-gostergesi Windows masaustunde harf gorunur). Her data-URI izole
   SVG dokumani → clip-path ID cakismasi YOK. Yeni dil: buraya sinif + functions.php whitelist. */
.hum-dil-bayrak.hum-flag{ background-repeat:no-repeat; background-size:cover; background-position:center; display:inline-block; }
.hum-flag-tr{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20800%27%3E%3Crect%20width%3D%271200%27%20height%3D%27800%27%20fill%3D%27%23e30a17%27%2F%3E%3Ccircle%20cx%3D%27425%27%20cy%3D%27400%27%20r%3D%27200%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%27475%27%20cy%3D%27400%27%20r%3D%27160%27%20fill%3D%27%23e30a17%27%2F%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27m583.34%20400%20190.21-61.803-117.56%20161.8v-200l117.56%20161.8z%27%2F%3E%3C%2Fsvg%3E"); }
.hum-flag-gb{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2030%27%3E%3CclipPath%20id%3D%27gb-s%27%3E%3Cpath%20d%3D%27M0%2C0%20v30%20h60%20v-30%20z%27%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%27gb-t%27%3E%3Cpath%20d%3D%27M30%2C15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z%27%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%27url%28%23gb-s%29%27%3E%3Cpath%20d%3D%27M0%2C0%20v30%20h60%20v-30%20z%27%20fill%3D%27%23012169%27%2F%3E%3Cpath%20d%3D%27M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%27%20stroke%3D%27%23fff%27%20stroke-width%3D%276%27%2F%3E%3Cpath%20d%3D%27M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%27%20clip-path%3D%27url%28%23gb-t%29%27%20stroke%3D%27%23c8102e%27%20stroke-width%3D%274%27%2F%3E%3Cpath%20d%3D%27M30%2C0%20v30%20M0%2C15%20h60%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2710%27%2F%3E%3Cpath%20d%3D%27M30%2C0%20v30%20M0%2C15%20h60%27%20stroke%3D%27%23c8102e%27%20stroke-width%3D%276%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.hum-flag-de{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%205%203%27%3E%3Crect%20width%3D%275%27%20height%3D%273%27%20fill%3D%27%23ffce00%27%2F%3E%3Crect%20width%3D%275%27%20height%3D%272%27%20fill%3D%27%23dd0000%27%2F%3E%3Crect%20width%3D%275%27%20height%3D%271%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E"); }
.hum-flag-fr{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%203%202%27%3E%3Crect%20width%3D%273%27%20height%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20width%3D%271%27%20height%3D%272%27%20fill%3D%27%23002395%27%2F%3E%3Crect%20x%3D%272%27%20width%3D%271%27%20height%3D%272%27%20fill%3D%27%23ed2939%27%2F%3E%3C%2Fsvg%3E"); }
.hum-flag-ru{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%209%206%27%3E%3Crect%20width%3D%279%27%20height%3D%276%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20y%3D%272%27%20width%3D%279%27%20height%3D%274%27%20fill%3D%27%230039a6%27%2F%3E%3Crect%20y%3D%274%27%20width%3D%279%27%20height%3D%272%27%20fill%3D%27%23d52b1e%27%2F%3E%3C%2Fsvg%3E"); }
.hum-flag-sa{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2016%27%3E%3Crect%20width%3D%2724%27%20height%3D%2716%27%20fill%3D%27%23006c35%27%2F%3E%3Cg%20fill%3D%27%23fff%27%3E%3Crect%20x%3D%275.5%27%20y%3D%274.6%27%20width%3D%2713%27%20height%3D%270.95%27%20rx%3D%270.45%27%2F%3E%3Crect%20x%3D%276.5%27%20y%3D%276.05%27%20width%3D%274.2%27%20height%3D%270.72%27%20rx%3D%270.32%27%2F%3E%3Crect%20x%3D%2712.6%27%20y%3D%276.05%27%20width%3D%275.4%27%20height%3D%270.72%27%20rx%3D%270.32%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23fff%27%3E%3Crect%20x%3D%275%27%20y%3D%279.7%27%20width%3D%2712%27%20height%3D%270.95%27%20rx%3D%270.47%27%2F%3E%3Cpath%20d%3D%27M5%2010.18%20L3.2%209.3%20L3.2%2011.05%20Z%27%2F%3E%3Crect%20x%3D%2716.9%27%20y%3D%279.15%27%20width%3D%270.85%27%20height%3D%272.05%27%2F%3E%3Crect%20x%3D%2717.75%27%20y%3D%279.85%27%20width%3D%272.7%27%20height%3D%270.72%27%20rx%3D%270.3%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.hum-flag-it{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%203%202%27%3E%3Crect%20width%3D%273%27%20height%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20width%3D%271%27%20height%3D%272%27%20fill%3D%27%23009246%27%2F%3E%3Crect%20x%3D%272%27%20width%3D%271%27%20height%3D%272%27%20fill%3D%27%23ce2b37%27%2F%3E%3C%2Fsvg%3E"); }
.hum-flag-nl{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%209%206%27%3E%3Crect%20width%3D%279%27%20height%3D%276%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20width%3D%279%27%20height%3D%272%27%20fill%3D%27%23ae1c28%27%2F%3E%3Crect%20y%3D%274%27%20width%3D%279%27%20height%3D%272%27%20fill%3D%27%2321468b%27%2F%3E%3C%2Fsvg%3E"); }
.hum-flag-pl{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%205%27%3E%3Crect%20width%3D%278%27%20height%3D%275%27%20fill%3D%27%23dc143c%27%2F%3E%3Crect%20width%3D%278%27%20height%3D%272.5%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E"); }
.hum-bar .hum-dil-menu{
    position:absolute; top:calc(100% + 8px); right:0; min-width:190px; background:#fff;
    border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.14); padding:6px;
    opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .18s ease; z-index:1050;
}
.hum-bar .hum-dil:hover .hum-dil-menu,
.hum-bar .hum-dil:focus-within .hum-dil-menu,
.hum-bar .hum-dil.acik .hum-dil-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.hum-bar .hum-dil-item{
    display:flex; align-items:center; gap:10px; width:100%; padding:12px 16px; border:none; background:none;
    border-radius:7px; font-size:13px; font-weight:500; color:#374151; text-align:left; cursor:pointer;
    transition:background .15s; font-family:inherit;
}
.hum-bar .hum-dil-item:hover{ background:#f3f4f6; }
.hum-bar .hum-dil-item.aktif{ background:#f0fdf4; color:var(--primary-green,#16a34a); font-weight:600; }
.hum-bar .hum-dil-item .hum-dil-bayrak{ width:24px; height:18px; object-fit:cover; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.08); flex:0 0 auto; }
.hum-bar .hum-dil-item .hum-dil-emoji{ width:auto; height:auto; box-shadow:none; font-size:18px; }
.hum-bar .hum-dil-item .hum-dil-tik{ margin-left:auto; font-size:14px; color:var(--primary-green,#16a34a); }
.hum-bar .mobil-menu-btn{ margin-left:2px; }
/* Mobil: metinli pill'ler + favori gizlenir, sepet+dil+menu kalir (tasmayi onler) */
@media (max-width: 991.98px){
    .hum-bar{ gap:6px; }
    .hum-bar .hum-pill{ display:none; }
    .hum-bar #headerFavoriBtn{ display:none; }
    .hum-bar .hum-card{ width:42px; height:42px; }
}
@media (prefers-reduced-motion: reduce){
    .hum-bar .hum-pill,.hum-bar .hum-card,.hum-bar .hum-dil-menu{ transition:none; }
}

/* ============================================================================
   PALET 52 — EKTEKİ HEADER TASARIMI (birebir)
   Satır1 (KOYU üst bar): daktilo duyuru (sol) + beyaz pill/kart aksiyonlar (sağ)
   Satır2 (beyaz): logo (sol) + Sipariş Asistanı(koyu) + Arama (sağ)
   Satır3 (nav): menü (sol) + Bölge/"Buradan Başla" (sağ, önceki adımlarda yapıldı)
   Scope: yalnız palet_52'de render edilen class'lar (.duyuru-bar-p52 / .p52-*).
   NOT: wrapper data-header-palet=palet_8 (kopya) → bu class'larla izole edilir; gerçek palet_8 ETKİLENMEZ.
   ============================================================================ */
/* 1) ÜST BAR — koyu antrasit + ince üst rose aksan; sağda pill/kart grubu */
/* Z-INDEX: dil (translate) açılır menüsü header-main'in ÜSTÜNDE kalsın. KÖK NEDEN: `.site-header` sticky +
   z-index:1000 (satır 327) → DOM'da duyuru barından SONRA gelen header, EŞİT z-index'te üste çıkıp aşağı
   açılan .hum-dil-menu'yü örtüyordu. Bara header'dan YÜKSEK stacking context (z:1010 > 1000) verince hem bar
   hem menü header'ın üstüne çıkar. 1010 < offcanvas(1045)/modal(1050+) → mobil menü/modal yine örter. Duyuru
   barı sticky DEĞİL → scroll'da yukarı kayıp gider, sticky header ile görsel çakışma OLMAZ. */
.duyuru-bar.duyuru-bar-p52 { background:#383b40; border-top:3px solid #ecb2ba; position:relative; z-index:1010; }
.duyuru-bar-p52 .container { justify-content:flex-start; gap:16px; }
.duyuru-bar-p52 .duyuru-bar-icerik { flex:1 1 auto; }
.p52-topbar-actions { flex:0 0 auto; flex-wrap:nowrap; margin-left:auto; gap:8px; }
/* 🔴 İKON–YAZI FAZLA BOŞLUK FIX: global `.duyuru-bar i{margin-right:8px}` (style.css:200) pill/kart ikonlarına
   SIZIYORDU → pill'de flex gap(6px) ile ÇİFT boşluk (8+6=14px), kartta ikonu merkezden sola kaydırıyordu.
   Sıfırla → ikon–yazı arası YALNIZ flex gap (6px, tek/tığ kurumsal); kart ikonu tam ortalanır. */
.p52-topbar-actions.hum-bar i { margin-right:0; }
/* MİNİMAL üst-bar butonları — top utility bar için sıkı/kompakt (hum-* taban boyutları çok iri kalıyordu).
   Özgüllük .p52-topbar-actions.hum-bar (0,3,0) > taban .hum-bar .hum-* (0,2,0) → güvenle ezer, palet_52-only. */
.p52-topbar-actions.hum-bar .hum-pill { height:30px; padding:0 13px; font-size:12px; font-weight:600; letter-spacing:.1px; border-radius:7px; border-width:1px; gap:6px; }
.p52-topbar-actions.hum-bar .hum-pill i { font-size:13px; }
.p52-topbar-actions.hum-bar .hum-card { width:30px; height:30px; border-radius:8px; border-width:1px; }
.p52-topbar-actions.hum-bar .hum-card i { font-size:15px; }
.p52-topbar-actions.hum-bar .hum-card .favori-badge,
.p52-topbar-actions.hum-bar .hum-card .badge { min-width:15px; height:15px; padding:0 4px; font-size:9px; top:-5px; right:-5px; border-width:1.5px; }
/* pill/kart görünümü hum-* ile gelir (beyaz) → koyu bar üstünde tam kontrast */

/* 2) MAIN SATIR SAĞI — Bölge Seçici + Arama kutusu, sağa yaslı (Sipariş Asistanı KALDIRILDI: sitede yüzen chatbot var) */
.p52-main-col { display:flex; align-items:center; }
.p52-main-right { justify-content:flex-end; gap:12px; width:100%; flex-wrap:nowrap; }
/* BÖLGE SEÇİCİ (nav'dan MAIN satıra taşındı): nav genişlik formülünü (min(408,calc(100%-670))) + margin-left:auto
   main-row bağlamı için EZ → esnek 330px + arama ile hizalı 46px yükseklik. Görsel (silver border + "Buradan
   Başla" CTA) .p52-nav-bolge class'ından gelir; burada YALNIZ konum/boyut. Özgüllük .p52-main-right .p52-nav-bolge
   (0,2,0) > taban .p52-nav-bolge (0,1,0) → güvenle ezer. min-width:270 → "Bölge seçiniz"+"Buradan Başla" hep sığar. */
.p52-main-right .p52-nav-bolge { margin:0; flex:0 1 330px; min-width:270px; width:auto; max-width:none; }
.p52-main-right .p52-nav-bolge .bolge-secici-btn { height:46px; }
/* Arama kutusu: beyaz, ince border, SAĞDA büyüteç (sol ikon gizli). .p52-main-col prefix → palet_8 taban
   .search-form kurallarını özgüllük+sıra ile güvenle ezer (palet_52-only class). Bölge eklenince 380px'e daraldı. */
.p52-main-col .p52-main-search { flex:0 1 380px; min-width:200px; padding:0; }
.p52-main-col .p52-main-search .input-group { display:flex; align-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; height:46px; box-shadow:none; }
.p52-main-col .p52-main-search .input-group:focus-within { border-color:var(--primary-green,#16a34a); box-shadow:0 0 0 3px rgba(22,163,74,.12); }
.p52-main-col .p52-main-search .search-icon { display:none; }
.p52-main-col .p52-main-search .form-control { border:none; box-shadow:none; height:100%; padding:0 4px 0 16px; font-size:14px; background:transparent; color:#2b3242; }
.p52-main-col .p52-main-search .form-control:focus { box-shadow:none; }
.p52-main-col .p52-main-search .form-control::placeholder { color:#9aa2ad; }
.p52-main-col .p52-main-search .btn { background:transparent; border:none; color:#9aa2ad; width:46px; height:100%; min-width:46px; display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:none; padding:0; }
.p52-main-col .p52-main-search .btn:hover { color:var(--primary-green,#16a34a); }
/* Mobil aksiyon ikonları (sepet + hamburger) — sağda */
.p52-main-right .p52-m-icon { position:relative; display:inline-flex; align-items:center; }
@media (max-width:991.98px){ .p52-main-right { gap:8px; } }

/* Dil kartı: SABİT KÜÇÜK bayrak chip'i (fill/kırmızı-kare çok büyük çıkıyordu) → 30px beyaz kartta ortalı 20x14
   bayrak + ince kenar halkası. Kart .hum-card center-flex → bayrak otomatik ortalı. Sabit px → tüm cihazlarda
   aynı (üst bar zaten d-lg-flex, masaüstü). NOT: height:100% yapılamaz — background span'in intrinsic yüksekliği
   yoktur (auto→0 = görünmez); bu yüzden sabit yükseklik. */
.p52-topbar-actions.hum-bar .hum-dil > .hum-dil-bayrak { width:20px; height:14px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.10); }
.p52-topbar-actions.hum-bar .hum-dil { padding:0; }

/* 3) MENÜ KONUMU (Tema → Menü Konumu: sol/orta/sag) — palet_52 nav'ı artık YALNIZ menü (bölge main satıra taşındı).
   Taban palet_8 kuralı `.navbar-nav{flex:0 1 auto}` = içerik-genişliği → menü hep solda, justify-content-center
   ETKİSİZ kalıyordu. navbar-nav'ı FULL-WIDTH yap → $_menu_konum_cls (justify-content-{start|center|end}, ul'de)
   menüyü sol/orta/sağ hizalar. Scope `.navbar-nav.p52-nav-menu` (yalnız palet_52; özgüllük 0,5,0 > taban 0,4,0)
   → GERÇEK palet_8 (nav'da arama var, menü içerik-genişliği kalmalı) ETKİLENMEZ. Tüm masaüstünde geçerli. */
[data-header-palet="palet_8"] .site-header .main-nav .navbar-nav.p52-nav-menu { flex: 1 1 auto; }

/* ============================================================================
   PALET 52 — KURUMSAL BİRLEŞİK BAR (Bölge | Buradan Başla | Arama)  — görsele uygun redesign
   Tek beyaz yuvarlak kapsayıcı + ince inset dikey ayraçlar; orta "Buradan Başla" krem/altın çerçeveli CTA.
   Yalnız .p52-unibar (palet_52). Eski iki-ayrı-kutu görünümünü sıra+özgüllük ile ezer. Yedek: yedek/p52-kurumsal-oncesi/.
   ============================================================================ */
/* AKSİYON KOLONU sağ kenara ulaşsın: palet_8 header'da logo kolonu içerik-genişliğinde + palet_52'de ortadaki
   arama kolonu d-none (arama unibar'a taşındı) → col-lg-9 container sağına ULAŞMIYOR (sağda ~163px boşluk).
   Aksiyon kolonunu flex:1 yap → logo'dan sonraki tüm alanı doldursun; unibar sağa yaslı → container sağına değer.
   Özgüllük .header-main .row > .p52-main-col (0,3,0) > Bootstrap .col-lg-9 (0,1,0). Yalnız masaüstü + palet_52. */
@media (min-width: 992px) {
    .header-main .row > .p52-main-col { flex: 1 1 auto; width: auto; max-width: none; }
}
.p52-main-right .p52-unibar {
    display: flex; align-items: stretch; flex: 0 1 760px; min-width: 0; margin-left: auto;
    background: #fff; border: 1px solid #e6e8ec; border-radius: 14px; box-shadow: 0 6px 22px rgba(15,23,42,.07);
}
/* Bölge segmenti — kapsayıcı çerçeveyi kullanır; kendi border/gölge/animasyonu YOK (0,3,0 taban ezer) */
.p52-main-col .p52-unibar .p52-nav-bolge { flex: 0 0 auto; min-width: 0; margin: 0; width: auto; max-width: none; display: flex; }
.p52-main-col .p52-unibar .bolge-secici-btn {
    height: 52px; border: none; background: transparent; box-shadow: none; border-radius: 14px 0 0 14px;
    padding: 0 18px; display: flex; align-items: center; gap: 10px; animation: none;
}
.p52-main-col .p52-unibar .bolge-secici-btn::after { display: none; }
.p52-main-col .p52-unibar .bolge-secici-btn:hover,
.p52-main-col .p52-unibar .bolge-secici-btn.active { background: #fafbfc; box-shadow: none; border: none; border-radius: 14px 0 0 14px; }
.p52-main-col .p52-unibar .bolge-icon { color: #1e293b; font-size: 17px; }
.p52-main-col .p52-unibar .bolge-icon i { animation: none; }
.p52-main-col .p52-unibar .bolge-value { color: #334155; font-size: 14px; font-weight: 500; white-space: nowrap; }
.p52-main-col .p52-unibar .bolge-secici-btn.secildi .bolge-value { color: #1e293b; font-weight: 600; }
/* Ayraç A: "Bölge seçiniz" ↔ CTA (inset dikey çizgi) */
.p52-main-col .p52-unibar .p52-sep { flex: 0 0 auto; width: 1px; height: 26px; align-self: center; background: #e6e8ec; margin: 0 14px; }
/* Buradan Başla — krem/altın çerçeveli belirgin CTA (görsel) */
.p52-main-col .p52-unibar .p52-cta {
    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; margin: 0;
    background: #faf7ef; border: 1px solid #d9c28a; border-radius: 9px; padding: 8px 15px;
    color: #1f2937; font-size: 13px; font-weight: 700; letter-spacing: .2px; white-space: nowrap;
}
.p52-main-col .p52-unibar .p52-cta-ok { color: #1f2937; font-size: 13px; animation: none; }
.p52-main-col .p52-unibar .bolge-secici-btn:hover .p52-cta { background: #f6efdf; border-color: #cdb069; }
.p52-main-col .p52-unibar .bolge-arrow { color: #94a3b8; margin-left: 12px; }
/* Ayraç B: Bölge ↔ Arama (search soluna inset dikey çizgi) + arama segmenti şeffaf */
.p52-main-col .p52-unibar .p52-main-search { position: relative; flex: 1 1 auto; min-width: 180px; padding: 0; margin: 0 0 0 1px; }
.p52-main-col .p52-unibar .p52-main-search::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 26px; background: #e6e8ec; }
.p52-main-col .p52-unibar .p52-main-search .input-group { border: none; border-radius: 0 14px 14px 0; background: transparent; height: 52px; box-shadow: none; }
.p52-main-col .p52-unibar .p52-main-search .input-group:focus-within { box-shadow: none; border: none; }
.p52-main-col .p52-unibar .p52-main-search .search-icon { display: none; }
.p52-main-col .p52-unibar .p52-main-search .form-control { border: none; background: transparent; height: 100%; padding: 0 6px 0 20px; font-size: 14px; box-shadow: none; }
.p52-main-col .p52-unibar .p52-main-search .btn { background: transparent; border: none; color: #1e293b; width: 54px; min-width: 54px; height: 100%; font-size: 17px; box-shadow: none; padding: 0; }
.p52-main-col .p52-unibar .p52-main-search .btn:hover { color: #000; }
/* Dropdown: temiz yüzen kart (birleşik bar altında) */
.p52-main-col .p52-unibar .bolge-dropdown-menu { border: 1px solid #e6e8ec; border-radius: 12px; box-shadow: 0 15px 40px rgba(15,23,42,.14); top: calc(100% + 8px); }

/* ==================== SLIDER: BANNER PARITE EKLERI ====================
   panel/slider.php slayt editoru banner ile AYNI yardimcilari kullanir
   (banner_buton_stil / banner_metin_stil / banner_bosluk_stil / banner_efekt_html).
   Bu blok, o yardimcilarin urettigi sinif ve degiskenleri slider yuzeyine baglar.
   Hicbir eski kural DEGISTIRILMEDI; yalnizca yeni secici eklendi. */

/* --- Buton varyantlari (bcta-*): slider butonu banner butonuyla ayni gorunume kavusur --- */
.slider-butonlar .slider-btn.bcta-gradyan,
.slider-butonlar .slider-btn.bcta-dolu {
    background: var(--btn-bg, linear-gradient(135deg, #2ECC71 0%, #27AE60 100%));
    color: var(--btn-renk, #fff);
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(var(--btn-golge, 46,204,113), .35);
    border-radius: var(--btn-radius, 8px);
}
.slider-butonlar .slider-btn.bcta-gradyan:hover,
.slider-butonlar .slider-btn.bcta-dolu:hover {
    background: var(--btn-hbg, var(--btn-bg, linear-gradient(135deg, #27AE60, #1E8449)));
    color: var(--btn-hrenk, var(--btn-renk, #fff));
    opacity: 1;
}
.slider-butonlar .slider-btn.bcta-outline {
    background: transparent;
    color: var(--btn-accent, #fff);
    border: 2px solid var(--btn-accent, #fff);
    box-shadow: none;
    border-radius: var(--btn-radius, 8px);
}
.slider-butonlar .slider-btn.bcta-outline:hover {
    /* Ö6: panelden girilen hover renkleri OKUNMALI. Ayrica slider'da ayri bir "buton yazi
       rengi" alani yok (--btn-renk yalniz dolu/gradyan'da kontrastla set edilir) -> outline
       hover'inda sabit #0f172a kalirsa KOYU accent seceni koyu-ustune-koyu yaziya mahkum eder.
       Zincir: hover_renk -> (yoksa) otomatik kontrast -> (yoksa) koyu. */
    background: var(--btn-hbg, var(--btn-accent, #fff));
    color: var(--btn-hrenk, var(--btn-kontrast, #0f172a));
    opacity: 1;
}
.slider-butonlar .slider-btn.bcta-cam {
    background: rgba(255,255,255,0.18);
    color: var(--btn-renk, #fff);
    border: 1px solid rgba(255,255,255,0.40);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: none;
    border-radius: var(--btn-radius, 8px);
}
.slider-butonlar .slider-btn.bcta-cam:hover {
    /* Ö6: panelden girilen hover renkleri cam varyantinda da okunmali */
    background: var(--btn-hbg, rgba(255,255,255,0.32));
    color: var(--btn-hrenk, var(--btn-renk, #fff));
    opacity: 1;
}
.slider-butonlar .slider-btn.bcta-minimal {
    background: transparent;
    color: var(--btn-accent, #fff);
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding-left: 4px;
    padding-right: 4px;
}
.slider-butonlar .slider-btn.bcta-minimal:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--btn-hrenk, var(--btn-accent, #fff));
    opacity: 1;
    transform: none;
}

/* --- Slayt gorseli: hover efektleri (banner_hover_efekt karsiligi, slider yuzeyine ozel) --- */
.slider-wrapper .carousel-item img[class*="slider-hover-"] { transition: transform .4s ease, filter .4s ease; }
.slider-wrapper .carousel-item img.slider-hover-zoom:hover      { transform: scale(1.04); }
.slider-wrapper .carousel-item img.slider-hover-parlaklik:hover { filter: brightness(1.15); }
.slider-wrapper .carousel-item img.slider-hover-karartma:hover  { filter: brightness(0.85); }
/* "yukari": translateY, tam-genislik slaytta gorselin ustunu kirpip altta bosluk aciyordu
   (.slider-wrapper + .carousel-inner overflow:hidden). Kirpilmayan hafif bir buyutme ile
   ayni "one cikma" hissi verilir. */
.slider-wrapper .carousel-item img.slider-hover-yukari:hover    { transform: scale(1.02) translateY(-4px); }

/* --- Golge efektleri ---
   DIKKAT: box-shadow'u GORSELE vermek tam-genislik sliderda GORUNMEZ; .slider-wrapper ve
   Bootstrap .carousel-inner overflow:hidden oldugu icin disa dogru golge her zaman kirpilir.
   Bu yuzden golge, gercekten gorunur oldugu yere — yazi/buton kutusuna — uygulanir. */
.slider-wrapper .carousel-item .slider-icerik-box.slider-golge-hafif { box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.slider-wrapper .carousel-item .slider-icerik-box.slider-golge-orta  { box-shadow: 0 4px 16px rgba(0,0,0,0.28); }
.slider-wrapper .carousel-item .slider-icerik-box.slider-golge-guclu { box-shadow: 0 8px 30px rgba(0,0,0,0.42); }

/* --- k5: mobil buton kurali bcta varyantlarini da kapsasin ---
   Temel .slider-btn mobil kurali (0,1,0) ozgullugu, .slider-butonlar .slider-btn.bcta-* (0,3,0)
   tarafindan eziliyordu -> telefonda buton kosesi/dolgusu masaustu degerinde kaliyordu. */
@media (max-width: 767.98px) {
    .slider-butonlar .slider-btn[class*="bcta-"] {
        padding: 7px 14px;
        border-radius: var(--btn-radius, 6px);
    }
}

/* --- Slayt uzeri animasyon efekti (banner_efekt_html) slaytin TAMAMINI kaplasin --- */
.slider-wrapper .carousel-item { position: relative; }
.slider-wrapper .carousel-item > .banner-efekt { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* --- Mobil: ic bosluk ayarlanmadiysa mevcut responsive degerler korunur (fallback'ler
       index.php'de uretilir; burada ek kural GEREKMEZ). --- */


/* ===== HIZLI ÖDEME (mailorder) — footer bar linki =====
   Mevcut .footer-bar-link stilinin ÜZERİNE ince bir vurgu ekler; taban sınıf değişmez. */
.footer-bar-link-odeme { font-weight: 600; }
.footer-bar-link-odeme i { color: #f59e0b; }

/* ============================================================================
   ÜST ŞERİT SABİT LİNKLERİ (.tb-sl) — 16.09.2026
   Panel: Tema > Sabit Butonlar > «Header Sabit Linkler» (PER-PALET veri).
   Bu kuralların tamamı `.top-bar` içindeki YENİ markup'a bağlıdır; palette link
   tanımlanmadıysa hiçbir öğe basılmaz ve tek bir kural bile devreye girmez →
   mevcut paletler/tasarımlar ETKİLENMEZ (§13: eski style.css ile de bozulma yok,
   yalnız pill görünümü yerine düz bağlantı görünür).
   ============================================================================ */
.top-bar .tb-sl-grup { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
/* 17.09.2026 (kullanıcı isteği): daha GENİŞ/BÜYÜK buton + daha DÜŞÜK yarıçap = kurumsal duruş.
   Ölçüler: 34px yükseklik (şerit 45px → 50px), yarıçap 8px (eski 999px tam yuvarlaktı),
   ikon 24px / 6px yarıçap (eski 22px daire), yazı 13px — üst şeridin kendi `font-size:13px`
   değeriyle aynı. `height` + `box-sizing` bilerek: dolgu değişse de yükseklik sabit kalır. */
.top-bar .tb-sl {
    display: inline-flex; align-items: center; gap: 9px;
    max-width: 280px; height: 34px; padding: 0 15px 0 5px; box-sizing: border-box;
    background: #fff; border: 1px solid rgba(0, 0, 0, .10); border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.top-bar .tb-sl.tb-sl-yazi-tek { padding: 0 15px; }   /* ikonsuz satır: sol dolgu dengelenir */
.top-bar .tb-sl:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, .10); border-color: rgba(0, 0, 0, .16); transform: translateY(-1px); text-decoration: none; }
.top-bar .tb-sl .tb-sl-ikon { width: 24px; height: 24px; flex: 0 0 auto; display: block; border-radius: 6px; object-fit: cover; background: #fff; }

/* DİL SEÇİCİ YUVASI — header.php'de Sipariş Takibi'nin hemen ardındadır (17.09.2026).
   🔴 Açılır liste hizası: js/translate-widget.js listeyi `left: 0` ile açar; widget şeridin
   SAĞ ucuna taşındığı için o hizayla liste ekran dışına taşıp sayfaya yatay kaydırma ekler
   (palet_11 turunda ölçülmüş aynı tuzak). Yuvaya özgü bu kural onu sağa hizalar; yuvası
   olmayan eski markup'ta kural hiç eşleşmez (§13). */
.top-bar .tb-dil-yuva { display: inline-flex; align-items: center; }
.top-bar .tb-dil-yuva .translate-dropdown { left: auto; right: 0; }
.top-bar .tb-sl .tb-sl-yazi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Yalnız ikon" seçildiğinde metin EKRANDAN kalkar ama ekran okuyucuda kalır.
   Bootstrap'in .visually-hidden'ı zaten bunu yapar; CDN gelmezse diye kapsamlı kopya. */
.top-bar .tb-sl .tb-sl-yazi.visually-hidden {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
/* 🔴 PALET CSS SIZINTISI KAPISI — beyaz-üstü-beyaz yazı tuzağı.
   Paletlerin çoğu `[data-header-palet="palet_N"] .top-bar a { color: ... !important }`
   yazar (palet_5/10/13/16/18/19/21) ve bunların beşi KOYU üst şerit için AÇIK renktir.
   8.si palet_11'dir: `css/palet11-header.css:65` `!important` TAŞIMAZ ama style.css'ten SONRA
   yüklendiği için kaynak sırasıyla kazanırdı — bu yüzden aşağıdaki kural hem !important hem
   yüksek özgüllük taşır.
   Pill zemini beyaz olduğu için o kurallar sızsaydı yazı okunamazdı. Aşağıdaki iki kural
   0,3,1 özgüllük + !important ile hepsini yener; `css/palet11-header.css` style.css'ten
   SONRA yüklendiği için yalnız kaynak sırasına güvenmek YETMEZ.
   Renk/zemin CSS DEĞİŞKENİNE bağlıdır: `!important` + yüksek özgüllük yöneticinin «Özel CSS»
   ile rengi değiştirmesini engellerdi ("yazdım ama olmadı" tuzağı); değişkenle özgüllük savaşına
   girmeden ezilebilir:  :root{ --tb-sl-renk:#fff; --tb-sl-zemin:#111; } */
.top-bar .tb-sl-grup a.tb-sl,
.top-bar .tb-sl-grup a.tb-sl:hover,
.top-bar .tb-sl-grup a.tb-sl:focus {
    color: var(--tb-sl-renk, #1f2937) !important;
    background: var(--tb-sl-zemin, #fff) !important;
}