/* =====================================================================
   Studio Buga — sepet, ödeme ve Hesabım (hesap.css) — Görev 10, spec §4.3
   sb_stil_haritasi() (inc/assets.php) yalnız bu üç sayfada ve uç
   noktalarında yükler. Başlık bandı, kırıntı yolu ve WC iletileri layout.css'te.
   Dizilim Blocksy'nin: sepet .ct-woocommerce-cart-form ızgarası (≥ 1000 px
   2fr + 1fr), ödeme .ct-woocommerce-checkout ızgarası (≥ 1000 px iki sütun)
   (blocksy/static/sass/frontend/8-integrations/woocommerce/cart-page/
   cart-form.scss:3-16, checkout-page/checkout-form.scss:3-21). Burada renk,
   ölçü ve dokunma hedefi.
   Gri kutularda gövde metni metin-ikincil: #6A6A6A #F9F9F9 üstünde 5,14:1;
   Blocksy'nin metin-govde'si (#747474) orada 4,44:1 (spec §4.1 "metin-govde
   yalnız beyaz zeminde").
   ===================================================================== */

/* ---------- Başlık bandı: altındaki boşluğu Blocksy'nin içerik alanı verir ---------- */
.sb-bant {
  margin-bottom: 0;
}

/* ---------- Sepet tablosu (Mober sepet-with-item-desktop-fold.png) ---------- */
.woocommerce-cart-form .shop_table thead th {
  color: var(--wp--preset--color--metin);
  font-size: var(--wp--preset--font-size--kucuk);
  font-weight: 500;
  letter-spacing: var(--sb-harf-sekme);
  text-transform: uppercase;
}

.woocommerce-cart-form .product-name > a {
  color: var(--wp--preset--color--metin);
  text-decoration: none;
}

.woocommerce-cart-form .product-name .variation {
  color: var(--wp--preset--color--metin-ikincil);
  font-size: var(--wp--preset--font-size--kucuk);
}

/* Ürünü çıkar: Blocksy yalnız 12 px'lik ikonu çiziyor (cart-page/cart-table.scss:58-86);
   dokunma alanı 44×44 (spec §4.1). Masaüstü sütunu ve dar ekrandaki satır içi kopya. */
.woocommerce-cart-form a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--sb-dokunma);
  min-block-size: var(--sb-dokunma);
}

/* ---------- Sepet toplamları (Mober: gri kutu) ----------
   Blocksy kenarlığı ve iç boşluğu satır içi stilde .ct-woocommerce-cart-form
   .cart_totals (0,2,0) üzerinden değişkenle veriyor (inc/dynamic-styles/global/
   woocommerce/general.php:441-493); gövde sınıfıyla (0,3,0) ezilir. */
.woocommerce-cart .ct-woocommerce-cart-form .cart_totals {
  --cart-totals-border: none;
  --cart-totals-padding: 30px;
  background-color: var(--wp--preset--color--yuzey);
  color: var(--wp--preset--color--metin-ikincil);
}

.woocommerce-cart .cart_totals :is(h2, th, .order-total td, .ct-shipping-heading) {
  color: var(--wp--preset--color--metin);
}

.woocommerce-cart .cart_totals h2 {
  font-size: var(--wp--preset--font-size--baslik-4);
  font-weight: 400;
}

/* "Gönderim bedeli hesapla" / "Adresi değiştirin" bağımsız bağlantı: 44 px. Gri kutuda metin-govde
   4,43:1 kalıyordu (axe; spec §4.1 "gri yüzeyde gövde metni en az #6A6A6A"), Görev 12. */
.woocommerce-cart .cart_totals .shipping-calculator-button {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--sb-dokunma);
  color: var(--wp--preset--color--metin-ikincil);
}

/* Gönderim hesaplama formunun metin alanları gri kutuda saydam zeminliydi: alan metni 4,43:1
   (#747474 / #F9F9F9; Görev 12 açılır panel taraması, selectWoo kalkınca ölçüldü). Beyaz zemin
   4,6:1 verir, alanı kutudan da ayırır. */
.woocommerce-cart .cart_totals .shipping-calculator-form input.input-text {
  background-color: var(--wp--preset--color--zemin);
}

/* ---------- Ödeme sayfasına git ve Siparişi onayla: koyu dolgu ----------
   Beyaz / #333 12,63:1, hover beyaz / #4E4E4E 8,3:1; mini sepetin ödeme düğmesiyle
   aynı (layout.css .sb-mini__govde … .checkout). Blocksy düğme renklerini
   --theme-button-* değişkenlerinden okur (base.css "Düğmeler"). */
.wc-proceed-to-checkout .checkout-button,
.woocommerce-checkout #place_order {
  --theme-button-background-initial-color: var(--wp--preset--color--metin);
  --theme-button-text-initial-color: var(--wp--preset--color--zemin);
  --theme-button-background-hover-color: var(--wp--preset--color--koyu-dolgu);
  --theme-button-text-hover-color: var(--wp--preset--color--zemin);
  width: 100%;
  letter-spacing: var(--sb-harf-sekme);
  text-transform: uppercase;
}

/* ---------- Ödeme ----------
   Sipariş özeti Blocksy'nin .ct-order-review kutusunda (inc/components/woocommerce/
   common/checkout.php:108-126); kenarlık ve iç boşluk değişkenleri general.php:
   502-560 (0,1,0). Plan 2'nin ödeme öncesi özeti woocommerce_checkout_before_order_review
   ile bu kutunun içine gelir. */
.woocommerce-checkout .ct-order-review {
  --order-review-border: none;
  --order-review-padding: 30px;
  background-color: var(--wp--preset--color--yuzey);
  color: var(--wp--preset--color--metin-ikincil);
}

.woocommerce-checkout .ct-order-review :is(th, .order-total td) {
  color: var(--wp--preset--color--metin);
}

.woocommerce-checkout :is(#customer_details h3, #order_review_heading) {
  margin-top: 0;
  color: var(--wp--preset--color--metin);
  font-size: var(--wp--preset--font-size--baslik-4);
  font-weight: 400;
}

/* Onay kutularındaki sözleşme bağlantıları cümle içinde: renk tek başına ayırt etmiyor, altı
   çizili (axe link-in-text-block; Plan 2 Görev 1 onayları, studiobuga-magaza/sozlesmeler.php). */
.woocommerce-checkout .sb-onay a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Hesabım: Giriş Yap / Üye Ol kartı (woocommerce/myaccount/form-login.php) ----------
   Mober: ortalı ~500 px kart, iki büyük sekme başlığı (hesabim-desktop-fold.png).
   Seçili olmayan sekme metin-ikincil (5,36:1); Mober'in açık grisi kopyalanmaz. */
.sb-giris {
  max-inline-size: 500px;
  margin-inline: auto;
}

.sb-giris__liste {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 30px;
}

.sb-giris__sekme {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--sb-dokunma);
  min-inline-size: var(--sb-dokunma);
  border-bottom: 2px solid transparent;
  color: var(--wp--preset--color--metin-ikincil);
  font-size: var(--wp--preset--font-size--baslik-3);
  font-weight: 400;
  line-height: var(--sb-satir-baslik);
  text-decoration: none;
}

/* Seçili: aksan-koyu alt çizgi (4,96:1 ≥ 3:1); üzerine gelme açık kum (Görev 12, anasayfa.css ile aynı). */
.sb-giris__sekme:hover {
  border-bottom-color: var(--wp--preset--color--aksan);
  color: var(--wp--preset--color--metin);
}

.sb-giris__sekme[aria-selected="true"] {
  border-bottom-color: var(--wp--preset--color--aksan-koyu);
  color: var(--wp--preset--color--metin);
}

.sb-giris__panel[hidden] {
  display: none;
}

/* JS'siz: iki form alt alta, her biri kendi başlığıyla. */
.sb-giris__panel + .sb-giris__panel {
  margin-top: 60px;
}

.sb-giris__panel-baslik {
  margin: 0 0 20px;
  color: var(--wp--preset--color--metin);
  font-size: var(--wp--preset--font-size--baslik-4);
  font-weight: 400;
}

/* Sekme düzeninde (sekmeler.js kaba .sb-sekmeler--etkin koyar) başlığı sekme taşır;
   panel başlığı yalnız ekran okuyucuda (anasayfa.css .sb-sekmeler__panel-baslik deseni). */
.sb-sekmeler--etkin .sb-giris__panel + .sb-giris__panel {
  margin-top: 0;
}

.sb-sekmeler--etkin .sb-giris__panel-baslik {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Şifrenizi mi unuttunuz?" ve "Beni hatırla": bağımsız öğeler, 44 px (spec §4.1).
   Blocksy bağlantıyı 14 px satır içi, kutunun etiketini tek satır basıyor (17 ve 25 px).
   Etiket blok düzeyinde kalır: giriş düğmesi alt satırda (aynı <p>'de). */
.sb-giris .lost_password a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--sb-dokunma);
}

.sb-giris .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-block-size: var(--sb-dokunma);
}

.sb-giris .woocommerce-form-login__rememberme input {
  margin: 0;
}

/* Şifreyi göster: Blocksy 14×14 çiziyor (static/sass/frontend/4-components/
   show-password.scss:1-21, seçici özgüllüğü 0,3,1); dokunma alanı 44×44, ikon aynı
   boyutta ortada. */
.sb-giris form:is(.login, .register) [class*="password-input"] input {
  padding-inline-end: var(--sb-dokunma);
}

.sb-giris form:is(.login, .register) [class*="password-input"] .show-password-input {
  inset-inline-end: 0;
  top: calc(var(--theme-form-field-height, 40px) / 2 - var(--sb-dokunma) / 2);
  width: var(--sb-dokunma);
  height: var(--sb-dokunma);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 14px;
  mask-size: 14px;
}

/* ---------- Hesabım paneli (giriş yapılmış) ----------
   Blocksy seçili ve üzerine gelinen öğeyi kum zemin + beyaz metinle çiziyor (1,96:1;
   account/account-page.scss:34-40, renk değişkenleri varsayılanda basılmıyor:
   general.php:371-438); kum üstünde koyu metin 6,45:1. Köşe ve gölge yok (spec §4.1;
   account-page.scss:9-24). */
.woocommerce-account .ct-acount-nav {
  --account-nav-text-active-color: var(--wp--preset--color--aksan-uzeri);
  --account-nav-background-active-color: var(--wp--preset--color--aksan);
  border: 1px solid var(--wp--preset--color--kenarlik);
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Boş sepet (spec §4.2; Mober sepet-empty-desktop.png: ileti + ortalı çerçeveli düğme) ----------
   İleti ve düğme WC'nin cart/cart-empty.php'si; mini sepet de aynı şablonu kullanır
   (Görev 6), burada yalnız sepet sayfasındaki görünüm. İleti rengi layout.css (WC iletileri). */
.woocommerce-cart .wc-empty-cart-message {
  max-inline-size: 640px;
  margin-inline: auto;
}

/* İleti (zil simgesi + metin) ortada, "Mağazaya geri dön" düğmesinin üstünde (owner isteği 2026-10-01). */
.woocommerce-cart .wc-empty-cart-message .cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 20px;
  text-align: center;
}

/* Blocksy zil simgesini ::before ile solda mutlak konumluyor (sol 20 px, metne 55 px iç boşluk):
   akışa alınır, metnin üstünde ortada durur. */
.woocommerce-cart .wc-empty-cart-message .cart-empty::before {
  position: static;
  flex: none;
}

.woocommerce-cart .return-to-shop {
  text-align: center;
}

.woocommerce-cart .return-to-shop .button {
  --theme-button-background-initial-color: transparent;
  --theme-button-text-initial-color: var(--wp--preset--color--metin);
  --theme-button-background-hover-color: var(--wp--preset--color--aksan);
  --theme-button-text-hover-color: var(--wp--preset--color--aksan-uzeri);
  border: 1px solid var(--wp--preset--color--aksan);
  letter-spacing: var(--sb-harf-sekme);
  text-transform: uppercase;
}

/* Blocksy ödeme özeti kolonunu sticky yapıyor; kolon (özet + ödeme + onaylar + düğme) ekrandan uzun olduğu için
   "Siparişi onayla ve öde" düğmesi sayfa sonuna kadar ekranın dışında asılı kalıyordu (900 px'de ölçüldü).
   Ödemede yapışma kapalı: kolon sayfayla birlikte kayar, düğme ulaşılabilir. */
.woocommerce-checkout .ct-order-review {
  position: static;
}

/* Ödemedeki onay kutusu etiketleri ("Hesap oluştur", "Farklı adrese gönderilsin mi?") ≥ 44 px
   (spec §4.1; Görev 12 ölçümü 27 ve 19 px). Hesabım'daki "Beni hatırla" deseni. */
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-block-size: var(--sb-dokunma);
}

/* Hesabım menüsü: Blocksy .ct-acount-nav'a overflow: hidden veriyor (account-page.scss:11), dışa
   taşan odak halkası kırpılıyordu (Görev 12 odak taraması, 6/6 bağlantı). Halka içeri çizilir. */
.woocommerce-account .ct-acount-nav a:focus-visible {
  outline-offset: -2px;
}

/* Sepet satırındaki ürün adı bağımsız bağlantı ≥ 44 px (spec §4.1; Görev 12 ölçümü 19 px). Küçük
   görselin bağlantısı yardımcı teknolojiden gizli (inc/woocommerce.php); adın bağlantısı asıl hedef. */
.woocommerce-cart td.product-name > a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--sb-dokunma);
}

/* Fatura türü seçenekleri (Bireysel/Kurumsal, Plan 2 Görev 9) ≥ 44 px dokunma alanı (spec §4.1;
   kalite taraması 27 px ölçtü). Onay kutusu etiketleriyle aynı desen. */
.woocommerce-checkout .sb-fatura-turu .woocommerce-input-wrapper,
.woocommerce-account .sb-fatura-turu .woocommerce-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

.sb-fatura-turu input.input-radio + label.radio {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--sb-dokunma);
}

/* Ödeme sayfasının yasal akışı (Plan 2 Görev 10, spec §6.1): özet, onaylar ve
   doldurulmuş belgeler en az 16 px (md.6/1 "en az 12 punto" + okunabilirlik). */
.sb-ozet,
.sb-onay label,
.sb-sozlesme-metni,
.sb-kvkk-notu,
.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: max(1rem, 16px);
  line-height: 1.6;
}

.sb-ozet {
  margin: 0 0 20px;
}

.sb-ozet dl {
  display: grid;
  grid-template-columns: minmax(8em, max-content) 1fr;
  gap: 6px 16px;
  margin: 0;
}

.sb-ozet dt {
  font-weight: 600;
}

.sb-ozet dd {
  margin: 0;
}

.sb-sozlesme-belgesi {
  margin: 0 0 12px;
  border: 1px solid var(--wp--preset--color--kenarlik);
}

.sb-sozlesme-belgesi summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-block-size: var(--sb-dokunma);
  padding: 0 12px;
  list-style: none;
  cursor: pointer;
}

/* Açık/kapalı göstergesi (Plan 2 Görev 16): flex, tarayıcının üçgenini kaldırıyordu; SSS akordiyonuyla
   aynı +/− işareti (sayfa.css). Ölçüm: tools/tarayici/sekme-durum.mjs. */
.sb-sozlesme-belgesi summary::-webkit-details-marker {
  display: none;
}

.sb-sozlesme-belgesi summary::after {
  content: "+";
  content: "+" / "";
  flex: none;
  font-size: 20px;
  line-height: 1;
}

.sb-sozlesme-belgesi[open] summary::after {
  content: "−";
  content: "−" / "";
}

.sb-sozlesme-metni {
  padding: 0 12px 12px;
  max-block-size: 320px;
  overflow: auto;
}

@media (max-width: 480px) {
  .sb-ozet dl {
    grid-template-columns: 1fr;
  }
}

/* Özet ve bilgi bloklarındaki bağlantılar metinden yalnız renkle ayrılmasın (WCAG 1.4.1; axe
   link-in-text-block, Görev 10 tam test). */
.sb-ozet a,
.sb-kvkk-notu a,
.sb-sozlesme-metni a {
  text-decoration: underline;
}

/* Ödeme güncellemesi sürerken WC'nin perdesi (blockUI) tıkları yutmaz (Plan 2 Görev 16): il, kargo ya
   da ad değişip hemen onay kutusuna ya da "Siparişi onayla"ya basan müşterinin tıkı kayboluyordu
   (tools/tarayici/tik-kaybi.mjs, güncelleme sürerken). */
.woocommerce-checkout-payment .blockUI.blockOverlay {
	pointer-events: none;
}

/* Güncelleme sürerken basılan "Siparişi onayla"nın durum satırı (assets/js/odeme-durumu.js). Boşken yer
   kaplamaz; display:none değil, bazı ekran okuyucular gizli bölgedeki değişikliği duyurmuyor. */
.sb-odeme-durumu {
	margin: 0.75em 0 0;
	font-weight: 600;
}

.sb-odeme-durumu:empty {
	margin: 0;
}