/* =====================================================================
   BÜFE İSİMLİK — arayüz
   Tablet öncelikli: dokunma hedefleri en az 44px, tek elle ulaşılabilir.
   ===================================================================== */

:root{
  --lacivert:#0f2942;
  --lacivert-acik:#1c3d5c;
  --pirinc:#c2833a;          /* büfe chafing dish pirinci */
  --pirinc-acik:#e0a45c;
  --zemin:#f5f3ef;
  --kart:#ffffff;
  --cizgi:#e2ddd4;
  --metin:#22303c;
  --soluk:#6b7785;
  --yesil:#15803d;
  --kirmizi:#b91c1c;
  --sari:#a16207;
  --r:10px;
  --golge:0 1px 2px rgba(15,41,66,.06), 0 4px 14px rgba(15,41,66,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--zemin); color:var(--metin);
  font-size:15px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
a{color:var(--lacivert-acik);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--pirinc);outline-offset:2px}

/* -------------------------------------------------------- YAN MENÜ */
.menu-anahtar{display:none}
.yan{
  position:fixed; inset:0 auto 0 0; width:250px;
  background:var(--lacivert); color:#dbe6f0;
  display:flex; flex-direction:column; z-index:40;
  transition:transform .22s ease;
}
.marka{display:flex;align-items:center;gap:10px;padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.marka-ikon{font-size:22px;color:var(--pirinc-acik)}
.marka-ad{font-weight:650;letter-spacing:.3px;color:#fff;font-size:16px}
.menu{flex:1;overflow-y:auto;padding:10px 10px 20px}
.menu a{
  display:block;padding:11px 14px;margin:2px 0;border-radius:8px;
  color:#cbd9e6;font-size:14.5px;text-decoration:none;min-height:44px;line-height:22px;
}
.menu a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.menu a.aktif{background:var(--pirinc);color:#1b1206;font-weight:600}
.menu-baslik{
  padding:16px 14px 6px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#7e93a8;
}
.yan-alt{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.kul-ad{color:#fff;font-weight:600}
.kul-rol{color:#7e93a8;text-transform:capitalize;font-size:12px;margin-bottom:8px}
.cikis{color:var(--pirinc-acik);font-size:13px}
.perde{display:none}

/* --------------------------------------------------------- İÇERİK */
.ana{margin-left:250px;min-height:100vh;display:flex;flex-direction:column}
.ust{
  position:sticky;top:0;z-index:30;background:rgba(245,243,239,.92);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;gap:14px;
  padding:14px 22px;border-bottom:1px solid var(--cizgi);
}
.ust h1{font-size:19px;margin:0;font-weight:650;letter-spacing:-.01em;flex:1}
.ust-sag{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.menu-dugme{display:none;font-size:26px;line-height:1;cursor:pointer;padding:4px 10px;border-radius:8px}
.icerik{padding:22px;flex:1;max-width:1400px;width:100%}

/* --------------------------------------------------------- KUTULAR */
.kutu{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);box-shadow:var(--golge);margin-bottom:18px}
.kutu-bas{padding:14px 18px;border-bottom:1px solid var(--cizgi);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kutu-bas h2{margin:0;font-size:15.5px;font-weight:650;flex:1}
.kutu-ic{padding:18px}
.kutu-ic.sifir{padding:0}

.izgara{display:grid;gap:16px}
.izgara.k2{grid-template-columns:repeat(2,1fr)}
.izgara.k3{grid-template-columns:repeat(3,1fr)}
.izgara.k4{grid-template-columns:repeat(4,1fr)}

/* --------------------------------------------------------- FORMLAR */
label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:#3d4b59}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],
input[type=search],input[type=email],select,textarea{
  width:100%;padding:10px 12px;min-height:44px;
  border:1px solid var(--cizgi);border-radius:8px;background:#fff;
  font:inherit;color:var(--metin);
}
input[type=color]{width:56px;height:44px;padding:2px;border:1px solid var(--cizgi);border-radius:8px;background:#fff}
textarea{min-height:80px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#6b7785 50%),linear-gradient(135deg,#6b7785 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
input:focus,select:focus,textarea:focus{border-color:var(--lacivert-acik);outline:none;box-shadow:0 0 0 3px rgba(28,61,92,.12)}
.alan{margin-bottom:14px}
.alan-satir{display:flex;gap:14px;flex-wrap:wrap}
.alan-satir>.alan{flex:1;min-width:160px}
.ipucu{font-size:12px;color:var(--soluk);margin-top:4px}

.onay{display:flex;align-items:center;gap:9px;font-weight:500;font-size:14px;
  padding:9px 12px;border:1px solid var(--cizgi);border-radius:8px;background:#fff;cursor:pointer;min-height:44px}
.onay input{width:20px;height:20px;margin:0;flex-shrink:0}
.onay:has(input:checked){border-color:var(--lacivert);background:#eef3f8}
.onay-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}

/* --------------------------------------------------------- DÜĞMELER */
.dg{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 16px;min-height:44px;border:1px solid transparent;border-radius:8px;
  font:inherit;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;
  background:var(--lacivert);color:#fff;
}
.dg:hover{background:var(--lacivert-acik);text-decoration:none;color:#fff}
.dg.ikincil{background:#fff;color:var(--metin);border-color:var(--cizgi)}
.dg.ikincil:hover{background:#f0ede7;color:var(--metin)}
.dg.vurgu{background:var(--pirinc);color:#231705}
.dg.vurgu:hover{background:var(--pirinc-acik);color:#231705}
.dg.tehlike{background:#fff;color:var(--kirmizi);border-color:#f0c4c4}
.dg.tehlike:hover{background:#fdf0f0;color:var(--kirmizi)}
.dg.kucuk{padding:6px 11px;min-height:36px;font-size:13px}
.dg[disabled]{opacity:.5;pointer-events:none}
.dg-grup{display:flex;gap:8px;flex-wrap:wrap}

/* --------------------------------------------------------- TABLOLAR */
.tablo-sar{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{
  text-align:left;padding:11px 14px;background:#faf8f5;border-bottom:1px solid var(--cizgi);
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soluk);white-space:nowrap;
}
table.tbl td{padding:11px 14px;border-bottom:1px solid #f0ece5;vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:#fbfaf7}
.sag{text-align:right}
.orta{text-align:center}

/* ---------------------------------------------------------- ROZETLER */
.rozet{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;background:#eef1f4;color:#41505f;white-space:nowrap}
.rozet.yesil{background:#e7f6ec;color:var(--yesil)}
.rozet.sari{background:#fdf3e0;color:var(--sari)}
.rozet.kirmizi{background:#fbeaea;color:var(--kirmizi)}
.rozet.lacivert{background:#e9eff6;color:var(--lacivert)}
.alerjen-nokta{display:inline-block;font-size:15px;line-height:1;margin-right:2px}

/* ---------------------------------------------------------- UYARILAR */
.uyari{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14px;border:1px solid}
.uyari.basari{background:#e7f6ec;border-color:#b7e3c5;color:#14532d}
.uyari.hata{background:#fbeaea;border-color:#f0c4c4;color:#7f1d1d}
.uyari.bilgi{background:#e9eff6;border-color:#c6d6e6;color:#1e3a5f}

/* ------------------------------------------------------------- BOŞLUK */
.bos{padding:44px 20px;text-align:center;color:var(--soluk)}
.bos h3{margin:0 0 6px;color:var(--metin);font-size:16px}
.bos p{margin:0 0 16px;font-size:14px}

/* --------------------------------------------------- MENÜ PLANI EKRANI */
.istasyon{border:1px solid var(--cizgi);border-radius:var(--r);background:#fff;margin-bottom:14px;overflow:hidden}
.istasyon-bas{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#faf8f5;border-bottom:1px solid var(--cizgi)}
.istasyon-bas h3{margin:0;font-size:14.5px;font-weight:650;flex:1}
.satir{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #f2eee7}
.satir:last-child{border-bottom:none}
.satir-ad{flex:1;min-width:0}
.satir-ad strong{display:block;font-weight:600}
.satir-ad small{color:var(--soluk);font-size:12.5px}
.sira-dg{display:flex;gap:4px}
.sira-dg button{width:36px;height:36px;border:1px solid var(--cizgi);background:#fff;border-radius:7px;cursor:pointer;font-size:15px}
.sira-dg button:hover{background:#f0ede7}

/* ------------------------------------------------------- ÜRÜN SEÇİCİ */
.secici{position:fixed;inset:0;background:rgba(15,41,66,.45);z-index:60;display:none;align-items:flex-end;justify-content:center}
.secici.acik{display:flex}
.secici-kutu{background:#fff;width:100%;max-width:720px;max-height:88vh;border-radius:16px 16px 0 0;display:flex;flex-direction:column}
.secici-bas{padding:16px;border-bottom:1px solid var(--cizgi);display:flex;gap:10px;align-items:center}
.secici-liste{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.secici-liste button{display:block;width:100%;text-align:left;padding:13px 16px;border:none;border-bottom:1px solid #f2eee7;background:#fff;font:inherit;cursor:pointer;min-height:52px}
.secici-liste button:hover{background:#faf8f5}
.secici-liste small{color:var(--soluk);display:block;font-size:12.5px}

/* ---------------------------------------------------- ÖNİZLEME KARTI */
.onizleme{background:#e8e4dc;padding:24px;border-radius:var(--r);display:flex;justify-content:center}

/* --------------------------------------------------------- MOBİL/TABLET */
@media (max-width:1024px){
  .izgara.k4{grid-template-columns:repeat(2,1fr)}
  .izgara.k3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .yan{transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.3)}
  .menu-anahtar:checked ~ .yan{transform:translateX(0)}
  .menu-anahtar:checked ~ .perde{display:block;position:fixed;inset:0;background:rgba(15,41,66,.4);z-index:35}
  .ana{margin-left:0}
  .menu-dugme{display:block}
  .icerik{padding:16px}
  .izgara.k2,.izgara.k3,.izgara.k4{grid-template-columns:1fr}
  .ust h1{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

@media print{
  .yan,.ust,.perde,.dg-grup,.uyari{display:none!important}
  .ana{margin-left:0}
  .icerik{padding:0}
}