/* ═══════════════════════════════════════════════════════════════════════════
   KS OPTION BOX — TEK KAYNAK (v2.251.0, 11 Ağu 2026)

   Checkout'ta "kayıtlı bir şeyi seç ya da yenisini ekle" deseninin TAMAMI
   burada. Bugün BEŞ yüzey konuşuyor, hepsi birebir aynı görünür:

     1. Adres defteri        → .ks-vm-ab-row      (class-ks-vm-address-book.php
                                                   + address-book.js)
     2. Stripe kart cüzdanı  → .ks-vm-cw-row      (card-wallet.js)
     3. PayTR kart cüzdanı   → .ks-vm-cw-row      (paytr-direct.js)
     4. Banka havalesi       → .ks-vm-bacs-row    (class-ks-vm-bacs.php
        hesapları (v2.257.0)                       + bacs.js)
        ↳ araç kutusu YOK (kalem/çöp/kopyala hiçbiri); satır yalnız seçilir.
     5. Kargo yöntemleri     → .ks-vm-co-ship-opt (class-ks-vm-checkout.php
        (v2.259.0)                                 ship_row_html; JS YOK)
        ↳ satır kabuğu <label>: tıklama alanı kartın tamamı, gösterge radio
          WooCommerce'in GERÇEK form alanı. Araç kutusu yerine sağda
          `-aside` (ücret / "Ücretsiz").

   🚨 GÖRÜNÜMÜ BURADAN DEĞİŞTİR. Eski `.ks-vm-ab-*` / `.ks-vm-cw-*` sınıfları
   yalnız DAVRANIŞ kancası olarak (JS delegasyonu + probe seçicileri) satırda
   duruyor; hiçbirinin görsel kuralı YOK. Yeni bir yüzey eklerken satıra
   `ks-vm-opt` ailesini bas, kendi CSS'ini YAZMA.

   Anatomi (her yüzeyde birebir aynı):

     <div class="ks-vm-opt [is-on]" role="radio" aria-checked tabindex="0">
       <input type="radio" class="ks-vm-tk-radio" aria-hidden="true"
              tabindex="-1" [checked|disabled]>   ← gösterge, form alanı DEĞİL
       <svg class="ks-vm-opt-mark">…</svg>        ← ops. (kart şeması)
       <span class="ks-vm-opt-body">
         <span class="ks-vm-opt-title"><strong>…</strong></span>
         <span class="ks-vm-opt-sub">…</span>     ← ops.
       </span>
       <span class="ks-vm-opt-tools">             ← ops. (kalem/çöp)
         <button class="ks-vm-opt-ic ks-vm-opt-ic-edit">
         <button class="ks-vm-opt-ic ks-vm-opt-ic-del">
       </span>
       <span class="ks-vm-opt-aside">…</span>     ← ops. (sağ değer; -tools'un
     </div>                                          ALTERNATİFİ, birlikte değil)

   Operatör kararları (11 Ağu 2026, ekran görüntülü karşılaştırma):
     · Seçim göstergesi = NATIVE input[type=radio]. Adres defterindeki CSS ile
       çizilmiş turuncu halka kaldırıldı; kargo + ödeme yöntemi radio'larıyla
       aynı eleman (9 Ağu'daki "tema nasıl çiziyorsa öyle" kararının devamı).
       Boy/accent `body .ks-vm-co input[type=radio]` kuralından (ks-checkout.css).
     · İkon seti = DOLGULU (kart cüzdanının seti). Adres defterinin çizgisel
       seti düştü.
     · "Yeni ekle" kutusu = KOYU metin + hover'da turuncu çerçeve/yazı.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Liste ─────────────────────────────────────────────────────────────────
   4 satırdan sonra kendi içinde kayar. "Yeni ekle" kutusu bu kabın DIŞINDA
   durur, böylece hiç scroll dışına çıkmaz. padding: klavye focus halkası
   kırpılmasın diye. */
.ks-vm-opt-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 316px;
	overflow-y: auto;
	padding: 2px;
}

/* ── Satır ─────────────────────────────────────────────────────────────── */
.ks-vm-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	height: 70px;
	padding: 0 12px;
	border: 1px solid var(--ks-field-border-color, #d9d9d9);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
}

.ks-vm-opt.is-on {
	border-color: var(--ks-field-focus-border, #da6900);
	/* Zemin = accent'in beyaz üstünde %7'lik tinti (eski sabit #fff7ef'in
	   ölçülmüş dengi) — accent panelden değişirse tint de izler. */
	background: color-mix(in srgb, var(--ks-field-focus-border, #da6900) 7%, #fff);
}

/* Seçilemez satır — kargo picker'ında faturaya seçili adres ya da fatura
   ülkesinden farklı ülkedeki kayıt (v2.253.x). Satırda pointer-events AÇIK
   kalır: hover'da neden-tooltip'i (title) çalışmalı; tıklama/klavye JS
   guard'ında kesilir (aria-disabled + tabindex=-1). Cursor pointer'a
   dönmez — satır tıklanabilir HİSSİ vermemeli. Kalem/çöp ikonları ise
   gerçekten kapalı (kayıt fatura picker'ında yaşıyor). */
.ks-vm-opt.is-disabled {
	opacity: 0.45;
	cursor: default;
}

.ks-vm-opt.is-disabled .ks-vm-opt-tools {
	pointer-events: none;
}

.ks-vm-opt:focus-visible {
	outline: 2px solid var(--e-global-color-secondary, #da6900);
	outline-offset: 2px;
}

/* Gösterge radio: gerçek input ama form alanı değil (name'siz, aria-hidden).
   Satırın kendisi tıklamayı yönetir. */
.ks-vm-tk-radio {
	flex: none;
	margin: 0;
	pointer-events: none;
}

/* Kart şeması rozeti (Visa/Mastercard) — adres satırlarında yok. Banka
   havalesi satırlarında aynı kutuyu operatörün yüklediği banka logosu
   dolduruyor; <img> geldiğinde oran korunur, kutu büyümez. */
.ks-vm-opt-mark {
	flex: none;
	width: 36px;
	height: 22px;
}

/* 🚨 Yükseklik burada TEKRAR yazılıyor. Elementor'ın `.elementor img{height:auto}`
   kuralı (0,1,1) yalın `.ks-vm-opt-mark`ı (0,1,0) yeniyor ve <img> rozetler
   36×22 yerine görselin oranına düşüyordu (banka logosu 36×18 ölçüldü; SVG
   şema rozetleri etkilenmiyor, onlar img değil). `.ks-vm-opt` öneki ağırlığı
   (0,2,1)'e çıkarır — yükleme sırasından bağımsız kazanır. */
.ks-vm-opt img.ks-vm-opt-mark {
	height: 22px;
	object-fit: contain;
	object-position: center;
}

/* ── Metin bloğu ───────────────────────────────────────────────────────────
   İki satır da tek satırda kalır ve taşarsa "…" ile kesilir: uzun adresler
   satırı 70px'in dışına itmesin. */
.ks-vm-opt-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ks-vm-opt-title,
.ks-vm-opt-sub {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.35;
}

.ks-vm-opt-title {
	font-size: 14px;
	color: var(--ks-ink, #1a1a1a);
	padding-bottom: 2px;
}

.ks-vm-opt-sub {
	font-size: 13px;
	color: var(--ks-muted, #6a6a6a);
}

/* ── Sağ değer sütunu ──────────────────────────────────────────────────────
   Satırın SAĞ ucunda tek bir değer (bugün: kargo ücreti / "Ücretsiz").
   `-tools` ile aynı hizada durur, ikisi bir arada kullanılmaz — araç kutusu
   olan yüzeylerde (adres, kart) sağ uç kalem/çöpün yeri.
   Metin başlıkla aynı puntoda ve kalın: satırın "ne kadar" cevabı, göz onu
   isimle birlikte tarıyor. */
.ks-vm-opt-aside {
	margin-left: auto;
	flex: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-align: right;
	white-space: nowrap;
	color: var(--ks-ink, #1a1a1a);
}

/* ── Kalem / çöp ───────────────────────────────────────────────────────────
   İkon ŞEKLİ de tek kaynakta: inline SVG yerine CSS mask. Dört renderer
   (adres PHP + adres JS + iki cüzdan JS) artık boş buton basıyor, glif
   buradan geliyor — kalemi değiştirmek isteyen tek yeri düzeltir.
   Renk `currentColor`dan, yani hover kuralları glifi de boyar. */
.ks-vm-opt-tools {
	margin-left: auto;
	flex: none;
	display: flex;
	gap: 2px;
}

.ks-vm-opt-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: #9a9a9a;
	line-height: 0;
	cursor: pointer;
}

.ks-vm-opt-ic::before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 15px 15px;
	mask-size: 15px 15px;
}

.ks-vm-opt-ic-edit::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41L18.37 3.29a1 1 0 0 0-1.41 0l-1.84 1.83 3.75 3.75 1.84-1.83z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41L18.37 3.29a1 1 0 0 0-1.41 0l-1.84 1.83 3.75 3.75 1.84-1.83z'/%3E%3C/svg%3E");
}

.ks-vm-opt-ic-del::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3v1H4v2h16V4h-5V3H9zM6 9h12l-1 12H7L6 9zm4 2v8h1.6v-8H10zm2.4 0v8H14v-8h-1.6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3v1H4v2h16V4h-5V3H9zM6 9h12l-1 12H7L6 9zm4 2v8h1.6v-8H10zm2.4 0v8H14v-8h-1.6z'/%3E%3C/svg%3E");
}

.ks-vm-opt-ic:hover {
	color: var(--ks-field-focus-border, #da6900);
	background: color-mix(in srgb, var(--ks-field-focus-border, #da6900) 10%, #fff);
}

.ks-vm-opt-ic-del:hover {
	color: var(--ks-danger, #c8321f);
	background: #faeae7;
}

/* ── "Yeni ekle" kutusu ────────────────────────────────────────────────────
   Kayıtlı satırlarla aynı kılık, solda disabled radio. Metin KOYU kalır
   (tıklanabilir hissi), hover'da çerçeve + yazı turuncuya döner. */
.ks-vm-opt-add {
	margin-top: 10px;
	/* 🚨 Renk KALITIMA bırakılamaz: adres bölümünün ata rengi #212121, ödeme
	   kutusununki #1a1a1a — "koyu metin" iki yüzeyde İKİ FARKLI koyu çıkıyordu
	   (parite probe'u yakaladı). Satır kendi rengini söyler, başlık ondan
	   miras alır, hover ikisini birden çevirir. */
	color: var(--ks-ink, #1a1a1a);
}

/* strong da 600'de kalır — kayıtlı satırların <strong>'u 700 çiziyor ve
   ekle kutusu onunla aynı anatomiyi taşıdığı için kalınlığı burada sabitliyoruz
   (yine parite probe'u: adres 600 / kartlar 700 okuyordu). */
.ks-vm-opt-add .ks-vm-opt-title,
.ks-vm-opt-add .ks-vm-opt-title strong {
	font-weight: 600;
	color: inherit;
}

.ks-vm-opt-add:hover {
	border-color: var(--ks-field-focus-border, #da6900);
	color: var(--ks-field-focus-border, #da6900);
}

/* ── Boot iskeleti ─────────────────────────────────────────────────────────
   Stripe kutusu sunucudan sessiz kutularla açılır (ham checkbox markup'ının
   FOUC'u yerine); card-wallet.js ilk render'da söker. Boylar gerçek satırla
   birebir olmalı, bu yüzden burada — 70px tek yerde değişsin. */
.ks-vm-co .ks-vm-cw-boot {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ks-vm-cw-boot-row {
	box-sizing: border-box;
	height: 70px;
	border: 1px solid #ececec;
	border-radius: 10px;
	background: #f6f6f6;
}

.ks-vm-cw-boot-dim {
	opacity: 0.55; /* "Başka bir kart kullan" kutusunun soluk hali */
}

.ks-vm-cw-boot-tk {
	margin-top: 18px;
}

.ks-vm-cw-boot-sum {
	box-sizing: border-box;
	height: 48px;
	border: 1px solid #ececec;
	border-radius: var(--ks-field-radius, 10px);
	background: #f6f6f6;
}