/* HCX Etiket Panel — HCX Platform teması (MikrotikCTR frontend'iyle aynı token'lar: shadcn HSL, Inter) */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --destructive: 0 84.2% 60.2%;
  --border: 214.3 31.8% 91.4%;
  --radius: 0.75rem;
  --golge: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  --logo-filtre: none; --logo-karisim: multiply;
  --yesil: 142 71% 45%; --kirmizi: 0 84% 60%; --turuncu: 25 95% 53%; --mor: 271 91% 65%; --sari: 45 93% 47%; --mavi: 217 91% 60%;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%;
    --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%;
    --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%;
    --destructive: 0 62.8% 50%; --border: 217.2 32.6% 17.5%;
    --golge: 0 20px 25px -5px rgb(0 0 0 / .35), 0 8px 10px -6px rgb(0 0 0 / .35);
    --logo-filtre: invert(1) hue-rotate(180deg); --logo-karisim: screen;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%;
  --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%;
  --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%;
  --destructive: 0 62.8% 50%; --border: 217.2 32.6% 17.5%;
  --golge: 0 20px 25px -5px rgb(0 0 0 / .35), 0 8px 10px -6px rgb(0 0 0 / .35);
  --logo-filtre: invert(1) hue-rotate(180deg); --logo-karisim: screen;
  color-scheme: dark;
}

* { box-sizing: border-box; border-color: hsl(var(--border)); }
[hidden] { display: none !important; } /* sınıfların display değeri hidden'ı ezmesin */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; overflow-x: hidden;
  background: hsl(var(--background)); color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 14px;
  -webkit-font-smoothing: antialiased; transition: background-color .3s, color .3s;
}
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / .2); border-radius: 3px; }

/* ---------- sol menü ---------- */
.yan {
  position: sticky; top: 0; height: 100vh; width: 256px; flex-shrink: 0; z-index: 50;
  display: flex; flex-direction: column; border-right: 1px solid hsl(var(--border));
  background: hsl(var(--card) / .95); backdrop-filter: blur(24px); transition: transform .3s ease;
}
.logo { padding: 32px; display: flex; justify-content: center; border-bottom: 1px solid hsl(var(--border) / .5); }
.logo img { width: 100%; max-width: 140px; height: auto; filter: var(--logo-filtre); mix-blend-mode: var(--logo-karisim); transition: transform .5s; }
.logo img:hover { transform: scale(1.05); }
.logo-yazi { text-align: center; color: hsl(var(--muted-foreground)); line-height: 1; }
.logo-yazi b { display: block; font-size: 44px; font-weight: 800; letter-spacing: -2px; }
.logo-yazi span { font-size: 12px; letter-spacing: 5px; } .logo-yazi i { color: #e3262f; font-style: normal; }
.menu { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.menu button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px;
  border: 1px solid transparent; background: none; color: hsl(var(--muted-foreground));
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; text-align: left; cursor: pointer; transition: all .15s;
}
.menu button:hover { color: hsl(var(--foreground)); background: hsl(var(--accent) / .5); }
.menu button.aktif { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); border-color: hsl(var(--primary) / .1); }
.kullanici { padding: 16px 32px; border-top: 1px solid hsl(var(--border)); display: flex; align-items: center; gap: 12px; }
.kullanici .avatar { width: 32px; height: 32px; border-radius: 50%; background: hsl(var(--primary) / .2); color: hsl(var(--primary)); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.kullanici b { display: block; font-size: 14px; font-weight: 500; }
.kullanici span { font-size: 10px; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .05em; }
.perde { display: none; }

/* ---------- gövde + üst bar ---------- */
.govde { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.govde::before, .govde::after { content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.govde::before { top: -10%; right: -10%; width: 50%; height: 50%; background: hsl(var(--primary) / .05); filter: blur(120px); }
.govde::after { bottom: -10%; left: 10%; width: 30%; height: 30%; background: hsl(var(--mavi) / .05); filter: blur(100px); }
.ust-bar {
  position: sticky; top: 0; z-index: 10; height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 32px;
  border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card) / .3); backdrop-filter: blur(12px);
}
.yol { flex: 1; font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ikon-dugme { padding: 8px; border: 0; border-radius: 999px; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; display: grid; place-items: center; }
.ikon-dugme:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.menu-ac { display: none; }
#tema .gunes { display: none; }
:root[data-theme="dark"] #tema .ay { display: none; } :root[data-theme="dark"] #tema .gunes { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #tema .ay { display: none; } :root:not([data-theme="light"]) #tema .gunes { display: block; } }

/* Gateway durum hapı (üst bar) */
.gw {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
}
.gw::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.gw[hidden] { display: none; }
.gw.on { color: hsl(var(--yesil)); background: hsl(var(--yesil) / .1); border-color: hsl(var(--yesil) / .2); }
.gw.on::before { animation: nabiz 2s infinite; }
.gw.off { color: hsl(var(--kirmizi)); background: hsl(var(--kirmizi) / .1); border-color: hsl(var(--kirmizi) / .2); }
@keyframes nabiz { 50% { opacity: .4; } }

main { position: relative; z-index: 1; padding: 32px; flex: 1; }
.sekme { display: none; animation: belir .4s ease; } .sekme.aktif { display: block; }
@keyframes belir { from { opacity: 0; transform: translateY(4px); } }
.sayfa-baslik { margin-bottom: 32px; }
.sayfa-baslik h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.025em; }
.sayfa-baslik p { margin: 4px 0 0; font-size: 16px; color: hsl(var(--muted-foreground)); }

/* ---------- form öğeleri ---------- */
input, select, textarea {
  font: inherit; padding: 8px 14px; border: 1px solid hsl(var(--border)); border-radius: 12px;
  background: hsl(var(--background)); color: hsl(var(--foreground)); outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: hsl(var(--primary) / .5); }
button, .dugme {
  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--foreground));
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all .15s;
}
button:hover, .dugme:hover { background: hsl(var(--accent)); border-color: hsl(var(--primary) / .2); }
button.birincil { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
button.birincil:hover { filter: brightness(1.08); }
button.tehlike { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .08); border-color: hsl(var(--destructive) / .15); }
button.tehlike:hover { background: hsl(var(--destructive) / .15); }
button:disabled { opacity: .5; cursor: default; }
.bilgi { color: hsl(var(--muted-foreground)); font-size: 13px; margin: 0 0 12px; }
.alt { color: hsl(var(--muted-foreground)); font-size: 12px; font-weight: 400; }

.arac { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.arac .sag { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
#toplu-yazi, #yemek-ara { width: 280px; max-width: 100%; }

/* ---------- dashboard ---------- */
.istatistikler { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 24px; }
.istat {
  position: relative; overflow: hidden; text-align: left; display: block; padding: 16px; border-radius: 16px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: var(--golge); color: hsl(var(--foreground));
  transition: transform .15s, border-color .15s;
}
.istat:hover { transform: scale(1.02); border-color: hsl(var(--primary) / .2); background: hsl(var(--card)); }
.istat .silik { position: absolute; top: 12px; right: 12px; opacity: .1; transition: opacity .15s; }
.istat:hover .silik { opacity: .2; }
.istat .etiket { display: block; font-size: 10px; font-weight: 700; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.istat .deger { display: block; font-size: 24px; font-weight: 700; }
.istat .kutu-ikon { margin-top: 8px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.istat .kutu-ikon svg { width: 15px; height: 15px; }
.ton-mavi { color: hsl(var(--mavi)); } .ton-mavi.kutu-ikon { background: hsl(var(--mavi) / .1); }
.ton-yesil { color: hsl(var(--yesil)); } .ton-yesil.kutu-ikon { background: hsl(var(--yesil) / .1); }
.ton-kirmizi { color: hsl(var(--kirmizi)); } .ton-kirmizi.kutu-ikon { background: hsl(var(--kirmizi) / .1); }
.ton-turuncu { color: hsl(var(--turuncu)); } .ton-turuncu.kutu-ikon { background: hsl(var(--turuncu) / .1); }
.ton-mor { color: hsl(var(--mor)); } .ton-mor.kutu-ikon { background: hsl(var(--mor) / .1); }

.dash-izgara { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
.tablo-kaydir { overflow-x: auto; }
.panel-kart {
  position: relative; overflow: hidden; background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: 24px; padding: 32px; box-shadow: var(--golge);
}
.panel-kart.tablo-kart { padding: 0; border-radius: 16px; }
.kart-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.kart-baslik h2 { margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.kart-baslik h2 svg { color: hsl(var(--primary)); animation: nabiz 2s infinite; }
.hizli { display: flex; flex-direction: column; gap: 12px; }
.hizli button {
  display: block; width: 100%; text-align: left; padding: 16px; border-radius: 16px;
  background: hsl(var(--muted) / .5); border: 1px solid hsl(var(--border));
}
.hizli button:hover { background: hsl(var(--accent)); }
.hizli button b { display: block; font-size: 14px; font-weight: 700; transition: color .15s; }
.hizli button:hover b { color: hsl(var(--primary)); }
.hizli button span { display: block; font-size: 10px; font-weight: 400; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.hizli button.vurgulu { background: hsl(var(--primary) / .1); border-color: hsl(var(--primary) / .2); }
.hizli button.vurgulu:hover { background: hsl(var(--primary) / .2); }
.hizli button.vurgulu b { color: hsl(var(--primary)); } .hizli button.vurgulu span { color: hsl(var(--primary) / .6); }

/* ---------- etiket / gateway kartları ---------- */
.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.kart {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: var(--golge); transition: border-color .15s;
}
.kart:hover { border-color: hsl(var(--primary) / .2); }
.kart .ust { display: flex; align-items: center; gap: 8px; }
.kart .isim { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; border: 1px solid transparent; padding: 4px 8px; margin-left: -8px; background: none; }
input.isim:hover, input.isim:focus { border-color: hsl(var(--border)); background: hsl(var(--background)); }
.rozet {
  font-size: 10px; padding: 3px 10px; border-radius: 999px; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .08em; border: 1px solid transparent;
}
.rozet.online { color: hsl(var(--yesil)); background: hsl(var(--yesil) / .1); border-color: hsl(var(--yesil) / .2); }
.rozet.offline { color: hsl(var(--kirmizi)); background: hsl(var(--kirmizi) / .1); border-color: hsl(var(--kirmizi) / .2); }
.rozet.bind, .rozet.bekleniyor { color: hsl(var(--sari)); background: hsl(var(--sari) / .12); border-color: hsl(var(--sari) / .25); }
.rozet.cikariliyor, .rozet.siliniyor, .rozet.cikarildi { color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); border-color: hsl(var(--border)); }
.ozellik { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13px; margin: 0; }
.ozellik dt { color: hsl(var(--muted-foreground)); } .ozellik dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.kart .islem { display: flex; gap: 8px; flex-wrap: wrap; }
.kart .islem input, .kart .islem select { flex: 1; min-width: 120px; }

/* ---------- tasarımlar ---------- */
.tasarim-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 12px; }
.tasarim-kart {
  display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 16px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); transition: border-color .15s;
}
.tasarim-kart:hover { border-color: hsl(var(--primary) / .25); }
.kucuk-onizleme {
  flex-shrink: 0; width: 112px; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  border-radius: 10px; background: #fff; border: 1px solid hsl(var(--border)); cursor: zoom-in;
}
.kucuk-onizleme img { width: 100%; height: 100%; object-fit: contain; }
.tasarim-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tasarim-bilgi > .alt { font-size: 12px; }
.tasarim-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tasarim-ust b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boyutlar { display: flex; flex-wrap: wrap; gap: 4px; }
.boyutlar a, .boyutlar span {
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; text-decoration: none;
  color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
}
.boyutlar a:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .3); }
.tasarim-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tasarim-alt .alt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
button.kucuk { padding: 5px 12px; font-size: 12px; flex-shrink: 0; }
.secimler.dikey { flex-direction: column; gap: 10px; }
.secimler.dikey label { font-size: 14px; }
.secimler.dikey label.pasif { opacity: .5; }

/* ---------- ürün grupları ---------- */
.kategori-filtre { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.kategori-filtre button { padding: 6px 12px; font-size: 13px; font-weight: 500; border-radius: 999px; background: hsl(var(--card)); }
.kategori-filtre button span { font-size: 11px; font-weight: 700; color: hsl(var(--muted-foreground)); margin-left: 2px; }
.kategori-filtre button.aktif { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); border-color: hsl(var(--primary) / .25); }
.kategori-filtre button.aktif span { color: hsl(var(--primary)); }
.urun-gruplari { display: flex; flex-direction: column; gap: 20px; }
.grup-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid hsl(var(--border)); }
.grup-baslik h2 { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
/* tek satır (ince) satırlar: hiçbir hücre alt satıra kaymaz; ürün adı kalan alanı alır, diğer sütunlar içeriği kadar */
.urun-grubu .tablo { table-layout: auto; }
.urun-grubu .tablo th:not(:first-child) { width: 1%; }
.urun-grubu .tablo th, .urun-grubu .tablo td { white-space: nowrap; }
.urun-grubu .tablo td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.urun-grubu .tablo td:not(:first-child) { padding-left: 14px; }
.urun-grubu .icerik { margin-top: 2px; font-size: 12px; }

/* ---------- etiket listesi ---------- */
.tablo.etiket-tablo td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.tablo.etiket-tablo th { white-space: nowrap; }
.etiket-tablo .sec-hucre { width: 1%; padding-right: 0; }
/* yazı/zemin rengi: etiketin 4 rengi */
.renk-sec { display: inline-flex; align-items: center; gap: 5px; }
.renk-sec .alt { font-size: 12px; margin-right: 2px; }
.renk-sec button { width: 24px; height: 24px; min-width: 0; padding: 0; border-radius: 50%; border: 1px solid hsl(var(--border)); }
.renk-sec button.secili { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.renk-sec button:disabled { opacity: .25; cursor: not-allowed; }
.etiket-tablo .sec-hucre input { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.etiket-tablo .hucre-isim { min-width: 180px; }
.etiket-tablo input.isim { font-weight: 600; font-size: 14px; width: 100%; padding: 4px 8px; margin-left: -8px; border-color: transparent; background: none; }
.etiket-tablo input.isim:hover, .etiket-tablo input.isim:focus { border-color: hsl(var(--border)); background: hsl(var(--background)); }
.etiket-tablo select.yemek, .etiket-tablo select.sablon { min-width: 150px; max-width: 200px; padding: 6px 10px; font-size: 13px; }
/* aranabilir ürün seçimi: select görünümlü düğme + body'de açılır kutu */
.etiket-tablo button.urun-sec { min-width: 150px; max-width: 200px; padding: 6px 28px 6px 10px; font-size: 13px; font-weight: 500; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; }
.etiket-tablo button.urun-sec::after { content: ''; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.etiket-tablo button.urun-sec.bos { color: hsl(var(--muted-foreground)); }
.urun-pop { position: fixed; z-index: 60; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 12px;
  box-shadow: 0 12px 32px rgb(0 0 0 / .18); padding: 8px; }
.urun-pop[hidden] { display: none; }
.urun-pop input { width: 100%; padding: 8px 10px; font-size: 14px; margin-bottom: 6px; }
.urun-pop-liste { max-height: 300px; overflow-y: auto; }
.urun-pop-kat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); padding: 8px 8px 3px; }
.urun-pop-oge { padding: 6px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urun-pop-oge.imlec { background: hsl(var(--primary) / .1); }
.urun-pop-oge.secili { font-weight: 700; color: hsl(var(--primary)); }
.urun-pop-oge .kapsam { margin-left: 6px; }
.urun-pop-bos { padding: 10px 8px; font-size: 13px; }
.tek-satir { white-space: nowrap; }
.sag-hucre { text-align: right; white-space: nowrap; }
.etiket-tablo button[data-is="cikar"], .etiket-tablo button[data-is="ekle"] { padding: 6px 12px; font-size: 12px; }

/* ---------- tablolar ---------- */
.tablo { width: 100%; border-collapse: collapse; }
.tablo-kart { overflow-x: auto; }
.tablo th, .tablo td { text-align: left; padding: 12px 16px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover td { background: hsl(var(--muted) / .4); }
.tablo th { font-size: 10px; font-weight: 700; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .1em; background: hsl(var(--muted) / .5); }
.tablo.sade th { background: none; padding-left: 0; } .tablo.sade td { padding-left: 0; }
.tablo td b { font-weight: 600; }
.etiket-al { display: inline-block; color: hsl(var(--kirmizi)); background: hsl(var(--kirmizi) / .1); border-radius: 6px; padding: 1px 7px; margin: 1px; font-size: 11px; font-weight: 600; }
.etiket-rz { display: inline-block; color: hsl(var(--primary)); background: hsl(var(--primary) / .1); border-radius: 6px; padding: 1px 7px; margin: 1px; font-size: 11px; font-weight: 600; }
.ara-baslik { margin: 32px 0 12px; font-size: 16px; font-weight: 700; }
#gateway { cursor: pointer; }

/* ---------- pencereler, bildirim ---------- */
dialog {
  border: 1px solid hsl(var(--border)); border-radius: 24px; padding: 0; width: min(720px, 94vw);
  background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}
dialog::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: blur(4px); }
dialog form { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
dialog h3 { margin: 0; font-size: 20px; font-weight: 700; }
dialog label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); }
dialog label.kutu { flex-direction: row; align-items: center; gap: 8px; color: hsl(var(--foreground)); }
.izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.izgara .genis { grid-column: span 2; }
fieldset { border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 10px 14px 14px; }
legend { font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); padding: 0 6px; }
.secimler { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.secimler label { flex-direction: row; align-items: center; gap: 6px; color: hsl(var(--foreground)); font-weight: 500; font-size: 13px; }
.dugmeler { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
#dash-etiketler tr.tikla { cursor: pointer; }
#dash-etiketler tr.tikla:hover td { background: hsl(var(--primary) / .05); }

/* "Tüm tesisler" seçiliyken tesis içeriği menüleri (Etiketler, Gateway, İşlem geçmişi) gizli */
body.tum-tesisler [data-tesis-menu] { display: none !important; }
body:not(.tum-tesisler) [data-genel-menu] { display: none !important; } /* yalnız "Tüm tesisler" görünümünde (ör. Etiket Havuzu) */
.menu > * { flex-shrink: 0; } /* menü dikey esnek kutu: başlıklar sıkışıp kaybolmasın */
.menu-baslik#menu-tesis-adi { color: hsl(var(--primary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* gatewayler */
.gw-kurulum { font-size: 13px; color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / .5); border: 1px solid hsl(var(--border));
  border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.gw-kurulum code { font-size: 12px; background: hsl(var(--card)); padding: 1px 6px; border-radius: 6px; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); }
.gw-bekleyen { font-size: 14px; font-weight: 600; color: hsl(var(--turuncu)); background: hsl(var(--turuncu) / .1); border: 1px solid hsl(var(--turuncu) / .3);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.gw-bekleyen[hidden] { display: none; }
.gw-tablo td { vertical-align: middle; }
.gw-tablo input.gw-isim { padding: 6px 10px; font-size: 14px; font-weight: 600; width: 190px; margin-bottom: 3px; }
.gw-tablo select.gw-tesis { min-width: 150px; padding: 6px 10px; font-size: 13px; }
.rozet.bekliyor { color: hsl(var(--turuncu)); background: hsl(var(--turuncu) / .1); border-color: hsl(var(--turuncu) / .25); }

/* roller: tesis admini panel-admini öğelerini görmez */
body.rol-tesis [data-admin] { display: none !important; }
.menu-baslik { margin: 14px 16px 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.tesis-sec { display: flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--card)); color: hsl(var(--muted-foreground)); }
.tesis-sec svg { width: 15px; height: 15px; }
.tesis-sec select { border: 0; background: none; padding: 6px 8px 6px 2px; font-size: 13px; font-weight: 600; max-width: 220px; color: hsl(var(--foreground)); }
.tesis-sec select:focus { border: 0; }
.tesis-sec.tek select { pointer-events: none; appearance: none; padding-right: 10px; }
.tablo .tesis-sutun { display: none; }
.tum-tesisler .tablo .tesis-sutun { display: table-cell; }
.etiket-tablo select.tesis { min-width: 120px; max-width: 160px; padding: 6px 10px; font-size: 13px; }
.kapsam { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 6px; margin-left: 6px; vertical-align: 1px; }
.kapsam.ortak { color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); }
.kapsam.ozel { color: hsl(var(--mor)); background: hsl(var(--mor) / .1); border: 1px solid hsl(var(--mor) / .25); }
.rol-etiket { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.rol-etiket.admin { color: hsl(var(--primary)); background: hsl(var(--primary) / .1); }
.rol-etiket.tesis { color: hsl(var(--yesil)); background: hsl(var(--yesil) / .1); }
@media (max-width: 640px) { .tesis-sec select { max-width: 120px; } }

/* giriş sayfası */
body.giris-sayfasi { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.giris-kutu { width: min(380px, 100%); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 24px;
  padding: 32px 28px; box-shadow: var(--golge); }
.giris-kutu .logo { padding: 0 0 20px; border: 0; }
.giris-kutu .logo img { max-width: 130px; }
.giris-kutu h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; text-align: center; }
.giris-kutu .bilgi { text-align: center; margin-bottom: 20px; }
.giris-kutu form { display: flex; flex-direction: column; gap: 14px; }
.giris-kutu label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); }
.giris-kutu input { padding: 10px 14px; font-size: 14px; }
.giris-kutu button { justify-content: center; padding: 10px 16px; font-size: 14px; margin-top: 4px; }
.giris-hata { font-size: 13px; color: hsl(var(--destructive)); background: hsl(var(--destructive) / .08);
  border: 1px solid hsl(var(--destructive) / .2); border-radius: 10px; padding: 8px 12px; }
.giris-hata[hidden] { display: none; }
.cikis { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 500; color: hsl(var(--destructive)); text-decoration: none; }
.cikis:hover { text-decoration: underline; }
.cikis[hidden] { display: none; }

/* tasarım önizleme penceresi */
dialog.onizleme-dialog { width: min(720px, 94vw); padding: 20px 24px 18px; }
.onizleme-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onizleme-ust h3 { margin: 0; font-size: 18px; font-weight: 700; }
.onizleme-boyutlar { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.onizleme-boyutlar button { padding: 5px 12px; font-size: 12px; border-radius: 999px; }
.onizleme-boyutlar button.aktif { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); border-color: hsl(var(--primary) / .3); }
.onizleme-cerceve { display: grid; place-items: center; padding: 20px; border-radius: 16px; background: hsl(var(--muted) / .6); border: 1px solid hsl(var(--border)); overflow: auto; }
.onizleme-cerceve img { display: block; max-width: 100%; height: auto; padding: 10px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 8px #2b2f36, 0 10px 24px rgb(0 0 0 / .2); image-rendering: pixelated; margin: 8px; }
#onizleme-not { margin: 12px 0 0; text-align: center; }

/* onay penceresi */
dialog.onay { width: min(460px, 92vw); padding: 0; }
.onay-govde { display: flex; gap: 16px; padding: 24px 24px 20px; }
.onay-ikon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.onay-ikon svg { width: 22px; height: 22px; }
.onay.tehlike .onay-ikon { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.onay.bilgi .onay-ikon { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.onay-icerik { min-width: 0; flex: 1; }
.onay-icerik h3 { margin: 2px 0 6px; font-size: 17px; font-weight: 700; }
.onay-icerik p { margin: 0; font-size: 14px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.onay-icerik p b { color: hsl(var(--foreground)); font-weight: 600; }
.onay-detay { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: hsl(var(--muted) / .6); border: 1px solid hsl(var(--border)); display: grid; gap: 4px; font-size: 13px; }
.onay-detay[hidden] { display: none; }
.onay-detay div { display: flex; justify-content: space-between; gap: 12px; }
.onay-detay span { color: hsl(var(--muted-foreground)); }
.onay-detay b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.onay-dugmeler { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; background: hsl(var(--muted) / .4); border-top: 1px solid hsl(var(--border)); }
button.tehlike-dolu { background: hsl(var(--destructive)); color: #fff; border-color: hsl(var(--destructive)); }
button.tehlike-dolu:hover { filter: brightness(1.08); background: hsl(var(--destructive)); }
dialog[open].onay { animation: onay-ac .16s ease-out; }
@keyframes onay-ac { from { opacity: 0; transform: translateY(6px) scale(.98); } }

#bildirim { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
#bildirim div {
  background: hsl(var(--card)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-left: 4px solid hsl(var(--primary));
  padding: 12px 16px; border-radius: 12px; box-shadow: var(--golge); max-width: 360px; font-weight: 500;
}
#bildirim div.hata { border-left-color: hsl(var(--destructive)); }

/* ---------- duyarlı ---------- */
@media (max-width: 1280px) { .istatistikler { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) {
  .yan { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); }
  body.menu-acik .yan { transform: none; }
  body.menu-acik .perde { display: block; position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .5); backdrop-filter: blur(4px); }
  .menu-ac { display: grid; margin-left: -8px; }
  .ust-bar { padding: 0 16px; height: 56px; gap: 8px; }
  main { padding: 16px; }
  .dash-izgara { grid-template-columns: minmax(0, 1fr); }
  .panel-kart { padding: 16px; border-radius: 16px; }
  .sayfa-baslik { margin-bottom: 20px; } .sayfa-baslik h1 { font-size: 24px; } .sayfa-baslik p { font-size: 14px; }
}
@media (max-width: 640px) {
  .istatistikler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yol { font-size: 13px; }
  .kartlar { grid-template-columns: 1fr; }
  .izgara { grid-template-columns: 1fr; } .izgara .genis { grid-column: span 1; }
  .arac .sag { margin-left: 0; }
  #toplu-yazi, #yemek-ara { width: 100%; }
  .gw { font-size: 9px; padding: 4px 8px; }
  .tablo.sade th:nth-child(2), .tablo.sade td:nth-child(2), .tablo.sade th:nth-child(5), .tablo.sade td:nth-child(5) { display: none; }
}
.dar-icerik { display: none; font-size: 12px; margin-top: 2px; }
@media (max-width: 1500px) {
  .tablo.etiket-tablo th, .tablo.etiket-tablo td { padding-left: 10px; padding-right: 10px; }
  .etiket-tablo select.yemek, .etiket-tablo select.sablon { min-width: 130px; max-width: 160px; }
  .etiket-tablo button.urun-sec { min-width: 130px; max-width: 160px; }
  .etiket-tablo .hucre-isim { min-width: 150px; }
}
@media (max-width: 1380px) {
  .etiket-tablo th:nth-child(4), .etiket-tablo td:nth-child(4) { display: none; } /* İçerik (1. sütun seçim kutusu) */
  .dar-icerik { display: block; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.kirmizi-yazi { color: hsl(var(--kirmizi)); }
#toplu-yazi::placeholder { color: inherit; opacity: .55; }

/* pil: renkli simge + yüzde (iyi ≥40, orta 20–39, az <20) */
.pil { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pil svg { width: 24px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.pil svg .dolu { fill: currentColor; stroke: none; }
.pil.iyi { color: hsl(var(--yesil)); }
.pil.orta { color: hsl(var(--turuncu)); }
.pil.az { color: hsl(var(--kirmizi)); }
.pil.eski { opacity: .55; }