/* =============================================
   FlowerEast - Custom CSS Overrides
   ============================================= */

/* ---- Logo ----
   Logo bir GORSEL DEGIL, metin: 'Fraunces' ile cizilen bir wordmark. Bu yuzden
   buyutmenin cozunurluk maliyeti yok — png/svg secimi, retina icin 2x dosya gibi bir
   konu burada olusmuyor, her boyutta vektorel keskinlikte cikiyor.

   .fe-logo         : temel gorunum (renk, font). Footer bunu SADE haliyle kullanir.
   .fe-logo--header : header'a ozel boyut. Footer'i etkilememesi icin ayri bir sinif —
                      temel font-size degistirilseydi footer da buyurdu.

   Boyut tek kaynaktan: --fe-logo-h (masaustu) ve --fe-logo-h-mobile. Header'daki uc
   ornek (masaustu header, mobil yapiskan bar, mobil menu basligi) ayni degiskenleri
   okur; view'larda satir ici font-size YOK. */
:root {
    /* Masaustu: 1.9rem -> 2.6rem (+%37).
       Header yuksekligini ARTIRMIYOR: ayni satirdaki katalog butonu ve arama kutusu
       42px; line-height:1 ile logonun kutu yuksekligi 41.6px, yani hala satirin en
       uzun elemani DEGIL. Satir yuksekligini onlar belirlemeye devam ediyor. */
    --fe-logo-h: 2.6rem;

    /* Mobil AYRI ayarlanabilir. clamp: dar telefonda tasma/sarma olmasin diye taban
       ve tavan sabit; arada ekran genisligiyle olceklenir.
         320px -> 1.75rem   360px -> 1.75rem   390px -> ~1.80rem   >=454px -> 2.1rem
       Onceki degerden (clamp(1.6rem, 7vw, 1.9rem)) her genislikte bir kademe buyuk.

       HEADER YUKSEKLIGI ARTMIYOR: logo line-height:1 ile ciziliyor, yani kutu
       yuksekligi = font-size. Tavan 1.9rem (30.4px) -> 2.1rem (33.6px) buyudugu icin
       header-bottom'in dikey ic boslugu mobilde 8px'ten 6px'e cekildi (asagida);
       satirin toplam yuksekligi 46.4px -> 45.6px, yani artmiyor.

       Logo bu satirin EN UZUN elemani: aksiyon ikonlari ~22px, hamburger 20px.
       Yatay sigma icin ayni blokta ikon araliklari da daraltildi ve tekrar eden
       "mobile-promotion" metni gizlendi (gerekcesi orada). */
    --fe-logo-h-mobile: clamp(1.75rem, 7.4vw, 2.1rem);
}

.fe-logo {
    font-family: 'Fraunces', serif;
    font-size: 1.9rem;
    line-height: 1;
    text-decoration: none !important;
    display: inline-block;
    white-space: nowrap;   /* "Flower" / "East" iki satira BOLUNMESIN */
}
.fe-logo-flower { color: #2e7d5b; font-weight: 700; }
/* East LACIVERT: urun etiketlerindeki basili logo (yesil Flower + lacivert East) ile
   site ayni kimligi tasisin. Favicon'daki lacivert cicek de bu renkte. */
/* East DUZ (italik degil) ve Flower ile ayni kalinlikta — basili logodaki gibi. */
.fe-logo-east   { color: #1f2b26; font-style: normal; font-weight: 700; }
.fe-logo:hover .fe-logo-east { color: #2e7d5b; }

/* ---- Logo + slogan ----
   Slogan ("Uluslararasi Cicek Gonderimi") ana sayfada hero basligiydi ve acilista
   bannerlarin ustunde bir metin yigini olusturuyordu. Cumle sayfaya degil MARKAYA ait;
   logonun altinda, her sayfada, tek satirda duruyor. */
.fe-logo-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; }
.fe-logo-mark { display: block; line-height: 1; }
.fe-logo-slogan {
    display: block;
    margin-top: 3px;
    /* Logonun puntosuna GORE olceklenir (em): logo kirilime gore kuculdugunde
       slogan da onunla birlikte kuculur, oran sabit kalir. */
    font-family: 'Figtree', -apple-system, 'Segoe UI', sans-serif;
    font-size: .3em;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8a9199;
    white-space: nowrap;
}
.fe-logo:hover .fe-logo-slogan { color: var(--fe-green-deep); }

.fe-logo--header { font-size: var(--fe-logo-h); }

/* Masaustu header ile mobil header ayni sinifi kullaniyor ama ayni anda GORUNMUYOR:
   masaustu ornek d-none d-lg-block, mobil ornekler d-lg-none. Esik bu yuzden lg. */
@media (max-width: 991.98px) {
    .fe-logo--header { font-size: var(--fe-logo-h-mobile); }
}

/* =============================================
   FOOTER

   Kolon oranlari view'da (Bootstrap sinif olarak) duruyor: lg 4/2/2/4, md 6/6/6/6,
   sm ve altinda tam genislik yigin. Burada yalnizca izgaranin anlatamadigi seyler var:
   mobil hizalama ve marka vurgusu.
   ============================================= */

/* Platform isletmecisi vurgusu (alt seritte "Bitech Yazilim" / "Bitech Software").
   Cevresindeki telif metni soluk gri; marka adi ayni satirda okunur kalsin diye
   markanin yesiline ve daha kalin bir agirliga aliniyor. Renk YENIDEN TANIMLANMIYOR,
   sitenin --fe-green degiskeninden geliyor. */
.fe-footer-brand {
    color: var(--fe-green);
    font-weight: 700;
    letter-spacing: .2px;
}

.fe-footer-payment { max-width: 100%; height: auto; }

/* ---- Mobil: icerik ORTALI ----
   Masaustunde kolonlar sola yasli kalir (degisiklik yok). Mobilde kolonlar alt alta
   tam genislige dustugu icin sola yasli metin genis bos sag bosluk birakiyordu;
   yigilmis bir footer'da ortali duzen dengeli duruyor.

   Esik md (767.98px): kolonlarin 2x2 izgaradan tek sutuna dustugu nokta. */
@media (max-width: 767.98px) {
    .fe-footer-mid { text-align: center; }

    /* Liste madde girintisi ortalamayi bozar — yigilmis halde sifirlanir. */
    .fe-footer-mid .footer-list { padding-left: 0; list-style: none; }

    /* Sosyal ikonlar ve odeme gorseli de satirin ortasina gelsin. */
    .fe-footer-mid .mobile-social-icon { text-align: center; }
    .fe-footer-mid .fe-footer-payment { display: inline-block; }

    /* Yasal link seridi: masaustunde sola yasli akiyor, mobilde ortalanir. */
    .fe-footer-legal { justify-content: center; }
}

/* ---- Satir ici ulke bayragi ----
   Metnin yanina giren kucuk bayrak. Ayni olculer _Layout icinde BES ayri yerde
   satir ici style olarak tekrarliyordu (ust bar secili ulke, katalog modali ulke
   listesi, mobil menu secili ulke, mobil menu ulke listesi, footer teslimat
   ulkeleri) — biri degistiginde digerleri sessizce ayrisirdi.

   Degerler birebir tasindi, gorunum degismedi.

   NOT: sitedeki her bayrak bu olcude DEGIL. Ana sayfa kahramani (38px), urun
   detayi (18px) ve ulke secim modali (32x48) bilincli olarak farkli boyutlarda;
   onlar bu sinifa alinmadi, aksi halde gorunumleri degisirdi. */
.fe-flag-inline {
    height: 14px;
    width: 20px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
}

/* Iki yaninda da bosluk isteyen tek yer (mobil menude secili ulke satiri). */
.fe-flag-inline--spaced { margin: 0 4px; }

/* ---- Category dropdown z-index fix ---- */
.categori-dropdown-wrap {
    z-index: 9999 !important;
}
.sub-menu {
    z-index: 9999 !important;
}

/* ---- Search AJAX dropdown ---- */
.fe-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    z-index: 9999;
    max-height: 380px;
    overflow-y: auto;
    display: none;
}
.fe-search-results.show { display: block; }
.fe-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: #333;
    transition: background .15s;
}
.fe-search-item:hover { background: #f9f9f9; color: #333; }
.fe-search-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.fe-search-item-info { flex: 1; min-width: 0; }
.fe-search-item-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-search-item-price { font-size: .82rem; color: #2E7D5B; font-weight: 700; }
.fe-search-empty { padding: 20px; text-align: center; color: #888; font-size: .9rem; }
.search-style-2 { position: relative; }

/* ---- Global Container ---- */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Brand / Price Color ---- */
:root {
    --fe-green: #2E7D5B;
    --fe-green-dark: #276b4e;

    /* KOYU TON — urun kartlarinda baslik, fiyat ve "Sepete Ekle" butonu icin.
       Renk UYDURULMADI: --fe-green ile AYNI ton ve AYNI doygunluk, yalnizca
       aciklik dusuruldu.
         --fe-green       #2E7D5B = hsl(152, 51%, 47.5%)
         --fe-green-deep  #1E5240 = hsl(152, 51%, 28%)
         ...-deep-hover   #17402F = hsl(152, 51%, 23%)

       NEDEN AYRI BIR DEGISKEN: --fe-green beyaz zeminde METIN icin yeterince
       koyu degil (kontrast 2.4:1, WCAG AA esigi 4.5:1 — buton zemini olarak
       kullanildiginda beyaz yazi da ayni sorunu yasiyordu). Koyu ton 6.3:1
       veriyor; marka rengi hicbir yerde DEGISMIYOR, yalnizca metin/zemin
       gerektiren yerlerde bu turevi kullaniliyor. */
    --fe-green-deep: #1E5240;
    --fe-green-deep-hover: #17402F;
}

/* ---- TEK EYLEM YESILI ----
   Tema (main.css) butonlarini kendi turkuazinda ciziyordu (#1e5240 / #17402f):
   .btn, .button, .btn-brand, .btn-fill-out, button[type=submit]. Sitenin geri
   kalaninda eylem rengi --fe-green-deep; sonuc, ayni sayfada uc farkli yesil
   (turkuaz sepet butonu, koyu yesil "Sepete Ekle", acik yesil cerez butonu).

   SECICILER TEMANINKIYLE BIREBIR AYNI OZGULLUKTE ve bu dosya main.css'ten sonra
   yukleniyor: yani yalnizca TEMANIN VARSAYILANI degisiyor. Temayi zaten ezen her
   kural (btn-primary !important, fe- siniflari, ".banner-big .btn" gibi iki
   sinifli seciciler) eskisi gibi kazaniyor. Bilerek dosyanin BASINDA: bu dosyada
   daha asagida yazilmis ayni ozgulluklu fe- kurallari da bunu ezebilsin. */
.btn, .button,
.btn-brand,
.btn-fill-out,
.btn-default,
button.submit, button[type='submit'] {
    background-color: var(--fe-green-deep);
    border-color: var(--fe-green-deep);
}
.btn:hover, .button:hover,
.btn-brand:hover,
.btn-fill-out:hover,
.btn-default:hover {
    background-color: var(--fe-green-deep-hover);
    border-color: var(--fe-green-deep-hover);
}
button.submit:hover, button[type='submit']:hover {
    background-color: var(--fe-green-deep-hover) !important;   /* tema de !important */
}

/* =============================================
   KATMAN OLCEGI (z-index)

   Sabit konumlu elemanlarin ust uste binme sirasi TEK YERDE. Onceden her eleman
   kendi dosyasinda kendi sayisini tasiyordu (999, 9990, 9995, 9996, 10050, 10060)
   ve "bu sayi neyin ustunde/altinda" sorusunun cevabi hicbir yerde yazmiyordu;
   yeni bir eleman eklerken tek strateji buyuk bir sayi secmekti.

   Sira, KULLANICI ICIN aciliyet sirasidir — asagidan yukari:
     yuzen butonlar  : her zaman orada, en dusuk oncelik
     cerez seridi    : yasal, butonlari ortebilir
     cerez paneli    : seritten acilir, onu ortmeli
     bildirim (toast): kullanicinin AZ ONCEKI eylemine cevap
     modal           : cevap bekleyen tek sey; hepsinin ustunde
   ============================================= */
:root {
    --fe-z-float-stack: 9990;
    --fe-z-consent-bar: 9995;
    --fe-z-consent-modal: 9996;
    --fe-z-toast: 10050;
    --fe-z-modal: 10060;
}

/* =============================================
   SAG-ALT YUZEN BUTON YIGINI

   NEDEN TEK KAP: WhatsApp butonu ile "yukari cik" oku ayri ayri position:fixed
   idi (WhatsApp bottom/right 25px, ok bottom/right 30px) ve birbirinin UZERINE
   biniyordu. Ikisi de kendi bottom degerini tasidigi surece her yeni buton ayni
   hesabi elle yapmak zorunda kalirdi. Artik konumu YIGIN belirliyor; butonlarin
   kendi bottom/right degeri YOK, aralarindaki bosluk tek degiskenden geliyor.

   SIRA: WhatsApp en altta sabit, ok onun ustunde. Ok yalnizca sayfa kaydirilinca
   goruntulenir ama gorunmezken de yerini KORUR (opacity/visibility ile gizlenir,
   display:none degil) — yigin alt kenardan buyudugu icin WhatsApp zaten kaymazdi;
   bu ayrica okun belirmesinde de bir sicrama olmamasini garantiler.

   --fe-float-offset-bottom: alttan yer kaplayan gecici bir seride (cerez onayi)
   yol acmak icin. Serit acilinca kendi yuksekligini buraya yazar, kapaninca
   sifirlar (bkz. _CookieConsent.cshtml). Ilerde baska bir alt serit eklenirse
   ayni degiskeni kullanir — yigin kimin actigini bilmek zorunda kalmaz.
   ============================================= */
:root {
    --fe-float-edge: 25px;   /* yiginin ekran kenarina uzakligi */
    --fe-float-gap: 12px;    /* butonlar ARASINDAKI tek bosluk kaynagi */
    --fe-float-size: 54px;
    --fe-float-offset-bottom: 0px;
}

.fe-floating-support {
    position: fixed;
    right: var(--fe-float-edge);
    bottom: calc(var(--fe-float-edge)
                 + var(--fe-float-offset-bottom)
                 + env(safe-area-inset-bottom, 0px));
    z-index: var(--fe-z-float-stack);
    display: flex;
    flex-direction: column;
    gap: var(--fe-float-gap);
    transition: bottom .25s ease;
}

.fe-float-btn {
    width: var(--fe-float-size);
    height: var(--fe-float-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 22px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease, visibility .25s ease;
    position: relative;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.fe-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
/* SVG rengi currentColor: .fe-float-btn'daki beyaz metin rengini izler. */
.fe-float-btn svg { display: block; }

.fe-float-whatsapp { background-color: #25D366; }
.fe-float-whatsapp:hover { background-color: #1ebe5a; }

/* ---- Yukari cik oku ----
   Sayfa basindayken GIZLI ama yer kaplar; boylece belirdiginde yigin zipla­maz. */
.fe-float-top {
    background-color: #1e5240;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.fe-float-top:hover { background-color: #17402f; }
.fe-floating-support.is-scrolled .fe-float-top {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Telefonda "yukari" oku HIC cizilmez: WhatsApp ile ust uste iki daire, iki sutunlu
   urun izgarasinda sag alttaki kartin "Sepete Ekle" butonunu kapatiyordu. Telefonda
   sayfa basina donmek zaten tek parmak hareketi; WhatsApp ise gercek bir iletisim
   kanali — ikisinden biri kalacaksa o kalir. */
@media (max-width: 767.98px) {
    .fe-float-top { display: none; }
}

.fe-float-tooltip {
    position: absolute;
    right: calc(var(--fe-float-size) + 10px);
    background: #333;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.fe-float-btn:hover .fe-float-tooltip { opacity: 1; }

/* Klavyeyle gezenler icin gorunur odak halkasi — :hover'in klavye karsiligi yok. */
.fe-float-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(37,211,102,.45);
}

/* Mobil: butonlar kucultulup kenara yaklastirilir; ipucu balonu KALDIRILIR
   (dokunmatikte hover yok, sadece yer kaplardi). Alt kenar payi env() ile
   zaten guvenli alani hesaba katiyor — iOS Safari'nin alt arac cubugu. */
@media (max-width: 575.98px) {
    :root {
        --fe-float-edge: 14px;
        --fe-float-gap: 10px;
        --fe-float-size: 48px;
    }
    .fe-float-btn svg { width: 26px; height: 26px; }
    .fe-float-tooltip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fe-float-btn, .fe-float-tooltip, .fe-floating-support { transition: none; }
    .fe-float-btn:hover { transform: none; }
}

/* Fiyat metni marka yesili. Indirim rozeti bu kuralin DISINDA: rozet .product-price
   icinde bir span oldugu icin buradaki !important onun beyaz yazisini eziyor, kirmizi
   zemine yesil yazi cikiyordu. Ustu cizili fiyat gibi rozet de haric tutuluyor. */
.text-brand,
.product-price span:first-child:not(.fe-discount-badge),
.product-price > span:not(.old-price):not(.fe-old-price):not(.fe-discount-badge) {
    color: var(--fe-green) !important;
    font-weight: 700;
}

/* ---- Buttons ---- */
.btn-primary {
    background-color: var(--fe-green) !important;
    border-color: var(--fe-green) !important;
    color: #fff !important;
    transition: background-color .25s, transform .2s;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--fe-green-dark) !important;
    border-color: var(--fe-green-dark) !important;
    color: #fff !important;
}
.btn-outline-secondary:hover {
    background-color: var(--fe-green) !important;
    border-color: var(--fe-green) !important;
    color: #fff !important;
}

/* ---- Product Price (large) ---- */
.product-price .text-brand,
.detail-info .product-price span {
    color: var(--fe-green) !important;
    font-weight: 900;
}
/* Urun detayindaki fiyat NOTR — kartlardaki fiyatla ayni ton (bkz. renk hiyerarsisi:
   yesil yalnizca tiklanacak seyde). Eskiden #2E7D5B idi: beyaz zeminde 2.4:1 ile hem
   okunmasi zor hem de hemen altindaki yesil "Sepete Ekle" ile yaris halindeydi. */
#product-price {
    color: #1f2b26 !important;
    font-weight: 800;
}

/* ---- Product Card ---- */
.product-cart-wrap {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    transition: box-shadow .25s, transform .25s;
    background: #fff;
}
.product-cart-wrap:hover {
    box-shadow: 0 8px 24px rgba(46, 125, 91,.18);
    transform: translateY(-4px);
}
.product-content-wrap {
    padding: 15px;
}
.product-content-wrap h2 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}
.product-content-wrap h2 a {
    color: #333;
}
.product-content-wrap h2 a:hover {
    color: var(--fe-green);
}
.product-price {
    margin-bottom: 10px;
}
.product-price span {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fe-green);
}

/* ---- Action buttons (cart icon) ---- */
.product-action-1.show .action-btn {
    background-color: var(--fe-green) !important;
    border-color: var(--fe-green) !important;
    color: #fff !important;
}
.product-action-1 .action-btn:hover {
    background-color: var(--fe-green-dark) !important;
}

/* ---- Breadcrumb (tek satir, sikisik, okunur) ----
   ONCEKI HALIN IKI SORUNU VARDI:

   1) SILIKTI. Hem baglantilar hem son oge #9a9a9a idi; beyaz zeminde kontrast
      2.6:1, yani WCAG AA metin esiginin (4.5:1) altinda. Ekranda "yazi" degil
      "gri leke" gibi duruyordu.
   2) ORANSIZDI. Ayrac <span class="mx-2"> Bootstrap'ten 8px yatay margin,
      temadan ("​.page-header .breadcrumb span{padding:0 10px}") 10px ic bosluk
      aliyordu: her ayracin cevresinde ~18px bosluk. Uc ogeli bir serit ekranin
      yarisini kapliyor, ustelik 14px puntoyla sayfa basliginin yanina cikiyordu.

   Simdi: tek boşluk kaynagi (flex gap), okunur renkler, son oge vurgulu.

   TEK SATIR + YATAY KAYDIRMA: uzun urun adlarinda serit ikinci satira sarip
   dikey ritmi bozuyordu. nowrap ile tek satirda kaliyor, sigmadiginda serit
   KENDI ICINDE kayiyor — sayfa govdesi yatayda asla kaymaz. Kaydirma cubugu
   gizli: burada gorsel bir gurultu, parmak zaten kaydiriyor. */
.breadcrumb.fe-crumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;

    /* Tema seride "text-transform: capitalize" uyguluyor ve bu, urun adini
       OLDUGU GIBI yazmiyordu: "15 Kırmızı ve Beyaz Gül Buketi" seritte
       "15 Kırmızı Ve Beyaz Gül Buketi" olarak cikiyordu. Ad artik seridin en
       vurgulu ogesi oldugu icin bu yazim hatasi da gorunur hale geldi. */
    text-transform: none;

    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.breadcrumb.fe-crumb::-webkit-scrollbar { display: none; }

/* Temanin span ic boslugunu ve ikon ayracini kapat — bosluk artik ayractan
   geliyor, ayrac da metin ("›"). Ozgullugu ".page-header .breadcrumb span"
   (0,2,1) kuralini gecebilmek icin ayni yoldan aliyoruz. */
.page-header .breadcrumb.fe-crumb span,
.page-header .breadcrumb.fe-crumb a {
    padding: 0;
}
.page-header .breadcrumb.fe-crumb span::before {
    content: none !important;
}

.fe-crumb__link {
    color: #6b7280;            /* beyaz zeminde 5.0:1 — okunur, ama basligi ezmez */
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
.fe-crumb__link:hover,
.fe-crumb__link:focus {
    color: var(--fe-green-deep);
    text-decoration: underline;
}

/* Ayrac: tek bosluk kaynagi. Metinden acik ki hiyerarsiyi degil yolu gostersin. */
.fe-crumb__sep {
    color: #c8cdd4;
    margin: 0 8px;
    flex: none;
}

/* Bulunulan sayfa: seridin tek VURGULU ogesi.
   Kirpma yalnizca burada — yol ogeleri (Ana Sayfa / Urunler) kisa ve sabit,
   uzayan tek sey urun adidir. */
.fe-crumb__current {
    color: #1f2b26;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Guven rozetleri (urun detayi altindaki uclu satir) ----
   Ikon ile metin arasindaki bosluk artik gap'ten. Onceden ikonlarda "mr-5" vardi;
   uc rozetin ikisinin ikonu tema fontunda OLMADIGI icin (bkz. _FeIcon) o iki rozette
   bosluk bir hicin sagina uygulaniyor, satir kaymis gorunuyordu. */
.fe-trust {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fe-trust i,
.fe-trust .fe-icon {
    font-size: 1.05em;
    line-height: 1 !important;   /* uicons'un "line-height:0 !important" kuralini ez */
}

/* ---- Detail page ---- */
.title-detail {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: #222;
    margin-bottom: 15px;
}

/* ================================================================
   URUN DETAYI — YERLESIM IZGARASI (.fe-detail-grid)

   Bootstrap row yerine CSS grid kullanilmasinin TEK sebebi baslik:

     masaustu           mobil
     +--------+------+  +--------+
     |        | BASLIK|  | BASLIK |
     | GORSEL +------+  +--------+
     |        | BILGI |  | GORSEL |
     +--------+------+  +--------+
                        | BILGI  |
                        +--------+

   Ayni <h1> masaustunde sag ustte, mobilde en ustte. Bootstrap'te bunu yapmanin
   yolu basligi IKI KEZ basip birini gizlemekti (iki h1) — grid-template-areas ile
   tek elemani iki farkli hucreye yerlestirmek mumkun oldugu icin gerekmedi.
   ================================================================ */
.fe-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "title"
        "gallery"
        "info";
    gap: 0 30px;
}
.fe-detail-grid > .fe-detail-title { grid-area: title; }
.fe-detail-grid__gallery { grid-area: gallery; min-width: 0; }
.fe-detail-grid__info    { grid-area: info;    min-width: 0; }

@media (min-width: 992px) {
    .fe-detail-grid {
        grid-template-columns: 1fr 1fr;
        /* Baslik sag sutunun ILK satiri; gorsel sol sutunda iki satiri da kaplar
           (1fr / auto degil "auto 1fr": baslik kendi yuksekligi kadar yer alsin,
           kalan alani bilgi blogu doldursun). */
        grid-template-areas:
            "gallery title"
            "gallery info";
        grid-template-rows: auto 1fr;
    }
}

/* Mobilde gorsel ile bilgi blogu arasindaki nefes. Masaustunde ikisi yan yana
   oldugu icin gerekmiyor. */
@media (max-width: 991.98px) {
    .fe-detail-grid__gallery { margin-bottom: 30px; }
}

/* ---- Galeri ----
   Onceki hali satir ici "height:500px; object-fit:cover" idi. Iki sorun:
   mobilde gorsel ekranin neredeyse tamamini kapliyordu, ve dikey buket
   fotograflari KIRPILIYORDU (cover, kutuyu doldurmak icin tasan kismi atar).
   Simdi kare oranli cerceveli bir kutu ve contain — buketin tamami gorunur,
   bosluk beyaz zeminle dolar. */
.fe-gallery-main {
    aspect-ratio: 1 / 1;
    max-height: 520px;
    /* max-height kutuyu daraltinca (kare oran) kalan genislik sagda bosluk olarak
       kalirdi; kutu ORTALANIR. */
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8eaec;
    border-radius: 14px;
    padding: 10px;
}
.fe-gallery-main img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

.fe-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* <div> degil <button>: kucuk gorseller tiklanabilir ve klavyeyle gezilebilir
   olmali. Tema .btn kurallarina takilmasin diye kendi sinifi var. */
.thumb-item {
    width: 74px;
    height: 74px;
    padding: 4px;
    border: 1px solid #e8eaec;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s ease;
}
.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.thumb-item:hover { border-color: #c9cdd2; }
.thumb-item.thumb-active {
    border-color: var(--fe-green);
    box-shadow: 0 0 0 1px var(--fe-green);
}

/* Urun detay basligi. Olculer view'da satir ici duruyordu (style="font-size:26px;
   color:#222; ...") ve mobil kirilimi asagidaki media query'den, yani BASKA bir
   dosyadan geliyordu: ayni basligin iki olcusu iki ayri yerde, biri otekini
   sessizce ezebiliyordu. Ikisi de burada.

   Renk NOTR (#1f2b26): kartlardaki urun adiyla ayni ton. Once --fe-green-deep idi;
   renk hiyerarsisi karariyla (yesil = tiklanacak sey) kartlarda notre cekilmis,
   detay basligi geride kalmisti — ayni urun adi listede gri, detayda yesil. */
.fe-detail-title {
    /* rem tabani masaustunde 16px: 1.75rem = 28px. */
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.6px;
    color: #1f2b26;
    margin-bottom: 14px;
}

/* ---- Satin alma satiri: adet + Sepete Ekle ----
   Tek kutu, tek satir. Adet secici sabit genislikte kalir, buton kalan alani
   alir (flex:1) — boylece buton her urun sayfasinda AYNI noktada baslar.
   Zemin acik gri: satir sayfanin geri kalanindan ayrilir, "burada bir sey
   yapiliyor" demek icin cerceve ya da golge gerekmez. */
.fe-buybox {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    background: #f6f7f8;
    border-radius: 14px;
    padding: 10px;
}
.fe-buybox__label {
    font-size: .95rem;
    font-weight: 600;
    color: #4a4a4a;
    padding-left: 6px;
    flex: none;
}

/* Adet secici: beyaz hap. Sabit genislik degil, ICERIGI kadar — ama kucumesin
   diye butonlar ve alan sabit olculu. */
.fe-qty {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e4e6e8;
    border-radius: 10px;
    overflow: hidden;
    flex: none;
}
/* .btn DEGIL: temanin .btn kurali rengi #fff yapiyor ve beyaz zeminde
   gorunmez birakiyordu; onceki surumde bu, her iki butonda satir ici
   style="background:#fff;color:#222" ile eziliyordu. Kendi sinifi olunca
   ezilecek bir sey de kalmiyor. */
.fe-qty__btn {
    width: 40px;
    height: 44px;
    border: 0;
    background: #fff;
    color: #1f2b26;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.fe-qty__btn:hover { background: #f1f3f4; }
.fe-qty__input {
    width: 44px;
    height: 44px;
    border: 0;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: #1f2b26;
    background: #fff;
    padding: 0;
}
.fe-qty__input:focus { outline: none; }

/* Kucuk surum: sepet satirlarinda ve panelde. Ayni bilesen, bir kademe kucuk —
   orada sayac satirin baskin ogesi degil. */
.fe-qty--sm .fe-qty__btn { width: 30px; height: 34px; font-size: 17px; }
.fe-qty--sm .fe-qty__input { width: 34px; height: 34px; font-size: .95rem; }

/* Sepete Ekle: satirin baskin ogesi. Zemin kart butonlariyla AYNI koyu yesil —
   ayni eylem, ayni renk. */
.fe-buybox__add {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--fe-green-deep);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}
.fe-buybox__add:hover,
.fe-buybox__add:focus {
    background: var(--fe-green-deep-hover);
    color: #fff;
}
.fe-buybox__add[disabled] {
    opacity: .6;
    cursor: default;
}
.fe-buybox__add i {
    font-size: 1.05rem;
    line-height: 1 !important;   /* uicons'un "line-height:0 !important" kuralini ez */
}
.detail-info .short-desc p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
}
.detail-info .bt-1 {
    border-top: 1px solid #efefef;
}

/* ---- Gallery thumbnails ---- */
.slider-nav-thumbnails {
    margin-top: 12px;
}
.slider-nav-thumbnails img {
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .2s;
}
.slider-nav-thumbnails .slick-current img {
    border-color: var(--fe-green);
}

/* ---- Section titles ---- */
.section-title.style-2 h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
    position: relative;
    padding-bottom: 10px;
}
.section-title.style-2 h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--fe-green);
    border-radius: 2px;
}

/* ---- Shop filter bar ---- */
.shop-product-fillter {
    padding: 15px 0;
    border-bottom: 1px solid #efefef;
    margin-bottom: 25px;
}
.shop-product-fillter .btn-sm {
    padding: 5px 14px;
    font-size: .82rem;
    border-radius: 20px;
}

/* ================================================================
   HIZLI BAKIS — .fe-qv

   Kartin goz simgesine basilinca acilan pencere. Icerigin nereden geldigi
   Views/Shared/_QuickView.cshtml icinde anlatiliyor; burada yalnizca gorunum.

   NEDEN SOLDA GORSEL: pencerenin isi urunu GOSTERMEK. Kartta gorsel zaten
   kare ve kucuk; burada buyuk ve kirpilmamis halini vermek pencerenin tek
   varlik sebebi. Metin sagda, okuma sirasi bozulmuyor.
   ================================================================ */
.fe-qv .modal-dialog { max-width: 880px; }
.fe-qv .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(16, 24, 28, .22);
}
.fe-qv .modal-body { padding: 0; }

/* Kapatma dugmesi gorselin UZERINDE duruyor; beyaz bir daire icine alinmasi
   sart: cicek fotograflarinin ust kosesi cogu zaman acik renk ve cizgisel
   "x" oraya karisiyor. */
.fe-qv .btn-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    opacity: 1;
}
.fe-qv .btn-close:hover { background-color: #fff; }

.fe-qv__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}
.fe-qv__media { background: #f7f2ec; }
.fe-qv__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 480px;
    object-fit: cover;
}
.fe-qv__body {
    padding: 30px 32px;
    display: flex;
    flex-direction: column;
    /* Icerik dikey ORTALI: aciklamasi kisa bir urunde metin blogu tepede asili
       kalip sag sutunun altini bombos birakiyordu. */
    justify-content: center;
    min-width: 0;
}
.fe-qv__category {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fe-terra);
    margin-bottom: 8px;
}
/* Baslik notr lacivert — yesil YALNIZCA aksiyonda (kart hiyerarsisiyle ayni kural). */
.fe-qv__title {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2b26;
    margin: 0 0 12px;
}
.fe-qv__price { margin-bottom: 14px; }
.fe-qv__price > span:not(.old-price):not(.fe-old-price):not(.fe-discount-badge) {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f2b26;
}
/* #5f676b beyaz zeminde 5.92:1 — sitedeki diger govde metinleriyle ayni ton. */
.fe-qv__desc {
    font-size: .92rem;
    line-height: 1.7;
    color: #5f676b;
    margin: 0 0 20px;
    /* Uzun aciklamalar pencereyi ekrandan tasiriyordu; dort satirdan sonrasi
       kirpiliyor ve tamami icin "Urunu Incele" var. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fe-qv__cart { margin-bottom: 12px; }
/* Kopyalanan sepet dugmesi pencerede tam genislik: kartta kompakt hap olmasinin
   sebebi satir yuksekligiydi, burada oyle bir kisit yok ve birincil eylem bu. */
.fe-qv__cart .fe-qv__add {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: .95rem;
}
.fe-qv__detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid #e3e7ea;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    color: #1f2b26;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
.fe-qv__detail:hover { border-color: var(--fe-terra); color: var(--fe-terra-dark); }

/* ---- Acilis efekti ----
   Bootstrap'in kendi "fade" sinifi yalnizca saydamlik veriyor. Pencere buyuk
   oldugu icin tek basina birden beliriyormus gibi duruyor; kucuk bir olcek ve
   yukari kayma hareketi acilisi yumusatiyor.
   Sure 260ms: 200'un altinda fark edilmiyor, 350 ustunde bekletiyor. */
.fe-qv.fade .modal-dialog {
    transform: scale(.96) translateY(12px);
    transition: transform .26s cubic-bezier(.2, .8, .3, 1), opacity .26s ease;
    opacity: 0;
}
.fe-qv.show .modal-dialog {
    transform: none;
    opacity: 1;
}
/* Hareket hassasiyeti bildirilmisse pencere yerinde belirir. */
@media (prefers-reduced-motion: reduce) {
    .fe-qv.fade .modal-dialog { transition: none; transform: none; opacity: 1; }
}

@media (max-width: 767.98px) {
    /* Telefonda yan yana iki sutun 160px'lik bir gorsel demek; alt alta
       dizilince gorsel ise yarar bir boyuta cikiyor. */
    .fe-qv__grid { grid-template-columns: 1fr; }
    .fe-qv__media img { max-height: 260px; }
    .fe-qv__body { padding: 20px; }
    .fe-qv__title { font-size: 1.2rem; }
}

/* ================================================================
   KARTTAKI GOZ DUGMESI — .fe-qvbtn

   Urun listesinde bu bir <a> idi ve detay sayfasina gidiyordu; simdi hizli
   bakisi aciyor. <button> olmasi bilincli: sayfa degistirmeyen bir eylem
   baglanti degildir (klavye ve ekran okuyucu davranisi da farkli).
   Detay sayfasina giden baglanti KAYBOLMADI — gorselin kendisi ve baslik
   zaten oraya goturuyor, pencerede de "Urunu Incele" var.
   ================================================================ */
.fe-qvbtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.85);
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #1f2b26;
    box-shadow: 0 4px 16px rgba(16, 24, 28, .2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, transform .2s cubic-bezier(.2, .8, .3, 1), background .2s ease;
}
.fe-pcard:hover .fe-qvbtn,
.fe-qvbtn:focus-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.fe-qvbtn:hover { background: #fff; color: var(--fe-terra-dark); }
.fe-qvbtn:focus-visible { outline: 2px solid var(--fe-terra); outline-offset: 2px; }

/* DOKUNMATIKTE HEP GORUNUR: :hover dokunmatik ekranda ya hic olusmuyor ya da
   ilk dokunusu yutuyor. Gizli tutulsa telefonda hizli bakisa hic ulasilamazdi. */
@media (hover: none) {
    .fe-qvbtn { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
    .title-detail {
        font-size: 1.4rem;
    }
    /* Baslik gorselin USTUNDE oldugu icin (bkz. Product/Detail.cshtml) alt
       boslugu masaustundekinden az: hemen altindaki gorsel zaten nefes aligi
       veriyor, 14px orada bosluga bosluk ekliyordu. */
    .fe-detail-title {
        font-size: 1.55rem;      /* rem tabani mobilde 14px -> 21.7px */
        margin-bottom: 10px;
    }

    /* Gorsel mobilde kucultuldu: kare kutu ekranin tamamini kaplamasin, altindaki
       fiyat ve "Sepete Ekle" ilk ekranda gorunmeye baslasin. */
    .fe-gallery-main {
        max-height: 320px;
        border-radius: 12px;
        padding: 8px;
    }
    .thumb-item { width: 62px; height: 62px; }
    /* Kutu ortalandigi icin kucuk gorseller de onun altinda ortalanir. */
    .fe-gallery-thumbs { justify-content: center; }
    #product-price {
        font-size: 1.6rem !important;
    }

    /* Satin alma satiri mobilde: etiket zaten gizli (d-none d-lg-inline),
       kalan iki oge arasindaki bosluk ve ic bosluklar bir kademe daralir ki
       "Sepete Ekle" metni dar telefonda da tek satirda kalsin. */
    .fe-buybox { gap: 8px; padding: 8px; border-radius: 12px; }
    .fe-qty__btn { width: 36px; }
    .fe-qty__input { width: 38px; }
    .fe-buybox__add { font-size: 1.02rem; padding: 0 10px; }
    .detail-info {
        margin-top: 20px;
    }
    .product-cart-wrap:hover {
        transform: none;
    }
    .col-sm-6 .product-cart-wrap {
        margin-bottom: 15px;
    }
}

/* ---- Page header (kutu/border/bg YOK, sade metin akisi) ----
   Temanin "padding:20px; background:#f7f8f9" kutusu kapali: serit bir baslik
   bandi degil, sayfanin ilk satiri. */
.page-header.breadcrumb-wrap {
    background: transparent;
    padding: 12px 0 6px;
    margin-bottom: 0;
    border-bottom: none;
}
@media (max-width: 767.98px) {
    .page-header.breadcrumb-wrap { padding: 10px 0 2px; }
    .breadcrumb.fe-crumb { font-size: 12px; }
    .fe-crumb__sep { margin: 0 6px; }
}

/* NOT: .date-btn kurallari (urun detayindaki hizli tarih secim kartlari) KALDIRILDI —
   teslimat tarihi secimi tek yere, sepet sayfasina tasindi ve o kartlar artik hicbir
   sayfada cizilmiyor. Sepetteki takvimin marka temasi asagida duruyor. */

/* ---- Flatpickr takvim - marka temasi ---- */
.flatpickr-calendar {
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
    border: none;
    padding: 6px 10px 2px;
    width: 320px;
}
/* kucuk yon uc oklarini kaldir */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    display: none;
}
.flatpickr-months {
    padding: 6px 0 8px;
    align-items: center;
}
.flatpickr-current-month {
    font-size: 15px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 600;
    color: #333;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 6px 8px;
    border-radius: 8px;
    transition: background .15s ease;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: #eff5f1;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: #555;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--fe-green);
}
/* hafta gunleri: tek tip soluk gri, kucuk */
span.flatpickr-weekday {
    color: #9a9a9a !important;
    font-size: 11px;
    font-weight: 500;
}
.flatpickr-day {
    border-radius: 9px;
    color: #333;
    font-size: 13px;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.flatpickr-day:hover {
    background: #eff5f1;
    border-color: transparent;
}
/* bugun (secili degilse): ince marka border */
.flatpickr-day.today:not(.selected) {
    border-color: var(--fe-green);
    color: var(--fe-green);
    font-weight: 600;
}
/* secili gun: dolu marka rengi + beyaz */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--fe-green) !important;
    border-color: var(--fe-green) !important;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(46, 125, 91, .30);
}
/* gecmis/disabled/komsu-ay gunleri: soluk */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #d8d8d8;
    background: transparent;
}
/* alt kisim: Temizle / Bugun */
.fe-fp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px 4px;
    margin-top: 6px;
    border-top: 1px solid #f1f1f1;
}
.fe-fp-link {
    background: none;
    border: none;
    padding: 4px 6px;
    font-size: 13px;
    cursor: pointer;
    transition: color .15s ease;
}
.fe-fp-clear {
    color: #9a9a9a;
}
.fe-fp-clear:hover {
    color: #666;
}
.fe-fp-today {
    color: var(--fe-green);
    font-weight: 600;
}
.fe-fp-today:hover {
    color: #2a7353;
}

/* ---- Banner features ---- */
.banner-features {
    text-align: center;
    padding: 20px 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: box-shadow .2s, transform .2s;
}
.banner-features:hover {
    box-shadow: 0 6px 20px rgba(46, 125, 91,.15);
    transform: translateY(-3px);
}
.banner-features img {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
}
.banner-features h4 {
    font-size: .9rem;
    font-weight: 600;
}

/* =========================================================================
   Sticky footer — kisa sayfalarda (orn. bos sepet) footer sayfanin
   ortasinda kalip altinda bosluk birakiyordu. Body dikey flex konteyner
   olur, <main> bosluğu doldurur, footer her zaman en altta kalir.
   NOT: site.css'teki "body { margin-bottom: 60px }" ASP.NET sablonundan
   kalma bir artiktir ve tam olarak o alttaki boslugu uretiyordu — burada
   sifirlaniyor.
   ========================================================================= */
html {
    min-height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-bottom: 0 !important;
}
body > main.main {
    flex: 1 0 auto;
}
body > header,
body > footer.main {
    flex-shrink: 0;
}
body > footer.main {
    margin-top: auto;
}

/* =========================================================================
   Ozet panelleri (sepet / checkout / odeme) — ortak gorsel dil.
   Onceden mb-8 ve mb-12 gibi TANIMSIZ utility siniflari kullaniliyordu;
   bunlar hicbir bosluk uretmedigi icin cok kalemli sipariste satirlar
   birbirine giriyordu. Boşluklar artik burada, tek yerden yonetiliyor.
   ========================================================================= */

/* ---- Kalem satiri ---- */
.fe-sum-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f1f1;
}
.fe-sum-item:last-of-type {
    border-bottom: 0;
}
.fe-sum-item__img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #f9f3ee;
}
.fe-sum-item__body {
    flex: 1;
    min-width: 0;
}
.fe-sum-item__name {
    font-size: .92rem;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
}
.fe-sum-item__meta {
    font-size: .8rem;
    color: #8d8d8d;
    margin-top: 3px;
}
.fe-sum-item__total {
    font-weight: 700;
    white-space: nowrap;
    color: var(--fe-green);
}

/* ---- Bilgi satiri (etiket + deger) ---- */
.fe-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0;
}
.fe-sum-row__label {
    font-size: .875rem;
    color: #8d8d8d;
    white-space: nowrap;
}
.fe-sum-row__value {
    font-weight: 600;
    color: #222;
    text-align: right;
    line-height: 1.45;
}
/* Ana bilgiler (ulke, tarih, saat) — yesil ve bir tik buyuk ki
   goz atisinda ayirt edilsin; yardimci metinler sonuk kalir. */
.fe-sum-row__value--key {
    color: var(--fe-green);
    font-weight: 700;
    font-size: 1.02rem;
}
.fe-sum-row__value--key img {
    height: 15px;
    width: 21px;
    object-fit: cover;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: -2px;
}

/* ---- Genel toplam ---- */
.fe-sum-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 4px 0 2px;
}
.fe-sum-total__label {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
}
.fe-sum-total__value {
    color: var(--fe-green);
    font-weight: 800;
    font-size: 1.45rem;
    white-space: nowrap;
}

/* ---- Ayirici ---- */
.fe-sum-sep {
    border-top: 1px solid #ededed;
    margin: 14px 0;
}

/* ---- Sepet sayfasi: teslimat tarihi secici ferahlasin ---- */
.fe-cart-datefield {
    padding: 4px 0 2px;
}
.fe-cart-datefield label {
    display: block;
    font-size: .875rem;
    color: #8d8d8d;
    margin-bottom: 8px;
}
/* Tarih alani artik takvim (flatpickr) ile aciliyor; gorunumu eski <select> ile ayni
   kaliyor ki sepet ozetinin ritmi degismesin. Gorunen alani flatpickr uretiyor
   (altInput), bu yuzden secici sinifa degil ELEMENTE bakiyor. */
.fe-cart-datefield select,
.fe-cart-datefield input {
    width: 100%;
    height: auto;
    padding: 11px 14px;
    font-size: .98rem;
    font-weight: 600;
    color: var(--fe-green);
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    background-color: #fff;
    /* Takvim disinda deger yazilamasin: alan salt-okunur bir tetikleyici. */
    cursor: pointer;
}
.fe-cart-datefield select:focus,
.fe-cart-datefield input:focus {
    border-color: var(--fe-green);
    outline: none;
}
/* Tarih secilmemisken yer tutucu soluk kalsin — dolu bir alanla karistirilmasin. */
.fe-cart-datefield input::placeholder {
    color: #b6b6b6;
    font-weight: 500;
}

/* ---- Sepet satirlari: dikey ritim rahatlasin ---- */
.fe-cart-row {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}
/* Tutarlar NOTR (#1f2b26): renk hiyerarsisi geregi yesil yalnizca tiklanacak seyde.
   Sepette satir toplami, ara toplam ve ulke adi acik yesildi (#2E7D5B, beyaz zeminde
   2.4:1) — "Siparisi Tamamla" dugmesiyle yaristiyordu. */
.fe-cart-row .fe-line-total,
.fe-cart-subtotal-value,
.fe-sum-row__value--key,
.fe-sum-total__value {
    color: #1f2b26;
}
.fe-cart-datefield input { color: #1f2b26; }

/* ---- Dar ekran ---- */
@media (max-width: 575.98px) {
    .fe-sum-item__img {
        width: 46px;
        height: 46px;
    }
    .fe-sum-total__value {
        font-size: 1.25rem;
    }
    .fe-sum-row {
        gap: 10px;
    }
}

/* ================================================================
   Ust duyuru seridi (_AnnouncementBar.cshtml)

   RENK KARARI — beyaz metnin WCAG kontrast orani gradyanin HER durginda
   olculdu (serit ince ve yazi ~13px, yani "normal metin" esigi 4.5:1):

     onceki  #17402f -> #245f45 -> #2E7D5B   6.55 / 4.44 / 2.54  ← iki durak KALDI
     secilen #102e22 -> #17402f -> #1e5240   9.45 / 6.60 / 5.36  ← hepsi gecti

   Onceki gradyanin marka yesiliyle biten ucu beyaz metinle 2.54:1 veriyordu;
   ekranda "sakin" gorunmesinin sebebi de buydu — metin zeminde eriyordu.
   Denenen digerleri: koyu orman dugumu (#0f241b, 15:1) okunakli ama acik ve
   ferah bir cicek sitesinin tepesinde fazla agir duruyordu; duz marka yesili
   (#2E7D5B) uzerine koyu metin 4.93:1 ile geciyor ama serit o haliyle bir
   uyari/alarm bandina benziyordu.

   Canlilik zeminden DEGIL aksandan geliyor: ayiricilar ve dunya ikonu
   slider paletindeki altin tonun doygun kuzeni (#e8c37a) ile ciziliyor
   (gradyan boyunca 5.63:1 - 3.20:1; dekoratif oge esigi 3:1).
   ================================================================ */
.fe-announce {
    background: linear-gradient(100deg, #102e22 0%, #17402f 52%, #1e5240 100%);
    color: #fff;
    font-size: .82rem;
    line-height: 1.35;
    letter-spacing: .01em;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .09);
}
/* Serit 36px'ten 46px'e cikti: ince bir cizgi gibi duruyordu ve sayfanin bir parcasi
   degil, tarayici arayuzunun devami gibi okunuyordu. Yukseklik arttikca serit "ilk
   soylenen sey" agirligini kazaniyor — zaten tek isi o. */
.fe-announce .container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    padding-top: 11px;
    padding-bottom: 11px;
}
.fe-announce__text {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    text-align: center;
    font-weight: 500;
    /* Uzun metin ikinci satira tasmasin: tek satirda kirpilir. Serit ne kadar uzun
       yazilirsa yazilsin header'i asagi itmemeli. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Dunya ikonu: "uluslararasi" mesajini metni okumadan once veren tek isaret.
   Ikon artik ortak SVG parcasi (_FeIcon) ve 1em olculu — olcuyu bu sarmalayicinin
   font-size'i belirler, SVG'de sabit piksel YOK. */
/* Ayiricilar metinden bir ton geride ve altin: uc guven sinyali goz atisinda
   birbirinden ayrilsin, ama okuma sirasini bozmasin. */
.fe-announce__sep {
    color: #e8c37a;
    font-weight: 700;
    padding: 0 2px;
}
.fe-announce__link {
    text-decoration: none;
    transition: opacity .2s;
}
.fe-announce__link:hover,
.fe-announce__link:focus {
    color: #fff;
    opacity: .85;
    text-decoration: none;
}
.fe-announce__chevron {
    font-size: .7rem;
    flex-shrink: 0;
    color: #e8c37a;
    position: relative;
    top: 1px;
}

/* Dar ekranda serit KORUNUR ve masaustuyle ayni ferahliga cekildi.

   Onceki hali 32px yukseklik + .72rem puntoydu: serit okunacak kadar degil,
   "bir sey yaziyor" denecek kadar gorunuyordu ve header'a yapisiktı. Dunya ikonu
   buradan da kalkti (gerekcesi _AnnouncementBar.cshtml icinde) — kazanilan yer
   metne gitti, telefonda tek satira daha cok kelime siginiyor.
   Metin yine tek satirda kirpilir; serit hicbir kirilimda header'i asagi itmez. */
@media (max-width: 575.98px) {
    .fe-announce {
        font-size: .78rem;
    }
    .fe-announce .container {
        min-height: 42px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .fe-announce__text {
        gap: 6px;
    }
}

/* ================================================================
   ODEME KAPALI SERIDI (.fe-paybar)
   Duyuru seridinin (.fe-announce) hemen altinda, YALNIZCA odeme alimi
   kapaliyken cizilir.

   Neden ayri bir gorunum: ikisi ust uste geldiginde karistirilmamali.
   Duyuru seridi koyu yesil/marka; bu serit amber uyari tonunda. Zemin
   #fdf3d8 uzerine metin #6b4a05 ile 7.4:1 -- WCAG AA'nin uzerinde.

   Metin duyuru seridinin aksine KIRPILMAZ (white-space: normal): burada
   okunmasi gereken bir sebep ve bir yonlendirme var, yarim cumle ise yaramaz.
   ================================================================ */
.fe-paybar {
    background: #fdf3d8;
    color: #6b4a05;
    font-size: .82rem;
    line-height: 1.4;
    border-bottom: 1px solid #f0dfae;
}
.fe-paybar .container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 36px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.fe-paybar__text {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    text-align: center;
    font-weight: 500;
    max-width: 900px;
}
.fe-paybar__icon {
    flex-shrink: 0;
    color: #b8860b;
    position: relative;
    top: 3px;
}
@media (max-width: 575.98px) {
    .fe-paybar {
        font-size: .74rem;
    }
    .fe-paybar .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .fe-paybar__icon {
        display: none;
    }
}

/* ================================================================
   Teslimat ulkesi secici (header-middle)
   Uluslararasi satisin en guclu sinyali bu dugme; notr gri bir pill
   iken marka tonuna alindi ve "Teslimat ulkesi" mikro etiketi eklendi.
   Kullanici "nereye gonderiyorum" sorusunun cevabini okumadan gormeli.
   ================================================================ */
.fe-country-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #d3e3d9;
    border-radius: 8px;
    background: #eff5f1;
    color: #222;
    line-height: 1.1;
    transition: border-color .2s, background-color .2s;
}
.fe-country-pill:hover,
.fe-country-pill:focus {
    background: #e6efe9;
    border-color: var(--fe-green);
    color: #222;
}
.fe-country-pill__flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.fe-country-pill__label {
    display: block;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fe-green);
}
.fe-country-pill__value {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fe-country-pill__chevron {
    font-size: .7rem;
    color: #6b7f75;
    flex-shrink: 0;
}

/* =============================================================================
   Onay kutulari (checkbox / radio) — TEMA CAKISMASI DUZELTMESI
   =============================================================================
   SORUN: Evara temasinin main.css'i metin girdileri icin iki genel kural taniml*yor:

       input            { width:100%; height:45px; padding-left:20px; ... }   (main.css)
       .form-group input{ width:100%; height:45px; padding-left:20px; ... }   (main.css)

   Ikisi de TIPE BAKMIYOR, yani checkbox ve radio'yu da yakaliyor.

   Bootstrap'in .form-check-input kurali (width:1em;height:1em) ozgulluk olarak
   (0,1,0); tek basina duran `input` kuralini (0,0,1) yendigi icin form-check
   yapisi cogu yerde dogru gorunuyordu. Ama `.form-group input` (0,1,1) DAHA
   ozgul — dolayisiyla .form-group ICINDEKI her checkbox 45px yuksekliginde,
   tam genislikte bos bir kutuya donusuyor ve gercek onay kutusu kayboluyor.
   (Uye kayit formundaki KVKK onayi tam olarak bu durumdaydi.)

   COZUM: yalnizca GEOMETRIYI geri aliyoruz — tipe gore secici kullanarak.
   `input[type="checkbox"]` (0,1,1) tema kuralini beraberlikte, `.form-group
   input[type="checkbox"]` (0,2,1) ise acik farkla geciyor.

   BILEREK DOKUNULMAYANLAR:
     * background / border / accent: Bootstrap'in isaretli hal gorunumu
       (.form-check-input:checked) bu kurallar uzerinden calisiyor; buradan
       ezersek tik isareti kaybolur.
     * display: temanin .custome-checkbox deseni gercek input'u display:none
       yapip etiket uzerine sahte kutu ciziyor. O desen su an projede
       kullanilmiyor ama ileride kullanilirsa bozulmasin diye display'e
       dokunulmuyor.
     * Kendi olcusunu tanimlayan bilesenler (orn. cerez tercih paneli,
       .fe-cc-cat input[type="checkbox"]) daha ozgul olduklari icin
       etkilenmiyor — kendi boyutlariyla kaliyorlar.

   Admin paneli bu dosyayi YUKLEMEZ ve admin CSS'inde bu genel `input`
   kurallari yok; oradaki onay kutulari zaten dogru calisiyor.
   ========================================================================== */
input[type="checkbox"],
input[type="radio"],
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: 1em;
    height: 1em;
    padding: 0;
}

/* Etiketin ilk satiriyla hizali dursun (Bootstrap'in kendi degeri). */
.form-check-input[type="checkbox"],
.form-check-input[type="radio"],
.form-group .form-check-input {
    margin-top: .25em;
    vertical-align: top;
}

/* Etiket metni tek satira sikismasin, kutuya yapismasin ve tiklanabilir olsun. */
.form-check-label {
    cursor: pointer;
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Tik isareti — `background` KISAYOLUNUN yan etkisinin geri alinmasi
   -----------------------------------------------------------------------------
   Bootstrap 5.3 onay isaretini bir arka plan GORSELI olarak ciziyor:

       .form-check-input          { background-image: var(--bs-form-check-bg-image); }
       .form-check-input:checked  { --bs-form-check-bg-image: url("...tik svg..."); }

   Tema ise UC yerde `background` KISAYOLUNU kullaniyor:

       input:focus            { background: transparent; }   (0,1,1)  main.css:1047
       .form-group input      { background: #fff; }          (0,1,1)  main.css:1240
       .form-group input:focus{ background: transparent; }   (0,2,1)  main.css:1252

   Kisayol, yazilmayan alt ozellikleri VARSAYILANA DONDURUR — yani
   `background-image: none`. Ucu de Bootstrap'in (0,1,0) ozgullugundeki
   background-image bildirimini geciyor.

   Sonuc tam olarak bildirilen belirti: kutuya tiklanir tiklanmaz odak gelir,
   `input:focus` devreye girer ve gorsel silinir. Arka plan rengi ise
   `.form-check-input:checked` (0,2,0) ile korundugu icin kutu DOLU ama BOS gorunur.

   Duzeltme: arka plan ozellikleri checkbox/radio icin ACIKCA yeniden bildiriliyor —
   kisayolla degil, tek tek (yoksa ayni tuzaga biz duseriz). Odak hali de ayrica
   yaziliyor, cunku ezen kural zaten :focus uzerinde.
   -------------------------------------------------------------------------- */
input[type="checkbox"].form-check-input,
input[type="radio"].form-check-input,
input[type="checkbox"].form-check-input:focus,
input[type="radio"].form-check-input:focus,
input[type="checkbox"].form-check-input:checked,
input[type="radio"].form-check-input:checked {
    background-image: var(--bs-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Isaretsiz hal: tema "transparent" birakmasin, kutu beyaz kalsin. */
input[type="checkbox"].form-check-input,
input[type="radio"].form-check-input,
input[type="checkbox"].form-check-input:focus,
input[type="radio"].form-check-input:focus {
    background-color: #fff;
}

/* -----------------------------------------------------------------------------
   Marka rengi — isaretli hal tema mavisi (#0d6efd) yerine FlowerEast yesili
   -------------------------------------------------------------------------- */
input[type="checkbox"].form-check-input:checked,
input[type="radio"].form-check-input:checked {
    background-color: var(--fe-green, #2E7D5B);
    border-color: var(--fe-green, #2E7D5B);
}

/* Odak halkasi da yesil. Tema "border: 1px solid #9ac0aa" veriyor; onu da eziyoruz. */
input[type="checkbox"].form-check-input:focus,
input[type="radio"].form-check-input:focus {
    border-color: var(--fe-green, #2E7D5B);
    box-shadow: 0 0 0 .2rem rgba(46, 125, 91, .25);
    outline: 0;
}

/* Bootstrap'in appearance:none uygulamadigi (form-check-input sinifi olmayan) yerli
   onay kutulari icin — orn. cerez tercih paneli. Orada tik'i tarayici cizer, rengi
   accent-color belirler. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--fe-green, #2E7D5B);
}

/* Gecersiz onay kutusu kirmizi cerceve alsin (jQuery validation "input-validation-error"
   sinifini ekliyor); aksi halde hangi kutunun eksik oldugu anlasilmiyor. */
input[type="checkbox"].form-check-input.input-validation-error,
input[type="radio"].form-check-input.input-validation-error {
    border-color: #dc3545;
}

/* ---- Kampanya gosterimi (Adim 8) ----
   Ustu cizili fiyat ve indirim rozeti; urun karti, urun detayi, sepet, checkout ozeti ve
   arama onerilerinde AYNI iki sinif kullaniliyor.

   NEDEN KENDI SINIFLARIMIZ: Evara temasinda .old-price zaten var ama yalnizca
   ".product-cart-wrap .product-content-wrap .product-price" altinda stilleniyor. Sepet,
   checkout ve arama onerileri o agacin disinda — orada tema sinifi hicbir sey yapmazdi ve
   ustu cizili fiyat normal fiyattan ayirt edilemezdi. .fe-old-price atadan BAGIMSIZ
   calisir; kart icinde tema sinifiyla birlikte kullanildiginda ayni gorunumu verir. */
.fe-old-price {
    font-size: .85em;
    font-weight: 400;
    color: #90908e;
    text-decoration: line-through;
}

.fe-discount-badge {
    display: inline-block;
    background: #d32f2f;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.fe-discount-badge--lg {
    font-size: .85rem;
    padding: 6px 12px;
}

/* ---- Siparis akisi adim gostergesi (Sepet → Siparis Bilgileri → Odeme) ----
   Sepet, siparis formu ve odeme sayfalarinda AYNI parcali cizer (_CheckoutSteps.cshtml).

   Tasarim: markanin yesili yalnizca BULUNULAN ve TAMAMLANAN adimlarda kullaniliyor;
   gelecek adimlar gri. Adimlar arasindaki cizgi ::after ile, en son adimda kapatiliyor.
   Baglayici bilgi RENK DEGIL sekildir (tik / dolu daire / bos daire) — renk korlugunde de
   hangi adimda oldugu okunur kalsin. */
.fe-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.fe-steps__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

/* Adimlari birlestiren cizgi: dairenin dikey ortasinda, bir sonraki adima uzanir.
   Son adimda cizilmez (:last-child). */
.fe-steps__item::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #e8e8e8;
    z-index: 0;
}
.fe-steps__item:last-child::after { display: none; }

/* Tamamlanan adimdan sonraki cizgi de yesil: ilerleme cubugu gibi okunsun. */
.fe-steps__item.is-done::after { background: var(--fe-green); }

.fe-steps__link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.fe-steps__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background: #fff;
    color: #9a9a9a;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color .2s linear, border-color .2s linear, color .2s linear;
}

.fe-steps__label {
    font-size: .875rem;
    font-weight: 500;
    color: #8d8d8d;
    line-height: 1.3;
}

/* Bulunulan adim: dolu yesil daire + koyu, kalin etiket. */
.fe-steps__item.is-current .fe-steps__marker {
    /* Koyu ton: beyaz rakam --fe-green uzerinde 2.4:1 kaliyordu. */
    border-color: var(--fe-green-deep);
    background: var(--fe-green-deep);
    color: #fff;
}
.fe-steps__item.is-current .fe-steps__label {
    color: #1f2b26;
    font-weight: 700;
}

/* Tamamlanan adim: yesil cerceveli tik, tiklanabilir. */
.fe-steps__item.is-done .fe-steps__marker {
    border-color: var(--fe-green);
    background: #eff5f1;
    color: var(--fe-green);
}
.fe-steps__item.is-done .fe-steps__label { color: var(--fe-green); }
.fe-steps__item.is-done a.fe-steps__link:hover .fe-steps__marker {
    background: var(--fe-green);
    color: #fff;
}
.fe-steps__item.is-done a.fe-steps__link:hover .fe-steps__label { color: var(--fe-green-dark); }

.fe-steps__link:focus-visible {
    outline: 2px solid var(--fe-green);
    outline-offset: 3px;
    border-radius: 8px;
}

/* Dar ekran: etiketler kisalmadan alt alta sigsin, cizgi hizasi bozulmasin. */
@media (max-width: 575.98px) {
    .fe-steps { margin-bottom: 22px; }
    .fe-steps__marker { width: 28px; height: 28px; font-size: .8rem; }
    .fe-steps__item::after { top: 13px; }
    .fe-steps__label { font-size: .75rem; }
    .fe-steps__link { gap: 6px; }
}

/* ---- Urun detayi: teslimat bilgisi (SALT GOSTERIM) ----
   Tarih secicisinin kaldirilmasiyla olusan bosluga gecen bilgi blogu. Bilerek FORM
   GORUNUMU YOK (cerceveli input, buton, ok isareti yok) — tiklanabilir sanilmamali. */
.fe-delivery-note {
    padding: 14px 16px;
    border: 1px solid #eee;
    border-left: 3px solid var(--fe-green);
    border-radius: 10px;
    background: #fafcfb;
}

.fe-delivery-note__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .9rem;
}
.fe-delivery-note__row + .fe-delivery-note__row { margin-top: 7px; }

.fe-delivery-note__row i {
    color: var(--fe-green);
    margin-right: 2px;
}

.fe-delivery-note__label { color: #8d8d8d; }

.fe-delivery-note__value {
    font-weight: 600;
    color: #1f2b26;
}

.fe-delivery-note__hint {
    margin: 10px 0 0;
    font-size: .8rem;
    color: #9a9a9a;
    line-height: 1.5;
}

/* =============================================
   URUN KARTI — FIYAT + AKSIYON YERLESIMI

   SORUN: Fiyat ile "sepete ekle / siparis" butonu kartin alt satirinda sikisiyordu.
   Iki ayri sebep vardi:

   1) Evara kartinda (.product-cart-wrap) buton .product-action-1.show ile
      position:absolute; bottom:26px; right:20px olarak KARTIN UZERINE yuzuyor.
      Fiyat satiri o butonun ALTINDAN geciyordu: indirimli urunde satir
      "yeni fiyat + ustu cizili eski fiyat + %XX rozeti" olunca butonun altina
      giriyor, orten bir yerlesim cikiyordu. Butonun yeri metnin uzunlugundan
      habersiz oldugu icin bu her uzun fiyatta tekrarliyordu.

   2) Ana sayfa kartinda fiyat ve buton tek satirda, sarmasiz bir flex icindeydi
      (justify-content:between). Sigmadiginda sarmak yerine tasiyordu.

   COZUM: iki kart tipi de AYNI iki bilesenle calisir —
      .fe-pcard__foot  : fiyat ve aksiyonu tutan, SARABILEN satir. Sigmadiginda
                         buton alt satira duser (sagda kalir), asla ortmez.
      .fe-price-block  : fiyatin kendi ic yerlesimi. Parcalar (yeni fiyat, ustu
                         cizili fiyat, rozet) arasinda sarma serbest; her parca
                         KENDI ICINDE bolunmez (white-space:nowrap), yani
                         "₽1.234.567,89" bir satirda kalir ama rozet gerekirse
                         alt satira iner. En uzun senaryo (uzun sembol + binlik
                         ayrac + eski fiyat + rozet) boylece hep sigar.

   Kart yuksekligi: .fe-pcard yuksekligi kolonun tamamina esitler, govde flex
   sutunudur ve alt satir margin-top:auto ile dibe yaslanir. Baslik 2-3 satira
   ciktiginda fiyat satirlari yine ayni hizada kalir, izgarada satirlar kaymaz.
   ============================================= */
:root {
    /* Kart alt blogundaki tek bosluk kaynagi (fiyat <-> buton). */
    --fe-pcard-gap: 10px;

    /* Baslik icin AYRILAN satir sayisi. Tek satirlik baslikta da bu kadar yer
       tutulur — yoksa komsu kartlarin fiyat satirlari birbirini tutmazdi. */
    --fe-pcard-title-lines: 2;
    --fe-pcard-title-lh: 1.4;

    /* Baslik puntosu TEK KAYNAK. Onceden kart tipine gore degisiyordu: Evara
       kartinda temanin h2 olcusu (16px), ana sayfada .fe-pcard__title--lg
       (1.05rem), capraz satista Bootstrap "font-sm" (14px). Ayni izgarada uc
       farkli baslik boyu, kartlar arasi hiza da bu yuzden tutmuyordu.

       DIKKAT — rem burada 14px: tema <html> font-size'ini 14px'e cekiyor
       (main.css). Yani 1.1rem = 15.4px, 16px degil. Bu blogtaki tum rem
       degerleri o tabana gore secildi. */
    --fe-pcard-title-size: 1.05rem;

    /* Metin blogunun ic boslugu. YALNIZCA govdeye uygulanir: gorsel kartin tam
       genisligini kullanmaya devam eder, kenara yapisan tek sey odur.
       Tek kaynak — dort ayri kart tipi (ana sayfa, Evara, capraz satis) ayni
       degeri okusun diye degisken. */
    --fe-pcard-pad: 14px;

    /* Fiyat punto olcegi. Kartin IKINCI en baskin ogesi: baslikta 1.05rem
       kullaniliyor, fiyat ondan buyuk olsun ki goz once ona gitsin.
       Ustu cizili eski fiyat buna ORANLI bir CARPAN (birimsiz) — punto degisince
       ikisi birlikte olceklenir, aralarindaki hiyerarsi sabit kalir.
       em DEGIL: em ust ogenin puntosuna gore cozulurdu ve ust ogenin puntosu kart
       tipine gore degisiyor (ana sayfada "font-lg" var, Evara kartinda yok) —
       eski fiyat kartlar arasinda farkli boyutlara duserdi. */
    --fe-pcard-price: 1.28rem;
    --fe-pcard-price-old: .68;
}

.fe-pcard {
    height: 100%;              /* kolon yuksekligi = izgara satirinin en uzunu */
    display: flex;
    flex-direction: column;
}

/* Govde: Evara kartinda .product-content-wrap, ana sayfa kartinda .card-body.
   Ikisinde de alt satirin dibe yaslanabilmesi icin flex sutunu olmasi gerekir. */
.fe-pcard__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;              /* uzun kelime kolonu genisletmesin */
}

/* Ic bosluk. Iki secici de (0,2,0): Evara'nin
   ".product-cart-wrap .product-content-wrap { padding: 0 20px 15px }" kuralini
   esit ozgullukle ve DAHA SONRAKI dosyadan ezer. Ana sayfa ve capraz satis
   kartlarinda view'daki "p-3" kaldirildi, bosluk artik buradan geliyor. */
.fe-pcard .fe-pcard__body {
    padding: var(--fe-pcard-pad);
}

/* Baslik: en fazla 2 satir, ama HER ZAMAN 2 satirlik yer kaplar.

   ORTALI: kart icerigi (baslik, kategori, fiyat) artik ortalanmis bir yigin.
   Onceden hepsi sola yaslıydi ve buton tam genislikte ortali oldugu icin alt
   blok ile ust blok iki farkli eksende duruyordu; dar kolonda (mobilde col-6)
   bu, fiyatin kartin sol kenarina yapismis gibi gorunmesine yol aciyordu.
   Tek eksen = sakin izgara. */
.fe-pcard__title {
    display: -webkit-box;
    -webkit-line-clamp: var(--fe-pcard-title-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--fe-pcard-title-lh);
    min-height: calc(var(--fe-pcard-title-lines) * var(--fe-pcard-title-lh) * 1em);
    overflow-wrap: anywhere;   /* boslugu olmayan uzun urun adi tasmasin */
}

/* Ortalama ve punto YALNIZCA DIKEY kartlarda (.fe-pcard atasi olanlarda).
   Ana sayfadaki uclu YATAY serit (_ProductListSmall) de .fe-pcard__title
   kullaniyor ama orada baslik kucuk gorselin YANINDA duruyor: ortalamak onu
   gorselden koparir, buyutmek satiri neredeyse iki katina cikarirdi. O serit
   olcusunu temanin .title-small kuralindan almaya devam eder.

   Punto icin !important, renkle AYNI sebeple (bkz. bir alttaki blok): tema
   olcuyu daha ozgul seciciyle yaziyor —
     ".product-cart-wrap .product-content-wrap h2" (0,3,0) 16px,
   ve capraz satis kartinda Bootstrap'in ".font-sm" (14px) yardimcisi var.
   Ikisi de degiskeni sessizce devre disi birakirdi; oysa amac TAM OLARAK bu
   dort kart tipinin ayni puntoyu paylasmasi. */
.fe-pcard .fe-pcard__title {
    font-size: var(--fe-pcard-title-size) !important;
    text-align: center;
}

/* Kategori etiketi de ayni eksende. */
.fe-pcard .product-category {
    text-align: center;
}

/* Baslik rengi NOTR KOYU — 11 Eylul 2026'da yesilden geri alindi.

   NEDEN: marka rengi "her yerde marka" diye her yere yazilinca isaret olmaktan
   cikiyor. Kartta urun adi da, fiyat da, buton da yesildi; izgarada yan yana dort
   kart, ekranda dort duvar yesil demekti ve isletmeci "kaba duruyor" dedi. Rakiplerin
   (Udora, Ciceksepeti) kartlarinda da urun adi ve fiyat NOTR, renk yalnizca aksiyonda.

   KURAL: yesil = TIKLANACAK SEY (buton, hover). Bilgi (ad, fiyat, kategori) notr.
   Baslik hover'da yesile doner — orada yesil dogru, cunku tiklanabilirligi soyluyor.
   Ton #1f2b26 temanin kendi koyu tonu; .fe-listhead__title de ayni degeri kullaniyor.

   Hem <a>'ya hem kapsayiciya yaziliyor — kartlarda baslik bazen dogrudan bir
   baglanti (capraz satis), bazen <h2>/<h5> icinde bir baglanti (Evara, ana
   sayfa, uclu serit).

   !important GEREKLI, iki ayri sebeple:
     - tema baslik renklerini daha ozgul seciciyle yaziyor
       (".product-cart-wrap .product-content-wrap h2 a" ve
        ".product-list-small .title-small a"),
     - Bootstrap'in ".text-dark" yardimcisi zaten !important tasiyor.
   Ozgullugu .fe-pcard uzerinden almak yetmezdi: uclu kompakt seritte
   .fe-pcard atasi YOK, baslik yine de ayni renkte olmali. */
.fe-pcard__title,
.fe-pcard__title a {
    color: #1f2b26 !important;
    font-weight: 600;
}
.fe-pcard__title a:hover {
    color: var(--fe-green-deep-hover) !important;
}

/* Ana sayfa kartinin basligi. Olculer view'da satir ici duruyordu; min-height
   hesabi line-height'a bagli oldugu icin ikisi AYNI yerde olmali — satir ici
   bir line-height, hizalamanin dayandigi hesabi sessizce bozardi.
   NOT: view'da bir de `text-truncate-2` sinifi vardi; projede HICBIR YERDE
   tanimli degildi, yani baslik hic kirpilmiyordu ve uzun adlar kart boyunu
   kaydiriyordu. Kirpma isini artik .fe-pcard__title gercekten yapiyor.

   AYRI BIR PUNTO TASIMIYOR ve KURALI DA KALMADI: eskiden 1.05rem ile
   digerlerinden buyuktu, yani ana sayfa kartlari ayni urunu gosteren liste
   kartlarindan farkli okunuyordu. Punto artik tek degiskenden
   (--fe-pcard-title-size, bkz. .fe-pcard .fe-pcard__title) geliyor; sinif
   view'lardan da kaldirildi. Ana sayfaya ozel bir olcu gerekirse burasi
   yeniden acilir. */

/* Alt blok: fiyat USTTE, buton ALTTA ve tam genislikte.
   Onceki surumde ikisi yan yana duran, sigmayinca saran bir satirdi; simdi
   dikey yigin — buton her zaman ayni yerde ve ayni genislikte, yani kartlar
   arasinda goz icin sabit bir hedef. Yan yana dizilimde buton fiyatin
   uzunluguna gore saga kayiyor ve her kartta baska bir yere denk geliyordu.

   margin-top:auto korunuyor: baslik 1 ya da 2 satir olsun, blok kartin
   DIBINE yaslanir ve izgarada butonlar ayni hizada kalir. */
.fe-pcard__foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--fe-pcard-gap);
    margin-top: auto;
}

/* Fiyat kendi icinde yine SATIR: eski fiyat + yeni fiyat + rozet sigdigi kadar
   yan yana, sigmayinca alt satira sarar (bkz. .fe-price-block). */
.fe-pcard__foot .fe-price-block {
    min-width: 0;
}

/* Fiyat, baslikla AYNI eksende — ortali.
   Kapsam ":not(--compact)": kucuk yatay serit (ana sayfadaki uclu listeler)
   fiyati butonun SOLUNDA tutan bir satirdir; orada ortalamak, fiyati butona
   dogru itip aradaki boslugu yok ederdi. */
.fe-pcard__foot:not(.fe-pcard__foot--compact) .fe-price-block {
    justify-content: center;
}

/* Aksiyon artik kartin tam genisligi. */
.fe-pcard__foot .fe-pcard__action {
    width: 100%;
}

/* NOT: Evara kartinda alt satirdaki buton eskiden temanin .product-action-1
   sarmalayicisi icinde 40px'lik bir daireydi ve o sarmalayiciyi akisa indirmek
   icin burada position/opacity sifirlamalari duruyordu. Buton artik dort kart
   tipinde de ayni tam genislik butonu (.fe-add-btn--block), sarmalayici
   kaldirildi — o sifirlamalara da gerek kalmadi.
   Goruntu uzerindeki .product-action-1 (hover'da beliren buyutec) DOKUNULMADI. */

/* ---- GENIS EKRANDA BESLI IZGARA (.fe-grid__item) ----
   Bootstrap'in col-lg-3'u 1200px'ten sonra da dortlu kaliyordu: kap 1320px'e
   cikinca kart 306px oluyor ve izgara "buyuk buyuk" gorunuyordu (isletmecinin
   sozu). 1400px ustunde bes kart -> ~241px, rakiplerin kart olcusune yakin.

   Sinifi silip col-lg-2'ye gecmek MUMKUN DEGIL: Bootstrap'in 12'lik izgarasinda
   5'e tam bolunen kolon sinifi yok (12/5 = 2.4). Ayni cozum "Benzer Urunler"
   seridinde de kullaniliyor (bkz. .fe-related__item). */
@media (min-width: 1400px) {
    .fe-grid__item {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* ---- ANA SAYFA VITRINI: YALNIZCA TAM SATIRLAR ----
   Hangi urunun hangi genislikte fazla kaldigini SUNUCU hesapliyor (bkz.
   Core/Catalog/VitrinIzgara) ve karta fe-vitrin-fazla-{sutun} sinifini basiyor;
   burasi yalnizca o sinifi o genislikte gizliyor. Kirilimlar ana sayfa
   kartinin kolon siniflariyla BIREBIR ayni (col-6 / col-md-4 / col-lg-3 / %20) —
   biri degisirse bu dort sinir da degismeli, yoksa yanlis satirda gizler. */
@media (max-width: 767.98px) {
    .fe-vitrin-fazla-2 { display: none; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .fe-vitrin-fazla-3 { display: none; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
    .fe-vitrin-fazla-4 { display: none; }
}
@media (min-width: 1400px) {
    .fe-vitrin-fazla-5 { display: none; }
}

/* ---- Fiyat blogu ----
   Parcalar arasi bosluk TEK kaynaktan (gap). Tema .old-price'a 7px sol margin
   veriyordu; gap ile birlesince cift bosluk olurdu, o yuzden sifirlaniyor. */
.fe-price-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-width: 0;
}
/* Alt satirin ICINDE fiyatin kendi alt boslugu satiri egriltir (buton dikeyde
   ortalanmis olur). Disarida — capraz satis kartinda fiyat butonun USTUNDE —
   o bosluk gerekli, o yuzden sifirlama yalnizca satir icinde. */
.fe-pcard__foot .fe-price-block {
    margin-bottom: 0;
}
.fe-price-block > span {
    white-space: nowrap;       /* tutar KENDI ICINDE bolunmesin */
}
.fe-price-block .old-price,
.fe-price-block .fe-old-price {
    margin-left: 0;
}
.fe-price-block .fe-discount-badge {
    align-self: center;        /* rozet baseline'a degil, satirin ortasina */
}

/* ---- Kart fiyat tipografisi ----
   Fiyat kartin ikinci en baskin ogesi: baslikta 1.05rem, fiyatta 1.45rem.

   !important ZORUNLU: hem tema
   (".product-cart-wrap .product-content-wrap .product-price span { font-size:18px }")
   hem de bu dosyanin yukarisindaki genel marka rengi kurali (.product-price >
   span, !important) daha ozgul/esit ve fiyati kucuk ve acik yesil birakiyordu.
   Kapsam .product-price.fe-price-block: bu ikili YALNIZCA bes kart yuzeyinde
   birlikte kullaniliyor (ana sayfa izgarasi, uclu serit, urun listesi, benzer
   urunler, capraz satis). Sepet, checkout ve urun detayindaki fiyatlar bu
   bloktan ETKILENMEZ — onlar .fe-price-block tasimiyor.
   Olcu tek degiskenden (--fe-pcard-price) geldigi icin kompakt serit kendi
   olcegini yerel olarak dusurup ayni hiyerarsiyi koruyabiliyor. */
/* Fiyat da NOTR (bkz. baslik rengi blogundaki gerekce): bilgi, aksiyon degil.
   Punto da bir kademe kucuk — 1.55rem kartin en buyuk ogesiydi ve urun fotografiyla
   yarisiyordu. Fiyat yine basliktan BUYUK, yani hiyerarsi korunuyor. */
.product-price.fe-price-block > span:not(.old-price):not(.fe-old-price):not(.fe-discount-badge) {
    font-size: var(--fe-pcard-price) !important;
    font-weight: 700;
    color: #1f2b26 !important;
    letter-spacing: -.2px;
    line-height: 1.15;
}

/* Indirimli durumda eski fiyat: kucuk, soluk, uzeri cizili. em oldugu icin
   yeni fiyatla birlikte olceklenir. */
.product-price.fe-price-block .old-price,
.product-price.fe-price-block .fe-old-price {
    font-size: calc(var(--fe-pcard-price) * var(--fe-pcard-price-old)) !important;
    font-weight: 500;
    color: #9b9b98 !important;
    letter-spacing: 0;
}

/* ---- Mobil ----
   Dar kolonda (ana sayfada col-6, listede col-12/col-sm-6) fiyat + buton ayni
   satirda kalabilsin diye yazi olculeri bir kademe kuculur. Sigmazsa sarma
   zaten devrede; bu blok sarmayi GECIKTIRIR, yerine gecmez. */
@media (max-width: 575.98px) {
    :root {
        --fe-pcard-pad: 11px;        /* dar kolonda metne daha cok genislik */
        --fe-pcard-price: 1.2rem;    /* olcek tek yerden; oran (eski/yeni) korunur */
        --fe-pcard-title-size: 1rem;
    }

    .fe-pcard__foot { gap: 8px; }
    .fe-pcard .fe-discount-badge { font-size: .65rem; padding: 3px 6px; }

    /* MOBILDE IKON YOK: dar kolonda (ana sayfada col-6) ikon + tam metin ayni
       satira zor sigiyordu ve metni kucultmek gerekiyordu. Metin tek basina hem
       daha buyuk hem daha okunur; ikon zaten bilgi TASIMIYOR, etiketi tekrar
       ediyordu. Masaustunde kaliyor. */
    .fe-add-btn--block i { display: none; }
    .fe-add-btn--block {
        gap: 0;
        font-size: .92rem;
        padding: 12px 8px;
    }
}

/* ---- "Sepete ekle" butonu (liste/kart uzerinde) ----
   Capraz satis seridi ve ana sayfanin uclu kucuk listeleri AYNI sinifi kullanir;
   olculer view'larda satir ici duruyordu. Davranis cart.js'te tek yerde
   ([data-fe-add] delegasyonu), gorunum burada tek yerde. */
.fe-add-btn {
    border-radius: 10px;
    padding: 9px;
    white-space: nowrap;       /* "Sepete Ekle" iki satira bolunmesin */
}

/* ---- TAM GENISLIK surum (urun kartlarinin standardi) ----
   Dort kart tipinde de ayni: ana sayfa izgarasi, urun listesi/kategori,
   "Benzer Urunler", capraz satis seridi. Buton fiyatin ALTINDA ve kartin tam
   genisliginde; ikon + tam metin ("Sepete Ekle") ortalanir.

   flex + justify-content:center — inline-block + text-align yerine: ikon ile
   metnin arasindaki bosluk tek kaynaktan (gap) geliyor ve ikonun kendi
   line-height'i (uicons 0 !important) satiri egriltemiyor. */
.fe-add-btn--block {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    /* 11 Eylul 2026: yukseklik 46 -> 40, punto ve kalinlik bir kademe asagi.
       Buton kartin en agir ogesiydi; besli izgarada yan yana bes koyu yesil bar
       fotograflardan daha cok yer kapliyordu. 40px hala rahat bir dokunma hedefi
       (WCAG 2.2 hedef alani 24px, Apple/Google onerisi 44px'e yakin). */
    padding: 10px 14px;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .1px;

    /* Zemin koyu tonda: --fe-green beyaz uzerinde beyaz yaziyla 2.4:1 veriyordu,
       koyu ton 6.3:1. !important, .btn-primary'nin yukaridaki "!important"
       kuralini gecmek icin (o kural sitenin geri kalanini degistirmesin diye
       oldugu gibi birakildi). */
    background-color: var(--fe-green-deep) !important;
    border-color: var(--fe-green-deep) !important;
    color: #fff !important;
}
.fe-add-btn--block:hover,
.fe-add-btn--block:focus {
    background-color: var(--fe-green-deep-hover) !important;
    border-color: var(--fe-green-deep-hover) !important;
    color: #fff !important;
}
.fe-add-btn--block i {
    font-size: 1.05rem;
    line-height: 1 !important;   /* uicons'un "line-height:0 !important" kuralini ez */
}

/* Kucuk yatay listedeki dar surum: serit col-lg-4 icinde ve YATAY duzende
   (kucuk gorsel + metin yan yana). Tam genislik buton bu ritmi bozardi —
   satir yuksekligini gorsel belirliyor, altina blok buton koymak her satiri
   yaklasik iki katina cikarirdi. Bu yuzden burada kompakt hap korunuyor;
   yalnizca etiket digerleriyle ayni metne ("Sepete Ekle") cekildi. */
.fe-add-btn--sm {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    gap: 5px;

    /* Zemin blok surumle AYNI koyu ton — iki buton ayni eylemi yapiyor,
       ayni renkte olsun. */
    background-color: var(--fe-green-deep) !important;
    border-color: var(--fe-green-deep) !important;
    color: #fff !important;
}
.fe-add-btn--sm:hover,
.fe-add-btn--sm:focus {
    background-color: var(--fe-green-deep-hover) !important;
    border-color: var(--fe-green-deep-hover) !important;
}
.fe-add-btn--sm i { font-size: .85rem; line-height: 1 !important; }

/* Butona basildiginda (istek ucarken) disabled olur — tiklamanin isledigi gorunsun. */
.fe-add-btn[disabled] {
    opacity: .6;
    cursor: default;
}

/* Kucuk listedeki gorsel; olculer view'da satir ici duruyordu. */
/* aspect-ratio + object-fit: YER TUTMAK icin. Kural onceden yalnizca "width: 100%"
   diyordu; yuklenmemis bir <img>'in kendi olcusu olmadigi icin kutu 196x0 piksel
   duruyor, gorsel gelince birden 196 piksel aciliyor ve altindaki her sey asagi
   kayiyordu (layout shift) — ustelik tam da ziyaretcinin okumaya basladigi anda,
   cunku bu seritler sayfanin altinda ve gorseller loading="lazy".
   Katalogdaki urun gorselleri 400x400, yani 1/1 oran mevcut gorunumu DEGISTIRMIYOR;
   object-fit: cover ise ileride kare olmayan bir gorsel yuklenirse kutunun
   bozulmamasi icin. */
.fe-list-small__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}

/* TELEFONDA DA YATAY. Tema ≤480px'te figure'e alt bosluk verip listeyi dikey
   yigina ceviriyordu (view'daki eski col-md-* siniflari da ayni yonde calisiyordu):
   90px'lik kucuk gorsel 335px genisliginde tam ekran fotograf oluyor, uc serit x uc
   urun = dokuz tam ekran. Kolonlar artik her genislikte col-4/col-8
   (bkz. _ProductListSmall); buradaki kural temanin alt boslugunu geri alir. */
@media (max-width: 480px) {
    .product-list-small figure { margin-bottom: 0 !important; }
}

/* Kucuk yatay liste, urun kartlarinin DIKEY yigininin DISINDA kalir: burada
   fiyat ve buton yine yan yana saran bir satir (yukarida .fe-pcard__foot
   column'a cevrildi, bu onu geri alir). Gerekcesi .fe-add-btn--sm'de. */
.fe-pcard__foot--compact {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 8px;
    margin-top: 4px;

    /* ORANTILI OLCEK: serit dar oldugu icin kart puntosu oldugu gibi
       kullanilamaz, ama oran korunur — olcegi tek degiskenden kucultuyoruz,
       eski/yeni fiyat iliskisi (carpan) aynen gecerli kaliyor. */
    --fe-pcard-price: 1.1rem;
}
/* Kompakt seritte buton hap kalir; blok surumun width:100% kurali burada gecmez. */
.fe-pcard__foot--compact .fe-pcard__action { width: auto; }
.fe-pcard__foot--compact .fe-discount-badge { font-size: .65rem; padding: 3px 6px; }

/* Evara kartinda govde artik flex sutunu; temanin h2/kategori bloklarina verdigi
   alt bosluklar dikey ritmi bozmasin diye alt blok kendi gap'ini kullaniyor. */
.fe-pcard .product-content-wrap .product-price { padding-top: 0; }

/* ---- "Benzer Urunler" seridi (urun detayi) ----
   Ayni kart bileseni, bir kademe KUCUK olcek. Bolum sayfanin asil isinin
   (urun + satin alma) altinda duran bir kesif seridi; kartlar liste sayfasiyla
   ayni irilikte oldugunda detay sayfasinin en genis, en gurultulu bolumu
   haline geliyordu.

   Olcek TEK DEGISKENDEN dusuruluyor (--fe-pcard-price / --fe-pcard-pad /
   --fe-pcard-title-size): oranlar — baslik/fiyat/eski fiyat hiyerarsisi —
   oldugu gibi korunur, yalnizca hepsi birlikte kuculur.

   MOBIL DEGISMEDI: orada zaten 2'li izgara var ve kartlarin daha da kucuk
   olmasi dokunma hedefini bozardi; bu blok yalnizca >=992px'te calisir. */
@media (min-width: 992px) {
    .fe-related__item {
        /* Bootstrap'in col-lg-3'u (%25) yerine %20 — satirda 4 degil 5 kart.
           Sinifi view'dan silip col-lg-2'ye gecmek olmazdi: Bootstrap'in 12'lik
           izgarasinda 5'e tam bolunen bir kolon sinifi YOK (12/5 = 2.4). */
        flex: 0 0 20%;
        max-width: 20%;
    }

    .fe-related .fe-pcard {
        --fe-pcard-pad: 11px;
        --fe-pcard-price: 1.35rem;
        --fe-pcard-title-size: .98rem;
        --fe-pcard-gap: 8px;
    }
    /* Buton da orantili kuculur: 46px'lik dokunma hedefi burada gerekmiyor,
       satir masaustunde ve fare ile kullaniliyor. */
    .fe-related .fe-add-btn--block {
        padding: 9px 10px;
        font-size: .88rem;
    }
    .fe-related .fe-add-btn--block i { font-size: .95rem; }
}

/* ---- Mobil header aksiyon ikonlari (kalp / sepet / hamburger seridi) ----
   HATA: sepet ikonu mobilde CIZILMIYORDU. Sinif eksik ya da fontta yok DEGIL —
   fi-rs-shopping-bag uicons-regular-straight.css'te mevcut ve masaustunde ayni
   sinif sorunsuz cikiyor. Sebep RENK: tema, dar kirilimlarda bu baglantilari
   beyaza cekiyor (main.css 9212 ve 9442: color/fill #fff), cunku Evara'nin
   ozgun tasarimda burasi KOYU bir seritti. Bu projede header-bottom "bg-white",
   yani ikon beyaz zemin uzerine beyaz cizilip gorunmez oluyordu.

   Kalp ikonunun ve adet rozetinin gorunmesi de bunu dogruluyor: kalp bir <img>
   (SVG dosyasi, kendi renkleri), rozet ise kendi arka planini ve yazi rengini
   tasiyan bir .badge — ikisi de "color" ozelliginden etkilenmiyor. Etkilenen tek
   sey ikon FONTUNUN glifiydi.

   Renk masaustundeki sepet baglantisiyla ayni (#212529 = Bootstrap .text-dark);
   iki header ayni ikonu ayni renkte gostersin.

   NOT: 576-767px araliginda tema rengi hic yazmiyor (yalnizca font-size), orada
   ikon zaten #333 ile gorunuyordu — hata yalnizca <576px ve 768-991px'te vardi.
   Kural kirilimdan BAGIMSIZ yaziliyor ki bu bosluk yeniden acilmasin. */
.header-action-2 .header-action-icon-2 > a {
    color: #212529;
    fill: #212529;
}

/* =============================================
   MOBIL HEADER DUZENI

   Bu satirda artik DORT eleman var: teslimat ulkesi (yeni), kalp, sepet, hamburger.
   Ustune logo da bir kademe buyudu (--fe-logo-h-mobile). Asagidakiler bu ikisinin
   ayni satira SIGMASI icin; hicbiri gorunumu suslemek icin degil.
   ============================================= */

/* Logo buyudu, satir yuksekligi ayni kalsin diye dikey ic bosluk 8px -> 6px.
   Hesap: logo tavani 30.4px -> 33.6px (+3.2), ic bosluk 2x8 -> 2x6 (-4).
   Toplam 46.4px -> 45.6px, yani header YUKSELMIYOR.
   .py-2 Bootstrap yardimcisi !important tasidigi icin burada da gerekiyor. */
@media (max-width: 991.98px) {
    .header-bottom.py-2 {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}

/* Temanin masaustu icin verdigi 123px'lik sag bosluk mobilde satirin yarisini
   yiyordu (.logo.logo-width-1, main.css:5347). Mobil logo zaten esnek kutuda,
   bosluga ihtiyaci yok. */
@media (max-width: 991.98px) {
    .logo.logo-width-1 { margin-right: 0; }
}

/* ================================================================
   HESAP EKRANLARI (giris, kayit, sifre) — .fe-authcard

   Onceki hali temanin ".login_wrap ... p-30 background-white border-radius-10"
   kutusuydu: cercevesiz, golgesiz, sayfanin beyaz zemininden ayrilmayan bir
   blok. Icindeki tek eylem de temanin "btn-fill-out" butonuydu.

   Simdi gercek bir kart: ince cerceve, yumusak golge, net baslik ve dolu
   buton. Ayni bilesenler kayit / sifre sifirlama ekranlarinda da kullanilir
   ki uc ekran ayni aileden gorunsun.
   ================================================================ */
.fe-authcard {
    padding: 28px;
    border: 1px solid #e8ecee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(16, 24, 28, .05);
}
/* Ikinci panel ("yeni misiniz") hafif marka tonunda: iki kart yan yana
   dururken hangisinin form hangisinin teklif oldugu bir bakista anlasilsin. */
.fe-authcard--alt {
    background: #f3f7f4;
    border-color: #d3e3d9;
    box-shadow: none;
}
.fe-authcard__title {
    margin: 0 0 20px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fe-green-deep);
}
.fe-authcard__link { color: var(--fe-green-deep); text-decoration: none; }
.fe-authcard__link:hover { text-decoration: underline; }
.fe-authcard__hint {
    margin: 10px 0 0;
    font-size: .8rem;
    color: #8b9296;
    text-align: center;
}

/* "veya" ayraci: iki eylemin ALTERNATIF oldugunu soyler (giris yap YA DA
   misafir devam et). Cizgi olmadan ikinci buton birincinin devami gibi
   okunuyordu. */
.fe-authcard__or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: #9aa0a4;
    font-size: .82rem;
}
.fe-authcard__or::before,
.fe-authcard__or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e8ecee;
}

/* Alan: tema ".form-group" kurallariyla ugrasmadan tutarli bir dikey ritim. */
.fe-field { margin-bottom: 16px; }
.fe-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: .86rem;
    font-weight: 600;
    color: #4a5155;
}
.fe-field .form-control {
    height: 46px;
    border: 1px solid #dde3e6;
    border-radius: 10px;
    font-size: .95rem;
}
.fe-field textarea.form-control { height: auto; }
.fe-field .form-control:focus {
    border-color: var(--fe-green);
    box-shadow: 0 0 0 3px rgba(46, 125, 91, .15);
}

/* Buton: hesap ekranlarinin tek buton bicimi. Tam genislik ve 48px yukseklik —
   mobilde de rahat bir dokunma hedefi.

   OZGULLUK NOTU: her secicinin bir de "button." on ekli ikizi var. Sebep:
   tema "button[type=submit]" (0,1,1) ile zemin ve ic bosluk yaziyor; duz
   ".fe-authbtn" (0,1,0) ona kaybediyor ve GONDER butonlari temanin
   turkuazinda ciziliyordu — ayni ekranda <a> olan "Uye Ol" marka yesili,
   <button> olan "Giris Yap" turkuazdi. Esit ozgullukte flowereast.css
   sonra yuklendigi icin kazaniyor; !important gerekmiyor. */
.fe-authbtn,
button.fe-authbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0;
    border: 1px solid var(--fe-green-deep);
    border-radius: 12px;
    background: #fff;
    color: var(--fe-green-deep) !important;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
/* CERCEVELI VARYANTIN KENDI HOVER KURALI — eksikligi sessiz bir hataydi.
   Taban .fe-authbtn beyaz zemin + yesil metin; hover kurali YOKTU. Tema
   "button[type=submit]:hover" ile zemini koyultuyor, metin rengi ise buradaki
   !important yuzunden yesil kaliyordu: yesil uzerine yesil, yazi kayboluyordu.
   Kural burada, temanin yolundan yaziliyor; renk cifti hem zemini hem metni
   AYNI yerde belirledigi icin ikisi bir daha ayrisamaz. */
.fe-authbtn:hover,
.fe-authbtn:focus,
button.fe-authbtn:hover,
button.fe-authbtn:focus {
    background: var(--fe-green-deep);
    color: #fff !important;
}

.fe-authbtn--primary,
button.fe-authbtn--primary {
    background: var(--fe-green-deep);
    color: #fff !important;
}
.fe-authbtn--primary:hover,
.fe-authbtn--primary:focus,
button.fe-authbtn--primary:hover,
button.fe-authbtn--primary:focus {
    background: var(--fe-green-deep-hover);
    color: #fff !important;
}
.fe-authbtn--ghost:hover,
.fe-authbtn--ghost:focus {
    background: #e7f0ea;
    color: var(--fe-green-deep) !important;
}

/* Onay kutulari 13px ciziliyordu — parmakla vurulamayacak kadar kucuk ve
   yanindaki 14px metinden de kucuk kaliyordu. KVKK onayi gibi zorunlu bir
   kutunun gorulebilir ve dokunulabilir olmasi gerekiyor. */
.fe-authcard .form-check-input {
    width: 18px;
    height: 18px;
    margin-top: .15em;
}
.fe-authcard .form-check-input:checked {
    background-color: var(--fe-green-deep);
    border-color: var(--fe-green-deep);
}
.fe-authcard .form-check-label { padding-left: 4px; }

/* "Yeni misiniz" panelindeki fayda listesi. */
.fe-authbenefits {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}
.fe-authbenefits li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid #dbe8e0;
    font-size: .9rem;
    line-height: 1.5;
    color: #2b4a3d;
}
.fe-authbenefits li:last-child { border-bottom: 0; }
.fe-authbenefits i {
    flex: none;
    margin-top: 2px;
    font-size: 1.05rem;
    line-height: 1 !important;
    color: var(--fe-green-deep);
}

@media (max-width: 575.98px) {
    .fe-authcard { padding: 20px; border-radius: 14px; }
    .fe-authcard__title { font-size: 1.2rem; margin-bottom: 16px; }
}

/* ================================================================
   CHECKOUT — UYELIK KUTUSU VE OZET KARTI
   ================================================================ */

/* Giris yapmis musteriye gosterilen onay seridi. */
.fe-signedin {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 11px 14px;
    border: 1px solid #d3e3d9;
    border-left: 3px solid var(--fe-green-deep);
    border-radius: 10px;
    background: #f3f7f4;
    color: #2b4a3d;
    font-size: .9rem;
}
.fe-signedin i { color: var(--fe-green-deep); line-height: 1 !important; }

/* Misafire sunulan uyelik SECENEGI (zorunluluk degil — bkz. Checkout.cshtml).
   Marka tonunda bir kart: sayfadaki en silik oge olmaktan cikip fark edilir
   hale geldi, ama formu engellemiyor. */
.fe-guestbox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
    padding: 16px 18px;
    border: 1px solid #d3e3d9;
    border-radius: 12px;
    background: #f3f7f4;
}
.fe-guestbox__text {
    flex: 1 1 260px;
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: #2b4a3d;
}
.fe-guestbox__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* Butonlar DOLU ve okunakli: onceki "btn-sm btn-outline-*" ikilisi ince
   cerceveli ve kucuktu. Ikisi de ayni yuksekligi paylasiyor ki satir
   dengelensin; giris birincil, uye ol ikincil. */
.fe-guestbox__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 116px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--fe-green-deep);
    border-radius: 10px;
    background: #fff;
    color: var(--fe-green-deep) !important;
    font-size: .93rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.fe-guestbox__btn:hover,
.fe-guestbox__btn:focus {
    background: #e7f0ea;
    color: var(--fe-green-deep) !important;
}
.fe-guestbox__btn--primary {
    background: var(--fe-green-deep);
    color: #fff !important;
}
.fe-guestbox__btn--primary:hover,
.fe-guestbox__btn--primary:focus {
    background: var(--fe-green-deep-hover);
    color: #fff !important;
}

/* Ozet karti mobilde formun USTUNDE (bkz. Checkout.cshtml order-* aciklamasi);
   orada sol margin ve buyuk alt bosluk anlamsiz kaliyor. */
@media (max-width: 991.98px) {
    .fe-sum-card {
        margin-left: 0 !important;
        margin-bottom: 26px !important;
        padding: 18px !important;
    }
    .fe-guestbox { padding: 14px; gap: 12px; }
    .fe-guestbox__actions { width: 100%; }
    .fe-guestbox__btn { flex: 1 1 0; min-width: 0; }
}

/* ================================================================
   UST MENU (.fe-nav-link)

   Kurallar site.css'ten BURAYA tasindi (gerekcesi orada). Ayni zamanda
   yeniden yazildi:

   ONCEKI HALI SOLUKTU. Renk #333, agirlik 400, punto 14px — yani menu,
   sayfadaki sıradan bir metinden ayirt edilemiyordu. Bir gezinme cubugu
   "tiklanabilir" oldugunu kendi basina soylemeli; kullanici kategorileri
   ararken once onlari bulmali.

   Simdi: marka koyu yesili + 500 agirlik. Zemin BEYAZ KALIYOR (site.css'teki
   kural da oyle diyor) — derinlik renkten degil, KONTRASTTAN ve aktif/hover
   durumunun belirginliginden geliyor. Ustune ince bir alt cizgi: menu
   cubugu icerikten ayrilsin.

   OZGULLUK NOTU: kurallar ".fe-nav-link" ile degil, temanin kendi yolundan
   yaziliyor. Tema menu baglantilarini ".main-menu > nav > ul > li > a" (0,1,4)
   ile hedefliyor ve icinde color/font-size/font-weight var; duz ".fe-nav-link"
   (0,1,0) bu kurala kaybediyordu — yani onceki surumdeki renk ve punto HIC
   uygulanmiyor, menu temanin 16px/700/#1a1a1a degerleriyle ciziliyordu.
   Ayni yoldan yazinca (0,2,4) kazaniyor ve !important gerekmiyor. */

/* Menu satiri: SOLDA kayabilen kategori listesi, SAGDA sabit "Tum Kategoriler". */
.fe-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

/* Liste TEK SATIR. Onceden Bootstrap'in "d-flex gap-4"u ile sariyordu:
   "Mevsim ve Kir Cicekleri" gibi uzun adlar hem kendi ortasindan bolunuyor hem
   de menu cubugunu iki satira cikariyordu.

   nowrap + ogelerde white-space:nowrap ile ad asla bolunmez. Genislik yetmezse
   liste KENDI ICINDE kayar: taban durum 1440/1280'de zaten siğiyor, ama
   ~1000px'lik dar masaustunde ya da yonetici uzun adli kategoriler sectiginde
   menu SAYFAYI yatayda tasiriyordu (olculdu: 1000px ekranda 1070px). Kaydirma
   cubugu gizli — masaustunde gorsel gurultu, hem zaten fazlasina "Tum
   Kategoriler" penceresinden ulasiliyor. */
.fe-nav-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;

    flex: 1 1 auto;
    min-width: 0;              /* flex ogesi icerigi kadar genisleyip tasmasin */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fe-nav-list::-webkit-scrollbar { display: none; }
.fe-nav-list > li { flex: none; }

.main-menu > nav > ul > li > a.fe-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fe-green-deep);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .1px;
    white-space: nowrap;       /* kategori adi ortasindan bolunmesin */
    text-decoration: none;
    padding: 8px 11px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: color .18s ease;
}

/* HOVER/AKTIF: yalnizca YAZI renklenir.
   Onceki surumde ogenin ZEMINI doluyordu (koyu yesil hap). Uzerinden gecilen
   her ogede beliren dolu bir dikdortgen menuyu bir dugme sirasi gibi gosteriyor
   ve eski moda duruyordu. Modern gezinme cubuklari durumu renkle bildirir. */
.main-menu > nav > ul > li > a.fe-nav-link:hover,
.main-menu > nav > ul > li > a.fe-nav-link:focus,
.main-menu > nav > ul > li > a.fe-nav-link.active {
    color: var(--fe-green);
    background: transparent;
}

/* "Tum Kategoriler": bir baglanti degil, katalog penceresini acan dugme —
   ustteki "Katalog" dugmesiyle AYNI pencereyi acar, ikinci bir liste yok.
   Menudeki tek "eylem" oge oldugu icin ince bir cerceve tasiyor; kaymayan
   tarafta durdugundan her genislikte gorunur kalir.
   button. on eki: temanin genel <button> kurallarina takilmasin. */
button.fe-nav-all {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #e2eae5;
    border-radius: 8px;
    background: transparent;
    color: var(--fe-green-deep);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .1px;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}
button.fe-nav-all:hover,
button.fe-nav-all:focus {
    border-color: var(--fe-green);
    color: var(--fe-green);
    background: transparent;
}
button.fe-nav-all i {
    font-size: 13px;
    line-height: 1 !important;   /* uicons'un "line-height:0 !important" kuralini ez */
}

/* Dar masaustunde (1200px alti) olculer bir kademe kisilir: kaydirmaya
   basvurmadan once yazidan tasarruf edilir. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .main-menu > nav > ul > li > a.fe-nav-link { font-size: 12.5px; padding: 8px 8px; }
    button.fe-nav-all { font-size: 12.5px; padding: 7px 9px; }
    .fe-nav { gap: 6px; }
}

/* Menu cubugunu icerikten ayiran ince cizgi. Golge DEGIL: sticky hale
   geldiginde golge sayfanin uzerine "kutu" gibi biner; cizgi sakin kalir. */
.header-bottom.sticky-bar {
    border-bottom: 1px solid #eef1f2;
}

/* ================================================================
   MASAUSTU HEADER AKSIYONLARI (.fe-d-action)

   Mobilde ikonlari kutuya almistik; masaustu ELDE KALMISTI: sepet ve uye
   ikonlari cerceve/zemin tasimayan, gri, 14px'lik iki glifti — tiklanabilir
   olduklari ancak imlec uzerine gelince anlasiliyordu.

   Mobildekiyle AYNI dil: 40x40 acik gri kutu, koyu ikon, hover'da marka
   tonu. Iki kirilim arasinda tek fark boyut (masaustunde 40, mobilde 38).
   ================================================================ */
.fe-d-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #f2f4f5;
    color: #1f2b26 !important;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.fe-d-action:hover,
.fe-d-action:focus {
    background: #e6eaec;
    color: var(--fe-green-deep) !important;
}
.fe-d-action i {
    font-size: 19px;
    line-height: 1 !important;   /* uicons'un "line-height:0 !important" kuralini ez */
}

/* Sepet rozeti: kutunun sag ust kosesinde, beyaz halkayla zeminden ayrilir.
   Mobil rozetle ayni bicim (.fe-m-action__badge) — iki kirilimda ayni sayi
   ayni gorunsun. */
.fe-d-action__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--fe-green-deep);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* ---- Arama ----
   Onceki halinde gonderme butonu SEFFAF zeminli gri bir buyutecti: alanin
   icinde kayboluyor, "arama yapilabilir" mesajini yalnizca placeholder
   veriyordu. Buton artik dolu ve marka renginde — bigjoy'daki turuncu
   dairenin bizdeki karsiligi.

   OZGULLUK NOTU: secici "button.fe-search-btn" (0,1,1) — duz ".fe-search-btn"
   (0,1,0) temanin "button[type=submit]" (0,1,1) kuralina kaybediyordu ve buton
   temanin turkuazi ile "padding: 12px 40px" olarak, yani alanin yarisini
   kaplayan bir dikdortgen olarak ciziliyordu. Esit ozgullukte flowereast.css
   daha sonra yuklendigi icin kazaniyor; !important gerekmiyor. */
button.fe-search-btn {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--fe-green-deep);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
button.fe-search-btn:hover,
button.fe-search-btn:focus {
    background: var(--fe-green-deep-hover);
    color: #fff;
}
button.fe-search-btn i { font-size: 15px; line-height: 1 !important; }

/* Alanin kendisi de bir tik belirgin: kenarlik acik griden bir ton koyuya,
   odakta marka yesili halka. */
#fe-search-input {
    border-color: #dde3e6 !important;
    padding-right: 46px !important;   /* dolu butonun altina metin girmesin */
}
#fe-search-input:focus {
    border-color: var(--fe-green) !important;
    box-shadow: 0 0 0 3px rgba(46, 125, 91, .15);
}

/* ================================================================
   MOBIL HEADER AKSIYONLARI (.fe-m-action)

   SORUN: dort oge (ulke, takip, sepet, menu) satirda kendi basina duran, farkli
   boyutlarda ve farkli dokunma hedeflerine sahip ikonlardi. Bir SVG dosyasi
   (kalp), iki ikon fontu glifi ve uc <span>'den olusan bir hamburger — uc ayri
   cizim tekni, uc ayri olcu. Satir bu yuzden hem sikisik hem dagink goruyordu.

   COZUM: hepsi AYNI kutuda — 38x38, acik gri zemin, yumusak kose. Kutu iki isi
   birden yapiyor: ogeleri gorsel olarak esitliyor ve her birine parmakla
   rahatca vurulabilen bir hedef veriyor.

   Ozgulluk notu: tema bu baglantilari ".header-action-2 .header-action-icon-2 > a"
   (0,2,1) ile hedefliyor ve icinde display/width/margin var. Kurallar ayni yoldan
   yaziliyor ki !important'a gerek kalmasin (ayni gerekce: bir alttaki ulke
   secicisi blogu).
   ================================================================ */
.header-action-2 .header-action-icon-2 > a.fe-m-action,
.header-action-2 .header-action-icon-2 > .fe-m-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 11px;
    background: #f2f4f5;
    color: #1f2b26;
    text-decoration: none;
    transition: background .15s ease;
}
.header-action-2 .header-action-icon-2 > a.fe-m-action:hover,
.header-action-2 .header-action-icon-2 > a.fe-m-action:focus {
    background: #e6eaec;
    color: var(--fe-green-deep);
}
/* Glif: uicons'un "line-height:0 !important" kurali kutunun icinde ortalamayi
   bozuyor, geri aliniyor (ayni duzeltme ulke secicisinde de var). */
.header-action-2 .header-action-icon-2 > a.fe-m-action i {
    font-size: 19px;
    line-height: 1 !important;
    display: block;
}

/* Sepet rozeti: kutu artik zeminli oldugu icin rozet kutunun SAG UST kosesine
   tasar. Beyaz halka, rozetin zeminle karismasini onler. */
.fe-m-action__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--fe-green-deep);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* Hamburger kutusu: kutu burger'in KAPSAYICISINA veriliyor, cunku temanin
   acilma animasyonu .burger-icon icindeki MUTLAK konumlu span'lara dayaniyor ve
   o kutunun 24x20 olcusunu degistirmek cizgileri dagitirdi (bkz. _Layout). */
.header-action-2 .header-action-icon-2.fe-m-action-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 11px;
    background: #f2f4f5;
}
/* Cizgiler komsu ikonlarla ayni renkte. Tema "burger-icon-white" ile beyaz
   cizdiriyor — beyaz header'da gorunmez oluyordu; ayni hata gecmiste sepet
   ikonunda da yasanmisti (bkz. bu dosyadaki "Mobil header aksiyon ikonlari"
   notu). */
.header-action-2 .header-action-icon-2.fe-m-action-box .burger-icon > span {
    background-color: #1f2b26;
}

/* ---- Teslimat ulkesi secicisi (yalnizca mobil header) ----

   IMLEC BAYRAGIN USTUNE BINIYORDU — SEBEP OZGULLUK, satir yuksekligi DEGIL.

   Onceki denemede kurallar ".fe-m-country__btn" ile yazilmisti = ozgulluk (0,1,0).
   Temanin ayni baglantiyi hedefleyen kurali ise (main.css:5408)
   ".header-action-2 .header-action-icon-2 > a" = (0,2,1) ve icinde
   "display: inline-block" var. Yani benim "display: inline-flex" bildirimim HIC
   UYGULANMIYORDU: kutu inline-block kaliyor, dolayisiyla align-items ve gap de
   olu birer bildirim oluyor, cocuklar SATIR ICI diziliyordu. Satir ici dizilimde
   uicons'un "i[class^='fi-rs-'] { line-height: 0 !important }" kurali imlecin
   satir kutusunu cokertiyor ve glif komsusunun — bayragin — uzerine tasiyordu.
   Gecen sefer yalnizca <i>'nin ic olculeri duzeltildigi, kapsayicinin display'i
   hic degismedigi icin gorunum aynen kaldi.

   Ayni sekilde bayragin olcusunu de tema veriyordu:
   ".header-action-2 .header-action-icon-2 > a img" = (0,2,2) icinde
   "width:100%; max-width:25px; opacity:.8" var; benim (0,1,0) kuralim kaybediyordu.

   COZUM: kurallar temanin atalari uzerinden yazildi, boylece ozgullukle KAZANIYOR
   ve !important'a gerek kalmiyor:
     a.fe-m-country__btn                    -> (0,3,1)  > (0,2,1)
     ... img.fe-m-country__flag             -> (0,4,2)  > (0,2,2)
   Kirilimlara ozel tema kurallari da (main.css:9212 / 9442) ayni (0,2,1)
   ozgullugunde oldugu icin bu secicilerin altinda kaliyor. */
/* Komsu ikonlarla AYNI kutu dili: ayni yukseklik, ayni zemin, ayni kose yaricapi
   (bkz. .fe-m-action). Tek farki genisligi icerige gore degismesi — icinde bayrak
   ve (genis ekranda) ulke adi var. */
.header-action-2 .header-action-icon-2 > a.fe-m-country__btn {
    display: inline-flex;
    align-items: center;      /* uc oge de dikeyde ortali */
    justify-content: center;
    gap: 6px;
    width: auto;              /* tema "width: 1em" veriyor (tek ikon varsayimi) */
    height: 38px;
    padding: 0 10px;
    margin: 0;
    border-radius: 11px;
    background: #f2f4f5;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s ease;
}
.header-action-2 .header-action-icon-2 > a.fe-m-country__btn:hover,
.header-action-2 .header-action-icon-2 > a.fe-m-country__btn:focus {
    background: #e6eaec;
}

/* Imlec: kendi olcusu olan bir esnek kutu. line-height geri aliniyor (uicons
   !important tasidigi icin burada da gerekiyor), glif kutunun ICINDE ortalaniyor.
   flex:0 0 auto — dar ekranda ad gizlenirken ezilmesin. */
.header-action-2 .header-action-icon-2 > a.fe-m-country__btn i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1 !important;
    color: var(--fe-green);   /* teslimat konumu vurgusu; komsu ikonlar notr kalir */
}

/* Bayrak: temanin "width:100%; max-width:25px; opacity:.8" kurali eziliyor. */
.header-action-2 .header-action-icon-2 > a.fe-m-country__btn img.fe-m-country__flag {
    flex: 0 0 auto;
    display: block;
    width: 20px;
    max-width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    opacity: 1;
}

.header-action-2 .header-action-icon-2 > a.fe-m-country__btn .fe-m-country__name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: #212529;
    line-height: 1;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* DAR EKRAN: ulke ADI dusurulur, bayrak + imlec kalir. Secili ulke yine
   okunabilir (bayrak) ve dokunmatik hedef korunur; ad modalda zaten yaziyor.
   Esik 576px: temanin ikon araliklarini daralttigi kirilimla ayni. */
@media (max-width: 575.98px) {
    .fe-m-country__name { display: none; }

    /* Dort eleman icin aralik daraltmasi. Temanin bu kirilimde her baglantiya
       verdigi 10px sag margin (main.css:9212) da sifirlaniyor — tek basina 40px
       yer yiyordu ve dorduncu eleman bu yuzden tasiyordu. */
    .header-action-2 .header-action-icon-2 { padding: 0 5px; }
    .header-action-2 .header-action-icon-2 > a { margin-right: 0; }
    .header-action-2 .header-action-icon-2:last-child { padding-right: 0; }
}

/* Ayni satirdaki tanitim metni ("🌸 FlowerEast — Uluslararasi Cicek Teslimati")
   HER GENISLIKTE gizli. Metin logonun HEMEN yaninda yine "FlowerEast" yazdigi icin
   tekrar ediyor ve yerin en kisitli oldugu noktada logo ile aksiyonlarin arasina
   giriyor.

   ONCEKI KURAL YANLIS ARALIGI KAPATIYORDU: burada "<576px'te goruntuleniyor" yaziyordu,
   oysa temanin kurali (main.css:9386) "min-width:768px ve max-width:992px". Yani metin
   hic gorunmedigi bir aralikta gizleniyor, GERCEKTEN gorundugu aralikta ise aciktaydi.
   Sonucu 19 Eylul 2026'da olculdu: 992px'te <p> kendi flex satirindan 94px tasiyor
   (sag kenari 1059, kap 977) ve TUM SAYFADA yatay kaydirma uretiyordu.

   Medya sorgusu YOK: temanin taban kurali zaten display:none, yalnizca o tek medya
   sorgusu aciyor. Kosulsuz gizlemek hem o sorguyu hem ileride eklenebilecek baskasini
   kapatir — aralik takip etmek gerekmez. */
.mobile-promotion { display: none !important; }

/* ================================================================
   SEPET PANELI (.fe-drawer) — sagdan acilan sepet

   NEDEN PANEL: sepet ikonu kullaniciyi baktigi sayfadan KOPARIYORDU. Bir urun
   ekleyip sepete bakmak isteyen kisi listeyi kaybediyor, geri dondugunde kaldigi
   yeri bulabilirse sansliydi. Panel sepeti gosterir ama sayfayi terk ettirmez.

   YAPI — uc bolge, YALNIZCA ORTASI KAYAR:
     .fe-drawer__head      baslik + kapat        (sabit)
     .fe-drawer__body      icerik kapsayicisi    (esner)
       .fe-drawer__scroll    kalemler            (KAYAR)
       .fe-drawer__foot      tarih+toplam+onay   (sabit)

   Sepet sayfasinda "Siparisi Tamamla" ozet blogunun en altindaydi; dort-bes kalemli
   bir sepette buton ekranda hic gorunmuyordu ve kullanici onu aramak icin kaydirmak
   zorunda kaliyordu. Panelde her zaman gorunur.
   ================================================================ */
.fe-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 28, .45);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 1045;
}
.fe-drawer-backdrop.is-open { opacity: 1; }

.fe-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -8px 0 32px rgba(16, 24, 28, .16);
    /* Kapaliyken tamamen disarida. "hidden" ile birlikte calisir: hidden gecisi
       oynatmadigi icin JS once hidden'i kaldirip bir kare bekliyor. */
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1046;
}
.fe-drawer.is-open { transform: translateX(0); }

/* Panel acikken arkadaki sayfa kaymaz: kaydirma paneldeki listeye ait olmali,
   yoksa parmak hareketi arkadaki katalogda geziniyormus gibi hissettiriyor. */
body.fe-drawer-open { overflow: hidden; }

.fe-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #eef0f1;
    flex: none;
}
.fe-drawer__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fe-green-deep);
}
.fe-drawer__title i { font-size: 1.05rem; line-height: 1 !important; }

.fe-drawer__close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: #f2f4f5;
    color: #1f2b26;
    cursor: pointer;
    flex: none;
    transition: background .15s ease;
}
.fe-drawer__close:hover { background: #e6eaec; }
.fe-drawer__close i { line-height: 1 !important; font-size: 15px; }

/* Govde: kabugun esneyen parcasi. Kaydirma BURADA DEGIL bir alt katmanda —
   alt blogun sabit kalmasi buna bagli. */
.fe-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.fe-drawer__loading {
    padding: 28px 18px;
    color: #8b9296;
    font-size: .9rem;
    text-align: center;
}

.fe-drawer__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 18px;
}

/* ---- Uyarilar ---- */
.fe-drawer__alert {
    margin: 10px 0;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: .82rem;
    line-height: 1.5;
}
.fe-drawer__alert--warn   { background: #fff6e5; color: #7a5200; }
.fe-drawer__alert--danger { background: #fdecec; color: #8f2020; }
.fe-drawer__alert--info   { background: #eaf4ff; color: #17527f; }

/* ---- Kalem ---- */
.fe-drawer-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f3f4;
}
.fe-drawer-item:last-child { border-bottom: 0; }

.fe-drawer-item__img {
    flex: none;
    width: 68px;
    height: 68px;
    border: 1px solid #eef0f1;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.fe-drawer-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fe-drawer-item__main { flex: 1 1 auto; min-width: 0; }

/* Uzun urun adi paneli genisletmesin: iki satirda kirpilir. */
.fe-drawer-item__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--fe-green-deep) !important;
    text-decoration: none;
}
.fe-drawer-item__tag {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    background: #f2f4f5;
    color: #6b7280;
    font-size: .7rem;
}
.fe-drawer-item__tag--danger { background: #fdecec; color: #8f2020; }

/* Adet, tutar ve sil AYNI satirda: dar panelde her biri kendi satirini alsaydi
   tek kalem ekranin ucte birini yerdi. */
.fe-drawer-item__row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.fe-drawer-item__price {
    margin-left: auto;
    text-align: right;
    line-height: 1.25;
}
.fe-drawer-item__total {
    display: block;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--fe-green-deep);
    white-space: nowrap;
}
.fe-drawer-item__price .fe-old-price { font-size: .78rem; }

.fe-drawer-item__remove {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #a3a9ad;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.fe-drawer-item__remove:hover { background: #fdecec; color: #b02a2a; }
.fe-drawer-item__remove i { line-height: 1 !important; font-size: 14px; }

/* ---- Sabit alt blok ---- */
.fe-drawer__foot {
    flex: none;
    padding: 14px 18px 18px;
    border-top: 1px solid #eef0f1;
    background: #fff;
    /* iOS'ta ekranin alt cubugunun altinda kalmasin. */
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.fe-drawer__foot .fe-cart-datefield { margin-bottom: 12px; }

.fe-drawer__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    font-size: .95rem;
    color: #4a5155;
}
.fe-drawer__total-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--fe-green-deep);
    white-space: nowrap;
}
.fe-drawer__note {
    margin: 0 0 10px;
    font-size: .72rem;
    color: #9aa0a4;
    text-align: right;
}

.fe-drawer__confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin-top: 6px;
    border: 0;
    border-radius: 12px;
    background: var(--fe-green-deep);
    color: #fff !important;
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.fe-drawer__confirm:hover:not([disabled]) {
    background: var(--fe-green-deep-hover);
    color: #fff !important;
}
.fe-drawer__confirm[disabled] { background: #c3c9cc; cursor: default; }

.fe-drawer__blocked {
    margin: 8px 0 0;
    font-size: .78rem;
    color: #8b9296;
    text-align: center;
}
.fe-drawer__link {
    display: block;
    margin-top: 10px;
    font-size: .82rem;
    color: #6b7280;
    text-align: center;
    text-decoration: underline;
}
.fe-drawer__link:hover { color: var(--fe-green-deep); }

/* ---- Bos sepet ---- */
.fe-drawer__empty { padding: 48px 24px; text-align: center; }
.fe-drawer__empty-icon { font-size: 44px; color: #dfe3e5; line-height: 1; margin-bottom: 14px; }
.fe-drawer__empty h3 { font-size: 1.05rem; font-weight: 600; color: #1f2b26; margin-bottom: 6px; }
.fe-drawer__empty p { font-size: .86rem; color: #8b9296; margin-bottom: 18px; }
.fe-drawer__cta {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 12px;
    background: var(--fe-green-deep);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
}

/* Mobil: panel tam genislik. 420px'lik sabit genislik 375px'lik telefonda zaten
   kirpilirdi; acikca tam genislik vermek kenarda yarim kalan bir serit birakmaz. */
@media (max-width: 480px) {
    .fe-drawer { width: 100%; }
    .fe-drawer__head { padding: 13px 14px; }
    .fe-drawer__scroll { padding: 4px 14px; }
    .fe-drawer__foot { padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* ================================================================
   UYE PANELI — .fe-acc-*

   Onceki hali tek bir kutuydu: solda ad + cikis, sagda siparis tablosu.
   Adres defteri, profil ve sifre degistirme eklenince o duzen sekmesiz
   kaldi; kullanicinin gidebilecegi yerler ekranda gorunmuyordu.

   Yeni duzen: ustte "Merhaba, <Ad>" seridi, solda dikey sekme menusu,
   sagda icerik karti. Masaustunde iki kolon, mobilde sekmeler yatay
   kaydirilan bir serit olur — dikey menu telefonda ekranin yarisini
   yiyordu.

   Kart bileseni yeniden kullaniliyor: icerik kutulari .fe-authcard
   (giris/kayit ekranlarindaki kart) ile ayni ailedendir.
   ================================================================ */
.fe-acc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.fe-acc-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ecf3ee;
    color: var(--fe-green-deep);
    font-size: 22px;
}
.fe-acc-hello { line-height: 1.25; }
.fe-acc-hello span { display: block; font-size: .82rem; color: #8b9296; }
.fe-acc-hello strong { font-size: 1.3rem; font-weight: 700; color: #1f2b26; }

/* Cikis SAGA itilir: yikici olmayan ama geri donusu olan tek eylem —
   sekmelerin arasinda durursa yanlislikla tiklanma ihtimali artiyor. */
.fe-acc-logout { margin-left: auto; }
.fe-acc-logoutbtn,
button.fe-acc-logoutbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid #dde3e6;
    border-radius: 10px;
    background: #fff;
    color: #6b7378;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.fe-acc-logoutbtn:hover,
button.fe-acc-logoutbtn:hover {
    border-color: #cbd4d8;
    background: #f7f9fa;
    color: #1f2b26;
}

/* ---- Sekme menusu ---- */
.fe-acc-tabs { display: flex; flex-direction: column; gap: 8px; }
.fe-acc-tab {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px;
    border: 1px solid #e8ecee;
    border-radius: 12px;
    background: #fff;
    color: #4a5155;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    /* Sol kenardaki 3px'lik serit YALNIZCA aktif sekmede renkleniyor. Pasif
       sekmelerde de yer kapliyor ki secim degisince metin yatay kaymasin. */
    border-left: 3px solid transparent;
}
.fe-acc-tab i { font-size: 17px; line-height: 1; color: #9aa0a4; }
.fe-acc-tab:hover { border-color: #d3e3d9; background: #f7faf8; color: var(--fe-green-deep); }
.fe-acc-tab:hover i { color: var(--fe-green-deep); }
.fe-acc-tab.is-active {
    background: var(--fe-green-deep);
    border-color: var(--fe-green-deep);
    border-left-color: var(--fe-green-deep);
    color: #fff;
}
.fe-acc-tab.is-active i { color: #fff; }

/* ---- Ozet ekranindaki kisayol kartlari ---- */
.fe-acc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}
.fe-acc-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    border: 1px solid #e8ecee;
    border-radius: 14px;
    background: #fff;
    color: #1f2b26;
    text-decoration: none;
}
.fe-acc-card:hover { border-color: #d3e3d9; background: #f7faf8; }
.fe-acc-card i { font-size: 21px; color: var(--fe-green-deep); line-height: 1; }
.fe-acc-card strong { display: block; font-size: .95rem; font-weight: 600; }
.fe-acc-card small { display: block; font-size: .78rem; color: #8b9296; }

/* ---- Adres kartlari ---- */
.fe-addr-list { display: grid; gap: 12px; }
.fe-addr {
    position: relative;
    padding: 16px 18px;
    border: 1px solid #e8ecee;
    border-radius: 14px;
    background: #fff;
}
/* Varsayilan adres cerceveden ayrilir: checkout'a bu adres gelecek, kullanici
   listeyi okumadan hangisi oldugunu gorebilmeli. */
.fe-addr.is-default { border-color: var(--fe-green); background: #f7faf8; }
.fe-addr__title { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.fe-addr__title strong { font-size: 1rem; font-weight: 700; color: #1f2b26; }
.fe-addr__badge {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--fe-green-deep);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
}
.fe-addr__body { font-size: .88rem; color: #6b7378; line-height: 1.6; }
.fe-addr__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #eef1f3;
}
.fe-addr__btn,
button.fe-addr__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid #dde3e6;
    border-radius: 9px;
    background: #fff;
    color: #4a5155;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.fe-addr__btn:hover,
button.fe-addr__btn:hover { border-color: var(--fe-green); color: var(--fe-green-deep); }
/* Silme kirmiziya YALNIZCA imlec uzerine gelince doner: liste dururken uc
   kirmizi buton, dikkati yikici eyleme cekiyordu. */
.fe-addr__btn--danger:hover,
button.fe-addr__btn--danger:hover { border-color: #e4606d; color: #d9534f; }

.fe-acc-empty {
    padding: 34px 24px;
    border: 1px dashed #dde3e6;
    border-radius: 14px;
    text-align: center;
    color: #8b9296;
}

/* ---- Mobil ---- */
@media (max-width: 991.98px) {
    /* Dikey menu telefonda ekranin yarisini yiyordu; yatay kaydirilan bir
       serit oluyor. Sekmeler kirilmaz (nowrap), tasan kisim kaydirilir. */
    .fe-acc-tabs {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        margin-bottom: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .fe-acc-tabs::-webkit-scrollbar { display: none; }
    .fe-acc-tab { flex: 0 0 auto; padding: 10px 14px; font-size: .86rem; }
    .fe-acc-head { gap: 11px; margin-bottom: 18px; }
    .fe-acc-avatar { width: 44px; height: 44px; font-size: 19px; }
    .fe-acc-hello strong { font-size: 1.1rem; }
    /* Cikista metin gizlenir, ikon kalir: serit tek satirda kalsin. */
    .fe-acc-logoutbtn span { display: none; }
    .fe-acc-logoutbtn, button.fe-acc-logoutbtn { padding: 9px 12px; }
}

/* ================================================================
   HEADER HESAP MENUSU — .fe-accmenu

   Masaustu ve mobil AYNI menuyu gosteriyor (liste _Layout icinde tek
   yerde). Onceki hali iki satirdi ("Hesabim", "Siparis Takip"); uye
   paneli bilgiler/adresler/siparisler/sifre sekmelerine bolununce o
   sayfalara header'dan ulasmanin yolu kalmadi — kullanici once panele
   girip oradan sekme secmek zorundaydi.

   Mobilde ayri bir bilesen YAZILMADI: Bootstrap dropdown zaten yuklu ve
   ayni isaretlemeyi kullanmak, iki menunun zamanla ayrisma riskini
   ortadan kaldiriyor.
   ================================================================ */
.fe-accmenu {
    min-width: 232px;
    padding: 6px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 24, 28, .12) !important;
}

/* DAR EKRANDA KONUMLANDIRMA POPPER'DAN GERI ALINIYOR.
   Hesap ikonu header'in sagina yakin duruyor ve menu 232px genisliginde. 375px'lik bir
   telefonda Popper'in yerlestirdigi menu ekranin sagindan tasiyordu (olculdu: 231px'ten
   basliyor, 441px'te bitiyor, yani ~66px disarida). Kullanici ikona basiyor, menu
   aciliyor ama ekranin disinda kaldigi icin "hicbir sey olmadi" gibi gorunuyor.

   Projedeki Bootstrap 5.0.0-beta2 bir on-surum ve bu dosyada/­_Layout'ta ayni surumun
   baska iki hatasi icin de yedek yazilmis durumda (modal hide'in yutulmasi, data-bs-dismiss).
   Popper'in hesabina guvenmek yerine menuyu DOGRUDAN tetikleyicinin sag kenarina
   sabitliyoruz: inline transform !important ile eziliyor, boylece sonuc her zaman ekran icinde.

   Kapsayici (.header-action-icon-2.dropdown) position:relative tasiyor, absolute konum
   ona gore cozuluyor. Genislik de viewport'a kilitlendi: cok dar cihazlarda bile tasmaz. */
@media (max-width: 991.98px) {
    /* MENU KIRPAN KUTUDAN KACIRILIYOR — position: fixed.
       Header'daki .header-bottom uzerinde overflow:hidden var ve o kutu yalnizca 50px
       yuksekliginde. Menu (210x138) absolute konumlandirildiginda cizilyor ama o kutunun
       disinda kaldigi icin TAMAMEN kirpiliyordu: ekranda hicbir sey gorunmuyor, ikon
       "tepki vermiyor" gibi hissediliyordu. Bootstrap'in kendi dropdown'i da ayni
       sebepten gorunmuyordu — sorun o bilesende degilmis.

       NEDEN OLCUMLE BULUNAMADI: getBoundingClientRect UST OGE KIRPMASINI hesaba katmaz,
       yani menu "210x138, ekran icinde" olarak olculuyordu. Teshis, ust ogelerin
       overflow degerleri taranarak konuldu.

       fixed olan eleman ust ogenin overflow'undan ETKILENMEZ (ancestor'da transform ya da
       filter olmadigi surece — zincirde ikisi de yok, kontrol edildi). Konum acilis aninda
       JS ile tetikleyicinin kutusundan hesaplaniyor (bkz. _Layout.cshtml fe-m-account). */
    .fe-accmenu.dropdown-menu {
        min-width: 210px;
        max-width: calc(100vw - 24px);
    }
    .fe-accmenu.dropdown-menu.fe-open {
        display: block;
        position: fixed;
        margin: 0;
        transform: none;
        left: auto;
        /* Header'in ustunde, ulke modalinin (1055) altinda kalsin. */
        z-index: 1080;
    }
}


/* Kimin hesabi acik: menunun basinda. Once yalnizca panele girince
   anlasiliyordu; paylasilan bir bilgisayarda yanlis hesapla siparis
   vermenin en sik sebebi bu. */
.fe-accmenu__who {
    padding: 10px 12px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #eef1f3;
    line-height: 1.25;
}
.fe-accmenu__who span { display: block; font-size: .74rem; color: #8b9296; }
.fe-accmenu__who strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: #1f2b26;
    /* Uzun ad menuyu genisletmesin: tasan kisim kirpilir. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fe-accmenu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: #4a5155;
    font-weight: 500;
}
.fe-accmenu__item i { font-size: 15px; line-height: 1; color: #9aa0a4; }
.fe-accmenu__item:hover,
.fe-accmenu__item:focus {
    background: #f3f7f4;
    color: var(--fe-green-deep);
}
.fe-accmenu__item:hover i,
.fe-accmenu__item:focus i { color: var(--fe-green-deep); }

/* Mobilde menu ekran kenarina yapismasin ve dar telefonda tasmasin. */
@media (max-width: 575.98px) {
    .fe-accmenu {
        min-width: 210px;
        max-width: calc(100vw - 24px);
    }
}

/* ================================================================
   ULKE BANDI — .fe-band

   TEK BANT. Onceden burada UC ayri bolum vardi:
     1) .fe-cband  — iki sutunlu ulke bandi, sag yarisi beyaz "teslimat karti"
                     (tarih + uc rozet + ulkeyi degistir butonu),
     2) .fe-occasions — "Neden gonderiyorsunuz?" niyet seridi,
     3) .fe-how    — "Yurt disina cicek nasil gidiyor?" uc adim karti.
   Uclusu 1080p bir ekranda yaklasik 1000 piksel tutuyor ve urun izgarasini ilk
   goruntunun tamamen disina itiyordu: cicek satan bir sayfa aciliyor ve ekranda
   hic cicek gorunmuyordu.

   Uc bolum de ayni soruya cevap veriyordu — "nereye, ne zaman, nasil gidiyor?" —
   bu yuzden tek bir INCE banda toplandi. Rozetler silindi cunku ucu de asagidaki
   adimlarin ve tazelik notunun kisaltilmis halinden ibaretti; ayni sey ayni
   bantta iki kez yaziliyordu.

   Palet DEGISMEDI: krem zemin + terrakota vurgu, marka yesili butonlarda ve
   fiyatlarda kaliyor. Kontrast: #7A3A18 metin / #FDF6EF zemin = 8.9:1 (WCAG AAA).
   ================================================================ */
:root {
    --fe-terra: #C4632B;        /* vurgu — ikonlar, numaralar */
    --fe-terra-dark: #A44E1D;   /* buton zemini; beyaz metinle 5.70:1 */
    --fe-terra-ink: #7A3A18;    /* metin tonu */
    --fe-cream: #FDF6EF;        /* bant zemini */
    --fe-cream-line: #F0E2D4;   /* cerceve ve ayirici */
}

.fe-band { padding-top: 0; padding-bottom: 20px; }
.fe-band__box {
    background: linear-gradient(135deg, var(--fe-cream) 0%, #FAEEE2 100%);
    border: 1px solid var(--fe-cream-line);
    border-radius: 16px;
    padding: 16px 22px;
    color: var(--fe-terra-ink);
}

/* Ust satir: SOLDA kimlik (bayrak + h1 + tek cumle), SAGDA eylem (en erken
   teslim + ulkeyi degistir). Ikisi ayni satirda: dikey siralandiklarinda bant
   tek basina 200 pikseli asiyordu. */
.fe-band__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
/* TEMEL OLCU 340px, "auto" DEGIL. Satir sarmali acik oldugu icin tarayici once
   flex-basis'e bakiyor; "auto" verilince bu kutunun temeli aciklama cumlesinin
   max-content genisligi oluyor, tek basina satiri dolduruyor ve sagdaki eylem
   grubu (teslim tarihi + buton) alt satira dusuyordu — olculdu: bant 63px uzuyor.
   Kucuk bir temel olcu ile ikisi ayni satirda kaliyor, metin de bosluga yayiliyor.
   Dar ekranda (toplam < ~860px) sarma yine kendiliginden devreye giriyor. */
.fe-band__id { display: flex; align-items: center; gap: 14px; flex: 1 1 340px; min-width: 0; }
.fe-band__flag {
    height: 34px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    flex: 0 0 auto;
}
/* Sayfanin TEK h1'i. 1.8rem'den 1.45'e indi: bant artik sayfanin en buyuk
   basligini tasiyan bir blok degil, vitrine giden bir satir. */
.fe-band__title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--fe-terra-ink);
    line-height: 1.25;
    margin: 0 0 2px;
}
.fe-band__desc { font-size: .92rem; line-height: 1.5; color: #94614A; margin: 0; }

.fe-band__act { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.fe-band__when {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--fe-cream-line);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: .92rem;
    white-space: nowrap;
}
.fe-band__when strong { color: var(--fe-terra-dark); }
/* Tarihin kendisi bir ton geride: "yarin" once okunmali, tarih onu dogrulamali. */
.fe-band__when-date { color: #94614A; font-size: .88em; }
.fe-band__when-ico { display: inline-flex; font-size: 16px; color: var(--fe-terra); }

/* Buton MARKA YESILI, terrakota degil: "Ulkeyi Degistir" bir eylem ve sitede eylemin
   rengi yesil (bkz. renk hiyerarsisi). Terrakota bantta ikon, numara ve metin vurgusu
   olarak kaliyor — ikinci bir "tiklanacak sey" rengi olarak degil. */
.fe-band__btn,
button.fe-band__btn {
    border: 0;
    background: var(--fe-green-deep);
    color: #fff;
    cursor: pointer;
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: .92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.fe-band__btn:hover,
.fe-band__btn:focus,
button.fe-band__btn:hover,
button.fe-band__btn:focus { background: var(--fe-green-deep-hover); color: #fff; }

/* Adimlar KART DEGIL SATIR — ve YALNIZCA TELEFONDA.
   >=768px'te bu blok gizli, adimlar hero'nun sag alt kartinda donuyor
   (bkz. .fe-stepcard ve Shared/_HomeSteps). <768px'te hero'nun sag sutunu zaten
   gizlendigi icin kart cizilmiyor; adimlar o genislikte burada duruyor.
   Ikisi ayni anda GORUNMEZ. */
.fe-band__how {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--fe-cream-line);
}
/* Kapali satir: 44px dokunma hedefi, sagda acilip kapanma okunu gosteren isaret. */
.fe-band__how-sum {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    cursor: pointer;
    font-weight: 700;
    font-size: .9rem;
    color: #1f2b26;
}
.fe-band__how-sum::-webkit-details-marker { display: none; }
.fe-band__how-sum::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--fe-terra);
    border-bottom: 2px solid var(--fe-terra);
    transform: rotate(45deg) translateY(-3px);
    transition: transform .2s ease;
}
.fe-band__how[open] .fe-band__how-sum::after { transform: rotate(-135deg) translateY(-2px); }
.fe-band__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 26px;
    padding: 4px 0 6px;
}
.fe-band__step { display: flex; align-items: flex-start; gap: 10px; }
.fe-band__num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fe-terra-dark);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.fe-band__steptext { font-size: .85rem; line-height: 1.55; color: #7d5340; }
.fe-band__steptext strong { display: block; color: #1f2b26; font-size: .9rem; font-weight: 700; }

/* Tazelik taahhudu: gercek metin Iptal ve Iade Politikasi m.3'te, o yuzden
   yaninda baglantisi duruyor — ikisi birlikte degismeli. */
.fe-band__note { margin: 10px 0 0; font-size: .84rem; line-height: 1.6; color: #7d5340; }
.fe-band__note-ico { color: var(--fe-terra); }
.fe-band__note-link {
    color: var(--fe-terra-dark);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.fe-band__note-link:hover { color: #8F4318; }

/* >=768px: adimlar hero kartina tasindi, buradaki blok gizleniyor. Ayirici cizgi
   adimlarin ustundeydi; onlar gidince tazelik notunun ustune geciyor, aksi halde
   not bandin geri kalanina yapisik kaliyordu. */
@media (min-width: 768px) {
    .fe-band__how { display: none; }
    .fe-band__note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fe-cream-line); }
}

@media (max-width: 991.98px) {
    .fe-band__steps { grid-template-columns: 1fr; gap: 12px; }
    .fe-band__act { width: 100%; }
    .fe-band__when { flex: 1 1 auto; justify-content: center; white-space: normal; }
}
@media (max-width: 575.98px) {
    .fe-band__box { padding: 16px; }
    .fe-band__title { font-size: 1.15rem; }
    /* Aciklama cumlesi telefonda gizli: baslik ("Turkiye'ye Taze Cicek Gonderimi") ve
       hemen alttaki "nasil gidiyor?" satiri ayni seyi soyluyor; uc satirlik tekrar
       urunleri asagi itiyordu. */
    .fe-band__desc { display: none; }
    .fe-band__act { flex-direction: column; align-items: stretch; }
    .fe-band__btn { justify-content: center; }
}

/* ---- Hakkimizda gorsel ikilisi ----
   Katalogdan gelen iki urun fotografi yan yana. Sabit oran (4/5, portre) veriliyor:
   urun fotograflari farkli boyutlarda yuklenebiliyor ve oransiz duran iki gorsel
   metnin yanindaki kolonu dengesiz birakirdi. */
.fe-about-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.fe-about-gallery__item {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(16, 24, 28, .10);
    aspect-ratio: 4 / 5;
    background: #f5f6f7;
}
.fe-about-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.fe-about-gallery__item:hover img { transform: scale(1.04); }

/* Tek gorsel kaldiysa tam genislige yayilsin, yarim kutu kalmasin. */
.fe-about-gallery__item:only-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

@media (max-width: 575.98px) {
    .fe-about-gallery { gap: 10px; }
    .fe-about-gallery__item { aspect-ratio: 1 / 1; }
}

/* ================================================================
   LISTE BASLIGI — .fe-listhead

   Urun listesi sayfasi (kategori / durum / ulke) ONCEDEN yalnizca
   KATEGORI secildiginde baslik ciziyordu. Durum sayfasinda ve duz
   /tr/urunler adresinde sayfada hic <h1> YOKTU: ikisi de indeksleniyor
   ve ziyaretci sayfanin neyi listeledigini yalnizca breadcrumb'dan
   anliyordu.

   Stiller Views/Product/Index.cshtml icinde gomulu bir <style> blogundaydi;
   proje stilleri fe- onekiyle bu dosyada toplaniyor (bkz. CLAUDE.md).
   ================================================================ */
/* ---- LISTE SAYFASI UST BLOGU ----
   DUZ YIGIN: baslik -> tanitim metni -> suzgec -> urun izgarasi.

   Suzgeci basligin YANINA almak iki kez denendi, ikisinde de reddedildi. Once
   metinle yan yana kondu (metin uc satira cikinca suzgec sayfanin ortasinda bosta
   asili kaldi), sonra baslik satirina alindi ("filtre urunlerin hemen ustunde
   olmali"). Suzgec, uzerinde is yaptigi seye — urun izgarasina — komsu olmali;
   yukarida durdugunda hangi listeyi daralttigi gorsel olarak kopuyor.

   Sablondaki DOM sirasi zaten bu, yani ek bir sarmalayici ya da flex "order"
   numarasi GEREKMIYOR. Her parca kendi alt boslugunu tasiyor. */
.fe-listhead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0 22px;
}
.fe-listhead__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f2b26;
    margin: 0 0 3px;
    line-height: 1.25;
}
/* Renk tasinirken OLCULDU ve duzeltildi: eski deger #8e8e8e beyaz zeminde 3.28:1 idi.
   Metin .9rem/400, yani WCAG'in "buyuk metin" esiginin altinda ve 4.5 gerekiyor.
   #6B7280 ile 4.88:1. Ton degismedi, yalnizca koyulastirildi. */
.fe-listhead__meta { color: #6b7280; font-size: .9rem; }

/* DURUM varyanti krem zeminli bir bant. Ayni kremi ve terrakotayi ulke bandi
   (.fe-band) ve urun detayindaki sebep rozetleri (.fe-pocc) de kullaniyor;
   kullanici nereden gelirse gelsin varis sayfasi ayni dille karsiliyor.
   Kategori basligi notr KALIYOR — terrakota bu sitede "niyet"in isareti,
   her basligin degil.
   NOT: ana sayfadaki niyet seridi (.fe-occasions) kaldirildi; durum sayfalarina
   giris artik urun detayindaki etiketlerden ve site haritasindan. */
.fe-listhead--occasion {
    background: var(--fe-cream);
    border: 1px solid var(--fe-cream-line);
    border-radius: 14px;
    padding: 16px 18px;
}
/* Kontrast krem zemine (#FDF6EF) gore olculdu:
     baslik  #7A3A18 -> 8.02:1 (AAA)
     sayac   #8A6247 -> 5.00:1 (AA)
   Sayac icin ilk secilen #9A7A63 kremde 3.67:1 kaliyordu — bant zemini beyazdan
   acik oldugu icin gri tonlar burada beyaz zemindekinden DAHA AZ kontrast veriyor. */
.fe-listhead--occasion .fe-listhead__title { color: var(--fe-terra-ink); }
.fe-listhead--occasion .fe-listhead__meta { color: #8a6247; }

.fe-listhead__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--fe-terra);
    font-size: 21px;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .fe-listhead__title { font-size: 1.3rem; }
    .fe-listhead--occasion { padding: 13px 14px; gap: 11px; }
    .fe-listhead__ico { width: 42px; height: 42px; font-size: 18px; }
}

/* ================================================================
   HERO — .fe-hero

   Iskelet rakiplerdekiyle ayni: solda buyuk blok, sagda alt alta iki kart.
   FARK, yazinin gorselde DEGIL HTML'de olmasi — gerekcesi Views/Home/Index.cshtml
   icindeki bolum aciklamasinda.

   OLCU: 840 + 20 + 430 = 1290 (sayfanin kap genisligi). Sag sutunun iki karti
   215 + 20 + 215 = 450 ediyor; sol blok da 840x450, yani iki sutun ayni yukseklikte
   bitiyor. Gorseller bu kutularin TAM IKI KATI uretildi (1680x900 ve 860x430), yani
   retina ekranda da net.
   ================================================================ */
/* ALT BOSLUK SIFIR OLAMAZ. Bir ara urunleri yukari cekmek icin 0 verilmisti ve
   koyu yesil hero ile altindaki krem ulke bandi BIRBIRINE YAPISIYORDU: iki farkli
   zemin arasinda tek piksel bosluk kalmayinca bant hero'nun devami gibi okunuyor,
   ikisi de kendi kenarini kaybediyordu. Kazanilan 22 piksel, sayfanin en ust
   bolgesinde yarattigi sikisiklige degmiyor. */
.fe-hero { padding-top: 18px; padding-bottom: 22px; }
.fe-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 840fr) minmax(0, 430fr);
    gap: 20px;
    max-width: 1290px;
    margin: 0 auto;
}
.fe-hero__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Yukseklikler sabit degil: genislik daraldiginda oranla kuculuyorlar. */
.fe-hero__main,
.fe-hero__card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}
.fe-hero__main { aspect-ratio: 840 / 450; }
.fe-hero__card { aspect-ratio: 430 / 215; }
.fe-hero__main > a,
.fe-hero__card > a { width: 100%; height: 100%; }

/* Tipografi kutu basina AYRI. Ortak .fe-slide__side-title degeri (40px'e kadar)
   buyuk blokta dogru, 430px'lik kartta tasar. */
.fe-hero__main .fe-slide__side-title { font-size: clamp(26px, 3.3vw, 48px); }
.fe-hero__main .fe-slide__side-inner > div { max-width: 52%; }
.fe-hero__card .fe-slide__side-title { font-size: clamp(17px, 1.7vw, 25px); }
.fe-hero__card .fe-slide__side-badge { font-size: clamp(9px, .8vw, 12px); }
.fe-hero__card .fe-slide__side-cta { font-size: clamp(12px, .95vw, 14px); }
.fe-hero__card .fe-slide__side-inner > div { max-width: 56%; }

/* ≤1024px: tek sutun. Kartlar sol bloktan sonra alt alta gelir. */
@media (max-width: 1024px) {
    .fe-hero__grid { grid-template-columns: 1fr; max-width: 620px; }
    .fe-hero__main { aspect-ratio: 16 / 10; }
    .fe-hero__card { aspect-ratio: 2 / 1; }
}

/* ≤768px: YALNIZCA buyuk blok kalir.
   Gerekce home-sliders.css'te de yazili olan karar: mobilde ilk ekran uc banner ile
   dolunca ziyaretci urunlere ulasmak icin epeyce kaydiriyordu. Kartlarin gosterdigi
   kategorilere header menusunden ve niyet seridinden zaten ulasiliyor. */
@media (max-width: 767.98px) {
    .fe-hero__side { display: none; }
    .fe-hero__main { aspect-ratio: 3 / 2; }
    .fe-hero__main .fe-slide__side-inner > div { max-width: 66%; }
}

/* ================================================================
   ADIM KARTI — .fe-stepcard

   Hero'nun sag ALT slotu. Orada "side_bottom" slider kaydi (kategori tanitimi)
   duruyordu; yerini "yurt disina cicek nasil gidiyor?" uc adimi aldi. Gerekcesi
   Home/Index icinde: adimlar ulke bandinin altinda yaklasik 105 piksel yer
   kapliyor ve urun izgarasini asagi itiyordu, oysa hero'da zaten ikincil bir
   slot bos duruyordu.

   NEDEN DONUYOR: kutu 430x215. Uc adimi yan yana ya da alt alta sigdirmak
   puntoyu okunmaz hale getirirdi. Hero'nun geri kalani BILEREK donmuyor — donen
   sey burada ana mesaj degil, ikincil bir aciklama.

   FOTOGRAF YOK, DUZ ZEMIN: uzerinde uc satir aciklama metni tasiyacak; fotograf
   uzerine yazilan aciklama her karede baska bir kontrastla okunur ve perde
   koyunca fotograf da zaten gorunmez olur. Yesil, marka renginin koyusu — yanindaki
   iki banner koyu oldugu icin sag sutun butun olarak duruyor.
   ================================================================ */
.fe-stepcard {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 18px 20px 30px;
    background: linear-gradient(135deg, #133628 0%, #0D261C 100%);
    color: #fff;
    overflow: hidden;
}

/* Adimlar UST USTE duruyor ve yalnizca biri gorunur: kart yuksekligi en uzun
   adima gore sabit kalsin, gecislerde ziplamasin. */
.fe-stepcard__item {
    position: absolute;
    inset: 18px 20px 30px;
    /* Icerik DIKEY ORTALI: uc adimin metin uzunlugu farkli ve kart genis
       ekranlarda 2/1 orana gecip uzuyor. Uste yaslandiginda alt yarisi bombos
       kaliyor, adimlar arasi gecisde de metin blogu asagi yukari zipliyordu. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.fe-stepcard__item.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .45s ease, transform .45s ease, visibility 0s;
}

.fe-stepcard__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    /* Sari, bandaki terrakota degil: kart koyu yesil ve yanindaki iki banner'in
       vurgu rengi de sari (CTA oklari). Sag sutun kendi icinde tutarli kaliyor. */
    background: #FFC83D;
    color: #0D261C;
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.fe-stepcard__head {
    font-size: clamp(15px, 1.35vw, 19px);
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 6px;
}
/* #DBE6DF koyu yesil (#133628) uzerinde 8.4:1 — kucuk punto icin AAA. */
.fe-stepcard__text {
    font-size: clamp(12px, 1.02vw, 14px);
    line-height: 1.55;
    color: #DBE6DF;
    margin: 0;
}

/* Noktalar hem GOSTERGE hem DUGME: donen icerikte kullanicinin kacirdigi adima
   geri donebilmesi gerekiyor. */
.fe-stepcard__dots {
    position: absolute;
    left: 20px;
    bottom: 14px;
    display: flex;
    gap: 7px;
}
.fe-stepcard__dot {
    width: 22px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: background .3s ease;
}
.fe-stepcard__dot.is-active { background: #FFC83D; }
.fe-stepcard__dot:focus-visible { outline: 2px solid #FFC83D; outline-offset: 3px; }

/* Hareket hassasiyeti bildirilmisse gecis animasyonu kalkar. Donmenin kendisi de
   betikte duruyor (bkz. Home/Index > Scripts). */
@media (prefers-reduced-motion: reduce) {
    .fe-stepcard__item { transition: none; transform: none; }
}

@media (max-width: 1024px) {
    /* Kart bu genislikte 2/1 orana geciyor ve genisliyor; metin de buyuyebilir. */
    .fe-stepcard { padding: 20px 24px 32px; }
    .fe-stepcard__item { inset: 20px 24px 32px; }
    .fe-stepcard__head { font-size: 19px; }
    .fe-stepcard__text { font-size: 14px; }
}


/* ================================================================
   URUN DETAYI — GONDERIM SEBEBI ROZETLERI (.fe-pocc)

   Durum liste sayfasinin bandiyla (.fe-listhead--occasion) AYNI dili konusuyor:
   krem zemin, terrakota ikon. Rozet o sayfaya goturuyor; ayni gorsel isaret
   ziyaretciyi tanidik bir yere getiriyor.

   Rozetler LINK, etiket degil. Kucuk katalogda tek bir urunden cikis yolu olmasi
   onemli: begenmeyen kullanici geri tusuna basmak yerine benzer urunlerin oldugu
   durum sayfasina geciyor.
   ================================================================ */
.fe-pocc__label {
    display: block;
    font-size: .85rem;
    color: #7d8488;
    margin-bottom: 9px;
}
.fe-pocc__list { display: flex; flex-wrap: wrap; gap: 8px; }
.fe-pocc__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--fe-cream);
    border: 1px solid var(--fe-cream-line);
    /* Kontrast olculdu: #7A3A18 / #FDF6EF = 8.02:1 (AAA). */
    color: var(--fe-terra-ink);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: background .15s ease, border-color .15s ease;
}
.fe-pocc__item i { font-size: 14px; color: var(--fe-terra); line-height: 1; }
.fe-pocc__item:hover,
.fe-pocc__item:focus {
    background: #fff;
    border-color: var(--fe-terra);
    color: var(--fe-terra-ink);
}
.fe-pocc__item:hover i { color: var(--fe-terra-dark); }

@media (max-width: 575.98px) {
    .fe-pocc__item { font-size: .8rem; padding: 6px 11px; }
}

/* ================================================================
   LISTE SUZGECI — .fe-filter

   Sadelik bilincli: sirala + fiyat araligi. Rakiplerdeki "cicek turu" suzgecinin
   karsiligi zaten KATEGORI (Guller, Papatya ve Gerbera, Krizantem) — ikinci bir
   suzgec ayni isi tekrar ederdi. "Ayni gun teslimat" ise KONULMADI: Turkiye'nin
   MinDaysAhead degeri 1, yani takvim ayni gune zaten izin vermiyor; tutulamayacak
   bir vaadi suzgec haline getirmek en kotusu olurdu.
   ================================================================ */
/* Suzgec: URUN IZGARASININ HEMEN USTUNDE, tek satir, zeminsiz.
   Ilk hali tam genislikte beyaz bir kartti (1296x105) ve icindeki ~700px bostu.
   Sonra basligin yanina alindi; o da reddedildi ("filtre urunlerin hemen ustunde
   olmali"). Dogrusu bu: suzgec uzerinde is yaptigi seye komsu olmali, yoksa hangi
   listeyi daralttigi gorsel olarak kopuyor.

   UC DENETIM DE AYNI OLCUDE: 40px yukseklik, 10px kose, ayni kenarlik rengi.
   Onceki surumde kutular hap (999px), "Uygula" ise temanin ezdigi 5px kose
   tasiyordu — ayni sirada iki farkli sekil; isletmecinin "buton kaymis gibi,
   kutucuklar amator" dedigi sey buydu. 10px secildi cunku urun kartlari ve
   "Sepete Ekle" butonu da 10px: sayfa tek bir dil konusuyor. */
.fe-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
}
/* Etiket denetimin USTUNDE degil YANINDA: ustte olunca her grup iki satir
   yukseklige cikiyor ve sira ikiye katlaniyordu. */
.fe-filter__group { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.fe-filter__label {
    font-size: .82rem;
    font-weight: 600;
    color: #7d8488;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* Ortak denetim govdesi — uc parca da bu olcuyu paylasir. */
.fe-filter__select,
.fe-filter__range,
.fe-filter .fe-filter__apply {
    height: 40px;
    border-radius: 10px;
    font-size: .88rem;
    box-sizing: border-box;
}
.fe-filter__select,
.fe-filter__range {
    border: 1px solid #e3e7ea;
    background-color: #fff;
    color: #1f2b26;
}

/* Secim kutusu: tarayicinin YERLESIK oku kaldirildi, yerine tek bir chevron kondu.
   Yerlesik ok isletim sistemine gore degisiyor ve yanindaki ozel kutularla ayni
   dili konusmuyordu — "amator" gorunumun bir parcasi da oydu. */
.fe-filter__select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 168px;
    padding: 0 38px 0 14px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%237d8488' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 7px;
}
.fe-filter__select:focus-visible { outline: 2px solid var(--fe-terra); outline-offset: 1px; }

/* Fiyat araligi TEK BIR ALAN gibi davranir: kenarlik disarida, dort parca
   (en az / tire / en cok / para birimi) iceride. Onceden uc ayri kutu yan yana
   duruyordu ve aralarindaki tire havada kaliyordu. */
.fe-filter__range {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 12px;
}
.fe-filter__range:focus-within {
    border-color: var(--fe-terra);
    box-shadow: 0 0 0 3px rgba(196, 99, 43, .14);
}
.fe-filter__num {
    width: 74px;
    height: 100%;
    border: 0;
    padding: 0 4px;
    background: transparent;
    color: #1f2b26;
    font-size: .88rem;
    text-align: center;
}
.fe-filter__num:focus { outline: none; }
.fe-filter__dash { color: #b3b9bd; }
.fe-filter__cur {
    font-size: .78rem;
    font-weight: 700;
    color: #7d8488;
    letter-spacing: .02em;
    padding-left: 6px;
}

/* Secici ".fe-filter .fe-filter__apply" (0,2,0) BILEREK ozgul: main.css genel bir
   "button" kuralinda 5px kose veriyor ve tek sinif onu gecemiyordu — olculdu,
   CSS'te 999px yazarken ekranda 5px cikiyordu. */
.fe-filter .fe-filter__apply {
    padding: 0 24px;
    border: 1px solid var(--fe-green-deep);
    background: var(--fe-green-deep);   /* beyaz metinle 6.3:1; eylem rengi yesil */
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.fe-filter .fe-filter__apply:hover { background: var(--fe-green-deep-hover); border-color: var(--fe-green-deep-hover); }

.fe-filter__clear {
    height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: var(--fe-terra-dark);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    /* Telefonda her grup KENDI SATIRINDA ve tam genislikte; yan yana sikismis kutular
       dokunmayi zorlastiriyor.

       min-width:0 ZORUNLU — flex ogesinin varsayilan min-width degeri "auto"dur, yani
       oge iceriginden (etiket + secim kutusu) daha dar olamaz. Etiket denetimin YANINA
       alindigi icin (flex-direction: row) bu, 375px'lik ekranda tasan bir suzgec ve
       TUM SAYFADA yatay kaydirma demekti. Olculdu: scrollWidth 510 > clientWidth 375.

       Butonun secicisi ana kuralla AYNI ozgullukte (.fe-filter .fe-filter__apply),
       yoksa buradaki flex degeri uygulanmazdi. */
    .fe-filter__group { flex: 1 1 100%; min-width: 0; }
    .fe-filter__select { flex: 1 1 auto; width: auto; min-width: 0; }
    .fe-filter__range { flex: 1 1 auto; min-width: 0; }
    .fe-filter__num { flex: 1 1 0; width: auto; min-width: 0; }
    .fe-filter .fe-filter__apply { flex: 1 1 auto; }
}

/* Kategori sayfasindaki tanitim paragrafi. Basligin hemen altinda, suzgecin ustunde:
   ziyaretci once nerede oldugunu okur, sonra daraltmaya karar verir.

   GENISLIK SINIRI YOK. Onceden 78ch idi — tipografi kitabi boyle der, uzun satir
   okunmaz — ama kap 1320px'e cikinca metin sayfanin YARISINDA bitiyor ve isletmeci
   iki kez "yarim kesilmis gibi duruyor, sayfa devam ediyor" dedi. Rakiplerde de
   (Udora, Ciceksepeti) kategori metni tam genislikte akiyor. Kategori metinleri
   zaten 2-4 cumle; satir sayisi azaldigi icin okuma yuku artmiyor. */
.fe-listintro {
    margin: -8px 0 22px;
    font-size: .95rem;
    line-height: 1.7;
    color: #5f676b;
}
@media (max-width: 575.98px) {
    .fe-listintro { font-size: .89rem; margin-bottom: 18px; }
}

/* ================================================================
   TESLIMAT KAPSAMI — .fe-coverage

   Yurt ici ulke sayfasinin altinda, 81 il. Il basina AYRI SAYFA uretilmedi (gerekcesi
   ProductController icinde: iller arasinda gercek bir fark yok, kopya sayfalar
   uretmek arama motoru acisindan zararli). Bu yuzden iller link degil metin ve
   liste sayfanin ANA icerigi degil, altina konan destekleyici bilgi.

   Cok sutunlu akis: 81 isim alt alta dizilseydi sayfa gereksiz uzardi.
   ================================================================ */
.fe-coverage {
    margin-top: 46px;
    padding-top: 28px;
    border-top: 1px solid #eceff1;
}
.fe-coverage__title {
    font-size: 1.12rem;
    font-weight: 700;
    color: #1f2b26;
    margin-bottom: 10px;
}
.fe-coverage__lead {
    font-size: .93rem;
    line-height: 1.7;
    color: #5f676b;      /* beyaz zeminde 5.92:1 */
    max-width: 78ch;
    margin-bottom: 18px;
}
.fe-coverage__list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 6;
    column-gap: 18px;
    font-size: .87rem;
    color: #6b7280;      /* 4.88:1 */
}
.fe-coverage__list li {
    padding: 3px 0;
    /* Isim sutun sinirinda ikiye bolunmesin. */
    break-inside: avoid;
}
@media (max-width: 991.98px) { .fe-coverage__list { columns: 4; } }
@media (max-width: 575.98px) { .fe-coverage__list { columns: 2; font-size: .84rem; } }

/* ================================================================
   GORSEL TUTARLILIK — TEK KART, TEK BASLIK

   Ayni urun karti uc yerde uc farkli gorunuyordu:
     ana sayfa        : cercevesiz, gorsel kartin tam genisligi, hafif golge
     liste / kategori : temanin kartı — 1px yesilimsi cerceve (#d3e3d9), gorsel
                        10-12px iceriden ve kendi kosesiyle, hover'da yesil golge
     benzer urunler   : liste kartiyla ayni, ama satirda 5'li
   Ana sayfa karti esas alindi (en sade, fotograf en buyuk). Liste kartinin
   MARKUP'I degismedi — hizli bakis, sepete ekleme ve analitik ona bagli —
   yalnizca gorunumu ana sayfa kartina esitlendi.
   ================================================================ */
.product-cart-wrap.fe-pcard {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
.product-cart-wrap.fe-pcard:hover {
    /* Yesil golge yok: yesil yalnizca eylemde (bkz. renk hiyerarsisi). */
    box-shadow: 0 8px 22px rgba(16, 24, 28, .10);
}
.product-cart-wrap.fe-pcard .product-img-action-wrap {
    padding: 0;
    max-height: none;
}
.product-cart-wrap.fe-pcard .product-img-action-wrap .product-img,
.product-cart-wrap.fe-pcard .product-img-action-wrap .product-img a img {
    border-radius: 0;
}
/* Oran ana sayfa kartiyla ayni (1 / 1.1): yan yana iki sayfada ayni fotograf
   ayni kadrajla gorunsun. */
.product-cart-wrap.fe-pcard .product-img-action-wrap .product-img a img {
    aspect-ratio: 1 / 1.1;
    object-fit: cover;
}

/* Benzer urunler: 5'lik satirda 4 urun kaldiginda sag uc bos kaliyordu;
   ortalaninca eksik kart "bitmemis izgara" yerine bilincli bir dizi gibi durur. */
.fe-related { justify-content: center; }
.fe-related > .col-12 { align-self: flex-start; }

/* ---- Bolum basligi — .fe-sec-title ----
   Sitede uc ayri baslik dili vardi: seftali zeminli sekme ("One Cikan Urunler"),
   alt cizgili tema basligi ("Benzer Urunler", vitrin seritleri) ve duz h1'ler.
   Hepsi duz metne indi: renkli kutu ya da cizgi basligi bir dugme veya ayirici
   gibi gosteriyordu, ikisi de degil. Renk notr — tiklanmiyor. */
.fe-sec-title {
    font-size: 1.6rem;          /* rem tabani 14px -> ~22px */
    font-weight: 700;
    color: #1f2b26;
    letter-spacing: -.3px;
    line-height: 1.25;
    margin: 0;
}
.tab-header .fe-sec-title { align-self: center; }
@media (max-width: 575.98px) {
    .fe-sec-title { font-size: 1.35rem; }
}

/* ---- Hizli bakis dugmesi, DOKUNMATIKTE ----
   Dokunmatikte hover olmadigi icin dugme hep gorunur (bkz. .fe-qvbtn). Ama
   gorselin TAM ORTASINDA duruyordu: telefonda her urun fotografinin merkezinde,
   cicegin ustunde beyaz bir daire. Kose kucuk, yari saydam bir dugmeye tasindi —
   ulasilabilir kaliyor, fotografi ortmuyor. 36px gorunur, dokunma alani ::before
   ile 44px. */
@media (hover: none) {
    .fe-qvbtn {
        top: 8px;
        left: auto;
        right: 8px;
        width: 36px;
        height: 36px;
        font-size: 15px;
        transform: none;
        background: rgba(255, 255, 255, .85);
        box-shadow: 0 2px 8px rgba(16, 24, 28, .15);
    }
    .fe-qvbtn::before {
        content: "";
        position: absolute;
        inset: -4px;
    }
}

/* ================================================================
   SIPARIS ONAY SAYFASI — .fe-conf (Views/Order/Confirmation)

   Tek sutun, okunacak bir makbuz: ust kisimda "tamam" isareti ve siparis
   numarasi, altinda urunler (gorselli), tutar dokumu, teslimat. Bloklar kart
   degil, ince cizgiyle ayrilmis bolumler — sayfa bir belge, vitrin degil.
   Renk notr; yesil yalnizca onay isaretinde ve birincil dugmede.
   ================================================================ */
.fe-conf {
    border: 1px solid #e8ecef;
    border-radius: 16px;
    background: #fff;
    padding: 32px 36px;
}
.fe-conf__head { text-align: center; padding-bottom: 24px; border-bottom: 1px solid #eef1f3; }
.fe-conf__check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: #e9f1ec; color: var(--fe-green-deep); font-size: 24px; margin-bottom: 12px;
}
.fe-conf__check i { line-height: 1; display: inline-flex; }
.fe-conf__title { font-size: 2rem; font-weight: 700; color: #1f2b26; margin: 0 0 6px; }
.fe-conf__lead { font-size: 1.05rem; color: #4f5d6b; margin: 0 0 10px; }
.fe-conf__no { margin: 0 0 6px; color: #4f5d6b; }
.fe-conf__no strong { color: #1f2b26; letter-spacing: .3px; }
.fe-conf__next { font-size: .95rem; color: #7e8a95; margin: 0 auto; max-width: 52ch; line-height: 1.6; }

.fe-conf__block { padding: 22px 0; border-bottom: 1px solid #eef1f3; }
.fe-conf__h { font-size: 1.15rem; font-weight: 700; color: #1f2b26; margin: 0 0 14px; }

.fe-conf__items { list-style: none; margin: 0 0 12px; padding: 0; }
.fe-conf__item { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.fe-conf__item img {
    width: 72px; height: 72px; object-fit: cover; border-radius: 10px;
    background: #f5f6f7; flex: 0 0 auto;
}
.fe-conf__item-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #1f2b26; line-height: 1.4; }
.fe-conf__item-name span { display: block; font-weight: 400; font-size: .9rem; color: #7e8a95; }
.fe-conf__item-sum { font-weight: 700; color: #1f2b26; white-space: nowrap; }

.fe-conf__sum, .fe-conf__info { margin: 0; }
.fe-conf__sum > div, .fe-conf__info > div {
    display: flex; justify-content: space-between; gap: 16px; padding: 5px 0;
}
.fe-conf__sum dt, .fe-conf__info dt { font-weight: 400; color: #7e8a95; }
.fe-conf__sum dd, .fe-conf__info dd { margin: 0; color: #1f2b26; text-align: right; }
.fe-conf__total { border-top: 1px solid #eef1f3; margin-top: 6px; padding-top: 10px !important; }
.fe-conf__total dt, .fe-conf__total dd { font-weight: 700; color: #1f2b26; font-size: 1.1rem; }
.fe-conf__charged dt, .fe-conf__charged dd { font-size: .9rem; }

.fe-conf__msg { margin-top: 14px; background: #fbfaf7; border-left: 3px solid var(--fe-terra); border-radius: 0 10px 10px 0; padding: 10px 14px; }
.fe-conf__msg span { display: block; font-size: .8rem; color: #7e8a95; margin-bottom: 2px; }
.fe-conf__msg p { margin: 0; font-style: italic; color: #1f2b26; white-space: pre-line; }

.fe-conf__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.fe-conf__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 26px; border-radius: 10px; font-weight: 700;
    border: 1px solid #d5dbe0; color: #1f2b26; background: #fff; text-decoration: none;
}
.fe-conf__btn:hover { border-color: #1f2b26; color: #1f2b26; }
.fe-conf__btn--primary { background: var(--fe-green-deep); border-color: var(--fe-green-deep); color: #fff; }
.fe-conf__btn--primary:hover { background: var(--fe-green-deep-hover); border-color: var(--fe-green-deep-hover); color: #fff; }

@media (max-width: 575.98px) {
    .fe-conf { padding: 22px 16px; border-radius: 12px; }
    .fe-conf__title { font-size: 1.6rem; }
    .fe-conf__info > div { flex-direction: column; gap: 2px; }
    .fe-conf__info dd { text-align: left; }
    .fe-conf__btn { flex: 1 1 100%; }
}

/* ================================================================
   MUSTERI SIPARIS KARTI — .fe-ord (Shared/_SiparisKarti)

   Takip ekrani ve Hesabim > Siparis detayi. Onay sayfasiyla (.fe-conf) ayni dil:
   beyaz zemin, ince cizgiyle ayrilmis bloklar, notr metin; yesil yalnizca
   ilerleme cubugunun tamamlanan adimlarinda ve dugmelerde.
   ================================================================ */
.fe-ord {
    border: 1px solid #e8ecef;
    border-radius: 16px;
    background: #fff;
    padding: 28px 32px;
}
.fe-ord__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fe-ord__no { font-size: 1.5rem; font-weight: 700; color: #1f2b26; letter-spacing: .3px; }
.fe-ord__date { font-size: .9rem; color: #7e8a95; }
.fe-ord__badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* Ilerleme cubugu: dort adim, aralarinda cizgi. Tamamlanan adim ve ONUNDEKI cizgi
   yesil; bulunulan adimin noktasi halkali (nabiz yok — dikkat cekmeye gerek yok,
   konum yeter). */
.fe-ord__steps {
    list-style: none; margin: 24px 0 8px; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
}
.fe-ord__step { position: relative; text-align: center; padding-top: 26px; }
.fe-ord__step::before {
    content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px;
    background: #e3e8ec; z-index: 0;
}
.fe-ord__step:first-child::before { display: none; }
.fe-ord__step.is-done::before,
.fe-ord__step.is-now::before,
.fe-ord__step.is-problem::before { background: var(--fe-green-deep); }
.fe-ord__dot {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
    width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #d5dbe0;
}
.fe-ord__step.is-done .fe-ord__dot { background: var(--fe-green-deep); border-color: var(--fe-green-deep); }
.fe-ord__step.is-done .fe-ord__dot::after {
    content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.fe-ord__step.is-now .fe-ord__dot { border-color: var(--fe-green-deep); box-shadow: 0 0 0 4px #e2ede6; }
.fe-ord__step.is-now .fe-ord__dot::after {
    content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--fe-green-deep);
}
.fe-ord__step.is-problem .fe-ord__dot { background: #b91c1c; border-color: #b91c1c; }
.fe-ord__step-name { display: block; font-size: .88rem; font-weight: 600; color: #7e8a95; line-height: 1.3; }
.fe-ord__step.is-done .fe-ord__step-name,
.fe-ord__step.is-now .fe-ord__step-name { color: #1f2b26; }
.fe-ord__step.is-problem .fe-ord__step-name { color: #b91c1c; }
.fe-ord__step-time { display: block; font-size: .78rem; color: #9aa4ad; margin-top: 2px; }
.fe-ord__hint { text-align: center; font-size: .92rem; color: #6b7785; margin: 12px auto 0; max-width: 56ch; }

.fe-ord__cancelled { margin-top: 20px; background: #fdf3f3; border-radius: 12px; padding: 14px 16px; color: #7a2323; }
.fe-ord__cancelled span { display: block; font-size: .85rem; color: #9b4a4a; }
.fe-ord__cancelled p { margin: 6px 0 0; color: #1f2b26; }

.fe-ord__proof { display: flex; gap: 16px; align-items: flex-start; margin-top: 20px; background: #f5f9f6; border-radius: 12px; padding: 14px; }
.fe-ord__proof img { width: 160px; max-width: 40vw; border-radius: 10px; display: block; }
.fe-ord__proof p { margin: 4px 0 0; font-size: .9rem; color: #4f5d6b; }

.fe-ord__block { padding: 20px 0 6px; border-top: 1px solid #eef1f3; margin-top: 20px; }
.fe-ord__h { font-size: 1.1rem; font-weight: 700; color: #1f2b26; margin: 0 0 12px; }
.fe-ord__items { list-style: none; margin: 0 0 10px; padding: 0; }
.fe-ord__item { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.fe-ord__item img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: #f5f6f7; flex: 0 0 auto; }
.fe-ord__item-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #1f2b26; line-height: 1.4; }
.fe-ord__item-name span { display: block; font-weight: 400; font-size: .88rem; color: #7e8a95; }
.fe-ord__item-sum { font-weight: 700; color: #1f2b26; white-space: nowrap; }

.fe-ord__dl { margin: 0; }
.fe-ord__dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; }
.fe-ord__dl dt { font-weight: 400; color: #7e8a95; flex: 0 0 auto; }
.fe-ord__dl dd { margin: 0; color: #1f2b26; text-align: right; }
.fe-ord__total { border-top: 1px solid #eef1f3; margin-top: 6px; padding-top: 10px !important; }
.fe-ord__total dt, .fe-ord__total dd { font-weight: 700; color: #1f2b26; font-size: 1.08rem; }
.fe-ord__charged dt, .fe-ord__charged dd { font-size: .88rem; }

.fe-ord__msg { margin-top: 12px; background: #fbfaf7; border-left: 3px solid var(--fe-terra); border-radius: 0 10px 10px 0; padding: 10px 14px; }
.fe-ord__msg span { display: block; font-size: .8rem; color: #7e8a95; margin-bottom: 2px; }
.fe-ord__msg p { margin: 0; font-style: italic; color: #1f2b26; white-space: pre-line; }

.fe-ord__muted { font-size: .9rem; color: #6b7785; margin: 0 0 10px; }
.fe-ord__cancel-sum { cursor: pointer; color: #b91c1c; font-weight: 600; font-size: .92rem; }
.fe-ord__contact { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid #eef1f3; font-size: .85rem; color: #7e8a95; }
.fe-ord__contact a { color: var(--fe-green-deep); font-weight: 600; }

@media (max-width: 575.98px) {
    .fe-ord { padding: 20px 16px; border-radius: 12px; }
    .fe-ord__step-name { font-size: .78rem; }
    .fe-ord__step-time { font-size: .7rem; }
    .fe-ord__dl > div { flex-direction: column; gap: 2px; }
    .fe-ord__dl dd { text-align: left; }
    .fe-ord__dl--sum > div { flex-direction: row; }
    .fe-ord__dl--sum dd { text-align: right; }
}

/* ---- Takip formu — .fe-track ---- */
.fe-track { border: 1px solid #e8ecef; border-radius: 16px; background: #fff; padding: 28px 30px; }
.fe-track__lead { color: #6b7785; margin: 0 0 18px; }
.fe-track__mine { margin-top: 24px; padding-top: 18px; border-top: 1px solid #eef1f3; }
.fe-track__h { font-size: 1rem; font-weight: 700; color: #1f2b26; margin: 0 0 8px; }
.fe-track__mine ul { list-style: none; margin: 0; padding: 0; }
.fe-track__mine a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
    color: #1f2b26; text-decoration: none;
}
.fe-track__mine a:hover { background: #f5f7f8; }
.fe-track__no { font-weight: 700; }
.fe-track__date { color: #7e8a95; font-size: .9rem; margin-right: auto; }

/* ---- Siparis formunda kayitli adres secici — .fe-addrpick ----
   Kart degil, secilebilir kucuk dugmeler: baslik (Ev / Is) + alici ve semt. Secili
   olan koyu yesil cerceve alir; yesil burada da yalnizca "secili/eylem" anlaminda. */
.fe-addrpick { margin-bottom: 18px; }
.fe-addrpick__label { display: block; font-size: .85rem; color: #7e8a95; margin-bottom: 8px; }
.fe-addrpick__list { display: flex; flex-wrap: wrap; gap: 8px; }
.fe-addrpick__item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    min-width: 170px; max-width: 100%; padding: 10px 14px; text-align: left;
    border: 1px solid #d5dbe0; border-radius: 10px; background: #fff; cursor: pointer;
}
.fe-addrpick__item strong { font-size: .92rem; color: #1f2b26; }
.fe-addrpick__item span { font-size: .8rem; color: #7e8a95; }
.fe-addrpick__item:hover { border-color: #9aa4ad; }
.fe-addrpick__item.is-active { border-color: var(--fe-green-deep); box-shadow: 0 0 0 1px var(--fe-green-deep); }
.fe-addrpick__item--new { border-style: dashed; }
.fe-addrpick__item:focus-visible { outline: 2px solid var(--fe-green-deep); outline-offset: 2px; }

/* ================================================================
   BLOG ve ULKE REHBERI — .fe-blog-*, .fe-post, .fe-prose, .fe-faq, .fe-guide

   Okuma sutunu ~70 karakter (max-width 720px): satir uzadikca goz bir sonraki satirin
   basini kaybediyor. Renkler mevcut paletten: metin #1f2b26 / #4a5a64, vurgu krem +
   terrakota (bilgi), eylem marka yesili (yalnizca cagri butonu) — bkz. renk hiyerarsisi.
   Kapak gorseli olmayan kart TIPOGRAFIK cizilir; gorsel gelmese de liste bos gorunmez.
   ================================================================ */
.fe-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 991.98px) { .fe-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .fe-blog-grid { grid-template-columns: 1fr; gap: 18px; } }

.fe-blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eceff1;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.fe-blog-card:hover { box-shadow: 0 8px 24px rgba(37, 61, 78, .08); transform: translateY(-2px); }
.fe-blog-card__media {
    display: block;
    aspect-ratio: 16 / 7;
    background: linear-gradient(135deg, var(--fe-cream) 0%, #FAEEE2 100%);
    border-bottom: 1px solid var(--fe-cream-line);
}
.fe-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fe-blog-card__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 3rem;
    color: var(--fe-terra);
}
.fe-blog-card__ph img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px #fff, 0 4px 14px rgba(122, 58, 24, .15);
}
.fe-blog-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.fe-blog-card__tag {
    align-self: flex-start;
    font-size: .78rem;
    font-weight: 600;
    color: #8a6247;
    background: var(--fe-cream);
    border: 1px solid var(--fe-cream-line);
    border-radius: 999px;
    padding: 2px 10px;
}
.fe-blog-card__title { font-size: 1.12rem; font-weight: 700; line-height: 1.35; margin: 0; }
.fe-blog-card__title a { color: #1f2b26; }
.fe-blog-card__title a:hover { color: var(--fe-green-deep); }
.fe-blog-card__sum { font-size: .92rem; line-height: 1.6; color: #5f676b; margin: 0; }
.fe-blog-card__meta { margin-top: auto; font-size: .8rem; color: #7e8a91; }

.fe-post { max-width: 720px; margin: 0 auto; }
.fe-post__head { margin-bottom: 22px; }
.fe-post__kicker { font-size: .85rem; font-weight: 600; color: #8a6247; }
.fe-post__kicker:hover { color: var(--fe-terra-ink); }
.fe-post__title {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.4px;
    color: #1f2b26;
    margin: 8px 0 10px;
}
@media (max-width: 575.98px) { .fe-post__title { font-size: 1.6rem; } }
.fe-post__meta { font-size: .85rem; color: #7e8a91; margin: 0; }
.fe-post__cover { width: 100%; border-radius: 14px; margin-bottom: 24px; aspect-ratio: 16 / 9; object-fit: cover; }

.fe-prose { font-size: 1.04rem; line-height: 1.78; color: #3d4b53; }
.fe-prose p { margin: 0 0 1.05em; }
.fe-prose h2 { font-size: 1.4rem; font-weight: 700; color: #1f2b26; margin: 1.7em 0 .55em; line-height: 1.3; }
.fe-prose h3 { font-size: 1.15rem; font-weight: 700; color: #1f2b26; margin: 1.4em 0 .45em; }
.fe-prose ul, .fe-prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.fe-prose ul { list-style: disc; }
.fe-prose ol { list-style: decimal; }
.fe-prose li { margin-bottom: .4em; }
.fe-prose a { color: var(--fe-green-deep); text-decoration: underline; text-underline-offset: 2px; }
.fe-prose strong { color: #1f2b26; }

.fe-post__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 30px 0;
    padding: 18px 20px;
    background: var(--fe-cream);
    border: 1px solid var(--fe-cream-line);
    border-radius: 14px;
}
.fe-post__cta strong { display: block; color: var(--fe-terra-ink); font-size: 1.05rem; margin-bottom: 2px; }
.fe-post__cta span { font-size: .9rem; color: #6b5444; }
.fe-post__cta-btn {
    flex-shrink: 0;
    background: var(--fe-green-deep);
    border-color: var(--fe-green-deep);
    color: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
}
.fe-post__cta-btn:hover { background: var(--fe-green-deep-hover); color: #fff; }
@media (max-width: 575.98px) {
    .fe-post__cta { flex-direction: column; align-items: stretch; }
    .fe-post__cta-btn { text-align: center; }
}

.fe-faq { margin-top: 34px; }
.fe-faq__title { font-size: 1.3rem; font-weight: 700; color: #1f2b26; margin-bottom: 12px; }
.fe-faq__item { border-bottom: 1px solid #eceff1; }
.fe-faq__item summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 28px 14px 0;
    position: relative;
    font-weight: 600;
    color: #1f2b26;
}
.fe-faq__item summary::-webkit-details-marker { display: none; }
.fe-faq__item summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    font-weight: 400;
    color: #8a6247;
}
.fe-faq__item[open] summary::after { content: "–"; }
.fe-faq__a { padding: 0 0 14px; font-size: .96rem; line-height: 1.7; color: #4a5a64; }
.fe-faq__a p { margin: 0 0 .6em; }
.fe-faq__a a { color: var(--fe-green-deep); text-decoration: underline; }

.fe-post-more { max-width: 720px; margin: 36px auto 0; }
.fe-post-more ul { list-style: none; padding: 0; margin: 0; }
.fe-post-more li { padding: 9px 0; border-bottom: 1px solid #eceff1; }
.fe-post-more a { color: #1f2b26; font-weight: 600; }
.fe-post-more a:hover { color: var(--fe-green-deep); }

/* Ulke sayfasi: rehber urunlerin altinda, okuma sutunu genisligi. */
.fe-guide { margin-top: 46px; padding-top: 28px; border-top: 1px solid #eceff1; max-width: 820px; }
.fe-guide .fe-prose { font-size: .98rem; }
.fe-guide .fe-post-more { margin-left: 0; }

/* Takvimde KAPALI gun (pazar, bayram): secilebilir araligin icinde ama teslimat yok.
   Gri "gecmis gun"den ayrilsin diye hafif kirmizi zemin + ustu cizili rakam.
   Gerekce: wwwroot/js/cart-items.js onDayCreate. */
/* flatpickr'in kendi .flatpickr-disabled kurali (renk + seffaf zemin) ayni ozgullukte
   ve sonra yuklendigi icin ezilmesin diye sinif zinciri uzatildi. */
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.fe-day-closed,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.fe-day-closed:hover {
    background: #fdecec;
    border-color: #fdecec;
    color: #c0392b;
    text-decoration: line-through;
    opacity: .85;
    cursor: not-allowed;
}

/* ================================================================
   DEGERLENDIRMELER — .fe-rating-sum, .fe-reviews, .fe-review (form), .fe-stars
   Yildiz rengi altin (#E0A100): puan evrensel olarak bu renkle okunuyor; yesil aksiyona,
   terrakota bilgiye ayrildi (renk hiyerarsisi). Bos yildizlar acik gri.
   ================================================================ */
.fe-rating-sum { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 16px; font-size: .92rem; color: #4a5a64; text-decoration: none; }
.fe-rating-sum:hover { color: #1f2b26; }
.fe-rating-sum strong { color: #1f2b26; }
.fe-rating-sum__stars { color: #E0A100; letter-spacing: 1px; font-size: 1.05rem; }
.fe-rating-sum__stars span { color: #d9dde0; }

.fe-reviews { max-width: 820px; margin: 40px 0 10px; }
.fe-reviews ul { list-style: none; margin: 0; padding: 0; }
.fe-reviews__item { padding: 16px 0; border-bottom: 1px solid #eceff1; }
.fe-reviews__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.fe-reviews__head strong { color: #1f2b26; }
.fe-reviews__meta { font-size: .82rem; color: #7e8a91; }
.fe-reviews__verified { color: var(--fe-green-deep); font-weight: 600; }
.fe-reviews__item p { margin: 0; color: #4a5a64; line-height: 1.65; }

.fe-review { max-width: 620px; margin: 0 auto; }
.fe-review__title { font-size: 1.8rem; font-weight: 700; color: #1f2b26; margin-bottom: 4px; }
.fe-review__order { color: #7e8a91; margin-bottom: 18px; }
.fe-review__items { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.fe-review__items li { display: flex; align-items: center; gap: 12px; color: #1f2b26; font-weight: 600; }
.fe-review__items img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: #f9f3ee; }
.fe-review__label { display: block; font-weight: 600; color: #1f2b26; margin: 18px 0 6px; }
.fe-review__submit { margin-top: 20px; width: 100%; }
.fe-review__done { background: var(--fe-cream); border: 1px solid var(--fe-cream-line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fe-review__done p { margin: 0; color: #6b5444; }
.fe-review__stars-static { color: #E0A100; font-size: 1.6rem; letter-spacing: 2px; }
.fe-review__stars-static span { color: #d9dde0; }

.fe-stars { border: 0; padding: 0; margin: 0; }
.fe-stars legend { font-weight: 600; color: #1f2b26; font-size: 1rem; margin-bottom: 4px; }
.fe-stars__row { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.fe-stars__row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fe-stars__row label { font-size: 2.6rem; line-height: 1; color: #d9dde0; cursor: pointer; transition: color .12s ease, transform .12s ease; }
.fe-stars__row label:hover,
.fe-stars__row label:hover ~ label,
.fe-stars__row input:checked ~ label { color: #E0A100; }
.fe-stars__row label:hover { transform: scale(1.08); }
.fe-stars__row input:focus-visible + label { outline: 2px solid var(--fe-green-deep); outline-offset: 2px; border-radius: 4px; }
.fe-ord__review { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--fe-green-deep); }
.fe-ord__review:hover { text-decoration: underline; }

/* ==========================================================================
   URUN DETAYI — GONDERILEBILDIGI ULKELER (.fe-pcountries)
   Rozetler .fe-pocc__item ile ayni: ayni sayfada iki farkli "baglanti rozeti"
   dili olmasin. Bolum degerlendirmelerin ve benzer urunlerin ustunde, ayrac
   cizgisiyle urun blogundan ayrilir.
   ========================================================================== */
.fe-pcountries { margin: 10px 0 40px; padding-top: 30px; border-top: 1px solid #ececec; }
.fe-pcountries .fe-faq__title { margin-bottom: 16px; }