:root{
  --orange:#F5A623;
  --dark:#222;
  --muted:#666;
  --bg:#fff;
  --card:#ffffff;
  --border:#e7e7e7;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--dark)}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:#fff}
.brand{display:flex;gap:10px;align-items:center}
.logo{width:44px;height:44px;object-fit:contain}
/* .brandName/.brandTag YERİNİ .markaGorsel/.markaAlt aldı — dosyanın sonundaki
   "MARKA" bölümüne bakın. Bu iki kural, eski işaretlemeyi taşıyan bir sayfa
   kalmışsa bozulmasın diye duruyor. */
.brandName{font-weight:800;letter-spacing:.5px}
.brandTag{font-size:12px;color:var(--muted)}
.burger{font-size:22px;background:transparent;border:0;cursor:pointer}
.menu{display:none;position:absolute;right:10px;top:60px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.menu.open{display:block}
.menu a{display:block;padding:10px 10px;border-radius:10px;color:var(--dark);text-decoration:none}
.menu a:hover{background:#fafafa}
.container{max-width:980px;margin:0 auto;padding:16px}
.h1{font-size:22px;margin:8px 0 2px 0}
.sub{color:var(--muted);margin:0 0 14px 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--border);border-radius:16px;background:var(--card);padding:14px}
.card h2{font-size:15px;margin:0 0 10px 0}
.label{font-size:12px;color:var(--muted);margin-bottom:6px}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;font-size:14px}
textarea{min-height:80px;resize:vertical}
.row{display:flex;gap:12px}
.row > div{flex:1}
.badge{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:999px;padding:8px 10px;color:var(--muted);font-size:13px}
.hr{height:1px;background:var(--border);margin:14px 0}
.btn{background:var(--orange);border:0;color:#111;font-weight:700;padding:12px 14px;border-radius:14px;cursor:pointer;width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.small{font-size:12px;color:var(--muted);line-height:1.4}
.check{display:flex;gap:10px;align-items:flex-start}
.check input{width:auto;margin-top:3px}
.kpi{display:flex;gap:10px;flex-wrap:wrap}
.kpi .pill{border:1px solid var(--border);border-radius:999px;padding:8px 10px}
.footer{padding:16px;text-align:center;color:var(--muted);border-top:1px solid var(--border)}
.notice{padding:12px;border:1px dashed var(--border);border-radius:14px;background:#fffaf0}
.topActions{display:flex;gap:10px;flex-wrap:wrap}
.topActions a{flex:1;text-align:center;text-decoration:none}
a.link{color:var(--dark)}
.status{font-weight:700}
.status.beklemede{color:#b36b00}
.status.alindi{color:#0b5}
.status.teslim{color:#06c}

.codeBox{display:flex;gap:10px;align-items:center}
.codeBox input{max-width:160px}
.btn.secondary{background:#fff;border:1px solid var(--border)}

.tiny{font-size:12px;opacity:.8;margin-top:6px;}
.badge{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:999px;background:#fff3e6;color:#b45309;font-size:12px;font-weight:700;}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}

/* Inline SVG ikonlar: metin rengini alır, satır içinde hizalı durur. */
.icon{flex:0 0 auto;display:inline-block;vertical-align:-.15em}
.pill,.kpi .pill{display:inline-flex;gap:6px;align-items:center}
.topActions a{display:inline-flex;gap:6px;align-items:center;justify-content:center}
.burger{display:inline-flex;align-items:center;padding:4px;color:var(--dark)}

/* Bir metin kutusunun yanında duran buton, kutuyu ezmesin. */
.btn.inline{width:auto;white-space:nowrap;flex:0 0 auto}

/* ==========================================================
   TESLİM NOKTALARI HARİTASI — kurye paneli
   ==========================================================
   Kuryenin işi adres değil KONUM: hangi noktalar birbirine yakın,
   hangisi uzakta. Sipariş kartlarındaki "Haritada Aç" bağlantısı
   her seferinde yeni sekme açıyor ve noktaları bir arada
   göstermiyordu.
   ========================================================== */
.mapCard{
  margin-top:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.mapHead{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.mapTitle{font-weight:800; font-size:16px; color:var(--dark)}
.mapSub{font-size:12.5px; color:var(--muted); margin-top:2px}

.mapLegend{display:flex; gap:14px; flex-wrap:wrap}
.mapLegend .lg{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--muted);
}
.mapLegend .dot{width:10px; height:10px; border-radius:50%; display:inline-block}
.mapLegend .dot.beklemede{background:#F5A623}
.mapLegend .dot.alindi{background:#2D7FF9}
.mapLegend .dot.teslim{background:#17A34A}

#teslimHarita{
  height:400px; width:100%;
  /* Yüklenirken beyaz boşluk yerine nötr bir zemin dursun. */
  background:#eef0f2;
}
@media (max-width:640px){ #teslimHarita{height:300px} }

/* İşaretçiler — Leaflet'in varsayılan mavi damlası yerine
   durumu RENKLE ve sırayı SAYIYLA veren yuvarlak rozet. */
.pin{
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  font:700 12px/1 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#fff; border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.pin.beklemede{background:#F5A623}
.pin.alindi{background:#2D7FF9}
.pin.teslim{background:#17A34A}
.pin.perpa{background:var(--dark); border-radius:8px}

/* Popup */
.leaflet-popup-content{margin:12px 14px; min-width:190px}
.pop .popNo{font-weight:800; font-size:15px; color:var(--dark)}
.pop .popDurum{
  display:inline-block; margin:4px 0 8px;
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:2px 8px; border-radius:999px;
}
.pop .popDurum.beklemede{background:#FDF0D8; color:#8A5B00}
.pop .popDurum.alindi{background:#E4EEFF; color:#12459E}
.pop .popDurum.teslim{background:#DEF5E6; color:#0B6B33}
.pop .popAdres{font-size:13.5px; color:var(--dark); line-height:1.5}
.pop .popSatir{font-size:12.5px; color:var(--muted); margin-top:3px}
.pop .popYol{
  display:inline-block; margin-top:10px;
  background:var(--orange); color:#fff; text-decoration:none;
  font-weight:700; font-size:12.5px;
  padding:8px 14px; border-radius:8px;
  min-height:36px; line-height:20px;
}

/* ==========================================================
   TEK EKRAN TALEP SİHİRBAZI — index
   ==========================================================
   Önceki hâli iki sütunlu, ekrana sığmayan tek uzun formdu.
   Kullanıcı en başta 17 alanla karşılaşıyordu. Artık dört adım
   var ve her adım tek ekrana sığıyor.
   ========================================================== */
.wiz{
  display:flex; flex-direction:column;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}

/* ── Üst şerit ── */
.wizBar{border-bottom:1px solid var(--border); background:#fcfcfc}
.wizSteps{
  display:flex; gap:4px; padding:12px 14px 10px;
  overflow-x:auto; scrollbar-width:none;
}
.wizSteps::-webkit-scrollbar{display:none}
.ws{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; color:#9a9a9a;
  padding:6px 12px 6px 6px; border-radius:999px;
  white-space:nowrap; transition:color .2s, background .2s;
}
.ws i{
  display:grid; place-items:center;
  width:22px; height:22px; border-radius:50%;
  background:#ececec; color:#8a8a8a;
  font-style:normal; font-size:12px; font-weight:700;
  transition:background .2s, color .2s;
}
.ws.aktif{color:var(--dark); background:#FDF3E2}
.ws.aktif i{background:var(--orange); color:#fff}
/* Tamamlanan adım geride kalmasın: kullanıcı nerede olduğunu değil,
   NEREYE KADAR geldiğini de görmeli. */
.ws.bitti{color:#6b6b6b}
.ws.bitti i{background:#17A34A; color:#fff}

.wizProgress{height:3px; background:#eee}
.wizProgress span{
  display:block; height:100%; width:25%;
  background:var(--orange);
  transition:width .35s cubic-bezier(.4,0,.2,1);
}

/* ── Kayan adımlar ── */
/*
   KIRPMA KABI — taşınmayan.
   `overflow:hidden` şeridin kendisindeyken, şerit `translateX` ile kayınca
   kırpma kutusu da onunla kayıyor ve içerik çizilecek alanın dışında
   kalıyordu: 2. adım bomboş görünüyordu. Kırpma burada, kayma şeritte.

   `min-height:0` — flexbox tuzağı: `.wiz` bir column flex kabı, bu da onun
   esnek öğesi. Esnek öğelerin varsayılan `min-height:auto` değeri içeriğin
   altına inmeyi engeller; JS'in verdiği yükseklik yok sayılırdı.
*/
.wizGoruntu{
  overflow:hidden;
  min-height:0;
  transition:height .3s cubic-bezier(.4,0,.2,1);
}
.wizTrack{
  display:flex;
  align-items:flex-start;
  /* Kaydırma hissi: adımlar yan yana durur, biri diğerini iter. */
  transition:transform .38s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce){ .wizTrack,.wizGoruntu{transition:none} }

.wizStep{
  flex:0 0 100%; width:100%;
  padding:20px 18px 4px;
  /* Adımlar farklı yükseklikte; kısa olanlar uzun olanın boşluğunu
     doldurmasın diye içerik üstten hizalanır. */
  align-self:flex-start;
}
.wizHead{margin-bottom:16px}
.wizHead h2{margin:0; font-size:19px; font-weight:800; color:var(--dark)}
.wizHead p{margin:5px 0 0; font-size:13.5px; color:var(--muted); line-height:1.55}
.wizHead .sabit{
  display:inline-block; margin-left:6px; padding:1px 8px;
  border-radius:999px; background:#f0f0f0; color:#777;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}

/* ── Alanlar ── */
.wizAlan{margin-bottom:13px}
.wizAlan label{
  display:block; margin-bottom:6px;
  font-size:12.5px; font-weight:700; color:#555;
}
.wizAlan .ops{font-weight:500; color:#9a9a9a; margin-left:5px}
.wizAlan input, .wizAlan select, .wizAlan textarea{
  width:100%; box-sizing:border-box;
  padding:12px 13px; min-height:46px;
  border:1px solid var(--border); border-radius:10px;
  font:inherit; font-size:15px; color:var(--dark); background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.wizAlan textarea{resize:vertical; min-height:64px}
.wizAlan input:focus, .wizAlan select:focus, .wizAlan textarea:focus{
  outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(245,166,35,.16);
}
.wizAlan input[aria-invalid="true"]{border-color:#e04545; box-shadow:0 0 0 3px rgba(224,69,69,.12)}

.wizIkili{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.wizUclu{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
@media (max-width:560px){ .wizIkili,.wizUclu{grid-template-columns:1fr} }

/* ── Ödeme seçimi ── */
.wizSecim{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.wizSecim .sec{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 14px; cursor:pointer;
  border:1px solid var(--border); border-radius:10px;
  font-weight:700; font-size:14.5px; color:#555; background:#fff;
  transition:border-color .15s, background .15s, color .15s;
}
.wizSecim .sec input{accent-color:var(--orange); width:17px; height:17px}
.wizSecim .sec:has(input:checked){border-color:var(--orange); background:#FDF3E2; color:var(--dark)}

/* ── Harita ── */
#map{
  height:330px; border-radius:12px; overflow:hidden;
  border:1px solid var(--border); background:#eef0f2;
}
@media (max-width:640px){ #map{height:280px} }

/* ── Mesafe / ücret özeti ── */
.wizOzet{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:8px; margin-top:12px;
}
.wizOzet .oz{
  border:1px solid var(--border); border-radius:10px;
  padding:9px 11px; background:#fcfcfc;
}
/* Etiket taşmasın: "Mesafe ücreti" dar kutuda satırı aşıyordu.
   Kırpmak yerine SARMASINA izin veriliyor — bilgi kaybolmamalı. */
.wizOzet .oz span{
  display:block; font-size:11.5px; color:var(--muted); margin-bottom:3px;
  line-height:1.3; overflow-wrap:anywhere;
}
.wizOzet .oz{ min-width:0; }
.wizOzet .oz b{ overflow-wrap:anywhere; }
.wizOzet .oz b{font-size:15px; color:var(--dark)}
.wizOzet .oz.vurgu{background:#FDF3E2; border-color:#F3D9A8}
.wizOzet .oz.vurgu b{color:#8A5B00}

.wizNot{margin:12px 0 0; font-size:12px; color:var(--muted); line-height:1.6}

/* ── Onay adımı ── */
.wizKontrol{
  border:1px solid var(--border); border-radius:12px;
  overflow:hidden; margin-bottom:16px;
}
.wizKontrol .sat{
  display:flex; justify-content:space-between; gap:14px;
  padding:11px 14px; font-size:13.5px;
  border-bottom:1px solid #f2f2f2;
}
.wizKontrol .sat:last-child{border-bottom:0}
.wizKontrol .sat span{color:var(--muted); flex-shrink:0}
.wizKontrol .sat b{color:var(--dark); text-align:right; font-weight:600}
.wizKontrol .sat.vurgu{background:#FDF3E2}
.wizKontrol .sat.vurgu b{color:#8A5B00; font-weight:800}

.wizOnay{
  display:flex; gap:11px; align-items:flex-start;
  margin-bottom:12px; cursor:pointer;
  font-size:13px; color:#555; line-height:1.6;
}
.wizOnay input{margin-top:2px; width:18px; height:18px; accent-color:var(--orange); flex-shrink:0}

/* ── Alt çubuk ── */
.wizAlt{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px;
  border-top:1px solid var(--border); background:#fcfcfc;
}
.wizAltSag{display:flex; align-items:center; gap:12px; margin-left:auto}
.wizFiyat{font-size:15px; font-weight:800; color:var(--dark)}
/* Temel `.btn` sınıfı tam genişlik: alt çubukta "Geri" butonu
   satırı kaplıyordu. Burada genişlik içeriğe göre daralır. */
.wizAlt .btn{
  width:auto; min-height:46px; padding:0 24px;
  white-space:nowrap; flex:0 0 auto;
}
.wizFiyat{white-space:nowrap}
.wizAlt .btn[disabled]{opacity:.5; cursor:not-allowed}

/* Adım geçersizken uyarı */
.wizUyari{
  margin:0 18px 12px; padding:10px 13px;
  border-radius:10px; background:#FDECEC; border:1px solid #F5C2C2;
  color:#A32020; font-size:13px; font-weight:600;
}

/* ── Dükkan fotoğrafı seçici ── */

/* ── Kurye panelinde dükkan fotoğrafı ── */

/* ── Kurye profil fotoğrafı ve konum rızası ── */
.kuryeFotoOnizleme{display:flex; align-items:center; gap:12px; margin:8px 0}
.kuryeFotoOnizleme img{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  border:2px solid var(--border);
}
.konumRiza{
  display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  padding:12px 14px; border:1px solid var(--border); border-radius:10px;
  background:#fcfcfc; margin-top:10px;
}
.konumRiza input{margin-top:2px; width:18px; height:18px; accent-color:var(--orange); flex-shrink:0}
.konumRiza b{display:block; color:var(--dark); font-size:14px; margin-bottom:3px}
.konumRiza span{font-size:12.5px; color:var(--muted); line-height:1.6}
.konumRiza span b{display:inline; font-size:inherit}

/* ── Haritada kurye işaretçisi ── */
.mapLegend .dot.kurye{background:#7C3AED}
.kuryePin{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%;
  overflow:hidden; background:#7C3AED; color:#fff;
  border:3px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.32);
}
.kuryePin img{width:100%; height:100%; object-fit:cover; display:block}
.kuryePin .harf{font:700 15px/1 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
/* Bayat konum SOLUK ve kesik çerçeveli: haritaya bakan kişi bunun anlık
   olmadığını tek bakışta anlamalı. */
.kuryePin.bayat{opacity:.45; border-style:dashed; border-color:#cfcfcf}
/* Kendi konumu turuncu halkalı — kurye kendini hemen ayırt etsin. */
.kuryePin.ben{box-shadow:0 0 0 3px var(--orange), 0 3px 10px rgba(0,0,0,.32)}

/* ── Ana sayfa: sahadaki kuryeler ── */
/* `[hidden]` KURALI ÖNCE: Öznitelik `display:none` verir ama aşağıdaki
   `display:inline-flex` onu ezer — rozet gizlenmesi gerekirken BOŞ bir
   kabarcık olarak görünüyordu. Bu satır olmadan `hidden` işe yaramaz. */
.kuryeRozet[hidden]{display:none !important}
.kuryeRozet{
  display:inline-flex; align-items:center; gap:7px;
  margin-bottom:10px; padding:5px 12px;
  border-radius:999px; background:#F1ECFF; color:#5B21B6;
  font-size:12.5px; font-weight:700;
}
.kuryeRozet::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:#7C3AED; flex-shrink:0;
  animation:kuryeNabiz 2s ease-in-out infinite;
}
.kuryeRozet.yok{background:#f2f2f2; color:#777}
.kuryeRozet.yok::before{background:#bbb; animation:none}
@keyframes kuryeNabiz{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.45; transform:scale(.82)}
}
@media (prefers-reduced-motion: reduce){ .kuryeRozet::before{animation:none} }

/* Haritadaki kurye noktası — adsız, fotoğrafsız. */
.kuryeNokta{
  display:block; width:26px; height:26px; border-radius:50%;
  background:#7C3AED; border:3px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* ==========================================================
   BUTON SİSTEMİ — dokunma hassasiyeti ve geri bildirim
   ==========================================================
   ÖNCEKİ DURUM: `.btn` yalnızca renk, dolgu ve köşe veriyordu.
   Minimum yükseklik yoktu (küçük ekranda 40 px altına düşüyordu),
   üzerine gelince bir şey olmuyordu, basıldığında hiçbir geri
   bildirim yoktu ve klavyeyle gezerken odak görünmüyordu.
   Kullanıcı "bastım mı acaba" diye ikinci kez basıyordu.

   BU BLOK MERKEZİ: Sayfalara ayrı ayrı stil yazmak yerine tek
   yerden yönetiliyor; yeni bir sayfa `.btn` yazdığı anda doğru
   davranışı alıyor.
   ========================================================== */

/* Dokunmada tarayıcının kendi gri parlamasını kapatıyoruz —
   yerine kendi kontrollü geri bildirimimiz geliyor.
   NOT: `.wizFoto` seçicisi listeden çıkarıldı — sipariş fotoğrafı
   özelliği kaldırıldı. */
.btn, .pill.link, .badge, .topActions a, .lnk, a.link, .wizSecim .sec, .konumRiza {
  -webkit-tap-highlight-color: transparent;
}

.btn{
  /* 46px: parmakla rahat basılan en küçük ölçü 44px; kenarlıkla
     birlikte bunun altına düşmemesi için 46 seçildi. */
  min-height:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  /* Yazının değil, KUTUNUN tamamı tıklanabilir olmalı. */
  line-height:1.2;
  transition:background .14s ease, border-color .14s ease,
             transform .12s ease, box-shadow .14s ease;
  user-select:none;
  text-decoration:none;
}
.btn:hover:not(:disabled){background:#e0940f}
/* Basma anında hafif küçülme — abartısız, 120ms. */
.btn:active:not(:disabled){transform:scale(.97)}
.btn.secondary:hover:not(:disabled){background:#fafafa; border-color:#c9c9c9}

/* Klavye odağı GÖRÜNÜR: `:focus-visible` yalnızca klavyeyle
   gezildiğinde eşleşir, fareyle tıklayanı rahatsız etmez. */
.btn:focus-visible, .pill.link:focus-visible, .badge:focus-visible,
.topActions a:focus-visible, a.link:focus-visible, .lnk:focus-visible,
.wizSecim .sec:focus-within{
  outline:none;
  box-shadow:0 0 0 3px rgba(245,166,35,.45);
  border-radius:10px;
}

/* Devre dışı buton GERÇEKTEN işlem yapmasın. */
.btn:disabled, .btn[aria-disabled="true"]{
  opacity:.55; cursor:not-allowed; transform:none; pointer-events:none;
}

/* İkonlar tıklamayı yutmasın: butonun içindeki SVG'ye basmak
   butona basmak sayılmalı. */
.btn svg, .pill svg, .badge svg, .lnk svg{pointer-events:none}

/* ── Küçük tıklanabilirler ──
   Rozet ve hap biçimindeki bağlantılar görsel olarak küçük ama
   dokunma alanı küçük OLMAMALI. Görünen boyut korunuyor, dokunma
   alanı iç dolguyla büyütülüyor. */
.pill.link, .lnk, .topActions a, .badge[href]{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding-top:6px; padding-bottom:6px;
  cursor:pointer; text-decoration:none;
  transition:background .14s ease, color .14s ease, transform .12s ease;
}
.pill.link:hover, .lnk:hover, .topActions a:hover, .badge[href]:hover{background:#fff3e6}
.pill.link:active, .lnk:active, .topActions a:active, .badge[href]:active{transform:scale(.97)}

/* Yan yana butonlar arasında yanlış dokunmayı önleyecek boşluk. */
.row, .topActions, .codeBox{gap:12px}

/* ── Yıkıcı işlemler ayrı görünsün ──
   "Red" ve "Pasife Al" ile "Onay" aynı turuncu haptı; geri
   alınamayan bir işlem, güvenli olanla aynı görünmemeli. */
.btn.tehlike, button[value="Red"], button[value="pasif"]{
  background:#fff; border:1px solid #E5A3A3; color:#A32020;
}
.btn.tehlike:hover:not(:disabled),
button[value="Red"]:hover:not(:disabled),
button[value="pasif"]:hover:not(:disabled){background:#FDECEC; border-color:#D98A8A}

/* ── Gönderim sırasında ──
   Buton metni "Oluşturuluyor…" olduğunda dönen küçük gösterge. */
.btn[data-bekliyor="1"]::before{
  content:""; width:15px; height:15px; flex:0 0 auto;
  border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:btnDon .7s linear infinite;
}
@keyframes btnDon{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .btn, .pill.link, .lnk, .topActions a{transition:none}
  .btn:active:not(:disabled){transform:none}
  .btn[data-bekliyor="1"]::before{animation:none}
}

/* Alan altı hata mesajı */
.alanHata{
  margin:6px 0 0; font-size:12.5px; font-weight:600; color:#A32020;
  line-height:1.5;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]{
  border-color:#E05252 !important;
  box-shadow:0 0 0 3px rgba(224,82,82,.13);
}

/* ── Menü butonu ──
   30×30 idi; parmakla basmak için küçük. Görünen ikon aynı kaldı,
   dokunma alanı büyüdü. */
.burger{
  min-width:46px; min-height:46px;
  display:inline-grid; place-items:center;
  background:transparent; border:0; cursor:pointer;
  border-radius:10px; color:var(--dark);
  -webkit-tap-highlight-color:transparent;
  transition:background .14s ease, transform .12s ease;
}
.burger:hover{background:#f3f3f3}
.burger:active{transform:scale(.94)}
.burger:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(245,166,35,.45)}
.burger svg{pointer-events:none}

/* Menü bağlantıları da dokunulabilir olsun. */
.menu a{
  display:flex; align-items:center; min-height:46px;
  padding:0 14px; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.menu a:active{background:#f3f3f3}

/* ── Leaflet yakınlaştırma düğmeleri ──
   Kütüphanenin varsayılanı 30×30. Harita üzerinde en çok kullanılan
   kontrol bu; parmakla basılabilir olmalı. */
.leaflet-touch .leaflet-bar a,
.leaflet-bar a{
  width:44px !important; height:44px !important;
  line-height:44px !important; font-size:20px !important;
}

/* Başlık ikonu — uygulama simgesiyle aynı, tanınırlık için. */
.logo{
  width:40px !important; height:40px !important;
  border-radius:11px; object-fit:cover;
  background:transparent !important; border:0 !important;
  flex:0 0 auto;
}

/* ==========================================================
   KURYE PANELİ — TAM EKRAN HARİTA UYGULAMASI
   ==========================================================
   Kuryenin işi haritada geçiyor. Eski panel yukarıdan aşağı kayan
   bir belgeydi ve harita ortada bir kutuydu; kurye çalışırken
   sürekli kaydırıyordu. Artık harita EKRANIN ZEMİNİ, geri kalan
   her şey onun üstünde yüzüyor.

   Palet, mevcut marka turuncusundan türetildi; siyah sıcak tarafa
   kaydırıldı (#17130E) — nötr gri/siyah, turuncunun yanında soğuk
   ve tesadüfi duruyordu.
   ========================================================== */
:root{
  --uyg-murekkep:#17130E;
  --uyg-murekkep2:#7A7167;
  --uyg-hat:#EDE7DD;
  --uyg-musait:#12A150;
  --uyg-mesgul:#E5484D;
  --uyg-golge:0 6px 24px rgba(23,19,14,.14);
  --uyg-golge-yumusak:0 2px 10px rgba(23,19,14,.08);
  /* Çentikli telefonlarda içerik çentiğin altında kalmasın. */
  --uyg-ust:max(10px, env(safe-area-inset-top));
  --uyg-alt:max(10px, env(safe-area-inset-bottom));
}

/* Gövde kaydırmıyor: kaydırılan tek şey alt sayfanın içi. */
body.appGovde{margin:0;overflow:hidden;background:var(--uyg-murekkep);
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent}

.app{position:fixed;inset:0;overflow:hidden}
/* 100dvh: mobil tarayıcı çubuğu gizlenince 100vh taşma yapıyor. */
.appHarita{position:absolute;inset:0;height:100dvh;width:100%;background:#E9E4DA;z-index:0}
/* OPAKLIK KALDIRILDI. Bu seçici iki sınıf (0,2,0), genel atıf kuralı bir
   (0,1,0) — buradaki `opacity:.7` kurye panelinde atfı soluklaştırıyordu
   ve genel kural onu ezemiyordu. OpenStreetMap atfı lisans gereği okunur
   kalmalı; soluklaştırarak fiilen gizlemek kaldırmakla aynı şey. */
.appHarita .leaflet-control-attribution{font-size:10px}
/* Yakınlaştırma denetimi üst çubuğun ALTINDAN başlasın: çubuk yüzdüğü
   için varsayılan konumda "+" düğmesi tamamen kapalı kalıyordu. */
/* Yakınlaştırma SOLDA: sağda yüzen buton (.appFab) ile üst üste biniyordu —
   sayfa açıkken buton yukarı çıkıp "+" düğmesini tamamen kapatıyordu. */
.appHarita .leaflet-top.leaflet-left{top:calc(var(--uyg-ust) + 66px)}
.appHarita .leaflet-bottom{bottom:calc(122px + var(--uyg-alt))}

/* ── Üst çubuk ───────────────────────────────────────────── */
.appUst{
  position:absolute;z-index:20;left:10px;right:10px;top:var(--uyg-ust);
  display:flex;align-items:center;gap:10px;
  background:#fff;border-radius:16px;padding:8px 10px;box-shadow:var(--uyg-golge);
}
.appYuvarlak{
  flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:13px;background:var(--uyg-murekkep);color:#fff;cursor:pointer;
  transition:transform 140ms ease, background 140ms ease;
}
.appYuvarlak:active{transform:scale(.94)}
.appYuvarlak:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.appDurum{display:flex;align-items:center;gap:7px;min-width:0;flex:1;
  font-weight:700;font-size:15px;color:var(--uyg-murekkep)}
.appDurum span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.durumNokta{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--uyg-mesgul)}
.durumNokta.acik{background:var(--uyg-musait);
  /* Hafif hale: "canlı" olduğunu renkten başka bir işaretle de söyler. */
  box-shadow:0 0 0 3px rgba(18,161,80,.18)}

.appSag{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.appBugun{text-align:right;line-height:1.15}
.appBugunEt{display:block;font-size:11px;color:var(--uyg-murekkep2);letter-spacing:.03em}
.appBugun strong{font-size:13.5px;color:var(--uyg-murekkep);font-variant-numeric:tabular-nums}

.appAnahtar{
  flex:0 0 auto;width:52px;height:31px;border:0;border-radius:999px;padding:3px;
  background:#D9D2C6;cursor:pointer;position:relative;
  transition:background 160ms ease;
}
.appAnahtar.acik{background:var(--uyg-musait)}
.appAnahtar:disabled{opacity:.6;cursor:progress}
.appAnahtar:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.appAnahtarTopu{
  display:block;width:25px;height:25px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  transform:translateX(0);transition:transform 160ms ease;
}
.appAnahtar.acik .appAnahtarTopu{transform:translateX(21px)}

/* ── Bildiri şeridi ──────────────────────────────────────── */
.appBildiri{
  position:absolute;z-index:22;left:10px;right:10px;top:calc(var(--uyg-ust) + 68px);
  background:var(--uyg-murekkep);color:#fff;border-radius:13px;
  padding:11px 14px;font-size:14px;line-height:1.4;box-shadow:var(--uyg-golge);
  transition:opacity 300ms ease, transform 300ms ease;
}
.appBildiri.gizle{opacity:0;transform:translateY(-8px);pointer-events:none}

/* ── Yüzen buton ─────────────────────────────────────────── */
.appFab{
  position:absolute;z-index:15;right:14px;
  /* Alt sayfanın kapalı yüksekliğinin hemen üstünde durur. */
  bottom:calc(var(--uyg-alt) + var(--sayfaTepe, 122px) + 12px);
  width:52px;height:52px;border:0;border-radius:50%;
  background:var(--uyg-murekkep);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--uyg-golge);
  transition:transform 140ms ease, bottom 280ms cubic-bezier(.4,0,.2,1);
}
.appFab:active{transform:scale(.93)}
.appFab:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* Kardeş seçici (~) kullanılamaz: .appFab kaynakta .appSayfa'dan ÖNCE
   geliyor ve ~ yalnızca SONRAKİ kardeşleri seçiyor — kural hiç
   eşleşmiyordu. Kapsayıcıya sınıf verilerek sıra bağımlılığı kalktı. */
.app.sayfaAcik .appFab{bottom:calc(76dvh + 14px)}

/* ── Alt sayfa ───────────────────────────────────────────── */
.appSayfa{
  position:absolute;z-index:18;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;
  /* Kapalıyken yalnızca tutamak + özet görünür; harita açıkta kalır. */
  height:76dvh;
  /* Kapalı yükseklik İÇERİKTEN ölçülüyor (--sayfaTepe). Sabit 122 px
     verildiğinde özet iki satıra taştığında altındaki grup başlığı
     yarım görünüyordu — sayfa bitmemiş gibi duruyordu. */
  transform:translateY(calc(100% - var(--sayfaTepe, 122px) - var(--uyg-alt)));
  background:#fff;border-radius:22px 22px 0 0;
  box-shadow:0 -8px 30px rgba(23,19,14,.16);
  transition:transform 280ms cubic-bezier(.4,0,.2,1);
}
.appSayfa.acik{transform:translateY(0)}

.appTutamakAlan{
  /* Tıklanabilir alan tutamağın kendisinden büyük: 6 px'lik bir çubuğa
     parmakla isabet ettirmek zor. */
  display:block;width:100%;border:0;background:transparent;cursor:pointer;
  padding:12px 0 6px;min-height:34px;
}
.appTutamakAlan:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;border-radius:22px 22px 0 0}
.appTutamak{display:block;width:44px;height:5px;border-radius:999px;background:#D9D2C6;margin:0 auto}

.appOzet{
  display:flex;align-items:center;gap:12px;
  padding:2px 18px 14px;cursor:pointer;
  border-bottom:1px solid var(--uyg-hat);
}
.appOzetSol{flex:1;min-width:0}
.appOzetBaslik{font-size:17px;font-weight:700;color:var(--uyg-murekkep);line-height:1.25}
.appOzetAlt{font-size:13px;color:var(--uyg-murekkep2);margin-top:3px;line-height:1.4}
.appOzetOk{flex:0 0 auto;color:var(--uyg-murekkep2);transition:transform 280ms ease}
.appSayfa.acik .appOzetOk{transform:rotate(180deg)}

.appSayfaGovde{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:14px 14px calc(20px + var(--uyg-alt));
}

.appBos{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:44px 20px;color:var(--uyg-murekkep2);text-align:center;font-size:14.5px;
}

.appGrupBaslik{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--uyg-murekkep2);margin:6px 4px 10px;
}
.appGrupBaslik span{
  display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:999px;background:var(--uyg-hat);color:var(--uyg-murekkep);
  font-size:11px;letter-spacing:0;
}

/* ── İş kartı ────────────────────────────────────────────── */
.isKart{
  background:#fff;border:1px solid var(--uyg-hat);border-radius:16px;
  padding:14px;margin-bottom:12px;box-shadow:var(--uyg-golge-yumusak);
  /* Sol şerit durumu renkle kodluyor — rakamı okumadan görünsün. */
  border-left:4px solid var(--uyg-hat);
}
.isKart.beklemede{border-left-color:#E0A93A}
.isKart.alindi{border-left-color:#2C7BE5}
.isKart.teslim{border-left-color:var(--uyg-musait);opacity:.72}

.isUst{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.isNo{font-weight:800;font-size:15px;color:var(--uyg-murekkep);font-variant-numeric:tabular-nums}
.isUcret{margin-left:auto;font-weight:800;font-size:15px;color:var(--uyg-murekkep);font-variant-numeric:tabular-nums}
.isDurum{
  font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--uyg-hat);color:var(--uyg-murekkep2);
}
.isDurum.beklemede{background:#FDF1DC;color:#8A5A00}
.isDurum.alindi{background:#E6F0FD;color:#1B5FB8}
.isDurum.teslim{background:#E4F5EB;color:#0B7239}

/* Rota: iki nokta arası dikey çizgi — sıra görsel olarak da okunuyor. */
.isRota{position:relative;padding-left:22px}
/* Bağlayıcı çizgi NOKTALAR ARASINDA, kapsayıcı boyunca değil.
   Kapsayıcıya çizildiğinde son noktanın altında, adres metninin yanında
   sarkıyordu — devam eden bir durak varmış gibi görünüyordu. */
.isNokta{position:relative;padding-bottom:14px}
.isNokta:last-child{padding-bottom:0}
.isNokta:not(:last-child)::after{
  content:"";position:absolute;left:-16.5px;top:20px;bottom:2px;width:2px;
  background:repeating-linear-gradient(to bottom,var(--uyg-hat) 0 4px,transparent 4px 8px);
}
.isIsaret{position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius:50%;
  border:2.5px solid var(--orange);background:#fff}
.isNokta.birakis .isIsaret{border-color:var(--uyg-murekkep);background:var(--uyg-murekkep)}
.isEtiket{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--uyg-murekkep2)}
.isBaslik{font-size:15.5px;font-weight:700;color:var(--uyg-murekkep);margin-top:2px;line-height:1.3}
.isAlt{font-size:13.5px;color:var(--uyg-murekkep2);margin-top:2px;line-height:1.45}
.isNot{font-size:13px;color:var(--uyg-murekkep);background:#FBF8F2;border-radius:9px;
  padding:7px 9px;margin-top:6px;line-height:1.45}


.isVeri{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.isVeri span{
  font-size:12.5px;color:var(--uyg-murekkep2);
  background:#FAF7F1;border-radius:8px;padding:5px 9px;
}

.isYollar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.isForm{margin-top:12px;padding-top:12px;border-top:1px solid var(--uyg-hat)}
.isKodEtiket{display:block;font-size:12.5px;font-weight:700;color:var(--uyg-murekkep2);margin-bottom:6px}
.isKod{display:flex;gap:8px}
.isKod input{
  flex:1;min-width:0;width:auto;margin:0;
  font-size:19px;font-weight:700;letter-spacing:.28em;text-align:center;
  font-variant-numeric:tabular-nums;
}
.isKod .btn{width:auto;flex:0 0 auto;white-space:nowrap}
.isIpucu{font-size:12px;color:var(--uyg-murekkep2);margin-top:7px}
.isBitti{
  display:flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:#0B7239;
}

/* ── Buton çeşitleri ─────────────────────────────────────── */
.btn-sm{width:auto;min-height:38px;padding:8px 14px;font-size:13.5px;border-radius:11px}
.btn-tam{width:100%}
.btn-ikincil{background:#fff;border:1px solid var(--uyg-hat);color:var(--uyg-murekkep);
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* ── Çekmece menü ────────────────────────────────────────── */
.appPerde{
  position:absolute;inset:0;z-index:30;background:rgba(23,19,14,.42);
  opacity:0;transition:opacity 240ms ease;
}
.appPerde.acik{opacity:1}
.appPerde[hidden]{display:none !important}

.appMenu{
  position:absolute;z-index:31;left:0;right:0;bottom:0;
  max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border-radius:22px 22px 0 0;
  box-shadow:0 -8px 30px rgba(23,19,14,.2);
  padding:0 12px calc(16px + var(--uyg-alt));
  transform:translateY(100%);transition:transform 260ms cubic-bezier(.4,0,.2,1);
}
.appMenu.acik{transform:translateY(0)}
.appMenu[hidden]{display:none !important}

.menuKimlik{display:flex;align-items:center;gap:13px;padding:8px 8px 18px}
.menuFoto{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;object-fit:cover;
  background:var(--uyg-murekkep);display:inline-flex;align-items:center;justify-content:center;
}
.menuHarf{color:#fff;font-size:23px;font-weight:800}
.menuKimlikMetin{min-width:0}
.menuAd{font-size:18px;font-weight:700;color:var(--uyg-murekkep);line-height:1.25}
.menuRozet{
  display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:#FDF1DC;color:#8A5A00;
}
.menuRozet.onayli{background:#E4F5EB;color:#0B7239}

.menuSatir{
  display:flex;align-items:center;gap:13px;
  padding:13px 8px;min-height:56px;
  border-top:1px solid var(--uyg-hat);
  text-decoration:none;color:var(--uyg-murekkep);
  transition:background 130ms ease;border-radius:12px;
}
.menuSatir:active{background:#FAF7F1}
.menuSatir[hidden]{display:none !important}
.menuIkon{flex:0 0 auto;width:26px;display:inline-flex;justify-content:center;color:var(--uyg-murekkep)}
.menuMetin{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.menuBaslik{font-size:15.5px;font-weight:600;line-height:1.3}
.menuAlt{font-size:12.5px;color:var(--uyg-murekkep2);line-height:1.4}
.menuOk{flex:0 0 auto;color:#C8BFB1}
.menuBildirim .btn{flex:0 0 auto}
.menuCikis{color:var(--uyg-mesgul)}
.menuCikis .menuIkon{color:var(--uyg-mesgul)}

/* Geniş ekranda alt sayfa ve menü ortalanır — kenardan kenara uzamasın. */
@media (min-width:720px){
  .appSayfa,.appMenu{left:50%;right:auto;width:min(560px,94vw);transform:translateX(-50%) translateY(100%)}
  .appSayfa{transform:translateX(-50%) translateY(calc(100% - var(--sayfaTepe, 122px) - var(--uyg-alt)))}
  .appSayfa.acik,.appMenu.acik{transform:translateX(-50%) translateY(0)}
  .appUst{left:50%;transform:translateX(-50%);width:min(560px,94vw);right:auto}
  .appFab{right:max(14px,calc(50vw - 280px + 14px))}
}

@media (prefers-reduced-motion:reduce){
  .appSayfa,.appMenu,.appPerde,.appFab,.appAnahtarTopu,.appAnahtar,.appOzetOk,.appBildiri{transition:none}
}

/* ── Yönetici sipariş listesi ────────────────────────────────────── */
/* Etkin filtre: rengi değil, dolgusu değişiyor — renk körlüğünde de okunur. */
.pill.link.pillEtkin{background:var(--uyg-murekkep);color:#fff;border-color:var(--uyg-murekkep)}
.pill.link.pillEtkin strong{color:#fff}
.isTel{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Atanmamış kurye uyarısı: sessiz boşluk yerine görünür işaret. */
.isVeri span.isUyari{background:#FDECEC;color:#9B1C1C;font-weight:600}
.pill.pillIstatistik{border-style:dashed;color:var(--uyg-murekkep2);cursor:default}

/* ── Giriş ekranı ────────────────────────────────────────────────── */
/* Dikey ortalama: giriş kısa bir formdur, sayfanın tepesine yapışması
   ekranın geri kalanını boş bırakıyordu. */
.girisKap{display:flex;align-items:center;justify-content:center;
  min-height:calc(100dvh - 210px);padding:8px 0}
.girisKart{width:100%;max-width:400px;padding:22px}

.girisMarka{display:flex;align-items:center;gap:13px}
.girisMarka img{border-radius:13px;flex:0 0 auto}
.girisAd{font-size:19px;font-weight:800;letter-spacing:.01em;color:var(--uyg-murekkep);line-height:1.15}
.girisRol{font-size:13.5px;color:var(--uyg-murekkep2);margin-top:2px}
.girisAciklama{margin:14px 0 4px;font-size:14px}
.girisHata{margin-top:14px}
/* `<label>` satır içi bir element: dikey boşluk uygulanmıyordu ve alanlar
   birbirine yapışık çıkıyordu. Eski kodda `<div class="label">` vardı;
   erişilebilirlik için gerçek `<label>`e geçilince blok yapmak gerekti. */
.girisKart .label{display:block;margin-top:18px}
.girisAlt{margin-top:16px;text-align:center}

/* Şifre alanı + göster/gizle düğmesi */
.girisSifre{position:relative}
.girisSifre input{padding-right:52px}
.girisGoz{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--uyg-murekkep2);cursor:pointer;border-radius:11px;
  -webkit-tap-highlight-color:transparent;
}
.girisGoz svg{pointer-events:none}
.girisGoz:active{transform:translateY(-50%) scale(.92)}
.girisGoz.acik{color:var(--uyg-murekkep)}
.girisGoz:focus-visible{outline:3px solid var(--orange);outline-offset:-2px}
/* Açıkken göz üstü çizgili: durum yalnızca renkle anlatılmıyor. */
.girisGoz.acik::after{
  content:"";position:absolute;left:11px;right:11px;top:50%;height:2px;
  background:currentColor;transform:rotate(-45deg);border-radius:2px;
}

/* ── Sipariş takibi (müşteri) ────────────────────────────────────── */
.takipUst .takipBaslik{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.takipUst .h1{margin:0}
.takipUst .sub{margin:2px 0 0}

.takipHaritaKart{margin-top:12px;padding:0;overflow:hidden}
/* Yükseklik viewport'a göre: küçük telefonda harita sayfayı yutmamalı,
   büyük ekranda da posta pulu gibi kalmamalı. */
.takipHarita{height:clamp(220px,38dvh,360px);width:100%;background:#E9E4DA}
.takipHaritaAlt{padding:11px 14px;font-size:13px;color:var(--uyg-murekkep2);
  border-top:1px solid var(--uyg-hat);line-height:1.45}

/* Zaman çizelgesi */
.takipAdimlar{position:relative;margin-top:4px}
.takipAdim{position:relative;display:flex;gap:13px;padding:10px 0 10px 0}
.takipAdim:not(:last-child)::after{
  content:"";position:absolute;left:10px;top:32px;bottom:-2px;width:2px;background:var(--uyg-hat);
}
.takipAdim.tamam:not(:last-child)::after{background:var(--uyg-musait)}
.takipIsaret{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;margin-top:2px;
  border:2px solid var(--uyg-hat);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  position:relative;z-index:1;
}
.takipAdim.tamam .takipIsaret{background:var(--uyg-musait);border-color:var(--uyg-musait)}
.takipAdimMetin{min-width:0}
.takipAdimAd{font-size:15px;font-weight:600;color:var(--uyg-murekkep);line-height:1.3}
.takipAdim:not(.tamam) .takipAdimAd,
.takipAdim:not(.tamam) .takipAdimAlt{color:#A79D8E}
.takipAdim.simdi .takipAdimAd{font-weight:800}
.takipSimdi{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--orange);color:#2A1D05;border-radius:999px;padding:2px 8px;margin-left:6px;
  vertical-align:1px}
.takipAdimAlt{font-size:13px;color:var(--uyg-murekkep2);margin-top:2px;line-height:1.45}
.takipAdimZaman{font-size:12.5px;color:var(--uyg-murekkep2);margin-top:3px;
  font-variant-numeric:tabular-nums}

/* Teslim kodu — sayfanın en belirgin öğesi */
.takipKod{margin-top:12px;text-align:center;background:#FFFAF0;border-color:#F0D9A8}
.takipKodEtiket{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#8A5A00}
.takipKodDeger{font-size:38px;font-weight:900;letter-spacing:.22em;margin:6px 0 8px;
  color:var(--uyg-murekkep);font-variant-numeric:tabular-nums}
/* Kurye işaretçisi — harita lejantındaki diğerlerinden ayrık renk. */
.pin.kurye{background:#17130E;color:#fff;border-color:#fff}

/* ── Talep alındı (başarı) sayfası ───────────────────────────────── */
.basariUst{text-align:center}
.basariTik{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;margin-bottom:12px;
  background:#E4F5EB;color:#0B7239;
}
.basariUst .h1{margin:0}
.basariUst .sub{margin:4px 0 0}
.basariBaglanti{display:flex;gap:8px;margin-top:10px}
.basariBaglanti input{flex:1;min-width:0;font-size:13px;color:var(--uyg-murekkep2)}
.basariBaglanti .btn{flex:0 0 auto}

/* ── Yasaklı gönderi beyanı ──────────────────────────────────────── */
.yasakKutu{background:#FDF6EC;border:1px solid #EBD9B8;border-radius:12px;
  padding:14px 16px;margin:0 0 14px}
.yasakBas{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#8A5A00;margin-bottom:8px}
.yasakListe{margin:0;padding-left:18px;display:grid;gap:4px}
.yasakListe li{font-size:13.5px;color:var(--uyg-murekkep);line-height:1.45}
.yasakNot{margin:10px 0 0;font-size:12.5px;color:var(--uyg-murekkep2);line-height:1.45}

/* ── Kuryenin reddetme hakkı ─────────────────────────────────────── */
.isHak{margin:0 0 12px;font-size:13px;line-height:1.45;color:var(--uyg-murekkep2);
  background:#FAF7F1;border-radius:9px;padding:8px 10px}
.isRed{margin-top:10px;border-top:1px solid var(--uyg-hat);padding-top:10px}
/* Özet satırı 44px dokunma hedefi: kazayla basılmamalı ama bulunabilmeli. */
.isRed summary{min-height:44px;display:flex;align-items:center;cursor:pointer;
  font-size:13.5px;color:var(--uyg-mesgul);font-weight:600;
  -webkit-tap-highlight-color:transparent}
.isRed summary:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:8px}
.isRedForm{margin-top:6px}
.isRedForm textarea{margin-bottom:10px}
.isBitti.isRedBilgi{color:var(--uyg-mesgul)}
.isNot.isRedNot{background:#FDECEC;color:#9B1C1C}
.isDurum.reddedildi{background:#FDECEC;color:#9B1C1C}
.isKart.reddedildi{border-left-color:var(--uyg-mesgul);opacity:.78}
.status.reddedildi{color:#9B1C1C}

/* ── Takip: reddedilen talep ─────────────────────────────────────── */
.takipRed{margin-top:12px;background:#FDECEC;border-color:#F0C4C4}
.takipRedBas{font-size:17px;font-weight:700;color:#9B1C1C}
.takipRedSebep{margin:8px 0 10px;font-size:14.5px;line-height:1.5;color:var(--uyg-murekkep)}

/* ═══════════════════════════════════════════════════════════════
   ÇEMBER MODELİ — iki noktalı adres seçimi (index.php, 1. adım)

   Tek harita iki nokta için kullanılıyor. Hangi noktanın seçileceğini
   bu iki düğme belirliyor; seçilen adres düğmenin içinde görünüyor ki
   kullanıcı haritadan ayrılmadan ne seçtiğini doğrulayabilsin.
   ═══════════════════════════════════════════════════════════════ */
.adresSec{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px;
}
.adrBtn{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:10px 12px; min-height:56px; text-align:left; cursor:pointer;
  background:#fcfcfc; border:1.5px solid #e3e6ea; border-radius:12px;
  font:inherit; color:inherit; transition:border-color .15s, background .15s;
}
.adrBtn:hover{ border-color:#c9cfd6; }
.adrBtn.aktif{ border-color:#f59e0b; background:#fff8ee; }
.adrBtn:focus-visible{ outline:2px solid #f59e0b; outline-offset:2px; }
.adrEt{ font-size:13px; font-weight:700; letter-spacing:.1px; }
.adrOzet{
  font-style:normal; font-size:11.5px; line-height:1.35; color:#6b7280;
  overflow-wrap:anywhere;
}
.adrBtn.aktif .adrOzet{ color:#92400e; }

/* Harita işaretçileri: A = alım, T = teslim. Renk ayrımı tek başına
   yeterli değil (renk körlüğü), bu yüzden harf de var. */
.pinAlim, .pinTeslim{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  font:800 13px/1 system-ui,-apple-system,sans-serif; color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.35); border:2px solid #fff;
}
.pinAlim{ background:#0d9488; }
.pinTeslim{ background:#e11d48; }

@media (max-width:380px){
  .adresSec{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   BLOG — liste, yazı ve ortak metin öğeleri

   Okunabilirlik önce gelir: gövde metni 66 karakter civarında
   tutuluyor (`max-width: 66ch`), çünkü uzun satır gözü satır başını
   bulmakta zorlar. Başlıklar arası boşluk, okuyucunun bölüm
   sınırlarını taramadan görmesini sağlıyor.
   ═══════════════════════════════════════════════════════════════ */
.kirinti{
  font-size:12.5px; color:#6b7280; margin:0 0 14px; display:flex;
  flex-wrap:wrap; gap:6px; align-items:center;
}
.kirinti a{ color:#6b7280; text-decoration:none; }
.kirinti a:hover{ color:#b45309; text-decoration:underline; }
.kirinti span{ color:#b8bec7; }

.yaziGiris{ margin:0 0 22px; }
.yaziGiris h1{ font-size:26px; line-height:1.25; margin:0 0 8px; }
.yaziGiris p{ color:#5b6270; max-width:60ch; margin:0; }

.yaziIzgara{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:12px; margin:0 0 26px;
}
.yaziKart{
  display:flex; flex-direction:column; gap:7px; padding:16px 17px;
  background:#fcfcfc; border:1px solid #e6e9ed; border-radius:14px;
  text-decoration:none; color:inherit;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.yaziKart:hover{
  border-color:#f0b95e; transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(15,23,42,.07);
}
.yaziKart h2{ font-size:16.5px; line-height:1.35; margin:0; }
.yaziKart p{ font-size:13.5px; line-height:1.55; color:#5b6270; margin:0; }
.yaziTarih{ font-size:11.5px; color:#8b929c; margin-top:auto; }

.yaziEtiket{
  align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:#92400e; background:#fff3e0;
  border-radius:999px; padding:4px 10px;
}

.yazi{ max-width:66ch; }
.yazi h1{ font-size:27px; line-height:1.25; margin:10px 0 6px; }
.yazi h2{ font-size:19px; line-height:1.3; margin:30px 0 10px; }
.yazi p{ line-height:1.75; margin:0 0 14px; }
.yazi ul, .yazi ol{ line-height:1.75; margin:0 0 14px; padding-left:22px; }
.yazi li{ margin:0 0 7px; }
.yazi a{ color:#b45309; }
.yaziUst{ font-size:12.5px; color:#8b929c; margin:0 0 22px !important; }

.formul{
  background:#fff8ee; border:1px solid #f3d9ae; border-radius:11px;
  padding:13px 15px; margin:0 0 18px; overflow-x:auto;
}
.formul code{ font-size:13.5px; color:#7c3d00; white-space:nowrap; }

.tablo{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14px; }
.tablo th, .tablo td{
  padding:9px 11px; border:1px solid #e6e9ed; text-align:left; vertical-align:top;
}
.tablo thead th{ background:#f6f7f9; font-size:13px; }
.tablo tbody th{ background:#fcfcfc; font-weight:600; white-space:nowrap; }

.yazi .kucuk{ font-size:12.5px; color:#8b929c; }
.yasakLst{ columns:2; column-gap:26px; }
@media (max-width:520px){ .yasakLst{ columns:1; } }

.yaziCta{
  margin:30px 0 24px; padding:22px; border-radius:16px;
  background:linear-gradient(135deg,#fff6e8,#fff0d9); border:1px solid #f3d9ae;
}
.yaziCta h2{ font-size:18px; margin:0 0 6px; }
.yaziCta p{ color:#6b5330; margin:0 0 14px; font-size:14px; }

.yaziDiger{ margin:0 0 10px; }
.yaziDiger h2{ font-size:16px; margin:0 0 10px; }
.yaziDiger ul{ list-style:none; padding:0; margin:0; }
.yaziDiger li{ border-top:1px solid #eceef1; }
.yaziDiger a{
  display:block; padding:11px 2px; color:#3a4150; text-decoration:none;
  font-size:14.5px; line-height:1.4;
}
.yaziDiger a:hover{ color:#b45309; }

/* Tabloların dar ekranda sayfayı yatay kaydırmasını engelle. */
@media (max-width:560px){
  .tablo{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ═══════════════════════════════════════════════════════════════
   MARKA — logonun metinle yeniden kurulması

   assets/logo.png bir kelime-marka: koyu antrasit geometrik sans,
   İ harflerinin üstünde KARE turuncu noktalar. Renkler o dosyadan
   piksel örneklenerek alındı, tahmin edilmedi:
     harf   #464e52
     nokta  #e99d2c   (theme-color #F5A623'ten bilerek farklı —
                       marka rengi logonunki)

   Kelime-markanın kendisi GÖRSEL (assets/marka.png) — İ'lerin üstündeki
   kare turuncu noktaları hiçbir yazı tipi vermiyor, aslını kullanmak tek
   doğru yol. Yazı tipi yalnızca SLOGAN için kalıyor (Poppins 400) ve
   KENDİ SUNUCUMUZDA duruyor: Google Fonts'tan çekilseydi her ziyaretçinin
   IP'si Google'a giderdi, KVKK açısından gereksiz bir aktarım.
   ═══════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/font/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/font/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --marka-harf:#464e52;
  --marka-vurgu:#e99d2c;
}

.marka{
  display:inline-flex; flex-direction:column; gap:2px;
  text-decoration:none; color:inherit; line-height:1;
}
.marka:focus-visible{ outline:2px solid var(--marka-vurgu); outline-offset:4px; border-radius:4px; }

/* Kelime-marka: logodan kırpılmış görsel. Yükseklik sabit, genişlik oranla —
   böylece farklı ekranlarda harfler ezilmez. */
.markaGorsel{
  height:30px; width:auto; display:block;
}

.markaAlt{
  font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight:400; font-size:11px; letter-spacing:.1px;
  color:#8a9199; white-space:nowrap;
}

@media (max-width:400px){
  .markaGorsel{ height:26px; }
  .markaAlt{ font-size:10px; }
}

/* ═══════════════════════════════════════════════════════════════
   TEK EKRAN — anasayfa sayfa kaydırması OLMADAN çalışır

   Talep oluşturma tek ekranda bitmeli: kullanıcı ne kadar yol
   kaldığını görmeli, aşağıda bir şey kaçırdığını düşünmemeli.
   Sayfa kaymaz; adımlar YATAY kayar (`.wizTrack` zaten öyle
   çalışıyordu), bilgiler adımlara bölündü.

   `100dvh` KULLANILIYOR, `100vh` DEĞİL: mobil tarayıcılarda adres
   çubuğu kayarken `vh` sabit kalır ve alt çubuk ekranın dışına
   taşar — buton görünmez olur. `dvh` görünür alanı takip eder.
   Eski tarayıcılar için `vh` önce yazılıyor (yedek).

   `min-height:0` HER ESNEK KATTA: flexbox'ta esnek öğenin
   varsayılan `min-height:auto` değeri, içeriğin altına inmeyi
   engeller — bu olmadan iç kaydırma hiç çalışmaz, kutu taşar.
   ═══════════════════════════════════════════════════════════════ */
html:has(body.tekEkran){ height:100%; }

body.tekEkran{
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  overflow:hidden;                     /* sayfanın kendisi ASLA kaymaz */
}

body.tekEkran .topbar{ flex:0 0 auto; }

body.tekEkran .container{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  padding:12px 14px;
  width:100%;
}

body.tekEkran .wiz{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
}

body.tekEkran .wizBar{ flex:0 0 auto; }
body.tekEkran .wizAlt{ flex:0 0 auto; }

/* JS artık yükseklik yazmıyor; kalan alanın tamamını kaplar. */
body.tekEkran .wizGoruntu{
  flex:1 1 auto; min-height:0;
  height:auto !important;
  transition:none;
}

/* Adımlar eşit yükseklikte: her biri kabı doldurur, böylece harita
   olan adımda harita kalan boşluğu alabilir. */
body.tekEkran .wizTrack{ height:100%; align-items:stretch; }

body.tekEkran .wizStep{
  display:flex; flex-direction:column;
  min-height:0;
  padding:16px 16px 12px;
  /* GÜVENLİK AĞI: içerik yine de sığmazsa (küçük ekran, büyük yazı tipi,
     yatay mod) o ADIM kendi içinde kayar. Sayfa değil. Böylece hiçbir
     alan erişilemez hâle gelmez. */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

/* Harita sabit yükseklikli değil: adımda kalan alanı doldurur. */
body.tekEkran #map{
  flex:1 1 auto; height:auto; min-height:140px;
}

body.tekEkran .wizHead{ flex:0 0 auto; margin-bottom:12px; }
body.tekEkran .wizOzet{ flex:0 0 auto; }
body.tekEkran .adresSec{ flex:0 0 auto; }

/* Onay adımı: özet uzayabilir, kaydırılacak kısım o olsun. */
body.tekEkran .wizKontrol{ min-height:0; }

/* ── Dar ekran sıkılaştırmaları ── */
@media (max-width:640px){
  body.tekEkran .container{ padding:8px 10px; }
  body.tekEkran .wizStep{ padding:13px 13px 10px; }
  body.tekEkran .wizHead{ margin-bottom:9px; }
  body.tekEkran .wizHead h2{ font-size:17px; }
  body.tekEkran .wizHead p{ font-size:12.5px; margin-top:3px; }
  body.tekEkran .wizAlan{ margin-bottom:9px; }
  body.tekEkran .wizAlt{ padding:10px 13px; }
  body.tekEkran .wizSteps{ padding:8px 10px 7px; gap:2px; }
  body.tekEkran .ws{ font-size:11.5px; padding:4px 9px 4px 4px; gap:5px; }
  body.tekEkran .ws i{ width:19px; height:19px; font-size:11px; }
  body.tekEkran .markaAlt{ display:none; }   /* başlıkta yer aç */
  body.tekEkran .markaGorsel{ height:24px; }
  body.tekEkran .topbar{ padding:7px 12px; }

  /* Özet 5 kutu = iki satır. Tek satırda yatay kaydırılabilir şeride
     dönüşüyor: dikey yer kazanmak, buradaki tek amaç. */
  /* TEK SATIR, DÖRT EŞİT SÜTUN.
     Asıl hata `min-width:88px` idi: dört kutu 370 piksel istiyor, 330
     piksel var, fark taşıyor ve son kutu yarım kalıyordu. `1fr` sütunlar
     mevcut genişliği PAYLAŞIR, taşıyamaz — sorun kaynağında çözülüyor.
     İki satıra bölmek de çözerdi ama dikey yer yiyordu (bildirildi).
     Etiket "Mesafe ücreti" yerine "Km ücreti": dar kutuya sığması için. */
  body.tekEkran .wizOzet{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; margin-top:7px;
    overflow:visible; padding:5px;
  }
  body.tekEkran .wizOzet .oz{
    min-width:0; padding:5px 3px; text-align:center; border-radius:8px;
  }
  /* Satır aralıkları da kısıldı: şerit haritanın altında duruyor, her
     piksel haritadan çalınıyor. Etiket tek satır kalmalı — sarınca
     şerit iki kat yükseliyor. */
  body.tekEkran .wizOzet .oz span{
    font-size:9.5px; line-height:1.2; margin-bottom:1px; white-space:nowrap;
  }
  body.tekEkran .wizOzet .oz b{ font-size:12.5px; line-height:1.15; }
  body.tekEkran .wizOzet .oz span svg{ display:none; }   /* dar kutuda ikon yer yiyor */
  body.tekEkran .wizNot{ margin-top:8px; font-size:11px; }
}

/* Çok kısa ekran (yatay mod): başlık şeridi ve slogan yer kaplamasın. */
@media (max-height:520px){
  body.tekEkran .wizHead p{ display:none; }
  body.tekEkran .wizNot{ display:none; }
}

/* Katlanabilir yasaklı liste */
.yasakKutu > summary{ cursor:pointer; list-style:none; display:flex;
  align-items:center; justify-content:space-between; gap:10px; }
.yasakKutu > summary::-webkit-details-marker{ display:none; }
.yasakKutu > summary::after{
  content:''; width:8px; height:8px; flex:0 0 auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s;
}
.yasakKutu[open] > summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.yasakKutu[open] > summary{ margin-bottom:9px; }
.yasakSay{ font-weight:600; letter-spacing:0; text-transform:none; opacity:.7; }

/* ── Onay adımı: özet kayar, onaylar sabit ──
   Bu adımın içeriği (özet + yasaklı liste + 3 onay + not) tek ekrana
   sığmıyor. Adımın tamamını kaydırmak yerine YALNIZCA ÖZETİ kaydırıyoruz:
   onay kutuları ve gönder butonu her zaman görünür kalmalı, kullanıcı
   neyi onayladığını görmeden kaydırıp aşağıda buton aramamalı. */
body.tekEkran .wizStep[data-adim="6"]{ overflow-y:hidden; }
body.tekEkran .wizStep[data-adim="6"] .wizKontrol{
  flex:1 1 auto; min-height:64px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
body.tekEkran .wizStep[data-adim="6"] .yasakKutu,
body.tekEkran .wizStep[data-adim="6"] .wizOnay,
body.tekEkran .wizStep[data-adim="6"] .wizNot{ flex:0 0 auto; }

@media (max-width:640px){
  body.tekEkran .wizKontrol .sat{ padding:6px 0; font-size:12.5px; }
  body.tekEkran .wizOnay{ margin:8px 0 0; font-size:12px; line-height:1.45; gap:8px; }
  body.tekEkran .wizOnay input{ width:17px; height:17px; }
  body.tekEkran .yasakKutu{ padding:10px 12px; margin:9px 0 0; }
  body.tekEkran .wizStep[data-adim="6"] .wizNot{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   HARİTA ADIMI — harita zemin, bilgiler üstünde yüzer

   Önce başlık, açıklama, nokta seçici ve ücret özeti haritayla dikey
   olarak YER PAYLAŞIYORDU; haritaya avuç içi kadar alan kalıyordu.
   Kurye panelinde çözülmüş desen buraya da alındı: harita adımın
   tamamını kaplar, bilgiler üstte yüzen katmanlarda durur.

   `pointer-events` KRİTİK: yüzen katman haritanın üstünü kaplıyor.
   Katmanın kendisi tıklamayı GEÇİRİR (`none`), yalnızca içindeki
   gerçek denetimler yakalar (`auto`). Aksi halde katmanın altındaki
   haritaya pin atılamaz — görünmez bir cam gibi davranır.
   ═══════════════════════════════════════════════════════════════ */
body.tekEkran .wizStep.haritaAdim{
  position:relative;
  padding:0;
  overflow:hidden;
  border-radius:12px;
}

body.tekEkran .haritaAdim #map{
  position:absolute; inset:0;
  height:100%; width:100%;
  border:0; border-radius:0;
  min-height:0;
}

.haritaAdim .hUst,
.haritaAdim .hAlt{
  position:absolute; left:0; right:0;
  z-index:500;                       /* Leaflet karoları 200, denetimler 800 */
  padding:10px;
  pointer-events:none;
  display:flex; flex-direction:column; gap:8px;
}
.haritaAdim .hUst{ top:0; }
.haritaAdim .hAlt{ bottom:0; }
.haritaAdim .hUst > *,
.haritaAdim .hAlt > *{ pointer-events:auto; }

.haritaAdim .adresSec{
  margin:0;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-radius:12px; padding:6px;
  box-shadow:0 2px 12px rgba(15,23,42,.14);
}
.haritaAdim .adrBtn{ background:#fff; }

.haritaAdim #areaWarn{
  margin:0; background:rgba(255,247,251,.97);
  border:1px solid #f0c; border-radius:10px; padding:9px 11px;
  font-size:12.5px; box-shadow:0 2px 12px rgba(15,23,42,.14);
}

/* DOLGU BURADA TANIMLANMIYOR.
   Bu seçici üç sınıf (0,3,0), `body.tekEkran .wizOzet` ise iki (0,2,1) —
   burada `padding` yazmak dar ekran için ayarlanan 5 pikseli sessizce
   eziyordu. Burası yalnızca GÖRÜNÜM (zemin, bulanıklık, gölge) tanımlar;
   ölçüler tek yerde, tekEkran kuralında. */
.haritaAdim .hAlt .wizOzet{
  margin:0;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-radius:12px;
  box-shadow:0 2px 14px rgba(15,23,42,.16);
}
/* Masaüstünde şeridin kendi dolgusu — mobilde tekEkran kuralı veriyor. */
@media (min-width:641px){
  .haritaAdim .hAlt .wizOzet{ padding:7px; }
}
.haritaAdim .hAlt .oz{ background:#fff; }


@media (max-width:640px){
  .haritaAdim .hUst, .haritaAdim .hAlt{ padding:8px; gap:6px; }
}



/* Dar ekranda kenar boşluğu ve çerçeve yok: harita gerçekten kenardan
   kenara. Kutu içinde duran bir harita "tam ekran" hissi vermiyor. */
@media (max-width:640px){
  body.tekEkran .container{ padding:0; }
  body.tekEkran .wiz{ border:0; border-radius:0; }
  body.tekEkran .wizStep.haritaAdim{ border-radius:0; }
  body.tekEkran .wizStep:not(.haritaAdim){ padding:13px 13px 10px; }
}

/* Kurye profili — müşteriye görünen bilgiler bloğu.
   Ayrı bir kutuda duruyor ki kurye, bu üç alanın diğerlerinden farklı
   olduğunu (dışarıya gösterildiğini) baktığı anda görsün. */
.kimlikKutu{
  background:#F4F8FF; border:1px solid #D6E4FA; border-radius:12px;
  padding:14px 15px; margin:0 0 16px;
}
.kimlikBas{
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#1E4E9C; margin:0 0 6px;
}
.kimlikNot{
  margin:0 0 12px; font-size:12.5px; line-height:1.5; color:#41597f;
}

/* ═══════════════════════════════════════════════════════════════
   KURYE KİMLİĞİ — takip sayfası

   Müşteri kapısına kimin geleceğini teslimattan ÖNCE görmeli. Harfli
   bir daire bunu söylemiyordu. Fotoğraf hem haritadaki imleçte hem
   haritanın altındaki kartta: imleci bulup dokunmak fazladan bir adım,
   bilgi doğrudan görünür olmalı.

   Bu bilgiler YALNIZCA kendi siparişini bekleyen müşteriye ve yalnızca
   paket kuryedeyken gösteriliyor (`takip-konum.php`, `kurye-foto.php`).
   Ana sayfadaki genel haritada kurye isimsiz ve fotoğrafsız kalıyor.
   ═══════════════════════════════════════════════════════════════ */
.kuryePin{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:#7C3AED; color:#fff; overflow:hidden;
  border:3px solid #fff; box-shadow:0 3px 12px rgba(15,23,42,.35);
  font:800 17px/1 system-ui,-apple-system,sans-serif;
}
.kuryePin img{ width:100%; height:100%; object-fit:cover; display:block; }

.kuryePop{ text-align:center; min-width:132px; }
.kuryePop b{ font-size:14.5px; }
.kpArac{ font-size:12px; color:#6b7280; margin-top:2px; }
.kpTel{
  display:inline-block; margin-top:8px; padding:7px 15px;
  background:#7C3AED; color:#fff !important; border-radius:9px;
  font-size:13px; font-weight:700; text-decoration:none;
}

.kuryeKart[hidden]{ display:none !important; }
.kuryeKart{
  display:flex; align-items:center; gap:12px;
  margin:12px 0 0; padding:12px 14px;
  background:#F7F4FF; border:1px solid #DDD2FA; border-radius:14px;
}
.kkFoto{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  overflow:hidden; background:#7C3AED; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font:800 20px/1 system-ui,-apple-system,sans-serif;
}
.kkFoto img{ width:100%; height:100%; object-fit:cover; display:block; }
.kkBilgi{ min-width:0; flex:1 1 auto; }
.kkEtiket{
  font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#6D28D9;
}
.kkAd{ font-size:16px; font-weight:700; color:#2c2f36; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kkArac{ font-size:12.5px; color:#6b7280; margin-top:1px; }
.kkTel{
  flex:0 0 auto; padding:10px 18px; min-height:44px;
  display:flex; align-items:center;
  background:#7C3AED; color:#fff; border-radius:11px;
  font-size:14px; font-weight:700; text-decoration:none;
}
.kkTel:hover{ background:#6D28D9; }

/* ═══════════════════════════════════════════════════════════════
   DÜZELTME — form da esnek zincirin parçası olmalı

   `.wizGoruntu` ve `.wizAlt`, `.wiz`'in DOĞRUDAN çocuğu değil; aralarında
   `<form id="orderForm">` var. Form esnek kap olmadığı için `flex:1`
   hiçbir işe yaramıyordu: `.wizGoruntu` içerik yüksekliğine çöküyor,
   `.wizTrack{height:100%}` sıfır oluyor ve mutlak konumlu harita
   görünmez kalıyordu. Zincirin HER halkası flex olmak zorunda.
   ═══════════════════════════════════════════════════════════════ */
body.tekEkran #orderForm{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
}

/* Alt bilgi tek ekran düzeninde yer yiyor. Kaldırmıyoruz — yasal
   metin bağlantıları orada — ama sıkıştırıyoruz; dar ekranda ise
   gizleniyor, aynı bağlantılar zaten menüde var. */
body.tekEkran .footer{
  flex:0 0 auto; padding:7px 14px; font-size:11.5px; line-height:1.4;
}
@media (max-width:640px){
  /* GİZLENMİYOR: anasayfada hamburger menü kapalı, gezinme yalnızca burada.
     Bunun yerine tek satıra sıkıştırılıyor — yasal metin gizleniyor
     (aynı metin talep onayında zaten okutuluyor), bağlantılar kalıyor. */
  body.tekEkran .footer{ padding:5px 8px; }
  body.tekEkran .footer .tiny{ display:none; }
}

/* SON HALKA: `.wizStep` temel kuralında `align-self:flex-start` var —
   adımlar farklı yükseklikteyken kısa olanın uzunun boşluğunu
   doldurmaması için konmuştu. Tek ekran düzeninde bu, adımın
   İÇERİK yüksekliğine çökmesi demek. Harita adımının içeriği mutlak
   konumlu (harita + yüzen katmanlar), yani içerik yüksekliği SIFIR:
   adım sıfır, harita görünmez. `align-self` öğede tanımlıyken kabın
   `align-items:stretch` değeri kazanamaz; burada açıkça eziliyor. */
body.tekEkran .wizStep{ align-self:stretch; }

/* ── Aktif kurye rozeti artık ÜST ŞERİTTE ──
   Harita üstünde duruyordu; oradan yer çalıyordu ve yalnızca 1. adımda
   görünüyordu. Başlıkta, hangi adımda olursanız olun görünür. */
.ustRozet{
  /* SAĞ ÜSTTE. `margin-left:auto` esnek başlıkta kalan boşluğu yiyip
     rozeti sağa itiyor; anasayfada hamburger menü kapalı olduğu için
     sağ uç boş. */
  margin:0 0 0 auto;
  align-self:center;
}
@media (max-width:640px){
  .ustRozet{ font-size:11px; padding:4px 9px; }
  .ustRozet::before{ width:7px; height:7px; }
}
/* Çok dar ekranda logo + rozet + menü sığmıyor: rozet metni kısalsın diye
   taşma gizleniyor, nabız noktası her hâlükârda görünür kalıyor. */
@media (max-width:400px){
  .ustRozet{ max-width:132px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ── Alt çubuk: tek birincil eylem ──
   "Geri" kalktığı için buton satırı tek başına; ücret solda, buton sağda. */
body.tekEkran .wizAlt{ justify-content:space-between; }
body.tekEkran .wizAlt .btn{ margin-left:auto; }
body.tekEkran .wizFiyat:empty{ display:none; }

/* ── Alt bilgi gezinme satırı ──
   Anasayfada üst menü kapalı olduğu için bu satır tek gezinme yolu; ayrıca
   her sayfadan blog ve hizmet sayfalarına iç bağlantı veriyor. */
.footerNav{
  display:flex; flex-wrap:wrap; gap:4px 16px;
  margin:0 0 6px;
}
.footerNav a{
  color:#5b6270; text-decoration:none; font-size:13px; line-height:1.6;
  padding:2px 0;
}
.footerNav a:hover{ color:#b45309; text-decoration:underline; }

@media (max-width:640px){
  /* Tek satır, yatay kaydırılabilir: sarmalayınca alt bilgi iki-üç satıra
     çıkıyor ve tek ekran bütçesini yiyor. */
  body.tekEkran .footerNav{
    flex-wrap:nowrap; overflow-x:auto; gap:14px; margin:0;
    scrollbar-width:none;
  }
  body.tekEkran .footerNav::-webkit-scrollbar{ display:none; }
  body.tekEkran .footerNav a{ font-size:12px; white-space:nowrap; }
}

/* Kurye giriş bağlantısı — yalnızca kurye başvuru sayfasında.
   Ana gezinmede yok: müşteriye açık site ile kurye kapısı ayrı. */
.kuryeGiris{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:20px 0 0; padding:14px 16px;
  background:#fafafa; border:1px solid var(--border); border-radius:12px;
  font-size:14px; color:#5b6270;
}
.kuryeGiris a{ color:#b45309; font-weight:700; text-decoration:none; }
.kuryeGiris a:hover{ text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════
   NOKTA ONAYI — aday pin ve onay kutusu

   Haritada tek dokunuş artık noktayı KESİNLEŞTİRMİYOR. Aday pin
   kesikli ve soluk duruyor; onaylanınca dolu pine dönüşüyor. Fark
   görsel olarak da anlaşılmalı — yalnızca metinle değil, çünkü
   kullanıcı metni okumadan dokunabiliyor.
   ═══════════════════════════════════════════════════════════════ */
.pinAday{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  font:800 13px/1 system-ui,-apple-system,sans-serif; color:#fff;
  border:2px dashed #fff; box-shadow:0 2px 10px rgba(0,0,0,.32);
  animation:adayNabiz 1.4s ease-in-out infinite;
}
.pinAday.pAlim{ background:rgba(13,148,136,.78); }
.pinAday.pTeslim{ background:rgba(225,29,72,.78); }
@keyframes adayNabiz{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.14); }
}
@media (prefers-reduced-motion: reduce){ .pinAday{ animation:none; } }

.onayKutu[hidden]{ display:none !important; }
.onayKutu{
  /* Artık `.hAlt` esnek sütununun içinde — mutlak konum ve elle
     ayarlanan `bottom` değeri kalktı. Şerit uzasa da üstüne binmiyor. */
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 24px rgba(15,23,42,.22);
}
.onayMetin{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 210px; }
.onayEtiket{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#92400e;
}
.onayAdres{
  font-size:13.5px; line-height:1.4; color:#2c2f36;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.onayUyari{ font-size:11.5px; color:#6b7280; }
.onayDugme{ display:flex; gap:8px; flex:0 0 auto; margin-left:auto; }
.onayKutu .btn{ width:auto; min-height:42px; padding:0 18px; white-space:nowrap; }

@media (max-width:640px){
  .onayKutu{ padding:10px 12px; gap:8px; }
  .onayAdres{ font-size:12.5px; }
  .onayDugme{ width:100%; margin-left:0; }
  .onayDugme .btn{ flex:1 1 0; }
}

/* Kurye alt sayfalarında panele dönüş çubuğu.
   Üst menüden "Kurye Paneli" kaldırıldığı için (ana giriş müşteriye ait)
   kuryenin sipariş paneline dönmesi bu çubuğa bağlı. */
.kuryeNav{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:0 0 16px; padding:8px;
  background:#fafafa; border:1px solid var(--border); border-radius:12px;
}
.kuryeNav a{
  padding:8px 13px; min-height:38px; display:flex; align-items:center;
  border-radius:9px; text-decoration:none; font-size:13.5px; font-weight:600;
  color:#5b6270; background:#fff; border:1px solid var(--border);
}
.kuryeNav a:hover{ border-color:#d5b78a; color:#b45309; }
.kuryeNav a.aktif{ background:#FDF3E2; border-color:#F3D9A8; color:#8A5B00; }
.kuryeNav .kuryeCikis{ margin-left:auto; color:#9B1C1C; }
.kuryeNav .kuryeCikis:hover{ border-color:#e6b3b3; }

.notice.ucretsiz{
  background:#EEF9F1; border-color:#BFE5CB; color:#14532D;
}

@media (max-width:520px){
  .kuryeNav{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .kuryeNav::-webkit-scrollbar{ display:none; }
  .kuryeNav a{ white-space:nowrap; flex:0 0 auto; }
  .kuryeNav .kuryeCikis{ margin-left:0; }
}

/* Ana sayfa haritasında kurye imleci — fotoğraflı.
   Ad ve telefon YOK: bu harita herkese açık, isimsiz ziyaretçiye kuryenin
   kimliğini ve anlık konumunu birlikte vermek doğru olmazdı. Fotoğraf
   "sahada gerçek insanlar var" demek için yeterli. */
.kuryeFotoPin{
  display:block; width:38px; height:38px; border-radius:50%;
  overflow:hidden; border:3px solid #fff; background:#7C3AED;
  box-shadow:0 2px 10px rgba(15,23,42,.32);
}
.kuryeFotoPin img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ═══════════════════════════════════════════════════════════════
   KURYE İSTATİSTİKLERİ
   ═══════════════════════════════════════════════════════════════ */
.istDonem{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px;
}
.istDonem a{
  padding:7px 14px; border-radius:999px; text-decoration:none;
  font-size:13px; font-weight:600; color:#5b6270;
  background:#fafafa; border:1px solid var(--border);
}
.istDonem a:hover{ border-color:#d5b78a; color:#b45309; }
.istDonem a.aktif{ background:#FDF3E2; border-color:#F3D9A8; color:#8A5B00; }

.istIzgara{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));
  gap:10px;
}
.istKart{
  display:flex; flex-direction:column; gap:3px;
  padding:14px 15px; border-radius:13px;
  background:#fcfcfc; border:1px solid var(--border);
}
.istEt{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--muted); line-height:1.3;
}
.istEt svg{ flex:0 0 auto; }
/* Rakamlar hizalı okunsun: tablo rakamları eşit genişlikte. */
.istDeger{
  font-size:24px; font-weight:800; color:var(--dark); line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.istAlt{ font-size:11.5px; color:#9aa0a8; }
.istKart.vurgu{ background:#FDF3E2; border-color:#F3D9A8; }
.istKart.vurgu .istDeger{ color:#8A5B00; }
.istKart.vurgu .istAlt{ color:#a98240; }

/* ── Son 7 gün çubuk grafiği ── */
.istGrafik{
  display:flex; align-items:flex-end; gap:8px;
  height:132px; margin-top:12px;
}
.istSutun{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; gap:5px; height:100%; min-width:0;
}
.istSayi{
  font-size:12px; font-weight:700; color:var(--dark); line-height:1;
  font-variant-numeric:tabular-nums; min-height:12px;
}
.istCubuk{
  width:100%; max-width:38px; border-radius:6px 6px 3px 3px;
  background:#E6E9ED; display:block; flex:0 0 auto;
}
.istSutun.bugun .istCubuk{ background:var(--orange); }
.istGun{ font-size:11px; color:var(--muted); line-height:1; }

/* ── Son teslimatlar ── */
.istListe{ list-style:none; padding:0; margin:10px 0 0; }
.istListe li{
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-top:1px solid #eceef1;
}
.istSol{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
.istAdres{
  font-size:14px; color:var(--dark); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.istTarih{ font-size:12px; color:var(--muted); }
.istTutar{
  flex:0 0 auto; font-size:15px; font-weight:700; color:#0B7239;
  font-variant-numeric:tabular-nums;
}

@media (max-width:420px){
  .istIzgara{ grid-template-columns:1fr 1fr; }
  .istDeger{ font-size:20px; }
  .istGrafik{ height:110px; gap:5px; }
}

/* Sözleşme kabul durumu — kabul edildiyse form yerine bu kutu.
   Kurye menüden sözleşmelere bakınca hep boş onay kutusu görüyordu ve
   kabul etmediğini sanıyordu; kayıt doğruydu, gösterim eksikti. */
.kabulKutu{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 16px; border-radius:12px;
  background:#EEF9F1; border:1px solid #BFE5CB;
}
.kabulIsaret{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#17A34A; color:#fff;
}
.kabulBas{ font-size:15px; font-weight:700; color:#14532D; line-height:1.3; }
.kabulTarih{ font-size:12.5px; color:#3f6b4f; }
.kabulKutu .btn{ width:auto; margin-left:auto; min-height:44px; padding:0 20px; }
@media (max-width:460px){
  .kabulKutu .btn{ margin-left:0; width:100%; }
}

/* Yeni iş şeridi — panel açıkken talep gelince.
   Sayfa kendiliğinden yenilenmiyor (kurye teslim kodu yazıyor olabilir);
   şerit gösterilip karar kuryeye bırakılıyor. */
.yeniIsSerit{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:9000;
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border-radius:14px;
  background:#17A34A; color:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.3);
  font-size:14.5px; font-weight:700;
  animation:yeniIsGir .28s cubic-bezier(.4,0,.2,1);
}
.yeniIsSerit span{ flex:1 1 auto; min-width:0; }
.yeniIsSerit button{
  flex:0 0 auto; border:0; cursor:pointer;
  background:#fff; color:#14532D; font:700 14px/1 inherit;
  padding:11px 18px; min-height:42px; border-radius:10px;
}
@keyframes yeniIsGir{
  from{ transform:translateY(16px); opacity:0; }
  to  { transform:translateY(0);    opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .yeniIsSerit{ animation:none; } }

/* ═══════════════════════════════════════════════════════════════
   HARİTA ADIMINDA "HAZIR" KUTUSU

   Mobilde harita adımında alt çubuk (Devam düğmesi) gizleniyor;
   sıradaki adıma geçiş haritanın üstündeki bu kutudan yapılıyor.
   Böylece harita ekranın tamamını kullanıyor ve "şimdi ne yapacağım"
   sorusunun cevabı, kullanıcının baktığı yerde duruyor.
   ═══════════════════════════════════════════════════════════════ */
.hazirKutu[hidden]{ display:none !important; }
.hazirKutu{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:14px;
  background:#17A34A; color:#fff;
  box-shadow:0 6px 24px rgba(15,23,42,.28);
  animation:hazirGir .26s cubic-bezier(.4,0,.2,1);
}
.hazirMetin{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 160px; }
.hazirBas{ font-size:15px; font-weight:800; line-height:1.25; }
.hazirAlt{ font-size:12.5px; opacity:.9; font-variant-numeric:tabular-nums; }
.hazirKutu .btn{
  width:auto; flex:0 0 auto; min-height:44px; padding:0 20px;
  background:#fff; color:#14532D; white-space:nowrap;
}
.hazirKutu .btn:hover{ background:#f0fdf4; }
@keyframes hazirGir{
  from{ transform:translateY(12px); opacity:0; }
  to  { transform:translateY(0);    opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .hazirKutu{ animation:none; } }

/* Onay kutusu ile hazır kutusu aynı anda çıkmaz (biri aday seçimi,
   diğeri iki nokta tamamlandığında), ama aynı yeri paylaşıyorlar. */

@media (max-width:640px){
  .hazirKutu{ padding:11px 13px; }
  .hazirKutu .btn{ width:100%; }
  .hazirMetin{ flex:1 1 100%; }

}

/* ── HARİTA ADIMI: ALT ÇUBUK YOK, HER EKRANDA ──
   "Sonraki adım" düğmesi haritanın üstünde. Altta ikinci bir çubuk hem
   yer yiyor hem aynı eylemi iki yerde gösteriyordu. Masaüstünde de aynı
   davranış: iki farklı deneyim sürdürmek, ikisinden birini bozmak demek.
   Diğer beş adımda alt çubuk yerinde. */
body.tekEkran .wiz[data-adim="1"] .wizAlt{ display:none; }


/* ── Alt çubukta ÜCRET yalnızca son iki adımda ──
   Ara adımlarda (alım yeri, gönderi, teslim) tutarı sürekli göstermek
   dikkat dağıtıyordu: kullanıcı orada adres yazıyor, fiyat kararı
   vermiyor. Ücret, ödeme şeklini seçtiği (5) ve talebi onayladığı (6)
   adımlarda görünüyor — kararın verildiği yerlerde. */
body.tekEkran .wizFiyat{ display:none; }
body.tekEkran .wiz[data-adim="5"] .wizFiyat,
body.tekEkran .wiz[data-adim="6"] .wizFiyat{ display:inline; }

/* ═══════════════════════════════════════════════════════════════
   ANA EKRANA EKLE ŞERİDİ

   Tarayıcının kendi "uygulamayı yükle" seçeneği menünün içinde ve
   kimse bulmuyor. Şerit sayfanın altında bekliyor; kendiliğinden
   açılan pencere DEĞİL — reddedilen bir istemden sonra tarayıcı
   uzun süre bir daha sormuyor.
   ═══════════════════════════════════════════════════════════════ */
.kurSerit{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:9500;
  display:flex; align-items:center; gap:11px;
  padding:11px 12px; border-radius:14px;
  background:#1f2430; color:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.34);
  font-size:14px; line-height:1.35;
  animation:kurGir .3s cubic-bezier(.4,0,.2,1);
}
.kurIkon{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; }
.kurMetin{ flex:1 1 auto; min-width:0; }
.kurMetin b{ color:#F5A623; }
.kurEkle{
  flex:0 0 auto; border:0; cursor:pointer;
  background:#F5A623; color:#1f2430;
  font:800 14px/1 inherit; padding:11px 18px; min-height:42px; border-radius:10px;
}
.kurKapat{
  flex:0 0 auto; border:0; cursor:pointer; background:transparent;
  color:#9aa2b1; font-size:22px; line-height:1;
  width:34px; height:34px; border-radius:8px;
}
.kurKapat:hover{ color:#fff; background:rgba(255,255,255,.08); }
@keyframes kurGir{
  from{ transform:translateY(18px); opacity:0; }
  to  { transform:translateY(0);    opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .kurSerit{ animation:none; } }

/* Tek ekran düzeninde alt çubukla çakışmasın diye biraz yukarıda. */
body.tekEkran .kurSerit{ bottom:76px; }

@media (max-width:420px){
  .kurSerit{ left:8px; right:8px; bottom:8px; padding:9px 10px; gap:9px; font-size:13px; }
  .kurIkon{ width:34px; height:34px; }
  .kurEkle{ padding:10px 14px; font-size:13px; }
  body.tekEkran .kurSerit{ bottom:70px; }
}

/* ── Bildirim izni kapısı (kurye paneli) ── */
.notice.hata{ background:#FDECEC; border-color:#E8B4B4; color:#9B1C1C; }

.iosNot, .engelNot{
  margin:14px 0 0; padding:13px 15px; border-radius:12px;
  font-size:13.5px; line-height:1.65;
}
.iosNot{ background:#EEF4FF; border:1px solid #C9DBFA; color:#1E3A6E; }
.engelNot{ background:#FFF7E6; border:1px solid #F0D9A8; color:#7A4E00; }
.iosNot[hidden], .engelNot[hidden]{ display:none !important; }

/* Ekran kilidi göstergesi — kurye ekranın neden sönmediğini bilmeli.
   "Arka planda konum" diye bir tarayıcı izni yok; yapılabilen tek şey
   ekranı uyanık tutmak ve bunu açıkça söylemek. */
.ekranKilit{
  font-size:10.5px; font-weight:700; letter-spacing:.3px;
  padding:2px 7px; border-radius:999px;
  background:rgba(23,163,74,.14); color:#0B7239;
  white-space:nowrap;
}
.ekranKilit[hidden]{ display:none !important; }

/* ── Gönder butonu ara adımlarda GÖRÜNMEMELİ ──
   `hidden` özniteliği tarayıcı stil sayfasında `display:none` veriyor ama
   düşük özgüllükte; herhangi bir `display` kuralı onu eziyor ve buton ara
   adımlarda görünür kalıyordu (kullanıcı bildirdi: erken gönderim riski).
   Burada açıkça bastırılıyor. */
#submitBtn[hidden], #wizIleri[hidden]{ display:none !important; }

/* İkinci kemer: adım 6 değilken gönder butonu, adım 6'dayken devam butonu
   CSS düzeyinde de gizli. JS ile öznitelik uyuşmazlığı olursa bile
   kullanıcı iki buton birden görmüyor. */
body.tekEkran .wiz:not([data-adim="6"]) #submitBtn{ display:none !important; }
body.tekEkran .wiz[data-adim="6"] #wizIleri{ display:none !important; }

/* ── Adım geçişinde üst üste binme ──
   Kullanıcı bildirdi: Ödeme↔Onay geçişinde iki panel üst üste biniyor ve
   içerik yarım kesik görünüyor.

   Sebep: `.wizStep` `overflow-y:auto` ile kendi kaydırma bağlamını
   açıyor. Kaydırma çubuğu genişliği tarayıcıya göre değişiyor ve
   `flex:0 0 100%` bazı motorlarda o genişliği hesaba katmıyor; adımlar
   birkaç piksel kayıp yan yana görünüyor.

   Üç önlem: (1) kutu modeli açıkça `border-box`, (2) kaydırma çubuğu
   yer kaplamasın (`overlay`/ince), (3) şerit ve kap kesin olarak kırpsın. */
body.tekEkran .wizGoruntu{ overflow:hidden; position:relative; }
body.tekEkran .wizTrack{ width:100%; }
body.tekEkran .wizStep{
  box-sizing:border-box;
  flex:0 0 100%; max-width:100%;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}

/* Reddedilen iş etiketi — kazanç yeşilinden ayrılsın. */
.istRed{
  flex:0 0 auto; font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:999px;
  background:#FDECEC; color:#9B1C1C; white-space:nowrap;
}

/* ── Uyarı sesi seçimi (kurye profili) ── */
.sesKutu{
  background:#F4F8FF; border:1px solid #D6E4FA; border-radius:12px;
  padding:14px 15px; margin:0 0 16px;
}
.sesListe{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  gap:8px; margin-top:12px;
}
.sesSecim{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 13px; min-height:46px; cursor:pointer;
  background:#fff; border:1.5px solid #D6E4FA; border-radius:11px;
  font:600 14px/1.2 inherit; color:#1E3A6E; text-align:left;
}
.sesSecim:hover{ border-color:#8FB6EE; }
.sesSecim.aktif{ background:#1E4E9C; border-color:#1E4E9C; color:#fff; }
.sesOynat{ font-size:12px; opacity:.7; flex:0 0 auto; }
.sesSecim.aktif .sesOynat{ opacity:1; }

/* ═══════════════════════════════════════════════════════════════
   HAVUZ — haritadaki bekleyen işler

   İş, ALIM noktasında bir kutu simgesiyle duruyor: kurye "nereden
   alacağım" sorusunun cevabını haritada görüyor. Ücret simgenin
   üstünde, çünkü kurye önce ona bakıyor.
   ═══════════════════════════════════════════════════════════════ */
.havuzPin{
  position:relative; display:flex; flex-direction:column;
  align-items:center; gap:2px; width:54px;
}
.havuzKutu{
  width:30px; height:26px; border-radius:5px;
  background:linear-gradient(160deg,#C98A3C,#A66A22);
  border:2px solid #fff; box-shadow:0 3px 10px rgba(15,23,42,.35);
  position:relative;
}
/* Koli bandı — kutu olduğu bir bakışta anlaşılsın. */
.havuzKutu::before{
  content:''; position:absolute; left:50%; top:-2px; bottom:-2px;
  width:5px; margin-left:-2.5px; background:rgba(255,255,255,.55);
}
.havuzUcret{
  font:800 11px/1 system-ui,-apple-system,sans-serif; color:#fff;
  background:#7C3AED; border-radius:999px; padding:3px 7px;
  box-shadow:0 2px 6px rgba(15,23,42,.3); white-space:nowrap;
}

/* Havuz kartı — kutuya tıklayınca açılan iş özeti. */
.havuzKart[hidden]{ display:none !important; }
.havuzKart{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:960;
  padding:16px 16px 14px; border-radius:16px;
  background:#fff; box-shadow:0 10px 34px rgba(15,23,42,.28);
  animation:havuzGir .26s cubic-bezier(.4,0,.2,1);
}
@keyframes havuzGir{
  from{ transform:translateY(20px); opacity:0; }
  to  { transform:translateY(0);    opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .havuzKart{ animation:none; } }

.hkKapat{
  position:absolute; top:8px; right:8px; width:34px; height:34px;
  border:0; background:transparent; color:#9aa0a8; font-size:22px;
  line-height:1; cursor:pointer; border-radius:9px;
}
.hkKapat:hover{ background:#f2f3f5; color:#333; }

.hkUst{ display:flex; align-items:baseline; gap:10px; margin:0 0 12px; }
.hkUcret{ font-size:26px; font-weight:800; color:#0B7239; font-variant-numeric:tabular-nums; }
.hkYol{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }

.hkRota{ display:flex; flex-direction:column; gap:9px; margin:0 0 10px; }
.hkNokta{ display:flex; flex-direction:column; gap:1px; padding-left:16px; position:relative; }
.hkNokta::before{
  content:''; position:absolute; left:0; top:5px;
  width:9px; height:9px; border-radius:50%;
}
.hkNokta.alis::before{ background:#0d9488; }
.hkNokta.birakis::before{ background:#e11d48; }
.hkEt{ font-size:10.5px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--muted); }
.hkAlim, .hkTeslim{ font-size:14px; color:var(--dark); line-height:1.35; }
.hkEk{ font-size:12.5px; color:var(--muted); margin:0 0 13px; }
.havuzKart .btn{ width:100%; min-height:50px; font-size:16px; }

/* Durum çubuğu rozetleri */
.havuzSayi{
  font:800 11px/1 system-ui,sans-serif; color:#fff; background:#C98A3C;
  padding:3px 8px; border-radius:999px;
}
.havuzSayi[hidden]{ display:none !important; }
.otoRozet{
  font-size:10.5px; font-weight:700; letter-spacing:.3px;
  padding:2px 7px; border-radius:999px;
  background:rgba(124,58,237,.14); color:#5B21B6; white-space:nowrap;
}
.otoRozet[hidden]{ display:none !important; }

/* Çekmecedeki otomatik anahtar satırı */
.menuAnahtar{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; margin:0 0 6px;
  background:#fafafa; border:1px solid var(--border); border-radius:12px;
}
.menuAnahtar .menuMetin{ flex:1 1 auto; min-width:0; }

/* ═══════════════════════════════════════════════════════════════
   KURYE BAŞVURU — bilgilendirme + WhatsApp

   Eski form dört belge istiyordu ve hiç başvuru gelmemişti. Sayfa
   artık ne beklediğimizi anlatıyor; konuşma WhatsApp'ta başlıyor.
   ═══════════════════════════════════════════════════════════════ */
.waBtn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:auto; min-height:52px; padding:0 26px; font-size:16px;
  background:#25D366; color:#0b3d20;
}
.waBtn:hover{ background:#1fb955; }
.waBtn svg{ flex:0 0 auto; }

.sartListe{ margin:0 0 12px; padding-left:20px; }
.sartListe li{ font-size:14.5px; line-height:1.7; margin:0 0 5px; }
.sartListe.sirali{ list-style:decimal; }
.sartNot{
  margin:0; padding:11px 13px; border-radius:10px;
  background:#fafafa; border:1px solid var(--border);
  font-size:13.5px; line-height:1.65; color:#5b6270;
}

/* Tek kural kartı — sayfanın kalbi, görsel olarak da ayrılsın. */
.kuralKart{
  background:linear-gradient(135deg,#FFF8EC,#FFF3DF);
  border-color:#F0D9A8 !important;
}
.kuralKart .h1{ color:#7A4E00; }
.kuralMetin{
  font-size:14.5px; line-height:1.75; color:#5c4520; margin:0 0 11px;
}
.kuralMetin:last-child{ margin-bottom:0; }
.kuralMetin b{ color:#7A4E00; }

/* Başvuru kutusu — sayfanın tek eylemi, göze çarpsın. */
.basvuruKutu{
  margin:18px 0 0; padding:16px 17px; border-radius:14px;
  background:#F2FBF5; border:1px solid #C4E9D2;
}
.basvuruEt{
  font-size:11.5px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:#0B7239; margin:0 0 6px;
}
.basvuruKutu p{ margin:0 0 13px; font-size:14.5px; line-height:1.65; color:#1d4a30; }

/* Hukuki metin — okunaklı, sıkışık değil. Bu paragraflar sorumluluk
   sınırlarını çiziyor; göz kaydırmasın diye satır arası geniş. */
.hukukMetin{
  font-size:14px; line-height:1.75; color:#4a5058; margin:0 0 11px;
}
.hukukMetin:last-child{ margin-bottom:0; }
.hukukMetin b{ color:#2c2f36; }

/* Ana ekrana ekleme kartı — kurye tereddütünü gideren bölüm.
   Görsel olarak sakin: uyarı sarısı ya da kırmızı YOK. Renk bile
   "burada bir sorun var" demiş olurdu. */
.anaEkranKart{
  background:#F7FAFF; border-color:#D6E4FA !important;
}
.anaEkranKart .h1{ color:#1E4E9C; }
.adimKutu{
  margin:14px 0; padding:13px 15px; border-radius:11px;
  background:#fff; border:1px solid #D6E4FA;
}
.adimBas{
  font-size:11.5px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; color:#1E4E9C; margin:0 0 4px;
}
.adimKutu p{ margin:0; font-size:14px; line-height:1.65; color:#41597f; }

/* Giriş sayfasındaki ana ekran ipucu — kısa, sakin, yolun üstünde. */
.girisIpucu{
  margin:16px 0 0; padding:12px 14px; border-radius:11px;
  background:#F7FAFF; border:1px solid #D6E4FA;
  font-size:13px; line-height:1.6; color:#41597f;
}
.girisIpucu b{ color:#1E4E9C; }
.girisIpucuAdim{
  display:block; margin:6px 0 0; font-size:12px; color:#6b7f9e;
}
.girisIpucu a{
  display:inline-block; margin-top:7px; color:#1E4E9C; font-weight:600;
  font-size:12.5px;
}

/* ── Harita atfı: küçük ve sessiz, ama OKUNUR ──
   "Leaflet" ibaresi kaldırıldı (kütüphanenin nezaket satırı, zorunlu
   değil). OpenStreetMap atfı ODbL lisansı gereği ZORUNLU — kaldırılamaz,
   yalnızca sadeleştirilebilir. Okunaklılığı bozacak kadar soluk veya
   küçük yapmak, kaldırmakla aynı kapıya çıkar. */
/* ── ATIF VE SLOGAN AYNI KUTU ──
   İkisi haritanın alt kenarında yan yana duruyor; farklı ölçüde olmaları
   hemen göze çarpıyor. Ölçüldü: Leaflet'in kendi kuralı `padding: 0 5px`
   veriyor, yani DİKEY DOLGU YOK. Slogana 1'er piksel dikey dolgu vermiştim
   ve 2 piksel daha uzun oluyordu — üstteki ücret şeridine değiyordu
   (bildirildi). Ortak kural ikisini de aynı boyda tutuyor.

   `opacity` AÇIKÇA 1: eski `.appHarita .leaflet-control-attribution`
   kuralı %70 opaklık veriyordu. Zemin zaten yarı saydam, üstüne opaklık
   binince yazı okunmaz hâle geliyordu. OpenStreetMap atfı lisans gereği
   okunur kalmalı — soluklaştırarak gizlemek, kaldırmakla aynı şey. */
.leaflet-control-attribution,
.haritaSlogan{
  font-size:10px; line-height:1.4;
  padding:0 5px;
  background:rgba(255,255,255,.82);
  color:#5b6270;
  opacity:1;
}
.leaflet-control-attribution a{ color:#41597f; text-decoration:none; }
.leaflet-control-attribution a:hover{ text-decoration:underline; }

/* ── Alt şerit, OpenStreetMap ibaresinin üstüne çıkıyor ──
   Leaflet'in denetim katmanı z-index 800, `.hAlt` ise 500: ibare şeridin
   üstüne biniyor ve ücret kutularının alt kenarını örtüyordu (bildirildi).

   ŞERİDİ ÖRTMEK YERİNE YUKARI ALIYORUZ. z-index'i yükseltmek ibareyi
   şeridin altında bırakırdı — OpenStreetMap atfı lisans gereği görünür
   kalmak zorunda. Şerit 18 piksel yukarı çıkıyor, ibare en alt kenarda
   kendi başına duruyor. İkisi de görünür. */
/* 18 px fazlaydı (bildirildi). Gerçek çakışma kadar kaldırılıyor:
   `.hAlt` dolgusu zaten 8 px, yani ücret kutuları ekranın en alt
   kenarından 8 px yukarıda başlıyor. İbare ~15 px, üst üste binen
   kısım ~7 px. 8 px kaldırmak tam yetiyor. */
.haritaAdim .hAlt{ bottom:8px; }

/* İbare tam alt kenara yaslansın ki şeritle arasında boşluk kalmasın. */
.haritaAdim .leaflet-bottom.leaflet-right{ margin:0; }

/* ── Haritanın sol alt köşesindeki slogan ──
   OpenStreetMap ibaresi sağ altta duruyor; sol köşe boştu. Aynı punto ve
   aynı zemin kullanılıyor ki tasarım bütün görünsün — ama AYRI bir öğe:
   atfın parçasıymış gibi durmamalı, o başka bir kurumun ibaresi ve
   karıştırmak yanıltıcı olur.

   `pointer-events:none` şart: harita üstünde duran her şey tıklamayı
   yutabilir, burada nokta seçiliyor. */
.haritaSlogan{
  /* Ölçüler ortak kuralda; burada yalnızca KONUM.
     `bottom:0` — atıf da Leaflet tarafından `margin:0` ile tam köşeye
     yaslanıyor, ikisi aynı hizada. */
  position:absolute; left:0; bottom:0; z-index:800;
  white-space:nowrap;
  pointer-events:none;
}
@media (max-width:330px){
  /* Ölçüldü: slogan ~149 px, atıf ~80 px, toplam ~229 px — 360 px'te
     rahat sığıyor. Eşik önce 400 px'ti ve 390 px'lik telefonlarda
     gereksiz yere gizleniyordu. Atıf zorunlu, slogan değil: çakışma
     ihtimalinde feda edilecek olan slogandır. */
  .haritaSlogan{ display:none; }
}