/* Tostum Balkan Entegrasyon — mutfak/kasa ekranı için koyu tema.
   Büyük dokunmatik hedefler, platform renk kodları, düşük göz yorgunluğu. */

:root {
  --zemin: #0a0a0a;
  --panel: #121212;
  --panel-acik: #1a1a1a;
  --cizgi: #282828;
  --metin: #ffffff;
  --metin-soluk: #a7a7a7;
  --vurgu: #1db954;          /* Spotify yeşili */
  --yesil: #1ed760;
  --kirmizi: #f04c4c;
  --amber: #f2a93b;          /* POS'ta fiyat vurgusu — vurgu yeşilinden ayrı, parasal anlam taşıyan sıcak renk */
  --trendyol: #f27a1a;
  --yemeksepeti: #fa0050;
  --migros: #ff7f00;
  --mock: #7d8fca;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* iOS Safari'nin "lastik bandı" kaydırma efekti bazen body'nin
     overflow-x:hidden'ini atlayıp document seviyesinde yatay
     çekilebilirlik bırakıyor — aynı korumayı html'e de koyuyoruz. */
  overflow-x: hidden;
  width: 100%;
}

body {
  background: var(--zemin);
  color: var(--metin);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  width: 100%;
  /* Arka plandaki dinamik ızgaralar (ör. masa-izgara) dar ekranlarda taşarsa
     tüm sayfa yatay kaydırılabilir hale geliyordu — POS tam ekranı fixed
     olsa da altındaki içerik document genişliğini etkiliyordu. */
  overflow-x: hidden;
}

/* ---------- Üst bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 28px;
  padding: 12px 22px;
  background: var(--panel);
  border-bottom: 2px solid var(--cizgi);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(135deg, #f2f2f2 0%, #b8b8b8 22%, #e8e8e8 45%, #8a8a8a 68%, #d0d0d0 85%, #a0a0a0 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), inset 0 -2px 3px rgba(0,0,0,0.35),
              0 1px 2px rgba(0,0,0,0.4);
  color: #0a0a0a;
  display: grid; place-items: center;
  font-weight: 800; font-size: 17px; letter-spacing: -0.5px;
  position: relative;
  overflow: hidden;
}
/* Logo aynı kalıyor — üzerinden belirli aralıklarla geçen bir ışık hüzmesi
   ayrı bir katman (::after) olarak eklendi, ikon/gradyanı değiştirmiyor.
   Logonun zemini zaten açık/gümüş renkte olduğundan düz beyaz bir katman
   neredeyse görünmüyordu — "overlay" blend modu zemin ne renkte olursa
   olsun hüzmeyi belirgin şekilde parlatır. */
.brand-mark::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -70%;
  width: 35%;
  height: 160%;
  /* Dar ve keskin geçişli (0-46% ve 54-100% arası çok kısa) bir çekirdek —
     geniş/yumuşak bir parlama yerine ince, net bir "flaş" hattı verir. */
  background: linear-gradient(115deg,
    transparent 0%, transparent 44%,
    rgba(255,255,255,0.75) 48%, #fff 50%, rgba(255,255,255,0.75) 52%,
    transparent 56%, transparent 100%);
  mix-blend-mode: overlay;
  filter: brightness(1.3);
  transform: skewX(-20deg);
  animation: logo-huzme 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes logo-huzme {
  0%     { left: -70%; }
  12.5%  { left: 140%; }
  100%   { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark::after { animation: none; }
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 16px; }
.brand-text small { color: var(--metin-soluk); font-size: 11px; letter-spacing: 0.5px; }

/* min-width:0 şart — flex öğelerinin varsayılan min-width:auto'su, flex:1
   verilmiş olsa bile nav'ın 11 sekmesinin sarmayan toplam genişliğinin altına
   inmesini engelliyordu. Bu da orta genişlikteki (mobil breakpoint'in üstü ama
   sekmelerin tam sığmadığı, ör. ~700-1550px) pencerelerde topbar'ı taşırıp
   sağdaki bağlantı göstergesini (.pano) ve bildirim butonunu html/body'deki
   overflow-x:hidden yüzünden tamamen görünmez (kaydırılamaz) kılıyordu. Artık
   nav kendi içinde yatay kaydırmalı bir şerit oluyor, pano/buton hep görünür. */
nav {
  display: flex; gap: 6px; flex: 1; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }
nav a {
  color: var(--metin-soluk); text-decoration: none;
  padding: 10px 18px; border-radius: 8px;
  font-size: 15px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
nav a:hover { color: var(--metin); background: var(--panel-acik); }
nav a.aktif { color: #0a0a0a; background: var(--vurgu); }

/* Orta genişlik (641-2199px): 11 sekme (~1230px) + marka + bağlantı
   göstergesi + bildirim/çıkış butonları tek satıra ancak ~2000px'te sığar —
   yani 1920'lik standart masaüstü dahil neredeyse her ekranda sekmelerin
   bir kısmı görünmez kaydırmalı şeridin içinde saklı kalıyordu ("Ayarlar"
   kesiliyordu) ve masaüstünde dokunmatik kaydırma olmadığından fark
   edilemiyordu. Çözüm: mobildeki (max-width:640px) desenin geniş hali —
   nav kendi tam genişlik satırına iner, üst satırda marka + pano + butonlar
   kalır. ≥~1290px'te tüm sekmeler ikinci satıra kaydırmasız sığar; daha
   darda (tablet) şerit kendi içinde kayar. Eşik bilerek 2200: ilk deneme
   1900'dü ama gerçek Windows/Segoe UI ölçüleri headless ölçümden ~40px
   genişti, 1920'lik ekranda "Ayarlar" yine kesildi — tek satıra dönüş
   sadece kesin sığan ultra-geniş ekranlara (≥2200) bırakıldı. */
@media (max-width: 2199px) {
  .topbar { flex-wrap: wrap; gap: 4px 28px; }
  .topbar .pano { margin-left: auto; }
  .topbar nav { order: 9; flex: 1 1 100%; }
}
/* Tablet/küçük laptop: sekmeleri sıkılaştır ki ~1000px'te de hepsi sığsın. */
@media (max-width: 1100px) {
  nav a { padding: 10px 12px; font-size: 14px; }
}

.pano {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--metin-soluk);
  background: var(--panel-acik); padding: 8px 14px; border-radius: 20px;
}
.nokta { width: 9px; height: 9px; border-radius: 50%; background: #666; }
.nokta.iyi { background: var(--yesil); }
.nokta.demo { background: var(--mock); }
.nokta.hata { background: var(--kirmizi); }

.btn-bildirim {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--panel-acik); color: var(--metin-soluk);
  border: 1px solid var(--cizgi); border-radius: 20px;
  padding: 8px 14px; cursor: pointer;
}
.btn-bildirim.aktif { color: var(--vurgu); border-color: var(--vurgu); }
.btn-bildirim:disabled { opacity: .6; cursor: default; }

/* ---------- Genel ---------- */
main { padding: 20px 22px; max-width: 1500px; margin: 0 auto; }
.footer {
  text-align: center; padding: 18px 22px 22px;
  font-size: 11px; font-weight: 400; color: var(--metin-soluk);
}
.sayfa-baslik {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; flex-wrap: wrap; gap: 12px;
}
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 15px; font-weight: 700; color: var(--metin-soluk);
     text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.baslik-sag { display: flex; align-items: center; gap: 14px; }
.gunluk-mini { font-size: 15px; font-weight: 600; color: var(--vurgu); cursor: pointer; user-select: none; }

/* ---------- Mağaza aç/kapa mini anahtarı ---------- */
.magaza-anahtarlari { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.magaza-anahtar-kutu {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--cizgi);
  border-radius: 20px; padding: 6px 14px 6px 6px;
  font-size: 13px; font-weight: 600; color: var(--metin-soluk);
}
.magaza-anahtar-metin { display: flex; flex-direction: column; line-height: 1.35; }
.magaza-calisma-saati { font-size: 11px; font-weight: 500; color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.magaza-calisma-saati.saat-disi { color: var(--kirmizi); }
.anahtar { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.anahtar input { opacity: 0; width: 0; height: 0; position: absolute; }
.anahtar-kaydirici {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--kirmizi); border-radius: 22px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 0 9px 1px rgba(240,76,76,0.65);
}
.anahtar-kaydirici::before {
  content: ""; position: absolute; height: 16px; width: 16px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%;
  transition: transform 0.25s ease;
}
.anahtar input:checked + .anahtar-kaydirici {
  background: var(--yesil);
  box-shadow: 0 0 9px 1px rgba(30,215,96,0.7);
}
.anahtar input:checked + .anahtar-kaydirici::before { transform: translateX(16px); }
.anahtar input:disabled + .anahtar-kaydirici { opacity: 0.55; cursor: wait; }

.btn {
  border: none; border-radius: 9px; cursor: pointer;
  font-size: 15px; font-weight: 700; padding: 12px 18px;
  color: #0a0a0a; min-height: 44px;
}
.btn:disabled { opacity: 0.5; cursor: wait; }
.btn-kontrol { background: var(--panel-acik); color: var(--metin); border: 1px solid var(--cizgi); }
.btn-onay { background: var(--vurgu); }
.btn-hazir { background: var(--yesil); }
/* Mutfağa gönder — yeşil "kapat/öde" butonlarından ayrışsın diye turuncu;
   masa adisyon panelinde tam genişlik, ana aksiyon olarak öne çıkar. */
.btn-mutfak { background: #f7941d; width: 100%; margin-bottom: 12px; }
.btn-teslim { background: var(--yesil); }
.btn-iptal { background: transparent; color: var(--kirmizi); border: 1px solid var(--kirmizi); }
/* Hazırlanıyor/Hazır aşamasında İptal ana aksiyon değil — yanlışlıkla
   tıklanmasını azaltmak için Onayla/Hazır/Teslim Edildi'den daha küçük. */
.btn-iptal-kucuk { padding: 6px 10px; font-size: 12px; }
.btn-kucuk { padding: 6px 12px; font-size: 12px; min-height: auto; }

/* ---------- Sipariş kolonları ---------- */
.kolonlar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.kolon h2 { display: flex; align-items: center; gap: 8px; }
.kolon .sayi {
  background: var(--panel-acik); color: var(--metin);
  border-radius: 12px; padding: 1px 10px; font-size: 13px;
}
.kolon-bitti { opacity: 0.75; }
.kartlar {
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - 230px); overflow-y: auto; padding-right: 4px;
}
.bos { color: var(--metin-soluk); font-size: 14px; padding: 18px;
       border: 1px dashed var(--cizgi); border-radius: 10px; text-align: center; }

.kart {
  background: var(--panel); border-radius: 12px;
  border-left: 5px solid var(--cizgi);
  padding: 10px 12px;
  animation: belirme 0.25s ease;
}
@keyframes belirme { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .kart { animation: none; } }

.kart.plat-trendyol { border-left-color: var(--trendyol); }
.kart.plat-yemeksepeti { border-left-color: var(--yemeksepeti); }
.kart.plat-migros { border-left-color: var(--migros); }
.kart.plat-mock { border-left-color: var(--mock); }

.kart-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.plat-etiket {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 5px; background: var(--panel-acik);
  display: inline-flex; align-items: center; gap: 5px;
}
.plat-ikon { width: 13px; height: 13px; border-radius: 3px; }
.plat-trendyol .plat-etiket, .plat-trendyol .sira-rozet { color: var(--vurgu); }
.plat-yemeksepeti .plat-etiket, .plat-yemeksepeti .sira-rozet { color: var(--yemeksepeti); }
.plat-migros .plat-etiket, .plat-migros .sira-rozet { color: var(--migros); }
.plat-mock .plat-etiket, .plat-mock .sira-rozet { color: var(--mock); }
.marka { font-size: 12px; color: var(--metin-soluk); flex: 1; }
.saat { font-size: 13px; color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.sira-rozet { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Otomatik basılan fiş kaybolur/sıkışırsa elle tekrar bastırmak için —
   kart başlığında küçük, göze batmayan bir ikon buton. */
.btn-fis {
  background: transparent; border: none; color: var(--metin-soluk);
  font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 4px; cursor: pointer;
}
.btn-fis:hover { background: var(--panel-acik); color: var(--metin); }
.btn-fis:disabled { opacity: 0.4; cursor: wait; }

/* ---------- Ürünler (menü açma/kapama) ---------- */
.kategori-blok { border: 1px solid var(--cizgi); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.kategori-ust {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  cursor: pointer; background: var(--panel-acik);
}
.kategori-ad { font-weight: 700; flex: 1; }
.kategori-urunler {
  max-height: 0; overflow: hidden; transition: max-height 0.2s ease;
}
.kategori-blok.acik .kategori-urunler { max-height: 3000px; }
.urun-satir-yonetim {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-top: 1px solid var(--cizgi);
}
.urun-yonetim-ad { flex: 1; font-size: 14px; }
.urun-yonetim-fiyat { color: var(--metin-soluk); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- Tamamlanan siparişler — küçük/genişleyen kart ---------- */
.kart-kucuk { padding: 8px 12px; cursor: pointer; }
.kart-kucuk-ozet { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.kart-kucuk-ozet .marka { flex: none; }
.kart-kucuk-ozet .musteri-kisa { color: var(--metin-soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.kart-kucuk-ozet .siparis-no-kisa { margin-left: auto; font-weight: 700; font-size: 12px; }
.kart-kucuk-detay { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.kart-kucuk.acik .kart-kucuk-detay { max-height: 3000px; margin-top: 10px; }
.kart-kucuk .kart-alt { margin-top: 8px; }

/* Hazırlanıyor kartı — fiyat ve uzun ürün açıklaması gösterilmiyor, mutfak
   hızlı taransın diye biraz daha sıkı (açıklama zaten menüde bilinen bir şey,
   burada sadece kart uzuyor). */
.kart-kompakt { padding: 8px 10px; }
.kart-kompakt .kart-ust { margin-bottom: 4px; }
.kart-kompakt .musteri { margin-bottom: 3px; }
.kart-kompakt .urunler { font-size: 12px; }
.kart-kompakt .fiyat { display: none; }
.kart-kompakt .urun-not { display: none; }

/* Trendyol kuryesi siparişi aldı — mutfağın işi bitti, sadece kime gittiği görünsün */
.kart-kuryede { padding: 8px 10px; }
.kart-kuryede .kart-ust { margin-bottom: 4px; }
.kart-kuryede .musteri { margin-bottom: 0; }
.kart-kuryede .siparis-no { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

.kurye-rozet {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px;
  margin-left: 6px; text-transform: uppercase; letter-spacing: 0.3px;
  vertical-align: middle; display: inline-flex; align-items: center; gap: 3px;
}
.kurye-trendyol { background: rgba(29,185,84,0.15); color: var(--yesil); }
.kurye-restoran { background: rgba(240,76,76,0.15); color: var(--kirmizi); }
.kurye-yakinda { background: rgba(224,160,48,0.2); color: #e0a030; animation: kurye-yakinda-vurgu 1.2s ease-in-out infinite; }
@keyframes kurye-yakinda-vurgu {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,160,48,0.35); }
  50% { box-shadow: 0 0 0 4px rgba(224,160,48,0); }
}
.kurye-yolda { background: rgba(46,134,222,0.2); color: #4aa3ff; }
@media (prefers-reduced-motion: reduce) { .kurye-yakinda { animation: none; } }
.kurye-motor { display: inline-block; font-size: 11px; animation: motor-surus 0.7s ease-in-out infinite; }
@keyframes motor-surus {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(1.5px) rotate(-6deg); }
  75% { transform: translateX(-1.5px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) { .kurye-motor { animation: none; } }

.siparis-no { font-weight: 800; font-size: 15px; margin-bottom: 2px; }
.musteri { font-size: 13px; margin-bottom: 5px; }
.musteri small { color: var(--metin-soluk); display: block; font-size: 11px; }
.siparis-notu {
  background: rgba(29,185,84,0.1); border: 1px solid var(--vurgu);
  border-radius: 6px; padding: 4px 8px; font-size: 12px;
  margin-bottom: 6px; line-height: 1.35;
}
/* Kapıda tahsil edilecek (nakit/kart) siparişler — personel parayı/kartı
   almayı unutmasın diye dikkat çekici, kırmızımsı bir uyarı satırı. */
.odeme-rozet {
  background: rgba(240,76,76,0.15); border: 1px solid var(--kirmizi);
  color: var(--kirmizi); border-radius: 6px; padding: 4px 8px;
  font-size: 12px; font-weight: 700; margin-bottom: 6px;
}
.urunler { list-style: none; font-size: 13px; }
.urunler li { padding: 3px 0; border-top: 1px solid var(--cizgi); }
.urun-satir { display: flex; gap: 6px; align-items: baseline; }
.urunler .adet { color: var(--vurgu); font-weight: 700; min-width: 24px; }
.urunler .fiyat { margin-left: auto; color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.liste-fiyat { color: var(--metin-soluk); opacity: 0.65; margin-right: 5px; font-weight: 400; }
.urun-detay { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; margin: 2px 0 0 30px; }
.urun-not { color: var(--metin-soluk); font-style: italic; }
.urun-ekle { color: var(--yesil); font-weight: 700; }
.urun-cikar { color: var(--kirmizi); font-weight: 700; }

.kart-alt {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; gap: 10px;
}
.tutar { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.btnler { display: flex; gap: 8px; }

/* ---------- Raporlar ---------- */
.ozet-kartlar {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 20px;
}
.ozet-kart {
  background: var(--panel); border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.ozet-kart small { color: var(--metin-soluk); font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; }
.ozet-kart strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.yesil { color: var(--yesil); }
.kirmizi { color: var(--kirmizi); }

.rapor-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-bottom: 20px; }
.panel { background: var(--panel); border-radius: 12px; padding: 18px; margin-bottom: 16px; }

.tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.tablo th {
  text-align: left; color: var(--metin-soluk); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 8px 10px; border-bottom: 1px solid var(--cizgi);
}
.tablo td { padding: 9px 10px; border-bottom: 1px solid var(--cizgi);
            font-variant-numeric: tabular-nums; }
.tablo tr:last-child td { border-bottom: none; }

/* ---------- Tarihsel filtre (Raporlar & Geçmiş Siparişler) ---------- */
.tarih-filtre {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.hizli-secim { display: flex; gap: 8px; flex-wrap: wrap; }
.hizli-secim .btn { padding: 8px 14px; min-height: auto; font-size: 13px; }
.hizli-secim .btn.aktif-filtre { background: var(--vurgu); color: #0a0a0a; border-color: var(--vurgu); }
.ozel-aralik { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ozel-aralik label {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--metin-soluk);
}
.ozel-aralik input[type="date"] {
  background: var(--panel-acik); border: 1px solid var(--cizgi); color: var(--metin);
  border-radius: 8px; padding: 7px 9px; font-size: 13px; font-family: inherit;
  color-scheme: dark;
}
.ozel-aralik input[type="date"]:focus { outline: none; border-color: var(--vurgu); }
.ozel-aralik .btn { padding: 8px 16px; min-height: auto; font-size: 13px; }
.filtre-select {
  background: var(--panel-acik); border: 1px solid var(--cizgi); color: var(--metin);
  border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit;
}
.filtre-select:focus { outline: none; border-color: var(--vurgu); }

/* ---------- Geçmiş Siparişler ---------- */
.gun-blok { padding: 14px 18px; }
.gun-baslik {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; cursor: pointer; user-select: none;
}
.gun-baslik strong { font-size: 15px; }
.gun-baslik strong::before { content: '▸'; display: inline-block; margin-right: 8px; color: var(--metin-soluk); transition: transform 0.2s ease; }
.gun-blok.acik .gun-baslik strong::before { transform: rotate(90deg); }
.gun-ozet { font-size: 13px; color: var(--metin-soluk); }
.kartlar-gecmis {
  max-height: 0; overflow: hidden; gap: 8px;
  transition: max-height 0.25s ease;
}
.gun-blok.acik .kartlar-gecmis { max-height: 6000px; margin-top: 12px; }
.rozet.rozet-iptal { background: rgba(240,76,76,0.15); color: var(--kirmizi); }

/* ---------- Ayarlar ---------- */
.uyari {
  background: rgba(29,185,84,0.12); border: 1px solid var(--vurgu);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; font-size: 14px;
  line-height: 1.6;
}
code { background: var(--panel-acik); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.rozet { background: var(--panel-acik); color: var(--metin-soluk);
         padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.rozet-aktif { background: rgba(30,215,96,0.15); color: var(--yesil); }
.rozet-uyari { background: rgba(224,160,48,0.2); color: #e0a030; }
.plat-metin-trendyol { color: var(--trendyol); font-weight: 700; }
.plat-metin-yemeksepeti { color: var(--yemeksepeti); font-weight: 700; }
.plat-metin-migros { color: var(--migros); font-weight: 700; }
.not-hucre { color: var(--metin-soluk); font-size: 13px; }
.dipnot { color: var(--metin-soluk); font-size: 13px; margin-top: 12px; }

/* ---------- Form satırı (genel) — .magaza-form kapsamı dışında da
   kullanılıyor (ör. Çalışanlar/vardiya, Şifre Değiştir modalı), bu yüzden
   burada kapsamsız/genel tanımlı ---------- */
.form-satir {
  display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px;
}
.form-satir label {
  display: flex; flex-direction: column; gap: 6px; font-size: 13px;
  color: var(--metin-soluk); flex: 1; min-width: 180px;
}
.form-satir input[type="text"], .form-satir input[type="password"],
.form-satir input[type="number"], .form-satir select {
  background: var(--panel-acik); border: 1px solid var(--cizgi); color: var(--metin);
  border-radius: 8px; padding: 9px 10px; font-size: 14px; font-family: inherit;
}
.form-satir input:focus, .form-satir select:focus {
  outline: none; border-color: var(--vurgu);
}
/* ---------- Mağaza formu ---------- */
.form-anahtar {
  flex-direction: row !important; align-items: center; gap: 8px !important;
  min-width: auto !important; flex: 0 0 auto !important; justify-content: center;
}
.form-btnler { display: flex; gap: 10px; }
.adimlar { padding-left: 22px; line-height: 2; font-size: 14px; }

/* ---------- Masalar / Adisyon ---------- */
/* Sütun/satır sayısı ve yükseklik JS ile (izgaraBoyutlandir) masa sayısına ve
   ekran boyutuna göre ayarlanır — masalar her zaman ekranı eşit bölecek
   şekilde yerleşir. */
.masa-izgara {
  display: grid; gap: 18px; margin-bottom: 20px;
}
.masa-kart {
  background: var(--panel); border: 2px solid var(--cizgi); border-radius: 16px;
  padding: 18px; text-align: center; cursor: pointer; transition: border-color 0.15s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 0; overflow: hidden;
}
.masa-kart:hover { border-color: var(--vurgu); }
.masa-kart.dolu { border-color: var(--kirmizi); }
.masa-adi { font-weight: 800; font-size: 22px; flex-shrink: 0; }
.masa-ozet {
  font-size: 14px; color: var(--metin-soluk); line-height: 1.55;
  overflow-y: auto; width: 100%;
}
.masa-ozet-satir { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.masa-durum { font-size: 18px; color: var(--metin-soluk); font-weight: 700; flex-shrink: 0; }
.masa-kart.dolu .masa-durum { color: var(--kirmizi); }
/* ---------- Masalar sayfası — sekmeler (Masalar / Yönetim) ---------- */
.sekmeler { display: flex; gap: 8px; margin-bottom: 20px; }
.sekme-btn {
  background: var(--panel-acik); border: 1px solid var(--cizgi); color: var(--metin-soluk);
  border-radius: 20px; padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.sekme-btn.aktif { background: var(--vurgu); color: #0a0a0a; border-color: var(--vurgu); }

/* ---------- Geçmiş (kapatılmış) adisyonlar ---------- */
.gecmis-ozet { font-size: 15px; color: var(--metin-soluk); margin-left: auto; align-self: center; }
.gecmis-ozet strong { color: var(--metin); }
.gecmis-adisyon {
  background: var(--panel); border-radius: 12px; margin-bottom: 10px;
  cursor: pointer; overflow: hidden; border: 1px solid var(--cizgi);
}
.gecmis-ust {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px;
  font-size: 15px;
}
.gecmis-masa { font-weight: 700; min-width: 90px; }
.gecmis-saat { color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.gecmis-odeme { color: var(--metin-soluk); flex: 1; }
.gecmis-tutar { font-weight: 800; font-variant-numeric: tabular-nums; }
.gecmis-detay { display: none; padding: 0 18px 14px; }
.gecmis-adisyon.acik .gecmis-detay { display: block; }
.gecmis-kalem {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-top: 1px solid var(--cizgi); font-size: 14px;
}
.gecmis-not { font-size: 13px; color: var(--vurgu); padding: 2px 0 4px 12px; }
.gecmis-garsonlar {
  display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px;
  color: var(--metin-soluk); padding: 10px 0; border-top: 1px solid var(--cizgi);
}
.gecmis-garsonlar strong { color: var(--metin); }
.gecmis-log { margin-top: 10px; border-top: 1px solid var(--cizgi); padding-top: 8px; }
.gecmis-log-satir { font-size: 13px; padding: 3px 0; color: var(--metin-soluk); }
.gecmis-log-satir strong { color: var(--metin); }

/* ---------- Masa siparişi — tam ekran POS görünümü ---------- */
.pos-tam-ekran {
  position: fixed; inset: 0; z-index: 1000; background: var(--zemin);
  display: flex; flex-direction: column; padding: 18px 24px;
}
.pos-ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-shrink: 0; }
.pos-ust-sol { display: flex; align-items: center; gap: 14px; }
.pos-ust-kapat {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--panel-acik);
  color: var(--metin); font-size: 15px; cursor: pointer; flex-shrink: 0;
}
.pos-ust-masa { display: flex; flex-direction: column; line-height: 1.35; }
.pos-ust-masa strong { font-size: 18px; }
.pos-ust-masa span { font-size: 12px; color: var(--metin-soluk); }
.pos-ust-sag { display: flex; align-items: center; gap: 14px; }
.pos-ust-saat { font-size: 13px; color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.pos-ust-calisan {
  background: var(--panel-acik); color: var(--vurgu); border-radius: 14px;
  padding: 6px 12px; font-size: 13px; font-weight: 700;
}
.calisan-passcode-input {
  width: 100%; text-align: center; font-size: 28px; letter-spacing: 10px;
  padding: 12px; border-radius: 10px; border: 1px solid var(--cizgi);
  background: var(--panel-acik); color: var(--metin); font-family: inherit; margin-bottom: 10px;
}
.calisan-passcode-input:focus { outline: none; border-color: var(--vurgu); }
.calisan-giris-hata { color: var(--kirmizi); font-size: 13px; min-height: 18px; margin-bottom: 10px; }
.pos-ust-kisi {
  background: var(--panel-acik); border: 1px solid var(--cizgi); border-radius: 14px;
  color: var(--metin-soluk); font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 6px 12px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.pos-ust-kisi:hover { border-color: var(--vurgu); color: var(--metin); }

/* Genel, yeniden kullanılabilir kart-modal deseni — native prompt()/confirm()
   dokunmatik ekranlarda (mobil/tablet) küçük/uyumsuz görünüyordu. */
.modal-katman {
  position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-kart {
  background: var(--panel); border: 1px solid var(--cizgi); border-radius: 16px;
  padding: 28px; width: 100%; max-width: 340px; text-align: center;
}
.modal-kart h3 { font-size: 17px; font-weight: 700; margin-bottom: 20px; }
.kisi-stepper { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 24px; }
.kisi-stepper-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--cizgi); flex-shrink: 0;
  background: var(--panel-acik); color: var(--metin); font-size: 22px; font-weight: 700; cursor: pointer;
}
.kisi-stepper-btn:hover { border-color: var(--vurgu); }
.kisi-stepper-sayi { font-size: 34px; font-weight: 800; min-width: 54px; font-variant-numeric: tabular-nums; }
.modal-kart .form-btnler .btn { flex: 1; }
/* Opsiyon seçim modalı (bkz. pos.js opsiyonModalAc) — kisi-modal ile aynı
   .modal-katman/.modal-kart iskeletini kullanır, sadece içerik farklı:
   checkbox listesi + ücretli/ücretsiz etiketi. */
.opsiyon-modal-liste { max-height: 50vh; overflow-y: auto; margin-bottom: 16px; text-align: left; }
.opsiyon-secim-satir { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--cizgi); cursor: pointer; }
.opsiyon-secim-satir input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; }
.opsiyon-secim-ad { flex: 1; }
.opsiyon-secim-fiyat { color: var(--amber); font-variant-numeric: tabular-nums; font-size: 13px; flex-shrink: 0; }
.vardiya-kilit-kart { max-width: 300px; }
.vardiya-kilit-mark { display: block; margin: 0 auto 16px; }
#vardiya-kilit-mesaj { font-size: 15px; font-weight: 600; line-height: 1.5; margin-bottom: 20px; }
.vardiya-kilit-marka { display: block; margin-top: 14px; color: var(--metin-soluk); font-size: 12px; }
/* Adisyon paneli solda, menü sağda (Simpra deseniyle hizalı — HTML'deki
   kaynak sırası da bu yönde değişti). */
.pos-govde { display: grid; grid-template-columns: 360px 1fr; gap: 20px; flex: 1; min-height: 0; }
/* min-width:0 şart — grid hücreleri varsayılan min-width:auto ile içeriğin
   min-content genişliğinin altına inmez; taşan (nowrap) kategori şeridi bu
   olmadan tüm grid'i sağa doğru genişletip adisyon panelini ekran dışına
   iterdi. */
.pos-menu { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
/* Tek satır, yatay kaydırmalı kategori şeridi — çok sayıda kategoride (10+)
   alt alta sarılan chip'ler hem yer kaplıyor hem "karmaşık" görünüyordu;
   yerleşik POS arayüzlerindeki (Toast/Square/Simpra) standart desen budur. */
.pos-kategoriler {
  display: flex; gap: 26px; margin-bottom: 16px; flex-shrink: 0;
  overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; border-bottom: 1px solid var(--cizgi); padding-bottom: 2px;
}
/* Simpra'daki gibi arka planlı chip yerine düz metin + aktifte alt çizgi. */
.pos-kategori-btn {
  background: none; border: none; color: var(--metin-soluk);
  font-size: 17px; font-weight: 600; cursor: pointer;
  flex-shrink: 0; white-space: nowrap; padding: 0 0 12px;
  border-bottom: 3px solid transparent; font-family: inherit;
}
.pos-kategori-btn.aktif { color: var(--metin); border-bottom-color: var(--vurgu); }
.pos-urun-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; overflow-y: auto; align-content: start; padding-right: 4px;
}
.pos-urun-kart {
  background: var(--panel); border: 1px solid var(--cizgi); border-radius: 12px;
  padding: 18px 10px; text-align: center; cursor: pointer; color: var(--metin);
  min-height: 84px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  font-family: inherit;
}
.pos-urun-kart:hover { border-color: var(--vurgu); }
.pos-urun-kart:active { transform: scale(0.96); }
.pos-urun-ad { font-weight: 700; font-size: 14px; line-height: 1.3; }
.pos-urun-fiyat { font-size: 13px; color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; }
.pos-adisyon {
  background: var(--panel); border-radius: 12px; padding: 18px;
  display: flex; flex-direction: column; min-height: 0;
}
/* Sadece dar ekranlarda görünen "tutamaç" — adisyonu alttan açılan bir
   panel olarak aç/kapatmak için (bkz. aşağıdaki @media bloğu). Geniş
   ekranda adisyon zaten hep açık/görünür olduğundan gizli. */
.pos-adisyon-tutamac {
  display: none; width: 100%; align-items: center; justify-content: space-between;
  background: transparent; border: none; color: var(--metin); font-family: inherit;
  font-size: 15px; font-weight: 700; cursor: pointer; padding: 2px 2px 12px;
}
.pos-adisyon-tutamac-ozet { color: var(--vurgu); font-variant-numeric: tabular-nums; }
.pos-adisyon-tutamac-ok { color: var(--metin-soluk); transition: transform 0.25s ease; }
.pos-adisyon.acik .pos-adisyon-tutamac-ok { transform: rotate(180deg); }

/* ---------- Tablet/telefon: menü tam genişlik, adisyon alttan açılır panel ---------- */
@media (max-width: 860px) {
  .pos-tam-ekran { padding: 14px 14px calc(64px + env(safe-area-inset-bottom, 0px)); }
  .pos-govde { grid-template-columns: 1fr; }
  .pos-adisyon {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    border-radius: 16px 16px 0 0; max-height: 75vh;
    box-shadow: 0 -8px 28px rgba(0,0,0,0.5);
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .pos-adisyon-tutamac { display: flex; }
  .pos-adisyon-govde {
    display: flex; flex-direction: column; min-height: 0;
    max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
  }
  .pos-adisyon.acik .pos-adisyon-govde { max-height: 62vh; }
  .pos-kalemler { overflow-y: auto; }
  /* Adisyon paneli açıkken sabit (fixed) olarak ekranın altındaki alanı
     kaplıyor ama ürün ızgarasının kendi kaydırma alanı buna göre küçülmüyordu
     — parmak panelin kapladığı (görünmeyen) bölgeye denk gelince kaydırma
     jesti ızgaraya değil sabit panele gidiyor, "takılmış" gibi hissettiriyordu.
     Izgaranın altına panelin ULAŞABİLECEĞİ EN BÜYÜK yükseklik (.pos-adisyon'un
     kendi max-height:75vh sınırı, bkz. yukarıdaki kural) kadar boşluk
     bırakılıyor ki adisyon kaç kalem olursa olsun (uzun bir siparişte govde
     62vh'ye kadar büyüyebiliyor) son ürün satırı her zaman panelin üstünde,
     dokunulabilir kalsın (panel kapalıyken bu boşluk kullanılmaz, sadece
     fazladan scroll mesafesi olur — görsel bir kayıp yok). */
  .pos-urun-izgara { padding-bottom: 75vh; }
}
/* overflow-x:hidden şart — overflow-y:auto tek başına CSS'e göre overflow-x'i
   de zımnen 'auto' yapar; aşağıdaki .secili kuralındaki (artık kaldırılan)
   negatif margin bu yüzden yatay bir scrollbar açmıştı. */
.pos-kalemler { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pos-kalem-grup { border-bottom: 1px solid var(--cizgi); padding-bottom: 8px; }
.pos-kalem {
  display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer;
}
/* Adet artık "2x Ürün" olarak metne karışmıyor, Simpra'daki gibi ayrı bir
   kare rozette — miktar tek bakışta ürün adından ayrışıyor. */
.pos-kalem-adet {
  flex-shrink: 0; width: 22px; height: 22px; border: 1px solid var(--cizgi); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pos-kalem-ad { flex: 1; }
.pos-kalem-tutar { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--amber); }
/* Bir kaleme dokununca (not butonundan bağımsız, satırın kendisine) o kalem
   Simpra'daki gibi çerçeveyle vurgulanır — hangi ürünle "ilgilendiğin" belli
   olsun diye; işlevsel olarak notu açıp kapatmakla aynı, sadece görsel geri
   bildirim ekliyor. */
/* box-shadow (inset) — border+negatif margin yerine: kutunun gerçek
   boyutunu/genişliğini hiç değiştirmez, bu yüzden overflow riski taşımaz. */
.pos-kalem-grup.secili .pos-kalem { box-shadow: inset 0 0 0 1.5px var(--vurgu); border-radius: 8px; padding: 6px 8px; background: rgba(29,185,84,0.08); }
/* Notu olan kalemin 📝 butonu vurgu renginde — dolu olduğu tek bakışta belli. */
.btn-fis.not-dolu { color: var(--vurgu); }
/* Kaleme eklenen ücretli/ücretsiz opsiyonların ürün adının altındaki özeti
   (ör. "+ Ekstra Kaşar, Acı Sos") — nota (📝) benzer ama ayrı bir alan,
   fiyat burada tekrar gösterilmez (zaten satırın toplam tutarına yansımış). */
.pos-kalem-opsiyon { font-size: 12px; color: var(--metin-soluk); margin-top: 2px; padding-left: 30px; }
.pos-kalem-not { margin-top: 8px; }
.not-textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 76px;
  background: var(--panel-acik); border: 1px solid var(--cizgi); border-radius: 8px;
  color: var(--metin); font-family: inherit; font-size: 15px; line-height: 1.4; padding: 10px 12px;
}
.not-textarea:focus { outline: none; border-color: var(--vurgu); }
.not-textarea::placeholder { color: var(--metin-soluk); }
.pos-adisyon-indirim { font-size: 13px; font-weight: 700; text-align: right; margin-top: 4px; flex-shrink: 0;
  color: var(--kirmizi); font-variant-numeric: tabular-nums; }
/* İndirim butonu, Toplam'ın kendi satırına (ayrı bir tam-genişlik satır
   yerine) gömülü — dar/mobil ekranda adisyon paneli zaten 62vh ile sınırlı
   (bkz. @media 860px), ayrı bir satır eklemek ürün listesinin (pos-kalemler)
   alanını sıkıştırıp okunmaz hale getiriyordu (bkz. 2026-07-17 bug). */
.pos-adisyon-toplam-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 10px 0 14px; flex-shrink: 0; }
.pos-adisyon-toplam-satir .pos-adisyon-toplam { margin: 0; }
.btn-indirim-link {
  background: transparent; border: 1px solid #7d8fca; color: #7d8fca; border-radius: 8px;
  padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; flex-shrink: 0;
}
.btn-indirim-link:hover { background: rgba(125,143,202,0.12); }
.pos-adisyon-toplam { font-size: 20px; font-weight: 800; text-align: right; margin: 10px 0 14px; flex-shrink: 0;
  color: var(--amber); font-variant-numeric: tabular-nums; }

/* ---------- Duyarlılık ---------- */
@media (max-width: 1100px) {
  .kolonlar { grid-template-columns: repeat(2, 1fr); }
  .rapor-grid, .ozet-kartlar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .kolonlar, .rapor-grid, .ozet-kartlar { grid-template-columns: 1fr; }
  .pano { display: none; }

  /* Üst bar dar ekranda: logo/marka üstte tek satır, menü sekmeleri kendi
     satırında yatay kaydırmalı bir şerit (taşarak tüm sayfayı genişletmek
     yerine kendi içinde kaydırılıyor — bildirim butonu da bu sayede
     ekran dışına itilip görünmez olmuyor). */
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; min-width: 0; }
  .topbar .brand { order: 1; min-width: 0; }
  .topbar .btn-bildirim { order: 2; margin-left: auto; }
  .topbar nav {
    /* min-width:0 şart — flex öğelerinin varsayılan min-width:auto'su,
       width:100% verilmiş olsa bile nav'ın içindeki 11 sekmenin sarmayan
       toplam genişliğinin altına inmesini engelliyordu; bu da tüm .topbar'ı
       (ve sayfayı) o gizli genişliğe zorlayıp sağa-sola kaydırılabilir hale
       getiriyordu - nav kendi içinde değil, sanki tüm sayfa kayıyormuş gibi. */
    order: 3; flex: 1 1 100%; width: 100%; min-width: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  nav a { padding: 10px 12px; font-size: 14px; white-space: nowrap; flex-shrink: 0; }
}

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--vurgu); outline-offset: 2px;
}

/* ---------- Yeni sipariş bildirim popup'ları ---------- */
#bildirim-alani {
  /* z-index, masa siparişi tam ekran POS katmanından (1000) yüksek olmalı ki
     personel POS ekranındayken gelen yeni sipariş bildirimi arkada kalmasın. */
  position: fixed; top: 78px; right: 18px; z-index: 1100;
  display: flex; flex-direction: column; gap: 10px;
  width: 340px; max-width: calc(100vw - 36px);
}
.bildirim {
  background: var(--panel); border: 1px solid var(--vurgu); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  opacity: 0; transform: translateX(24px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}
.bildirim.goster { opacity: 1; transform: translateX(0); }
.bildirim-ust {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  cursor: pointer; animation: bildirim-vurgu 1.4s ease-in-out 2;
}
@keyframes bildirim-vurgu {
  0%, 100% { background: transparent; }
  50% { background: rgba(29,185,84,0.18); }
}
.bildirim-ust strong { flex: 1; font-size: 14px; }
.bildirim-tutar { font-weight: 800; font-variant-numeric: tabular-nums; }
.bildirim-detay {
  max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
  padding: 0 14px;
}
.bildirim.acik .bildirim-detay { max-height: 420px; padding: 0 14px 14px; }
.bildirim-detay .musteri { font-size: 14px; margin-bottom: 8px; }
.bildirim-detay .musteri small { color: var(--metin-soluk); display: block; font-size: 12px; }
.bildirim-detay .urunler { list-style: none; font-size: 14px; margin-bottom: 10px; }
.bildirim-detay .urunler li { padding: 4px 0; border-top: 1px solid var(--cizgi); }
.bildirim-detay .urunler .adet { color: var(--vurgu); font-weight: 700; min-width: 26px; }
.bildirim-detay .urunler .fiyat { margin-left: auto; color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.bildirim-btnler { display: flex; gap: 8px; }
.bildirim-btnler .btn { flex: 1; padding: 10px; font-size: 14px; }

@media (max-width: 640px) {
  #bildirim-alani { left: 12px; right: 12px; width: auto; top: 70px; }
}

/* ---------- Engelleyici olmayan küçük uyarı (ör. platforma bildirilemedi) ---------- */
#uyari-toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 200;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: #2a2110; border: 1px solid #e0a030; color: #f2d9a0;
  padding: 10px 16px; border-radius: 10px; font-size: 13px; max-width: min(90vw, 460px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#uyari-toast.goster { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Mutfağa gönderim bilgi toast'ı (yeni sipariş sesiyle birlikte) ---------- */
#mutfak-toast {
  position: fixed; left: 50%; bottom: 70px; z-index: 200;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: #0f2a1a; border: 1px solid var(--yesil); color: #b8f2cf;
  padding: 10px 16px; border-radius: 10px; font-size: 13px; max-width: min(90vw, 460px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#mutfak-toast.goster { opacity: 1; transform: translate(-50%, 0); }

/* ---------- AI Asistan — sağ-alt floating chat widget (bkz. ROADMAP madde 3) ---------- */
#asistan-widget { position: fixed; right: 20px; bottom: 20px; z-index: 250; }
#asistan-widget-btn {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--vurgu); color: #0a0a0a; font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
#asistan-widget-panel {
  display: none; flex-direction: column; overflow: hidden;
  position: absolute; right: 0; bottom: 68px;
  width: 360px; max-width: calc(100vw - 40px);
  height: 480px; max-height: calc(100vh - 120px);
  background: var(--panel); border-radius: 14px; border: 1px solid var(--cizgi);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
}
#asistan-widget-panel.acik { display: flex; }
.asistan-widget-baslik {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--cizgi); font-weight: 700; font-size: 14px;
}
.asistan-widget-kapat { background: none; border: none; color: var(--metin-soluk); cursor: pointer; font-size: 16px; padding: 4px; }
.asistan-mesajlar {
  flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.asistan-bos { color: var(--metin-soluk); font-size: 13px; margin: auto; text-align: center; }
.asistan-mesaj { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.asistan-mesaj.kullanici { align-self: flex-end; background: var(--vurgu); color: #0a0a0a; }
.asistan-mesaj.asistan { align-self: flex-start; background: var(--panel-acik); border: 1px solid var(--cizgi); }
.asistan-mesaj.hata { align-self: flex-start; background: transparent; border: 1px solid var(--kirmizi); color: var(--kirmizi); }
.asistan-mesaj.dusunuyor { align-self: flex-start; color: var(--metin-soluk); font-style: italic; }
.asistan-aksiyonlar { align-self: flex-start; display: flex; flex-direction: column; gap: 4px; max-width: 85%; }
.asistan-aksiyon {
  font-size: 11px; color: var(--metin-soluk); background: var(--panel-acik);
  border-radius: 8px; padding: 5px 9px; border-left: 2px solid var(--vurgu);
}
.asistan-aksiyon.basarisiz { border-left-color: var(--kirmizi); }
.asistan-girdi {
  display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--cizgi);
}
.asistan-girdi textarea {
  flex: 1; resize: none; background: var(--panel-acik); border: 1px solid var(--cizgi); color: var(--metin);
  border-radius: 10px; padding: 8px 10px; font-size: 13px; font-family: inherit; max-height: 100px;
}
.asistan-girdi textarea:focus { outline: none; border-color: var(--vurgu); }
.asistan-girdi .btn { min-height: auto; align-self: flex-end; padding: 9px 16px; font-size: 13px; }
#asistan-kota { font-size: 11px !important; }

@media (max-width: 640px) {
  #asistan-widget { right: 12px; bottom: 12px; }
  #asistan-widget-panel { width: calc(100vw - 24px); height: calc(100vh - 140px); }
}