/* ---------- Garson adisyon (POS) ekrani mockup'i - 2026-08-30 ----------
   Burak: "pazarlama sayfamizda adisyon-programi kismina biz sadece mutfak
   ekranini ekledik, adisyon ekranini da ekleyelim, oraya hicbir sekilde
   adisyon gozukmuyor ... garson adisyon acip urun eklesin not yazsin bunu
   interaktif bir sekilde gorelim hesap kapatsin".
   MUTFAK MOCKUP'INDAN FARKI: bu INTERAKTIF. Ziyaretci gercekten tiklar.
   Bolum gorunur olunca kendi kendine oynayan bir tur baslar, ziyaretci
   ekrana dokundugu anda tur DURUR ve kontrol ona gecer. Bu, "izlenen" bir
   video ile "denenen" bir urun arasindaki fark.
   Kabuk mutfak mockup'iyla ORTAK (.mockup-cerceve/.mockup-ust/.mockup-icerik),
   yeni siniflar .ps-* onekiyle ayri: iki demo ayni sayfada yasiyor.
   Olculer ve renkler app/static/style.css'ten birebir alindi:
   .pos-govde 360px 1fr yani SEPET SOLDA MENU SAGDA (bilincli karar, Simpra
   deseni), fiyatlar --amber #f2a93b (vurgu yesilinden AYRI, parasal anlam),
   mutfaga gonder turuncu #f7941d, kapatma #1ed760, iptal ve dolu masa
   kenari kirmizi #f04c4c. */
/* SABIT YUKSEKLIK (2026-08-30, Burak: "menuye urun eklenince tablet ekrani
   genisliyor"). Once min-height vardi: "Tumu" kategorisinde 16 urun alt alta
   dizilince cerceve ~630px'e cikiyor, dar bir kategoriye gecince ~360px'e
   duşuyordu. Artik sahne SABIT; icerideki iki liste (adisyon kalemleri ve urun
   izgarasi) kendi icinde kayiyor, disari tasmiyor. Yukseklik degistirilecekse
   iki ekranin da (masalar ve pos) buraya SIGMASI gerekir. */
.ps-sahne{position:relative;height:470px;}
.ps-ekran{display:none;}
.ps-ekran.acik{display:flex;flex-direction:column;height:100%;}

/* Masa izgarasi (baslangic ekrani) */
.ps-serit{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #282828;margin-bottom:14px;}
.ps-serit b{color:#fff;font-size:14px;}
.ps-serit span{color:#a7a7a7;font-size:12px;}
.ps-ipucu{margin-left:auto;color:#1db954;font-size:12px;font-weight:700;}
.ps-masalar{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  align-content:start;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;}
.ps-masalar::-webkit-scrollbar{display:none;}
.ps-masa{background:#141414;border:1px solid #282828;border-radius:10px;padding:13px 12px;color:#fff;
  text-align:left;cursor:default;min-height:94px;display:flex;flex-direction:column;gap:3px;font:inherit;}

.ps-masa.dolu{border-color:#f04c4c;border-width:2px;}
.ps-masa-ad{font-weight:700;font-size:15px;}
.ps-masa-durum{font-size:12.5px;color:#a7a7a7;line-height:1.4;}
.ps-masa-tutar{margin-top:auto;font-weight:700;color:#f2a93b;font-size:14px;font-variant-numeric:tabular-nums;}

/* POS tam ekrani */
.ps-ust{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid #282828;margin-bottom:14px;}
.ps-geri{background:transparent;border:1px solid #282828;color:#a7a7a7;border-radius:8px;width:32px;height:32px;cursor:default;font-size:14px;line-height:1;}

.ps-baslik b{display:block;color:#fff;font-size:15px;font-weight:800;line-height:1.3;}
.ps-baslik span{color:#a7a7a7;font-size:12px;}
.ps-kisi{background:#1a1a1a;border:1px solid #282828;color:#fff;border-radius:8px;padding:5px 10px;font-size:12.5px;}
.ps-sag{margin-left:auto;text-align:right;}
.ps-sag b{display:block;color:#fff;font-size:12.5px;font-weight:600;}
.ps-sag span{color:#a7a7a7;font-size:11.5px;font-variant-numeric:tabular-nums;}
.ps-govde{display:grid;grid-template-columns:360px minmax(0,1fr);gap:20px;align-items:stretch;
  flex:1;min-height:0;}
/* minmax(0,1fr) SART: grid kolonunun varsayilan min-width'i auto'dur ve
   kategori seridi white-space:nowrap oldugu icin min-content genisligi
   buyuk cikar. 1fr birakilsaydi kolon tasar, urun izgarasinin sagi
   .mockup-cerceve'nin overflow:hidden'i altinda KIRPILIRDI. */
.ps-govde > div{min-width:0;}

/* Sol kolon: adisyon */
.ps-adisyon{background:#121212;border:1px solid #282828;border-radius:12px;padding:14px;
  display:flex;flex-direction:column;min-height:0;}
.ps-adisyon-ust{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.ps-adisyon-ust b{color:#fff;font-size:14px;}
.ps-adisyon-ust span{color:#a7a7a7;font-size:12px;}
/* flex:1 + min-height:0 + overflow: urun eklendikce panel BUYUMEZ, liste kayar. */
.ps-kalemler{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;}
.ps-kalemler::-webkit-scrollbar{display:none;}
.ps-bos{color:#a7a7a7;font-size:13px;padding:44px 0;text-align:center;}
.ps-kalem{border-bottom:1px solid #282828;padding:9px 0;}
.ps-kalem-satir{display:flex;align-items:center;gap:7px;}
.ps-adet{flex:0 0 auto;min-width:22px;height:22px;line-height:20px;text-align:center;border:1px solid #282828;
  border-radius:6px;font-size:12.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;}
.ps-kalem-ad{flex:1;color:#fff;font-size:13.5px;font-weight:600;}
.ps-kalem-tutar{color:#f2a93b;font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;}
.ps-mini{background:transparent;border:1px solid #282828;color:#a7a7a7;border-radius:6px;
  width:26px;height:26px;cursor:default;font-size:12px;line-height:1;padding:0;}

.ps-mini.not-dolu{color:#1db954;border-color:#1db954;}
.ps-kalem-ops{margin-top:3px;padding-left:29px;font-size:12.5px;color:#a7a7a7;}
.ps-kalem-not{margin-top:3px;padding-left:29px;font-size:12.5px;color:#e7d9a8;}
.ps-not-alan{margin-top:8px;padding-left:29px;}
.ps-not-alan textarea{width:100%;min-height:58px;background:#1a1a1a;border:1px solid #282828;border-radius:8px;
  color:#fff;font:inherit;font-size:12.5px;padding:8px;resize:none;}
.ps-not-kaydet{margin-top:6px;background:transparent;border:1px solid #1db954;color:#1db954;border-radius:8px;
  padding:5px 11px;font-size:12px;font-weight:700;cursor:default;}
.ps-not-durum{margin-left:8px;font-size:12px;color:#1db954;}
.ps-toplam{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid #282828;}
.ps-toplam b{color:#fff;font-size:14px;}
.ps-toplam span{color:#f2a93b;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;}
.ps-eylemler{margin-top:12px;display:grid;gap:8px;}
.ps-btn{border:0;border-radius:8px;padding:11px;font-size:13.5px;font-weight:700;cursor:default;font-family:inherit;}
.ps-btn-mutfak{background:#f7941d;color:#1a1000;}
.ps-btn:disabled{filter:brightness(.7);cursor:default;}
.ps-ikili{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ps-btn-kapat{background:#1ed760;color:#04170a;}
.ps-btn-iptal{background:transparent;border:1px solid #f04c4c;color:#f04c4c;}

/* Sag kolon: menu */
/* Kaydirma cubugu GIZLI ama kaydirma acik: dar ekranda kategori seridi
   yatay kayar, fakat pazarlama sayfasinin ortasinda duran gri bir cubuk
   ekrani "bozuk" gosterir. */
.ps-kategoriler{display:flex;gap:22px;overflow-x:auto;border-bottom:1px solid #282828;
  margin-bottom:14px;scrollbar-width:none;-ms-overflow-style:none;}
.ps-kategoriler::-webkit-scrollbar{display:none;}
.ps-kat{background:transparent;border:0;border-bottom:3px solid transparent;color:#a7a7a7;font:inherit;
  font-size:14px;font-weight:600;padding:0 0 9px;white-space:nowrap;cursor:default;}
.ps-kat.aktif{color:#fff;border-bottom-color:#1db954;}
.ps-menu{display:flex;flex-direction:column;min-width:0;min-height:0;}
.ps-urunler{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  align-content:start;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;}
.ps-urunler::-webkit-scrollbar{display:none;}
.ps-urun{background:#141414;border:1px solid #282828;border-radius:12px;padding:16px 10px;min-height:84px;
  color:#fff;cursor:default;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:6px;font:inherit;}

.ps-urun b{font-size:13px;font-weight:700;line-height:1.3;}
.ps-urun span{color:#f2a93b;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;}

/* Modal ve akis karti */
.ps-ortu{position:absolute;inset:0;background:rgba(0,0,0,.74);display:none;align-items:center;justify-content:center;padding:16px;z-index:3;}
.ps-ortu.acik{display:flex;}
.ps-modal{background:#121212;border:1px solid #282828;border-radius:14px;padding:18px;width:100%;max-width:390px;color:#fff;}
.ps-modal h4{margin:0 0 12px;font-size:15px;}
.ps-modal-govde{color:#a7a7a7;font-size:13.5px;line-height:1.55;margin:0 0 14px;}
.ps-ops{list-style:none;margin:0 0 14px;padding:0;max-height:206px;overflow:auto;scrollbar-width:none;}
.ps-ops::-webkit-scrollbar{display:none;}
.ps-ops-baslik{margin:10px 0 4px;font-size:11.5px;font-weight:800;letter-spacing:.6px;color:#1db954;}
.ps-ops label{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13.5px;cursor:default;}
.ps-ops label i{margin-left:auto;color:#f2a93b;font-size:12.5px;font-style:normal;}
.ps-modal-btnler{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ps-akis{text-align:center;}
.ps-halka{width:42px;height:42px;margin:0 auto 12px;border:3px solid #282828;border-top-color:#f7941d;
  border-radius:50%;animation:ps-don .9s linear infinite;}
@keyframes ps-don{to{transform:rotate(360deg);}}
.ps-akis b{display:block;font-size:14px;margin-bottom:4px;}
.ps-akis span{color:#a7a7a7;font-size:12.5px;}

@media (prefers-reduced-motion: reduce){
  .ps-halka{animation:none;border-top-color:#282828;}
}
@media(max-width:860px){
  /* MOBILDE DE SABIT YUKSEKLIK (2026-08-31, Burak: "mobilde asagi kaydirinca
     takiliyor gibi"). Ilk surum burada height:auto'ya donuyordu: masalar
     ekrani ~670px, POS ekrani ~831px OLCULDU - kendi kendine oynayan tur her
     ekran degisiminde sayfa yuksekligini 161px oynatiyordu ve kaydirma
     sirasinda demonun altindaki her sey zipliyordu ("takiliyor" hissi buydu).
     Masaustundeki sabit-olcu karari artik mobilde de gecerli: sahne 700px,
     iki ekran da 100%'e oturur, listeler KENDI ICINDE kayar.
     Sepet USTTE kaliyor (siparisi goren taraf o), saat/garson seridi dar
     ekranda gizli. */
  .ps-sahne{height:700px;}
  .ps-govde{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);}
  /* Adisyon blogu (ust satir) icerigiyle BUYUMESIN: kalem listesi sabit,
     kalan yukseklik menuye. Urun kartlari iki satir sigsin diye biraz basik. */
  .ps-kalemler{flex:none;height:140px;}
  .ps-urun{min-height:72px;padding:12px 10px;}
  /* 12 masa 6 satir tutuyor ve 700px'te son satir yarim kirpiliyordu
     (kaydirilamaz da: pointer-events:none). 10 masa 5 satir; stretch
     kalan dibi doldurur, bos siyah bant kalmaz. */
  .ps-masa:nth-child(n+11){display:none;}
  .ps-masalar{align-content:stretch;}
  .ps-sag{display:none;}
  .ps-masalar,.ps-urunler{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));}
}

/* ZIYARETCI KURCALAYAMAZ (2026-08-30, Burak: "insanlar buraya tiklayip
   degistirebiliyor ekleme cikarma yapabiliyor"). Once demo interaktifti;
   sahada ziyaretciler ekrani bozuk/yarim birakiyordu. Artik SADECE kendi
   kendine oynuyor. pointer-events fare ve dokunmayi kesiyor; klavye icin
   butonlara tabindex="-1" veriliyor (bkz. pos-demo.js) ve sahne
   aria-hidden - ekran okuyucuya bolum basligi ve paragrafi yetiyor. */
.ps-sahne{pointer-events:none;user-select:none;}