@charset "utf-8";
/* ==========================================================================
   Hakkı Usta'nın Adana Sofrası — stil

   🔴 PALET SİTEYE ÖZEL. Her özel site farklı tasarım olmalı (kullanıcı kuralı).
   Aygün kırmızı+sarı, Beylik koyu kırmızı+krem; burası KÖMÜR + KOR.
   Kaynak: ocakbaşı — kömürün siyahı, korun turuncusu, lavaşın kremi.

   🔴 Ö13 — İLK EKRAN FOTOĞRAFLA AÇILIR. Kahraman tam ekran görsel; metin
   üstte, az. Müşteri eleştirisi "siteler metne kaçmış" idi.

   🔴 Ö12 — HAREKET CSS İLE. Belirme `animation-timeline: view()` ile;
   `opacity:0` + JS deseni dört kez bozuldu ve sayfa bembeyaz kaldı.
   Betik çalışmazsa içerik GÖRÜNÜR kalır.
   ========================================================================== */

:root {
  --komur:#14100e;  --is:#1e1816;   --kul:#2b2320;
  --kor:#e2561b;    --kor-koy:#b53d0c;  --kor-ac:#ff7a3d;
  --lavas:#f7efe4;  --krem:#efe3d2;  --duman:#a1938a;
  --cizgi:#3a302c;  --cizgi-ac:#e3d7c6;
  --yuvarlak:4px;            /* köşeler KESKİN — ocakbaşı, pastane değil */
  --olcu:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--lavas); color:var(--komur);
  font:400 17px/1.65 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--kor-koy);text-decoration-thickness:1px;text-underline-offset:2px}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(34px,6vw,62px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:clamp(19px,2.2vw,23px)}
p{margin:0 0 1em}

.kapsa{width:min(100% - 32px,var(--olcu));margin-inline:auto}  /* 16px yan boşluk */
.gizle-gorsel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.atla{position:absolute;left:-9999px;background:var(--komur);color:var(--lavas);padding:10px 16px;z-index:100}
.atla:focus{left:12px;top:12px}

/* ---------------------------------------------------------------- başlık */
.ust{position:sticky;top:0;z-index:50;background:rgba(20,16,14,.94);
     backdrop-filter:blur(8px);border-bottom:1px solid var(--cizgi)}
.ust-ic{display:flex;align-items:center;gap:20px;min-height:102px}
/* 🔴 LOGO YANDA YAZIYLA, ALTINDA DEĞİL. Önce sütundu; logo küçük kalıyor ve
   yazı altına düşüp başlığı gereksiz yükseltiyordu. Artık SATIR: logo solda
   ve büyük, kısa künye sağında iki satır. */
.marka{display:flex;flex-direction:row;align-items:center;gap:13px;
       text-decoration:none;color:var(--lavas);margin-right:auto}
/* 🔴 `align-self:flex-start` ŞART. `.marka` bir flex SÜTUNU; sütunda
   çapraz eksen YATAYDIR ve varsayılan `align-items:normal` (=stretch)
   genişliği sütuna uyduruyor. Değiştirilmiş genişlik + sabit yükseklik =
   EN-BOY BOZULUYOR (ölçüldü: doğal 1.61, çizilen 1.26).
   `aspect-ratio` de yazıldı: logo dosyası değişse bile oran korunur. */
/* 🔴 76 px BU LOGONUN TAVANI. Kaynak dosya 241x150; retina ekranda (DPR 2)
   net görünmesi için ekranda çizilen genişliğin İKİ KATI piksel gerekiyor.
   76 px yükseklik = 122 px genişlik = 244 px gerekli — elimizde 241 var,
   yani tam sınırdayız. Daha büyüğü BULANIK çıkar.
   Firmadan vektör (svg/pdf) ya da en az 800 px genişlikte logo istenecek
   (site.php A2); o gelince bu değer serbestçe büyütülebilir. */
.marka img{width:auto;height:76px;flex:none;
           aspect-ratio:241/150;object-fit:contain}
.marka-yazi{font-weight:800;font-size:21px;letter-spacing:-.01em}
.marka-alt{font-size:11.5px;line-height:1.5;letter-spacing:.09em;text-transform:uppercase;
            color:var(--duman);white-space:nowrap}
.gezinti{display:flex;align-items:center;gap:26px}
.gezinti a{color:var(--krem);text-decoration:none;font-weight:600;font-size:15.5px}
.gezinti a:hover,.gezinti a[aria-current]{color:var(--kor-ac)}
.ust-tel{padding:9px 16px;border:1px solid var(--kor);border-radius:var(--yuvarlak);
         color:var(--kor-ac)!important;white-space:nowrap}
.ust-tel:hover{background:var(--kor);color:#fff!important}
.menu-dugme{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.menu-dugme span{display:block;width:24px;height:2px;background:var(--lavas)}

/* ---------------------------------------------------------------- kahraman */
.kahraman{position:relative;min-height:min(86vh,720px);display:flex;align-items:flex-end;
          background:var(--komur);overflow:hidden}
.kahraman-foto{position:absolute;inset:0}
.kahraman-foto img{width:100%;height:100%;object-fit:cover}
/* 🔴 Metin okunurluğu için örtü ŞART — üstteki yazı fotoğrafın açık yerine
   denk gelirse okunmaz. Ölçülen kontrast hedefi ≥ 4.5. */
/* 🔴 ÖRTÜ HAFİFLETİLDİ. Önce üstten alta .15 → .55 → .93 idi; fotoğrafın
   ortası da kararıyordu ve yemek "filigran altında" görünüyordu. Artık üst
   yarı neredeyse açık, karartma YALNIZ metnin oturduğu alt banda toplanmış.
   Kontrast ölçülerek seçildi, göz kararı değil. */
.kahraman::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(20,16,14,.04) 0%,
    rgba(20,16,14,.10) 38%,
    rgba(20,16,14,.62) 74%,
    rgba(20,16,14,.88) 100%)}
.kahraman-ic{position:relative;z-index:2;padding:64px 0 54px;color:var(--lavas);max-width:760px}
.kahraman-etiket{display:inline-block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kor-ac);border-left:3px solid var(--kor);padding-left:10px;margin-bottom:16px}
.kahraman h1{color:#fff;margin-bottom:16px}
.kahraman-ozet{font-size:clamp(16px,1.8vw,19px);color:var(--krem);max-width:56ch;margin-bottom:26px}

.dugmeler{display:flex;flex-wrap:wrap;gap:12px}
.dugme{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:var(--yuvarlak);
       font-weight:700;font-size:15.5px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.dugme-ana{background:var(--kor);color:#fff}
.dugme-ana:hover{background:var(--kor-koy)}
.dugme-hayalet{border-color:rgba(255,255,255,.55);color:#fff}
.dugme-hayalet:hover{background:rgba(255,255,255,.14)}
.dugme-koyu{background:var(--komur);color:var(--lavas)}
.dugme-koyu:hover{background:var(--is)}

/* ------------------------------------------------------- manşet gizleme */
/* 🔴 VARSAYILAN GÖRÜNÜR. `.manset-kapali` sınıfı YALNIZ betik tarafından,
   yalnız ziyaretçi öyle seçtiyse konur. Sınıf hiç konmazsa manşet açıktır —
   yani localStorage okunamazsa, betik düşerse ya da JS kapalıysa kayıp yok.

   Gizliyken manşet SIFIRLANMAZ, ince bir şeride iner: başlık ve çağrı
   düğmeleri kalır. Tamamen kaldırmak, gizleyen ziyaretçinin "Menüyü görün"
   düğmesini de kaybetmesi demekti. */
.manset-gizle{position:absolute;z-index:4;right:16px;top:16px;
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;cursor:pointer;
  border:1px solid rgba(255,255,255,.45);border-radius:999px;
  background:rgba(20,16,14,.42);color:#fff;font:inherit;font-size:12.5px;font-weight:600;
  backdrop-filter:blur(4px)}
.manset-gizle:hover{background:rgba(20,16,14,.68)}
.manset-gizle:focus-visible{outline:2px solid var(--kor-ac);outline-offset:2px}

/* 🔴 GİZLİ = TAMAMEN GİZLİ (kullanıcı kararı, 2026-10-05).
   Önce başlık gidiyor ama çağrı düğmeleri ince bir şeritte kalıyordu;
   kullanıcı o bandın da gitmesini istedi. Artık yalnız "Manşeti göster"
   bağlantısı duruyor — o da kalmasa manşet bir daha AÇILAMAZDI.
   Düğmeler kaybolmuyor: aynı eylemler üst menüde zaten var (Menü + telefon). */
.kahraman.manset-kapali{min-height:0;background:transparent}
.kahraman.manset-kapali .manset,
.kahraman.manset-kapali::after,
.kahraman.manset-kapali .kahraman-ic{display:none}
/* 🔴 `float` BURADA ÇALIŞMAZ. `.kahraman` bir flex kapsayıcısı; flex öğeleri
   float'ı YOK SAYAR, düğme de sola düşüyordu. Hizalama flex'in kendi aracıyla
   yapılıyor: `justify-content:flex-end`.

   🔴 KENARA YAPIŞMIYOR. Sağ boşluk, içerik sütununun (`.kapsa`, 1180px) sağ
   kenarıyla aynı hizaya geliyor: dar ekranda 16px gutter, geniş ekranda
   sütunun dışında kalan payın yarısı. Düğme böylece menüyle aynı eksende
   duruyor, ekranın köşesine sıkışmıyor. */
.kahraman.manset-kapali{display:flex;justify-content:flex-end;align-items:center}
.kahraman.manset-kapali .manset-gizle{position:static;
  margin:9px max(16px, calc((100% - var(--olcu)) / 2)) 9px 0;
  border-color:var(--cizgi-ac);background:transparent;
  color:var(--duman);backdrop-filter:none}
.kahraman.manset-kapali .manset-gizle:hover{background:var(--buz);color:var(--komur)}
@media (max-width:620px){
  .manset-gizle{right:12px;top:12px;padding:6px 11px;font-size:12px}
}

/* ---------------------------------------------------------------- manşet */
/* 🔴 BEŞ KARE ÜST ÜSTE, SIRAYLA BELİREN. Dönmeyi CSS yapıyor; betik yok.
   Temel durumda YALNIZ İLK KARE görünür — animasyon desteklenmezse ya da
   ziyaretçi hareketi kapattıysa manşet sabit bir fotoğraf olur, boş değil.

   Zamanlama: 30 sn tur / 5 kare = kare başına 6 sn.
   Gecikmeler NEGATİF: her kare turun farklı bir noktasından başlar, böylece
   açılışta hepsi birden görünmez. i. kare için -(30 - 6i) sn.

   Ken Burns: görünür kare çok hafif yakınlaşır (1 → 1.06). Abartılırsa
   yemek fotoğrafı bulanıklaşıyor; 1.06 sınırı ölçerek seçildi. */
.manset{position:absolute;inset:0;overflow:hidden}
.manset-kare{position:absolute;inset:0;opacity:0}
.manset-kare:first-child{opacity:1}
.manset-kare img{width:100%;height:100%;object-fit:cover}

@media (prefers-reduced-motion: no-preference){
  /* 🔴 GECİKMELER 1,5 sn KAYDIRILDI. Önce 0/-24/-18/-12/-6 idi ve
     AÇILIŞTA İKİ KARE BİRDEN opaklık 1 oluyordu (ölçüldü): 1. kare turun
     başında, 5. kare henüz sönmemiş. DOM'da sonra gelen üste bindiği için
     ziyaretçi açılışta YANLIŞ kareyi görüyordu — üstelik `fetchpriority="high"`
     verdiğimiz ilk kare altta kalıyordu.
     Çözüm: kareye SÖNME-BELİRME payı (3%..23%) + her kare turun ortasından
     başlasın diye 1,5 sn kaydırma. Artık t=0'da yalnız 1. kare açık. */
  .manset-kare{animation:mansetDon 30s linear infinite}
  .manset-kare:nth-child(1){animation-delay:-1.5s}
  .manset-kare:nth-child(2){animation-delay:-25.5s}
  .manset-kare:nth-child(3){animation-delay:-19.5s}
  .manset-kare:nth-child(4){animation-delay:-13.5s}
  .manset-kare:nth-child(5){animation-delay:-7.5s}
  @keyframes mansetDon{
    0%   {opacity:0;transform:scale(1)}
    3%   {opacity:1}
    20%  {opacity:1}
    23%  {opacity:0;transform:scale(1.06)}
    100% {opacity:0;transform:scale(1)}
  }
}

/* ---------------------------------------------------------------- şerit */
/* 🔴 SONSUZ ŞERİT: liste İKİ KEZ basılır, ikinci kopya aria-hidden.
   Kareler `loading="lazy"` ALMAZ — şerit kayarken geç yüklenen kare boşluk
   bırakıyor. */
.serit{overflow:hidden;background:var(--komur);padding:14px 0;border-block:1px solid var(--cizgi)}
.serit-ray{display:flex;gap:14px;width:max-content;animation:kay 48s linear infinite}
.serit-ray img{width:260px;height:163px;object-fit:cover;border-radius:var(--yuvarlak);opacity:.82}
.serit:hover .serit-ray{animation-play-state:paused}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------- bölüm */
/* 🔴 DOLGU KISILDI. 96px tepe değeri kahramanın hemen ardından iyi
   gidiyordu, ama şeritten sonra koca bir boşluk bırakıyordu — ölçüldü:
   şerit ile "MENÜ" arası ~96 px bomboş. 72'ye indi; bölüm aralarındaki
   nefes duruyor, boşluk kaybolmuyor. */
.bolum{padding:clamp(44px,5.5vw,72px) 0}
/* Şeridin hemen ardından gelen bölüm daha da yakın dursun: şerit zaten
   görsel bir ayraç, üstüne bir de büyük boşluk gerekmiyor. */
.serit + .bolum{padding-top:clamp(30px,3.5vw,44px)}
/* 🔴 İÇ SAYFADA ÜST DOLGU KISALIR. Ana sayfada bölüm kahramanın
   ardından gelir ve 96px nefes iyi gider; iç sayfada ilk bölüm doğrudan
   başlığın altındadır ve aynı dolgu koca bir boşluk bırakıyor. */
main > .bolum:first-child{padding-top:30px}
/* Kırıntı satırı başlığa yapışık durmalı; `.bolum-bas`ın 38px alt
   boşluğu burada fazla. */
.kirinti{margin:0 0 14px;font-size:14.5px}
.bolum-koyu{background:var(--komur);color:var(--lavas)}
.bolum-koyu h2{color:#fff}
.bolum-koyu p{color:var(--krem)}
.bolum-bas{max-width:62ch;margin-bottom:28px}
.bolum-bas .ustyazi{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kor);font-weight:700;margin-bottom:10px}

/* ---------------------------------------------------------------- menü ızgarası */
/* 🔴 KARE TAVANI 640x400. Kart bundan büyük çizilmez, yoksa bulanır. */
.izgara{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.kart{background:#fff;border:1px solid var(--cizgi-ac);border-radius:var(--yuvarlak);
      overflow:hidden;display:flex;flex-direction:column;
      transition:transform .18s ease,box-shadow .18s ease}
.kart:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,16,14,.14)}
.kart-foto{aspect-ratio:16/10;background:var(--kul);overflow:hidden}
.kart-foto img{width:100%;height:100%;object-fit:cover}
.kart-ic{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.kart h3{margin:0;font-size:18.5px}
.kart-ozet{margin:0;font-size:14.5px;color:#5c5047}
.kart-alt{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.fiyat{font-weight:800;font-size:17px;color:var(--kor-koy)}
/* Fiyatı olmayan kalem: boş "0 ₺" yazmak yerine sessiz kalır. */
.fiyat:empty{display:none}
.kart-git{font-size:14px;font-weight:700;color:var(--kor-koy);text-decoration:none}

/* kapaksız kart — fotoğrafı olmayan kalem (örn. Bumbar) */
.kart-yazili .kart-foto{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--is),var(--kul))}
.kart-yazili .kart-foto span{color:var(--duman);font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* ---------------------------------------------------------------- hikâye */
.ikili{display:grid;gap:clamp(28px,5vw,60px);grid-template-columns:1fr 1fr;align-items:center}
.ikili-foto img{width:100%;border-radius:var(--yuvarlak)}

/* ---------------------------------------------------------------- sayaç */
.sayaclar{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
          border-top:1px solid var(--cizgi);padding-top:28px;margin-top:34px}
.sayac b{display:block;font-size:clamp(30px,4vw,44px);color:var(--kor-ac);line-height:1}
.sayac span{font-size:13.5px;color:var(--duman)}

/* ---------------------------------------------------------------- SSS */
.sss{display:grid;gap:14px;grid-template-columns:1fr 1fr;align-items:start}
.sss details{background:#fff;border:1px solid var(--cizgi-ac);border-radius:var(--yuvarlak);padding:16px 18px}
.sss summary{cursor:pointer;font-weight:700;font-size:16.5px}
.sss summary::marker{color:var(--kor)}
.sss p{margin:10px 0 0;font-size:15px;color:#5c5047}

/* ---------------------------------------------------------------- harita */
.harita{position:relative;aspect-ratio:4/3;margin:14px 0 10px;border-radius:var(--yuvarlak);
        overflow:hidden;border:1px solid var(--cizgi-ac);background:#fff}
.harita iframe{display:block;width:100%;height:100%;border:0}
.harita-ac{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;height:100%;padding:16px;cursor:pointer;border:0;background:none;font:inherit;
  font-weight:700;font-size:15px;color:var(--komur);text-align:center}
.harita-ac small{font-weight:400;font-size:12.5px;color:#6b5f55}
.harita-not{margin:0 0 10px;font-size:13px;color:#6b5f55}

/* ---------------------------------------------------------------- kutu */
.kutu{background:#fff;border:1px solid var(--cizgi-ac);border-radius:var(--yuvarlak);padding:22px;margin-bottom:18px}
.kutu h2,.kutu h3{margin-top:0}
.yan-liste{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15.5px}

/* ---------------------------------------------------------------- bant */
.bant{background:var(--kor-koy);color:#fff;padding:clamp(44px,6vw,70px) 0;
      background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 11px)}
.bant h2{color:#fff;margin-bottom:10px}
.bant p{color:rgba(255,255,255,.9);max-width:58ch}
.bant .dugme-ana{background:#fff;color:var(--kor-koy)}
.bant .dugme-ana:hover{background:var(--lavas)}

/* ---------------------------------------------------------------- altbilgi */
.alt{background:var(--komur);color:var(--krem);padding:56px 0 0}
.alt-ic{display:grid;gap:34px;grid-template-columns:1.4fr 1fr 1fr 1fr}
.alt-baslik{font-size:15px;color:#fff;margin-bottom:12px;letter-spacing:.02em}
.alt-metin{font-size:14.5px;color:var(--duman)}
.alt-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.alt-liste a{color:var(--krem);text-decoration:none}
.alt-liste a:hover{color:var(--kor-ac)}
.alt-son{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--cizgi);margin-top:44px;padding:18px 0;font-size:13px;color:var(--duman)}

/* ---------------------------------------------------------------- yüzen */
.yuzen{position:fixed;right:16px;bottom:16px;z-index:60;width:52px;height:52px;border-radius:50%;
  display:none;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 20px rgba(20,16,14,.3)}
.yuzen-tel{background:var(--kor)}

/* ---------------------------------------------------------------- galeri */
/* 🔴 MOZAİK, EŞİT KUTU DEĞİL. Kaynak karelerin hepsi 640x400; aynı boyda
   dizilince katalog gibi duruyor. Birkaç kare iki sütun kaplayınca ritim
   çıkıyor — ama ORAN KORUNUYOR, kare esnetilmiyor. */
/* 🔴 MOZAİK — EŞİT KUTU DEĞİL. Önce auto-fit minmax(220px) idi; kareler
   küçük kalıyor, aralarında bol boşluk oluyor ve bölüm "katalog" gibi
   duruyordu. Artık sabit 4 sütunlu ızgara ve İKİ BÜYÜK KARE:
     1. kare  2x2 (vitrin — cephe)
     6. kare  2x1 (geniş bant — gece cephesi)
   Boşluk 12 → 8 px: kareler birbirine yaklaşınca duvar etkisi çıkıyor.

   🔴 KARE BÜYÜTÜLMÜYOR. Kaynak 600x400; 2x2 kutu ~590 px genişliğe denk
   geliyor, yani tavanın altında kalıyor. Daha büyük kutu bulanıklık demek. */
.galeri{display:grid;gap:8px;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
.galeri-kare{margin:0;overflow:hidden;border-radius:var(--yuvarlak);background:var(--kul);
             aspect-ratio:3/2;position:relative}
.galeri-kare img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.galeri-kare:hover img{transform:scale(1.06)}
/* vitrin karesi */
.galeri-kare:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
/* geniş bant */
.galeri-kare:nth-child(6){grid-column:span 2;aspect-ratio:3/1}

@media (max-width:900px){
  .galeri{grid-template-columns:repeat(2,1fr)}
  .galeri-kare:first-child{grid-column:span 2;grid-row:span 1;aspect-ratio:16/10}
  .galeri-kare:nth-child(6){grid-column:span 2;aspect-ratio:16/9}
}
@media (max-width:480px){
  .galeri{grid-template-columns:1fr;gap:6px}
  .galeri-kare,.galeri-kare:first-child,.galeri-kare:nth-child(6){
    grid-column:span 1;aspect-ratio:16/10}
}
@media (prefers-reduced-motion: reduce){
  .galeri-kare img{transition:none}
  .galeri-kare:hover img{transform:none}
}

/* ---------------------------------------------------------------- whatsapp */
/* 🔴 ÇİFT SINIF ŞART. Tek `.wa-mobil` yazılırsa `.gezinti a` ve `.yuzen`
   gibi kurallar özgüllükte onu yeniyor ve İKİ İKON BİRDEN çıkıyor (başka bir
   sitede yaşandı). `.wa-mobil.wa-mobil` özgüllüğü 0,2,0 yapıp kavgayı bitiriyor.
   Eşik 601px: mobiweb7'deki `min-[601px]` ile birebir aynı. */
.wa-masaustu.wa-masaustu{display:none}
@media (min-width:601px){
  .wa-mobil.wa-mobil{display:none}
  .wa-masaustu.wa-masaustu{display:inline-flex}
}
.yuzen-wa{background:#0b8441;bottom:78px}

/* ---------------------------------------------------------------- belirme */
/* 🔴 GÖRÜNÜRLÜK BETİĞE BAĞLANMAZ. `animation-timeline: view()` desteklenmeyen
   tarayıcıda animasyon hiç çalışmaz ve içerik olduğu gibi görünür — doğru
   başarısızlık. `opacity:0` + JS deseni sayfayı bembeyaz bırakmıştı. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bel{animation:belir linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
    @keyframes belir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}

/* ---------------------------------------------------------------- duyarlı */
@media (max-width:900px){
  .ikili{grid-template-columns:1fr}
  .sss{grid-template-columns:1fr}
  .alt-ic{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .menu-dugme{display:flex}
  .gezinti{position:fixed;inset:102px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--komur);border-bottom:1px solid var(--cizgi);padding:8px 16px 18px;display:none}
  .gezinti.acik{display:flex}
  .gezinti a{padding:13px 0;border-bottom:1px solid var(--cizgi)}
  .ust-tel{margin-top:12px;text-align:center}
  .yuzen{display:flex}
  .alt-ic{grid-template-columns:1fr}
  .serit-ray img{width:190px;height:119px}
  body{padding-bottom:0}
}

@media (prefers-reduced-motion: reduce){
  .serit-ray{animation:none}
  .kart{transition:none}
  .kart:hover{transform:none}
}

/* ---------------------------------------------------------------- sepet */
/* Rozet boşken gizli: `hidden` özniteliği JS tarafından yönetiliyor.
   🔴 display KURALI `hidden`I EZMESİN — `[hidden]` sonra geliyor. */
.ust-sepet{display:inline-flex;align-items:center;gap:7px}
.sepet-rozet{display:inline-grid;place-items:center;min-width:22px;height:22px;
  padding:0 6px;border-radius:999px;background:var(--vurgu,#c0392b);color:#fff;
  font-size:12.5px;font-weight:700;line-height:1}
.sepet-rozet[hidden]{display:none}

.sepet-kutu{margin:18px 0}
.sepet-bos{color:#6b7280;margin:0}
.sepet-satir{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.sepet-ad{font-weight:600}
.sepet-adet{display:inline-flex;align-items:center;gap:4px;flex:none}
/* 🔴 DOKUNMA HEDEFİ 44px. Adet düğmeleri küçük ikon gibi duruyor ama
   telefonda en çok basılan yer burası. */
.sepet-adet button{width:44px;height:44px;border:1px solid rgba(0,0,0,.18);
  background:#fff;border-radius:9px;font-size:19px;line-height:1;cursor:pointer}
.sepet-adet button:hover{background:#f3f4f6}
.sepet-adet b{min-width:30px;text-align:center}

.sepet-form{margin-top:22px}
/* Telefon/kod satırı: alan + düğme yan yana, dar ekranda alt alta. */
.satirli{display:flex;gap:9px;flex-wrap:wrap}
.satirli input{flex:1 1 190px;min-width:0}
.satirli .dugme{flex:none}
.sepet-form .uyari{margin:0 0 14px;padding:11px 13px;border-radius:9px;
  background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;font-size:14.5px}
.sepet-form .uyari[hidden]{display:none}
.dugme-genis{width:100%;justify-content:center}

/* Sepet formu — bu sitede de `.alan` kurallari YOKTU; sepet sayfasi onlari
   varsayiyordu. Beylik'te ayni eksik olculup duzeltildi (2026-10-08). */
.sepet-form .alan { display: grid; gap: 6px; margin-bottom: 14px; }
/* 🔴 ZORUNLU YILDIZI ALT SATIRA DUSER: etiket blok oldugu icin span kendi
   satirina geciyor ve "Adiniz / *" diye iki satir cikiyor. */
.sepet-form .alan label { display: flex; align-items: baseline; gap: 6px;
  font-weight: 600; font-size: 14.5px; }
.sepet-form .zorunlu { color: #c0392b; font-weight: 700; }
.sepet-form input, .sepet-form select, .sepet-form textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 16px;
  border: 1px solid rgba(0,0,0,.18); border-radius: 9px;
  background: #fff; min-height: 44px; }
.sepet-form .yardim { margin: 0; font-size: 13px; color: #6b7280; }

/* 🔴 YUZEN DUGMELER ICERIGI KAPATMASIN. Sepetin en altinda "Siparisi onayla"
   duruyor; yuzen seridin altinda kalirsa siparis tamamlanamaz. */
body.sepet-sayfasi .bolum:last-of-type { padding-bottom: 96px; }

/* ===========================================================================
   MASA + QR  (2026-10-20)

   Kullanıcı isteği üç parçaydı: yönetici masaları SİTESİNDEN görsün,
   karekoda bağlantı olsun, masaya göre QR'dan sipariş verilebilsin.

   🔴 BİÇİM SİTENİN KENDİ PALETİNDEN. Beylik'te aynı özelliğin CSS'i var ama
   oradaki renkler kopyalanmadı: kurgu MALZEMEYE göre, iskelet kopyalanarak
   değil (AGENTS "hep aynı iskelet yasak"). Burada kor/komur, orada altın.

   🔴 SABİT GENİŞLİK YOK, IZGARA KENDİ SARIYOR. Masa sayısı firmadan firmaya
   değişiyor; sütunu elle saymak her ekranda bozulurdu.
   🔴 DOKUNMA HEDEFİ ≥44px — şerit mobilde en çok kullanılan yer.
   =========================================================================== */

/* Giriş / masalar bağlantısı — `.ust-tel`in sakin kardeşi. */
.ust-giris{padding:9px 14px;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  font-size:14px;font-weight:700;color:var(--lavas)!important;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.ust-giris:hover{border-color:var(--kor);color:#fff!important}

/* --------------------------------------------------------- masa şeridi */
.masa-serit{background:var(--kor);color:#fff}
.masa-serit .kapsa{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:9px 0}
.masa-serit-ad{font-weight:900;font-size:clamp(15px,2.4vw,17px)}
/* Açıklama esnek: dar ekranda alt satıra geçsin, şeridi taşırmasın. */
.masa-serit-yazi{flex:1 1 200px;font-size:13px;line-height:1.45}
.masa-serit-git,.masa-serit-cik{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 14px;border-radius:var(--yuvarlak);font-size:13px;font-weight:800;
  text-decoration:none;white-space:nowrap}
.masa-serit-git{background:var(--komur);color:#fff!important}
.masa-serit-git:hover{background:var(--is)}
.masa-serit-cik{color:#fff!important;text-decoration:underline dotted;padding:0 6px}

/* ------------------------------------------------------- yönetim ekranı */
.masa-ozet{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 18px;padding:14px 18px;
  background:#fff;border:1px solid var(--cizgi-ac);border-radius:var(--yuvarlak);
  font-size:14px;color:#6c5f57}
.masa-ozet b{display:block;font-size:clamp(19px,3vw,24px);color:var(--komur)}
.masa-eylem{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.masa-izgara,.masa-kart-izgara{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.masa-kart{display:flex;flex-direction:column;gap:10px;padding:16px;text-align:center;
  background:#fff;border:1px solid var(--cizgi-ac);border-radius:var(--yuvarlak)}
/* Dolu masa renkle DEĞİL kenarlıkla ayrılıyor (renk tek başına ayırt edici
   değil — renk körlüğü); durum ayrıca yazıyla da basılıyor. */
.masa-kart.masa-dolu{border-color:var(--kor);box-shadow:0 0 0 2px rgba(226,86,27,.18)}
.masa-kart>header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.masa-kart>header b{font-size:clamp(16px,2.6vw,19px)}
.masa-durum{font-size:12px;font-weight:800;color:#6c5f57}
.masa-kart.masa-dolu .masa-durum{color:var(--kor-koy)}
/* 🔴 KAREKODA ÖLÇÜ VERİLDİ: ölçüsüz görsel flex kabını dolduruyor; kare
   oran `aspect-ratio` ile korunuyor, yüzde `max-height` kırpmıyor. */
.masa-qr{width:100%;height:auto;max-width:200px;aspect-ratio:1;object-fit:contain;
  align-self:center;flex:none;background:#fff;border-radius:var(--yuvarlak)}
.masa-bilgi{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;
  text-align:left;font-size:13px}
.masa-bilgi dt{color:#6c5f57}
.masa-bilgi dd{margin:0;font-weight:700;color:var(--komur)}
/* Adres uzun ve kırılmalı: yatay taşma SIFIR olmalı. */
.masa-adres{margin:0;font-size:11px}
.masa-adres code{display:block;overflow-wrap:anywhere;word-break:break-all;color:#6c5f57;
  background:var(--krem);border-radius:var(--yuvarlak);padding:6px 8px}
.masa-kart .dugme{min-height:44px}
.yardim-ici{font-weight:400;font-size:12px;color:#6c5f57}

/* ------------------------------------------------- yazdırma sayfası */
/* 🔴 ZEMİN TAHMİN EDİLMEDİ, BURADA TANIMLANDI: sayfa kendi iskeletini
   basıyor ve zemini BEYAZ; damga `proweb_damgasi(false)` (açık zemin) ile
   basılıyor — beyaz zemine beyaz damga görünmez. */
body.masa-yazdir-sayfasi{background:#fff;color:var(--komur);padding:20px 0}
.masa-yazdir-cubuk{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px;margin:0 0 20px}
.masa-yazdir-cubuk h1{margin:0;font-size:clamp(18px,3vw,24px)}
.masa-yazdir-cubuk>div{display:flex;gap:8px}
.masa-yazdir-imza{margin:26px 0 0}
.masa-basili{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 14px;text-align:center;border:2px dashed #c9c0b4;
  border-radius:var(--yuvarlak);break-inside:avoid;page-break-inside:avoid}
.masa-basili-marka{margin:0;font-size:12px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:#6c5f57}
.masa-basili h2{margin:0;font-size:clamp(20px,3.4vw,28px)}
.masa-basili .masa-qr{max-width:240px}
.masa-basili-yazi{margin:0;font-size:14px;line-height:1.5}
.masa-basili-not{margin:0;font-size:12px;color:#6c5f57}

@media print{
  /* Ekrana ait her şey kâğıttan çıkıyor: düğmeler, geri bağlantısı, damga. */
  .no-print{display:none!important}
  body.masa-yazdir-sayfasi{padding:0}
  .masa-kart-izgara{grid-template-columns:repeat(2,1fr);gap:10px}
  .masa-basili{border-color:#999}
}

/* 🔴 MASA KARTINDAKİ DÜĞME `.dugme-hayalet` OLAMAZ. Bu sitede o sınıf KOYU
   zemin için yazılmış (beyaz yazı + beyaz kenarlık, satır 108); masa kartının
   zemini BEYAZ, yani düğme görünmez olurdu — 41klima'daki "beyaz zemine beyaz
   damga" hatasının aynısı. Beylik'ten dosya kopyalanırken fark edildi:
   sınıf adı iki sitede AYNI, anlamı DEĞİL. Ayrıca bu sitede `.dugme-kucuk`
   hiç tanımlı değil; ölçüyü kendi sınıfı veriyor. */
.masa-kart-dugme{padding:11px 16px;font-size:13px;min-height:44px;
  justify-content:center;width:100%}

/* ===========================================================================
   ADİSYON + ⭐ ZİYARET PUANI  (§6.9c, 2026-10-20)

   Kullanıcı düzeltmesi: *"sipariş onaylanınca sıfırlanırsa, o masada
   otururken siparişe bir kola ekleyebilir mesela"*. Sipariş onayı ekranı
   sıfırlamıyor; adisyon kalıyor ve "Siparişe ekle" yolu açık duruyor.

   🔴 DOKUNMA HEDEFİ ≥44px: yıldızlar ve puan düğmesi masada TABLETTEN
   dokunuluyor; 20px'lik bir yıldız parmakla isabet ettirilemez.
   🔴 TUTAR SATIRI SABİT GENİŞLİKTE DEĞİL — `grid-template-columns` ile
   oranlı; sabit px verilseydi uzun ürün adı tutarı ezerdi.
   🔴 YILDIZ SEÇİMİ YALNIZ RENKLE ANLATILMIYOR (betik `aria-pressed` de
   yazıyor); renk tek başına görmeyen kullanıcıya hiçbir şey söylemez.
   ======================================================================== */
.masa-adisyon,
.masa-oy { border: 1px solid var(--cizgi-ac); border-radius: var(--yuvarlak); padding: 16px; margin: 0 0 20px; background: #fff; }
.masa-adisyon h2,
.masa-oy h2 { margin: 0 0 6px; font-size: clamp(16px, 2.6vw, 19px); }
.masa-adisyon-ozet { margin: 0 0 12px; font-size: 13px; color: #6f6159; }
.masa-adisyon-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.masa-adisyon-liste li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--cizgi-ac);
}
.masa-adisyon-liste li:first-child { border-top: 0; }
/* Misafirin KENDİ siparişi — kalabalık masada hesap bölünüyor. */
.masa-adisyon-liste li.benim > span { font-weight: 700; }
.masa-adisyon-liste em { font-style: normal; font-size: 11px; color: #6f6159; }
.masa-adisyon-liste b { font-variant-numeric: tabular-nums; }
.masa-adisyon-toplam { margin: 0; font-weight: 800; font-size: clamp(15px, 2.4vw, 18px); }
.masa-gitti { padding: 12px 14px; border-radius: var(--yuvarlak); background: var(--krem); font-size: 14px; }

.masa-yildizlar { display: flex; gap: 4px; margin: 8px 0 12px; }
.masa-yildiz {
  /* 🔴 `data-plain` YETMEZ, ölçü de gerekiyor: 44px eşiği dokunma hedefi. */
  min-width: 44px; min-height: 44px; font-size: 28px; line-height: 1;
  color: var(--cizgi-ac); background: none; border: 0; cursor: pointer;
  transition: color .15s, transform .15s;
}
.masa-yildiz.secili { color: var(--kor); }
.masa-yildiz:hover { transform: scale(1.08); }
.masa-yildiz:disabled { cursor: default; transform: none; }
.masa-oy-yorum { display: block; margin: 0 0 12px; }
.masa-oy-yorum textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--cizgi-ac); border-radius: var(--yuvarlak); font: inherit; }
.masa-oy [data-oy-gonder] { min-height: 44px; }
.masa-oy-tesekkur { margin: 10px 0 0; font-weight: 700; color: var(--kor); }
/* Tablet kipinde masa şeridinde cihaz adı — "Masadan ayrıl" yerine. */
.masa-serit-cihaz { font-size: 11px; color: #6f6159; padding: 0 6px; }

@media (prefers-reduced-motion: reduce) {
  .masa-yildiz { transition: none; }
  .masa-yildiz:hover { transform: none; }
}

/* --------------------------------------------------------- tablet (kiosk)
   🔴 DURUM RENKLE DEĞİL, İKON + METİNLE anlatılıyor. "Yeşil nokta"
   tek başına hangi durumu gösterdiğini söylemiyor ve dört durum var:
   çevrimiçi · çevrimdışı · hiç okutulmadı · bağlantı kesildi.
   "Hiç okutulmadı" ayrı bir durum: kurulu olması çalıştığı anlamına
   gelmiyor (memory: "cron çalışıyor sanma, ölç"). */
.masa-cihaz-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; font-size: 11px; }
.masa-cihaz-acik   { color: #1a7f37; font-weight: 700; }
.masa-cihaz-uyku   { color: #6f6159; }
.masa-cihaz-bekler { color: #9a6700; font-weight: 700; }
.masa-cihaz-kapali { color: var(--kor-koy); }
.masa-cihaz-form { margin: 0 0 8px; }
.masa-cihaz-form button { min-height: 44px; width: 100%; }
.masa-tablet-kutu { border: 2px solid var(--kor); }
.masa-tablet-kutu .masa-qr { display: block; margin: 10px 0; }
/* 🔴 43px TUZAĞI: .dugme-kucuk 43px çıkıyor ve 44px eşiğini 1 px ile
   kaçırıyor (aynı kusur başlıktaki üç düğmede de yakalanmıştı, §6.9b).
   Ölçüldü 2026-10-20, 375px: 220x43 -> 220x44. */
.masa-oy a.dugme, .masa-oy .dugme { min-height: 44px; display: inline-flex; align-items: center; }

/* --------------------------------------------------------------------------
   MASA KARTI UYARILARI (2026-10-20)
   🔴 RENK SITENIN DEGISKENLERINE BAGLANMADI. Iki sitenin paleti ayri
   (`--kirmizi-koy` yalniz birinde var); tanimsiz degisken sessizce
   SIFIRLANIR ve uyari okunmaz hale gelir. Uyari, okunmamayi en az kaldiran
   ogedir — bu yuzden kendi renklerini tasiyor.
   🔴 Dokunma hedefi kurali gecerli DEGIL: bunlar <p>, tiklanmiyor.
   -------------------------------------------------------------------------- */
.masa-uyari {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 6px;
  font-size: 13px; line-height: 1.45;
  background: #fff4d6; color: #6b4a00; border: 1px solid #f0d089;
}
.masa-uyari--sahipsiz {
  background: #ffe3e3; color: #8a1c1c; border-color: #f3b4b4;
}
.masa-uyari strong { font-weight: 800; }

/* --------------------------------------------------------------------------
   MASA KARTI — SATIRLAR KARTLAR ARASINDA HIZALI (2026-10-20)

   🔴 SORUN: kart YUKSEKLIKLERI esitti ama ICLERI degildi. Karekodun alti,
   bilgi listesi, uyarilar ve dipteki dugmeler her kartta baska yukseklikte
   duruyordu; kullanici "dikeyde cok bozuk bir goruntu olusmus" dedi.

   🔴 COZUM `subgrid`, `min-height` DEGIL (AGENTS Ö15 kriter 7). Sabit
   yukseklik vermek, icerigi az olan karti bos birakip cok olani tasirirdi —
   ayni hatayi veri her degistiginde yeniden uretirdi.

   🔴 BES YUVA, HER KARTTA: baslik · karekod · bilgi · durum · alt.
   Kosula bagli bloklar (uyari, cihaz listesi) KENDI YUVASININ ICINDE ve
   yuva bos olsa bile basiliyor; atlanirsa satir sayisi degisir ve subgrid
   hizalamasi bozulur.

   🔴 YEDEK YOL VAR: `subgrid` desteklenmezse kart flex sutun kaliyor ve
   en azindan dipteki dugmeler hizalaniyor (`margin-top:auto`). Gorunum
   bir ozellige bagli birakilmiyor.
   -------------------------------------------------------------------------- */
.masa-kart { display: flex; flex-direction: column; gap: 10px; }
.masa-kart > * { margin: 0; }
.masa-kart-alt { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }

.masa-qr-yuva { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.masa-qr-not { font-size: 12px; color: var(--duman, #6b7280); text-align: center; }
.masa-istege-bagli { display: block; font-size: 11px; color: var(--duman, #6b7280); text-align: center; }
.masa-durum-yuva:empty { display: none; }

@supports (grid-template-rows: subgrid) {
  .masa-izgara { grid-auto-rows: auto; }
  .masa-kart {
    display: grid;
    grid-row: span 5;              /* baslik · karekod · bilgi · durum · alt */
    grid-template-rows: subgrid;
    row-gap: 10px;
  }
  .masa-kart-alt { margin-top: 0; align-self: end; }
  /* Bos durum yuvasi GIZLENMEZ: satiri tutmasi gerekiyor, yoksa altindaki
     her sey o kartta yukari kayar ve hizalama bozulur. */
  .masa-durum-yuva:empty { display: block; }
}

/* 🔴 MASA SERIDININ ALTINDAKI BOSLUK KISALIYOR. Bolum dolgusu (72px) tek
   basina dogru bir ritim; ama serit zaten renkli bir bant olarak bolumu
   acmis oluyor ve ustune 72px binince ekranda bos bir serit kaliyor
   (kullanici: "dev bosluk"). Dolgu GENEL olarak degistirilmiyor — yalniz
   seridin HEMEN ardindaki bolum kisaliyor, oteki sayfalarin ritmi bozulmasin. */
.masa-serit + .bolum,
.masa-serit + .sayfabasi { padding-top: 26px; }

/* MASA EKRANI — GORSEL KATMAN (2026-10-20). Amac-adli degiskenler: bilesen
   her sitede KENDI paletinden besleniyor. 🔴 Bu sitede koseler KESKIN
   (`--yuvarlak:4px`) ve ana renk kor turuncusu — bilesen onu bozmuyor. */
.masa-ozet, .masa-izgara, .masa-panel-kapi {
  --mz-bos:    #3f7d4f;
  --mz-dolu:   var(--kor);
  --mz-para:   var(--kor-koy);
  --mz-uyari:  #9a5b12;
  --mz-zemin:  #ffffff;
  --mz-cizgi:  var(--cizgi-ac);
  --mz-soluk:  #7c6f66;
  --mz-yuv:    var(--yuvarlak);
}

/* ── OZET: doluluk cubugu + olcu kutulari ─────────────────────────────── */
.masa-ozet {
  display: grid; gap: 16px;
  background: var(--mz-zemin); border: 1px solid var(--mz-cizgi);
  border-radius: var(--mz-yuv); padding: 18px 20px;
}
.masa-doluluk-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.masa-doluluk-yazi { font-size: 15px; color: var(--mz-soluk); }
.masa-doluluk-yazi b { font-size: clamp(22px, 3vw, 30px); color: inherit; }
.masa-doluluk-oran { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--mz-dolu); }
/* 🔴 CUBUK SIFIRDA DA GORUNUR: ic dolgu 0 olsa bile ray duruyor, yoksa
   "bos restoran" ile "olcu bozuk" ayirt edilemez. */
.masa-cubuk { height: 10px; border-radius: 999px; background: var(--mz-cizgi); overflow: hidden; }
.masa-cubuk > span { display: block; height: 100%; background: var(--mz-dolu); border-radius: inherit; }

.masa-olculer {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px;
}
.masa-olcu {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--mz-cizgi);
  border-radius: var(--mz-yuv); background: var(--mz-zemin);
}
.masa-olcu-ikon { grid-row: 1 / span 2; font-size: 20px; line-height: 1; }
.masa-olcu b { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.1; }
.masa-olcu span:last-child { font-size: 12px; color: var(--mz-soluk); }
.masa-olcu--bos b      { color: var(--mz-bos); }
.masa-olcu--dolu b     { color: var(--mz-dolu); }
.masa-olcu--para b     { color: var(--mz-para); }
.masa-olcu--sahipsiz   { border-color: var(--mz-dolu); }
.masa-olcu--sahipsiz b { color: var(--mz-dolu); }
/* 🔴 SIFIR OLAN OLCU GIZLENMIYOR, SUSTURULUYOR. Gizlenseydi yonetici o
   olcunun VAR oldugunu hic ogrenemezdi; ayrica kutu sayisi degisince
   izgara her yenilemede ziplardi. */
.masa-olcu--sifir { opacity: .45; }
.masa-olcu--sifir b { color: inherit; }

/* ── KART: durum serigi ───────────────────────────────────────────────── */
.masa-kart { position: relative; overflow: hidden; }
.masa-kart::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--mz-bos);
}
.masa-kart.masa-dolu::before { background: var(--mz-dolu); }
.masa-kart > header .masa-durum {
  padding: 2px 9px; border-radius: 999px; font-size: 11px;
  background: color-mix(in srgb, var(--mz-bos) 14%, transparent); color: var(--mz-bos);
}
.masa-kart.masa-dolu > header .masa-durum {
  background: color-mix(in srgb, var(--mz-dolu) 14%, transparent); color: var(--mz-dolu);
}
.masa-bilgi-yok { color: var(--mz-soluk); opacity: .6; }

/* ── PANEL KAPISI ─────────────────────────────────────────────────────── */
.masa-panel-kapi {
  margin-top: 18px; padding: 16px 18px;
  border: 1px solid var(--mz-cizgi); border-radius: var(--mz-yuv);
  background: var(--mz-zemin);
}
.masa-panel-bas { margin: 0 0 10px; font-weight: 800; font-size: 14px; }
.masa-panel-baglar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
/* 🔴 DOKUNMA HEDEFI 44px: bunlar gercek baglanti, paragraf ici degil. */
.masa-panel-baglar a {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 8px 12px; border: 1px solid var(--mz-cizgi); border-radius: var(--mz-yuv);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.masa-panel-baglar a:hover { border-color: var(--mz-dolu); }
.masa-panel-not { margin: 10px 0 0; font-size: 12px; color: var(--mz-soluk); }

/* --------------------------------------------------------------------------
   SEPET SATIRI — urun karesi + satir fiyati + toplam (2026-10-20)
   Kullanici: *"Adana Sofrasi'nda siparis ekrani Beylik gibi olmamis?"*
   Olculdu: Beylik'te `data-sepet-fiyatlari` ve `data-sepet-toplam` vardi,
   burada IKISI DE yoktu; sepet yalniz ad ve adet gosteriyordu.
   🔴 PALET BU SITENIN: koseler keskin (`--yuvarlak:4px`), zemin acik,
   vurgu kor turuncusu. Beylik'in CSS'i kopyalanmadi, deseni porte edildi.
   -------------------------------------------------------------------------- */
.sepet-satir { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--cizgi-ac); }
.sepet-ad { flex: 1; min-width: 0; font-weight: 600; }

/* 🔴 YER TUTUCU BOS GECILMEZ: gorselsiz satirda ad kenara kayar ve
   satirlar hizasizlasir. Uydurma yemek fotografi konmaz — bas harf. */
.sepet-foto { width: 56px; height: 42px; object-fit: cover; border-radius: var(--yuvarlak);
  flex: none; background: var(--krem); }
.sepet-foto-bos { display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--kor); background: var(--krem); }

/* 🔴 FIYAT ADET KUTUSUNUN SOLUNDA, SABIT GENISLIK: farkli uzunluktaki
   adlarda rakamlar alt alta hizali kalir. `tabular-nums` sart —
   oransal rakamlarda 1 ile 8 ayni genislikte degil. */
.sepet-fiyat { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap;
  font-weight: 700; }
.sepet-fiyat:empty { display: none; }

.sepet-toplam { margin: 2px 0 0; text-align: right; font-weight: 800; font-size: 17px; }

@media (max-width: 430px) {
  /* 🔴 DAR EKRANDA DORT KUTU TEK SATIRA SIGMIYOR. `flex-wrap` denenmedi:
     sarma sirasi kontrol edilemiyor ve adet dugmeleri tek baslarina ucuncu
     satira dusuyor. Izgara ile foto iki satiri kapliyor, fiyat adin
     ALTINA giriyor, adet sagda sabit kaliyor. */
  .sepet-satir {
    display: grid; align-items: center; column-gap: 12px; row-gap: 2px;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "foto ad adet" "foto fiyat adet";
  }
  .sepet-satir .sepet-foto { grid-area: foto; }
  .sepet-ad    { grid-area: ad; }
  .sepet-fiyat { grid-area: fiyat; text-align: left; }
  .sepet-adet  { grid-area: adet; }
}

/* --------------------------------------------------------------------------
   SARKMA VE YAPISMA DUZELTMELERI (2026-10-20, kullanici ekranda isaretledi)

   1) "3 / 4 masa dolu" IKI SATIRA BOLUNUYORDU. Olculdu: kabin yuksekligi
      74px, icindeki buyuk rakam 50px — yani metin sariyor ve rakam kutudan
      sarkiyor gibi duruyordu. Sebep: `baseline` hizalamasi + buyuyen
      `clamp()` yazi. Satir artik `flex-wrap:nowrap` ve rakam ile metin
      ayri ogeler olarak hizalaniyor.

   2) PANEL KUTUSU ILE KART IZGARASI ARASI 0 PIKSELDI — birbirine
      yapismisti. Kutunun alt bosluguyla cozuluyor; izgaranin kendi
      `gap`ine dokunulmuyor (o kartlar arasi mesafe, baska bir sey).

   3) UYARI SERIDI ILE CIHAZ SATIRI birbirine yapisikti; durum yuvasi
      artik kendi ic bosluguna sahip.
   -------------------------------------------------------------------------- */
.masa-doluluk-bas { flex-wrap: nowrap; align-items: center; }
.masa-doluluk-yazi {
  display: flex; align-items: baseline; gap: 7px;
  min-width: 0; line-height: 1.25;
}
.masa-doluluk-yazi b { flex: none; line-height: 1; }
.masa-doluluk-oran { flex: none; line-height: 1; }

.masa-panel-kapi { margin-bottom: 20px; }

.masa-durum-yuva { display: flex; flex-direction: column; gap: 8px; }
.masa-durum-yuva > * { margin: 0; }

/* --------------------------------------------------------------------------
   MASA EKRANI — DIKEY RITIM TEK YERDEN (2026-10-20)

   🔴 TEK TEK YAMA YAPILMASININ SONU. Boluk boluk `margin` eklemisim ve
   olcunce ortaya cikan sey su oldu: ardisik bloklar arasi bosluklar
   16 / 18 / 22 / 20 px — her biri BASKA bir kuraldan geliyor, ritim yok.
   Kullanici hakli olarak "yapistirmayi cok seviyorsun" dedi.
   (memory: `feedback_tasarim_kalitesi_dustu` — tepkisel CSS yamasi
   teshis degil; bagimliligi olc, kurguyu degistir.)

   Cozum: kabin KENDISI izgara olsun ve TEK bir `gap` ritmi versin.
   Blok basina `margin` kalmiyor — eklemeyi unutmak ya da iki kuralin
   ust uste binmesi artik mumkun degil.

   🔴 `.kapsa` PAYLASIMLI, dokunulmuyor: kural `.masa-bolum`a kilitli,
   oteki sayfalarin ritmi bozulmasin.
   -------------------------------------------------------------------------- */
.masa-bolum > .kapsa {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  align-content: start;
}
/* Eski tek tek marginlar sifirlaniyor — ritmi artik yalniz `gap` kuruyor. */
.masa-bolum > .kapsa > * { margin-top: 0; margin-bottom: 0; }

/* ── DOLULUK RENGI OLCUNUN ANLAMINI TASIR (2026-10-20) ──────────────────
   🔴 Dolu masa restoran icin IYI haber. Cubuk ve yuzde her durumda
   kirmiziydi; kullanici: *"Kirmizi bossa, bosa yakinsa olabilir. Ama
   doluya yakin pozitif renklere gec."* Renk artik bandla degisiyor.
   🔴 RENK TEK ISARET DEGIL: yuzde rakami da yaninda yaziyor. Renk korligi
   olan biri icin tek basina renk hicbir sey anlatmaz. */
.masa-doluluk--dusuk  { --mz-doluluk: var(--mz-dolu); }
.masa-doluluk--orta   { --mz-doluluk: var(--mz-uyari); }
.masa-doluluk--yuksek { --mz-doluluk: var(--mz-bos); }
.masa-doluluk .masa-cubuk > span { background: var(--mz-doluluk, var(--mz-dolu)); }
.masa-doluluk .masa-doluluk-oran { color: var(--mz-doluluk, var(--mz-dolu)); }

/* Ozet kutularinda da anlam duzeldi: bos masa notr, dolu masa olumlu. */
.masa-olcu--bos b  { color: var(--mz-soluk); }
.masa-olcu--dolu b { color: var(--mz-bos); }

/* ── YAZDIR DUGMESI BASLIK SATIRINDA (gereksiz satir kaplamasin) ──────── */
.masa-panel-bas-satir {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.masa-panel-bas-satir .masa-panel-bas { margin: 0; }
.masa-panel-yazdir { flex: none; min-height: 44px; display: inline-flex; align-items: center; }

/* ==========================================================================
   MEMNUNIYET PUANI VE EGRISI (2026-10-20)

   Kullanici: *"hem masadan ayrilirken hem de masadayken puanlama yapabilir.
   boylece firma sahibi anlikta memnun olmayan musteriyi gorebilir."* ve
   *"Musteri puani degistirebilir... Yani gecmisini de gorur."*

   🔴 GRAFIK KUTUPHANESI EKLENMEDI (AGENTS: siteye bagimlilik girmez).
   Egri, yuksekligi yuzdeyle verilen cubuklardan olusuyor; `height` degerini
   betik yaziyor ama BILGI YAZIDA duruyor (`.masa-oy-gecmis`) — cubuklar
   `aria-hidden` ve betik cizemese bile cumle kalıyor
   (memory: "gorunurluk betige baglanmaz").

   🔴 UYARI RENKLERI KENDI DEGERLERINI TASIYOR. Iki sitenin paleti ayri;
   tanimsiz bir degisken sessizce sifirlanir ve uyari okunmaz hale gelir.
   Olculdu: #8a1c1c / #ffe3e3 kontrasti 7.66 (AA esigi 4.5).
   ========================================================================== */

/* ── MISAFIR TARAFI: sepet sayfasindaki yildiz bolumu ─────────────────── */
.masa-oy-gecmis {
  margin: 0 0 8px; font-size: 13px; font-weight: 700;
  color: var(--duman, #6b7280);
}
.masa-oy-egri {
  display: flex; align-items: flex-end; gap: 4px;
  height: 44px; margin: 0 0 12px;
}
.masa-egri-cubuk {
  flex: 1 1 0; min-width: 6px; max-width: 18px;
  border-radius: 3px 3px 0 0; background: #cbd5e1;
}
.masa-egri-cubuk.dusuk { background: #e58b8b; }
/* EN SON puan koyu: goz once ona gitsin. */
.masa-egri-cubuk.son { background: #64748b; }
.masa-egri-cubuk.son.dusuk { background: #b91c1c; }
.masa-oy-cikis { margin: 12px 0 0; }
/* 🔴 43px TUZAGI: `.dugme-kucuk` 43px cikiyor, 44px esigini 1px ile
   kaciriyor (ayni kusur basliktaki uc dugmede de yakalanmisti). */
.masa-oy-cikis .dugme { min-height: 44px; display: inline-flex; align-items: center; }

/* ── YONETICI TARAFI: masa kartindaki memnuniyet ──────────────────────── */
.masa-puan { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 800; }
.masa-puan--dusuk { color: #8a1c1c; }
.masa-puan-adet { font-size: 11px; font-weight: 600; opacity: .7; }
.masa-puan-yon { font-size: 12px; font-weight: 700; }

/* Kart icindeki mini egri — `masa-durum-yuva` yuvasinin icinde duruyor,
   yuva bos olsa bile basildigi icin subgrid hizalamasi bozulmuyor. */
.masa-kart-egri {
  display: flex; align-items: flex-end; gap: 3px; height: 24px;
  margin: 8px 0 0;
}
.masa-kart-cubuk {
  flex: 0 0 7px; border-radius: 2px 2px 0 0;
  background: var(--mz-soluk, #6b7280);
}
.masa-kart-cubuk.dusuk { background: var(--mz-dolu, #b91c1c); }
.masa-kart-cubuk.son   { outline: 1px solid var(--mz-cizgi, #d1d5db); }
.masa-egri-yazi { margin: 4px 0 0; font-size: 11px; color: var(--mz-soluk, #6b7280); }

/* Dusuk puan uyarisi — sahipsiz siparis uyarisiyla ayni agirlikta. */
.masa-uyari--puan { background: #ffe3e3; color: #8a1c1c; border-color: #f3b4b4; }

/* Ozet seridine eklenen alti nci olcu. Sifir olan olcu GIZLENMIYOR,
   `.masa-olcu--sifir` ile soluklasiyor (desen aynen korundu). */
.masa-olcu--puan   { border-color: var(--mz-uyari, #b45309); }
.masa-olcu--puan b { color: var(--mz-uyari, #b45309); }

/* ── DURUM: TEK SATIR ROZET + KAPALI AYRINTI (2026-10-20) ───────────────
   🔴 Ayni konu her kartta AYNI SATIRDA. Once uyarilar/egri/cihaz listesi
   kosula bagli alt alta basiliyordu; blok sayisi degisince ayni bilgi her
   kartta baska yukseklige dusuyordu. Simdi iki sabit yuva var ve ikisi de
   bos olsa bile satirini tutuyor. */
.masa-rozetler { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.masa-rozet {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
  border: 1px solid var(--mz-cizgi); color: var(--mz-soluk);
}
.masa-rozet--puan     { border-color: var(--mz-dolu);  color: var(--mz-dolu);
                        background: color-mix(in srgb, var(--mz-dolu) 10%, transparent); }
.masa-rozet--sahipsiz { border-color: var(--mz-dolu);  color: var(--mz-dolu); }
.masa-rozet--uzun     { border-color: var(--mz-uyari); color: var(--mz-uyari); }
.masa-rozet--temiz    { border-color: var(--mz-bos);   color: var(--mz-bos); }

/* 🔴 OZET SATIRI DOKUNMA HEDEFI: 44px. Acilip kapanan gercek bir denetim. */
.masa-ayrinti > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; font-size: 13px; font-weight: 700; color: var(--mz-soluk);
}
.masa-ayrinti > summary::-webkit-details-marker { display: none; }
.masa-ayrinti > summary::before { content: "▸"; transition: transform .15s; }
.masa-ayrinti[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .masa-ayrinti > summary::before { transition: none; } }
.masa-ayrinti-ic { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.masa-ayrinti-ic > * { margin: 0; }
.masa-ayrinti-bos { font-size: 12px; color: var(--mz-soluk); }

/* 🔴 KAPALIYKEN GERCEKTEN GIZLE. `<details>` kapaliyken icerigini
   tarayicinin KENDI kurali gizliyor (`details:not([open]) > *:not(summary)
   { display:none }`) — ama bu bir UA kurali ve yazar kurali onu EZIYOR.
   `.masa-ayrinti-ic{display:flex}` yazdigim an icerik kapali `details`in
   disina tasarak gorunur oldu (olculdu: adres y=1445, details dibi 1413).
   Gozle bakinca "ayrinti acikmis" sanilirdi; olcum yakaladi. */
.masa-ayrinti:not([open]) > .masa-ayrinti-ic { display: none; }

/* 🔴 PANEL BAGLANTILARI GENIS EKRANDA TEK SATIR. `auto-fit, minmax(190px)`
   ile alti baglanti 1180px kaba sigmiyor ve sonuncusu tek basina ikinci
   satira dusuyordu (kullanici isaretledi). Genis ekranda sutun sayisi
   SABIT 6; dar ekranda `auto-fit` geri geliyor — 6 sutunu telefona
   zorlamak metni ezerdi. "Personel ve bildirimler" -> "Personel":
   sutun daralinca en uzun etiket sarmasin. */
@media (min-width: 1000px) {
  .masa-panel-baglar { grid-template-columns: repeat(6, 1fr); }
  .masa-panel-baglar a { padding-inline: 10px; font-size: 13.5px; }
}

/* 🔴 YEDI BAGLANTI, YEDI SUTUN. Yazdir da izgaraya girince oge sayisi
   6'dan 7'ye cikti ve `repeat(6,1fr)` sonuncusunu ikinci satira
   dusuruyordu. Sutun sayisi oge sayisina baglandi. 1200px alti tek
   satiri ZORLAMIYOR: 7 sutunu dar ekrana sikistirmak metni ezer. */
@media (min-width: 1200px) {
  .masa-panel-baglar { grid-template-columns: repeat(7, 1fr); }
  .masa-panel-baglar a { padding-inline: 8px; font-size: 13px; gap: 5px; }
}

/* Altbilgideki yonetim baglantisi — sessiz dursun, ama dokunulabilir olsun. */
.alt-yonetim { display: inline-flex; align-items: center; min-height: 44px; opacity: .72; font-size: 13px; }
.alt-yonetim:hover { opacity: 1; }