/* =========================================================================
   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; max-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{ position:relative; display:flex; align-items:center; gap:12px; border:2px solid var(--co-line); border-radius:14px; padding:16px 16px 16px 46px; margin-bottom:10px; cursor:pointer; font-weight:600; font-size:.96rem; color:var(--co-ink); transition:border-color .16s cubic-bezier(.4,0,.2,1), background .16s cubic-bezier(.4,0,.2,1), box-shadow .16s cubic-bezier(.4,0,.2,1), transform .12s ease; background:var(--co-bg); }
.co-pay-option i{ font-size:1.15rem; color:var(--co-ink-soft); }
.co-pay-option:hover{ border-color:var(--co-ink-soft); background:var(--co-panel-bg); }
.co-pay-option input[type=radio]{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:0;
  border:2px solid var(--co-line); border-radius:50%; background:var(--co-bg);
  transition:border-color .16s ease, background .16s ease; cursor:pointer; flex-shrink:0;
}
.co-pay-option input[type=radio]::after{
  content:''; position:absolute; inset:0; margin:auto; width:9px; height:9px; border-radius:50%;
  background:#fff; opacity:0; transform:scale(.4); transition:opacity .14s ease, transform .14s ease;
}
.co-pay-option input[type=radio]:checked{ border-color:var(--co-accent); background:var(--co-accent); }
.co-pay-option input[type=radio]:checked::after{ opacity:1; transform:scale(1); }
.co-pay-option:has(input:checked){ border-color:var(--co-accent); background:var(--co-panel-bg); box-shadow:0 2px 10px -2px rgba(26,26,30,.14); transform:translateY(-1px); }
.co-pay-option:has(input:checked) i{ color:var(--co-accent); }
.co-pay-option input[type=radio]:focus-visible{ box-shadow:0 0 0 4px rgba(26,26,30,.14); }
.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; }
.co-pay-option-dimmed{ opacity:.5; }
.co-pay-option-dimmed:hover{ opacity:.8; border-color:var(--co-line); background:var(--co-bg); }
/* Müşteri hiçbir yöntem seçmeden "Siparişi Tamamla"ya bastığında tarayıcının
   native doğrulaması devreye girer - bunu görünür, sakin bir uyarıyla
   destekliyoruz (varsayılan tarayıcı davranışına ek, onun yerine değil). */
#paymentMethodSelector:has(input:invalid) .co-pay-option{ }
.co-pay-required-hint{ display:none; font-size:.78rem; color:#C4291D; margin:-4px 0 12px; align-items:center; gap:6px; }
.co-pay-required-hint.show{ display:flex; }

/* ---------- Premium kart formu ---------- */
.co-card-premium{
  border:1px solid var(--co-line-soft);
  border-radius:18px;
  padding:26px 24px;
  background:var(--co-bg);
  box-shadow:0 1px 2px rgba(20,20,25,.03), 0 12px 32px -16px rgba(20,20,25,.08);
}
.co-card-premium .co-field{ margin-bottom:16px; }
.co-card-premium .co-field label{
  font-size:.72rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--co-muted); margin-bottom:7px; display:block;
}
.co-card-premium .co-input, .co-card-premium .co-select{
  border:1px solid var(--co-line-soft) !important;
  background:var(--co-panel-bg) !important;
  border-radius:12px !important;
  padding:13px 14px !important;
  font-size:.95rem;
  transition:border-color .18s cubic-bezier(.4,0,.2,1), background .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.co-card-premium .co-input:focus, .co-card-premium .co-select:focus{
  outline:none !important;
  background:var(--co-bg) !important;
  border-color:var(--co-ink) !important;
  box-shadow:0 0 0 4px rgba(26,26,30,.06) !important;
}
.co-card-holder{ letter-spacing:.04em; font-weight:500; }
.co-card-number-wrap{ position:relative; }
.co-card-number-input{
  font-family:'SF Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size:1.08rem; font-weight:500; letter-spacing:.07em;
  padding-right:54px !important;
}
.co-card-brand-icon{ position:absolute; right:14px; top:50%; transform:translateY(-50%); display:flex; align-items:center; height:20px; pointer-events:none; opacity:0; transition:opacity .2s ease; }
.co-card-brand-icon:not(:empty){ opacity:1; }
.co-card-brand-icon svg{ display:block; }
.co-installment-box, #coInstallmentBox{
  margin-top:12px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(180deg, rgba(31,122,77,.06) 0%, rgba(31,122,77,.03) 100%);
  border:1px solid rgba(31,122,77,.14);
}
.co-installment-label{ display:flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600; color:var(--co-success); margin-bottom:8px; text-transform:none !important; letter-spacing:0 !important; }
.co-installment-label i{ font-size:.9rem; }
#coInstallmentSelect{
  border-color:rgba(31,122,77,.25) !important; background:var(--co-bg) !important;
  font-weight:600; color:var(--co-success);
}
#coInstallmentSelect:focus{ box-shadow:0 0 0 4px rgba(31,122,77,.1) !important; border-color:var(--co-success) !important; }
.co-spin{ display:inline-block; animation:coSpin .8s linear infinite; }
@keyframes coSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.co-cvv-field{ position:relative; }
.co-cvv-input{
  font-family:'SF Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  letter-spacing:.35em; font-weight:600; padding-right:36px !important;
}
.co-cvv-lock-icon{ position:absolute; right:13px; top:39px; color:var(--co-muted); font-size:14px; pointer-events:none; }
.co-secure-badge{
  display:flex; align-items:center; gap:8px; margin-top:20px; padding:11px 14px;
  background:var(--co-panel-bg); color:var(--co-ink-soft); border-radius:12px;
  font-size:.76rem; font-weight:500; letter-spacing:.01em;
}
.co-secure-badge i{ color:var(--co-success); font-size:.95rem; }


/* ---------- 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; }
.co-cta-sticky{ position:sticky; bottom:0; margin-top:20px; z-index:5; background:var(--co-panel-bg); padding:16px 4px 4px; margin-left:-4px; margin-right:-4px; border-top:1px solid var(--co-line-soft); border-radius:12px 12px 0 0; box-shadow:0 -8px 16px -8px rgba(20,20,25,.08); }

/* ---------- 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; }

/* =========================================================================
   Sepet satırları, ek ürün kartları, bilgi notları — satır içi stiller
   yerine sınıflar (her iki tasarım da bunları kullanır)
   ========================================================================= */
.co-cart-list{ border-top:1px solid var(--co-line); }
.co-cart-line{ display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--co-line); transition:opacity .2s ease; }
.co-cart-line.is-busy{ opacity:.45; pointer-events:none; }
.co-cart-thumb{ flex-shrink:0; width:88px; height:88px; border-radius:var(--co-radius); overflow:hidden; border:1px solid var(--co-line); background:#fff; display:block; }
.co-cart-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.co-cart-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.co-cart-head{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.co-cart-brand{ font-size:.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--co-muted); margin-bottom:3px; }
.co-cart-name{ color:var(--co-ink); text-decoration:none; font-weight:600; font-size:.96rem; line-height:1.35; display:block; }
.co-cart-name:hover{ text-decoration:underline; text-underline-offset:3px; }
.co-cart-variant{ font-size:.8rem; color:var(--co-ink-soft); margin-top:3px; }
.co-cart-price{ text-align:right; white-space:nowrap; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.co-cart-price-total{ font-family:var(--co-font-mono); font-feature-settings:'tnum' 1; font-weight:700; font-size:1rem; color:var(--co-ink); }
.co-cart-price-old{ font-family:var(--co-font-mono); font-size:.78rem; color:var(--co-muted); text-decoration:line-through; }
.co-cart-price-unit{ font-family:var(--co-font-mono); font-size:.74rem; color:var(--co-muted); }
.co-cart-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.co-qty{ display:inline-flex; align-items:center; border:1px solid var(--co-line); border-radius:var(--co-radius-sm); background:var(--co-bg); }
.co-qty button{ width:34px; height:34px; border:none; background:none; font-size:17px; font-weight:600; color:var(--co-ink); cursor:pointer; line-height:1; }
.co-qty button:hover:not(:disabled){ background:var(--co-panel-bg); }
.co-qty button:disabled{ color:var(--co-line); cursor:not-allowed; }
.co-qty input{ width:36px; text-align:center; border:none; background:transparent; font-weight:700; font-size:.88rem; font-family:var(--co-font-mono); color:var(--co-ink); }
.co-cart-remove{ background:none; border:none; color:var(--co-muted); font-size:.8rem; font-weight:600; display:inline-flex; align-items:center; gap:5px; cursor:pointer; padding:6px 4px; }
.co-cart-remove:hover{ color:var(--co-danger); }
.co-tier-hint{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#FEF9E7; border:1px solid #FDE68A; border-radius:var(--co-radius-sm); padding:8px 10px; font-size:.78rem; color:#92600A; }
.co-tier-hint button{ margin-left:auto; background:#92600A; color:#fff; border:none; border-radius:6px; padding:4px 12px; font-size:.74rem; font-weight:700; cursor:pointer; }
.co-upsell{ margin-top:28px; }
.co-upsell-title{ font-size:.95rem; font-weight:700; margin:0 0 12px; }
.co-upsell-row{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.co-upsell-card{ flex:0 0 156px; scroll-snap-align:start; border:1px solid var(--co-line); border-radius:var(--co-radius); padding:10px; display:flex; flex-direction:column; gap:6px; background:var(--co-bg); }
.co-upsell-card img{ width:100%; height:100px; object-fit:cover; border-radius:6px; }
.co-upsell-name{ font-size:.78rem; font-weight:600; line-height:1.3; height:2.6em; overflow:hidden; }
.co-upsell-price{ font-weight:800; font-size:.84rem; font-family:var(--co-font-mono); }
.co-upsell-price s{ color:var(--co-muted); font-weight:400; font-size:.85em; margin-right:4px; }
.co-upsell-add{ margin-top:auto; border:1px solid var(--co-line); background:var(--co-bg); border-radius:var(--co-radius-sm); padding:7px; font-size:.76rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:4px; color:var(--co-ink); }
.co-upsell-add:hover{ border-color:var(--co-ink); }
.co-chip{ align-self:flex-start; font-size:.62rem; font-weight:700; padding:2px 7px; border-radius:20px; }
.co-chip-warn{ color:#B45309; background:#FEF3C7; }
.co-chip-success{ color:#15803D; background:#DCFCE7; }
.co-note{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--co-ink-soft); background:var(--co-bg); border:1px solid var(--co-line); border-radius:var(--co-radius-sm); padding:10px 12px; margin-top:12px; }
.co-note-success{ color:var(--co-success); background:var(--co-success-bg); border-color:var(--co-success); }
.co-continue-link{ display:inline-flex; align-items:center; gap:6px; margin-top:24px; font-size:.86rem; font-weight:600; color:var(--co-ink); text-decoration:none; }
.co-continue-link:hover{ text-decoration:underline; text-underline-offset:3px; }
a.co-cta-btn{ text-decoration:none; }
.co-cta-cart{ margin-top:20px; }
@media (max-width:575px){
  .co-cart-thumb{ width:72px; height:72px; }
  .co-cart-head{ flex-direction:column; gap:6px; }
  .co-cart-price{ align-items:flex-start; text-align:left; }
}

/* ---------- Kart formu: doğrulama, gruplama ---------- */
.co-field-hint{ display:none; font-size:.76rem; color:var(--co-danger); margin-top:6px; }
.co-field-hint.show{ display:block; }
.co-input.co-invalid, .co-select.co-invalid{ border-color:var(--co-danger) !important; }
.co-card-meta-row{ grid-template-columns:1.6fr 1fr; }
.co-exp-group{ display:flex; align-items:center; gap:6px; }
.co-exp-group .co-select{ flex:1; }
.co-exp-sep{ color:var(--co-muted); font-weight:600; }
.co-cvv-wrap{ position:relative; }
.co-cvv-wrap .co-cvv-lock-icon{ top:50%; transform:translateY(-50%); }

/* ---------- Canlı kart önizlemesi ---------- */
.co-card-visual-wrap{ perspective:1200px; margin:0 auto 22px; max-width:340px; }
.co-card-visual{ position:relative; width:100%; aspect-ratio:1.586; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.3,.7,.3,1); }
.co-card-visual.is-flipped{ transform:rotateY(180deg); }
.co-cv-face{ position:absolute; inset:0; border-radius:16px; padding:20px 22px; color:#fff; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:linear-gradient(135deg, #2B2B31 0%, #16161A 100%); box-shadow:0 18px 36px -18px rgba(0,0,0,.45); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.co-cv-face::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.14), transparent 55%); pointer-events:none; }
.co-card-visual[data-brand="visa"] .co-cv-face{ background:linear-gradient(135deg, #1E3A8A 0%, #0F1E4D 100%); }
.co-card-visual[data-brand="mastercard"] .co-cv-face{ background:linear-gradient(135deg, #3A3A42 0%, #111114 100%); }
.co-card-visual[data-brand="amex"] .co-cv-face{ background:linear-gradient(135deg, #2E77BC 0%, #1B4F80 100%); }
.co-card-visual[data-brand="troy"] .co-cv-face{ background:linear-gradient(135deg, #0F7A55 0%, #0A4A34 100%); }
.co-cv-back{ transform:rotateY(180deg); padding:22px 0; justify-content:flex-start; gap:16px; }
.co-cv-top{ display:flex; justify-content:space-between; align-items:center; }
.co-cv-chip{ width:40px; height:30px; border-radius:6px; background:linear-gradient(135deg, #E9D8A6, #B8A06A); position:relative; }
.co-cv-chip::before{ content:''; position:absolute; inset:7px 0; border-top:1px solid rgba(0,0,0,.2); border-bottom:1px solid rgba(0,0,0,.2); }
.co-cv-brand{ height:22px; display:flex; align-items:center; background:rgba(255,255,255,.92); border-radius:5px; padding:0 6px; }
.co-cv-brand:empty{ display:none; }
.co-cv-number{ font-family:'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size:1.18rem; letter-spacing:.12em; font-weight:500; text-shadow:0 1px 1px rgba(0,0,0,.25); white-space:nowrap; }
.co-cv-bottom{ display:flex; justify-content:space-between; gap:12px; }
.co-cv-holder-wrap{ min-width:0; flex:1; }
.co-cv-label{ font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; opacity:.65; margin-bottom:2px; }
.co-cv-value{ font-size:.82rem; font-weight:600; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.co-cv-stripe{ height:40px; background:#0B0B0D; }
.co-cv-sign{ margin:0 22px; height:36px; background:repeating-linear-gradient(45deg, #F3F3F3, #F3F3F3 6px, #E7E7E7 6px, #E7E7E7 12px); border-radius:4px; display:flex; align-items:center; justify-content:flex-end; padding-right:12px; color:#111; font-family:'SF Mono', ui-monospace, monospace; font-weight:700; letter-spacing:.2em; }
.co-cv-back-note{ margin:0 22px; font-size:.64rem; opacity:.6; }
@media (max-width:420px){ .co-cv-number{ font-size:1rem; } .co-cv-face{ padding:16px 18px; } }
@media (prefers-reduced-motion: reduce){ .co-card-visual{ transition:none; } }

/* Ücretsiz kargo ilerlemesi (sepet) */
.co-freeship{ margin-top:14px; padding:12px 14px; border:1px solid var(--co-line); border-radius:var(--co-radius-sm); background:var(--co-bg); }
.co-freeship-text{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--co-ink-soft); margin-bottom:9px; }
.co-freeship.is-done .co-freeship-text{ color:var(--co-success); font-weight:600; }
.co-freeship-bar{ height:6px; border-radius:6px; background:var(--co-line-soft); overflow:hidden; }
.co-freeship-bar span{ display:block; height:100%; border-radius:6px; background:var(--co-ink); transition:width .4s ease; }
.co-freeship.is-done .co-freeship-bar span{ background:var(--co-success); }
.co-stepper{ display:none; }

/* Grid çocukları içeriklerinin (ör. yatay kaydırmalı ek ürün satırı) genişliğine
   zorlanmasın — aksi halde mobilde tüm sayfa yana taşıyordu. */
.co-form-col, .co-summary-col{ min-width:0; }
@media (max-width:991px){ .co-grid{ grid-template-columns:minmax(0,1fr); } }

/* Kart önizlemesi: dönmemişken arka yüz tamamen görünmez (backface-visibility
   sahte öğelerde her tarayıcıda uygulanmıyor, soluk bir hayalet bırakıyordu).
   Çevirme animasyonunun yarısında görünürlük değişir. */
.co-cv-back{ visibility:hidden; transition:visibility 0s linear .3s; }
.co-card-visual.is-flipped .co-cv-back{ visibility:visible; transition-delay:.3s; }
.co-card-visual.is-flipped .co-cv-front{ visibility:hidden; transition:visibility 0s linear .3s; }
.co-cv-front{ transition:visibility 0s linear .3s; }
.co-hero{ display:none; }

/* =====================================================================
   ÖDEME FORMU AKIŞI + MOBİL ÖDEME ÇUBUĞU
   Mobilde (≤991px) özet sütunu en üste taşındığı için "Siparişi Tamamla"
   sayfanın tepesinde kalıyordu; kullanıcı formu doldurup yukarı çıkmak,
   ödeme formunu ise aşağıda elle aramak zorundaydı.
   ===================================================================== */
.co-pay-loading{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:30px 18px;border-radius:var(--co-radius-sm,12px);background:var(--co-panel-bg,#F7F7F9);border:1.5px dashed var(--co-line,#D2D2D7)}
.co-pay-loading b{font-size:.95rem}
.co-pay-loading small{color:var(--co-muted,#6E6E73);font-size:.8rem}
.co-pay-spin{width:28px;height:28px;border-radius:50%;border:3px solid rgba(0,0,0,.08);border-top-color:var(--co-ink,#1D1D1F);animation:coSpin .8s linear infinite;margin-bottom:4px}
@keyframes coSpin{to{transform:rotate(360deg)}}
.co-pay-loading.is-failed{border-color:var(--co-danger,#D70015);background:#FFF5F5}
.co-pay-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.co-pay-retry,.co-pay-hosted{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;font-weight:600;font-size:.85rem;text-decoration:none;cursor:pointer}
.co-pay-retry{background:#fff;border:1.5px solid var(--co-line,#D2D2D7);color:var(--co-ink,#1D1D1F)}
.co-pay-hosted{background:var(--co-ink,#1D1D1F);color:#fff;border:0}
.co-resume{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:var(--co-radius-sm,12px);background:#FFF8EC;border:1px solid #F3D9A8;margin-bottom:16px;font-size:.88rem}
.co-resume button{border:0;border-radius:999px;padding:9px 16px;background:var(--co-ink,#1D1D1F);color:#fff;font-weight:600;font-size:.85rem}
#paymentFrameContainer{scroll-margin-top:84px}
.co-form-col input,.co-form-col select,.co-form-col textarea{scroll-margin-top:110px}
.co-mobile-cta{display:none}
@media (max-width:991px){
  .co-mobile-cta{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:1040;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);box-shadow:0 -1px 0 rgba(0,0,0,.08),0 -10px 30px -18px rgba(0,0,0,.35)}
  .co-mcta-info{display:flex;flex-direction:column;min-width:0;line-height:1.15;position:relative}
  .co-mcta-info span{font-size:.72rem;color:var(--co-muted,#6E6E73)}
  .co-mcta-info b{font-size:1.05rem;white-space:nowrap}
  .co-mcta-info small{position:absolute;left:0;bottom:calc(100% + 14px);white-space:nowrap;background:#1D1D1F;color:#fff;font-size:.78rem;padding:7px 12px;border-radius:999px;opacity:0;transform:translateY(6px);transition:all .25s;pointer-events:none}
  .co-mcta-info small.on{opacity:1;transform:none}
  .co-mobile-cta .co-mcta-btn{flex:1;margin:0;min-height:50px}
  body{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .co-summary-col .co-cta-sticky .co-cta-btn{display:none}   /* üstteki tekrarlanan buton: mobilde alttaki çubuk kullanılır */
  body.co-paying .co-mobile-cta{display:none}                 /* ödeme formu açıkken iyzico'nun kendi butonu kullanılır */
  body.co-paying{padding-bottom:0}
}
@media (max-width:991px){
  .co-mobile-cta{transition:transform .2s ease,opacity .2s ease;will-change:transform}
  /* iPhone, 16px'ten küçük yazılı alana odaklanınca sayfayı yakınlaştırır ve düzeni kaydırır */
  .co-form-col input:not([type=radio]):not([type=checkbox]),.co-form-col select,.co-form-col textarea,.co-phone-group input,.co-coupon-row input{font-size:16px!important}
}
/* Ödeme sırasında ödeme alanı en az bir ekran yüksekliğinde: mobilde alan sayfanın sonunda
   kaldığı için tarayıcı onu ekranın üstüne kaydıramıyor, form yarım görünüyordu. */
body.co-paying #paymentFrameContainer{min-height:calc(100vh - 90px);min-height:calc(100dvh - 90px)}

/* B2B: bayi sipariş bilgileri kutusu (sevkiyat rotası/tarihi, soğuk zincir, SKT, kota) */
.co-b2b-box{margin:0 0 22px;padding:18px;border-radius:var(--co-radius-sm,14px);background:linear-gradient(120deg,rgba(62,139,255,.07),rgba(141,107,245,.07) 40%,rgba(227,107,177,.07) 75%,rgba(255,143,107,.07));border:1px solid rgba(141,107,245,.22)}
.co-b2b-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;margin-bottom:12px}
.co-b2b-h span{margin-left:auto;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;background:#fff;color:#5B47D6}
.co-b2b-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.co-b2b-grid label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-weight:600}
.co-b2b-grid select{height:46px;border-radius:12px;border:1.5px solid var(--co-line,#D2D2D7);padding:0 12px;font-size:16px;background:#fff}
.co-b2b-hint{display:block;margin-top:8px;font-size:.76rem;color:var(--co-muted,#6E6E73)}
.co-b2b-notes{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:6px}
.co-b2b-notes li{display:flex;gap:8px;font-size:.84rem;padding:8px 10px;border-radius:10px;background:#fff}
.co-b2b-notes i{color:#8D6BF5;font-size:1rem;margin-top:1px}
@media (max-width:575px){.co-b2b-grid{grid-template-columns:1fr}}