/* Woo Sepet Toolkit - taksit bloğu
   ------------------------------------------------------------------
   Seçim mimarisi: :has() YOK. Şablon her radyonun ardına çip label'ını
   ve o taksidin sonuç bloğunu koyar; seçim kardeş birleşiciyle yapılır
   (input:checked + label + .wst-taksit-sonuc). Etkileşimli görünüm
   @supports selector(:checked) POZİTİF kapısının içindedir: kapıyı
   anlamayan antik tarayıcı otomatik olarak "tüm seçenekler alt alta"
   güvenli görünümüne düşer - çip seçili görünüp tutarın değişmediği
   ara-bant tuzağı hiçbir tarayıcıda oluşamaz.

   Palet: Shoptimizer'ın KAYNAK dosyalarından alındı (31 Ağustos 2026,
   shoptimizer/assets/css/main/*.css). Daha önce tarayıcıdan örneklenen
   değerler kullanılıyordu ve bazıları çocuk temaya aitti - örneğin 10px
   köşe temada HİÇ yok, .order-card'a özgü. Köşe 4px bırakıldı: ana temada
   en çok kullanılan dikdörtgen değer (18 kullanım). Tema değişirse yalnız bu bloğu güncelle
   ya da :root üzerinde --sepet-* değişkenlerini tanımla (yükleme
   sırasından bağımsız ezme).
   font-family / line-height yazılmaz - tema tipografisi devralınır.
   Yazı boyutları rem: tarayıcı erişilebilirlik yazı ölçeği bloğa işler. */

.wst-taksit,
.wst-taksit-tek,
.wst-fallback {
	--wst-aksan: var(--sepet-aksan, #3BB54A);            /* marka yeşili - yalnız dekor */
	--wst-aksan-koyu: var(--sepet-aksan-koyu, #0F834D);  /* ana temanin durum yesili (product.css:591 "Stokta Var"); beyaz uzerinde 4,80:1 */
	--wst-aksan-zemin: #f4fbf5;
	--wst-metin: #000;
	--wst-ikincil: #444;
	--wst-soluk: #6B6B6B;                                /* #fafafa üstünde 4,9:1 (AA 4,5:1); eski #767676 4,35:1 ile kalıyordu */
	--wst-uyari: #92400E;                                /* vade farkı, #fff üstünde 6,4:1 */
	--wst-baglanti: #1E68C4;                             /* sitenin kendi mavisi (.order-card); beyaz uzerinde 5,48:1 */
	--wst-cizgi: #EEEEEE;                                /* ana temanin baskin kenar rengi (main.css'te 76 kullanim) */
	--wst-cizgi-ic: #f0f0f0;
	--wst-kenar: #d8d8d8;
	--wst-zemin: #fafafa;
	--wst-kart: #fff;
	--wst-tablo-bas: #f3f4f6;
	--wst-kose: 4px;
}

/* Görsel-gizli: ekran okuyucuya açık, ekranda yok (display:none DEĞİL). */
.wst-gizli,
.wst-taksit-radyo {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Dış çerçeve YOK (31 Ağustos 2026, kullanıcı tercihi): çipler ve sonuç
   kutusu zaten kenarlıklı beyaz kartlar; onları bir de gri kutuya almak
   "kutu içinde kutu" görüntüsü yaratıyordu. Çerçevesiz hâlde kartlar
   doğrudan sayfada duruyor, blok 28 px kısalıyor ve sayfanın kart diliyle
   (telefon/WhatsApp kartları) tutarlı oluyor.
   Geri istenirse: border + background + padding satırlarını geri ekle. */
.wst-taksit {
	margin: 16px 0 0;
	/* Shoptimizer ürün sayfasında .summary .price'a float:left veriyor;
	   temizlemezsek blok fiyatın YANINA akıyor (31 Ağustos 2026'da canlı
	   sayfada görüldü). Hangi tema hangi öğeyi float'larsa float'lasın,
	   blok her zaman kendi satırında başlar. */
	clear: both;
}

/* Blok içi mini reset: tema TİPOGRAFİSİNİ bilerek devralıyoruz
   (font-family/line-height yazmıyoruz - uyum böyle geliyor) ama BİÇİM
   dönüşümlerini almıyoruz.

   Neden !important: 31 Ağustos 2026'da canlı ürün sayfasında Shoptimizer'ın
   `.summary details summary { text-transform: uppercase }` kuralı (özgüllük
   0-1-2) bizim `.wst-taksit summary` kuralımızı (0-1-1) yendi ve açılır
   başlık "TÜM TAKSİT SEÇENEKLERİNİ GÖR" oldu. Özgüllüğü artırmak yalnız bu
   temayı çözerdi; eklenti tema bağımsız olacağı için her tema için yeniden
   hesap yapmak sürdürülemez. Kapsam `.wst-taksit` altıyla sınırlı olduğundan
   yayılma alanı sıfır - sayfanın geri kalanına dokunmaz.

   box-sizing da açıkça yazılır: temaya güvenilmez, padding hesabı bozulmasın. */
.wst-taksit,
.wst-taksit *,
.wst-fallback {
	box-sizing: border-box;
}

.wst-taksit summary,
.wst-taksit li,
.wst-taksit th,
.wst-taksit td,
.wst-taksit label,
.wst-taksit b,
.wst-taksit strong,
.wst-taksit span,
.wst-taksit p {
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Yapısal reset - aynı gerekçe, aynı yöntem.
   31 Ağustos 2026'da canlı ürün sayfasında ölçülen çakışmalar:
     .summary table td  { padding: .5rem 1rem .5rem 0 }  -> ilk sütun sola
                                                            yapışıyor, sağ
                                                            sütun kayıyordu
     .summary table th  { padding: .5em 1em .5em 0 }     -> başlıklar gövdeyle
                                                            hizalanmıyordu
     .summary table     { font-size: 14px }
     address, p, table  { margin: 0 0 1.21575rem }       -> tabloya alt boşluk
     .summary details summary { display: block; padding: .6rem 2rem .6rem 0 }
                                                         -> chevron hizası bozuk
   Hepsi (0-1-2) özgüllükte, bizimkiler (0-1-1). Kapsam .wst-taksit altı. */
.wst-taksit p {
	margin: 0;
}

.wst-taksit-tam table {
	width: 100% !important;
	margin: 0 !important;   /* üst boşluk sarmalayıcıda: temanın akordiyon
	                           animasyonu offsetHeight ölçüyor, margin'i
	                           saymadığı için açılışta zıplama olurdu */
	border-collapse: collapse !important;
	font-size: 0.8125rem !important;
}

/* Temanın akordiyon içerik sınıfını kendi kapsamımızda nötrle:
   tek görevi pdp-accordions.js'e "içerik bu" demek. */
.wst-taksit-tam .wst-taksit-icerik {
	padding: 10px 0 0 !important;
	margin: 0 !important;
}

.wst-taksit-tam th,
.wst-taksit-tam td {
	padding: 7px 8px !important;
	text-align: center !important;
	border: 0 !important;
	border-bottom: 1px solid var(--wst-cizgi-ic) !important;
}

/* Üç sütun da ortalı - kullanıcı tercihi (31 Ağustos 2026).
   Boşluk sorununun çözümü de bu: sola dayalı "2" ile sağa dayalı paranın
   arası 98 px açılıyordu; ortalayınca beyaz alan içeriğin iki yanına
   bölünüyor ve boşluklar 57/52'ye iniyor.
   Bilinen ödün: ortalı para sütununda basamaklar hizalanmaz
   ("11.118,45" ile "7.556,50" kayar). Rakamlar burada benzer uzunlukta
   olduğu için okunurluk kaybı küçük; karşılaştırma için tam hiza
   isteniyorsa bu kuralı text-align:right yap. */

.wst-taksit-tam thead th {
	border-bottom: 1px solid var(--wst-cizgi) !important;
}

.wst-taksit-tam > summary {
	display: block !important;   /* flex DEĞİL - Safari'de summary'nin toggle'ını kırıyor */
	padding: 0 !important;
	font-size: 0.8125rem !important;
}

.wst-taksit-ay small {
	font-size: 0.8125rem !important;
}

/* ------------------------------------------------------------------
   Ürün sayfası: fiyatın hemen altındaki tek satır özet.
   clear:both ZORUNLU - tema .summary .price'a float:left veriyor;
   temizlenmezse satır fiyatın etrafına dolanıp "12 aya varan taksit ·
   aylık 2.176 / 21.000 TL / TL'den başlayan" gibi okunmaz hale geliyor
   (31 Ağustos 2026'da canlı mobil sayfada görüldü).
   ------------------------------------------------------------------ */

.wst-taksit-tek {
	clear: both;
	margin: 8px 0 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--wst-metin, #000);
	font-weight: 600;
}

.wst-taksit-tek span {
	color: var(--wst-ikincil, #444);
	font-weight: 400;
}

.wst-taksit-bas {
	margin-bottom: 12px;
}

.wst-taksit-bas strong { color: var(--wst-metin); }

/* ------------------------------------------------------------------
   TEMEL GÖRÜNÜM (koşulsuz - antik tarayıcının gördüğü):
   çipler gizli, TÜM sonuç satırları alt alta açık. Bilgi her zaman tam;
   hiçbir tarayıcıda yanlış tutar gösterilemez.
   ------------------------------------------------------------------ */

/* Grid DEĞİL flex (31 Ağustos 2026): repeat(auto-fit, minmax(...)) 421 px'lik
   sütunda BEŞ track üretiyordu, dördü dolu biri boş. Chrome boş track'i 0'a
   çökertip hizayı tutturuyor ama bu çökertme her tarayıcıda güvenilir değil;
   çökmediğinde çipler sütunun ancak %80'ini kaplayıp sağda boşluk bırakıyor
   ve alttaki sonuç kutusuyla hizasız duruyordu (kullanıcının masaüstü ekran
   görüntüsünde görüldü). Flex'te hayalet track kavramı yok: çipler her zaman
   satırı tam doldurur, sığmayınca sarar. */
.wst-taksit-secim {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wst-taksit-cip { display: none; }

.wst-taksit-sonuc {
	display: block;
	flex: 1 0 100%;
	order: 2;
	background: var(--wst-kart);
	border: 1px solid var(--wst-cizgi);
	border-radius: var(--wst-kose);
	padding: 12px 14px;
}

.wst-taksit-ay {
	display: block;
	font-size: 1.3125rem;
	font-weight: 700;
	color: var(--wst-metin);
}

.wst-taksit-ay small {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wst-ikincil);
}

.wst-taksit-toplam {
	display: block;
	font-size: 0.8125rem;
	color: var(--wst-ikincil);
	margin-top: 2px;
}

.wst-taksit-toplam em {
	font-style: normal;
	color: var(--wst-uyari);
}

/* ------------------------------------------------------------------
   ETKİLEŞİMLİ GÖRÜNÜM - pozitif kapı. :checked ve + birleşici bu
   kapıyı geçen her tarayıcıda çalışır; kapıyı geçemeyen temel
   görünümde kalır, hiçbir şey bozulmaz.
   ------------------------------------------------------------------ */
@supports selector(input:checked) {

	.wst-taksit-cip {
		display: block;
		flex: 1 1 4.625rem;   /* eşit paylaş, dar alanda sar */
		order: 1;
		border: 1px solid var(--wst-kenar);
		border-radius: var(--wst-kose);
		background: var(--wst-kart);
		padding: 8px 4px;
		text-align: center;
		cursor: pointer;
		font-size: 0.8125rem;
		color: var(--wst-ikincil);
		margin: 0;
		min-width: 0;
	}

	/* Para asla kesilmez: nowrap/ellipsis yok; dar sütunda auto-fit
	   ızgara kendiliğinden 4 -> 2 düşer, tutar tam kalır. */
	.wst-taksit-cip b {
		display: block;
		color: var(--wst-metin);
		white-space: nowrap;   /* "✓ 12 taksit" tek satırda kalsın */
	}

	.wst-taksit-sonuc { display: none; }

	/* Seçim: kardeş zinciri. */
	.wst-taksit-radyo:checked + .wst-taksit-cip + .wst-taksit-sonuc { display: block; }

	/* Seçili çip: koyu yeşil kenar + onay imi + kalın yazı - renk körlüğünde
	   de ayırt edilir (renk tek ipucu değil). */
	.wst-taksit-radyo:checked + .wst-taksit-cip {
		border-color: var(--wst-aksan-koyu);
		background: var(--wst-aksan-zemin);
		font-weight: 600;
	}

	/* Onay imi YOK - iki kez denendi, ikisi de bozuktu (31 Ağustos 2026):
	   yalnız seçilide gösterince metin uzayıp çipi büyütüyor ve alttaki
	   tabloyu kaydırıyordu (iPhone 14 Pro, 12 taksit); her çipte gizli yer
	   ayırınca da metni sağa itip ortalamayı bozdu.

	   Kenar da KALINLAŞTIRILMAZ: 1px kenar + 2px iç halka = 3px yeşil ediyordu
	   ve temanın diline yabancı duruyordu - Shoptimizer her yerde 1px çizgi
	   kullanır, kalın çerçeve deseni hiç yok. Seçim üç işaretten belli:
	   yeşil kenar + açık yeşil zemin + KALIN YAZI. Renk körlüğü için gereken
	   renk-dışı ipucunu kalınlık yerine yazı ağırlığı taşıyor; kutu ölçüsü
	   hiç değişmediği için seçimde kayma da olmuyor. */

	.wst-taksit-radyo:focus-visible + .wst-taksit-cip {
		outline: 2px solid var(--wst-aksan-koyu);
		outline-offset: 2px;
	}
}

/* ------------------------------------------------------------------
   Tam tablo (details/summary - JS'siz aç/kapa)
   ------------------------------------------------------------------ */

.wst-taksit-tam { margin-top: 12px; }

/* summary'ye display:flex VERİLMEZ - Safari'de summary'nin display'i
   list-item dışına çıkarıldığında aç/kapa çalışmıyor (bilinen hata).
   Yerleşim iç sarmalayıcıda (.wst-taksit-tam-bas) yapılıyor. */
.wst-taksit-tam > summary {
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wst-baglanti);
	list-style: none;
	width: fit-content;
}

.wst-taksit-tam-bas {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 2.75rem;   /* >=44px dokunma hedefi (eski link ~19px idi) */
	/* Renk summary'de değil BURADA: temanın .summary details summary kuralı
	   (0-1-2) ürün sayfasında summary'deki rengimizi (0-1-1) eziyordu -
	   sepette mavi, ürün sayfasında tema rengi görünüyordu (31 Ağustos 2026).
	   Doğrudan atanmış kural kalıtımla gelen tema rengine her zaman üstündür;
	   ok da currentColor ile aynı maviyi devralır. */
	color: var(--wst-baglanti);
	font-weight: 600;
}

/* iOS Safari işaretçi temizliği çift kanaldan - ikisi birlikte kalmalı. */
.wst-taksit-tam > summary::-webkit-details-marker { display: none; }

/* Temanın kendi disclosure işaretçisini sustur. Shoptimizer
   `.summary details summary::after`a mask-image koyuyor (0-1-2 özgüllük) ve
   sözde-elemanla çizilen okumuzu maskeleyip görünmez yapıyordu. Ok artık
   şablonda gerçek SVG olarak duruyor - temanın eli değmiyor. */
.wst-taksit-tam > summary::after,
.wst-taksit-tam > summary::before {
	content: none !important;
	display: none !important;
}

/* Link değil disclosure: açılınca dönen ok. */
.wst-taksit-ok {
	flex: none;
	transition: transform 0.15s;
}

.wst-taksit-tam[open] .wst-taksit-ok { transform: rotate(180deg); }

.wst-taksit-tam > summary:focus-visible {
	outline: 2px solid var(--wst-aksan-koyu);
	outline-offset: 2px;
}

.wst-taksit-tam table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	background: var(--wst-kart);
	font-size: 0.8125rem;
}

/* Hizalama/padding yukarıdaki yapısal resette; burada yalnız görünüm. */
.wst-taksit-tam thead th {
	background: var(--wst-tablo-bas);
	color: var(--wst-ikincil);
	font-weight: 600;
}

.wst-taksit-tam tbody tr:nth-child(even) td { background: var(--wst-zemin); }
.wst-taksit-tam td.fark { color: var(--wst-uyari); }

/* ------------------------------------------------------------------
   Banka şeridi (metin - gpos SVG'leri hotlink edilmez: 11 dosya 221 KB)
   ------------------------------------------------------------------ */

/* Banka adları kutucuk olarak: virgüllü tek blokta göz kayıp gidiyordu.
   Sıfır bayt (logo yok), çiplerle aynı görsel dil, 11 bankanın hepsi eşit
   görünür - "tüm bankalarda aynı oranlar" mesajıyla tutarlı. */
.wst-taksit-bankalar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.wst-taksit-bankalar li {
	padding: 3px 8px;
	border: 1px solid var(--wst-cizgi);
	border-radius: var(--wst-kose);
	background: var(--wst-kart);
	font-size: 0.6875rem;
	line-height: 1.45;
	color: var(--wst-ikincil);
}

.wst-taksit-not {
	font-size: 0.75rem;
	color: var(--wst-soluk);
	margin: 8px 0 0;
}

/* ------------------------------------------------------------------
   Geri düşüş sarmalayıcısı: gpos'un 11 bankalık ham tablosu kendi
   kutusunda kayar - sayfa asla yatay taşmaz, temadaki yüzdeli genişlik
   hack'ine ihtiyaç yok (tema bağımsızlık sözleşmesinin parçası).
   ------------------------------------------------------------------ */

.wst-fallback {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 16px 0 0;
	clear: both;
}