/* ============================================================
   AlfaPOS Kurye — kurye ekranı

   Kullanıcı motosiklette, tek elle, çoğu zaman eldivenli ve güneş
   altında. Tasarım kararlarının hepsi bundan çıktı:
     - dokunma hedefleri en az 46px
     - birincil eylem (Teslim Et) diğerlerinden BELİRGİN şekilde büyük
     - açık tema varsayılan: gündüz güneşte koyu tema okunmuyor
     - renk az, kontrast yüksek
   ============================================================ */

/* ---------- tema belirteçleri ----------
   Açık tema :root'ta TAM tanımlı; koyu tema yalnızca değişen belirteçleri
   ezer. Böylece hiçbir renk tek bir blokta kalmaz ve tema değiştiğinde
   tanımsız renk oluşmaz. */

:root {
  --arka:        #f1f5f9;
  --yuzey:       #ffffff;
  --yuzey-2:     #f8fafc;
  --cizgi:       #e2e8f0;
  --metin:       #0f172a;
  --metin-soluk: #64748b;

  --ana:         #2563eb;
  --ana-koyu:    #1d4ed8;
  --ana-soluk:   #dbeafe;
  --iyi:         #16a34a;
  --uyari:       #d97706;
  --uyari-soluk: #fef3c7;
  --hata:        #dc2626;

  --golge:       0 1px 3px rgba(15, 23, 42, .08);
  --golge-buyuk: 0 10px 40px rgba(15, 23, 42, .18);
  --radius:      14px;
  --radius-kucuk: 10px;
}

/* Sistem koyu tercih ediyorsa — ama kullanıcı AÇIK seçtiyse hayır. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --arka:        #0f172a;
    --yuzey:       #1e293b;
    --yuzey-2:     #172033;
    --cizgi:       #334155;
    --metin:       #f1f5f9;
    --metin-soluk: #94a3b8;

    --ana-soluk:   #1e3a5f;
    --uyari-soluk: #422006;

    --golge:       0 1px 3px rgba(0, 0, 0, .4);
    --golge-buyuk: 0 10px 40px rgba(0, 0, 0, .55);
  }
}

/* Kullanıcı elle KOYU seçtiyse sistem ne derse desin. */
:root[data-tema="koyu"] {
  --arka:        #0f172a;
  --yuzey:       #1e293b;
  --yuzey-2:     #172033;
  --cizgi:       #334155;
  --metin:       #f1f5f9;
  --metin-soluk: #94a3b8;

  --ana-soluk:   #1e3a5f;
  --uyari-soluk: #422006;

  --golge:       0 1px 3px rgba(0, 0, 0, .4);
  --golge-buyuk: 0 10px 40px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--arka);
  color: var(--metin);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;                 /* 16px altı: iOS form odağında zoomlar */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* Aşağı çekip yenilemeyi kendimiz yapıyoruz; tarayıcının kendi
     davranışı araya girmesin. */
  overscroll-behavior-y: contain;
}

a { color: var(--ana); text-decoration: none; }
.gizli { display: none !important; }

/* ---------------- bildirim şeridi ---------------- */

.flash {
  position: fixed; left: 12px; right: 12px;
  top: calc(12px + env(safe-area-inset-top));
  z-index: 300;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  box-shadow: var(--golge-buyuk);
  transition: opacity .3s;
  color: #fff;
}
.flash-hata  { background: var(--hata); }
.flash-iyi   { background: var(--iyi); }
.flash-uyari { background: var(--uyari); }
.flash-bilgi { background: var(--metin); color: var(--yuzey); }

/* ============================================================
   GİRİŞ EKRANI
   ============================================================ */

.giris-sayfa {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.giris-kutu {
  width: 100%; max-width: 380px;
  background: var(--yuzey);
  border-radius: 20px;
  padding: 30px 22px;
  box-shadow: var(--golge-buyuk);
}

.logo { text-align: center; margin-bottom: 24px; }
.logo-ikon { font-size: 46px; line-height: 1; }
.logo h1 { margin: 10px 0 2px; font-size: 22px; font-weight: 700; }
.logo .alt { margin: 0; color: var(--metin-soluk); font-size: 13px; }

label {
  display: block;
  margin: 18px 0 6px;
  font-size: 13px; font-weight: 600;
  color: var(--metin-soluk);
}

input[type=text], input[type=password], input[type=date], input[type=search] {
  width: 100%;
  padding: 15px;
  background: var(--yuzey-2);
  border: 1.5px solid var(--cizgi);
  border-radius: var(--radius-kucuk);
  color: var(--metin);
  font-size: 16px;
  font-family: inherit;
}
input:focus { outline: none; border-color: var(--ana); background: var(--yuzey); }

.ipucu { margin-top: 6px; font-size: 12.5px; color: var(--metin-soluk); }
.hata-metin { color: var(--hata); }

.btn-ana, .btn-ikincil, .btn-uyari {
  display: block; width: 100%;
  margin-top: 20px; padding: 16px;
  border: none; border-radius: var(--radius-kucuk);
  font-size: 16px; font-weight: 700; font-family: inherit;
  cursor: pointer;
}
.btn-ana     { background: var(--ana); color: #fff; }
.btn-ana:active { background: var(--ana-koyu); transform: scale(.99); }
.btn-ikincil { background: transparent; color: var(--metin-soluk); border: 1.5px solid var(--cizgi); }
.btn-uyari   { background: var(--uyari); color: #fff; }

.giris-alt { margin-top: 18px; text-align: center; font-size: 14px; }

/* 2 adımlı restoran girişi (aynı stil dosyası paylaşılır) */
.adim-cizgi {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 42px;
}
.adim {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cizgi); color: var(--metin-soluk);
  font-weight: 700; font-size: 14px; line-height: 34px;
  text-align: center;
  position: relative;
}
.adim.aktif { background: var(--ana); color: #fff; }
.adim.bitti { background: var(--iyi); color: #fff; }
.adim i {
  position: absolute; top: 38px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: 11px;
  color: var(--metin-soluk); white-space: nowrap;
}
.adim-ara { width: 48px; height: 2px; background: var(--cizgi); }

.secili-isletme {
  background: var(--yuzey-2);
  border: 1.5px solid var(--cizgi);
  border-radius: var(--radius-kucuk);
  padding: 12px 14px;
}
.secili-isletme span { display: block; font-size: 12px; color: var(--metin-soluk); }
.secili-isletme strong { font-size: 16px; }

/* ============================================================
   KURYE EKRANI
   ============================================================ */

.uygulama { padding-bottom: 28px; }

.ust-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ad  { font-weight: 700; font-size: 16px; }
.ust-alt { font-size: 12.5px; color: var(--metin-soluk); }
.ust-sag { display: flex; align-items: center; gap: 2px; }

/* Üst bardaki simge butonları — tema, ses, çıkış */
.ikon-btn {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  color: var(--metin-soluk);
  font-size: 18px; font-family: inherit;
  cursor: pointer;
}
.ikon-btn:active { background: var(--yuzey-2); }
.ikon-btn.kapali { opacity: .35; }

.baglanti { font-size: 12px; line-height: 1; padding: 0 4px; }
.baglanti.iyi   { color: var(--iyi); }
.baglanti.bekle { color: var(--uyari); }
.baglanti.kotu  { color: var(--hata); }

/* tazelik göstergesi — "bu veri ne kadar eski" */
.tazelik {
  padding: 6px 16px;
  font-size: 11.5px;
  color: var(--metin-soluk);
  background: var(--yuzey-2);
  border-bottom: 1px solid var(--cizgi);
  text-align: center;
}
.tazelik.eski { background: var(--uyari-soluk); color: var(--uyari); font-weight: 600; }

/* özet şeridi */
.ozet {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
}
.ozet-kutu {
  background: var(--yuzey);
  padding: 12px 8px;
  text-align: center;
}
.ozet-kutu b { display: block; font-size: 17px; font-weight: 700; }
.ozet-kutu span { font-size: 11.5px; color: var(--metin-soluk); }

/* sekmeler */
.sekmeler {
  display: flex;
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
}
.sekme {
  flex: 1;
  padding: 15px 8px;
  background: none; border: none;
  border-bottom: 3px solid transparent;
  color: var(--metin-soluk);
  font-size: 14.5px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
.sekme.aktif { color: var(--metin); border-bottom-color: var(--ana); }

.rozet {
  display: inline-block;
  min-width: 22px; padding: 2px 7px;
  border-radius: 11px;
  background: var(--cizgi);
  font-size: 12px;
}
.sekme.aktif .rozet { background: var(--ana); color: #fff; }
/* Yeni paket geldiğinde rozet dikkat çeksin */
.rozet.yeni { background: var(--hata); color: #fff; animation: nabiz 1.2s ease-in-out 3; }
@keyframes nabiz { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* ---------------- aşağı çekip yenileme ---------------- */

.cek-yenile {
  height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--metin-soluk); font-size: 13px;
  transition: height .18s ease;
}
.cek-yenile.acik { height: 44px; }

/* ---------------- paket kartı ---------------- */

.liste { padding: 12px; display: grid; gap: 12px; }

.kart {
  background: var(--yuzey);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge);
}
.kart.yeni-geldi { animation: belir .4s ease; border-color: var(--ana); }
@keyframes belir { from { opacity: 0; transform: translateY(-8px); } }

.kart-ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.kart-no    { font-weight: 700; font-size: 16px; }
.kart-tutar { font-weight: 800; font-size: 19px; color: var(--iyi); }
.kart-musteri { font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
.kart-adres   { font-size: 13.5px; color: var(--metin-soluk); margin-bottom: 14px; }

/* Yardımcı eylemler küçük ve yan yana; birincil eylem AYRI ve büyük. */
.kart-yan { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.btn-kucuk {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 11px 14px;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi); border-radius: var(--radius-kucuk);
  color: var(--metin);
  font-size: 14px; font-weight: 600; font-family: inherit;
  text-align: center;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.btn-kucuk:active { background: var(--cizgi); }
.btn-tel { background: var(--ana-soluk); border-color: transparent; color: var(--ana); }

/* Birincil eylem: kartın tam genişliği, yüksek ve belirgin. */
.btn-birincil {
  display: block; width: 100%;
  min-height: 54px;
  padding: 15px;
  border: none; border-radius: var(--radius-kucuk);
  font-size: 16.5px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  color: #fff;
}
.btn-birincil.teslim { background: var(--iyi); }
.btn-birincil.al     { background: var(--ana); }
.btn-birincil:active { transform: scale(.99); filter: brightness(.94); }
.btn-birincil:disabled { opacity: .55; }

/* İade bilerek küçük ve soluk: nadir ve geri alınması zor bir eylem. */
.btn-iade {
  display: block; width: 100%;
  margin-top: 8px; padding: 9px;
  background: none; border: none;
  color: var(--metin-soluk);
  font-size: 13px; font-family: inherit;
  cursor: pointer;
}

/* ---------------- kart içi ödeme seçimi ----------------
   Teslim akışı 3 dokunuştan 2'ye indi: "Teslim Et" ödeme türlerini
   kartın İÇİNDE açar, ayrı bir modal açılmaz. */

.odeme-alan {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--cizgi);
}
.odeme-baslik {
  font-size: 12.5px; font-weight: 700; color: var(--metin-soluk);
  margin-bottom: 8px;
}
.odeme-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.btn-odeme {
  min-height: 52px;
  padding: 12px;
  background: var(--yuzey-2);
  border: 1.5px solid var(--cizgi); border-radius: var(--radius-kucuk);
  color: var(--metin);
  font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
.btn-odeme:active { background: var(--iyi); border-color: var(--iyi); color: #fff; }

/* "Ödeme alınmadı" diğer türlerle KARIŞMAMALI — bu seçenekte adisyon
   kapanmaz. Ayrı satır, kesikli çerçeve, uyarı rengi. */
.btn-odemesiz {
  grid-column: 1 / -1;
  margin-top: 4px;
  background: transparent;
  border: 2px dashed var(--uyari);
  border-radius: var(--radius-kucuk);
  color: var(--uyari);
  line-height: 1.25;
  min-height: 54px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer;
}
.btn-odemesiz small {
  display: block; margin-top: 3px;
  font-size: 11.5px; font-weight: 500; opacity: .9;
}
.btn-odeme-vazgec {
  grid-column: 1 / -1;
  background: none; border: none;
  color: var(--metin-soluk);
  font-size: 13px; font-family: inherit;
  padding: 8px; cursor: pointer;
}

/* ---------------- boş durum ---------------- */

.bos { padding: 56px 20px; text-align: center; color: var(--metin-soluk); }
.bos-ikon { font-size: 40px; opacity: .45; }
.bos p { margin: 12px 0 0; font-size: 14.5px; }

/* ---------------- modal ---------------- */

.modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-ic {
  width: 100%; max-width: 460px;
  max-height: 86vh; overflow-y: auto;
  background: var(--yuzey);
  border-radius: 20px 20px 0 0;
  padding: 22px 18px;
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
  animation: yukari .22s ease;
}
@keyframes yukari { from { transform: translateY(100%); } }
.modal-ic h3 { margin: 0 0 12px; font-size: 18px; }

.modal-adisyon {
  background: var(--yuzey-2);
  border-radius: var(--radius-kucuk);
  padding: 12px;
  margin-bottom: 14px;
  font-size: 14.5px;
}

.detay-tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.detay-tablo td { padding: 10px 4px; border-bottom: 1px solid var(--cizgi); }
.detay-tablo .adet  { width: 44px; color: var(--metin-soluk); }
.detay-tablo .tutar { text-align: right; white-space: nowrap; font-weight: 600; }

/* ---------------- geniş ekran ---------------- */

@media (min-width: 720px) {
  .liste { grid-template-columns: repeat(2, 1fr); }
  .modal { align-items: center; }
  .modal-ic { border-radius: 20px; }
}

/* Hareket azaltma tercihi olanlar için animasyonları kapat. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   RESTORAN PANELİNE ÖZEL
   (kurye ekranıyla aynı tema belirteçlerini kullanır — iki panel
   yan yana açıldığında aynı ürün gibi görünmeli)
   ============================================================ */

/* ---------------- menü ---------------- */

.r-menu {
  display: flex; gap: 1px;
  background: var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; z-index: 40;
}
.r-menu a {
  flex: 1;
  padding: 14px 6px;
  background: var(--yuzey);
  color: var(--metin-soluk);
  text-align: center;
  font-size: 14px; font-weight: 600;
}
.r-menu a.aktif { color: var(--metin); box-shadow: inset 0 -3px 0 var(--ana); }

/* ---------------- gövde / bölümler ---------------- */

.r-govde { padding: 14px; display: grid; gap: 16px; }

.r-bolum {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--golge);
}
.r-bolum > h2 {
  margin: 0;
  padding: 13px 14px;
  font-size: 14.5px; font-weight: 700;
  border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; gap: 8px;
}

/* ---------------- paket satırı ---------------- */

.r-satir {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cizgi);
  font-size: 14px;
}
.r-satir:last-child { border-bottom: none; }
.r-satir b    { min-width: 62px; }
.r-satir > span:not(.r-eylem) { flex: 1 1 140px; color: var(--metin-soluk); }
.r-satir em   { font-style: normal; font-weight: 700; color: var(--iyi); white-space: nowrap; }

.r-satir .r-adres {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: var(--metin-soluk);
  opacity: .75;
}

.r-eylem { flex: 0 0 auto; display: flex; gap: 6px; }

/* Restoran tarafı fare ile de kullanılıyor; kurye kartlarındaki 54px'lik
   hedeflere gerek yok. Ama dokunmatik kasa ekranı da olabilir — 38px
   ikisinin ortası. */
.btn-mini {
  min-height: 38px;
  padding: 8px 12px;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi); border-radius: 9px;
  color: var(--metin);
  font-size: 13px; font-weight: 600; font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center;
}
.btn-mini:active { background: var(--cizgi); }
.btn-mini:disabled { opacity: .5; }
.btn-mini.ana   { background: var(--ana); color: #fff; border-color: transparent; }
.btn-mini.uyari { background: transparent; border: 1.5px solid var(--uyari); color: var(--uyari); }

/* ---------------- kurye grupları ---------------- */

.r-kurye { border-bottom: 1px solid var(--cizgi); }
.r-kurye:last-child { border-bottom: none; }
.r-kurye-ad {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: var(--yuzey-2);
  font-weight: 700; font-size: 14px;
}
.r-bos { padding: 12px 14px; color: var(--metin-soluk); font-size: 13px; }

/* ---------------- hareket akışı ---------------- */

.r-hareket {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cizgi);
  font-size: 13.5px;
}
.r-hareket:last-child { border-bottom: none; }
.r-hareket .saat { color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.r-hareket i  { font-style: normal; color: var(--metin-soluk); }
.r-hareket em { font-style: normal; font-weight: 700; color: var(--iyi); }

/* ---------------- kurye kartları (/kuryeler) ---------------- */

.k-liste { display: grid; gap: 12px; }
@media (min-width: 720px) { .k-liste { grid-template-columns: repeat(2, 1fr); } }

.k-kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  padding: 15px;
  box-shadow: var(--golge);
}
.k-ust {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: 16px;
}
.k-alt {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--cizgi);
  font-size: 12.5px; color: var(--metin-soluk);
}
.k-alt b { display: block; font-size: 15px; color: var(--metin); }
.k-islem {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 11px;
}
.k-konum { font-size: 12.5px; color: var(--iyi); }
.k-konum.soluk { color: var(--metin-soluk); opacity: .7; }

/* ---------------- harita ---------------- */

#harita {
  width: 100%; height: 62vh; min-height: 320px;
  border-radius: var(--radius);
}
/* Koyu temada OSM kutucukları göz alıyor — hafifçe söndür. */
:root[data-tema="koyu"] #harita .leaflet-tile,
:root:not([data-tema="acik"]) #harita .leaflet-tile {
  filter: brightness(.82) contrast(1.05);
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="koyu"]) #harita .leaflet-tile { filter: none; }
}
.harita-uyari { padding: 14px; font-size: 13.5px; color: var(--metin-soluk); }

/* ---------------- rapor ---------------- */

.rapor-ust {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
}
.rapor-ust input[type=date] { width: auto; flex: 1; padding: 11px; }

.rapor-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.rapor-tablo th {
  text-align: left; padding: 10px 8px;
  border-bottom: 2px solid var(--cizgi);
  color: var(--metin-soluk); font-size: 12.5px; text-transform: uppercase;
}
.rapor-tablo td { padding: 11px 8px; border-bottom: 1px solid var(--cizgi); }
.rapor-tablo .tutar { text-align: right; font-weight: 700; color: var(--iyi); white-space: nowrap; }
.r-govde h3 { margin: 6px 0 0; font-size: 15px; }

/* ---------------- geniş ekran ----------------
   Restoran paneli genelde kasa bilgisayarında açık duruyor. */

@media (min-width: 900px) {
  .r-govde { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .r-govde h3, .r-govde .ozet { grid-column: 1 / -1; }
}