/*
 * Urun custom option izgarasi (beden secenekleri)
 * ---------------------------------------------------------
 * Iki bolum: once izgara mekanigi ("bir satirda kac secenek durur"),
 * sonra butonun gorunumu. Gorunum bir sure yalnizca myflufie'nin
 * brand-overrides.css'indeydi; iki site ayni gorunmesi istendigi icin
 * buraya, paylasilan temaya alindi (myflufie'deki kopya ayni degerleri
 * tasiyor, order 100 ile sonra yuklenip ayni sonucu veriyor).
 *
 * Hedef: masaustunde 4, mobilde 3 secenek. Etiket uzunsa sutun sayisi
 * kendiliginden azalir, ama tabanin (masaustu 3 / mobil 2) altina inmez.
 *
 * Sutun minimumu = max( min(--opt-ch, --opt-cap), --opt-share )
 *   --opt-ch    : en uzun etiketin genisligi. checkable.phtml bunu PHP ile
 *                 olcup kapsayiciya inline yazar; yoksa 9ch varsayilani.
 *                 (Sablon 26px sabiti ekler: yatay padding + kenarlik. Marka
 *                 dosyasi farkli padding veriyorsa aradaki 1-2px'i taban yutar.)
 *   --opt-cap   : TABAN. `ch` birimi "0" glifinin genisligidir ve karisik
 *                 metni FAZLA olcer - olculdu: "US: 11.5C | 18.5 cm" icin
 *                 19ch = 194px, gercek metin ~135px. Taban olmadan uzun
 *                 etiketli urun mobilde satirda 1 secenek gosteriyordu.
 *   --opt-share : HEDEF. Konteyner genisliginin hedef adede bolunmus payi.
 *                 Hedef adet = min(4 masaustu / 3 mobil, secenek adedi), en az
 *                 2 (--opt-n-desk / --opt-n-mob, checkable.phtml yazar). Sabit 4
 *                 iken 3 secenekli urunde 4. sutun bos kaliyor, butonlar
 *                 daralip aciklama satiri ikiye kiriliyordu.
 *
 * Sutunlar birbirine esit (1fr): secilince font-weight degisse bile hicbir
 * buton yer degistirmez. Daha once bu is sabit genislikle yapiliyordu.
 *
 * :has() ile kapsandi - ayni kapsayici baska opsiyon tiplerinde de kullanildigi
 * icin yalnizca beden secenekleri izgaraya gecer.
 */
.product-options-wrapper .options-list.nested:has(.size-option) {
    --opt-gap: 10px;
    /* masaustu: hedef 4 sutun (3 bosluk), taban 3 sutun (2 bosluk) */
    /* hedef adet checkable.phtml'den gelir: min(4, secenek adedi), en az 2 */
    --opt-share: calc((100% - (var(--opt-n-desk, 4) - 1) * var(--opt-gap)) / var(--opt-n-desk, 4));
    --opt-cap: calc((100% - 2 * var(--opt-gap)) / 3);
    /* ch, etiketle ayni olcekte cikmali: etiket font-size'i 14px */
    font-size: 14px;
    display: grid;
    gap: var(--opt-gap);
    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% - (var(--opt-n-mob, 3) - 1) * var(--opt-gap)) / var(--opt-n-mob, 3));
        --opt-cap: calc((100% - 1 * var(--opt-gap)) / 2);
    }
}

/* Etiket hucreyi DOLDURSUN.
   Sutunlar esit olsa da etiketin kendisi icerige gore daraliyordu: Tailwind
   tabani `form .field.choice`a `display:flex` veriyor, etiket de esnek bir
   oge olarak icerik genisliginde kaliyor. Sonuc, sutunlar esitken bile
   ragged bir izgara ("Small" 67px, uzun etiket 176px) ve secilince
   font-weight degisince genisligin oynamasi.
   min-width:0 ise uzun etiketin sutunu tasirmasini engelliyor. */
.product-options-wrapper .options-list.nested:has(.size-option) .size-option {
    min-width: 0;
    /* `.field.choice` bir flex kutusu; etiket satirin yuksekligini de
       doldursun, aksi halde aciklama satiri olan buton uzun, olmayan
       kisa kalirdi. */
    align-items: stretch;
}

.product-options-wrapper .options-list.nested:has(.size-option) .size-option label.label {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   GORUNUM

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

   Inline <style> belgede bu dosyadan SONRA geldigi icin esit ozgullukte
   kaybederdik; secici bir kademe daha ozgul (.product-options-wrapper ile
   kapsandi). !important kullanilmadi.
   --------------------------------------------------------------------------- */
.product-options-wrapper .size-option label.label {
    background-color: #FFFFFF;
    border: 1px solid #DAD5D0;
    border-radius: 8px;
    color: #2B2622;
    /* Hedef yukseklik 50px, aciklama satiri OLSA DA. Onceden 12px dolgu +
       15px/1.2 ana metin + 12px/1.25 aciklama = ~61px'ti; ayni satirdaki
       butonlar en uzununa esitlendigi icin aciklamasiz "Small" da 61px
       oluyordu. 42px denendi, sikisik durdu. Hesap: 9 + 16 (ana) + 1 +
       13 (aciklama) + 9 + 2 (kenarlik) = 50. min-height aciklamasiz
       satirlari da ayni boya getiriyor. */
    min-height: 50px;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 16px;
    transition: border-color .18s ease, background-color .18s ease, 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: #000000;
    background-color: #FFFFFF;
}

/* Secili: MageSuite varyant butonuyla ayni dil - NEGATIF (siyah dolgu,
   beyaz yazi). variant_switcher.phtml'de secili buton
   `border-black bg-black text-white font-semibold`; ayni kutuda iki farkli
   "secili" gorseli olmasin.

   Kenarlik 1px kaliyor (varyantta `border-2` var): dolgu zaten secimi
   tasiyor, 2px kenarlik kutuyu 1px buyutup izgara satirini kaydirirdi.
   Ayni sebeple eski inset halka da kaldirildi - dolgunun uzerinde zaten
   gorunmuyordu. */
.product-options-wrapper .size-option input[type="radio"]:checked + label.label {
    background-color: #000000;
    border-color: #000000;
    color: #FFFFFF;
    font-weight: 500;
}

/* Aciklama satiri siyah zeminde okunur kalsin, ama yine ikincil dursun */
.product-options-wrapper .size-option input[type="radio"]:checked + label.label .opt-note {
    color: rgba(255, 255, 255, 0.72);
}

/* 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;
}

/* Aciklama satiri: "Regular - Suitable for Most" basliginin ayiricidan
   sonraki parcasi (bkz. checkable.phtml). Kucuk ve solgun kaliyor ki
   butonun genisligini ana metin belirlesin - izgara olcumu (--opt-ch) de
   ana metne gore yapiliyor.

   font-weight acikca 400: secili butonda etiket 500'e cikiyor, aciklama
   onunla birlikte kalinlasmamali. */
.product-options-wrapper .size-option label.label .opt-note {
    margin-top: 1px;
    font-size: 11px;
    line-height: 13px;
    font-weight: 400;
    color: #6B645C;
}

/* ---------------------------------------------------------------------------
   SATIN ALMA KUTUSU DIKEY RITMI

   Kutuda iki tur bosluk var ve ikisi net ayrilmali:
     blok arasi  : 24px  (varyant grubu <-> varyant grubu <-> ozel secenek
                          <-> sepete ekle). Temanin olculmus ritmi bu:
                          baslik->fiyat, varyant->beden, beden->sepete ekle,
                          ayirici->ozellikler hepsi 24px.
     blok icinde : 8px   (baslik -> kontrol; Tailwind `label` tabani ve
                          varyant basligindaki `mb-2` zaten bunu veriyor)

   Once boyle DEGILDI: varyant gruplari arasi 16px (`space-y-4` + `my-4`),
   ozel secenek blogunun iki yaninda ise 40px (`py-4` 16 + formun `mt-6`/
   `mb-6` 24) vardi. Yani iki varyant grubu grup ICI 8px'e fazla yakin
   duruyor, sonraki blok ise bir anda 40px uzakta kaliyordu; goz gruplari
   ayni blogun parcasi saniyordu.

   Sayilar sablonlardan (space-y-4 / my-4 / py-4 / mb-4) SOKULUP buraya
   alindi; tek yerden okunsun ve Tailwind'in onceden derlenmis siniflarina
   bagli kalmasin. Ilgili sablonlar: MageSuite_ProductVariants/product/
   variant_switcher.phtml, Magento_Catalog/product/view/options/type/
   select.phtml, .../composite/fieldset/options/view/checkable.phtml.
   --------------------------------------------------------------------------- */
.product-variants-container {
    margin-top: 24px;
}

.product-variants-container > .variant-group + .variant-group {
    margin-top: 24px;
}

/* Ozel secenek bloklari. Gizli "Add Accident Protection" kopyasi (h-0 w-0)
   bosluk uretmemeli - kendisi gorunmez ama ustune 24px eklenirse sayfada
   aciklanamayan bir bosluk olarak gorunurdu. */
.product-options-wrapper .option-block + .option-block:not(.protection-option) {
    margin-top: 24px;
}

/* ---------------------------------------------------------------------------
   VARYANT LISTESI - "Show all" kirpmasi

   Sablon (MageSuite_ProductVariants/product/variant_switcher.phtml) 8'den
   fazla varyantta listeyi 3. satirin YARISINDAN kesiyor (2,5 satir); max-height
   degeri oradaki Alpine olcumunden geliyor, burasi yalnizca gecisi ve
   solmayi tasiyor.

   Neden maske: duz kesik "burada bitti" gibi duruyor, yarim satir + asagi
   dogru solma "devami var" diyor. mask-image kullanildi, ustune gradient
   bir katman koymak yerine - katman butonun tiklanabilir alanini ortuyor
   ve zemin rengi degisince (secili kart siyah) yanlis renkte kaliyordu. */
.variant-swatches {
    transition: max-height .4s ease;
}

.variant-swatches.is-clipped {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
}

.variant-more__chevron {
    transition: transform .25s ease;
}

/* Olcum yapilmadan once (JS kapaliysa) liste tam gorunur kalsin; kirpma
   yalnizca `is-clipped` ile devreye giriyor, boylece Alpine calismazsa
   kimse varyant kaybetmiyor. */

/* Mobil: sutun ~114px. Yatay dolgu 12 -> 8px, boylece "Suitable for Most"
   gibi aciklamalar 11px'te tek satira siğiyor; 12px'te kiriliyor ve butonu
   50px'ten 63px'e cikariyordu. */
@media (max-width: 767px) {
    .product-options-wrapper .size-option label.label {
        padding-left: 8px;
        padding-right: 8px;
    }
}