/* Basvuru formu — SPLIT EKRAN, editoryel.
   Panelden ayri: panel ekip araci, bu satis yuzu. */

:root {
  --ink:      #2a2622;   /* sol kolon zemini */
  --paper:    #F3F2EE;   /* sag kolon zemini */
  --brand:    #7C2D3A;
  --text:     #24211e;
  --label:    #9a9992;
  --line:     #dedbd4;
  --white:    #ffffff;
  --err:      #b03a2e;
  --ok:       #2e7d4f;
  --focus:    #2f6fd0;
  --radius:   6px;
  --step-ms:  220ms;                /* 200-250 ms araligi */
  --serif:    "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Hareketi azalt: gecis TAMAMEN kapaniyor, kisaltilmiyor —
   kisaltmak vestibuler rahatsizligi cozmuyor. */
@media (prefers-reduced-motion: reduce) {
  :root { --step-ms: 0ms; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; top: 0; z-index: 30; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip:focus { left: 0; }
.muted { color: var(--label); }

/* ---------------- duzen: 272 / 680 ---------------- */

/* ⚠️ KURAL: MASAUSTUNDE FORM KAYDIRILMAZ. Her adim tek ekrana sigar.
   Bu yuzden yukseklik `min-height` DEGIL sabit: min-height olsaydi
   uzun bir adim sayfayi uzatir, sol kolon da onunla birlikte buyur
   ve tarayici kaydirma cubugu cikardi — tam olarak bu yasandi.
   Sigmayan adim CSS ile degil, ALANLARI IKI KOLONA BOLEREK cozulur
   (bak: .grid2, steps.js/details). Mobilde kural gecerli degil. */
.split {
  display: grid;
  grid-template-columns: 272px minmax(0, 680px);
  height: 100vh;
  height: 100dvh;          /* mobil tarayici cubugu icin */
  overflow: hidden;
  max-width: 952px;
  /* Genis ekranda ORTALANIYOR. Sola yaslandiginda sagda genis bos
     kagit kaliyor ve bu hata gibi okunuyor; ortalanmis koyu kolon
     bilincli bir kompozisyon gibi duruyor. */
  margin-inline: auto;
}

/* ---------------- sol kolon ---------------- */

.rail {
  position: relative;
  background: var(--ink);
  color: #efece7;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px 28px;
  overflow: hidden;
}
/* Urun gorseli buraya gelecek: background-image degistirilir,
   baska hicbir sey degismez. */
.rail-art {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 30% 15%, rgba(124, 45, 58, .30), transparent 60%),
    linear-gradient(180deg, #35302b 0%, #2a2622 55%, #211d1a 100%);
}
.rail-body { position: relative; }
.rail-logo { display: block; height: 24px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: .9; }
.rail-claim {
  font-family: var(--serif);
  font-size: 20px; line-height: 1.35; margin: 0;
  color: #e8e3dc;
}
/* Ikinci satir — sozu tamamliyor, onunla YARISMIYOR: sans, kucuk,
   soluk. Ayni boyutta olsaydi iki ayri iddia gibi okunurdu. */
.rail-sub {
  font-size: 13px; line-height: 1.5; margin: 7px 0 0;
  color: rgba(232, 227, 220, .72);
}

/* Yatay adim cubuklari */
.rail-steps {
  position: relative;
  list-style: none; display: flex; gap: 6px;
  margin: 26px 0 0; padding: 0;
}
.rail-bar {
  height: 3px; flex: 1; border-radius: 2px;
  background: rgba(255, 255, 255, .16);
  transition: background var(--step-ms) ease;
}
.rail-bar.done { background: rgba(255, 255, 255, .38); }
.rail-bar.on { background: var(--brand); }

/* ---------------- sag kolon ---------------- */

/* Icerik azsa DIKEY ORTALANIR, sayfa uzamaz.
   `safe center`: icerik yine de tasarsa ortalama BIRAKILIR ve ustten
   hizalanir — duz `center` tasma halinde ust kismi erisilemez yapiyor. */
.sheet {
  padding: 26px 48px;
  display: grid;
  /* ⚠️ minmax(0,1fr) SART. Grid ogesinin varsayilan `min-width: auto`'su
     kucultmeye izin vermiyor; adim seridi (5 panel yan yana) sutunu
     kendi genisligine acip YATAY kaydirma cikariyordu. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  align-content: safe center;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.sheet:focus { outline: none; }
.boot { padding: 40px 0; }

/* Dil ipucu seciciNIN USTUNDE duruyor; taban hizasi yerine alt hiza,
   yoksa "KROK 01 / 05" ipucu satiriyla hizalanip kayik duruyor. */
.sheet-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 6px; }

/* "KROK 02 / 04" */
.kicker {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--label); margin: 0; font-weight: 600;
}
.lang select {
  font: inherit; font-size: 12px; color: var(--label);
  background: transparent; border: 0; padding: 2px 4px; cursor: pointer;
}
.lang select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.progress { height: 0; margin: 0; }   /* gorsel ilerleme solda; bu yalnizca a11y */

/* ---------------- adim seridi ---------------- */

.viewport { overflow: hidden; margin-top: 18px; }
.track {
  display: flex; align-items: flex-start;
  transition: transform var(--step-ms) cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.panel { flex: 0 0 100%; min-width: 100%; padding: 2px; }
.panel[inert] { height: 0; overflow: hidden; }

.panel-title { font-family: var(--serif); font-size: 30px; line-height: 1.2; margin: 0 0 8px; font-weight: 500; }
.panel-lede { color: #6e6a63; margin: 0 0 18px; font-size: 14px; }

/* ---------------- alanlar ---------------- */

.field { margin-bottom: 20px; }
.flabel {
  display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--label); font-weight: 600; margin-bottom: 7px;
}
.hint { font-size: 12px; color: #85817a; margin: 7px 0 0; }
.err { font-size: 12px; color: var(--err); margin: 7px 0 0; font-weight: 500; }

.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=url], .field select, .field textarea,
.sub input, .sub textarea {
  width: 100%; padding: 12px 13px; font: inherit;
  background: var(--white); color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 120ms, box-shadow 120ms;
}
.field textarea, .sub textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus,
.sub input:focus, .sub textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(124, 45, 58, .10);
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; }
.locked { background: #f7f6f3; color: #57534d; cursor: default; }

.taxrow { display: flex; gap: 8px; align-items: stretch; }
.taxrow input { flex: 1; min-width: 0; }

/* Iki kolonlu adim (3. adim). `span` steps.js'te tanimli — dogrulama
   ve sekme sirasi degismiyor, yalnizca yerlesim. */
/* ⚠️ SATIR ARASI 14px, sutun arasi 20px. Alanlar `margin-bottom` ile
   degil grid `row-gap` ile ayriliyor; "numaram yok" yolunda dort alan
   alt alta gelince 20px'lik satir araligi tek basina 60px tutuyordu. */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 14px; }
.g-half { grid-column: span 1; }
.g-full { grid-column: 1 / -1; }
/* Sevkiyat adresi TEK SATIR: sokak / kod / sehir / not.
   Uc-dort satir halinde 3. adimi ekran disina itiyordu. */
.subfields { display: grid; grid-template-columns: 2fr 1fr 1.3fr 1.8fr; gap: 10px 12px; margin-top: 10px; }
.sub.full { grid-column: 1 / -1; }
/* Etiket iki satira sararsa (PL "KOD POCZTOWY") kutular kayiyordu.
   `end` hizasi kutulari ayni cizgide tutuyor; harf araligi da
   kisilmis ki cogu dilde tek satirda kalsin. */
.subfields { align-items: end; }
.sub .flabel { margin-bottom: 5px; letter-spacing: .05em; }

/* Satis kanallari: kutu listesi DEGIL, saran rozetler. Bes secenek
   tek kolonda 5 satir x 44px yer kapliyordu ve 3. adimi tek basina
   ekran disina itiyordu. Etiketler kisa, rozet bicimi yeterli. */
.choices { display: flex; flex-wrap: wrap; gap: 7px; }
.choice {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; background: var(--white);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; font-size: 14px;
  transition: border-color 120ms, background 120ms;
}
.choice:hover { border-color: #c9c4bb; }
.choice:has(input:checked) { border-color: var(--brand); background: #fbf6f6; }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.choice input { margin: 0; flex: none; accent-color: var(--brand); }

.field-box { margin-bottom: 14px; }
.boxline { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.boxline input { margin: 3px 0 0; flex: none; accent-color: var(--brand); }
.boxlink { display: inline-block; margin: 5px 0 0 26px; font-size: 12px; color: #85817a; }

/* Metin gorunumlu buton — "elle duzelt", "numaram yok" */
.linkish {
  display: inline-block; margin-top: 4px; padding: 4px 0;
  background: none; border: 0; font: inherit; font-size: 13px;
  color: var(--brand); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- Dokunma hedefi 44 px (13.09.2026) ---
   🔴 Olculdu: cip 35 px, `linkish` 29 px, dil secici 32 px.
   ⚠️ GORSEL BOYUT DEGISMIYOR — `::after` ile gorunmez dikey
   vurus alani. Dolgu buyutmek cipleri gorsel olarak sisirirdi.
   ⚠️ Yalnizca DIKEY genisletme: cipler tek satirda yan yana,
   yatay genisletme komsunun tikini calardi. */
.chipbtn, .linkish, .lp-trigger { position: relative; }

.chipbtn::after,
.linkish::after,
.lp-trigger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* ---------------- sicil karti ---------------- */

.reg {
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius); padding: 16px 18px; margin: -6px 0 20px;
}
.reg-soft { border-left-color: #c9c4bb; }
.reg-head { display: flex; gap: 10px; align-items: flex-start; }
.reg-tick { color: var(--ok); font-weight: 700; line-height: 1.3; }
/* Firma adi serif ve IKI SATIRA sigar — Polonya unvanlari uzun */
.reg-name { font-family: var(--serif); font-size: 18px; line-height: 1.3; }
.reg-addr { margin: 8px 0 0; font-size: 13px; color: #6e6a63; }
.reg-note { margin: 8px 0 0; font-size: 13px; color: #6e6a63; }
.reg-echo { margin: 8px 0 0; font-size: 13px; color: #85817a; }
/* "Sprawdzamy polski rejestr GUS" — hangi sicile bakildigi.
   Dil seciciyle karistirilmasin diye adiyla yaziyor. */
.reg-which {
  margin: -12px 0 18px; font-size: 12px; color: #85817a;
  display: flex; align-items: center; gap: 7px;
}
.reg-which::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); flex: none; opacity: .55;
}
.reg-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.chip {
  font-size: 11px; letter-spacing: .04em; padding: 4px 9px;
  border-radius: 999px; background: #f0eeea; color: #57534d; border: 1px solid var(--line);
}
.chip-ok { background: #eef6f1; color: var(--ok); border-color: #cfe6da; }
.chip-src { background: #fbf6f6; color: var(--brand); border-color: #e7d5d8; }
.chip-grey { background: #f0eeea; color: #6e6a63; }

.spinner {
  width: 20px; height: 20px; align-self: center; flex: none;
  border: 2px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* "Nie mam numeru" -> tek radyo sorusu; secenekler ALT ALTA */
.choices-col { flex-direction: column; align-items: stretch; gap: 6px; }
/* ⚠️ DIKEY RADYOLAR DAHA DAR. Uc secenek 40'ar piksellik satirlarda
   120px tutuyordu; "numaram yok" yolunda bunun ustune rozetler ve
   serbest metin alani da binince adim ekrana sigmiyordu (olculdu
   30.08.2026: 1920x911'de 76px tasma). Etiketler kisa, dolgu
   kirpilabilir — alan CIKARILMIYOR, ritim sikisiyor. */
.choices-col .choice {
  justify-content: flex-start; border-radius: var(--radius);
  padding: 6px 12px;
}

/* ---------------- mukerrer basvuru banti ----------------
   ⚠️ HATA DEGIL, UYARI. Kirmizi `.err` kullanilmiyor: kullanici yanlis
   bir sey yapmadi, sadece bu numarayla zaten basvurusu var. Vurgu
   kutusuyla (sol bordo cizgi) ayni aileden — e-postadaki karsiligiyla
   tutarli. */
.dup-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--white);
  border-left: 2px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px; line-height: 1.55; color: var(--text);
}

/* ---------------- satis kanali rozetleri ----------------
   ⚠️ YALNIZCA "numaram yok" yolunda gorunuyor (steps.js).

   Onay kutusu DEGIL, basilabilir rozet: yazi yazma yok, tiklama var.
   Gercek <button aria-pressed> kullaniliyor — <div>+click klavyeden
   ve ekran okuyucudan erisilemezdi.

   Gorunum `.choice` ile ayni aileden: ayni yuvarlaklik, ayni secili
   rengi. Iki farkli secim bicimi ayni ekranda birbirine benzemeli. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chipbtn {
  font: inherit; font-size: 14px;
  padding: 7px 12px; background: var(--white); color: inherit;
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.chipbtn:hover { border-color: #c9c4bb; }
/* ⚠️ SECILI DURUM RENKLE YETINMEZ. Kenarlik kalinlasiyor ve isaret
   ekleniyor: renk korlugunde yalnizca bordo zemin ayirt edilemez. */
.chipbtn.on {
  border-color: var(--brand); border-width: 2px; padding: 6px 11px;
  background: #fbf6f6; font-weight: 600;
}
.chipbtn.on::before { content: "✓ "; }
.chipbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ⚠️ RODO ONAY KUTUSU DEGIL. Aydinlatma metni bilgilendirmedir —
   isleme dayanagi RODO 6.1.b / 6.1.f, riza degil. Kullanicinin
   onaylayacagi bir sey yok; GORMESI lazim. */
.privacy-line { margin: 14px 0 0; font-size: 12px; color: #85817a; }
.privacy-line a { color: var(--brand); text-underline-offset: 3px; }

/* ---------------- OTP ---------------- */

.otp { margin-top: -4px; }
.otp-sent { margin: 0 0 12px; font-size: 13px; color: #6e6a63; }

.otp-row { display: flex; align-items: center; gap: 10px; }
/* Alti hane, genis harf araligi — kod okunurken sayilabilsin.
   ⚠️ Secici `.otp-row .otp-input`: tek sinif `.field input[type=text]`
   kuralindan daha dusuk ozgullukte kaliyor ve `width:100%` kazaniyordu. */
.otp-row .otp-input {
  width: 190px; flex: none;
  font-size: 22px; letter-spacing: .34em; text-align: center;
  padding: 10px 12px 10px 18px;   /* sagdaki harf araligi bosluğunu dengeler */
}
.otp-row .otp-input::placeholder { letter-spacing: .28em; color: #cfcbc4; }

.otp-foot {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 10px;
}
.otp-foot .linkish { margin-top: 0; }
.otp-foot .linkish:disabled {
  color: var(--label); text-decoration: none; cursor: default;
  font-variant-numeric: tabular-nums;   /* sayac zipsamasin */
}
.otp-spam { font-size: 12px; color: #85817a; }

.otp-ok {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-radius: var(--radius);
  background: #eef6f1; border: 1px solid #cfe6da; color: var(--ok);
  font-size: 14px; font-weight: 600;
}
.otp-tick { font-weight: 700; }
.otp-send { margin-top: 2px; }

/* --- Kod gonder: buyuk dugme + aciklama satiri (13.09.2026) ---
   ⚠️ Dugme oncesinde `.btn.small` idi (13px, 0 16px dolgu) ve
   dokunmatikte 44 px'lik erisim hedefinin altinda kaliyordu. */
.otp-note {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #57534d;
}

.btn.otp-send {
  min-height: 48px;
  padding: 0 26px;
  font-size: 15px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
}

.btn.otp-send:hover:not(:disabled) { background: #3b3530; }

/* Istege bagli onay — zorunlu ucuyle ayni agirlikta gorunmesin */
.field-optional { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.field-optional .boxline { color: #6e6a63; font-size: 13px; }

/* ---------------- pazarlama izinleri ---------------- */
/* ⚠️ ZORUNLU ONAYDAN GORSEL OLARAK AYRI. Ayni blokta dursalardi
   "hepsini isaretle" refleksi olusur ve RODO acisindan riza
   gecersiz olurdu. */
.mkt {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.mkt-head { margin: 0 0 10px; font-size: 13px; color: #6e6a63; }
.mkt-row { gap: 8px; }
.mkt-row .choice { font-size: 13px; padding: 7px 13px; }
.mkt-foot { margin-top: 9px; }

.err-block {
  margin: 6px 0 0; padding: 11px 13px;
  background: #fdf2f0; border: 1px solid #f0d5d0; border-radius: var(--radius);
}

/* ---------------- basari ekrani ---------------- */

.done { max-width: 520px; }
.done:focus { outline: none; }
.done-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 14px;
  border-radius: 50%; background: #eef6f1; color: var(--ok);
  font-weight: 700; font-size: 17px;
}
/* Basvuru numarasi IKINCIL — giris adresinin altinda, kucuk. */
.done-ref { margin: 18px 0 4px; font-size: 12px; color: #85817a; }

/* ⚠️ EKRANIN TEK ISI BU KUTU. Yeni Shopify hesap sisteminde giris
   sifreyle degil, bu adrese giden kodla yapiliyor — baska adresle
   giren partner hesabini bulamaz. Bu yuzden buyuk ve net. */
.done-email {
  background: var(--white); border-left: 3px solid var(--brand);
  padding: 16px 18px; border-radius: var(--radius); margin: 4px 0 22px;
}
.done-email .flabel { margin-bottom: 6px; }
.done-addr {
  margin: 0 0 8px; font-family: var(--serif); font-size: 22px;
  line-height: 1.25; color: var(--head, #121211); word-break: break-word;
}
.done-nexthead { margin-bottom: 8px; }
.done-list { margin: 0 0 18px; padding-left: 20px; font-size: 14px; color: #4a4945; }
.done-list li { margin-bottom: 5px; }
.done-back { display: inline-block; margin-top: 8px; text-decoration: none; }

/* ---------------- butonlar ---------------- */

.nav { display: flex; gap: 10px; align-items: center; margin-top: 30px; }
.btn {
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 12px 26px; border-radius: 999px;   /* pill */
  border: 1px solid transparent; cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn.primary { background: var(--brand); color: #fff; margin-left: auto; }
.btn.primary:hover { background: #6a2632; }
.btn.ghost { background: transparent; border-color: var(--line); color: #57534d; }
.btn.ghost:hover { border-color: #c9c4bb; background: rgba(0, 0, 0, .02); }
.btn.small { padding: 0 16px; font-size: 13px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.btn.small:hover { background: #3b3530; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* "Bekliyor": buton DEVRE DISI DEGIL — tiklayinca eksik alan
   isaretleniyor. Devre disi buton nedenini soylemiyor. */
.btn.primary.waiting { background: #b58e96; }

.foot { font-size: 12px; margin-top: 32px; }

/* ---------------- kisa ekran: 1366x768 ----------------
   Dizustu standardi. 3. adim iki kolona bolunmus olsa da dikey ritim
   sikismazsa hala tasiyor. Olculere gore kirpiliyor, alan CIKARILMIYOR. */

/* ⚠️ ESIK 820 -> 1000. Olculdu 30.08.2026: 1920x1080 ekranda tarayici
   IC yuksekligi 911px cikiyor (sekme cubugu, adres cubugu, yer imleri
   ~170px goturuyor) ve eski 820 esigi HIC devreye girmiyordu. "Numaram
   yok" yolu radyo + rozet + serbest metin alaniyla buyuyunce o boyutta
   da tasiyordu. 1000, 1080p ve 1440p dizustulerin ikisini de kapsiyor;
   gercekten uzun ekranda (>1000px ic yukseklik) ipuclari akista kaliyor. */
@media (min-width: 821px) and (max-height: 1000px) {
  .sheet { padding: 20px 44px; }
  .viewport { margin-top: 8px; }
  .panel-title { font-size: 23px; margin-bottom: 5px; }
  .panel-lede { font-size: 13px; margin-bottom: 14px; }
  .field { margin-bottom: 12px; }
  .field input[type=text], .field input[type=email], .field input[type=tel],
  .field input[type=url], .field select, .sub input { padding: 9px 12px; }
  .choice { padding: 6px 11px; font-size: 13px; }
  .choices { gap: 6px; }
  /* "Numaram yok" yolu: dikey radyolar + rozetler + serbest metin. */
  .choices-col { gap: 5px; }
  .choices-col .choice { padding: 5px 11px; }
  .chips { gap: 5px; }
  .chipbtn { padding: 6px 11px; font-size: 13px; }
  .chipbtn.on { padding: 5px 10px; }
  .grid2 { row-gap: 10px; }
  .dup-note { padding: 8px 11px; font-size: 12px; margin-top: 8px; }
  .subfields { margin-top: 8px; gap: 8px 10px; }
  .nav { margin-top: 16px; }
  .btn { padding: 10px 24px; }
  .foot { margin-top: 10px; }
  .rail-claim { font-size: 18px; }

  /* ⚠️ IPUCLARI YER KAPLAMIYOR, KAYBOLMUYOR.
     Uc alanin ipucu ikişer satir; tek baslarina 135px tutup 3. adimi
     ekran disina itiyorlardi. Kisa ekranda akistan cikip odakta
     beliren kucuk bir nota donusuyorlar.
     `display:none` DEGIL `opacity:0` — gizlenen metin erisilebilirlik
     agacinda kaliyor ve aria-describedby ile okunuyor (apply.js). */
  .panel .field { position: relative; }
  .panel .field > .hint {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 4;
    margin: 4px 0 0; padding: 8px 11px;
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: 0 8px 20px rgba(0, 0, 0, .09);
    opacity: 0; pointer-events: none; transition: opacity 120ms;
  }
  .panel .field:focus-within > .hint { opacity: 1; }
  /* Kod alaninin ipucu AKISTA KALIYOR — "alti hane, 10 dakika
     gecerli" bilgisi odaktan bagimsiz gorunmeli. */
  .panel .otp > .hint { position: static; opacity: 1; padding: 0; border: 0; box-shadow: none; background: none; }

  /* Sevkiyat basligi ile "tescilli adresle ayni" kutusu AYNI SATIRDA.
     Alt alta 40px tutuyorlardi; kisa ekranda o 40px belirleyici. */
  .field-ship { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
  .field-ship > .flabel { margin-bottom: 0; }
  .field-ship > .subfields,
  .field-ship > .reg-echo,
  .field-ship > .hint,
  .field-ship > .err { grid-column: 1 / -1; }
}

/* ---------------- mobil: sol kolon uste 140px serit ---------------- */

@media (max-width: 820px) {
  /* ⚠️ Kaydirma kurali MASAUSTU ICIN. Mobilde sayfa normal akiyor. */
  .split { height: auto; min-height: 100dvh; overflow: visible; }
  .sheet { display: block; overflow: visible; }
  .grid2 { grid-template-columns: 1fr; }
  .grid2 .choices { grid-template-columns: 1fr; }
  .lang-hint { text-align: right; }
  /* ⚠️ `minmax(0, 1fr)` — DUZ `1fr` DEGIL. Olculdu 30.08.2026, CDP ile
     gercek mobil viewport'ta: duz `1fr` iken sutunun otomatik en kucuk
     boyu ogenin MIN-CONTENT'i oluyor ve `.sheet` (min-width: auto)
     sutunu 368.28px'e aciyordu — 360px telefonda +8px, 320px'te +48px
     YATAY KAYDIRMA. Sebep `.viewport` icindeki `.track`: uc panel yan
     yana duruyor, yani icerigin dogal genisligi ~3x sayfa. `.viewport`
     bunu `overflow: hidden` ile KIRPIYOR ama dogal genisligin yukari
     SIZMASINI engellemiyor — kirpma ile intrinsic boyut ayri seyler.
     Ayni tuzak masaustunde zaten yakalanmisti (bak: `.sheet` icindeki
     grid tanimi); bu medya sorgusu `.sheet`i `display: block` yapip o
     korumayi geri aliyordu. `.rail` masum: olculdu, tek basina hicbir
     seyi degistirmiyor (masaustunde sutunu 272px sabit).
     ⚠️ `html, body { overflow-x: hidden }` YAMA OLURDU: tasmayi gizler,
     tasiran ogeyi birakir. */
  .split { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .rail {
    height: 140px; min-height: 140px;
    padding: 18px 20px; justify-content: flex-end;
  }
  .rail-logo { height: 20px; margin-bottom: 10px; }
  .rail-claim { font-size: 15px; }
  .rail-steps { margin-top: 14px; }
  .sheet { padding: 26px 20px 48px; }
  .panel-title { font-size: 24px; }
  .subfields { grid-template-columns: 1fr; }
  /* Dokunma hedefi kucultulmuyor */
  .btn { padding: 13px 24px; }
}

/* ---------------- dil secici ----------------
   Sag kolonun ustunde, saga yasli. ADIM DEGIL. */

.lp { position: relative; }

/* "Language of this form" — secili dilde. Secici bir FORM ADIMI
   sanilmasin diye ne oldugu yaziyor; ulke secimi ayri bir soru. */
.lang-hint {
  margin: 0 0 3px; text-align: right;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--label); font-weight: 600;
}

.lp-trigger {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 2px 0 5px;
  font: inherit; cursor: pointer; color: var(--text);
  border-bottom: 1px solid var(--line);          /* altinda ince cizgi */
  transition: border-color 160ms;
}
.lp-trigger:hover { border-bottom-color: var(--brand); }
.lp-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.lp-name { font-family: var(--serif); font-size: 15px; }
.lp-caret {
  width: 0; height: 0; margin-left: 2px;
  border: 4px solid transparent; border-top-color: var(--label);
  transition: transform 200ms ease;
}
.lp-open .lp-caret { transform: rotate(180deg) translateY(3px); }

.lp-flagslot { display: inline-flex; flex: none; }
.flag { display: block; border-radius: 1px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); }

/* Panel: yukseklik animasyonu, 440ms */
.lp-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 20;
  min-width: 300px; overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 12px 34px rgba(0, 0, 0, .10);
  transition: height 440ms cubic-bezier(.22, 1, .36, 1);
}
.lp-head {
  margin: 0; padding: 14px 16px 10px;
  font-size: 10px; letter-spacing: 2px; color: var(--label); font-weight: 600;
  border-bottom: 1px solid var(--line);
}

/* Iki kolonlu dizin */
/* ⛔ KAYDIRMA PANELE DEGIL LISTEYE: arama kutusu ve baslik
   kaydirmanin USTUNDE sabit kalsin. Olculdu 07.09.2026 — 31 dilde
   panel 637 px oluyordu, ekrana sigmiyordu ve TASAN KISMA
   ULASILAMIYORDU (sayfa yuksekligi buyumuyor, panel overflow:hidden).
   Masaustunde 3 dil, 390 px'te ~18 dil SECILEMIYORDU. */
.lp-list {
  list-style: none; margin: 0; padding: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px 6px;
  max-height: min(60vh, 420px); overflow-y: auto;
  overscroll-behavior: contain;                  /* sayfa arkadan kaymasin */
}

/* Arama — panel acilinca odakli gelir (dokunmatikte GELMEZ: klavye
   listeyi ortuyor). Kutu bir KAPI degil; yazmak istemeyen listeye
   dogrudan tiklar. */
.lp-searchwrap { padding: 8px 8px 0; }
.lp-search {
  width: 100%; box-sizing: border-box;
  padding: 7px 9px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--white);
  border: 1px solid var(--line); border-radius: 4px;
}
.lp-search::placeholder { color: var(--label); }
.lp-search:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.lp-empty {
  margin: 0; padding: 10px 17px 14px;
  font-size: 13px; color: var(--label);
}

.lp-row {
  display: grid; grid-template-columns: 14px 22px auto 1fr 12px;
  align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: 4px; cursor: pointer;
  /* Satirlar 32 ms arayla beliriyor — gecikme JS'te veriliyor */
  opacity: 0; transform: translateY(10px);
  transition: opacity 300ms ease, transform 300ms ease, background 140ms;
}
.lp-rows-in .lp-row { opacity: 1; transform: none; }
.lp-row:hover { background: #faf8f6; }
.lp-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Bordo cizgi: hover'da soldan girer, secilide sabit */
.lp-rule {
  width: 0; height: 1px; background: var(--brand);
  transition: width 200ms cubic-bezier(.22, 1, .36, 1);
}
.lp-row:hover .lp-rule, .lp-row:focus-visible .lp-rule { width: 14px; }
/* ⛔ SECILIDE CIKMAZ (07.09.2026). Ekranda gorulду: ayni "—"
   hem secili satirda hem imlecin ustundeki satirda vardi, yani
   IKI ANLAMA geliyordu. Bugun tek anlami var: IMLEC BURADA.
   Secilinin kendi isaretleri ayri: ✓ + kalinlik + bordo kod. */

.lp-code {
  font-size: 10px; letter-spacing: 1.5px; color: var(--label);
  font-weight: 600; transition: color 160ms;
}
/* ⛔ Bordo kod da AYNI SINIFTAN: hover'dan alindi, yalnizca
   secilide kaliyor — bir KIMLIK isareti, imlec izi degil. */
.lp-row.on .lp-code { color: var(--brand); }

.lp-lname {
  font-family: var(--serif); font-size: 16px; line-height: 1.2;
  transition: transform 200ms cubic-bezier(.22, 1, .36, 1);
}
.lp-row:hover .lp-lname { transform: translateX(3px); }

.lp-row .flag { transition: transform 200ms ease, box-shadow 160ms; }
.lp-row:hover .flag { transform: scale(1.12); }
/* Secili: bayrak cevresinde bordo halka */
.lp-row.on .flag { box-shadow: 0 0 0 1px var(--brand); }

/* ⛔ SECILI ile HOVER 07.09.2026'ya kadar BIREBIR AYNIYDI: `:hover`
   ve `.on` ayni `.lp-rule` genisligini ve ayni `.lp-code` rengini
   aliyordu; ayirt edici yalnizca bayragin 1 px halkasiydi.
   Tik HOVER'DA CIKMAZ — kalici bir isaret. Yeni renk YOK. */
.lp-tick {
  font-size: 12px; line-height: 1; text-align: right;
  color: var(--brand);
}
.lp-row.on .lp-lname { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .lp-panel, .lp-row, .lp-rule, .lp-lname, .lp-caret, .lp-row .flag { transition: none !important; }
  .lp-row { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  .lp-panel { min-width: 260px; }
  /* Dar ekranda tek kolon — ve tam da bu yuzden kaydirma SART:
     31 satir tek kolonda ~1180 px eder, telefon ekrani 844 px. */
  .lp-list { grid-template-columns: 1fr; max-height: min(52vh, 360px); }
}

/* ---- Zorunlu kutular ve pazarlama listesi (31.08.2026) ----
   Kutu metinleri artik tam cumle (hukuki paket doc 03). Yatay cip
   sirasi ilk kelimeden sonrasini kirpiyordu; dikey listeye gecti. */
.boxbody { display: block; }
.boxmeta {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: .7;
}
/* ---------------- pazarlama izni: UC KANAL KARTI (01.09.2026) ----
 *
 * ⛔ KART BIR BUTON DEGIL. Isaretleyen sey gercek
 * `<input type="checkbox">`; gorsel olarak gizli ama ODAKLANABILIR.
 * Durum `:checked` ile ciziliyor — JS durum TUTMUYOR.
 *
 * ⚠️ `display: none` ya da `visibility: hidden` KULLANILMIYOR: ikisi
 * de girdiyi odak sirasindan cikarir ve Tab ile ulasilamaz olur.
 * Girdi 1x1 px, seffaf, kartin sol ust kosesinde duruyor.
 */
.mkt-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.mkt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: #6e6a63;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--step-ms), background var(--step-ms), color var(--step-ms);
  /* Secili kartta cerceve 2px oluyor; kaymayi onlemek icin fark
     ic golgeyle kapatiliyor, kutu boyutu sabit kaliyor. */
  box-shadow: inset 0 0 0 0 transparent;
}
.mkt-card:hover { border-color: #c9c5bc; }

/* Girdi: gorunmez ama ODAK ALABILIR. */
.mkt-card__input {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.mkt-card__icon { width: 26px; height: 26px; display: block; }
.mkt-card__name { font-size: 14px; line-height: 1.2; color: var(--text); }
.mkt-card__hint { font-size: 12px; line-height: 1.2; color: #8b877f; }

/* Durum etiketi: ikisi de cizili, biri gizli. */
.mkt-card__hint--on { display: none; }
.mkt-card:has(.mkt-card__input:checked) .mkt-card__hint--off { display: none; }
.mkt-card:has(.mkt-card__input:checked) .mkt-card__hint--on { display: block; color: var(--brand); }

/* SECILI: 2px bordo cerceve, acik bordo zemin, bordo ikon. */
.mkt-card:has(.mkt-card__input:checked) {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  background: #faf4f5;
  color: var(--brand);
}
.mkt-card:has(.mkt-card__input:checked) .mkt-card__name { color: var(--brand); }

/* ODAK: gorunur halka, NOTR renk — secili olmakla karismasin. */
.mkt-card:has(.mkt-card__input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ⚠️ `:has()` DESTEKLEMEYEN TARAYICI ICIN YEDEK. Kart yine calisir
   (girdi gercek), yalnizca secili gorunumu cikmaz — kutu isaretli
   kalir ve gonderim dogru olur. Bu yuzden durum etiketi metinle de
   veriliyor, tek basina renkle degil. */

/* Riza cumlesi — kartlarin ALTINDA, gorunur. */
.mkt-consent {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6e6a63;
}

.mkt-lead { margin: 0 0 12px; font-size: 13px; color: #6e6a63; }

/* MOBIL: tek sutun. */
@media (max-width: 560px) {
  .mkt-cards { grid-template-columns: 1fr; gap: 8px; }
  .mkt-card { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; text-align: left; }
  .mkt-card__hint { margin-left: auto; }
}

/* Kaynak surum satiri — zorunlu kutularin altinda, pazarlamadan once. */
.source-note { margin: 4px 0 14px; opacity: .75; }