/* Mutfak tableti: sabit ekran, uzaktan okunacak kadar büyük, dokunmatik hedefler geniş.
   Paketleme ve yan ürün ekranlarının kendi stilleri rota.css'ten geliyor; buradakiler
   yalnızca sekmeli kabuk ve üç yeni ekran için. */

.mutfak { display: flex; flex-direction: column; min-height: 100dvh; }

/* Üst çubuk iki satır: kimlik satırı ve sekme satırı. Tek satıra sıkıştırmak
   sekmeleri yatay kaydırmaya zorluyor, sabit tablette kaydırılacak şey olmamalı. */
.m-ust {
  background: var(--kart); border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; z-index: 20;
}
.m-bas { display: flex; align-items: center; gap: 12px; padding: 10px 16px 8px; }
.m-kim { flex: 1; min-width: 0; display: grid; }
.m-kim b { font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-kim span { font-size: 12px; color: var(--soluk); }
.m-cikis {
  flex: none; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600;
  background: none; border: 1px solid var(--cizgi); border-radius: 999px;
  color: var(--soluk); cursor: pointer;
}
.m-cikis:hover { color: var(--metin); }

/* Ekrana özel sayaç (3/7 paketlendi) ve araç düğmeleri kabuğun sağında durur */
.m-durum { flex: none; text-align: right; line-height: 1.2; }
.m-durum b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.m-durum span { font-size: 11px; color: var(--soluk); }
.m-bas .ikon-dugme { flex: none; }

.m-hata { padding: 2rem 1rem; text-align: center; display: grid; gap: 1rem; justify-items: center; }
.m-hata p { margin: 0; color: var(--hata); font-weight: 600; max-width: 30rem; line-height: 1.5; }
.m-hata .dugme { width: auto; padding-inline: 1.5rem; }

.m-sekme { display: flex; gap: 6px; padding: 0 16px 10px; }
.m-sekme button {
  flex: 1; padding: 11px 8px; font: inherit; font-size: 14px; font-weight: 700;
  border: 1px solid var(--cizgi); border-radius: var(--r-s, 11px);
  background: var(--kart-2); color: var(--soluk); cursor: pointer; white-space: nowrap;
}
.m-sekme button.secili { background: var(--marka); border-color: var(--marka); color: var(--marka-yazi); }
.m-sekme button:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; }
/* Kabuğun gövdesi de bir <main>; rota.css'teki genel `main { display:grid }`
   kuralına yakalanınca iç içe geçen paketleme ekranının servis sekmeleri grid
   satırı gibi esneyip devleşiyordu. Gövde düz blok, boşluğu içerik veriyor. */
#m-govde { flex: 1; display: block; padding: 16px; }
#m-govde.sade { padding: 0; }            /* paketleme/yan ürün kendi <main>'ini getirir */
#m-govde.sade > main { padding: 14px 16px 24px; }

/* İç servis sekmesi kabuğun altına yapışır; eski 3.5rem değeri tam ekran
   başlığa göreydi, kabukla birlikte çift çubuk üst üste biniyordu. */
#m-govde .sekme { position: static; padding: 10px 16px; }

@media (max-width: 560px) {
  .m-sekme { flex-wrap: wrap; }
  .m-sekme button { flex: 1 1 30%; }
}

/* ---------------- günlük akış */
.a-ozet { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; margin-bottom: 12px; font-size: 16px; }
.a-ozet .gec { color: #b3261e; }
.a-ozet .erken { color: #1d7a4c; }
.a-ozet .soluk { opacity: .6; font-size: 14px; }

.akis-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.akis-liste li {
  display: grid; grid-template-columns: 62px 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px; background: var(--zemin-2, rgba(127,127,127,.06));
  border-left: 4px solid transparent;
}
.akis-liste li.a-tamam { border-left-color: #1d7a4c; }
.akis-liste li.a-atlandi { opacity: .5; }
.akis-liste li.geciken { border-left-color: #b3261e; background: rgba(200,60,40,.07); }
.a-saat { font-weight: 800; font-size: 17px; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.a-baslik { font-size: 16px; }
.a-baslik .oto {
  margin-left: 8px; font-size: 11px; font-style: normal; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 6px; background: rgba(127,127,127,.18); opacity: .8;
}
.a-ger { font-variant-numeric: tabular-nums; font-size: 15px; white-space: nowrap; }
.a-ger .gec { color: #b3261e; font-weight: 700; margin-left: 6px; }
.a-ger .erken { color: #1d7a4c; margin-left: 6px; }
.a-islem { display: flex; gap: 6px; }

.a-ekle { display: flex; gap: 8px; margin-top: 14px; }
.a-ekle input { padding: 10px 12px; font: inherit; border: 1px solid var(--cizgi, #d8d8d8); border-radius: 10px; background: var(--yuzey, #fff); color: inherit; }
.a-ekle input[name="saat"] { width: 92px; text-align: center; }
.a-ekle input[name="baslik"] { flex: 1; }

/* ---------------- canlı siparişler */
.s-toplam { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.s-kutu {
  min-width: 140px; padding: 12px 16px; border-radius: 12px;
  background: var(--zemin-2, rgba(127,127,127,.06)); display: grid; gap: 4px;
}
.s-kutu.favori { background: rgba(240,180,40,.16); }
.s-ad { font-size: 14px; opacity: .75; }
.s-adet { font-size: 28px; font-variant-numeric: tabular-nums; }

.s-tablo { overflow-x: auto; }
.s-tablo table { border-collapse: collapse; width: 100%; font-size: 15px; }
.s-tablo th, .s-tablo td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--cizgi, #eee); }
.s-tablo th { position: sticky; top: 0; background: var(--yuzey, #fff); font-size: 13px; }
.s-firma { text-align: left; font-weight: 600; white-space: nowrap; }
.s-bekleyen { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(200,60,40,.08); }
.s-bekleyen h3 { margin: 0 0 6px; font-size: 15px; }
.s-bekleyen p { margin: 0; font-size: 14px; line-height: 1.6; opacity: .85; }

/* ---------------- harita */
.m-harita { height: calc(100vh - 140px); min-height: 420px; border-radius: 14px; overflow: hidden; }
.m-nokta { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.m-nokta.teslim { opacity: .45; }
.m-arac { width: 22px; height: 22px; border-radius: 50%; background: #111; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }

@media (max-width: 720px) {
  .akis-liste li { grid-template-columns: 56px 1fr; }
  .a-ger, .a-islem { grid-column: 1 / -1; justify-content: flex-start; }
}