/* =========================================================================
   checkout.css — TAMAMEN BAĞIMSIZ tasarım sistemi
   -------------------------------------------------------------------------
   Bilerek style.css'teki hiçbir CSS değişkenini (--primary, --radius-pill,
   --ink vb.) KULLANMAZ — kendi renk/boşluk/köşe skalasına sahiptir. Amaç:
   checkout, sitenin pastel/yuvarlak-köşeli genel temasından görsel olarak
   tamamen ayrışan, nötr/keskin/minimal bir "ödeme kabuğu" olsun (ikas/
   Shopify tarzı referans tasarım).
   ========================================================================= */

:root{
  --co-ink:        #1A1A1E;
  --co-ink-soft:   #55555C;
  --co-muted:      #8A8A93;
  --co-line:       #E3E3E7;
  --co-line-soft:  #EEEEF1;
  --co-bg:         #FFFFFF;
  --co-panel-bg:   #F6F6F8;
  --co-accent:     #1A1A1E;   /* CTA rengi: nötr siyah (referans tasarımdaki gibi) */
  --co-accent-hover: #000000;
  --co-success:    #1F7A4D;
  --co-success-bg: #EAF6EF;
  --co-danger:     #C4291D;
  --co-radius:     8px;
  --co-radius-sm:  6px;
  --co-font:       'Inter', -apple-system, sans-serif;
  --co-font-mono:  'IBM Plex Mono', 'SF Mono', monospace; /* fiyat/rakamlar için — premium his */
}

.co-shell{ font-family:var(--co-font); color:var(--co-ink); background:var(--co-bg); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
.co-shell *{ box-sizing:border-box; }
/* Rakam geçen HER yer tabular-nums kullanır — fiyatlar hizasız zıplamaz,
   IBM Plex Mono ile daha "finansal/premium" bir izlenim verir. */
.co-summary-item-price, .co-total-row span:last-child, .co-cta-btn .co-price-inline{ font-family:var(--co-font-mono); font-feature-settings:'tnum' 1; letter-spacing:-.01em; }

/* ---------- Üst çubuk ---------- */
.co-topbar{ display:flex; align-items:center; justify-content:space-between; padding:20px 32px; border-bottom:1px solid var(--co-line-soft); }
.co-topbar .co-logo{ font-weight:800; font-size:1.3rem; letter-spacing:-.02em; color:var(--co-ink); text-decoration:none; }
.co-topbar .co-login-hint{ font-size:.86rem; color:var(--co-muted); }
.co-topbar .co-login-hint a{ color:var(--co-ink); font-weight:700; text-decoration:underline; }

/* ---------- İki kolonlu tam yükseklik ızgara: sol beyaz form, sağ gri
   özet paneli TÜM YÜKSEKLİK boyunca sabit — referans tasarımdaki gibi ---------- */
.co-grid{ display:grid; grid-template-columns:1fr 460px; min-height:calc(100vh - 73px); max-width:1440px; margin:0 auto; }
@media (max-width:991px){ .co-grid{ grid-template-columns:1fr; } .co-summary-col{ order:-1; } }

.co-form-col{ padding:40px 64px 64px; max-width:720px; width:100%; }
@media (max-width:991px){ .co-form-col{ padding:28px 20px; max-width:100%; } }

.co-summary-col{ background:var(--co-panel-bg); border-left:1px solid var(--co-line-soft); padding:40px; position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; }

.co-summary-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--co-line-soft); }
.co-summary-header span{ font-weight:700; font-size:.92rem; color:var(--co-ink); }
.co-edit-cart-link{ display:inline-flex; align-items:center; gap:5px; font-size:.8rem; font-weight:600; color:var(--co-ink-soft); text-decoration:none; padding:5px 12px; border-radius:20px; border:1px solid var(--co-line-soft); transition:.15s; }
.co-edit-cart-link:hover{ background:var(--co-ink); color:#fff; border-color:var(--co-ink); }
@media (max-width:991px){ .co-summary-col{ position:static; height:auto; border-left:none; border-bottom:1px solid var(--co-line-soft); padding:24px 20px; } }

/* ---------- Adım başlığı: numaralı daire + başlık, KART/ÇERÇEVE YOK ---------- */
.co-step-heading{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.co-step-heading .co-step-num{ width:26px; height:26px; border-radius:50%; background:var(--co-ink); color:#fff; font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.co-step-heading h2{ font-size:1.08rem; font-weight:700; margin:0; color:var(--co-ink); letter-spacing:-.01em; }
.co-section{ margin-bottom:36px; }

/* ---------- Form elemanları: keskin/minimal, pill YOK ---------- */
.co-field{ margin-bottom:14px; }
.co-field label{ display:block; font-size:.78rem; font-weight:600; color:var(--co-ink-soft); margin-bottom:6px; }
.co-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.co-input, .co-select, .co-textarea{
  width:100%; border:1px solid var(--co-line); border-radius:var(--co-radius-sm);
  padding:11px 13px; font-size:.92rem; font-family:var(--co-font); color:var(--co-ink);
  background:var(--co-bg); transition:border-color .12s ease;
}
.co-input:focus, .co-select:focus, .co-textarea:focus{ outline:none; border-color:var(--co-ink); box-shadow:0 0 0 3px rgba(26,26,30,.08); }
.co-phone-group{ display:flex; border:1px solid var(--co-line); border-radius:var(--co-radius-sm); overflow:hidden; }
.co-phone-group .co-phone-prefix{ display:flex; align-items:center; padding:0 11px; background:var(--co-panel-bg); color:var(--co-ink-soft); font-size:.86rem; font-weight:600; border-right:1px solid var(--co-line); white-space:nowrap; }
.co-phone-group input{ border:none; flex:1; padding:11px 13px; font-size:.92rem; font-family:var(--co-font); }
.co-phone-group input:focus{ outline:none; }
.co-checkbox-row{ display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--co-ink-soft); cursor:pointer; margin-bottom:8px; }
.co-checkbox-row input{ width:16px; height:16px; }

.co-link-btn{ background:none; border:none; padding:0; color:var(--co-ink); font-weight:700; font-size:.86rem; display:inline-flex; align-items:center; gap:6px; text-decoration:underline; text-underline-offset:3px; }
.co-link-btn:hover{ color:var(--co-accent-hover); }

.co-acct-tab{ background:none; border:none; padding:0 0 10px; font-size:.86rem; font-weight:600; color:var(--co-muted); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.co-acct-tab.is-active{ color:var(--co-ink); border-bottom-color:var(--co-ink); }

/* ---------- Ödeme yöntemi seçenekleri ---------- */
.co-pay-option{ display:flex; align-items:center; gap:10px; border:1px solid var(--co-line); border-radius:var(--co-radius); padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:border-color .12s ease; }
.co-pay-option:hover{ border-color:var(--co-ink); }
.co-pay-option input[type=radio]{ width:16px; height:16px; accent-color:var(--co-ink); }
.co-pay-option .co-pay-badge{ margin-left:auto; font-size:.7rem; font-weight:700; color:var(--co-success); background:var(--co-success-bg); padding:3px 9px; border-radius:20px; }

/* ---------- Ana CTA: dolgun siyah, pill değil ---------- */
.co-cta-btn{ width:100%; background:var(--co-accent); color:#fff; border:none; border-radius:var(--co-radius); padding:15px; font-size:.98rem; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:background .12s ease, transform .12s ease; }
.co-cta-btn:hover{ background:var(--co-accent-hover); transform:translateY(-1px); }
.co-cta-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* ---------- Sipariş özeti paneli içeriği ---------- */
.co-summary-item{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--co-line-soft); }
.co-summary-item:last-child{ border-bottom:none; }
.co-summary-thumb{ position:relative; flex-shrink:0; width:52px; height:52px; }
.co-summary-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:var(--co-radius-sm); border:1px solid var(--co-line); background:#fff; }
.co-summary-thumb .co-qty-dot{ position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; background:var(--co-ink); color:#fff; font-size:.66rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--co-panel-bg); }
.co-summary-item-name{ flex:1; font-size:.87rem; font-weight:550; color:var(--co-ink); line-height:1.35; }
.co-summary-item-price{ font-size:.86rem; font-weight:700; color:var(--co-ink); white-space:nowrap; }

.co-summary-totals{ margin-top:18px; padding-top:16px; border-top:1px solid var(--co-line); }
.co-total-row{ display:flex; justify-content:space-between; font-size:.88rem; color:var(--co-ink-soft); padding:5px 0; }
.co-total-row.co-discount{ color:var(--co-success); font-weight:700; }
.co-total-row.co-grand{ font-size:1.2rem; font-weight:800; color:var(--co-ink); margin-top:8px; padding-top:14px; border-top:1px solid var(--co-line); letter-spacing:-.015em; }

.co-coupon-applied{ display:flex; align-items:center; justify-content:space-between; background:var(--co-success-bg); border:1px solid var(--co-success); border-radius:var(--co-radius-sm); padding:10px 13px; font-size:.84rem; font-weight:700; color:var(--co-success); margin-top:14px; }
.co-coupon-applied button{ background:none; border:none; color:var(--co-success); opacity:.7; }
.co-coupon-applied button:hover{ opacity:1; }
.co-coupon-row{ display:flex; gap:8px; margin-top:10px; }
.co-coupon-row input{ flex:1; border:1px solid var(--co-line); border-radius:var(--co-radius-sm); padding:10px 12px; font-size:.84rem; text-transform:uppercase; }
.co-coupon-row button{ background:var(--co-bg); border:1px solid var(--co-line); border-radius:var(--co-radius-sm); padding:0 16px; font-size:.82rem; font-weight:700; white-space:nowrap; }
.co-coupon-row button:hover{ border-color:var(--co-ink); }

.co-trust-row{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:.72rem; color:var(--co-muted); margin-top:20px; }
.co-powered-by{ text-align:center; font-size:.72rem; color:var(--co-muted); margin-top:24px; padding-top:16px; border-top:1px solid var(--co-line-soft); }

.co-error-banner{ background:#FDECEC; border:1px solid var(--co-danger); color:var(--co-danger); border-radius:var(--co-radius-sm); padding:12px 16px; font-size:.86rem; margin-bottom:20px; }

/* Ödeme sağlayıcı iframe alanı — checkout.css skalasına uysun */
#paymentFrameContainer iframe{ border-radius:var(--co-radius); }

/* Ücretsiz kargo ilerleme çubuğu */
.free-ship-progress{ background:var(--co-accent, #4B5D45); background:color-mix(in srgb, var(--co-accent, #4B5D45) 8%, white); border:1px solid var(--co-accent, #4B5D45); border-radius:10px; padding:14px 16px; }
.free-ship-progress .fsp-text{ font-size:12.5px; color:var(--co-ink, #2E2E2B); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.free-ship-progress .fsp-text i{ color:var(--co-accent, #4B5D45); font-size:16px; }
.free-ship-progress .fsp-text.fsp-done{ color:#1a7f37; font-weight:600; }
.free-ship-progress .fsp-text.fsp-done i{ color:#1a7f37; }
.free-ship-progress .fsp-bar{ height:6px; background:rgba(0,0,0,.08); border-radius:10px; overflow:hidden; }
.free-ship-progress .fsp-bar-fill{ height:100%; background:var(--co-accent, #4B5D45); border-radius:10px; transition:width .4s ease; }