/* ═══════════════════════════════════════════════════════════════════════════
   KS ACCOUNT — hesabım sayfasının DÜZENİ (v2.369.0, 24 Ağu 2026)

   Burada YALNIZ bu sayfaya özgü yerleşim var. Görünüm dili başka yerlerden
   geliyor ve BURADA YENİDEN YAZILMAZ:

     · alan/etiket/select2  → ks-fields.css  (bölümler `.ks-vm-co` taşır)
     · butonlar             → ks-buttons.css (`.ks-btn` ailesi)
     · kayıtlı satır kutusu → ks-options.css (`.ks-vm-opt` ailesi — adres
                              kartları ve kayıtlı kartlar aynı kutuyu giyer)
     · popup kabuğu         → ks-modal.css
     · sipariş DETAYI       → ks-thankyou.css (`.ks-vm-ty` — detay panelleri
                              teşekkür sayfasının TA KENDİSİ)
     · sekmeler             → Elementor nested-tabs paneli (operatörün elinde)

   🚨 Sekme başlıklarının/konteynerlerinin boşluk ve rengine BURADAN dokunma:
   o yüzey operatörün Elementor panelinde ve orada kalmalı (Botiga savaşının
   dersi — bkz. ks-botiga-tablet-padding).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ Kabuk ═══════════════ */

.ks-vm-ac {
	color: var(--ks-ink, #1a1a1a);
}

/* Bölümler alt alta dizildiğinde aralarındaki ritim. Elementor konteyner
   gap'i varsa o kazanır; bu yalnız tek konteynerde yığılan bölümler için. */
.ks-vm-ac + .ks-vm-ac {
	margin-top: 22px;
}

/* ── Panel: sayfanın TEK kutu deyimi ── */
.ks-vm-ac-panel {
	border: 1px solid var(--ks-line, #e0e0e0);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

.ks-vm-ac-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ks-line, #e0e0e0);
}

.ks-vm-ac-panel-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ks-ink, #1a1a1a);
}

.ks-vm-ac-panel-body {
	padding: 20px;
}

/* Kartsız bölüm başlığı — panel başlığıyla aynı tipografi, çerçevesiz.
   Başlık solda, araç şeridi (tarih aralığı) SAĞ ÜSTTE; dar ekranda açılır
   liste alt satıra düşüp tam genişliğe yayılır (.ks-vm-ac-osel medya kuralı). */
.ks-vm-ac-sec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}

.ks-vm-ac-note {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ks-muted, #6a6a6a);
}

/* Elementor kanvasındaki yer tutucu — operatör bölümün yerini görsün. */
.ks-vm-ac-ed {
	padding: 18px;
	border: 1px dashed var(--ks-line, #e0e0e0);
	border-radius: 10px;
	font-size: 13px;
	color: var(--ks-muted, #6a6a6a);
	text-align: center;
}

/* ── Boş durum ── */
.ks-vm-ac-empty {
	padding: 26px 16px;
	text-align: center;
}

.ks-vm-ac-empty i {
	display: block;
	margin-bottom: 10px;
	font-size: 38px;
	line-height: 1;
	color: var(--e-global-color-secondary, #da6900);
}

.ks-vm-ac-empty p {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ks-muted, #6a6a6a);
}

.ks-vm-ac-empty p:last-child {
	margin-bottom: 0;
}

/* ═══════════════ Selamlama ═══════════════ */

.ks-vm-ac-hello {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ks-ink, #1a1a1a);
}

.ks-vm-ac-hello-sub {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--ks-muted, #6a6a6a);
}

/* ═══════════════ Özet kartları ═══════════════ */

.ks-vm-ac-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

.ks-vm-ac-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--ks-line, #e0e0e0);
	border-radius: 14px;
	background: #fff;
}

/* Bekleyen ödeme kartı: uyarı dilinde — para masada duruyor. */
.ks-vm-ac-card--warn {
	border-color: var(--ks-warn, #a15c00);
	background: var(--ks-warn-soft, #fdf2e3);
}

.ks-vm-ac-card-top {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ks-vm-ac-card-ic {
	font-size: 22px;
	line-height: 1;
	color: var(--e-global-color-secondary, #da6900);
}

.ks-vm-ac-card--warn .ks-vm-ac-card-ic {
	color: var(--ks-warn, #a15c00);
}

.ks-vm-ac-card-title {
	font-size: 14px;
	font-weight: 700;
}

.ks-vm-ac-card-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ks-muted, #6a6a6a);
}

.ks-vm-ac-card--warn .ks-vm-ac-card-text {
	color: var(--ks-ink, #1a1a1a);
}

.ks-vm-ac-card-cta {
	margin-top: auto;
}

/* ═══════════════ Durum çipi ═══════════════ */

.ks-vm-ac-chip {
	display: inline-flex;
	align-items: center;
	/* Hap değil yumuşak köşe (operatör, 26 Ağu): tam yuvarlak rozet sayfadaki
	   hap butonlarla aynı dili konuşup onlarla karışıyordu; 8px onu bir
	   ETİKET olarak okutuyor. */
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	background: var(--ks-neutral-soft, #f4f4f4);
	color: var(--ks-ink, #1a1a1a);
}

.ks-vm-ac-chip--ok {
	background: var(--ks-ok-soft, #e9f5ec);
	color: var(--ks-ok, #1a7f37);
}

.ks-vm-ac-chip--info {
	background: #eaf1fb;
	color: #1c4f9c;
}

.ks-vm-ac-chip--warn {
	background: var(--ks-warn-soft, #fdf2e3);
	color: var(--ks-warn, #a15c00);
}

.ks-vm-ac-chip--danger {
	background: var(--ks-danger-soft, #fdeeec);
	color: var(--ks-danger, #c8321f);
}

/* Kargoda: "hazırlanıyor"un mavisiyle karışmasın diye teal. İkisi akışta
   ARDIŞIK iki durak, müşteri hangisinde olduğunu bir bakışta ayırmalı —
   kamyon ikonu farkı ayrıca söylüyor. */
.ks-vm-ac-chip--ship {
	background: #e4f2f0;
	color: #0f6f66;
}

/* İade: ne yeşil (başarı değil) ne kırmızı (hata değil) ne turuncu (marka
   rengi, "bekliyor" ona ait). Mor, paletteki hiçbir durumla çakışmayan tek
   renk — ve iade edilmiş sipariş artık gri kalabalığın içinde kaybolmuyor. */
.ks-vm-ac-chip--refund {
	background: #f1eefc;
	color: #5b3ea6;
}

/* Sipariş DETAY başlığındaki rozet: orada tek başına ve sayfanın öbür
   ucunda duruyor, listedeki 12px'lik ölçüsüyle kaybolurdu. İkon rengi
   metinden gelir (currentColor) — tonu değiştirdiğinde ikon da döner. */
.ks-vm-ac-chip--lg {
	gap: 6px;
	padding: 9px 16px;
	font-size: 14px;
}

.ks-vm-ac-chip--lg .ph {
	font-size: 17px;
	line-height: 1;
}

/* ═══════════════ Sipariş listesi ═══════════════ */

.ks-vm-ac-orders {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ks-vm-ac-order {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--ks-line, #e0e0e0);
	border-radius: 12px;
}

.ks-vm-ac-order--pending {
	border-color: var(--ks-warn, #a15c00);
	background: var(--ks-warn-soft, #fdf2e3);
}

.ks-vm-ac-order-main {
	flex: 1 1 auto;
	min-width: 0;
}

.ks-vm-ac-order-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ks-vm-ac-order-no {
	font-size: 15px;
	font-weight: 700;
}

.ks-vm-ac-order-meta {
	display: flex;
	align-items: center;
	gap: 6px 14px;
	flex-wrap: wrap;
	margin-top: 5px;
	font-size: 13px;
	color: var(--ks-muted, #6a6a6a);
}

.ks-vm-ac-order-total {
	font-weight: 700;
	color: var(--ks-ink, #1a1a1a);
}

.ks-vm-ac-order-total .amount {
	font-weight: 700;
}

.ks-vm-ac-order-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Ürün görselleri 3:4 — sitenin her yerindeki oran (ks-gallery-3-4).
   Satırın SOLUNDA duruyor: müşteri önce ürünü tanır, sonra numarayı okur. */
.ks-vm-ac-thumbs {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.ks-vm-ac-thumb {
	display: block;
	width: 42px;
	height: 56px;
	border: 1px solid var(--ks-line, #e0e0e0);
	border-radius: 6px;
	overflow: hidden;
	background: #fafafa;
}

.ks-vm-ac-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ks-vm-ac-thumb--more {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--ks-muted, #6a6a6a);
}

/* ── Sayfalama ── */
.ks-vm-ac-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}

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

/* ═══════════════ Sipariş listesi — araç şeridi ═══════════════ */

.ks-vm-ac-owrap {
	position: relative;
}

/* Tazelenirken liste solar ama YERİNDE kalır: yüksekliği korumak sayfanın
   altındaki her şeyin zıplamasını önlüyor. */
.ks-vm-ac-owrap.is-busy .ks-vm-ac-olist,
.ks-vm-ac-owrap.is-busy .ks-vm-ac-hist-wrap {
	opacity: 0.45;
	pointer-events: none;
}

/* İki açılır liste YAN YANA, solda: tek bir filtre şeridi gibi okunsunlar.
   (Çipler dururken tarih sağa yaslıydı; iki kutuyu ekranın iki ucuna dağıtmak
   aralarındaki ilişkiyi koparıyordu.) */
/* Filtreler SAĞA dayalı (operatör, 26 Ağu): listenin başlık şeridi solda
   okunuyor, filtreler onun karşısında dursun. Dar ekranda kural iptal —
   orada iki liste alt alta ve tam genişlik (aşağıdaki medya sorgusu). */
.ks-vm-ac-otools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

/* ── Açılır listeler (durum + tarih) ──────────────────────────────────
   İkisi de selectWoo ile çiziliyor, yani açılan pencere checkout'un
   ülke/şehir listeleriyle AYNI (ks-fields.css, hesap sayfası kapsamı orada).
   Burada yalnız KOMPAKT KUTU var: ks-fields'ın form dili alanı %100 genişlikte
   ve 16px kuruyor, oysa bunlar bir form alanı değil bir ARAÇ. */
.ks-vm-ac-osel {
	position: relative;
	flex: 0 0 auto;
	min-width: 190px;
}

/* Natif select (betik ölürse / geç yüklenirse) ile select2'nin çizdiği kutu
   AYNI ölçüde: şerit kurulum anında zıplamasın. */
/* 🚨 TAM YUVARLAK (operatör, 24 Ağu): çipler pill'di, onların yerini alan
   kutular da öyle olmalı. Pill'de yan dolgu artar — 14px köşede sıkışık
   duruyordu. */
/* 27 Eyl 2026: şeridin select'leri sitenin ORTAK dropdown'u (select.ks-dd, frontend.css —
   referans ürün formu varyasyon select'i). Aşağıdaki kompakt kutu kuralları yalnız ks-dd
   OLMAYAN select'e (eski/yedek yol) uygulanır; ks-dd'de şeridin Phosphor oku gizli. */
body .ks-vm-ac .ks-vm-ac-osel select:not(.ks-dd),
body .ks-vm-ac .ks-vm-ac-osel .select2-container--default .select2-selection--single {
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	height: auto;
	border-radius: 999px;
	cursor: pointer;
	/* 🚨 SAYFA ZIPLAMASININ SEBEBİ BUYDU (operatör, 26 Ağu: "liste ilk açılışta
	   aşağıda duruyor, 1-2 sn sonra düzeliyor"). select2 kendi CSS'inde
	   `.select2-selection--single`e `margin: 0 0 -4px` veriyor. Sunucu NATİF
	   select basıyor, selectWoo sonra devralıyor: devralma anında araç şeridi
	   4px kısalıyor ve altındaki sipariş listesi yukarı zıplıyor (ölçüldü:
	   layout-shift kaydında .ks-vm-ac-olist 276px → 272px). Marjı burada
	   sıfırlayınca iki hâlin yüksekliği eşitleniyor, zıplama kalmıyor.
	   Yalnız bu şeride yazıldı — checkout'un alanları kendi ölçüsünde kalsın. */
	margin: 0;
}

body .ks-vm-ac .ks-vm-ac-osel select:not(.ks-dd) {
	appearance: none;
	-webkit-appearance: none;
	padding: 9px 38px 9px 18px;
	font-size: 14px;
	font-weight: 600;
}

body .ks-vm-ac .ks-vm-ac-osel .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 9px 38px 9px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* select2 kendi okunu çiziyor; şeridin Phosphor oku TEK kalsın. */
body .ks-vm-ac .ks-vm-ac-osel .select2-container--default .select2-selection--single .select2-selection__arrow {
	display: none;
}

.ks-vm-ac-osel > select.ks-dd ~ i {
	display: none;
}

.ks-vm-ac-osel > i {
	position: absolute;
	top: 50%;
	right: 13px;
	transform: translateY(-50%);
	z-index: 1;
	font-size: 15px;
	line-height: 1;
	color: var(--ks-muted, #6a6a6a);
	pointer-events: none;
}

/* Açılan pencere `<body>`ye ekleniyor → şeridin içinden seçilemez. Taban
   görünüm ks-fields.css'ten geliyor; bu sınıf yalnız KOMPAKT TİPOGRAFİYİ
   verir — 16px'lik form paneli 14px'lik kutunun altında yamalı duruyordu. */
/* 🚨 `body` öneki ŞART: ks-fields.css'in panel kuralı
   `body.ks-vm-account-page .select2-dropdown` (0,2,1) ve puntoyu form alanının
   16px'ine sabitliyor. Öneksiz seçici (0,2,0) kaybediyordu — ölçüldü: panel
   16px kalıyor, 14px'lik kutunun altında yamalı duruyordu. Eşitlikte bu dosya
   sonra yüklendiği için kazanır. */
body .select2-dropdown.ks-vm-ac-dd,
body .select2-dropdown.ks-vm-ac-dd .select2-results__option {
	font-size: 14px;
	font-weight: 600;
}

body .select2-dropdown.ks-vm-ac-dd .select2-results__option {
	padding: 9px 18px;
}

/* 🚨 Seçenek vurgusu PRIMARY (operatör, 24 Ağu): ks-fields.css'in paylaşılan
   kuralı secondary veriyor ve o kural (0,4,1); buradaki zincir (0,6,1) olmak
   ZORUNDA, yoksa turuncu kalır. Panelin `.select2-container--default`
   içinde durduğunu kullanıyoruz. */
body .select2-container--default .select2-dropdown.ks-vm-ac-dd .select2-results__option--highlighted[aria-selected] {
	background: var(--e-global-color-primary, #000000);
	color: #fff;
}

/* ═══════════════ Sipariş kartı ═══════════════ */

.ks-vm-ac-olist {
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: opacity 0.15s ease;
}

.ks-vm-ac-ocard {
	border: 1px solid var(--ks-line, #e0e0e0);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

/* ── Üst şerit: siparişin KİMLİĞİ ── */
.ks-vm-ac-ocard-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	background: var(--ks-neutral-soft, #f7f7f7);
	border-bottom: 1px solid var(--ks-line, #e0e0e0);
}

.ks-vm-ac-ocol {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 0;
}

.ks-vm-ac-ocol-k {
	font-size: 12px;
	line-height: 1.4;
	color: var(--ks-muted, #6a6a6a);
}

.ks-vm-ac-ocol-v {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ks-ink, #1a1a1a);
	overflow-wrap: anywhere;
}

/* 🚨 Tutar METİN RENGİNDE (operatör, 24 Ağu): şeritteki dört sütun aynı
   ağırlıkta okunmalı, turuncu vurgu tutarı bir eyleme benzetiyordu. */
.ks-vm-ac-ocol--total .ks-vm-ac-ocol-v,
.ks-vm-ac-ocol--total .amount {
	color: var(--ks-ink, #1a1a1a);
}

/* İade edilen sipariş: AYNI tipografi, yalnız üstü çizili — WooCommerce'in
   ikinci rakamı (`<ins>0 ₺</ins>`) sunucuda basılmıyor (order_total). */
.ks-vm-ac-ocol--total .ks-vm-ac-ocol-v del,
.ks-vm-ac-ocol--total .ks-vm-ac-ocol-v del .amount {
	font-weight: 700;
	color: var(--ks-ink, #1a1a1a);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* ── Gövde: siparişin HÂLİ ── */
.ks-vm-ac-ocard-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
}

/* İkon iki satırlık metnin ORTASINDA hizalanır (operatör, 24 Ağu): tek satırlı
   ve iki satırlı durumlar yan yana geldiğinde üste hizalı ikon kartlar arası
   ritmi bozuyordu. */
.ks-vm-ac-ostate {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.ks-vm-ac-ostate > i {
	flex: 0 0 auto;
	font-size: 27px;
	line-height: 1;
	color: var(--ks-muted, #6a6a6a);
	/* 🚨 Kutuyu ŞİMDİDEN ayır: Phosphor bir ikon FONTU ve yüklenene kadar glif
	   genişliği 0 — yanındaki metin önce sola yapışıp font gelince sağa
	   kayıyordu (layout-shift kaydında ostate-txt'nin tek kaynağı buydu).
	   1em = font-size, yani ikonun gerçek kutusu. */
	width: 1em;
	text-align: center;
}

.ks-vm-ac-ostate--ok > i {
	color: var(--ks-ok, #1a7f37);
}

.ks-vm-ac-ostate--info > i {
	color: #1c4f9c;
}

.ks-vm-ac-ostate--warn > i {
	color: var(--ks-warn, #a15c00);
}

.ks-vm-ac-ostate--danger > i {
	color: var(--ks-danger, #c8321f);
}

/* Rozetin tonlarıyla AYNI renkler — iki yüzey aynı durumu anlatıyor. */
.ks-vm-ac-ostate--ship > i {
	color: #0f6f66;
}

.ks-vm-ac-ostate--refund > i {
	color: #5b3ea6;
}

.ks-vm-ac-ostate-t {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ks-ink, #1a1a1a);
}

.ks-vm-ac-ostate--ok .ks-vm-ac-ostate-t {
	color: var(--ks-ok, #1a7f37);
}

.ks-vm-ac-ostate--danger .ks-vm-ac-ostate-t {
	color: var(--ks-danger, #c8321f);
}

.ks-vm-ac-ostate-s {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ks-muted, #6a6a6a);
}

/* Kargo firmasının adı satırdan ayrışsın. Kalınlık tek başına gri zeminde
   yeterince öne çıkmıyor; metin rengi de bir tık koyulaşıyor. */
.ks-vm-ac-ostate-s strong {
	font-weight: 700;
	color: var(--ks-ink, #1a1a1a);
}

.ks-vm-ac-oacts {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Kutu ölçüsü `.ks-btn--xs`ten (32px pill, ürün kartındaki "Sepete Ekle" ile
   aynı boy). Bu alanda ikon taşıyan TEK buton "Tekrar Satın Al" — onun
   spinner'ı ikonun kendi kutusunda döner (ks-buttons.css), etiketi yerinde
   kalır, burada bir şey yapmaya gerek yok. */
.ks-vm-ac-oacts .ks-btn {
	gap: 6px;
}

.ks-vm-ac-oacts .ks-btn i {
	font-size: 1.1em;
}

/* 🚨 İKONSUZ butonlarda spinner'ın gidecek bir kutusu yok: paylaşılan kural
   halkayı etiketin SOLUNA inline ekliyor ve buton ~17px genişliyor — satır
   sağa yaslı olduğu için kartın bütün butonları zıplıyordu. Burada halka
   etiketin ÜSTÜNE ortalanır, etiket (`<span>`) gizlenir; kutu bir piksel
   oynamaz. `:has(> i)` ikonlu butonu bu kuralın dışında tutar. */
.ks-vm-ac-oacts .ks-btn.is-loading:not(:has(> i)) {
	position: relative;
}

.ks-vm-ac-oacts .ks-btn.is-loading:not(:has(> i)) > span {
	visibility: hidden;
}

.ks-vm-ac-oacts .ks-btn.is-loading:not(:has(> i))::before {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 14px;
	height: 14px;
}

/* 🚨 ÜRÜN SAYFASINDAKİ "Daha Fazla Yükle" BUTONUNUN AYNISI (operatör,
   24 Ağu 2026). Değerler Botiga Pro'nun yorum sayfalayıcısından ÖLÇÜLDÜ
   (`.botiga-pagination-button`, ürün sayfası → Değerlendirmeler):
   47px yükseklik · 1px siyah çerçeve · şeffaf zemin · 999px köşe ·
   0.9em/600 · 0.3px harf aralığı · 9px/24px dolgu · satırda ortalı.
   🚨 O buton bir `<a>`; bizimki AJAX çalıştırdığı için `<button>` ve Botiga'nın
   sınıflarını taşıyamıyor (denendi: tema `button` kuralları araya girip
   beyaz zemin/6px dolgu veriyor). O yüzden reçete burada kopyalanıyor —
   biri değişirse ötekini de güncelle. */
.ks-vm-ac-omore {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}

.ks-vm-ac-omore .ks-btn {
	min-height: 47px;
	padding: 9px 24px;
	border-width: 1px;
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: 600;
	letter-spacing: 0.3px;
}

/* ── Yükleme hâli — TİTREMEDEN ───────────────────────────────────────
 *
 * 🚨 İlk sürüm tıklandığı anda ZIPLIYORDU (operatör bildirdi, ölçüldü):
 *   1. Paylaşılan ikonsuz kural halkayı AKIŞA, etiketin soluna koyuyor →
 *      buton 168px'ten 197px'e büyüyor, satırda ortalı olduğu için sol kenar
 *      14px kayıyor ve etiket 15px sağa gidiyor.
 *   2. Fare butonun ÜSTÜNDEYKEN tıklanıyor (her zaman öyle); `is-loading`
 *      `pointer-events:none` verdiği an hover DÜŞÜYOR ve dolu siyah zemin
 *      0.2 sn boyunca şeffafa, beyaz yazı siyaha sönüyor.
 *
 * Çözüm ikisini de kaynağından keser: halka AKIŞTAN ÇIKAR (mutlak konum,
 * butonun ortasında) ve etiket gizlenir → kutu bir piksel oynamaz; renkler
 * hover görünümüne PİNLENİR → fare üstündeyken hiçbir geçiş olmaz.
 * Sonuç: dolu siyah zemin + ortada dönen beyaz halka. */
.ks-vm-ac-omore .ks-btn {
	position: relative;
}

.ks-vm-ac-omore .ks-btn.is-loading {
	background: var(--ks-btn-bg);
	border-color: var(--ks-btn-bg);
	color: var(--ks-btn-color);
	transition: none;
}

.ks-vm-ac-omore .ks-btn.is-loading > span {
	visibility: hidden;
}

.ks-vm-ac-omore .ks-btn.is-loading::before {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
}

/* 🚨 `hidden` niteliği bir SINIF KURALINA yenilir: tarayıcının `[hidden]`
   kuralı `display:none` diyor ama düşük öncelikli, `.ks-vm-ac-olist{display:flex}`
   onu eziyor. Sunucu boş listeyi/"daha fazla"yı gizli basıyor — bu kural
   olmadan tek siparişte bile "Daha fazla göster" görünüyordu (yaşandı). */
.ks-vm-ac-olist[hidden],
.ks-vm-ac-omore[hidden],
.ks-vm-ac-oempty[hidden],
.ks-vm-ac-revlist[hidden] {
	display: none;
}

/* ═══════════════ Değerlendir popup'ı ═══════════════ */

/* Popup gövdesi iki sütunlu bir grid (ks-fields.css form dili); ürün listesi
   bir alan değil, tam genişlik ister. */
.ks-vm-ac-revrows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	grid-column: 1 / -1;
}

.ks-vm-ac-revrow {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--ks-line, #e0e0e0);
	border-radius: 10px;
	color: var(--ks-ink, #1a1a1a);
	transition: border-color 0.15s ease;
}

.ks-vm-ac-revrow:hover,
.ks-vm-ac-revrow:focus-visible {
	border-color: var(--e-global-color-secondary, #da6900);
}

.ks-vm-ac-revrow-t {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.ks-vm-ac-revrow > i {
	flex: 0 0 auto;
	font-size: 16px;
	color: var(--ks-muted, #6a6a6a);
}

/* İKON YERİNDE DÖNEN SPINNER — ikonlu ama `.ks-btn` OLMAYAN gezinme
   bağlantıları için. Butonlarda spinner'ı ks-buttons.css çiziyor; burası
   "Değerlendir" popup satırı ve "Siparişlerime dön" bağlantısı gibi çıplak
   bağlantılar için. İkisi de bir sayfaya götürüyor, ikisi de aynı bekleme
   dilini konuşmalı. `@keyframes ks-btn-spin` ks-buttons.css'te (bu dosyanın
   bağımlılığı), keyframe'ler global. */
.ks-vm-ac-revrow.is-loading,
.ks-vm-ac-back.is-loading {
	pointer-events: none;
	cursor: progress;
}

.ks-vm-ac-revrow.is-loading > i,
.ks-vm-ac-back.is-loading > i {
	position: relative;
}

.ks-vm-ac-revrow.is-loading > i::before,
.ks-vm-ac-back.is-loading > i::before {
	visibility: hidden;
}

.ks-vm-ac-revrow.is-loading > i::after,
.ks-vm-ac-back.is-loading > i::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
	animation: ks-btn-spin 0.6s linear infinite;
}

/* ═══════════════ Sipariş detayı ═══════════════ */

.ks-vm-ac-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ks-ink, #1a1a1a);
	text-decoration: none;
}

.ks-vm-ac-back:hover {
	color: var(--e-global-color-secondary, #da6900);
}

/* Başlık SOLDA, durum rozeti TAM KARŞISINDA sağa dayalı (operatör, 26 Ağu).
   Rozeti sağa iten `margin-left:auto` DEĞİL `space-between`: başlık uzayıp
   satır sarınca rozet başlığın altına düşsün, ona yapışık kalmasın. */
.ks-vm-ac-detail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.ks-vm-ac-detail-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}

.ks-vm-ac-detail-pay {
	margin: 14px 0 4px;
}

/* Teşekkür sayfasının panelleri burada da geçerli; yalnız dikey ritim
   sayfaya göre ayarlanır. */
.ks-vm-ac-detail {
	display: flex;
	flex-direction: column;
	/* Ürünler / Adresler+Ödeme / Teslimat / Belgeler arası nefes payı
	   (operatör, 26 Ağu: "biraz daha açalım"). */
	gap: 40px;
	margin-top: 20px;
}

/* 🚨 Dikey boşluğun TEK sahibi yukarıdaki `gap`. ks-thankyou.css bölümlere
   `.ks-vm-ty-sec + .ks-vm-ty-sec { margin-top: 24px }` veriyor ve bu sarmalayıcı
   `ks-vm-ty` sınıfını da taşıdığı için o kural burada da geçiyordu; flex'te
   margin gap'e EKLENİR. Üstelik araya giren `.ks-vm-ac-detail-cols` bir
   `ks-vm-ty-sec` DEĞİL, yani `+` zinciri orada kopuyor ve boşluk bölümden
   bölüme değişiyordu (kimi yerde 40px, kimi yerde 16px). Marjı burada
   sıfırlayınca dördü de eşit aralıklanır. */
.ks-vm-ac-detail > *,
.ks-vm-ty.ks-vm-ac-detail > .ks-vm-ty-sec + .ks-vm-ty-sec {
	margin-top: 0;
	margin-bottom: 0;
}

/* 🚨 Adresler ve Ödeme Bilgileri YAN YANA — teşekkür sayfasındaki yerleşimin
   aynısı (operatör, 24 Ağu: "aynı deneyimi yaşatmalı"). Orada bu ikiliyi
   operatörün Elementor düzeni yan yana koyuyor; hesap sayfasında Elementor
   yok, aynı ikili burada grid'le kuruluyor. `align-items: start` panellerin
   boyları farklı olduğunda kısa olanı germesin diye — teşekkür sayfasında da
   üstten hizalılar. */
.ks-vm-ac-detail-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}

/* Kolonun içindeki iki panel KARDEŞ: ks-thankyou.css'in dikey ritmi (24px)
   ikinciyi aşağı itiyordu. Grid içinde boşluğu `gap` yönetir. */
.ks-vm-ac-detail-cols > .ks-vm-ty-sec + .ks-vm-ty-sec {
	margin-top: 0;
}

/* ═══════════════ Kargo takibi + Havale ödemesi ═══════════════ */

/* 🚨 İKİ PANEL, TEK YERLEŞİM: "Kargo Takibi" ve "Havale/EFT Ödemesi" aynı
   kutuyu paylaşıyor — solda kopyalanabilir bir değer, sağda tek eylem. Kurallar
   ortak yazıldı ki biri elden geçince öbürü geride kalmasın (operatör, 26 Ağu:
   "tıpkı Kargo takibi gibi"). Aynı siparişte ikisi birden ÇIKMAZ. */

/* Numara solda, buton sağda; dar ekranda alt alta ve buton tam genişlik.
   Panelin kenarlığı/başlığı ks-thankyou.css'ten (`ks-vm-ty-panel`) geliyor,
   burada YALNIZ kutunun içi tarif ediliyor.

   🚨 İÇ BOŞLUK BURADAN: paylaşılan `.ks-vm-ty-box` bilerek padding'siz (her
   panel kendi içini kuruyor, ürün tablosu kenara dayanabilsin diye). Boşluk
   verilmeyince buton kutunun köşesine yapışıyordu. */
.ks-vm-ac-track {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 18px;
}

/* Numara ve onu kopyalayan ikon YAN YANA: ikon neyi kopyaladığını yanında
   durarak söylüyor. */
.ks-vm-ac-track-txt {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

/* 🚨 Kopyala ikonunun BİÇİMİ BURADA DEĞİL: teşekkür sayfasındaki IBAN
   düğmesiyle aynı (`ks-vm-ty-copy`, ks-thankyou.css). Sarmalayıcı `ks-vm-ty`
   sınıfını taşıdığı için o kurallar burada da geçiyor — kopyasını yazmak iki
   ikonun zamanla ayrışması demekti. */

/* Takip numarası ELLE OKUNUP kopyalanan bir şey: harf aralığı açık ve
   rakamlar eşit genişlikte olsun ki 0/O, 1/l karışmasın. */
.ks-vm-ac-track-no {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.5px;
	font-variant-numeric: tabular-nums;
	word-break: break-all;
}


/* Kopyala + Takip düğmeleri: geniş ekranda yan yana, dar ekranda alt alta. */
.ks-vm-ac-track-acts,
.ks-vm-ac-pay-acts {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Havale paneli: banka kartı KENDİ kenarlığını taşıyor, dış kutu yok. Bölüm
   başlığı "Havale/EFT Ödemesi" dediği için kartın kendi "Banka Hesap
   Bilgileri" başlığı aynı şeyin tekrarı — burada gizleniyor (teşekkür
   sayfasında görünmeye devam ediyor, orada dış başlık yok). */
.ks-vm-ac-pay-sec .ks-vm-ty-bank-title {
	display: none;
}

/* Buton kartın ALTINDA, ona yapışmadan ve SAĞA dayalı — Kargo Takibi
   panelindeki takip butonuyla aynı hizada dursun. */
.ks-vm-ac-pay-acts {
	margin-top: 14px;
	justify-content: flex-end;
}

@media (max-width: 575px) {
	.ks-vm-ac-track {
		align-items: stretch;
	}

	/* 🚨 `width:100%` ŞART: `align-items:stretch` çocukları YALNIZ kabın kendi
	   genişliğine kadar geriyor, kap da içeriği kadardı — buton dar ekranda
	   tam genişliğe uzamıyordu (ölçüldü: 390px'te 151px kalıyordu). */
	.ks-vm-ac-track-acts,
	.ks-vm-ac-pay-acts {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.ks-vm-ac-track .ks-btn,
	.ks-vm-ac-pay-acts .ks-btn {
		width: 100%;
		justify-content: center;
	}

	/* Numara + ikon ikilisi dar ekranda da tek satır kalır; alt alta düşen
	   yalnız eylem şeridi. */
	.ks-vm-ac-track-txt {
		width: 100%;
	}
}

/* ═══════════════ Kayıtlı kartlar ═══════════════ */

.ks-vm-ac-wallet-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ks-vm-ac-wallet-list:empty {
	display: none;
}

.ks-vm-ac-cardrow {
	cursor: default;
}

.ks-vm-ac-brand {
	flex-shrink: 0;
	width: 40px;
	height: 26px;
	border: 1px solid var(--ks-line, #e0e0e0);
	border-radius: 5px;
	background: #fafafa center/22px auto no-repeat;
}

.ks-vm-ac-wallet-load {
	padding: 18px;
	text-align: center;
}

.ks-vm-ac-spin {
	display: inline-block;
	width: 22px;
	height: 22px;
	border: 2px solid var(--ks-line, #e0e0e0);
	border-top-color: var(--e-global-color-secondary, #da6900);
	border-radius: 50%;
	animation: ks-vm-ac-spin 0.7s linear infinite;
}

@keyframes ks-vm-ac-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ═══════════════ Ödeme geçmişi ═══════════════ */

/*
 * 🚨 Dar ekranda tablo SAYFAYI kaydırmaz, kendi kabında kayar.
 * 🚨 Çerçeve BURADA: bölüm panel kartına girmiyor (bkz. sc_payment_history),
 *    tek yapı sarmalayıcının kendisi. Botiga `table`/`th`/`td`ye 1px'lik tam
 *    ızgara çiziyor — dış çizgi ikiye katlanmasın, sütun çizgisi çıkmasın
 *    diye tablonun kendi kenarlıkları sıfırlanır, yalnız satır ayracı kalır.
 */
.ks-vm-ac-hist-wrap {
	overflow-x: auto;
	border: 1px solid var(--ks-line, #e0e0e0);
	border-radius: 14px;
	background: #fff;
}

/* Tablo tazelenirken solar ama YERİNDE kalır (sipariş listesinin kuralı). */
.ks-vm-ac-hist-wrap {
	transition: opacity 0.15s ease;
}

.ks-vm-ac-hist {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.ks-vm-ac-hist th,
.ks-vm-ac-hist td {
	padding: 11px 12px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--ks-line, #e0e0e0);
	white-space: nowrap;
}

.ks-vm-ac-hist th {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ks-muted, #6a6a6a);
}

.ks-vm-ac-hist tbody tr:last-child td {
	border-bottom: 0;
}

.ks-vm-ac-hist-total {
	font-weight: 700;
	text-align: right;
}

.ks-vm-ac-hist-no a {
	font-weight: 600;
	color: var(--e-global-color-secondary, #da6900);
	text-decoration: none;
}

/* ═══════════════ Havale hesapları ═══════════════ */

.ks-vm-ac-banks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ks-vm-ac-bank {
	padding: 14px 16px;
	border: 1px solid var(--ks-line, #e0e0e0);
	border-radius: 10px;
}

.ks-vm-ac-bank-top {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.ks-vm-ac-bank-name {
	font-size: 14px;
	font-weight: 700;
}

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

.ks-vm-ac-bank-iban {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ks-vm-ac-bank-iban .ks-vm-ty-bank-val {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ═══════════════ Formlar ═══════════════ */

/* Alan görünümü ks-fields.css'ten; burada yalnız formun altı. */
.ks-vm-ac-form-foot {
	margin-top: 20px;
}

.ks-vm-ac-prefs .ks-vm-co-toggle + .ks-vm-co-toggle {
	margin-top: 10px;
}

.ks-vm-ac-danger-text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ks-muted, #6a6a6a);
}

/* ═══════════════ Adres defteri (yönetim kipi) ═══════════════ */

/* Satır kutusu ks-options.css'ten. Yönetim kipinde satır TIKLANABİLİR DEĞİL:
   seçim yok, eylemler sağdaki kalem/çöp düğmelerinde. */
.ks-vm-ab-row--manage {
	cursor: default;
}

.ks-vm-ab--manage .ks-vm-ab-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ks-vm-ab--manage .ks-vm-ab-list:empty {
	display: none;
}

.ks-vm-ab--manage .ks-vm-ab-add {
	margin-top: 10px;
}

/* ═══════════════ Mobil ═══════════════ */

@media (max-width: 767px) {
	.ks-vm-ac-panel-head,
	.ks-vm-ac-panel-body {
		padding-left: 14px;
		padding-right: 14px;
	}

	.ks-vm-ac-order {
		flex-direction: column;
		align-items: stretch;
	}

	.ks-vm-ac-order-actions {
		justify-content: stretch;
	}

	.ks-vm-ac-order-actions .ks-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	/* Sipariş kartı: üst şerit İKİ SATIRA kırılır (üstte tarih + numara, altta
	   adet + tutar), Detaylar tam genişlikte alta iner. Etiketler düşüyor —
	   dar ekranda değerlerin kendisi zaten okunuyor ("#12345", "2 ürün"). */
	.ks-vm-ac-ocard-head {
		flex-wrap: wrap;
		gap: 10px 12px;
		padding: 14px;
	}

	.ks-vm-ac-ocol {
		flex: 1 1 40%;
	}

	.ks-vm-ac-ocol-k {
		display: none;
	}

	.ks-vm-ac-ocard-body {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 14px;
	}

	/* 🚨 Dar ekranda butonlar EŞİT paylaşır (operatör, 24 Ağu): `flex: 1 1 auto`
	   boşluğu içeriğe ORANTILI dağıtıyor, yani "Tekrar Satın Al" ile "Detaylar"
	   farklı genişlikte çıkıyordu. Taban %50 verilince ikisi tam yarı yarıya
	   oturur; üçüncü buton (Değerlendir'li tamamlanmış sipariş) satıra sığmaz
	   ve kendi satırına inip tam genişliğe uzar — 2+1. Tek buton kalırsa
	   büyüyüp satırı doldurur. */
	.ks-vm-ac-oacts {
		justify-content: flex-start;
	}

	.ks-vm-ac-oacts .ks-btn {
		flex: 1 1 calc(50% - 4px);
		min-width: 0;
		justify-content: center;
	}

	/* Dar ekranda iki liste alt alta, tam genişlik. */
	.ks-vm-ac-otools {
		align-items: stretch;
		gap: 10px;
	}

	.ks-vm-ac-osel {
		flex: 1 1 100%;
		min-width: 0;
	}

	/* Dar ekranda yan yana panel olmaz. */
	.ks-vm-ac-detail-cols {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.ks-vm-ac-hello {
		font-size: 22px;
	}
}

/* ═══════════════ Tema düzeltmeleri ═══════════════ */

/* 🚨 Botiga `.entry-content a`ya alt çizgi basıyor ve sayfa `default` şablonda
   olduğu için butonlarımız da onun kapsamında kalıyor (teşekkür sayfasında
   yaşanan aynı ders). Buton bir bağlantı olabilir ama alt çizgili METİN
   değildir. */
.ks-vm-ac a.ks-btn,
.ks-vm-ac a.ks-btn:hover,
.ks-vm-ac a.ks-btn:focus,
.ks-vm-ac .ks-vm-ac-back,
.ks-vm-ac .ks-vm-ac-back:hover,
.ks-vm-ac .ks-vm-ac-hist-no a,
.ks-vm-ac .ks-vm-ac-hist-no a:hover,
.ks-vm-ac-revrow,
.ks-vm-ac-revrow:hover {
	text-decoration: none;
	box-shadow: none;
}

/* ═══════════════ İzin kutuları ═══════════════ */

/* Onay kutusunun görünümü BURADA DEĞİL: etiket WooCommerce'in
   `woocommerce-form__label-for-checkbox` sınıfını taşıyor, kutuyu tema
   checkout'takiyle aynı şekilde çiziyor, boşluk ks-fields.css'ten geliyor. */
.ks-vm-ac-optin-text {
	font-weight: 500;
}