/* SNN ürün sayfası (açık gövde, karar 2026-09-19): solda beyaz galeri, sağda beyaz özet paneli,
   altında sekmeler (Açıklama, Uyumlu Modeller, Kargo & Üretim Süresi, Taksit, SSS),
   mobilde yatay kaydırmalı sekme şeridi + yapışkan üst şerit ve alt toplam çubuğu.
   Kaydırırken hangi bölümün sabit kalacağı SNN Ayarları → Ürün Sayfası'ndan gelir
   (galeri / panel / kapalı → body.snn-yapiskan-*); karar 2026-09-20, bkz. bölüm 2b.
   Sekme görünümü SNN Ayarları → Ürün Sayfası → "Sekme görünümü"nden gelir (kutu / çizgi / akordeon);
   snn-child/functions.php bunu Blocksy'nin woo_tabs_type theme_mod'una çevirir. Bkz. bölüm 3. */

/* ==================================================================
   1. Galeri (açık zemin, kılıf fotoğrafı kaybolmasın)
   ================================================================== */

.single-product .woocommerce-product-gallery {
  background: var(--snn-kart-gorsel);
  border: 1px solid var(--snn-kart-kenar);
  border-radius: var(--snn-radius-kart);
  padding: 12px;
  overflow: hidden;
}
.single-product .woocommerce-product-gallery img { border-radius: var(--snn-radius); }
.single-product .flexy-pills .ct-media-container,
.single-product .flexy-pills img {
  background: var(--snn-kart-gorsel);
  border-radius: var(--snn-radius);
}

/* ==================================================================
   1a. Dikey boşluklar (2026-09-21, Bülent: "aralarda çok boşluk"): header → ekmek kırıntısı
   56 → 20 px (`--theme-content-vertical-spacing`, Blocksy `main`/`.ct-container` padding'i),
   kırıntı şeridinin altı 20+40 → 8+16 px, model şeridi altı 24 → 16 (tema.css). 1920'de
   header'dan ürüne 220 px olan mesafe ~120 px'e iner.
   ================================================================== */

.single-product { --theme-content-vertical-spacing: 12px; }
.single-product .hero-section[data-type="type-1"] {
  padding-bottom: 4px;
  margin-bottom: 10px;
}

/* ==================================================================
   1b. Küçük resimlerin yeri (2026-09-21; SNN Ayarları → Ürün Sayfası → "Küçük resimlerin yeri")
   body.snn-galeri-altta | -solda | -sagda (functions.php); snn-core/modules/galeri.php ayarı
   tanımlar, functions.php `theme_mod_gallery_style` ile Blocksy'ye çevirir:
     altta → data-thumbs="bottom": li genişliği --thumbs-width, satır sarar.
     solda → data-thumbs="left" (≥690 px): .flexy sola --thumbs-width kadar kayar,
             .flexy-pills mutlak konumda solda dikey sütun (Blocksy default-gallery.scss).
     sağda → Blocksy'de yok: "left" kuralları aynalanır (özgüllük (0,4,1) > Blocksy (0,3,0)).
   Karo genişliği üç konumda da sabit (--snn-kucuk-karo): şerit yüksekliği sütun genişliğinden
   bağımsız olsun — 1d'deki ekrana sığdırma hesabı buna dayanır. <690 px Blocksy alta düşürür.
   ================================================================== */

.single-product { --snn-kucuk-karo: 88px; }

@media (min-width: 690px) {
  .single-product .woocommerce-product-gallery[data-thumbs],
  .single-product .woocommerce-product-gallery[data-thumbs] .flexy-pills li {
    --thumbs-width: var(--snn-kucuk-karo);
  }

  /* Dikey şerit: Blocksy taşanı kırpar (şerit okları Pro'da) → kaydırılabilir, çubuksuz.
     Karolar sığar (2026-09-21, Bülent: solda/sağda "+N" kapağı görünmüyordu — şerit büyük
     görselin yüksekliğine kilitli, 3D karosu + K + kapak taşıyordu): şerit boyut sorgu kabı,
     karo kenarı = (şerit yüksekliği − aralar) / karo sayısı, en çok 88, en az 48 (altında
     kaydırma kalır). Karo sayısı galeri.php'den (`.snn-pills-adet-N` → --snn-dikey-adet),
     3B karosu (snn-core 3b.css) varsa +1. Blocksy: ol margin-top −15, li padding-top 15 →
     ol yüksekliği N×(karo+15) − 15; karo + gap 15 eklenince (N+1)×karo + N×15. */
  body:is(.snn-galeri-solda, .snn-galeri-sagda) .woocommerce-product-gallery[data-thumbs="left"] .flexy-pills {
    overflow-y: auto;
    scrollbar-width: none;
    container-type: size;
    width: var(--thumbs-width);
    --snn-dikey-ek: 0;
    --snn-dikey-toplam: calc(var(--snn-dikey-adet, 1) + var(--snn-dikey-ek));
    --snn-dikey-karo: max(48px, min(var(--snn-kucuk-karo), calc((100cqh - (var(--snn-dikey-toplam) - 1) * var(--thumbs-spacing, 15px)) / var(--snn-dikey-toplam))));
  }
  body:is(.snn-galeri-solda, .snn-galeri-sagda) .woocommerce-product-gallery[data-thumbs="left"] .flexy-pills::-webkit-scrollbar {
    display: none;
  }
  body:is(.snn-galeri-solda, .snn-galeri-sagda) .woocommerce-product-gallery[data-thumbs="left"] .flexy-pills:has(> .snn-3b-karo) {
    --snn-dikey-ek: 1;
    align-items: center;
  }
  body:is(.snn-galeri-solda, .snn-galeri-sagda) .woocommerce-product-gallery[data-thumbs="left"] .flexy-pills ol {
    align-items: center;
  }
  body:is(.snn-galeri-solda, .snn-galeri-sagda) .woocommerce-product-gallery[data-thumbs="left"] .flexy-pills li {
    --thumbs-width: var(--snn-dikey-karo);
  }
  body:is(.snn-galeri-solda, .snn-galeri-sagda) .woocommerce-product-gallery[data-thumbs="left"] .flexy-pills .snn-3b-karo {
    width: var(--snn-dikey-karo);
  }

  /* Sağda: sol düzenin aynası. */
  body.snn-galeri-sagda .woocommerce-product-gallery[data-thumbs="left"] .flexy {
    margin-inline-start: 0;
    margin-inline-end: calc(var(--thumbs-width) + var(--thumbs-spacing, 15px));
  }
  body.snn-galeri-sagda .woocommerce-product-gallery[data-thumbs="left"] .flexy-pills {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  /* Rozet (Blocksy solda kendisi kaydırır; sağda yerine döner) ve büyüteç (sağda şeridin soluna). */
  body.snn-galeri-sagda .woocommerce-product-gallery[data-thumbs="left"] { --badge-left: 20px; }
  body.snn-galeri-sagda .woocommerce-product-gallery[data-thumbs="left"] .woocommerce-product-gallery__trigger {
    inset-inline-end: calc(20px + var(--thumbs-width) + var(--thumbs-spacing, 15px));
  }

  /* "3B Döndür" düğmesi (snn-core 3b.css: sol alt, left/bottom 24 px) şeritle çakışmasın:
     altta → şeridin üstüne çıkar; solda → şeridin sağına kayar; sağda → olduğu yerde. */
  body.snn-galeri-altta .woocommerce-product-gallery:has(.flexy-pills) .snn-3b__ac {
    bottom: calc(24px + var(--snn-kucuk-karo) + var(--thumbs-spacing, 15px));
  }
  body.snn-galeri-solda .woocommerce-product-gallery[data-thumbs="left"] .snn-3b__ac {
    left: calc(24px + var(--thumbs-width) + var(--thumbs-spacing, 15px));
  }
}

/* <690 px: şerit altta; düğme görselin üstüne değil şeridin ALTINA, akışta (üst üste binmesin). */
@media (max-width: 689.98px) {
  .single-product .woocommerce-product-gallery:has(.flexy-pills) .snn-3b__ac {
    position: static;
    margin-top: 12px;
  }
}

/* ==================================================================
   1c. "+N" kapağı (galeri.php: `<ol data-snn-kalan="N" style="--snn-kalan:'+N'">`)
   Hangi karonun kapaklanacağı ve K+2'den sonrasının gizlenmesi K'ya bağlı olduğu için
   galeri.php satır içi CSS basar (`#snn-galeri`); burada yalnız kapağın görünümü.
   Blocksy aktif çerçevesi `.ct-media-container::after` (z 2) → kapak `::before` z 3.
   Şerit açılınca (`.snn-pills--acik`, urun-galeri.js) ya da aktif karo gizli bölgedeyse
   satır içi CSS `content: none` yapar.
   ================================================================== */

.single-product .flexy-pills ol[data-snn-kalan] li .ct-media-container::before {
  content: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(var(--snn-orti-rgb), .58);
  color: var(--snn-beyaz);
  font: 700 18px/1 var(--snn-font);
  letter-spacing: .02em;
  pointer-events: none;
}

/* Telefonda K+1 karo tek satıra sığsın (Blocksy xs'te li'ye 33.333% yazar; (0,3,1) > (0,1,1)). */
@media (max-width: 689.98px) {
  .single-product .flexy-pills ol[data-snn-kalan] li {
    --thumbs-width: calc(100% / var(--snn-kucuk-satir, 5));
  }
}

/* ==================================================================
   1d. Büyük görsel ekrana sığar (2026-09-21; "Büyük görselin yüksekliği" → body.snn-galeri-yuk-ekran)
   Blocksy her slayta satır içi `aspect-ratio` basar; `product_gallery_ratio` artık `original`
   (functions.php filtresi) → görselin gerçek oranı. Burada yalnız yükseklik sınırlanır:
   img `width:auto; max-width:100%; max-height` → oran korunur, kırpma yok, tarayıcı genişliği
   orandan türetir (flex öğesinde "aktarılan boyut"). flexy `--flexy-view-height`'i görünür
   slaydı ölçerek yazar → bizim yükseklik = ölçülen; ek JS gerekmez.
   Yükseklik = viewport − yönetim çubuğu − yapışık header − 24 (yapışkan üst payı)
              − 24 (alt nefes) − 26 (kutu 12+12 iç boşluk, 1+1 kenar) − şerit (altta ise).
   Değişkenler body'de tanımlanır: sütun genişliği (2b) de okuyabilsin.
   Galeri sütunu genişliği = min(%50, yükseklik + 26 + yan şerit) → tam genişlikte 900 px'lik
   sütunda kare görsel ortada küçük kalmasın, özet paneli kalan yeri alsın.
   ================================================================== */

@media (min-width: 1000px) {
  .single-product.snn-galeri-yuk-ekran {
    --snn-pills-yuk: 0px;
    --snn-pills-yan: 0px;
    --snn-galeri-yuk: max(320px, calc(100vh  - var(--admin-bar, 0px) - var(--snn-header-yapisik-yuk) - 24px - 24px - 26px - var(--snn-pills-yuk)));
    --snn-galeri-yuk: max(320px, calc(100dvh - var(--admin-bar, 0px) - var(--snn-header-yapisik-yuk) - 24px - 24px - 26px - var(--snn-pills-yuk)));
  }
  .single-product.snn-galeri-yuk-ekran.snn-galeri-altta:has(.woocommerce-product-gallery .flexy-pills) {
    --snn-pills-yuk: calc(var(--snn-kucuk-karo) + 15px);
  }
  .single-product.snn-galeri-yuk-ekran:is(.snn-galeri-solda, .snn-galeri-sagda):has(.woocommerce-product-gallery .flexy-pills) {
    --snn-pills-yan: calc(var(--snn-kucuk-karo) + 15px);
  }

  .single-product.snn-galeri-yuk-ekran .ct-product-gallery-container .ct-media-container {
    justify-content: center;
  }
  .single-product.snn-galeri-yuk-ekran .flexy-item > .ct-media-container > img:not(.zoomImg),
  .single-product.snn-galeri-yuk-ekran .ct-product-gallery-container > .ct-media-container > img:not(.zoomImg) {
    width: auto;
    max-width: 100%;
    max-height: var(--snn-galeri-yuk);
    margin-inline: auto;
  }

  /* 3B sahnesi: kural KALDIRILDI (2026-09-21, aynı gün). snn-core 3b.css sahneyi artık görselin
     üstüne `position:absolute; inset:0` ile koyuyor (karo modu) → boyutu otomatik görselle aynı;
     buradan `height` verilseydi görselden uzayıp şeridin üstüne taşardı. */

  /* Galeri sütunu genişliği yüksekliğe bağlı; özet paneli kalanı alır.
     Galeri düzeni: sütun `.snn-galeri-sutun` (2b); panel/kapalı düzen: galeri doğrudan flex öğesi. */
  /* Tavan 3:2 fotoğrafa göre (yükseklik × 1,5): yatay fotoğraf tam yükseklikte sığar, sütun
     gereksiz daralmaz (2026-09-21: kare varsayımı 1920'de sütunu 865 px'e düşürüyordu, Bülent
     "resim alanı ufak kalmış"). Dikey/kare fotoğrafta yükseklik kısıtı yine img'de (yukarıda). */
  .single-product.snn-yapiskan-galeri.snn-galeri-yuk-ekran .snn-galeri-sutun {
    flex-basis: min(var(--product-gallery-width, 50%), calc(var(--snn-galeri-yuk) * 1.5 + 26px + var(--snn-pills-yan)));
  }
  .single-product.snn-galeri-yuk-ekran:not(.snn-yapiskan-galeri) .product .product-entry-wrapper .woocommerce-product-gallery {
    width: min(var(--product-gallery-width, 50%), calc(var(--snn-galeri-yuk) * 1.5 + 26px + var(--snn-pills-yan)));
  }
  .single-product.snn-galeri-yuk-ekran .product .product-entry-wrapper .entry-summary {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
}

/* <1000 px: yükseklik serbest ama uzun (dikey) fotoğraf ekranı aşmasın. */
@media (max-width: 999.98px) {
  .single-product .ct-product-gallery-container .ct-media-container { justify-content: center; }
  .single-product .ct-product-gallery-container .ct-media-container > img:not(.zoomImg) {
    width: auto;
    max-width: 100%;
    max-height: 70vh;
    max-height: 70dvh;
    margin-inline: auto;
  }
}

/* ==================================================================
   1e. 3B modeli olan üründe çerçeve (2026-09-21; renk panelden `--snn-3b-cerceve`, boş = vurgu)
   `.snn-3b` yalnız GLB'si olan üründe basılır (snn-core 3b.php) → `:has(.snn-3b)` yeterli.
   Düğme kuralları 3b.css'i (0,1,0) özgüllükle ezer; hover/odak renkleri 3b.css'te kalır.
   ================================================================== */

.single-product .woocommerce-product-gallery:has(.snn-3b, .snn-3b-karo, .snn-3b__sahne) {
  border-color: var(--snn-3b-cerceve, var(--snn-vurgu));
  box-shadow: inset 0 0 0 1px var(--snn-3b-cerceve, var(--snn-vurgu));
}
.single-product .woocommerce-product-gallery:has(.snn-3b, .snn-3b-karo, .snn-3b__sahne) .snn-3b__ac {
  border: 2px solid var(--snn-3b-cerceve, var(--snn-vurgu));
}
.single-product .woocommerce-product-gallery:has(.snn-3b, .snn-3b-karo, .snn-3b__sahne) .snn-3b__kap model-viewer {
  --progress-bar-color: var(--snn-3b-cerceve, var(--snn-vurgu));
}

/* ==================================================================
   2. Özet paneli: açık kart
   ================================================================== */

/* Yapışkanlık burada DEĞİL: düzen ayarına göre bölüm 2b'de verilir (galeri / panel). */
.single-product .entry-summary {
  background: var(--snn-kart);
  border: 1px solid var(--snn-kart-kenar);
  border-radius: var(--snn-radius-kart);
  padding: 24px;
  box-shadow: var(--snn-golge);

  /* açık kart bağlamı */
  --theme-text-color: var(--snn-kart-metin);
  --theme-headings-color: var(--snn-kart-metin);
  --theme-link-initial-color: var(--snn-kart-metin);
  --theme-border-color: var(--snn-kart-kenar);
  color: var(--snn-kart-metin);
}

.single-product .entry-summary .product_title,
.single-product .entry-summary .entry-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--snn-kart-metin);
  margin: 0 0 12px;
}

.single-product .entry-summary .price {
  font-size: 26px;
  font-weight: 700;
  color: var(--snn-kart-metin);
}
.single-product .entry-summary .price del { color: var(--snn-kart-ikincil); font-weight: 400; font-size: 18px; }
.single-product .entry-summary .price ins { text-decoration: none; color: var(--snn-indirim); }

.single-product .entry-summary .woocommerce-product-details__short-description { color: var(--snn-kart-ikincil); }
.single-product .entry-summary .ct-product-divider { --single-product-layer-divider: 1px solid var(--snn-kart-kenar); }
.single-product .entry-summary .product_meta { color: var(--snn-kart-ikincil); font-size: 14px; }

/* Seçenek alanları (snn-core secenekler.php; görünüm kuralları snn-core/assets/secenekler.css) */
.single-product .entry-summary label {
  font-weight: 600;
  color: var(--snn-kart-metin);
  font-size: 15px;
}
.single-product .entry-summary select,
.single-product .entry-summary input[type="text"],
.single-product .entry-summary input[type="number"],
.single-product .entry-summary textarea {
  background: var(--snn-kutu);
  border: 1px solid var(--snn-kart-kenar);
  color: var(--snn-kart-metin);
  border-radius: var(--snn-radius);
}

/* Sepete ekle: tam genişlik, turuncu */
.single-product .entry-summary form.cart { display: block; }
.single-product .entry-summary .single_add_to_cart_button {
  width: 100%;
  min-height: 52px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--snn-radius);
}
.single-product .entry-summary .quantity input {
  background: var(--snn-kutu);
  border: 1px solid var(--snn-kart-kenar);
  color: var(--snn-kart-metin);
}

/* ==================================================================
   2b. Yapışkan sütun (yalnız ≥1000 px)

   Düzen SNN Ayarları'ndan gelir, body sınıfını snn-child/functions.php basar:
     snn-yapiskan-galeri → sol sütunda galeri, sağda ad + rozet + fiyat bloğu (.snn-ozet-sabit)
                           yerinde kalır; seçenekler ve "Sepete Ekle" bloğun altından akar
     snn-yapiskan-panel  → eski davranış: özet panelinin tamamı sabit kalır
     snn-yapiskan-kapali → hiçbiri
   Yapışkanlık 1000 px altında yok: orada iki sütun zaten alt alta akıyor,
   sabit kalan bölümün yerini mobil üst şerit tutuyor (bölüm 6).

   Özgüllük notu: Blocksy ızgarayı `.product-entry-wrapper:has(.woocommerce-product-gallery…)`
   ile kuruyor (`display:flex`), galeriye `width: var(--product-gallery-width, 50%)` veriyor;
   o seçicinin özgüllüğü (0,4,0). Galeri artık sarmalayıcının içinde olduğu için genişliği
   sütun taşır, galerinin kendisi %100'e alınır — aşağıdaki (0,5,0) zincir bunu `!important`
   olmadan geçer. `:has()` torunla da eşleştiği için flex ızgarası bozulmaz.
   ================================================================== */

@media (min-width: 1000px) {
  /* Yönetim çubuğu bu genişlikte sabit ve 32 px; yapışkan sütun altına girmesin. */
  body.admin-bar { --admin-bar: 32px; }

  /* Yapışkan öğelerin ortak `top`u: yönetici çubuğu + YAPIŞIK header satırı + 24 px.
     Header yüksekliği ölçülmez, tokens.css'teki sabit `--snn-header-yapisik-yuk`ten
     gelir (tema.css bölüm 3b orta satırı o değere kilitliyor) — böylece galeri sütunu
     ile özet bloğu aynı çizgide durur. Tek satır değişkende değil kullanım yerinde
     hesaplanıyor: `--admin-bar` body'de tanımlı, :root'ta türetilen bir değişken
     onu 0 px olarak donduracaktı. */
  /* Galeri sütunu %58 (2026-09-21, Bülent: "resim alanı diğer alana göre ufak"); Blocksy
     `--product-gallery-width`'i `.product-entry-wrapper`a (0,1,0) yalnız ≠50 ise yazar, bu (0,3,0) kazanır.
     İki sütun arası 40 → 20 px (Blocksy `.entry-summary{margin-inline-start:40px}` (0,4,0), aynı özgüllük, sonra gelir). */
  .single-product .product .product-entry-wrapper { --product-gallery-width: 58%; }
  .single-product .product .product-entry-wrapper .entry-summary { margin-inline-start: 20px; }

  .single-product.snn-yapiskan-galeri .snn-galeri-sutun {
    flex: 0 0 var(--product-gallery-width, 50%);
    position: sticky;
    top: calc(var(--admin-bar, 0px) + var(--snn-header-yapisik-yuk) + 24px);
    align-self: flex-start;
  }
  .single-product .product .product-entry-wrapper .snn-galeri-sutun .woocommerce-product-gallery {
    width: 100%;
  }

  .single-product.snn-yapiskan-panel .entry-summary {
    position: sticky;
    top: calc(var(--admin-bar, 0px) + var(--snn-header-yapisik-yuk) + 24px);
    align-self: flex-start;
  }

  /* Özet panelinin sabit başlığı: h1 + rozet satırı + fiyat tek blok (snn-child/functions.php
     `blocksy:woocommerce:product-single:layout:*` tamponuyla sarar). Kısa açıklama,
     seçenekler, "Sepete Ekle" ve meta bu bloğun ALTINDAN akar; özet paneli bitince
     blok da doğal olarak header'ın altına girip kaybolur (sticky'nin normal davranışı).
     Altından akan içerik görünmesin diye zemin beyaz + alt kenar + yumuşak gölge.

     Blok header'a BİTİŞİK yapışır (arada boşluk YOK, galeri sütunundan farklı olarak):
     24 px'lik bir aralık bırakılsaydı akan seçenek satırları o şeritten görünürdü —
     kartın kendi üst iç boşluğu bloğun ÜSTÜNDE kalıyor ve beyazı oraya yetişmiyor.
     Çözüm: o 24 px'i kart değil BLOK taşır (aşağıdaki `padding-top` çifti) → blok
     kartın iç kenarından başlar, görünür metin yerinde kalır (dinlenme konumunda
     h1 ölçülen 297 px'te kalıyor, değişmedi).

     Negatif `margin-top` denendi ve ELENDİ: sticky kısıtının marj kutusuna mı kenarlık
     kutusuna mı uygulandığı tarayıcıya göre değişiyor (Chrome kenarlık kutusunu
     kısıtlıyor, spec marj kutusunu söylüyor) → `top` değeri tarayıcıya bağımlı olurdu.
     Marjsız çözüm her tarayıcıda aynı. */
  .single-product.snn-yapiskan-galeri .snn-ozet-sabit {
    position: sticky;
    top: calc(var(--admin-bar, 0px) + var(--snn-header-yapisik-yuk));
    z-index: 3;
    background: var(--snn-kart);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--snn-kart-kenar);
    box-shadow: 0 8px 10px -10px rgba(var(--snn-orti-rgb), .45);
  }
}

/* Kartın ÜST iç boşluğunu blok taşır (yukarıdaki gerekçe): kart `padding-top: 0`,
   blok `padding-top: 24px`. Görünür sonuç birebir aynı, ama bloğun beyaz zemini
   kartın iç kenarına kadar uzandığı için yapışınca header ile arasında akan
   içeriğin görüneceği bir şerit kalmıyor. Yalnız `galeri` düzeninde; `panel` ve
   `kapali` düzenlerinde blok hiç basılmadığı için kart boşluğu olduğu gibi kalır. */
.single-product.snn-yapiskan-galeri .entry-summary { padding-top: 0; }
.single-product.snn-yapiskan-galeri .snn-ozet-sabit { padding-top: 24px; }

@media (max-width: 999.98px) {
  /* Kart mobilde 18 px iç boşluklu (bölüm 6); blok da onunla hizalanır. */
  .single-product.snn-yapiskan-galeri .snn-ozet-sabit { padding-top: 18px; }
}

/* Blocksy `.product .entry-summary-items > * { margin-bottom: var(--product-element-spacing,10px) }`
   veriyor; sarmalayıcı devreye girince h1/rozet/fiyat artık doğrudan çocuk değil.
   Aynı ritim blok içinde tekrarlanır (blokta son öğe fiyat: boşluğu padding taşır). */
.single-product .snn-ozet-sabit > * { margin-bottom: var(--product-element-spacing, 10px); }
.single-product .snn-ozet-sabit > *:last-child { margin-bottom: 0; }

/* <1000 px: blok akışta kalır (yapışkanlık yok), görünüm eskisiyle aynı. */
@media (max-width: 999.98px) {
  .single-product .snn-ozet-sabit {
    position: static;
    background: none;
    padding-bottom: 0;
    border-bottom: 0;
    box-shadow: none;
  }
}

/* ==================================================================
   2c. Seçenek görselleri (swatch)

   snn-core seçenek kutusundaki radio seçeneğinin terim görseli varsa etikette küçük
   kare kart olarak görünür (markup: snn-core/modules/secenekler.php → .snn-alan__gorsel).
   Görseli olmayan seçenekler kutu/kart/klasik görünümündedir (panel ayarı, kurallar
   snn-core/assets/secenekler.css); iki biçim aynı listede karışabilir. Seçili kart vurgu
   kenarıyla işaretlenir (`--snn-secenek-vurgu`: panelden "seçili seçenek rengi", yoksa
   vurgu), klavye odağı da görünür. Kutu/kart görünümünde native radio gizlenir ve sağ
   üst köşeye onay rozeti gelir (secenekler.css bölüm 2); klasikte radio görünür kalır.
   ================================================================== */

/* Aynı satırdaki kartlar eşit yükseklikte (etiket iki satıra düşse de). */
.snn-alan__ogesi--gorselli { flex: 0 0 auto; }
.snn-alan__ogesi--gorselli label { height: 100%; box-sizing: border-box; }

.snn-alan__ogesi--gorselli label {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 92px;
  padding: 8px;
  text-align: center;
  background: var(--snn-kart);
  border: 1px solid var(--snn-kenar);
  border-radius: var(--snn-radius-kart);
  transition: border-color .15s ease, box-shadow .15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .snn-alan__ogesi--gorselli label { transition: none; }
}

.snn-alan__ogesi--gorselli label:hover { border-color: var(--snn-kart-kenar-hover); }

/* Radio görünür kalır (erişilebilirlik): kartın üstünde küçük daire. */
.snn-alan__ogesi--gorselli input { margin: 0; }

.snn-alan__gorsel {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--snn-kart-gorsel);
  border-radius: var(--snn-radius);
  overflow: hidden;
}
.snn-alan__gorsel-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.snn-alan__ogesi--gorselli .snn-alan__etiket { font-size: 13px; line-height: 1.25; }
.snn-alan__ogesi--gorselli .snn-alan__fark { font-size: 12px; }

.snn-alan__ogesi--gorselli label:has(input:checked) {
  border-color: var(--snn-secenek-vurgu, var(--snn-vurgu));
  box-shadow: 0 0 0 1px var(--snn-secenek-vurgu, var(--snn-vurgu));
}
.snn-alan__ogesi--gorselli label:has(input:focus-visible) {
  outline: 2px solid var(--snn-baglanti);
  outline-offset: 2px;
}

/* Telefonda iki sütunlu ızgara (390'da da geçerli): kart genişliği ekrana uyar. */
@media (max-width: 479.98px) {
  .snn-alan__liste:has(.snn-alan__ogesi--gorselli) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .snn-alan__ogesi--gorselli label { width: auto; }
}

/* ==================================================================
   2d. Fiyat paneli (2026-09-20; işaretleme snn-core/modules/fiyat.php)
   Görünüm panelden: --serit (varsayılan) / --koyu / --sade / --ozel (değişkenleri
   snn-core fiyat.php `snn_fiyat_ozel_css()` satır içi basar); boyut --buyuk / --orta.

   Fiyat başlıkla aynı renk/ağırlıkta tek satırdı, sönük kalıyordu. Şimdi:
   açık şerit zemin + solda 4 px turuncu çizgi, rakam 40 px, para simgesi
   küçük ve ikincil, altında 13 px "KDV dahil · …" satırı (panelden), en altta
   seçenek dökümü (betik doldurur). Turuncu METİN yok: açık zeminde 3.5:1
   okunmuyor; vurgu çizgide ve parlamada. Seçenek değişince rakam sayarak
   geçer, kutu bir an kehribara yakın açık tonla parlar (--snn-uyari-zemin).
   Blok yapışkan özet başlığının (.snn-ozet-sabit) son öğesidir; kaydırırken de
   görünür kalır.
   ================================================================== */

/* Görünüm (panel: urun_fiyat_gorunum) kutunun kendi değişkenlerini seçer; kurallar
   aşağıda yalnız bu değişkenleri okur. --serit varsayılan. */
.single-product .entry-summary .snn-fiyat {
  --fiyat-zemin:   var(--snn-bolum);
  --fiyat-parla:   var(--snn-uyari-zemin);
  --fiyat-cizgi:   var(--snn-vurgu);
  --fiyat-cizgi-parla: var(--snn-vurgu-hover);
  --fiyat-rakam:   var(--snn-kart-metin);
  --fiyat-simge:   var(--snn-kart-ikincil);
  --fiyat-ikincil: var(--snn-kart-ikincil);
  --fiyat-ayrac:   var(--snn-kenar);
  --fiyat-indirim: var(--snn-indirim);
  position: relative;
  margin: 2px 0 14px;
  padding: 14px 18px 13px 20px;
  background: var(--fiyat-zemin);
  border-left: 4px solid var(--fiyat-cizgi);
  border-radius: var(--snn-radius-kart);
}
/* Koyu plaka: haki üstünde turuncu rakam (≈8:1; açık zeminde yasak olan turuncu metin burada okunur) */
.single-product .entry-summary .snn-fiyat--koyu {
  --fiyat-zemin:   var(--snn-koyu-zemin);
  --fiyat-parla:   var(--snn-koyu-bolum);
  --fiyat-cizgi:   var(--snn-vurgu);
  --fiyat-cizgi-parla: var(--snn-koyu-baslik);
  --fiyat-rakam:   var(--snn-vurgu);
  --fiyat-simge:   var(--snn-koyu-ikincil);
  --fiyat-ikincil: var(--snn-koyu-metin);
  --fiyat-ayrac:   var(--snn-koyu-kenar);
  --fiyat-indirim: var(--snn-vurgu);
}
/* Sade: kutu yok; parlama yerine yalnız sayaç */
.single-product .entry-summary .snn-fiyat--sade {
  --fiyat-zemin: transparent;
  --fiyat-parla: transparent;
  --fiyat-cizgi: transparent;
  --fiyat-cizgi-parla: transparent;
  padding: 0;
  border-left: 0;
  border-radius: 0;
  margin: 2px 0 12px;
}

.single-product .entry-summary .snn-fiyat .price,
.single-product .entry-summary .snn-fiyat__tutar {
  display: block;
  margin: 0;
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fiyat-rakam);
}
.single-product .entry-summary .snn-fiyat--orta .price,
.single-product .entry-summary .snn-fiyat--orta .snn-fiyat__tutar { font-size: 32px; }
.single-product .entry-summary .snn-fiyat__tutar .woocommerce-Price-currencySymbol {
  font-size: .55em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fiyat-simge);
}
/* İndirimli: eski fiyat küçük ve üstü çizili, yeni fiyat kırmızı (token). Betik seçenek
   değişince aynı <del>/<ins> yapısını yeniden yazar (secenekler.php satisHtml). */
.single-product .entry-summary .snn-fiyat__tutar del {
  display: inline-block;
  font-size: .45em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: var(--fiyat-ikincil);
  margin-right: .35em;
  vertical-align: .6em;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--fiyat-ikincil);
}
.single-product .entry-summary .snn-fiyat__tutar del .woocommerce-Price-currencySymbol { font-size: .85em; color: inherit; }
.single-product .entry-summary .snn-fiyat__tutar ins { text-decoration: none; color: var(--fiyat-indirim); }
/* WooCommerce fiyat soneki ("+ %20 KDV", Ayarlar → Vergi): büyük fiyatın yazı boyunu
   miras almasın, ikincil bilgi gibi küçük dursun. Betik yeniden yazsa da sonek korunur
   (secenek-form.js sonekHtml). */
.single-product .entry-summary .snn-fiyat__tutar .woocommerce-price-suffix {
  font-size: .4em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fiyat-ikincil);
  white-space: nowrap;
}
.snn-mobil-ust__fiyat .woocommerce-price-suffix,
.snn-mobil-cubuk .woocommerce-price-suffix {
  font-size: 11px;
  font-weight: 400;
  color: var(--snn-kart-ikincil);
}
/* Alt çubuk koyu haki zeminde: ikincil gri okunmuyor, açık metin rengi yarı saydam. */
.snn-mobil-cubuk .woocommerce-price-suffix { color: #ECEBE3; opacity: .8; }

/* İndirim satırı (fiyat.php basar): "%6 indirim" rozeti + "150 ₺ kazanç" */
.single-product .entry-summary .snn-fiyat__indirim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--fiyat-ikincil);
}
.single-product .entry-summary .snn-fiyat__indirim-rozet {
  display: inline-block;
  padding: 3px 7px;
  border-radius: var(--snn-radius);
  background: var(--fiyat-indirim);
  color: var(--snn-beyaz);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.single-product .entry-summary .snn-fiyat--koyu .snn-fiyat__indirim-rozet { color: var(--snn-vurgu-metin); }
.single-product .entry-summary .snn-fiyat__kazanc { font-weight: 600; color: var(--fiyat-rakam); }
.single-product .entry-summary .snn-fiyat__kazanc .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }
.single-product .entry-summary .snn-fiyat__ayrac { padding: 0 .35em; }

.single-product .entry-summary .snn-fiyat__alt,
.single-product .entry-summary .snn-fiyat__dokum {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--fiyat-ikincil);
}
.single-product .entry-summary .snn-fiyat__alt { margin-top: 7px; }
.single-product .entry-summary .snn-fiyat__dokum {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed var(--fiyat-ayrac);
  font-variant-numeric: tabular-nums;
}
.single-product .entry-summary .snn-fiyat__dokum[hidden] { display: none; }

/* Seçenek değişince: kutu parlar (betik sınıfı 900 ms sonra kaldırır) */
@keyframes snn-fiyat-parla {
  0%   { background-color: var(--fiyat-parla); border-left-color: var(--fiyat-cizgi-parla); }
  100% { background-color: var(--fiyat-zemin); border-left-color: var(--fiyat-cizgi); }
}
.single-product .entry-summary .snn-fiyat--degisti { animation: snn-fiyat-parla .8s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .single-product .entry-summary .snn-fiyat--degisti { animation: none; }
}

@media (max-width: 999.98px) {
  .single-product .entry-summary .snn-fiyat { padding: 12px 16px 11px 16px; }
  .single-product .entry-summary .snn-fiyat--sade { padding: 0; }
  .single-product .entry-summary .snn-fiyat .price,
  .single-product .entry-summary .snn-fiyat__tutar { font-size: 34px; }
  .single-product .entry-summary .snn-fiyat--orta .price,
  .single-product .entry-summary .snn-fiyat--orta .snn-fiyat__tutar { font-size: 28px; }
}

/* ==================================================================
   3. Ürün sekmeleri (görünüm panelden: kutu / çizgi / akordeon)

   Blocksy `woo_tabs_type` theme_mod'unu okur, değerini SNN Ayarları →
   Ürün Sayfası → "Sekme görünümü" belirler (functions.php, theme_mod_woo_tabs_type
   filtresi). Müşteri panelden değiştirebildiği için üçünün de stili burada:
     kutu     → data-type="type-2:left"  WooCommerce çekirdek şablonu (ul.tabs + .woocommerce-Tabs-panel)
     çizgi    → data-type="type-1:left"  aynı markup, sekme zemini yok, aktifin altı turuncu
     akordeon → data-type="type-3:left"  Blocksy markup'ı (.ct-accordion-heading + <article> > .entry-content)
   Sekme geçişi ve klavye gezinmesi WooCommerce çekirdeğindedir
   (woocommerce/assets/js/frontend/single-product.js); burada yalnız görünüm var.
   assets/js/urun-sekmeler.js sadece aktif sekmeyi görüş alanına kaydırır ve
   sağdaki "devamı var" gölgesini (data-snn-kaydir) açıp kapatır.

   Özgüllük notu: Blocksy'nin zinciri `.woocommerce div.product div.woocommerce-tabs ul.tabs li a`
   (0,4,5) kadar uzun; buradaki seçiciler `!important` yerine `.single-product .product …`
   önekiyle bunu geçer. Üçüncü taraf CSS düzenlenmez (kural 9).
   ================================================================== */

.single-product .woocommerce-tabs { background: transparent; }

/* Sarmalayıcı: sekme şeridinin üst boşluğu ve yüksekliği tek yerden (gölge ipucu
   bunlarla hizalanıyor). Blocksy `.product>.woocommerce-tabs{padding-top:60px}` ezilir.
   Genişlik: Blocksy ürün düzeni (product_structure type-4) tam genişlik; içerik sınırını
   `is-width-constrained` yalnız şeride veriyordu. Panel kartı da aynı sınıra otursun diye
   aynı hesap (`.is-width-constrained`) sarmalayıcıya taşındı. */
.single-product .product .woocommerce-tabs {
  --snn-sekme-ust: 48px;
  --snn-sekme-yuk: 46px;
  position: relative;
  width: min(100%, var(--theme-container-edge-spacing, 92vw));
  max-width: var(--snn-icerik);
  margin-inline: auto;
  padding-top: var(--snn-sekme-ust);
}

/* ---------- 3a. Ortak: panel beyaz kart (entry-summary / sepet kutularıyla aynı kalıp) ---------- */

.single-product .product .woocommerce-tabs .woocommerce-Tabs-panel.panel.wc-tab,
.single-product .product .woocommerce-tabs[data-type*="type-3"] .ct-accordion-tab article > .entry-content {
  background: var(--snn-kart);
  border: 1px solid var(--snn-kart-kenar);
  border-radius: var(--snn-radius-kart);
  box-shadow: var(--snn-golge);
  padding: 24px;

  /* açık kart bağlamı */
  --theme-text-color: var(--snn-kart-metin);
  --theme-headings-color: var(--snn-kart-metin);
  --theme-link-initial-color: var(--snn-kart-metin);
  --theme-border-color: var(--snn-kart-kenar);
  color: var(--snn-kart-metin);
}
.single-product .product .woocommerce-tabs .woocommerce-Tabs-panel.panel.wc-tab > *:last-child,
.single-product .product .woocommerce-tabs[data-type*="type-3"] .ct-accordion-tab article > .entry-content > *:last-child {
  margin-bottom: 0;
}
/* Tam genişlikte (2026-09-21) düz metin 960 px'te kalır; tablo, model şeridi, SSS kutuları etkilenmez. */
.single-product .product .woocommerce-tabs .woocommerce-Tabs-panel.panel.wc-tab > :is(p, ul, ol, h2, h3, h4, blockquote),
.single-product .product .woocommerce-tabs[data-type*="type-3"] .ct-accordion-tab article > .entry-content > :is(p, ul, ol, h2, h3, h4, blockquote) {
  max-width: 960px;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2,
.single-product .woocommerce-tabs .ct-accordion-tab .entry-content h2 { color: var(--snn-kart-metin); }

/* ---------- 3b. Sekme şeridi: kutu (type-2) ve çizgi (type-1) ortak ölçüleri ---------- */

.single-product .product .woocommerce-tabs:is([data-type*="type-1"], [data-type*="type-2"]) ul.tabs {
  /* Blocksy `.is-width-constrained` genişliğini sıfırla: şerit sarmalayıcıyla hizalı olsun
     (gölge ipucu sarmalayıcının sağ kenarına konumlanıyor). */
  width: 100%;
  max-width: none;
  margin: 0 0 10px;
  padding: 0;
  --vertical-alignment: stretch;
  --tab-border-color: var(--snn-kart-kenar);
  justify-content: flex-start;
  gap: 6px;
}
.single-product .product .woocommerce-tabs:is([data-type*="type-1"], [data-type*="type-2"]) ul.tabs li {
  flex: 0 0 auto;
  margin: 0;
}
.single-product .product .woocommerce-tabs:is([data-type*="type-1"], [data-type*="type-2"]) ul.tabs li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: var(--snn-sekme-yuk);
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--snn-ikincil);
  white-space: nowrap;
  text-decoration: none;
  /* Blocksy sekme başlıklarını BÜYÜK HARF basıyor; akordeon başlıkları (3e) normal
     yazımda, sekme de öyle olsun — "Kargo & Üretim Süresi" büyük harfte okunmuyor. */
  text-transform: none;
  letter-spacing: 0;
}
.single-product .product .woocommerce-tabs:is([data-type*="type-1"], [data-type*="type-2"]) ul.tabs li a:focus-visible {
  outline: 2px solid var(--snn-vurgu-koyu);
  outline-offset: -3px;
}

/* ---------- 3c. Kutu sekme (type-2) ---------- */

/* Blocksy `li.active a{background:var(--tab-background, var(--theme-palette-color-1))}` →
   değişken basılmadığı için aktif sekme TURUNCU oluyordu; kart rengine çevriliyor. */
.single-product .product .woocommerce-tabs[data-type*="type-2"] ul.tabs {
  --tab-background: var(--snn-kart);
}
/* Sekmelerin ortasından geçen 1px dolgu çizgisi (Blocksy ≥690px'te `.tabs::after`) kapatılır. */
.single-product .product .woocommerce-tabs[data-type*="type-2"] ul.tabs::before,
.single-product .product .woocommerce-tabs[data-type*="type-2"] ul.tabs::after {
  content: none;
}
.single-product .product .woocommerce-tabs[data-type*="type-2"] ul.tabs li {
  background: var(--snn-bolum);
  border: 1px solid var(--snn-kart-kenar);
  border-radius: var(--snn-radius-kart) var(--snn-radius-kart) 0 0;
  margin-inline-end: 0;
  overflow: hidden;
}
.single-product .product .woocommerce-tabs[data-type*="type-2"] ul.tabs li:not(.active):hover a {
  background: var(--snn-kart);
  color: var(--snn-metin);
}
/* Aktif: beyaz + üstte 3px turuncu şerit. `border-top` yüksekliği 2px oynattığı,
   `li::before` ise type-2'de display:none olduğu için iç gölge kullanılıyor. */
.single-product .product .woocommerce-tabs[data-type*="type-2"] ul.tabs li.active a {
  background: var(--snn-kart);
  color: var(--snn-metin);
  font-weight: 700;
  box-shadow: inset 0 3px 0 var(--snn-vurgu);
}

/* ---------- 3d. Çizgi sekme (type-1) ---------- */

.single-product .product .woocommerce-tabs[data-type*="type-1"] ul.tabs {
  --tab-background: var(--snn-vurgu);   /* Blocksy'nin aktif alt çizgisi bu değişkeni okur */
  gap: 4px;
  border-bottom: 1px solid var(--snn-kart-kenar);
}
.single-product .product .woocommerce-tabs[data-type*="type-1"] ul.tabs li {
  background: transparent;
  border: 0;
}
.single-product .product .woocommerce-tabs[data-type*="type-1"] ul.tabs li:not(.active):hover a {
  color: var(--snn-metin);
}
.single-product .product .woocommerce-tabs[data-type*="type-1"] ul.tabs li.active a {
  color: var(--snn-metin);
  font-weight: 700;
}
.single-product .product .woocommerce-tabs[data-type*="type-1"] ul.tabs li.active::before {
  height: 3px;
  bottom: -1px;
  background: var(--snn-vurgu);
}

/* ---------- 3e. Akordeon (type-3) ---------- */

.single-product .woocommerce-tabs .ct-accordion-heading {
  font-size: 17px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--snn-metin);
  border-bottom: 1px solid var(--snn-kenar);
  padding: 16px 0;
}
.single-product .woocommerce-tabs .ct-accordion-heading:hover { color: var(--snn-baglanti-hover); }
.single-product .product .woocommerce-tabs[data-type*="type-3"] .ct-accordion-tab article > .entry-content {
  margin-block: 12px 20px;
}

/* ---------- 3f. Kaydırma ipucu: sağda soluklaşma (JS data-snn-kaydir basar) ---------- */

.single-product .product .woocommerce-tabs[data-snn-kaydir="var"]:is([data-type*="type-1"], [data-type*="type-2"])::after {
  content: "";
  position: absolute;
  top: var(--snn-sekme-ust);
  inset-inline-end: 0;
  width: 36px;
  height: var(--snn-sekme-yuk);
  /* Zemine soluklaşma işe yaramıyor: sayfa (#F3F2EC) ile pasif sekme (#E9E8E0) arasında
     ~%2 fark var, ipucu görünmüyordu. Onun yerine sağ kenara yumuşak bir koyu gölge —
     hangi sekme kenara denk gelirse gelsin okunur. */
  background: linear-gradient(to left, rgba(var(--snn-orti-rgb), .16), transparent);
  pointer-events: none;
}

/* ---------- 3g. Mobil / dar tablet: şerit yatay kayar ---------- */

@media (max-width: 999.98px) {
  .single-product .product .woocommerce-tabs:is([data-type*="type-1"], [data-type*="type-2"]) ul.tabs {
    flex-direction: row;         /* Blocksy ≤689.98px'te `column` yapıyor */
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scroll-padding-inline: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .single-product .product .woocommerce-tabs:is([data-type*="type-1"], [data-type*="type-2"]) ul.tabs::-webkit-scrollbar {
    display: none;
  }
  .single-product .product .woocommerce-tabs:is([data-type*="type-1"], [data-type*="type-2"]) ul.tabs li {
    scroll-snap-align: start;
    margin-top: 0;               /* Blocksy type-2 mobil `margin-top:-1px` */
  }
  .single-product .product .woocommerce-tabs[data-type*="type-1"] ul.tabs li { border-top: 0; }
}

@media (max-width: 689.98px) {
  .single-product .product .woocommerce-tabs { --snn-sekme-ust: 36px; --snn-sekme-yuk: 44px; }
  .single-product .product .woocommerce-tabs:is([data-type*="type-1"], [data-type*="type-2"]) ul.tabs li a {
    padding: 0 14px;
  }
  .single-product .product .woocommerce-tabs .woocommerce-Tabs-panel.panel.wc-tab,
  .single-product .product .woocommerce-tabs[data-type*="type-3"] .ct-accordion-tab article > .entry-content {
    padding: 18px 16px;
  }
}

/* ---------- 3h. Uyumlu model şeridi (snn-core basar) ---------- */

.snn-uyumlu-modeller {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.snn-uyumlu-modeller li {
  background: var(--snn-kutu);
  border: 1px solid var(--snn-kenar);
  border-radius: var(--snn-radius);
  padding: 6px 10px;
  font-size: 14px;
  color: var(--snn-metin);
}

/* ---------- 3i. Sekme içi tablo (taksit; snn-core `.snn-tablo-sarmal > .snn-sekme-tablo` basar) ---------- */

.snn-tablo-sarmal {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 16px;
}
.snn-tablo-sarmal:focus-visible {
  outline: 2px solid var(--snn-vurgu-koyu);
  outline-offset: 2px;
}
.snn-sekme-tablo {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 15px;
}
.snn-sekme-tablo th,
.snn-sekme-tablo td {
  border: 1px solid var(--snn-kenar);
  padding: 10px 12px;
  text-align: left;
}
.snn-sekme-tablo thead th {
  background: var(--snn-bolum);
  color: var(--snn-baslik);
  font-weight: 700;
  white-space: nowrap;
}
.snn-sekme-tablo td + td,
.snn-sekme-tablo th + th { text-align: right; }

/* ==================================================================
   4. İlgili ürünler
   ================================================================== */

.single-product .related,
.single-product .up-sells { margin-top: 56px; }

/* B5: tablet/mobilde de görünür (functions.php). Blocksy mobilde tek sütun (4 uzun kart),
   tablette 3 sütun (4. kart yetim kalıyor) basıyor; mağaza ızgarasıyla aynı 2 sütun (2×2).
   Özgüllük Blocksy'nin satır içi `.related [data-products]` kuralını geçmek için. */
@media (max-width: 999.98px) {
  .single-product .related [data-products],
  .single-product .up-sells [data-products] {
    --shop-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 689.98px) {
  .single-product .related [data-products],
  .single-product .up-sells [data-products] { gap: 12px; }
  .single-product .related,
  .single-product .up-sells { margin-top: 40px; }
}

/* ==================================================================
   5. Sepet / ödeme: açık kutular
   ================================================================== */

.ct-woocommerce-cart-form .cart_totals,
.ct-order-review,
.woocommerce-checkout #order_review {
  background: var(--snn-kart);
  border-radius: var(--snn-radius-kart);
  --cart-totals-border: 1px solid var(--snn-kart-kenar);
  --order-review-border: 1px solid var(--snn-kart-kenar);
  border: 1px solid var(--snn-kart-kenar);
  box-shadow: var(--snn-golge);
  color: var(--snn-kart-metin);
  --theme-text-color: var(--snn-kart-metin);
  --theme-headings-color: var(--snn-kart-metin);
  --theme-border-color: var(--snn-kart-kenar);
}

/* Sepet / ödeme özeti küçük görseli (B7): kırpılmamış görsel kare beyaz kutuya sığar
   (functions.php Store API'ye `medium` boyutu veriyor; kılıfın ucu/kabza kesilmez). */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  background: var(--snn-kart);
  border: 1px solid var(--snn-kart-kenar);
  border-radius: var(--snn-radius);
}

/* ==================================================================
   5b. Stok kutusu (snn-core/modules/stok.php; WooCommerce `.stock` paragrafını sarar)

   Ön sipariş: kehribar uyarı zemini + koyu metin; tükendi: kırmızı kenar. Formun
   hemen üstünde durur (WooCommerce simple.php sırası korunur).
   ================================================================== */

.single-product .snn-stok {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid var(--snn-kenar);
  border-left-width: 4px;
  border-radius: var(--snn-radius);
  background: var(--snn-bolum);
  color: var(--snn-kart-metin);
  font-size: 14px;
  line-height: 1.45;
}
.single-product .snn-stok--on-siparis { background: var(--snn-uyari-zemin); border-left-color: var(--snn-vurgu); }
.single-product .snn-stok--tukendi { border-left-color: var(--snn-indirim); }
.single-product .snn-stok__simge {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--snn-kart-ikincil);
}
.single-product .snn-stok--on-siparis .snn-stok__simge { color: var(--snn-vurgu-hover); }
.single-product .snn-stok--tukendi .snn-stok__simge { color: var(--snn-indirim); }
.single-product .snn-stok__baslik { display: block; font-weight: 700; margin-bottom: 2px; }
.single-product .snn-stok .stock { margin: 0; font-size: inherit; color: inherit; }

/* ==================================================================
   6. Mobil: tek sütun, yapışkan üst şerit ve alt toplam çubuğu

   Üst şerit (≤999.98): küçük görsel + ad + canlı toplam + "Seçenekleri Seç".
   Galeri görüş alanının üstünden çıkınca assets/js/urun-yapiskan.js
   `body.snn-mobil-ust-acik` ekler, şerit aşağı iner. Alt çubuk yalnız ≤689.98'de
   olduğu için şerit butonu orada gizlenir (aynı işi iki yerde göstermeyelim).
   ================================================================== */

@media (max-width: 999.98px) {
  .single-product .entry-summary {
    position: static;
    padding: 18px;
  }
  .single-product .entry-summary .product_title { font-size: 24px; }

  .snn-mobil-ust {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--snn-kart);
    border-bottom: 1px solid var(--snn-kart-kenar);
    box-shadow: var(--snn-golge);
    transform: translateY(-100%);
    transition: transform .2s ease;
  }
  body.snn-mobil-ust-acik .snn-mobil-ust { transform: none; }

  .snn-mobil-ust__gorsel {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;       /* küçük görsel kırpılmaz (FDE kılıfın ucu kesilmesin) */
    background: var(--snn-kart-gorsel);
    border: 1px solid var(--snn-kart-kenar);
    border-radius: var(--snn-radius);
  }
  .snn-mobil-ust__ad {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.25;
    color: var(--snn-kart-metin);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .snn-mobil-ust__fiyat {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--snn-kart-metin);
  }
  .snn-mobil-ust__fiyat del { font-size: 12px; font-weight: 400; color: var(--snn-kart-ikincil); margin-right: .3em; }
  .snn-mobil-ust__fiyat ins { text-decoration: none; color: var(--snn-indirim); }
  .snn-mobil-ust__buton { flex: 0 0 auto; min-height: 36px; }
}

@media (max-width: 999.98px) and (prefers-reduced-motion: reduce) {
  .snn-mobil-ust { transition: none; }
}

@media (max-width: 689.98px) {
  /* Alt yapışkan çubuk: fiyat + sepete ekle (snn-core basar) */
  .snn-mobil-cubuk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--snn-footer);
    border-top: 1px solid var(--snn-kenar);
  }
  .snn-mobil-cubuk .snn-mobil-fiyat { font-size: 19px; font-weight: 700; color: var(--snn-koyu-baslik); }
  .snn-mobil-cubuk .snn-mobil-fiyat del { font-size: 13px; font-weight: 400; color: var(--snn-koyu-ikincil); margin-right: .3em; }
  .snn-mobil-cubuk .snn-mobil-fiyat ins { text-decoration: none; color: var(--snn-vurgu); }
  .snn-mobil-cubuk .button { flex: 0 0 auto; min-height: 44px; }
  /* Tükendi: buton pasif, işlev yok (functions.php aria-disabled basar) */
  .snn-mobil-cubuk .button[aria-disabled="true"],
  .snn-mobil-ust__buton[aria-disabled="true"] { opacity: .55; pointer-events: none; }

  body.single-product { padding-bottom: 68px; }

  /* Alt çubukta zaten "Seçenekleri Seç" var; şeritte ikincisi gösterilmez. */
  .snn-mobil-ust__buton { display: none; }
}

/* Masaüstünde mobil çubuk gizli */
@media (min-width: 690px) {
  .snn-mobil-cubuk { display: none; }
}

/* 1000 px ve üstünde üst şerit yok: sol sütun zaten yapışkan. */
@media (min-width: 1000px) {
  .snn-mobil-ust { display: none; }
}