/* ================================================================
   Resto SaaS · Süper-admin kontrol paneli
   Kimlik: slate (kule) + pine yeşil (operasyon) + amber (sinyal)
   Tip:    Space Grotesk (marka/başlık) · Inter (gövde/veri)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --ink:#16202E; --ink-2:#1E2B3C; --ink-3:#28384C;
  --pine:#0E7C66; --pine-600:#0B6653; --pine-050:#E4F2ee;
  --amber:#E8A317; --amber-050:#FCF3DD;
  --bg:#F5F6F8; --card:#FFFFFF; --line:#E2E8F0;
  --tx:#1A2332; --tx-mut:#64748B; --tx-dim:#94A3B8;
  --danger:#DC2626; --danger-050:#FCEAEA;
  --r:10px; --r-sm:7px;
  --sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --sh-lg:0 10px 30px rgba(16,24,40,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg); color:var(--tx);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;letter-spacing:-.01em}

/* ---------- Kabuk ---------- */
.kabuk{display:flex;min-height:100vh}
.yan{
  width:236px;flex-shrink:0;background:var(--ink);color:#CBD5E1;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.marka{
  padding:22px 20px 18px;display:flex;align-items:center;gap:11px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.marka .logo{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--pine),var(--pine-600));
  display:grid;place-items:center;font-family:'Space Grotesk';
  font-weight:700;color:#fff;font-size:16px;
  box-shadow:0 2px 8px rgba(14,124,102,.4);
}
.marka b{font-family:'Space Grotesk';font-weight:600;color:#fff;font-size:16px;display:block;line-height:1.15}
.marka span{font-size:11px;color:var(--tx-dim);letter-spacing:.03em}
.nav{padding:14px 12px;flex:1;overflow-y:auto}
.nav .grup{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:#5B6B80;padding:14px 12px 7px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);
  color:#AEBACb;font-weight:500;margin-bottom:2px;transition:.13s;font-size:13.5px;
}
.nav a svg{width:17px;height:17px;flex-shrink:0;opacity:.85}
.nav a:hover{background:var(--ink-3);color:#fff}
.nav a.aktif{background:var(--pine);color:#fff}
.nav a.aktif svg{opacity:1}
.yan-alt{padding:14px;border-top:1px solid rgba(255,255,255,.07)}
.yan-alt .kim{display:flex;align-items:center;gap:10px;padding:6px 8px}
.yan-alt .av{width:32px;height:32px;border-radius:50%;background:var(--amber);color:var(--ink);
  display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}
.yan-alt .kim b{color:#fff;font-size:13px;display:block;font-weight:600}
.yan-alt .kim span{font-size:11px;color:var(--tx-dim)}
.yan-alt .cikis{display:block;text-align:center;margin-top:8px;font-size:12.5px;color:#8494A8;padding:7px}
.yan-alt .cikis:hover{color:#fff}

.icerik{flex:1;min-width:0;display:flex;flex-direction:column}
.ust{
  height:62px;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 28px;
  position:sticky;top:0;z-index:20;
}
.ust h1{font-size:19px;font-weight:600}
.ust .yol{font-size:12px;color:var(--tx-dim);margin-top:2px}
.govde{padding:26px 28px;max-width:1240px;width:100%}

/* ---------- İstatistik kartları ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:26px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh);position:relative;overflow:hidden}
.stat .ikon{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:9px;display:grid;place-items:center}
.stat .ikon svg{width:19px;height:19px}
.stat.p .ikon{background:var(--pine-050);color:var(--pine)}
.stat.a .ikon{background:var(--amber-050);color:#B57C0A}
.stat.s .ikon{background:#EAF0F6;color:#3F6089}
.stat .etk{font-size:12px;color:var(--tx-mut);font-weight:500}
.stat .deg{font-family:'Space Grotesk';font-size:29px;font-weight:600;margin-top:6px;letter-spacing:-.02em;font-feature-settings:"tnum"}
.stat .alt{font-size:11.5px;color:var(--tx-dim);margin-top:3px}

/* ---------- Kart / tablo ---------- */
.kart{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.kart-bas{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.kart-bas h2{font-size:15px;font-weight:600}
.kart-bas .not{font-size:12px;color:var(--tx-dim);margin-top:2px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-dim);font-weight:600;padding:11px 20px;background:#FAFBFC;border-bottom:1px solid var(--line)}
td{padding:13px 20px;border-bottom:1px solid var(--line);font-size:13.5px}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAFBFC}
td.num{font-feature-settings:"tnum";text-align:right}
.bos-durum{padding:44px 20px;text-align:center;color:var(--tx-dim)}
.bos-durum b{display:block;color:var(--tx-mut);font-weight:600;margin-bottom:4px}

/* ---------- Rozet ---------- */
.rozet{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px}
.rozet::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.rozet.aktif{background:var(--pine-050);color:var(--pine)}
.rozet.askida,.rozet.deneme{background:var(--amber-050);color:#B57C0A}
.rozet.iptal,.rozet.suresi_doldu{background:var(--danger-050);color:var(--danger)}

/* ---------- Buton ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13.5px;font-weight:600;
  padding:9px 15px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:.13s;background:none}
.btn svg{width:16px;height:16px}
.btn-ana{background:var(--pine);color:#fff}
.btn-ana:hover{background:var(--pine-600)}
.btn-ciz{border-color:var(--line);color:var(--tx);background:var(--card)}
.btn-ciz:hover{border-color:var(--tx-dim);background:#FAFBFC}
.btn-sm{padding:6px 11px;font-size:12.5px}
.btn-teh{color:var(--danger)}
.btn-teh:hover{background:var(--danger-050)}
.satir-btn{display:flex;gap:6px;justify-content:flex-end}

/* ---------- Form / modal ---------- */
.modal-arka{position:fixed;inset:0;background:rgba(16,24,40,.5);backdrop-filter:blur(2px);
  display:none;align-items:flex-start;justify-content:center;padding:60px 20px;z-index:50;overflow-y:auto}
.modal-arka.acik{display:flex}
.modal{background:var(--card);border-radius:14px;width:100%;max-width:520px;box-shadow:var(--sh-lg);animation:yuksel .18s ease}
@keyframes yuksel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal-bas{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal-bas h3{font-size:17px;font-weight:600}
.modal-bas .kapa{cursor:pointer;color:var(--tx-dim);font-size:22px;line-height:1;background:none;border:none}
.modal-govde{padding:22px 24px;display:grid;gap:15px}
.modal-alt{padding:16px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.alan label{display:block;font-size:12.5px;font-weight:600;color:var(--tx-mut);margin-bottom:6px}
.alan input,.alan select{width:100%;font-family:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);color:var(--tx);transition:.13s}
.alan input:focus,.alan select:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-050)}
.alan-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.onay{display:flex;align-items:center;gap:8px;font-size:13.5px}
.onay input{width:16px;height:16px;accent-color:var(--pine)}

/* ---------- Giriş ---------- */
.giris-sar{min-height:100vh;display:grid;place-items:center;background:
  radial-gradient(1200px 500px at 80% -10%,rgba(14,124,102,.10),transparent),var(--ink)}
.giris-kart{background:var(--card);border-radius:16px;box-shadow:var(--sh-lg);width:100%;max-width:396px;padding:38px 36px}
.giris-kart .logo{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--pine),var(--pine-600));
  display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;color:#fff;font-size:22px;margin-bottom:22px}
.giris-kart h1{font-size:22px;font-weight:600;margin-bottom:5px}
.giris-kart p{color:var(--tx-mut);font-size:13.5px;margin:0 0 26px}
.giris-hata{background:var(--danger-050);color:var(--danger);font-size:13px;font-weight:500;
  padding:11px 14px;border-radius:var(--r-sm);margin-bottom:18px}
.giris-kart .btn-ana{width:100%;justify-content:center;padding:11px;margin-top:8px}
.giris-kart .alan{margin-bottom:16px}

/* ---------- Duyarlı / mobil ---------- */
.mnu{display:none}
.yan-perde{display:none}

@media(max-width:860px){
  .yan{position:fixed;left:-260px;z-index:70;transition:left .22s ease;width:260px;
       padding-bottom:env(safe-area-inset-bottom)}
  .yan.ac{left:0;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .yan-perde{display:block;position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:65;
       opacity:0;pointer-events:none;transition:opacity .22s}
  .yan-perde.ac{opacity:1;pointer-events:auto}
  .mnu{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;
       border:1px solid var(--line);background:var(--card);cursor:pointer;flex-shrink:0}

  .alan-2{grid-template-columns:1fr}
  .govde{padding:16px 14px}
  .ust{padding:0 14px;height:58px;gap:10px}
  .ust h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Tablolar yatay kaydırılsın — yalnızca tablo içeren kartlarda */
  .kart:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kart:has(> table) table{min-width:520px}
  th,td{padding:11px 14px}

  /* Dokunma hedefleri en az 40px */
  .btn{padding:11px 15px}
  .btn-sm{padding:9px 12px}
  .satir-btn{gap:8px}

  /* İstatistik kartları 2'li */
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .stat{padding:14px 15px}
  .stat .deg{font-size:23px}
  .stat .ikon{width:30px;height:30px;top:12px;right:12px}
  .stat .ikon svg{width:16px;height:16px}

  /* Modal tam ekrana yakın */
  .modal-arka{padding:0;align-items:flex-end}
  .modal{max-width:100%;border-radius:16px 16px 0 0;max-height:92vh;overflow-y:auto}
  .modal-alt{position:sticky;bottom:0;background:var(--card)}
  .modal-alt .btn{flex:1;justify-content:center}
}

@media(max-width:420px){
  .stat-grid{grid-template-columns:1fr}
  .giris-kart{padding:30px 22px}
}

/* Dokunmatik cihazlarda hover titremesini engelle */
@media(hover:none){
  .masa:hover{transform:none;box-shadow:none}
  .urun-btn:hover{background:var(--card)}
}


/* ================================================================
   Onay diyaloğu (tarayıcı confirm() yerine)
   ================================================================ */
.onay-arka{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(16,24,40,.55);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .16s ease;
}
.onay-arka.ac{opacity:1;pointer-events:auto}
.onay-kutu{
  background:var(--card);border-radius:16px;width:100%;max-width:410px;padding:28px 26px 22px;
  text-align:center;box-shadow:0 24px 60px rgba(16,24,40,.28);
  transform:scale(.94) translateY(6px);transition:transform .18s cubic-bezier(.2,.9,.3,1.2);
}
.onay-arka.ac .onay-kutu{transform:none}
.onay-ikon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px}
.onay-ikon svg{width:26px;height:26px}
.onay-ikon.ana{background:var(--pine-050);color:var(--pine)}
.onay-ikon.teh{background:var(--danger-050);color:var(--danger)}
.onay-kutu h3{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;margin:0 0 7px}
.onay-kutu p{color:var(--tx-mut);font-size:14px;line-height:1.55;margin:0 0 22px}
.onay-btn{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.onay-btn .btn{justify-content:center;padding:11px}
.btn-teh-dolu{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-teh-dolu:hover{background:#B91C1C;border-color:#B91C1C}
@media(max-width:420px){
  .onay-kutu{padding:24px 20px 18px}
  .onay-btn{grid-template-columns:1fr}
  .onay-btn .btn-ciz{order:2}
}
@media(prefers-reduced-motion:reduce){
  .onay-arka,.onay-kutu{transition:none}
}

/* ================================================================
   Toast bildirimi
   ================================================================ */
.toast-kap{position:fixed;bottom:22px;right:22px;z-index:210;display:flex;flex-direction:column;gap:9px}
.toast{
  display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;
  padding:12px 16px;border-radius:11px;font-size:13.5px;font-weight:500;
  box-shadow:0 10px 30px rgba(16,24,40,.28);min-width:230px;max-width:340px;
  opacity:0;transform:translateY(10px);transition:.2s ease;
}
.toast.ac{opacity:1;transform:none}
.toast svg{width:17px;height:17px;flex-shrink:0}
.toast.ok svg{color:#34D399}
.toast.hata svg{color:#F87171}
@media(max-width:600px){
  .toast-kap{left:14px;right:14px;bottom:14px}
  .toast{max-width:none}
}


/* ================================================================
   MOBİL TAŞMA DÜZELTMELERİ
   Yatay kaymanın kök sebepleri: (1) üst çubuk satır kaymıyor,
   (2) flex/grid çocukları min-width:auto ile küçülmüyor.
   ================================================================ */

/* Hiçbir şey gövdeyi yatayda taşıramaz */
html, body { max-width: 100%; overflow-x: hidden; }
* { min-width: 0; }                 /* flex/grid taşmasının klasik ilacı */
img, svg, video, table { max-width: 100%; }

/* Kabuk ve içerik yatayda sıkışabilsin */
.kabuk  { max-width: 100%; overflow-x: hidden; }
.icerik { min-width: 0; max-width: 100%; }
.govde  { width: 100%; max-width: 1240px; box-sizing: border-box; }

/* --- Üst çubuk: mobilde satır kayabilsin --- */
.ust {
  flex-wrap: wrap;
  height: auto;
  min-height: 62px;
  gap: 10px 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
}
.ust h1 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .ust { min-height: 56px; padding: 10px 14px; }

  /* Sağdaki aksiyon alanı alt satıra geçsin ve tam genişlik kullansın */
  .ust > *:not(:first-child) { flex: 1 1 100%; }
  .ust > *:not(:first-child) > .btn,
  .ust > *:not(:first-child) > form,
  .ust > *:not(:first-child) > button { width: 100%; justify-content: center; }

  /* İçinde birden çok buton olan sarmalayıcılar (ör. Menü: Kategori + Ürün) */
  .ust > div[style*="display:flex"] { width: 100%; }
  .ust > div[style*="display:flex"] > .btn { flex: 1; justify-content: center; }

  /* Tarih filtreli formlar (rapor, performans) */
  .ust form { flex-wrap: wrap; width: 100%; }
  .ust form input[type="date"] { flex: 1; min-width: 120px; }

  /* Tablolar kart içinde kaydırılır — AMA yalnızca tablo İÇEREN kartlarda.
     (Tüm kartlara uygulanırsa adisyon fişi gibi kartların içeriği kırpılır.) */
  .kart { max-width: 100%; }
  .kart:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kart:has(> table) table { min-width: 480px; }

  /* Kart içindeki ızgaralar taşmasın */
  .stat-grid, .masa-grid, .urun-grid, .pk-grid, .kds-grid, .tl-liste { max-width: 100%; }
}

/* Çok dar ekranlar (≤400px) */
@media (max-width: 400px) {
  .govde { padding: 14px 12px; }
  .ust   { padding: 9px 12px; }
  .ust h1 { font-size: 16px; }
  .masa-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .urun-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  table { min-width: 420px; }
  th, td { padding: 10px 12px; font-size: 13px; }
}

/* Uzun metinler (adres, ürün adı) satırı kırsın, taşırmasın */
.masa .ad, .urun-btn .u-ad, .kalem .k-ad b, .pk .ad-s, .tl-sr span {
  overflow-wrap: anywhere;
}


/* Üst çubuk iç yapısı */
.ust-sol { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.ust-sag { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ust-sag form { display: flex; align-items: center; gap: 7px; margin: 0; }

@media (max-width: 860px) {
  .ust-sol { flex: 1 1 auto; }
  .ust-sag { flex: 1 1 100%; }
  .ust-sag > .btn,
  .ust-sag > form,
  .ust-sag > div { width: 100%; }
  .ust-sag > .btn { justify-content: center; }
  .ust-sag > div { display: flex; gap: 8px; }
  .ust-sag > div > .btn { flex: 1; justify-content: center; }
  .ust-sag form .btn { flex-shrink: 0; }
}


/* :has() desteklemeyen tarayıcılar için yedek — tablo kendi içinde kayar,
   kart içeriği (fiş, form vb.) ASLA kırpılmaz. */
@supports not selector(:has(*)) {
  @media (max-width: 860px) {
    .kart { overflow: visible; }
    .kart table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  }
}

/* Adisyon fişi ve benzeri kartlar hiçbir koşulda yatay kaymasın */
.fis, .kart .fis-alt, .kart .fis-bas, .kart .kalem-liste { overflow-x: visible; }
.kasa-not, .izin-kutu { overflow-wrap: anywhere; }