/* Ortak ödeme çekmecesi: public/odeme.js basar (<dialog class="odeme">).
   Değerler ankitus.css token'larından okunur. ankitus.css yüklemeyen sayfada (yan
   sayfalar) aynı değerler yerel yedekten gelir; yedekler tokens.json v1.5.0 ile aynıdır.
   Çekmece sayfanın .btn/.field kurallarına dayanmaz, kendi kapsamında tanımlar. */

/* --------------------------------------------------------------
   0. Token köprüsü: ankitus.css varsa onun değeri, yoksa yedek
   -------------------------------------------------------------- */
.odeme{
  --o-ink:var(--ink,#0B0B0B); --o-paper:var(--paper,#FBF8F3);
  --o-muted:var(--ink-muted,#474239); --o-subtle:var(--ink-subtle,#6F6960); --o-faint:var(--ink-faint,#9E968A);
  --o-hair:var(--hairline,#E4DDD1); --o-alt:var(--surface-alt,#F3EEE5);
  --o-blue:var(--blue,#00AFF0); --o-blue-050:var(--blue-050,#E7F5FB); --o-blue-700:var(--blue-700,#0077A8);
  --o-s1:var(--s1,4px); --o-s2:var(--s2,8px); --o-s3:var(--s3,12px); --o-s4:var(--s4,16px);
  --o-s5:var(--s5,24px); --o-s6:var(--s6,32px);
  --o-r-md:var(--r-md,12px); --o-r-lg:var(--r-lg,20px); --o-r-pill:var(--r-pill,999px);
  --o-sans:var(--sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif);
}

/* --------------------------------------------------------------
   1. Çekmece: mobilde alttan tam genişlik, genişte sağdan 420 px
   -------------------------------------------------------------- */
.odeme{border:0;padding:0;margin:auto 0 0;width:100%;max-width:100%;max-height:92dvh;
  background:var(--o-paper);color:var(--o-ink);font-family:var(--o-sans);font-size:1rem;line-height:1.5;
  border-radius:var(--o-r-lg) var(--o-r-lg) 0 0;box-shadow:0 -12px 48px rgba(11,11,11,.18);overflow:hidden}
.odeme[open]{display:flex;flex-direction:column}
.odeme::backdrop{background:rgba(11,11,11,.5)}
.odeme *,.odeme *::before,.odeme *::after{box-sizing:border-box}
.odeme__bas{display:flex;align-items:center;justify-content:space-between;gap:var(--o-s3);flex:none;
  padding:var(--o-s3) var(--o-s4);border-bottom:1px solid var(--o-hair)}
.odeme__bas h2{margin:0;font-size:1.25rem;font-weight:400;line-height:1.25;letter-spacing:0}
.odeme__kapat{border:1px solid var(--o-hair);border-radius:var(--o-r-pill);background:none;color:var(--o-ink);
  font:inherit;font-size:.875rem;cursor:pointer;padding:6px 16px;min-height:48px;min-width:48px}
.odeme__kapat:hover{border-color:var(--o-ink)}
.odeme__kapat[disabled]{opacity:.5;cursor:default}
.odeme__govde{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--o-s4) var(--o-s4) calc(var(--o-s5) + env(safe-area-inset-bottom))}
.odeme[aria-busy="true"] .odeme__govde{cursor:progress}
@media(min-width:1001px){
  .odeme{margin:0 0 0 auto;width:420px;height:100dvh;max-height:100dvh;border-radius:0;
    border-left:1px solid var(--o-hair);box-shadow:-12px 0 48px rgba(11,11,11,.18)}
  .odeme__bas{padding:var(--o-s4) var(--o-s5)}
  .odeme__govde{padding:var(--o-s5)}
}
/* Çekmece açıkken sağ alttaki iletişim düğmeleri düğmelerin üstüne binmesin. */
body:has(dialog.odeme[open]) #sos{display:none}

/* --------------------------------------------------------------
   2. Sipariş özeti
   -------------------------------------------------------------- */
.odeme__satirlar{list-style:none;margin:0 0 var(--o-s3);padding:0;display:grid;gap:var(--o-s2);font-size:.9375rem}
.odeme__satirlar li{display:flex;flex-direction:column}
.odeme__satirlar small{font-size:.8125rem;color:var(--o-subtle)}
.odeme__toplam{display:flex;justify-content:space-between;align-items:baseline;gap:var(--o-s4);
  padding-top:var(--o-s3);border-top:1px solid var(--o-hair);color:var(--o-subtle);font-size:.9375rem}
.odeme__toplam b{font-weight:400;font-size:1.375rem;color:var(--o-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.odeme__eski{margin-right:var(--o-s2);color:var(--o-faint);font-variant-numeric:tabular-nums}
.odeme__ekle{display:inline-flex;align-items:center;min-height:48px;margin-top:var(--o-s1);
  font-size:.9375rem;color:var(--o-blue-700);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* --------------------------------------------------------------
   3. Onay, düğmeler, alanlar
   -------------------------------------------------------------- */
.odeme__onay{display:flex;gap:var(--o-s3);align-items:flex-start;margin:var(--o-s4) 0 var(--o-s3);cursor:pointer;
  padding:var(--o-s2) 0}
.odeme__onay input{width:22px;height:22px;margin:1px 0 0;flex:0 0 22px;accent-color:var(--o-ink)}
.odeme__onay span{font-size:.8125rem;line-height:1.5;color:var(--o-muted)}
.odeme__onay a{color:var(--o-ink)}
.odeme__onay input[aria-invalid="true"]{outline:2px solid var(--o-blue-700);outline-offset:2px}

.odeme .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--o-s2);
  min-height:48px;padding:12px 20px;border-radius:var(--o-r-pill);border:1px solid transparent;
  font:inherit;font-size:1rem;font-weight:500;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
.odeme .btn--block{display:flex;width:100%}
.odeme .btn--cta{background:var(--o-blue);color:var(--o-ink);font-size:1.0625rem;box-shadow:0 1px 2px rgba(11,11,11,.10)}
.odeme .btn--primary{background:var(--o-ink);color:var(--o-paper)}
.odeme .btn--ghost{background:transparent;color:var(--o-ink);border-color:var(--o-hair)}
.odeme .btn--sm{min-height:48px;padding:8px 18px;font-size:.9375rem}
.odeme .btn[disabled]{cursor:progress;opacity:.72}
.odeme .btn:focus-visible,.odeme__kapat:focus-visible,.odeme__ekle:focus-visible{outline:2px solid var(--o-blue-700);outline-offset:2px}

.odeme__kart{margin-top:var(--o-s2)}
.odeme__not{margin:var(--o-s2) 0 0;font-size:.8125rem;line-height:1.5;color:var(--o-subtle)}
.odeme .err{margin:var(--o-s2) 0 0;font-size:.875rem;line-height:1.45;color:var(--o-blue-700)}
.odeme__hata{padding:var(--o-s3);border-radius:var(--o-r-md);background:var(--o-blue-050)}
.odeme [hidden]{display:none !important}

.odeme__havale{margin-top:var(--o-s5);padding-top:var(--o-s4);border-top:1px solid var(--o-hair)}
.odeme__havaleBtn{justify-content:space-between !important;gap:var(--o-s3)}
.odeme__etiket{font-size:.75rem;font-weight:400;color:var(--o-blue-700);white-space:nowrap}
.odeme__havaleBas{margin:0 0 var(--o-s3);font-size:1.0625rem;font-weight:500}
#odemeHavaleForm{margin-top:var(--o-s4)}
.odeme__alan{margin-bottom:var(--o-s4)}
.odeme__alan label{display:block;margin-bottom:6px;font-size:.875rem;color:var(--o-muted)}
.odeme__alan input{width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:1rem;
  color:var(--o-ink);background:var(--o-paper);border:1px solid var(--o-hair);border-radius:var(--o-r-md)}
.odeme__alan input:focus{outline:none;border-color:var(--o-ink)}
.odeme__alan input[aria-invalid="true"]{border-color:var(--o-blue-700)}
.odeme .tuzak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --------------------------------------------------------------
   4. IBAN ve ödeme alındı ekranları
   -------------------------------------------------------------- */
.odeme__tik{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--o-blue-050);color:var(--o-blue);margin-bottom:var(--o-s3)}
.odeme__alt{margin:0 0 var(--o-s2);font-size:1.25rem;font-weight:400;line-height:1.3}
.odeme__ana{margin:var(--o-s4) 0;padding:var(--o-s4) var(--o-s3);text-align:center;
  background:var(--o-alt);border:1px solid var(--o-hair);border-radius:var(--o-r-md)}
.odeme__lbl{margin:0 0 var(--o-s1);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--o-faint)}
.odeme__alici{margin:0 0 var(--o-s4);font-size:1.125rem;line-height:1.25}
/* IBAN tek satır: 4'lü gruplar, satıra sığacak boyda. Kırılmaz, yatay kaydırma açmaz. */
.odeme__iban{margin:0 0 var(--o-s3);white-space:nowrap;font-size:clamp(.875rem,4.1vw,1.375rem);
  line-height:1.3;letter-spacing:0;font-variant-numeric:tabular-nums}
.odeme__ana .btn[data-durum="ok"]{border-color:var(--o-ink)}
.odeme__kv{display:grid;gap:var(--o-s2);margin:var(--o-s4) 0;padding-top:var(--o-s4);border-top:1px solid var(--o-hair)}
.odeme__kv div{display:flex;justify-content:space-between;gap:var(--o-s4);flex-wrap:wrap;font-size:.9375rem}
.odeme__kv dt{margin:0;color:var(--o-subtle)}
.odeme__kv dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.odeme [data-o="iban"] > .btn,.odeme [data-o="beyanSonuc"],.odeme [data-o="odendiLisans"]{margin-top:var(--o-s4)}
.odeme [data-o="yeni"],.odeme [data-o="yeniKart"]{margin-top:var(--o-s4)}
/* Başlık ve mesaj yalnız programla odaklanır (ekran değişince); çerçeve gerekmez. */
.odeme [tabindex="-1"]:focus{outline:none}