/* ==========================================================================
   CHECKOUT SAYFASI — SEPET SAYFASI İLE AYNI İKİ KOLONLU LAYOUT
   ========================================================================== */

.checkout-page-layout {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  align-items: start !important;
  gap: 48px !important;
}

.checkout-page-main {
  min-width: 0 !important;
}

.checkout-page-sidebar {
  position: sticky !important;
  top: 16px !important;
}

@media (max-width: 900px) {
  .checkout-page-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .checkout-page-sidebar {
    position: static !important;
  }
}

.checkout-page-main #customer_details,
.checkout-page-main .col2-set,
.checkout-page-main #order_review_heading,
.checkout-page-main #order_review {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
  clear: both !important;
}

body:not(.woocommerce-order-pay)
  #order_review
  .woocommerce-checkout-review-order-table {
  display: none !important;
}

/* Native "Sipariş Ver" butonu SADECE asıl checkout'ta gizlenir; orada aksiyon
   sağ sidebar'daki #checkout-sidebar-place-order butonuna taşınıyor.
   order-pay (form-pay.php) da <form id="order_review"> kullandığı için, kapsam
   sınırlanmazsa "Ödeme Yap" butonu orada da gizlenip kullanıcı kilitleniyordu. */
body:not(.woocommerce-order-pay) #order_review #place_order,
#order_review .form-row.place-order noscript {
  display: none !important;
}

/* ==========================================================================
   SIDEBAR — "ÜRÜNLER" AKORDİYONU (Sepet "Kupon ekle" akordiyonuyla aynı UX)
   ========================================================================== */
.checkout-sidebar-products-accordion {
  border-bottom: 1px solid #e2dacd !important;
  margin-bottom: 12px !important;
}

.checkout-sidebar-products-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 16px 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1c1c1c !important;
}

.checkout-sidebar-products-toggle .chevron-icon {
  transition: transform 0.2s ease !important;
}

.checkout-sidebar-products-accordion.is-open
  .checkout-sidebar-products-toggle
  .chevron-icon {
  transform: rotate(180deg) !important;
}

.checkout-sidebar-products-panel {
  display: none !important;
  padding: 0 4px 8px 0 !important;
  max-height: 290px !important;
  overflow-y: auto !important;
}

.checkout-sidebar-products-accordion.is-open .checkout-sidebar-products-panel {
  display: block !important;
}

.checkout-items-list .cart-item-row {
  padding: 16px 0 !important;
}

.checkout-items-list li:last-child .cart-item-row {
  border-bottom: none !important;
}

.checkout-items-list .cart-item-image {
  position: relative !important;
}

.checkout-item-qty {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border-radius: 20px !important;
  background-color: #1c1c1c !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   SIDEBAR — TOPLAMLAR ÖZETİ + "SİPARİŞ VER" BUTONU
   ========================================================================== */
.checkout-sidebar-totals {
  width: 100% !important;
}

.checkout-sidebar-actions {
  padding: 20px 0 0 0 !important;
}

.checkout-sidebar-place-order-btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background-color: #1c1c1c !important;
  color: #ffffff !important;
  border: none !important;
  padding: 16px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.checkout-sidebar-place-order-btn:hover {
  background-color: #333333 !important;
}

.checkout-sidebar-place-order-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* ==========================================================================
   ÖDEME YÖNTEMLERİ — TUTARLI AKORDİYON (tüm yöntemler aynı görünür)
   trigger satırı = <label>, konteynır = .payment_box
   ========================================================================== */
.checkout-page-main #payment ul.payment_methods {
  list-style: none !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  border: 1px solid #e2dacd !important;
  border-radius: 8px !important;
  background: #fbf9f5 !important;
  overflow: hidden !important;
}

/* li = flex satırı: radio + label yan yana, .payment_box alta sarar */
.checkout-page-main #payment ul.payment_methods > li {
  list-style: none !important;
  list-style-type: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
}

/* Storefront/WooCommerce'in çizdiği "hayalet" radyo işaretlerini (::before /
   ::marker / label::before) kaldır — tek radyo = gerçek input. */
.checkout-page-main #payment ul.payment_methods > li::before,
.checkout-page-main #payment ul.payment_methods > li::marker,
.checkout-page-main #payment ul.payment_methods > li > label::before,
.checkout-page-main #payment ul.payment_methods > li > label::after {
  display: none !important;
  content: none !important;
}

.checkout-page-main #payment ul.payment_methods > li + li {
  border-top: 1px solid #e2dacd !important;
}

/* --- Tetikleyici (label) --- */
.checkout-page-main #payment ul.payment_methods > li > label {
  order: 2 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #1c1c1c !important;
}

.checkout-page-main #payment ul.payment_methods > li > label img {
  margin: 0 0 0 auto !important;
  max-height: 22px !important;
  width: auto !important;
  display: inline-block !important;
  float: none !important;
}

/* --- Radyo (tema stiliyle, temiz seçili/seçili-değil) ---
   NOT: WooCommerce/Storefront bu input'u clip-path: inset(50%) ile görünmez
   yapıyordu; clip'i açıp kendi görünümümüzü çiziyoruz. */
.checkout-page-main #payment ul.payment_methods > li > input[type="radio"] {
  order: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d4d4d8 !important;
  border-radius: 50% !important;
  background: #fbf9f5 !important;
  box-shadow: none !important;
  position: relative !important;
  opacity: 1 !important;
  clip: auto !important;
  clip-path: none !important;
  pointer-events: auto !important;
  transition: border-color 0.15s ease !important;
}

.checkout-page-main #payment ul.payment_methods > li > input[type="radio"]:checked {
  border-color: #1c1c1c !important;
  background: #fbf9f5 !important;
}

.checkout-page-main #payment ul.payment_methods > li > input[type="radio"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  right: 3px !important;
  bottom: 3px !important;
  border-radius: 50% !important;
  background: #1c1c1c !important;
}

.checkout-page-main #payment ul.payment_methods > li > input[type="radio"]:focus {
  box-shadow: 0 0 0 3px rgba(28, 28, 28, 0.12) !important;
}

/* --- Konteynır (.payment_box) — tüm yöntemlerde aynı; label'ın altına sarar --- */
.checkout-page-main #payment ul.payment_methods > li > .payment_box {
  order: 3 !important;
  flex: 1 0 100% !important;
  margin: 0 !important;
  padding: 14px 0 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #52525b !important;
}

.checkout-page-main #payment ul.payment_methods .payment_box::before {
  display: none !important;
}

.checkout-page-main #payment ul.payment_methods .payment_box > p {
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.checkout-page-main #payment ul.payment_methods .payment_box > p:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   SİPARİŞ ÖDEMESİ (order-pay) SAYFASI — Design System entegrasyonu
   --------------------------------------------------------------------------
   İki akış aynı endpoint'i kullanır:
     • checkout sonrası yönlendirme  -> order-receipt.php  (iyzico iframe burada)
     • Hesabım > "Ödeme Yap"         -> form-pay.php        (yöntem + "Öde" butonu)
   ========================================================================== */

/* Dar, ortalanmış ödeme kolonu */
.woocommerce-order-pay .entry-content > .woocommerce {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.woocommerce-order-pay .woocommerce > p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #52525b !important;
}

/* --- Sipariş özeti tablosu (form-pay.php .shop_table) --------------------- */
.woocommerce-order-pay #order_review .shop_table {
  width: 100% !important;
  border: 1px solid #e2dacd !important;
  border-radius: 8px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  margin: 0 0 24px 0 !important;
}

.woocommerce-order-pay #order_review .shop_table thead th {
  background: #f4eee5 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  padding: 14px 16px !important;
  text-align: left !important;
  border: none !important;
}

.woocommerce-order-pay #order_review .shop_table tbody td,
.woocommerce-order-pay #order_review .shop_table tfoot th,
.woocommerce-order-pay #order_review .shop_table tfoot td {
  padding: 14px 16px !important;
  border: none !important;
  border-top: 1px solid #e2dacd !important;
  font-size: 14px !important;
  color: #1c1c1c !important;
  vertical-align: top !important;
}

.woocommerce-order-pay #order_review .shop_table .product-total,
.woocommerce-order-pay #order_review .shop_table .product-subtotal {
  text-align: right !important;
  white-space: nowrap !important;
}

.woocommerce-order-pay #order_review .shop_table tfoot tr:last-child th,
.woocommerce-order-pay #order_review .shop_table tfoot tr:last-child td {
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* --- Ödeme yöntemleri --------------------------------------------------- */
.woocommerce-order-pay #payment,
.woocommerce-order-pay #payment .form-row {
  background: transparent !important;
  padding: 0 !important;
}

.woocommerce-order-pay #payment ul.payment_methods {
  border: 1px solid #e2dacd !important;
  border-radius: 8px !important;
  background: transparent !important;
  padding: 4px !important;
  margin: 0 0 20px 0 !important;
  list-style: none !important;
}

.woocommerce-order-pay #payment ul.payment_methods li {
  list-style: none !important;
  padding: 14px !important;
  margin: 0 !important;
}

.woocommerce-order-pay #payment ul.payment_methods > li + li {
  border-top: 1px solid #e2dacd !important;
}

.woocommerce-order-pay #payment ul.payment_methods label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1c1c1c !important;
}

.woocommerce-order-pay #payment ul.payment_methods li img {
  float: none !important;
  margin: 0 0 0 8px !important;
  max-height: 24px !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.woocommerce-order-pay #payment .payment_box {
  background: #ffffff !important;
  border: 1px solid #e2dacd !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  margin: 12px 0 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #52525b !important;
}

.woocommerce-order-pay #payment .payment_box::before {
  display: none !important;
}

/* --- "Öde" butonu (form-pay.php #place_order) -------------------------- */
.woocommerce-order-pay #order_review #place_order {
  display: block !important;
  width: 100% !important;
  margin: 8px 0 0 0 !important;
  padding: 16px 20px !important;
  background-color: #1c1c1c !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.woocommerce-order-pay #order_review #place_order:hover {
  background-color: #333333 !important;
}

.woocommerce-order-pay #order_review #place_order:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.woocommerce-order-pay #order_review .wc-terms-and-conditions {
  margin: 0 0 16px 0 !important;
  font-size: 13px !important;
  color: #52525b !important;
}

/* --- Sipariş özeti listesi (order-receipt.php ul.order_details) -------- */
.woocommerce-order-pay ul.order_details {
  display: flex !important;
  flex-wrap: wrap !important;
  border: 1px solid #e2dacd !important;
  border-radius: 8px !important;
  background: transparent !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.woocommerce-order-pay ul.order_details li {
  flex: 1 1 50% !important;
  border: none !important;
  border-bottom: 1px solid #e2dacd !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #71717a !important;
  list-style: none !important;
}

.woocommerce-order-pay ul.order_details li strong {
  display: block !important;
  margin-top: 4px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1c1c1c !important;
}

.woocommerce-order-pay ul.order_details li::before,
.woocommerce-order-pay ul.order_details li::after {
  display: none !important;
  content: none !important;
}

/* --- iyzico "yükleniyor" göstergesi (#loadingBar) --------------------
   NOT: `display` bilinçli olarak !important DEĞİL — eklenti, iframe hazır
   olunca bu elemana inline `display:none` yazar; !important bunu ezip
   spinner'ı ekranda bırakırdı. */
.woocommerce-order-pay #loadingBar {
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 160px !important;
  padding: 32px 16px !important;
}

.woocommerce-order-pay #loadingBar .loading {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 3px solid rgba(28, 28, 28, 0.15) !important;
  border-top-color: #1c1c1c !important;
  border-radius: 50% !important;
  animation: storefront-child-spin 0.7s linear infinite !important;
}

.woocommerce-order-pay #loadingBar .brand,
.woocommerce-order-pay #loadingBar .brand p {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #71717a !important;
}

/* --- iyzico bilgilendirme metni (#infoBox) ------------------------- */
.woocommerce-order-pay #infoBox {
  max-width: 480px !important;
  margin: 0 auto 16px auto !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #52525b !important;
}

/* --- iyzico form kapsayıcısı (#iyzipay-checkout-form) -------------- */
.woocommerce-order-pay #iyzipay-checkout-form {
  max-width: 480px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 1px solid #e2dacd !important;
  border-radius: 12px !important;
  padding: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.woocommerce-order-pay #iyzipay-checkout-form.responsive {
  width: 100% !important;
}

.woocommerce-order-pay #iyzipay-checkout-form iframe,
.woocommerce-order-pay #iyzipay-checkout-form > div {
  max-width: 100% !important;
}

/* --- Mobil ------------------------------------------------------------ */
@media (max-width: 600px) {
  .woocommerce-order-pay .entry-content > .woocommerce {
    max-width: 100% !important;
  }

  .woocommerce-order-pay #order_review .shop_table thead th,
  .woocommerce-order-pay #order_review .shop_table tbody td,
  .woocommerce-order-pay #order_review .shop_table tfoot th,
  .woocommerce-order-pay #order_review .shop_table tfoot td {
    padding: 12px !important;
    font-size: 13px !important;
  }

  .woocommerce-order-pay ul.order_details li {
    flex-basis: 100% !important;
  }

  .woocommerce-order-pay #iyzipay-checkout-form,
  .woocommerce-order-pay #infoBox {
    max-width: 100% !important;
  }
}

/* ==========================================================================
   MOBİL SABİT ÖZET BARI (<= 900px) — sepet & ödeme
   --------------------------------------------------------------------------
   Sağ özet paneli bu genişlikte sayfa sonuna indiği için, toplam + ana
   aksiyon ekrana sabit küçük bir barla her zaman erişilebilir kalır.
   Markup: inc/woocommerce/checkout-bar.php (yalnızca sepet/ödeme + dolu sepet).
   ========================================================================== */
.sfc-checkout-bar {
  display: none;
}

@media (max-width: 900px) {
  .sfc-checkout-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9990 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid #e2dacd !important;
    box-shadow: 0 -6px 20px rgba(28, 28, 28, 0.1) !important;
    transition: transform 0.28s ease, opacity 0.28s ease !important;
  }

  /* Asıl özet paneli ekranda görününce (JS: IntersectionObserver) bar aşağı
     kayıp gizlenir; panel görünüm dışına çıkınca geri gelir. */
  .sfc-checkout-bar.is-hidden {
    transform: translateY(130%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .sfc-checkout-bar__summary {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
  }

  .sfc-checkout-bar__label {
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #8a8272 !important;
  }

  .sfc-checkout-bar__amount {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1c1c1c !important;
    white-space: nowrap !important;
  }
  .sfc-checkout-bar__amount .amount,
  .sfc-checkout-bar__amount bdi {
    font-weight: 700 !important;
    color: #1c1c1c !important;
  }

  .sfc-checkout-bar__btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 13px 26px !important;
    background: #1c1c1c !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease, opacity 0.15s ease !important;
  }
  .sfc-checkout-bar__btn:hover {
    background: #000000 !important;
  }
  .sfc-checkout-bar__btn:disabled {
    opacity: 0.6 !important;
    cursor: default !important;
  }

  /* Sabit bar, footer'ın en alt satırını kalıcı olarak örtmesin. */
  .woocommerce-cart .site-footer,
  .woocommerce-checkout .site-footer,
  .woocommerce-cart #colophon,
  .woocommerce-checkout #colophon {
    margin-bottom: 84px !important;
  }
}

@media (max-width: 380px) {
  .sfc-checkout-bar {
    gap: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .sfc-checkout-bar__amount {
    font-size: 16px !important;
  }
  .sfc-checkout-bar__btn {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }
}

/* ====================================================================
   MESAFELİ SATIŞ — ZORUNLU SÖZLEŞME ONAY KUTUSU (#place_order üstü)
   ==================================================================== */
.woocommerce-checkout #order_review .sfc-sozlesme-onay {
  margin: 0 0 14px 0 !important;
  padding: 12px 14px !important;
  background: #faf6ef !important;
  border: 1px solid #e2dacd !important;
  border-radius: 8px !important;
}

.woocommerce-checkout #order_review .sfc-sozlesme-onay label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #3f3f46 !important;
  cursor: pointer !important;
}

.woocommerce-checkout #order_review .sfc-sozlesme-onay input[type="checkbox"] {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 1px 0 0 0 !important;
  accent-color: #f29100 !important;
  cursor: pointer !important;
}

.woocommerce-checkout #order_review .sfc-sozlesme-onay a {
  color: #b06d00 !important;
  text-decoration: underline !important;
}

.woocommerce-checkout #order_review .sfc-sozlesme-onay .required,
.woocommerce-checkout #order_review .sfc-sozlesme-onay abbr.required {
  color: #c0392b !important;
  border: none !important;
  text-decoration: none !important;
}

.woocommerce-checkout #order_review .sfc-sozlesme-onay.woocommerce-invalid {
  border-color: #c0392b !important;
  background: #fdf0ee !important;
}