/*
 * MyFlufié marka renkleri.
 *
 * Tailwind derlemesi Node gerektirdigi ve sunucuda Node olmadigi icin
 * renkler burada, derlenmis styles.css'in uzerine biniyor. Node kurulup
 * tailwind.config.js guncellenirse bu dosya kaldirilabilir.
 */
:root {
    --flufie-sand: #E9E4DF;
    --flufie-ink: #2B2622;
}

/* --- Kategori banner'i (varsayilan, gorseli olmayan kategoriler) --- */
.category-view {
    background-color: var(--flufie-sand) !important;
}
/* Acik zeminde beyaz yazi okunmaz - koyu tona cevir */
.category-view,
.category-view h1,
.category-view h2,
.category-view .category-title,
.category-view * {
    color: var(--flufie-ink) !important;
}
/* Kategori gorseli varsa banner'i ezmeyelim */
.category-view[style*="background-image"] {
    background-color: transparent !important;
}

/* --- Footer --- */
footer .bg-primary,
.page-footer .bg-primary {
    background-color: var(--flufie-sand) !important;
}
footer .bg-primary,
footer .bg-primary a,
footer .bg-primary p,
footer .bg-primary h1, footer .bg-primary h2,
footer .bg-primary h3, footer .bg-primary h4,
footer .bg-primary span, footer .bg-primary label,
footer .bg-primary li {
    color: var(--flufie-ink) !important;
}
footer .bg-primary input {
    color: var(--flufie-ink) !important;
    border-color: var(--flufie-ink) !important;
}
footer .bg-primary input::placeholder {
    color: rgba(43, 38, 34, .55) !important;
}
/* Newsletter butonu koyu zeminde kaliyor - yazisi ACIK olmali.
   Genel footer kuralindan sonra geldigi icin onu eziyor. */
footer .bg-primary button,
footer .bg-primary [type="submit"],
footer .bg-primary .btn,
footer .bg-primary .action.subscribe {
    background-color: var(--flufie-ink) !important;
    color: #FFFFFF !important;
    border-color: var(--flufie-ink) !important;
}
footer .bg-primary button:hover,
footer .bg-primary [type="submit"]:hover {
    background-color: #4A423B !important;
    color: #FFFFFF !important;
}

/* --- Ust duyuru seridi ve geri sayim (etkinlestiklerinde) --- */
.niova-announcement, .announcement-bar, [data-content-type="announcement"],
.niova-countdown, .countdown-bar, [data-content-type="countdown"] {
    background-color: var(--flufie-sand) !important;
}
.niova-announcement, .niova-announcement *,
.announcement-bar, .announcement-bar *,
.niova-countdown, .niova-countdown *,
.countdown-bar, .countdown-bar * {
    color: var(--flufie-ink) !important;
}

/* Newsletter butonu: kendi .btn-primary sinifindan #111 zemin aliyor.
   Acik footer uzerinde koyu buton dogru, ama yazisi ACIK olmali - aksi halde
   koyu zeminde koyu yazi kaliyor (olculen kontrast 1.26:1). */
footer .btn-primary,
footer button.btn,
footer [type="submit"] {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    border-color: #111111 !important;
}
footer .btn-primary:hover,
footer button.btn:hover,
footer [type="submit"]:hover {
    background-color: #3A332D !important;
    color: #FFFFFF !important;
}

/* Logo, kutusunun kenarina yapisik duruyordu; ustte/altta 1px nefes payi.
   Tailwind box-sizing: border-box kullandigi icin padding kutuyu buyutmez,
   gorseli iceride daraltir - baslik yuksekligi degismez. */
img.logo {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

/* Checkout ilerleme butonu — sabit satir yuksekligi hilesinin duzeltmesi.
   tailwind/components/checkout.css `leading-[61px]` ile butonu 61px yapiyor.
   Bu, etiket TEK satira sigdigi surece dogru sonuc veriyor: Hyva Checkout'un
   `onepage` duzeninde etiket "Place Order" (kisa) oldugu icin sorun cikmiyor.
   `default` duzeninde etiket "Proceed to Review & Payments" — 20px + 2.5px
   harf araligiyla iki satira sariyor ve buton 2x61px = 122px oluyor, yazilar
   arasinda kocaman bosluk kaliyor.
   Cozum: yuksekligi line-height ile degil min-height + flex ile ver. Tek
   satirlik etikette gorunum aynen korunur, sarma durumunda buton duzgun buyur.
   Asil duzeltme Tailwind kaynaginda; sunucuda Node olmadigi icin burada
   !important ile derlenmis CSS'in uzerine yaziliyor. */
.placeorderbtn button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 61px !important;
    line-height: 1.25 !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Kategori banner'i — kisitsiz <img> tum ekrani kapliyordu.
   Sablon (Magento_Catalog/templates/category/image.phtml) gorseli hicbir
   boyut kurali olmadan basiyor: ne width, ne max-height, ne object-fit.
   Ottasilver'da fark edilmemis cunku oradaki banner'lar zaten genis/yatay.
   Shopify'dan gelen koleksiyon gorselleri ise 1200x1800 dikey — masaustunde
   1800px yukseklikte bir blok olusturuyordu.
   Banner bir "hero serit" olarak tasarlanmis (baslik overlay'i .display_sub_category_without_img
   ile top-1/2'ye mutlak konumlaniyor), o yuzden sabit yukseklik + cover dogru davranis. */
.category-image {
    position: relative !important;
    overflow: hidden !important;
}
.category-image img.desktopview {
    width: 100% !important;
    height: clamp(280px, 30vw, 440px) !important;
    object-fit: cover !important;
    object-position: center !important;
}
.category-image img.mobileview {
    width: 100% !important;
    height: clamp(200px, 55vw, 300px) !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Ana sayfa hero'su tam genislik.
   CMS icerigi .columns icinde duruyor; o da max-width:1304px + 24px dolgu ile
   sinirli. Shopify'daki hero ise kenardan kenara. Negatif margin + 100vw
   klasik "full bleed" hilesi.

   100vw kaydirma cubugu genisligini de sayar; klasik kaydirma cubugu olan
   tarayicilarda (Windows) bu ~15px yatay tasma yaratir. Bunu .page-main
   uzerinde overflow-x: clip ile kesiyoruz. Bilerek `clip`, `hidden` DEGIL:
   `hidden` yeni bir kaydirma baglami yaratip position:sticky basligi bozar,
   `clip` bozmaz. */
.cms-index-index .page-main {
    overflow-x: clip;
}
.cms-index-index .home-hero {
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.cms-index-index .home-hero img {
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------------
   Sayfa olugu: header, breadcrumb, baslik ve icerik ayni sol kenardan bassin.

   Olculen durum (1440px):
     header ic satir dolgusu   80px   -> ama logo GORSELI 112'de
     kategori .columns         80px   ✓ (header ile hizali)
     CMS .columns              max-width:1304 + 24px dolgu -> icerik 92'de
     .page-main-title          pl-6 (24px)                 -> baslik 24'te
     .trending (ana sayfa)     md:pl-20 USTUNE .column.main -> slider 172'de

   Logo 112'de cunku 178px genisligindeki kutusunda ORTALI duruyor
   (a.justify-center). Yani aslinda hizadan sapan tek unsur logonun kendisi;
   kutusu zaten 80'de. Burada logo sola yaslaniyor, digerleri de 80'e cekiliyor.
   --------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    /* CMS sayfalari kategori sayfalariyla ayni olugu kullansin.
       max-width kaldirilmali: 1304px'lik ortali kutu icinde 80px dolgu
       icerigi 148'e itiyordu. */
    .cms-page-view .columns,
    .cms-index-index .columns {
        max-width: none;
        padding-left: 80px;
        padding-right: 80px;
    }

    /* Sayfa basligi blogu pl-6 (24px) ile geliyordu.
       SADECE .page-main'in dogrudan cocugu olani: kategori sayfasinda ayni
       blok .subcategorylist-image icine de gomulu ve orasi zaten 80px dolgulu;
       kapsamsiz yazilirsa baslik 160px'e kayiyor. */
    .page-main > .page-main-title {
        padding-left: 80px;
        padding-right: 80px;
    }

    /* Kategori sayfasinda ayni blok .subcategorylist-image icinde; orasi zaten
       80px dolgulu, blogun kendi pl-6'si basligi 104'e itiyordu. */
    .subcategorylist-image .page-main-title {
        padding-left: 0;
        padding-right: 0;
    }

    /* Ana sayfa karuselleri: .column.main zaten 80'de, md:pl-20 ustune
       80px daha ekliyordu. Sagda "peek" efekti korunuyor. */
    .trending {
        padding-left: 0;
    }
}

@media (min-width: 1280px) {
    /* Kategori breadcrumb'i .breadcrumbs'tan degil bu sarmalayicidan
       konumlaniyor; 1280'de 16px dolguluydu. */
    .catalog-category-view .subcategory-breadcrumbs-wrapper {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media (min-width: 1280px) {
    /* Header ic satiri 1280'de 40px dolguluydu, icerik ise 80px.
       Ikisi ayni oluga otursun.

       KAPSAM UYARISI: bu secici once `.page-header .flex.flex-wrap.items-center`
       idi ve `.page-header` ALTINDAKI HER utility kombinasyonunu yakaliyordu.
       Sepet cekmecesi de DOM'da `.page-header > #header` icinde yasiyor
       (SECTION#cart-drawer), ve cekmecedeki opsiyon satiri kapsayicisi
       `flex items-center flex-wrap flex-1 min-w-0 ...` sinifini tasidigi icin
       ayni kurala takiliyordu: 1440'ta opsiyon metni ("Size: US: 11 | EU: 42")
       urun adi 1122'de baslarken 1202'de basliyordu (olculdu; kapsayici
       padding-left/right = 80px). Header ic satiri #header'in DOGRUDAN
       cocugu oldugu icin `>` kombinatoru dogru olani secip cekmeceyi disarida
       birakiyor; `justify-between` ile kapsam bir kez daha daraltildi. */
    .page-header #header > .flex.flex-wrap.items-center.justify-between {
        padding-left: 80px;
        padding-right: 80px;
    }

    /* Logo kutusu `flex-[0_0_189px]` ile sabit 189px genisligindeydi ve logo
       (126px) icinde ORTALI duruyordu — bu yuzden gorsel oluktan 31px iceride
       basliyordu. Once img'a margin-right:auto verildi ama o zaman bos alanin
       tamami saga gecip logo ile menu arasinda 63px'lik bir bosluk birakti.
       Dogrusu kutuyu logoya sardirmak: hem logo oluga oturuyor hem bosluk yok. */
    .page-header .order-2.mx-auto {
        flex: 0 0 auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------------------------------------------------------------------------
   Statik CMS sayfalari — 14-statik-sayfa-tasarim.php ile birlikte gelir.

   Yedi statik sayfa Page Builder row/column iskeletine tasindi ve
   `cms-full-width` duzenine alindi. Asagidakiler derlenmis Tailwind'de
   BULUNMAYAN ya da bu sitede YANLIS degerde olan dort seyi duzeltiyor.
   --------------------------------------------------------------------------- */

/* 1. cms-full-width duzeninde `.columns` oluksuz olmali.
      styles.css: `.page-main-full-width .columns { padding: 0 }`  (0,2,0)
      bu dosya  : `.cms-page-view .columns    { padding: 80px }`   (0,2,0)
      Ayni ozgullukte ve bu dosya SONRA yuklendigi icin 80px kazaniyordu;
      full-bleed hero'lar 80px iceriden basliyordu. Ozgullugu bir artirip
      full-width duzende olugu geri sifirliyoruz. */
@media (min-width: 1024px) {
    .cms-page-view .page-main-full-width .columns {
        padding-left: 0;
        padding-right: 0;
    }
}

/* 2. Sayfa olugu 80px. Tema 1280'de `.care`ye 10rem (160px),
      `.banner_content`a 6rem (96px) veriyor — header/breadcrumb ile hizasiz
      kaliyorlar. Ikisi de sitenin oluguna cekiliyor. */
@media (min-width: 1280px) {
    .cms-page-view .care {
        padding-left: 80px;
        padding-right: 80px;
    }
    .cms-page-view .about_us_banner .banner_content {
        padding-left: 80px;
    }
}

/* 3. Belge govdesi (gizlilik, kosullar, iade, bakim, beden tablosu).
      `.prose` Tailwind Typography'den geliyor ve tum kurallarini `:where()`
      icinde tanimliyor — yani ozgullugu 0. Bu yuzden buradaki sade sinif
      secicileri onu sorunsuz eziyor, `!important` gerekmiyor. */
.flufie-doc {
    /* Satir uzunlugu. 80px olukta 1440'ta kalan genislik 1280px; olcup bakildi,
       o genislikte satirlar ~140 karaktere ciktigi icin okunmuyordu. 48rem
       (768px) ~95 karakter — uzun belgeler icin ust sinir. */
    max-width: 48rem;
    /* Tailwind Typography'nin varsayilan govde/baslik renkleri gri (#374151 /
       #111827); sitenin murekkebi #2B2622. Token'lari degistirmek tum `.prose`
       kurallarini tek yerden ceviriyor. */
    --tw-prose-body: var(--flufie-ink);
    --tw-prose-headings: var(--flufie-ink);
    --tw-prose-bold: var(--flufie-ink);
    --tw-prose-links: var(--flufie-ink);
}
.flufie-doc h2,
.flufie-doc h3,
.flufie-doc h4 {
    margin-top: 2.5rem;
    margin-bottom: .75rem;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--flufie-ink);
}
.flufie-doc > :first-child {
    margin-top: 0;
}
.flufie-doc p,
.flufie-doc li {
    line-height: 1.75;
}
/* Beden tablosu: prose'un `font-size:.875em` + kenarliksiz hucre duzeni
   Shopify'dan gelen `border ... px-3 py-2` sinifli tablolarda cakisiyordu. */
.flufie-doc table {
    width: 100%;
    font-size: .875rem;
}
.flufie-doc table th {
    text-align: left;
    white-space: nowrap;
}

/* 4. FAQ akordeonu. Bu iki kural eskiden `f-a-q` sayfasinin ICERIGINE gomulu
      bir <style> blogundaydi; icerik Page Builder'in `html` tipine tasininca
      orada durmasi anlamsizlasti (her duzenlemede elle korunmasi gerekirdi). */
.cms-faq summary::-webkit-details-marker {
    display: none;
}
.cms-faq details[open] .cms-faq-plus {
    transform: rotate(45deg);
}

/* 5. our-story'deki 50/50 bolumun gorseli.
      Page Builder `image` icerik tipi <img>'a `max-width:100%; height:auto`
      SATIR ICI yaziyor — yani sinif seciciyle ezilemiyor, !important sart.
      Elimizdeki gorsel 1000x1333 (dikey); yarim sutunda 880px yuksekliginde
      bir blok oluyor ve yanindaki dort satirlik metni eziyor (olculdu).
      Sabit yukseklik + cover ile bolum dengeleniyor. */
@media (min-width: 769px) {
    .cms-page-view .care .menu_img img {
        height: 520px !important;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* Mobilde urun karuseli: solda 16px, sagda ekran kenarina kadar.
   Olculen durum (393px): .trending ebeveyninden 24px iceride basliyor ve
   uzerine kendi pl-4'u (16px) biniyordu -> baslik ve ilk kart 40px'te.
   Sag tarafta da ebeveynin 24px dolgusu kaliyordu, yani kart ekran kenarina
   degmeden bitiyordu.
   Referans (ottasilver mobil): sol 16px, sag tarafta karusel ekranin icine
   giriyor - bir sonraki kart kenardan kesiliyor.
   Negatif margin ile ebeveynin dolgusundan cikilip 16px kendimiz veriyoruz.
   .page-main'de zaten overflow-x: clip var (hero icin), o yuzden yatay
   kaydirma olusmuyor. */
@media (max-width: 1023px) {
    /* ottasilver mobilde `.columns`a oluk VERMIYOR: `.column.main`in her
       cocugu tam genislikte (olculen: L=0 R=0 W=393) ve kendi px-4'unu
       tasiyor. Flufie'de `.columns` 24px veriyordu, bolumlerin kendi 16px'i
       bunun USTUNE biniyordu -> icerik 40px'te basliyordu; "What Our Fans
       Are Saying" gorselleri 313px'e sikisiyordu (ottasilver'da 361px).

       Oluk sifirlanınca her bolum kendi 16px'ine duser. Ana sayfadaki bes
       bolumun besi de kendi dolgusunu tasiyor (px-4 / pl-4), o yuzden
       kenara yapisan bir sey kalmiyor - degistirmeden once teker teker
       olculdu.

       Tam genislikteki bloklar (.home-hero, .bfw, .trending) zaten
       `calc(50% - 50vw)` kullaniyor; ebeveyn oluksuz kalinca bu deger
       kendiliginden 0'a duser, ekstra kural gerekmiyor. */
    .cms-index-index .columns {
        padding-left: 0;
        padding-right: 0;
    }

    /* Karuseller solda 16px'ten baslar, sagda ekran kenarina dayanir - bir
       sonraki karttan parca gorunur (masaustundeki yarim kart efektinin
       mobil karsiligi). `.trending` bunu pl-4 + negatif margin ile zaten
       yapiyordu; oluk kalkinca margin gereksiz.
       `.home_trending_collection` kendi 16px/0 dolgusunu tasiyor, yani
       kutusu 16..393 oluyor; Splide'in <=640 kirilimi sagda 5rem biraktigi
       icin kart genisligi 377-80 = 297px cikiyor. ottasilver'da olculen
       kart genisligi de 297px. */
    .cms-index-index .trending {
        margin-left: 0;
        margin-right: 0;
        padding-left: 16px;
        padding-right: 0;
    }
}

/* Ana sayfa bolum basliklari mobilde tek satira sigsin.
   "What Our Fans Are Saying" 28px'te 325px yer istiyor, 320px'lik bir
   telefonda yer yok - iki satira sariyordu.

   Sabit kucuk bir punto yerine ekranla olceklenen bir deger.
   Kullanilabilir genislik = vw - 32 (yalnizca bolumun kendi px-4'u; ebeveyn
   olugu yukarida sifirlandi, onceki formul vw - 80 varsayiyordu ve gereksiz
   yere kuculuyordu). 28px'te gereken 325px, punto ile dogrusal olcekleniyor:
   F <= (vw - 32) / 11.607. Font yuvarlamasi modeli ~1px iyimser yaptigi icin
   %4 pay birakildi: calc(8.28vw - 2.65px). min() ile 28px'i asmiyor.
   393px'te 28px (tam boy), 360px'te 27.2px, 320px'te 23.8px.
   Satir yuksekligi orana baglandi (36/28 = 1.28). */
@media (max-width: 1023px) {
    .cms-index-index .page-main section > h2 {
        font-size: min(28px, calc(8.28vw - 2.65px));
        line-height: 1.28;
    }
}

/* Sepet cekmecesi kalem gorselleri retina.
   Sablon (html/cart/cart-drawer.phtml) gorseli Alpine ile basiyor ve
   genislik/yuksekligi dogrudan bolum verisinden aliyor:
       :src="item.product_image.src" :width=... :height=...
   Yani view.xml'deki olcu hem KAYNAK cozunurlugu hem GOSTERIM boyutu oluyor.
   view.xml 99 -> 198 yapildi (2x kaynak); gosterim boyutu burada 99'a
   sabitleniyor, aksi halde gorsel 198px basip satiri buyuturdu.
   Sonuc: 99x99 gosterim, 198x198 kaynak = tam 2x. */
.cart-drawer a.w-28 img,
#cart-drawer a.w-28 img {
    width: 99px;
    height: 99px;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Beden secimi (custom option radio) — modern gorunum.

   Sablon (Magento_Catalog/.../options/view/checkable.phtml) stilleri INLINE
   bir <style> blogunda tasiyor: gri dolgu (#f8f8f8) hem secili hem secilisiz
   durumda, 1px #e5e5e5 kenarlik, 4px radius. Gri dolgu butonlari "pasif"
   gosteriyor ve secili durum yalnizca kenarlik rengiyle ayrisiyor.

   Inline <style> belgede bu dosyadan SONRA geldigi icin esit ozgullukte
   kaybederdik; o yuzden secici bir kademe daha ozgul
   (.product-options-wrapper ile kapsandi). !important kullanilmadi.

   Tema paylasimli oldugu icin degisiklik BILEREK burada, sablonda degil —
   ottasilver'in beden butonlari oldugu gibi kaliyor.
   --------------------------------------------------------------------------- */
.product-options-wrapper .size-option label.label {
    background-color: #FFFFFF;
    border: 1px solid #DAD5D0;
    border-radius: 8px;
    color: #2B2622;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.2;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* Sablon secilisiz durumda gri dolgu veriyordu - beyaza cekiliyor */
.product-options-wrapper .size-option input[type="radio"]:not(:checked) + label.label {
    background-color: #FFFFFF;
}

.product-options-wrapper .size-option label.label:hover {
    border-color: #2B2622;
    background-color: #FFFFFF;
}

/* Secili: ikinci halka box-shadow ile veriliyor, border-width ile DEGIL.
   2px kenarlik kutuyu 1px buyutup satiri kaydirirdi; inset shadow yer kaplamaz. */
.product-options-wrapper .size-option input[type="radio"]:checked + label.label {
    background-color: #FFFFFF;
    border-color: #2B2622;
    box-shadow: inset 0 0 0 1px #2B2622;
    font-weight: 500;
}

/* Klavye erisilebilirligi: gizli input odaklandiginda etiket belli olsun */
.product-options-wrapper .size-option input[type="radio"]:focus-visible + label.label {
    outline: 2px solid #2B2622;
    outline-offset: 2px;
}

/* Esit genislikli izgara.
   Onceden flex-wrap + icerige gore genislik vardi: secilince font-weight 500
   oldugu icin buton 127px -> 133px buyuyor ve satirdaki diger butonlar
   kayiyordu. Izgarada sutunlar birbirine esit (1fr) oldugu icin secim artik
   hicbir seyi oynatmiyor - bu garanti korunmali.

   Satir basina adet DINAMIK (sabit 132px degil): hedef masaustunde 4, mobilde
   3. Sutun minimumu iki degerin BUYUGU:
     --opt-ch    -> en uzun etiketin genisligi, checkable.phtml PHP ile yazar
     --opt-share -> hedef adede bolunmus konteyner payi
   Etiket kisaysa min = pay olur, satira tam N tane girer. Etiket uzarsa
   (ornek "US: 11.5C | 18.5 cm") min = etiket olur ve auto-fill kendiliginden
   daha az sutun sigdirir. JS yok, olcum yok, layout shift yok.
   :has() ile kapsandi - ayni kapsayici baska opsiyon tiplerinde de
   kullaniliyor, yalnizca beden secenekleri izgaraya geciyor. */
.product-options-wrapper .options-list.nested:has(.size-option) {
    --opt-gap: 10px;
    /* masaustu: hedef 4 sutun (3 bosluk), taban 3 sutun (2 bosluk) */
    --opt-share: calc((100% - 3 * var(--opt-gap)) / 4);
    --opt-cap: calc((100% - 2 * var(--opt-gap)) / 3);
    /* ch birimi etiketle ayni olcekte cikmali: label.label font-size 15px */
    font-size: 15px;
    display: grid;
    gap: var(--opt-gap);
    /* min( --opt-ch , --opt-cap ) -> TABAN: etiket ne kadar uzun olursa olsun
       sutun sayisi tabanin altina inmez, metin alt satira kayar. `ch` "0"
       glifinin genisligi oldugu icin karisik metni FAZLA olcer (olculdu:
       "US: 11.5C | 18.5 cm" 19ch = 194px, gercek metin ~135px); taban olmasa
       mobilde satirda 1 tane kaliyordu.
       max( ... , --opt-share ) -> HEDEF: etiket kisaysa tam N sutun. */
    grid-template-columns: repeat(auto-fill,
        minmax(max(min(var(--opt-ch, 9ch), var(--opt-cap)), var(--opt-share)), 1fr));
}

@media (max-width: 767px) {
    /* mobil: hedef 3 sutun (2 bosluk), taban 2 sutun (1 bosluk) */
    .product-options-wrapper .options-list.nested:has(.size-option) {
        --opt-share: calc((100% - 2 * var(--opt-gap)) / 3);
        --opt-cap: calc((100% - 1 * var(--opt-gap)) / 2);
    }
}
.product-options-wrapper .options-list.nested:has(.size-option) .size-option {
    min-width: 0;
}
/* Etiket hucreyi DOLDURSUN: aksi halde izgara sutunlari esit olsa da etiket
   icerige gore daralip 126-134px arasinda oynuyor ve secilince genisligi
   degisiyordu. */
.product-options-wrapper .options-list.nested:has(.size-option) .size-option label.label {
    width: 100%;
}

/* Sepet cekmecesi "Apply Code" tetikleyicisi.
   Bir sure tam genislikte, beyaz zeminli, 1px kenarlikli bir kutuydu; sagda
   chevron'la birlikte kapali bir <select> gibi okunuyordu. Cekmecenin geri
   kalani tamamen cercevesiz oldugu icin geri alindi: artik sablondaki
   `underline` ile hafif bir metin tetikleyici. Buradaki eski kural
   `text-decoration: none` ile o alt cizgiyi de olduruyordu. */


/* Ana sayfa karuselleri masaustunde de ekranin sag kenarina dayansin ve son
   kartin tam yarisi gorunsun (referans: ottasilver.com ana sayfasi).
   .columns'in 80px sag olugu karuseli kenardan once bitiriyor, araya beyaz bir
   serit birakiyordu. Oluktan yalnizca slider kutusu cikiyor; basliklar
   ('TRENDING NOW' / 'TRENDING COLLECTION') 80px'te, logo hizasinda kaliyor.
   Yarim kart orani Splide'in sag dolgusuyla kuruluyor (sablonlarda %14 ve
   %10.4) - `perPage` yalnizca tam sayi kabul ediyor.
   calc(50% - 50vw) mobil karusel kuralinda da kullanilan kalip; .page-main'de
   overflow-x: clip oldugu icin yatay kaydirma olusmuyor. */
@media (min-width: 1024px) {
    .cms-index-index .trending > .block-content {
        margin-right: calc(50% - 50vw);
    }

    /* 'TRENDING COLLECTION' basligi 160px'te basliyordu: temanin kendi
       .title kurali 80px dolgu veriyor (ottasilver'da blok tam genislikte,
       orada dogru), burada .column.main zaten 80px veriyor ve ikisi toplaniyor.
       Ustteki 'New Arrivals' basligiyla ayni hizaya cekiliyor. */
    .cms-index-index .home_trending_collection > .title {
        padding-left: 0;
    }

    /* Koleksiyon slideri SOLDA tasmiyor: ilk kart New Arrivals ile ayni
       hizada, 80px'te basliyor. Yalnizca sagda ekran kenarina dayaniyor. */
    .cms-index-index .home_trending_collection > .glide {
        margin-right: calc(50% - 50vw);
    }

    /* .home_trending_collection'da `overflow: hidden` var ve kutusu 80..W-80.
       Negatif margin'le disari tasan .glide GORSEL OLARAK burada kirpiliyordu:
       kartlar 1920'de bitip sagda beyaz bir serit kaliyordu ve ileri/geri
       oklari (x=24 ve x=W-72) hic boyanmiyordu - getBoundingClientRect dogru
       kutuyu veriyor ama elementsFromPoint onlari hic gormuyordu, ipucu buydu.
       .glide'in kendi `lg:overflow-hidden`i zaten slaytlari kirptigi icin
       ebeveynin kirpmasi gereksiz. */
    .cms-index-index .home_trending_collection {
        overflow: visible;
    }
}

/* --- Trending Collection karuseli: ok dugmeleri ---------------------------
   Sablondaki `classes.arrow` Splide'in kendi `splide__arrow` sinifini
   TAMAMEN eziyor. Iki sonucu var:
     1) Splide'in `.splide__arrow svg{width:1.2em;height:1.2em}` kurali
        uygulanmiyor -> ok ikonu 12x12'de kaliyor,
     2) `lg:left-24` / `lg:right-10` Tailwind derlemesinde yok (bu iki sinif
        yalnizca bir JS dizesi icinde gectigi icin purge edilmis) -> konum
        Splide'in kendi `left:1em` degerine dusuyor.
   Olculen hali: 48px'lik bir dugme, %90 beyaz zeminde 12px'lik siyah ok -
   beyaz urun fotograflarinin uzerinde pratik olarak gorunmez. Kullanici
   "sonuna gitmiyor" derken aslinda ileri okunu goremiyordu; karusel
   (ok tiklamasi ve surukleme ile) 6 koleksiyonun hepsini donuyor.
   Ayni sorun New Arrivals karuselinde de var (ayni classes.arrow kalibi),
   ikisi de ayni kurala aliniyor. */
.home_trending_collection .splide__arrow--prev,
.home_trending_collection .splide__arrow--next,
.cms-index-index .trending .splide__arrow--prev,
.cms-index-index .trending .splide__arrow--next {
    background-color: #fff;
    /* Beyaz zeminde de secilsin diye ince bir cerceve; yalnizca golge
       yeterli degildi (karusel kutusu artik beyaz oluga tasiyor). */
    border: 1px solid rgba(43, 38, 34, .14);
    box-shadow: 0 2px 12px rgba(43, 38, 34, .22);
    transition: transform .15s ease, box-shadow .15s ease;
}
.home_trending_collection .splide__arrow--prev:hover,
.home_trending_collection .splide__arrow--next:hover,
.cms-index-index .trending .splide__arrow--prev:hover,
.cms-index-index .trending .splide__arrow--next:hover {
    box-shadow: 0 4px 18px rgba(43, 38, 34, .3);
    transform: translateY(-50%) scale(1.06);
}
.home_trending_collection .splide__arrow--prev svg,
.home_trending_collection .splide__arrow--next svg,
.cms-index-index .trending .splide__arrow--prev svg,
.cms-index-index .trending .splide__arrow--next svg {
    width: 18px;
    height: 18px;
    fill: #2B2622;
}
@media (min-width: 1024px) {
    .home_trending_collection .splide__arrow--prev { left: 24px; }
    .home_trending_collection .splide__arrow--next { right: 24px; }
}

/* Sablon sayfalama noktalarini `classes.pagination` icinde 'hidden' ile
   gizlemek istiyor ama Splide'in kendi `.splide__pagination{display:flex}`
   kurali Tailwind'in `.hidden`ini yeniyor (ayni ozgulluk, sonra yukleniyor).
   Noktalar kartin uzerindeki gri seride biniyordu. */
.home_trending_collection .splide__pagination.hidden {
    display: none !important;
}

/* Koleksiyon kartlarinda etiket okunabilirligi.
   Gorseller object-cover ile kutuyu tam doldurunca (onceden altta beyaz bosluk
   kaliyordu) beyaz "SNEAKERS"/"SCARVES" yazisi acik renkli urun fotograflarinin
   uzerine dusuyor ve okunmuyor. Alttan yukari koyulasan bir perde ekleniyor;
   .collection_content zaten bu perdenin uzerinde kaliyor (sonraki kardes).
   Temanin kendi ::before perdesi ise img'den ONCE boyandigi icin gorseli tam
   dolduran karta hic etki etmiyor; bu yuzden ::after gerekli.
   Yogunluk olcume gore secildi: etiketin arkasindaki piksel ~#6A6663, beyaz
   yaziyla kontrast ~5:1 (WCAG AA buyuk yazi icin 3:1 istiyor). */
.home_trending_collection .collection_image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(43, 38, 34, .85) 0%,
        rgba(43, 38, 34, .70) 18%,
        rgba(43, 38, 34, .30) 38%,
        rgba(43, 38, 34, 0) 60%);
    pointer-events: none;
}

.home_trending_collection .collection_name,
.home_trending_collection .collection_action {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* "More to Explore" kartlari: gorseller farkli en-boy oranlarinda geliyor
   (olculdu: 1707x2560, 1200x1799, 1000x1004 -> ucuncu kart 411x412, digerleri
   411x616). Ucu de ayni orana oturtuluyor, kirpma ile.
   ottasilver'da sorun cikmiyor cunku oradaki uc gorsel de ayni oranda. */
.more_explore .explore_img img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

/* Footer logosu kucultuldu.
   Olculen: masaustunde 228x116, mobilde 258x132 - yani mobilde daha da
   buyuyordu (sutun tam genislige yayildigi icin). Header logosu 126x66;
   footer logosunun ondan 1.8 kat buyuk olmasi altligi one cikariyordu.
   Logo 502x256 oraninda, 160px genislik 82px yukseklik veriyor. */
.footer-logo img {
    width: 160px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .footer-logo img { width: 140px; }
}