/* ═══════════════════════════════════════════════════════════════════════════
   KS MODAL — TEK KAYNAK (v2.252.0, 11 Ağu 2026)

   Checkout'un popup KABUĞU: karartma, kart, başlık satırı, kapatma X'i,
   ayak ve siyah pill "Kaydet" butonu. Bugün iki yüzey giyiniyor:

     1. Adres defteri popup'ı  → address-book.js   (+ eski `.ks-vm-ab-*`
                                  sınıflarını DAVRANIŞ kancası olarak taşır)
     2. Kart ismi popup'ı      → ks-modal.js       (Stripe + PayTR cüzdanları)

   🚨 POPUP GÖRÜNÜMÜNÜ BURADAN DEĞİŞTİR. `.ks-vm-ab-ov` / `.ks-vm-ab-pop` /
   `.ks-vm-ab-save` artık hiçbir görsel kural taşımıyor — yalnız JS
   delegasyonu + probe seçicileri için markup'ta duruyorlar.

   🚨 ALAN GÖRÜNÜMÜ BURADA TANIMLI DEĞİL (v2.232.1 dersi): kabuk `ks-vm-co`
   scope'unu ve sayfanın form anatomisini (`form-row` / `input-text` /
   `woocommerce-input-wrapper` / select2) taşır — kenarlık, radius, font,
   focus halkası, invalid kırmızısı ks-fields.css'ten birebir gelir.
   KS popup'ında alan ÇİZME; scope sınıfı + anatomi taşı.

   Sayfa kilidi (`body.ks-vm-ab-lock`) ks-fields.css'te: aynı kilidi teslimat
   konumu popup'ı da kullanıyor.
   ═══════════════════════════════════════════════════════════════════════════ */

.ks-vm-modal-ov {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(20, 20, 20, 0.55);
}

.ks-vm-modal {
	box-sizing: border-box;
	/* ⚠️ select2'nin dropdownParent'ı BU KAP DEĞİL, dıştaki `.ks-vm-modal-ov`
	   overlay'i (scroll'lu kaba demirlenince menü kayıp koordinata iniyordu —
	   10 Ağu). Buradaki `relative` yalnız kabın kendi mutlak konumlu
	   çocukları için duruyor; menü konumuyla ilgisi YOK. */
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: min(92vh, 720px);
	overflow: auto;
	background: #fff;
	border-radius: 14px;
	/* Operatör (9 Ağu gece): iç nefes artırıldı. */
	padding: 28px 30px 30px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.ks-vm-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 12px;
}

.ks-vm-modal-head h3 {
	margin: 0;
	/* Operatör (9 Ağu gece): başlık daha büyük ve kalın. */
	font-size: 1.3em;
	font-weight: 700;
	color: var(--e-global-color-secondary, #da6900);
}

.ks-vm-modal-x {
	border: 0;
	background: transparent;
	/* Operatör (10 Ağu): daha büyük ve hafif yukarıda. */
	font-size: 34px;
	line-height: 1;
	padding: 2px 8px;
	margin: -8px -6px 0 0;
	cursor: pointer;
	color: #888;
}

.ks-vm-modal .ks-vm-co-fields {
	margin: 0;
}

.ks-vm-modal-foot {
	margin-top: 16px;
}

/* Kaydet/Güncelle: site CTA dili — full-rounded pill, NORMAL yazım, beyaz
   etiket, düz siyah zemin, %100 genişlik + üst boşluk (operatör, 9-10 Ağu).
   color !important: Botiga/tema .button link renklerinin sızma ihtimaline
   karşı tartışma kapalı. 🚨 "tüm harfleri büyük" operatörün ŞİKÂYETİYDİ —
   text-transform: none bilerek yazılı, uppercase'e ÇEVİRME. */
body .ks-vm-modal-ov button.ks-vm-modal-save {
	display: block;
	width: 100%;
	margin-top: 26px;
	min-height: 48px;
	padding: 14px 18px;
	background: #000;
	color: #fff !important;
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.98em;
	letter-spacing: 0.2px;
	line-height: 1.3;
	text-transform: none;
	cursor: pointer;
}

body .ks-vm-modal-ov button.ks-vm-modal-save:hover {
	background: #1f1f1f;
}

body .ks-vm-modal-ov button.ks-vm-modal-save:disabled {
	opacity: 0.6;
	cursor: default;
}

@media (max-width: 640px) {
	.ks-vm-modal {
		padding: 20px;
	}
}

/* Popup'ta menü kontrole YAPIŞIK açılır (operatör, 10 Ağu): sayfadaki 10px
   "yüzer menü" boşluğu, popup'ın sıkışık grid'inde listeyi bir alttaki
   alanın (Şehir listesi → Ülke) üstüne bindirip "yanlış alanın menüsü"
   gibi okutuyordu. Bitişen kenarın köşeleri sıfır: aidiyet tartışmasız.
   🚨 `body.woocommerce-checkout` öneki ŞART — düz `.ks-vm-modal-ov` özgüllükte
   sayfanın kendi select2 kuralına YENİLİR. */
body.woocommerce-checkout .ks-vm-modal-ov .select2-dropdown--below {
	margin-top: -2px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

body.woocommerce-checkout .ks-vm-modal-ov .select2-dropdown--above {
	margin-top: 2px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* ── Ödeme bildirimi popup'ı (v2.351.0) ────────────────────────────────────
   Alanların TAMAMI ks-fields.css'ten geliyor (kabuk `ks-vm-co` scope'unu
   taşıyor). Burada yalnız bu popup'a özgü üç metin bloğu var: boş durum
   cümlesi, hesap bağlantısı ve satır altı uyarı. */
.ks-vm-pn-ov .ks-vm-pn-empty {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ks-ink, #1a1a1a);
}

.ks-vm-pn-ov .ks-vm-pn-link {
	margin: 0;
}

/* Uyarı satırı: 30 dakika penceresi ya da eksik alan. `hidden` niteliği
   yeterli — JS onu kaldırınca görünür. */
.ks-vm-pn-ov .ks-vm-pn-msg {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ks-warn, #a15c00);
}

/* Yerel `select`in oku. Sayfanın diğer kutuları select2 ve oklarını kendileri
   çiziyor; buradaki select gerçek bir `<select>` olduğu için okunu biz
   koyuyoruz — aynı yerde (sağdan 12px), aynı üçgen, aynı gri.
   🚨 `appearance:none` şart: yoksa tarayıcının kendi oku da çizilir, iki ok
   yan yana görünür. 🚨 Seçici ks-fields.css'teki `body .ks-vm-co select`ten
   (0,2,1) GÜÇLÜ olmalı: o kural `background` KISAYOLUNU yazıyor ve zayıf bir
   seçicide ok resmini siliyor (ölçüldü — ok hiç çizilmedi). Renk data-URI içinde SABİT (#6a6a6a = --ks-muted'ın
   yedeği) — SVG'ye CSS değişkeni geçirilemiyor. */
body .ks-vm-pn-ov .ks-vm-co select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%236a6a6a'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px 6px;
}