/* Asır Ofset araç teması — sunucu her aracın ana sayfasına ekler (araçların kendi dosyaları değişmez).
   Renkler ve yazı tipleri panelin Görünüm ayarlarından gelir: --mavi, --murekkep, --zemin, --baslik, --govde.
   Araçlara özel kurallar html:root[data-arac="..."] ile yazılır; böylece aracın kendi :root ayarlarını ezer. */

:root {
  --mavi-koyu: color-mix(in srgb, var(--mavi) 78%, #000);
  --mavi-acik: color-mix(in srgb, var(--mavi) 11%, #fff);
  --asir-cubuk: 42px;
}

/* ---------- üst marka çubuğu ---------- */
.asir-cubuk {
  box-sizing: border-box; position: relative; z-index: 900; flex: none;
  display: flex; align-items: center; gap: 12px; height: var(--asir-cubuk); padding: 0 14px 3px;
  background: var(--murekkep); color: #fff; font: 500 14px/1 var(--govde); user-select: none;
}
.asir-cubuk * { box-sizing: border-box; margin: 0; }
.asir-cubuk::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #00a3e0 0 25%, #e5007e 25% 50%, #ffe600 50% 75%, var(--mavi) 75%);
}
.asir-cubuk a { color: #fff; text-decoration: none; }
.asir-marka { display: flex; align-items: center; gap: 9px; }
.asir-marka img { display: block; width: 28px; height: 28px; padding: 2px; border-radius: 5px; background: #fff; object-fit: contain; }
.asir-marka b { font: var(--baslik-kalinlik, 700) 18px/1 var(--baslik); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.asir-ayrac { width: 1px; height: 18px; background: rgba(255, 255, 255, .28); flex: none; }
.asir-arac { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; opacity: .92; }
.asir-panel { margin-left: auto; flex: none; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; font-size: 13px; white-space: nowrap; }
.asir-panel:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 520px) { .asir-marka b, .asir-ayrac { display: none; } }
@media print { .asir-cubuk { display: none !important; } }

/* ---------- Sipariş Defteri ---------- */
html[data-arac^="siparis"] body { font-family: var(--govde); }
html[data-arac^="siparis"] th { background: var(--murekkep); border-right-color: color-mix(in srgb, var(--murekkep) 75%, #fff); }
html[data-arac^="siparis"] .info input:focus { border-color: var(--mavi); }
html[data-arac^="siparis"] td input:focus { box-shadow: inset 0 0 0 2px var(--mavi); }
html[data-arac^="siparis"] tr:hover td { background-color: var(--mavi-acik); }
html[data-arac^="siparis"] tr:hover td.no { background-color: color-mix(in srgb, var(--mavi) 22%, #fff); }
html[data-arac^="siparis"] .tab.on { color: var(--mavi-koyu); box-shadow: inset 0 -3px 0 var(--mavi); }
html[data-arac^="siparis"] .act.yeni { background: var(--mavi); border-color: var(--mavi); }
html[data-arac^="siparis"] .sum.kalan { background: var(--murekkep); border-color: var(--murekkep); }
html[data-arac^="siparis"] .islem.kaydet { background: var(--mavi); border-color: var(--mavi); }
html[data-arac^="siparis"] .islem.kaydet:hover { background: var(--mavi-koyu); }
html[data-arac^="siparis"] .islem.kaydet.bekliyor { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mavi) 30%, transparent); }

/* ---------- ASIRKOD (barkod) ---------- */
html:root[data-arac="barkod"] {
  --b: var(--mavi); --b-dark: var(--mavi-koyu); --b-soft: var(--mavi-acik);
  --b-line: color-mix(in srgb, var(--mavi) 24%, #fff); --ink: var(--murekkep);
}
html[data-arac="barkod"] body { font-family: var(--govde); background: var(--zemin); }
html[data-arac="barkod"] header h1 { font-family: var(--baslik); font-weight: var(--baslik-kalinlik, 700); color: var(--murekkep); }

/* ---------- Bıçak İzi ---------- */
html:root[data-arac="bicak-izi"] { --accent: var(--mavi); --accent-ink: #fff; --sel: var(--mavi); --sans: var(--govde); }
html[data-arac="bicak-izi"] body { display: flex; flex-direction: column; }
html[data-arac="bicak-izi"] .app { flex: 1; min-height: 0; height: auto; }

/* ---------- Oyuncu Kartı ---------- */
html:root[data-arac="oyuncu-kart"] {
  --primary: var(--mavi); --primary-dark: var(--mavi-koyu);
  --primary-soft: color-mix(in srgb, var(--mavi) 9%, transparent); --text: var(--murekkep); --bg: var(--zemin);
}
html[data-arac="oyuncu-kart"] body { font-family: var(--govde); }
html[data-arac="oyuncu-kart"] .brand-badge { background: var(--mavi); box-shadow: 0 8px 20px color-mix(in srgb, var(--mavi) 35%, transparent); }
html[data-arac="oyuncu-kart"] .app-header h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--murekkep); font-family: var(--baslik); font-weight: var(--baslik-kalinlik, 700); text-transform: var(--baslik-harf); letter-spacing: .01em; }
html[data-arac="oyuncu-kart"] .panel::before { background: linear-gradient(90deg, #00a3e0 0 25%, #e5007e 25% 50%, #ffe600 50% 75%, var(--mavi) 75%); }

/* ---------- Astrator: kendi tema seçicisi yerine Asır Ofset renkleri ---------- */
html:root[data-arac="astrator"] {
  --acc: var(--mavi) !important; --sel: var(--mavi) !important; --seld: var(--mavi-koyu) !important;
  --on: var(--mavi-acik) !important; --onb: color-mix(in srgb, var(--mavi) 45%, #fff) !important;
  --ontx: var(--mavi-koyu) !important; --focus: color-mix(in srgb, var(--mavi) 25%, #fff) !important;
  --tx: var(--murekkep) !important;
}
html[data-arac="astrator"], html[data-arac="astrator"] body { font-family: var(--govde); }
html[data-arac="astrator"] #app { height: calc(100vh - var(--asir-cubuk)); }
html[data-arac="astrator"] #menubar .themebtn, html[data-arac="astrator"] .themepop { display: none !important; }

/* Bilgisayara kur düğmesi (sipariş defterleri) */
.asir-kur { flex: none; padding: 6px 12px; border: 0; border-radius: 6px; background: #fff; color: #0b5ea8; font: 700 13px/1.2 system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.asir-kur:hover { filter: brightness(.94); }
.asir-cubuk .asir-kur { margin-left: auto; }
.asir-cubuk .asir-kur + .asir-panel { margin-left: 0; }
.asir-kur-dlg { max-width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 12px; padding: 22px 26px; font: 14px/1.5 system-ui, sans-serif; color: #222; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.asir-kur-dlg h3 { margin: 0 0 10px; }
.asir-kur-dlg p { margin: 0 0 10px; }
.asir-kur-dlg .asir-kur { background: #0b5ea8; color: #fff; }