/* Cafe Falco paneli - Tezgahla restoran kabugu duzeninde: ust cubuk, masaustunde sol serit, telefonda alt cubuk */
:root {
  --zemin: #f6f7f9; --yuzey: #ffffff; --cizgi: #e5e7eb; --metin: #1f2328; --ikincil: #5f6b7a; --soluk: #8a94a3;
  --marka: #d9480f; --marka-acik: rgba(217, 72, 15, .1); --seri2: #1c7ed6;
  --iyi: #2b8a3e; --kotu: #c92a2a; --uyari: #e67700; --golge: 0 1px 2px rgba(16, 24, 40, .06);
  --ust: 56px; --ray: 92px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zemin: #121417; --yuzey: #1b1e23; --cizgi: #2c3037; --metin: #e8eaed; --ikincil: #a5adb8; --soluk: #7d8691;
    --marka: #e8590c; --marka-acik: rgba(232, 89, 12, .16); --seri2: #339af0; --iyi: #51cf66; --kotu: #ff6b6b; --uyari: #fcc419;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--zemin); color: var(--metin); font: 15px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.sayi { font-variant-numeric: tabular-nums; }

/* ust cubuk */
.ust { position: sticky; top: 0; z-index: 30; height: var(--ust); display: flex; align-items: center; gap: .75rem;
  padding: 0 16px; background: var(--yuzey); border-bottom: 1px solid var(--cizgi); }
.marka-bag { display: inline-flex; align-items: center; gap: .6rem; color: var(--metin); text-decoration: none; }
.marka-bag .logo-amblem { width: 34px; height: 34px; }
.marka-bag .logo-yazi { height: 15px; width: auto; }
.giris-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 4px 0 18px; color: var(--metin); }
.giris-logo .logo-amblem { width: 84px; height: 84px; }
.giris-logo .logo-yazi { height: 26px; width: auto; }
@media (max-width: 420px) { .marka-bag .logo-yazi { display: none; } }

/* neon tabela logosu: lacivert zemin, mavi neon harfler, beyaz halkali amblem, hafif nefes alan isik */
.neon { --neon: #74c0fc; --neon-koyu: #1c7ed6; display: inline-flex; align-items: center; gap: 5px; height: 42px; padding: 4px 12px;
  border-radius: 12px; background: #0b1426; box-shadow: inset 0 0 0 1px #1d2b45; }
.neon-yazi { height: 22px; width: auto; overflow: visible; }
.neon-yazi path { fill: none; stroke: var(--neon); stroke-width: 2.4; stroke-linejoin: round;
  filter: drop-shadow(0 0 1.5px var(--neon)) drop-shadow(0 0 5px var(--neon-koyu)); animation: neon-nefes 3.2s ease-in-out infinite alternate; }
.neon-amblem { width: 34px; height: 34px; border-radius: 50%; background: #0b1426; display: grid; place-items: center; color: #f8f9fa;
  box-shadow: 0 0 0 2px #e9ecef, 0 0 8px 1px rgba(255, 255, 255, .55); animation: halka-nefes 3.2s ease-in-out infinite alternate; }
.neon-amblem svg { width: 30px; height: 30px; }
@keyframes neon-nefes {
  from { filter: drop-shadow(0 0 1px var(--neon)) drop-shadow(0 0 3px var(--neon-koyu)); }
  to { filter: drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 8px var(--neon-koyu)) drop-shadow(0 0 14px rgba(28, 126, 214, .5)); }
}
@keyframes halka-nefes { from { box-shadow: 0 0 0 2px #e9ecef, 0 0 4px rgba(255, 255, 255, .35); } to { box-shadow: 0 0 0 2px #fff, 0 0 12px 2px rgba(255, 255, 255, .6); } }
@media (prefers-reduced-motion: reduce) { .neon-yazi path, .neon-amblem { animation: none; } }
.giris-logo .neon { height: 70px; padding: 8px 18px; gap: 8px; }
.giris-logo .neon-yazi { height: 36px; } .giris-logo .neon-amblem { width: 56px; height: 56px; } .giris-logo .neon-amblem svg { width: 50px; height: 50px; }
@media (max-width: 420px) { .ust .neon-yazi { height: 16px; } .ust .neon { padding: 4px 8px; } .ust .neon-amblem { width: 28px; height: 28px; } .ust .neon-amblem svg { width: 24px; height: 24px; } }

/* stok ekranlari */
.sekmeler { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: 2px; }
.sekmeler .dugme { white-space: nowrap; }
.durum { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .5rem; vertical-align: middle; background: var(--iyi); }
.durum.az { background: var(--uyari); } .durum.bitti { background: var(--kotu); }
select.secim, input.secim, .secim { width: 100%; padding: .55rem .6rem; border: 1px solid var(--cizgi); border-radius: 9px; background: var(--yuzey); color: var(--metin); font: inherit; }
td input[type=text] { width: 100%; min-width: 80px; padding: .45rem .5rem; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuzey); color: var(--metin); font: inherit; }
.sag-hiza { text-align: right; font-variant-numeric: tabular-nums; }
.form-dar { max-width: 460px; }
.sayim-liste { display: grid; gap: 0; }
.sayim-satir { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 10px 0; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.sayac { display: flex; align-items: center; gap: .35rem; }
.sayac input { width: 90px; padding: .55rem; border: 1px solid var(--cizgi); border-radius: 9px; background: var(--yuzey); color: var(--metin); font: inherit; font-size: 1.05rem; }
.sayac .dugme { width: 44px; height: 44px; justify-content: center; font-size: 1.2rem; padding: 0; }
.isi td { padding: 0; border: 0; } .isi td div { height: 26px; border-radius: 4px; margin: 1px; }
.logo { width: 34px; height: 34px; border-radius: 10px; background: var(--marka); color: #fff; display: grid; place-items: center; font-weight: 700; }
.marka { font-weight: 650; letter-spacing: -.01em; }
.ust .bosluk { flex: 1; }
.kopru-durum { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ikincil); text-decoration: none;
  padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--cizgi); }
.nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--soluk); }
.nokta.canli { background: var(--iyi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--iyi) 25%, transparent); }
.nokta.kopuk { background: var(--kotu); }
.cikis { background: none; border: 0; color: var(--ikincil); font: inherit; font-size: .85rem; cursor: pointer; padding: .4rem; }

/* sol serit (masaustu) ve alt cubuk (telefon) */
.ray { display: none; }
.alt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--yuzey); border-top: 1px solid var(--cizgi);
  padding-bottom: env(safe-area-inset-bottom); }
.alt a, .ray a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem 0 .45rem; font-size: .72rem;
  color: var(--ikincil); text-decoration: none; }
.alt a.aktif, .ray a.aktif { color: var(--marka); }
.ikon { width: 22px; height: 22px; }
.icerik { padding: 16px 16px 88px; max-width: 1200px; }
@media (min-width: 900px) {
  .ray { display: flex; flex-direction: column; gap: 4px; position: fixed; top: var(--ust); bottom: 0; left: 0; width: var(--ray);
    padding: 10px 8px; background: var(--yuzey); border-right: 1px solid var(--cizgi); }
  .ray a { flex: 0; border-radius: 10px; padding: .6rem 0; }
  .ray a:hover { background: var(--zemin); }
  .ray a.aktif { background: var(--marka-acik); }
  .alt { display: none; }
  .icerik { margin-left: var(--ray); padding: 24px 28px 40px; }
}

/* sayfa basligi ve gun secici */
.baslik { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 16px; }
.baslik h1 { font-size: 1.35rem; margin: 0; letter-spacing: -.01em; }
.baslik .alt-yazi { color: var(--ikincil); font-size: .9rem; }
.baslik .sag { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.dugme { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 9px; border: 1px solid var(--cizgi);
  background: var(--yuzey); color: var(--metin); text-decoration: none; font: inherit; font-size: .88rem; cursor: pointer; }
.dugme:hover { border-color: var(--marka); }
.dugme.ana { background: var(--marka); border-color: var(--marka); color: #fff; }
.dugme.secili { border-color: var(--marka); color: var(--marka); background: var(--marka-acik); }
.dugme[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* kartlar */
.izgara { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 14px 16px; box-shadow: var(--golge); min-width: 0; }
.kart h2 { font-size: .95rem; margin: 0 0 12px; }
.stat .etiket { color: var(--ikincil); font-size: .82rem; }
.stat .deger { font-size: 1.55rem; font-weight: 650; letter-spacing: -.02em; margin-top: 2px; }
.stat.buyuk .deger { font-size: 2rem; }
.stat .not { font-size: .8rem; color: var(--ikincil); margin-top: 4px; }
.artis { color: var(--iyi); } .azalis { color: var(--kotu); }
.iki { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 900px) { .iki { grid-template-columns: 1.6fr 1fr; } }
.grafik-kutu { position: relative; height: 260px; }

/* tablolar ve listeler */
.tablo-kap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-weight: 600; color: var(--ikincil); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--cizgi); }
tr:last-child td { border-bottom: 0; }
td.s, th.s { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 650; border-top: 2px solid var(--cizgi); }
.cubuk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cubuk-liste .ust-satir { display: flex; justify-content: space-between; gap: .5rem; font-size: .88rem; }
.cubuk { height: 8px; border-radius: 4px; background: var(--zemin); margin-top: 4px; overflow: hidden; }
.cubuk span { display: block; height: 100%; background: var(--marka); border-radius: 4px; }
.soluk { color: var(--ikincil); }
.bos { color: var(--ikincil); padding: 18px 0; text-align: center; }

/* formlar */
.form-kart { max-width: 420px; margin: 8vh auto; }
label { display: block; font-size: .85rem; color: var(--ikincil); margin: 12px 0 4px; }
input[type=text], input[type=password], input[type=search] { width: 100%; padding: .6rem .7rem; border: 1px solid var(--cizgi); border-radius: 9px;
  background: var(--yuzey); color: var(--metin); font: inherit; }
input:focus { outline: 2px solid var(--marka); outline-offset: 1px; }
.hata { background: color-mix(in srgb, var(--kotu) 12%, transparent); color: var(--kotu); padding: .6rem .8rem; border-radius: 9px; font-size: .88rem; }
.jeton { font-family: ui-monospace, Consolas, monospace; font-size: .95rem; word-break: break-all; padding: .7rem; border-radius: 9px; background: var(--zemin); border: 1px dashed var(--marka); user-select: all; }