/* Sipariş akışı stilleri — ortak token/btn/ic/page-shell styles.css'ten gelir */

/* Checkout-yerel token'lar (768+ grid'de kullanılır) */
.checkout-shell{--co-summary-w:280px;--co-form-max:700px}
@media (min-width:1080px){ .checkout-shell{--co-summary-w:340px} }

/* ============================================================
   Sipariş Akışı (siparis/)
   ============================================================ */
.checkout-page{padding-bottom:28px}
.checkout-shell{min-height:100vh;background:#fff}
.co-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;background:#fff;border-bottom:1px solid #eef2fe}
.co-secure{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:900;color:#2c8054}
.co-secure .ic{width:15px;height:15px}
.co-head{padding:20px 18px 4px}
.co-title{margin:0;font-size:27px;line-height:1.05;letter-spacing:-.04em;font-weight:950;color:var(--pe-navy)}
.co-sub{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:#3a4564;font-weight:650}

/* Adım göstergesi */
.co-stepper{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0 0;padding:0 18px}
.co-step{display:flex;align-items:center;gap:7px;min-width:0;padding:8px 2px;border-bottom:3px solid #e8eefc;font-size:12px;font-weight:850;color:#8b94ab;cursor:default}
.co-step-dot{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#e8eefc;color:#8b94ab;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:950;counter-increment:costep}
.co-stepper{counter-reset:costep}
.co-step-dot::before{content:counter(costep)}
.co-step-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-step.is-active{color:var(--pe-navy);border-bottom-color:var(--pe-gold)}
.co-step.is-active .co-step-dot{background:var(--pe-navy);color:#fff}
.co-step.is-done{color:var(--pe-blue-dark);cursor:pointer}
.co-step.is-done .co-step-dot{background:#e3f6ec;color:#2c8054}
.co-step.is-done .co-step-dot::before{content:"✓"}

/* Sepet: üstte yapışkan kompakt bar + accordion */
.co-cart{position:sticky;top:0;z-index:30;margin:14px 18px 0;border:1px solid #dde7ff;border-radius:16px;background:#f8fbff;box-shadow:0 10px 26px rgba(9,16,51,.08)}
.co-cart-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:12px 14px;background:none;border:0;cursor:pointer;font:inherit;text-align:start}
.co-cart-summary{font-size:13.5px;font-weight:850;color:var(--pe-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-cart-right{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
.co-cart-right b{font-size:16px;font-weight:950;color:var(--pe-navy)}
.co-cart-chev{width:16px;height:16px;color:#8b94ab;transition:transform .25s ease}
.co-cart.is-open .co-cart-chev{transform:rotate(180deg)}
.co-cart-detail{border-top:1px solid #e6edff;padding:4px 14px 10px}
.co-cart-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;font-size:13px;font-weight:700;color:#3a4564;border-bottom:1px solid #eef2fb}
.co-cart-row:last-child{border-bottom:0}
.co-cart-row-right{display:inline-flex;align-items:center;gap:10px}
.co-cart-row-right b{color:var(--pe-navy)}
.co-cart-row-removed span:first-child{text-decoration:line-through;opacity:.55}
.co-cart-total-row{font-weight:950;color:var(--pe-navy)}
.co-cart-total-row b{font-size:16px}

/* Adım panelleri */
.co-panel{padding:20px 18px 8px}
.co-step-title{margin:0;font-size:22px;letter-spacing:-.03em;font-weight:950;color:var(--pe-navy)}
.co-step-title:focus{outline:none}
.co-step-sub{margin:6px 0 14px;font-size:14px;line-height:1.5;color:#66708a;font-weight:650}

/* Ek hizmet kartları */
.co-addons{display:grid;gap:10px}
.co-addon{position:relative;display:flex;gap:12px;align-items:flex-start;border:2px solid #e3eafc;border-radius:16px;background:#fff;padding:14px;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.co-addon.is-checked{border-color:var(--pe-blue);box-shadow:0 10px 24px rgba(15,85,255,.10)}
.co-addon-check{position:absolute;opacity:0;pointer-events:none}
.co-addon-box{flex:0 0 24px;width:24px;height:24px;margin-top:2px;border-radius:8px;border:2px solid #c9d6f5;background:#fff;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:background .15s ease,border-color .15s ease}
.co-addon-box .ic{width:14px;height:14px;stroke-width:2.6;opacity:0}
.co-addon.is-checked .co-addon-box{background:var(--pe-blue);border-color:var(--pe-blue)}
.co-addon.is-checked .co-addon-box .ic{opacity:1}
.co-addon-body{display:grid;gap:4px;min-width:0}
.co-addon-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.co-addon-top b{font-size:15px;font-weight:900;color:var(--pe-navy);letter-spacing:-.01em}
.co-addon-price{flex:0 0 auto;font-style:normal;font-size:15px;font-weight:950;color:var(--pe-blue-dark)}
.co-addon-badge-row:empty{display:none}
.co-addon-badge{display:inline-block;font-style:normal;font-size:11.5px;font-weight:900;color:#7a5a00;background:linear-gradient(90deg,#ffe76b,#ffd54d);border-radius:999px;padding:3px 9px}
.co-addon-desc{font-size:13px;line-height:1.45;color:#4a5677;font-weight:650}

/* Formlar */
.co-form{display:grid;gap:13px}
/* Task 8-9 (Stripe entegrasyonu): openPaymentPanel() bu üç class'a sahip
   elementleri hidden=true ile gizliyor, ama .co-form/.co-actions/.co-trust
   kendi display:grid/flex tanımına sahip — author stylesheet [hidden]'ın
   varsayılan display:none'ını ezerdi. Attribute+class selector'ü ile
   specificity yükseltilip [hidden] davranışı geri kazandırılıyor. */
.co-form[hidden],.co-actions[hidden],.co-trust[hidden],.co-existing-note[hidden],.co-stepper[hidden]{display:none}
.co-field label{display:block;margin:0 0 5px;font-size:13px;font-weight:850;color:var(--pe-navy)}
.co-field input,.co-field select{width:100%;min-height:50px;border:1.5px solid #d7e1f8;border-radius:13px;background:#fbfcff;padding:12px 14px;font:inherit;font-size:15px;font-weight:650;color:var(--pe-text)}
.co-field input::placeholder{color:#9aa4bd;font-weight:600}
.co-field input:focus,.co-field select:focus{outline:none;border-color:var(--pe-blue);background:#fff;box-shadow:0 0 0 3px rgba(15,85,255,.12)}
.co-field input.is-invalid,.co-field select.is-invalid{border-color:#d92d3c;background:#fff8f8}
.co-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b6a91' stroke-width='2'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:38px}
.co-field select:invalid{color:#9aa4bd}
.co-error{margin:5px 0 0;font-size:12.5px;font-weight:750;color:#c2242f}
.co-note{margin:5px 0 0;font-size:12.5px;font-weight:700;color:#2c8054}
.co-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.co-password-wrap{position:relative}
.co-password-wrap input{padding-inline-end:76px}
.co-eye{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:none;cursor:pointer;color:#66708a;display:inline-flex;align-items:center;justify-content:center}
.co-eye .ic{width:20px;height:20px}
.co-eye .co-eye-off{display:none}
.co-eye.is-visible .co-eye-on{display:none}
.co-eye.is-visible .co-eye-off{display:block}
.co-pass-ok{position:absolute;inset-inline-end:48px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#14b86a}
.co-pass-ok .ic{width:18px;height:18px;stroke-width:2.4}

/* Aksiyonlar */
.co-actions{display:grid;gap:6px;margin:18px 0 4px;justify-items:center}
.co-actions .btn{width:100%}
.co-link{background:none;border:0;padding:9px 6px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:850;color:var(--pe-blue-dark);text-decoration:underline;text-underline-offset:3px}
.co-skip{color:#66708a}
.co-trust{display:flex;align-items:flex-start;gap:7px;margin:14px 0 0;font-size:12px;line-height:1.45;font-weight:700;color:#66708a}
.co-trust .ic{flex:0 0 14px;width:14px;height:14px;margin-top:1px}
.co-trust-pay{justify-content:center;text-align:start}
.co-pay-summary{margin:16px 0 0;padding:11px 13px;border-radius:13px;background:#f4f8ff;border:1px solid #dde7ff;font-size:13px;font-weight:850;color:var(--pe-navy);text-align:center}
.co-pay-btn .ic{width:17px;height:17px}
.co-pay-btn:disabled{opacity:.75;cursor:wait}

/* Plan değiştirme alt sayfası */
/* RTL notu (T3): aşağıdaki .co-sheet ve .co-toast'un `left:50%` +
   `translateX(-50%)` çifti YÖNDEN BAĞIMSIZ bir ortalama idiomudur —
   styles.css'teki .sticky-cta / .phone-notch ile aynı karar.
   `inset-inline-start`e çevrilirse RTL'de kutu merkezin sağına kayar
   (transform mantıksal değildir, işaret dönmez); bu yüzden bu iki kuralda
   `left` bilinçli olarak FİZİKSEL bırakıldı. 768+ katmanındaki
   `translate(-50%,-50%)` modal varyantı için de aynı gerekçe geçerli.
   `border-radius:22px 22px 0 0` yatayda simetrik (TL=TR, BL=BR), mantıksal
   köşe karşılığına ihtiyaç duymaz. */
.co-sheet-backdrop{position:fixed;inset:0;background:rgba(6,11,51,.45);z-index:60}
.co-sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:430px;z-index:61;background:#fff;border-radius:22px 22px 0 0;padding:18px 18px 26px;box-shadow:0 -18px 60px rgba(9,16,51,.25)}
.co-sheet-title{margin:0 0 12px;font-size:18px;font-weight:950;color:var(--pe-navy)}
.co-sheet-plans{display:grid;gap:8px}
.co-sheet-plan{display:flex;align-items:center;gap:11px;border:2px solid #e3eafc;border-radius:14px;padding:13px 14px;cursor:pointer}
.co-sheet-plan:has(input:checked){border-color:var(--pe-blue);background:#f4f8ff}
.co-sheet-plan input{width:18px;height:18px;accent-color:var(--pe-blue)}
.co-sheet-plan-name{font-size:14.5px;font-weight:800;color:var(--pe-navy)}
.co-sheet-plan-badge{margin-inline-start:auto;font-size:11px;font-weight:900;color:#7a5a00}
.co-sheet-plan-badge:empty{display:none}
.co-sheet .co-link{display:block;margin:12px auto 0}

/* Bildirim */
.co-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;max-width:min(390px,calc(100% - 32px));background:#101841;color:#fff;font-size:13px;font-weight:800;border-radius:999px;padding:11px 17px;box-shadow:0 16px 40px rgba(9,16,51,.35);text-align:center}
@media (max-width:355px){
  .co-stepper{display:flex;gap:6px}
  .co-step{flex:0 0 auto}
  .co-step.is-active{flex:1 1 auto;min-width:0}
  .co-step:not(.is-active) .co-step-label{display:none}
}

/* Denetim düzeltmeleri: klavye odağı, 44px dokunma hedefleri, sheet kilidi */
.co-addon:has(.co-addon-check:focus-visible){outline:3px solid var(--pe-blue);outline-offset:2px}
.co-addon-check:focus-visible+.co-addon-box{box-shadow:0 0 0 3px rgba(15,85,255,.4)}
.co-eye{width:44px;height:44px;inset-inline-end:4px}
.co-password-wrap input{padding-inline-end:88px}
.co-pass-ok{inset-inline-end:52px}
.co-link{min-height:44px;display:inline-flex;align-items:center;padding:6px 10px}
.co-step{min-height:44px}
.co-step.is-done:focus-visible{outline:3px solid var(--pe-blue);outline-offset:2px;border-radius:8px}
.co-cart-removed-note{margin:-4px 0 8px;font-size:12px;font-weight:650;color:#66708a}
body.co-lock{overflow:hidden}
.co-sheet,.co-sheet-backdrop{overscroll-behavior:contain}

/* 768+ */
@media (min-width:768px){
  html{scrollbar-gutter:stable}
  /* İki kolonlu grid: sol form (sınırlı genişlik), sağ kalıcı sepet.
     top/head/step tam genişlik; panel+cart aynı satırda.
     Üç .co-panel de 'panel' alanını paylaşır — hidden sözleşmesi (checkout.js)
     her zaman en fazla birini görünür bıraktığı için üst üste binme yaşanmaz. */
  .checkout-shell{max-width:1120px;margin-inline:auto;display:grid;align-content:start;column-gap:24px;grid-template-columns:minmax(0,var(--co-form-max)) var(--co-summary-w);grid-template-areas:'top top' 'head head' 'step step' 'panel cart';justify-content:center;overflow:clip}
  .co-topbar{grid-area:top;padding:16px 24px}
  .co-head{grid-area:head;padding-inline:24px}
  .co-stepper{grid-area:step;padding:0 24px;gap:10px}
  .co-cart{grid-area:cart;position:sticky;top:20px;align-self:start;margin:20px 0 0;max-height:calc(100vh - 48px);overflow:auto}
  .co-panel{grid-area:panel;padding:24px 24px 8px}
  .co-title{font-size:32px}
  .co-sub{font-size:15.5px;max-width:52ch}
  .co-step{font-size:13px}
  .co-toast{bottom:28px}
  .co-secure{background:#eaf7f0;border:1px solid #cfe8dc;border-radius:999px;padding:7px 12px;font-size:13px}
  /* Plan değiştirme sayfası: alttan açılan sheet yerine ortalanmış modal (position:fixed + Escape/backdrop/odak JS'te — dokunulmadı) */
  .co-sheet{top:50%;bottom:auto;transform:translate(-50%,-50%);max-width:460px;border-radius:20px;padding:24px;box-shadow:0 30px 90px rgba(9,16,51,.28)}
  .co-actions{display:flex;flex-direction:row;align-items:center;gap:16px;margin:22px 0 4px}
  .co-actions .btn{width:auto;min-width:260px}
  .co-cols{gap:12px}
}
@media (min-width:1080px){
  .checkout-shell{column-gap:28px}
  .co-cart{top:24px;margin-top:24px}
  .co-title{font-size:36px}
  .co-panel{padding:32px 32px 8px}
  .co-sheet{max-width:500px;padding:28px}
  .co-cols{gap:14px}
}
@media (hover:hover) and (pointer:fine){
  .co-addon:hover{border-color:#c2d4fb;box-shadow:0 6px 18px rgba(9,16,51,.07)}
  .co-sheet-plan:hover{background:#f7faff}
  .co-cart-bar:hover{background:#f2f7ff}
  .co-link:hover{color:var(--pe-blue)}
}
/* .co-addons BİLEREK tek kolon kalır (dar form sütununda okunabilirlik için) — bu görevde kayda geçer, iş çıkmaz */

/* Ödeme (Stripe Payment Element) bölümü — Task: Stripe ödeme entegrasyonu */
.co-payment{margin-top:22px;padding-top:22px;border-top:1px solid #e6edff}
.co-existing-note{display:flex;align-items:flex-start;gap:8px;margin:0 0 16px;padding:11px 13px;border-radius:13px;background:#f4f8ff;border:1px solid #dde7ff;font-size:13px;font-weight:750;color:var(--pe-navy)}
.co-existing-note .ic{flex:0 0 16px;width:16px;height:16px;margin-top:1px;color:#2c8054}
#coPaymentElement{margin:14px 0 0}

/* Sonuç ekranı — Stripe dönüşünde otomatik handoff beklerken gösterilir */
.co-result{display:grid;justify-items:center;gap:14px;padding:48px 18px;text-align:center}
.co-spinner{width:34px;height:34px;border-radius:50%;border:3px solid #dde7ff;border-top-color:var(--pe-blue);animation:co-spin .8s linear infinite}
@keyframes co-spin{to{transform:rotate(360deg)}}
.co-result-msg{margin:0;font-size:15px;font-weight:800;color:var(--pe-navy)}
.co-result .co-error{margin-top:0}
@media (prefers-reduced-motion:reduce){.co-spinner{animation:none;border-top-color:#dde7ff}}