/* FuLoop Merkez — beyaz satış paneli (referans: Cafe marka yeşili; Su/Market Merkez web paneliyle aynı kabuk: üst çubuk + sol yan menü).
   Telefon (≤600) TEMEL: kritik bilgi ilk ekranda (özet + 2×2 KPI + kompakt mağaza listesi), grafik/ödeme/saat/dikkat katlanır,
   yapışkan tarih şeridi, alt sekme çubuğu; dokunma hedefi ≥ 44 px, metin ≥ 14 px, yatay taşma yok.
   Tablet (601–1023): masaüstü ızgarasının iki sütunlu sade hali. Masaüstü (≥1024): TEK EKRANA SIĞAN yoğun pano; uzun listeler kendi içinde kayar.
   Harici font/CDN yok; satır içi style yok (yüzde genişlik/yükseklikler JS CSSOM ile). Cam hissi yalnız backdrop-filter destekleniyorsa. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --vurgu: #15803d; --vurgu-koyu: #0b4a2a; --vurgu-acik: #e6f5ec; --vurgu-cizgi: #bfe3cc; --vurgu-parlak: #3fb36f; --vurgu-derin: #06301a; /* Cafe marka yeşili; beyaz üstü vurgu ≥4.5:1 */
  --marka-gradyan: linear-gradient(135deg, #0a3d24 0%, #14703f 55%, #1f9d55 100%);
  --metin: #26231f; --soluk: #706b64; --cizgi: #e4ebe6; --zemin: #f3f6f4; --kart: #fff; --yuzey: #f7faf8;
  --yesil: #1f7a45; --yesil-acik: #e6f5eb; --kirmizi: #b3372a; --kirmizi-acik: #fdeeea; --sari: #7d5300; --sari-acik: #fff4d6;
  --golge: 0 1px 2px rgba(15, 60, 35, .05), 0 10px 30px rgba(15, 60, 35, .06);
  --yaricap: 22px;
  --nakit: #15803d; --kart-odeme: #3b82a6; --yemek: #e0ad55; --diger: #978bb5; --pazaryeri: #6e9fae;
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--metin); background: var(--zemin); overflow-x: hidden; }
[hidden] { display: none !important; }
a { color: var(--vurgu-koyu); }
h1 { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.03em; margin: 0; overflow-wrap: anywhere; }
h2 { font-size: 17px; line-height: 1.25; font-weight: 650; letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; }
h3 { font-size: 14px; margin: 14px 0 6px; color: var(--soluk); font-weight: 650; }
p { margin: 8px 0; overflow-wrap: anywhere; }
.soluk { color: var(--soluk); font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ikon { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* ---- form öğeleri (giriş, şifre, davet, özel tarih) ---- */
label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
input { width: 100%; min-height: 44px; font: inherit; padding: 11px 14px; color: var(--metin); background: #fff; border: 1px solid #ddd8d0; border-radius: 14px; }
input[readonly] { background: var(--yuzey); color: var(--soluk); }
input:focus { outline: 2px solid var(--vurgu); outline-offset: 1px; }
button, .dugme { display: inline-block; width: 100%; min-height: 44px; margin-top: 16px; padding: 12px 18px; font: inherit; font-weight: 650; color: #fff; background: var(--vurgu); border: 0; border-radius: 14px; text-align: center; text-decoration: none; cursor: pointer; }
button.ikincil { color: var(--metin); background: #fff; border: 1px solid var(--cizgi); }
button:disabled { opacity: .6; cursor: default; }
.baglanti { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; margin: 12px 0 0; padding: 4px 6px; color: var(--vurgu-koyu); background: none; font-weight: 600; }
.hata { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--kirmizi-acik); color: var(--kirmizi); font-size: 14px; overflow-wrap: anywhere; }
.basari { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--yesil-acik); color: var(--yesil); font-size: 14px; }
.rozet { display: inline-block; padding: 2px 9px; font-size: 14px; border-radius: 99px; background: var(--vurgu-acik); color: var(--vurgu-koyu); }

/* ---- üst çubuk + menü (telefonda alt sekme çubuğu) ---- */
.ust { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 16px; color: #fff; background: var(--marka-gradyan); border-bottom: 0; }
.logo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: #fff; text-decoration: none; font-size: 17px; font-weight: 750; white-space: nowrap; }
.logo img { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; }
.logo span { line-height: 1.05; }
.kullanici { display: flex; align-items: center; gap: 4px; margin-left: auto; min-width: 0; font-size: 14px; color: rgba(255, 255, 255, .85); }
.kullanici-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kullanici .baglanti { margin: 0; min-width: 44px; color: #fff; }
.ana-menu { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; gap: 2px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--cizgi); box-shadow: 0 -6px 20px rgba(48, 32, 16, .06); }
.ana-menu a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 52px; padding: 4px 2px; border-radius: 14px; color: var(--soluk); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ana-menu a .ikon { width: 22px; height: 22px; }
.ana-menu a[aria-current] { color: var(--vurgu-koyu); background: var(--vurgu-acik); }
body.oturum { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

.icerik { width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 16px 24px; }

/* ---- sayfa bandı: başlık + son güncelleme; yapışkan tarih şeridi (+ mağaza filtresi) ----
   Telefonda bant display:contents — yapışkan şeridin kapsayıcısı tüm sayfa olsun (kısa bandın içinde sticky hemen biterdi). */
.sayfa-bant { display: contents; }
.baslik-blok { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; min-width: 0; margin-bottom: 6px; }
.baslik-blok h1 { flex: 1 1 auto; min-width: 0; }
.baslik-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex-basis: 100%; }
.son-guncelleme { font-size: 14px; }
.geri { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -6px; padding-right: 8px; flex-basis: 100%; font-weight: 600; font-size: 15px; text-decoration: none; }
.geri .ikon { width: 18px; height: 18px; }
.serit { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; margin: 0 -16px 8px; padding: 5px 16px; background: rgba(246, 245, 241, .96); }
@supports (backdrop-filter: blur(10px)) { .serit { background: rgba(246, 245, 241, .82); backdrop-filter: blur(10px); } }
.cipler { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; padding: 3px; overflow-x: auto; scrollbar-width: none; background: #fff; border: 1px solid var(--cizgi); border-radius: 99px; }
.cipler::-webkit-scrollbar { display: none; }
button.cip { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; min-width: 44px; min-height: 44px; margin: 0; padding: 8px 10px; color: var(--metin); background: transparent; border-radius: 99px; font-size: 14px; font-weight: 600; white-space: nowrap; }
button.cip[aria-pressed="true"] { color: #fff; background: var(--metin); }
button.cip .ikon { width: 16px; height: 16px; }
.cip .uzun { display: none; }
/* mağaza seçici: telefonda hap (ikon) üstünde görünmez yerel <select>; geniş ekranda tek hap düğme + özel liste (≥601) */
.mag-sec { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; color: var(--metin); background: #fff; border: 1px solid var(--cizgi); border-radius: 99px; }
.mag-dugme, .mag-liste { display: none; }
.mag-yerel { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.mag-yerel:focus-visible { outline: none; }
.mag-sec:focus-within { outline: 2px solid var(--vurgu); outline-offset: 2px; } /* görünmez select klavyeyle odaklanınca hap gösterir */
.mag-sec.aktif { color: var(--vurgu-koyu); border-color: var(--vurgu-cizgi); background: var(--vurgu-acik); }
.mag-sec.aktif::after { content: ""; position: absolute; top: 10px; right: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--vurgu); box-shadow: 0 0 0 2px #fff; }
.ozel-form { margin: 0 0 10px; padding: 14px; }
.ozel-form label { margin-top: 8px; }
.ozel-form label:first-child { margin-top: 0; }
input[type="date"] { min-height: 44px; }
.ozel-form button { margin-top: 12px; }

/* ---- kart ve pano ---- */
.kart { min-width: 0; margin: 0 0 12px; padding: 16px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); }
.pano { display: flex; flex-direction: column; gap: 10px; }
.pano > *, .orta-sutun > *, .adisyon-izgara > *, .adisyon-yan > * { margin: 0; min-width: 0; }
.orta-sutun, .adisyon-yan { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.blok-bas { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; }
.bos-durum { margin: 6px 0; }
.ust-etiket { display: none; font-size: 11px; font-weight: 650; letter-spacing: .12em; color: var(--soluk); }

/* bölüm: telefonda katlanır <details>, geniş ekranda <section> */
.bolum { padding: 0; overflow: hidden; scroll-margin-top: 76px; }
.bolum > summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 16px; cursor: pointer; list-style: none; }
.bolum > summary::-webkit-details-marker { display: none; }
.bolum-baslik { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bolum h2 { display: flex; align-items: center; gap: 8px; }
.bolum h2 .ikon { color: var(--vurgu); }
.bolum-sag { flex: 0 0 auto; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uyari-yazi { color: var(--kirmizi); }
.acilir-ok { color: var(--soluk); transition: transform .15s; }
details[open] > summary .acilir-ok { transform: rotate(180deg); }
.bolum-govde { padding: 0 16px 16px; min-width: 0; }
.bolum-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px 8px; }

/* ---- hero (telefon özeti) ---- */
.hero { padding: 12px 16px 14px; color: #fff; background: var(--marka-gradyan); border: 0; box-shadow: 0 6px 18px rgba(15, 90, 52, .25); }
.hero-etiket { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.hero .soluk, .hero-alt { color: rgba(255, 255, 255, .85); }
.hero .degisim, .hero .degisim.artis, .hero .degisim.azalis { color: #fff; background: rgba(255, 255, 255, .2); }
.hero-deger { margin: 0 0 6px; font-size: 32px; line-height: 1.12; font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hero-alt { margin-top: 6px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.degisim-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.degisim { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--soluk); background: #f1efea; font-variant-numeric: tabular-nums; }
.degisim.artis { color: var(--yesil); background: var(--yesil-acik); }
.degisim.azalis { color: var(--kirmizi); background: var(--kirmizi-acik); }

/* ---- KPI (telefonda 2×2 küçük kutu) ---- */
.kpi-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-width: 0; margin: 0; padding: 10px 12px; color: var(--metin); text-align: left; font-weight: 400; }
button.kpi { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); }
.kpi-ust { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.kpi-ust .ikon { box-sizing: content-box; width: 16px; height: 16px; padding: 4px; border-radius: 8px; color: var(--vurgu-koyu); background: var(--vurgu-acik); }
.kpi-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--soluk); }
.kpi-deger { font-size: 20px; line-height: 1.15; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.kpi-ek { font-size: 14px; color: var(--soluk); }
.kpi-not { display: none; font-size: 13px; color: var(--soluk); }
.kpi-dikkat.var .kpi-ust .ikon { color: var(--kirmizi); background: var(--kirmizi-acik); }
.kpi-dikkat.var .kpi-deger { color: var(--kirmizi); }

/* ---- mağaza listesi (kompakt satır; satırın tamamı bağlantı) ---- */
.magaza-blok { padding: 10px 16px 4px; }
.magaza-liste { display: flex; flex-direction: column; }
a.magaza-satir { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 52px; padding: 6px 2px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--cizgi); }
a.magaza-satir:last-child { border-bottom: 0; }
.ms-ad { display: flex; flex-direction: column; min-width: 0; }
.magaza-satir .ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.ms-durum { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ms-ciro { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-ciro.soluk { font-weight: 600; }
.ms-degisim { display: none; }
.ms-uyari:empty { display: none; }
.ms-git { display: inline-flex; align-items: center; gap: 2px; color: var(--vurgu-koyu); font-weight: 600; }
.ms-git .ikon { width: 18px; height: 18px; }
.secim-satir { grid-template-columns: 10px minmax(0, 1fr) auto; }
.adisyon-secim { padding: 8px 16px; }
.ms-baslik { display: none; }
.nokta { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.nokta.acik { background: #22a05a; box-shadow: 0 0 0 3px #def5e6; }
.nokta.kapali { background: #aaa69e; }
.durum { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 14px; background: #f1efea; }
.durum.acik-yazi { color: var(--yesil); background: var(--yesil-acik); }
.kapali-yazi { color: var(--soluk); }
.acik-yazi { color: var(--yesil); }
.uyari { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.uyari.kirmizi { color: var(--kirmizi); background: var(--kirmizi-acik); }
.uyari.sari { color: var(--sari); background: var(--sari-acik); }
.uyari.yesil { color: var(--yesil); background: var(--yesil-acik); }

/* ---- grafik: kapsül çubuklar ---- */
.magaza-haplar { display: flex; gap: 6px; margin: 0 0 10px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.magaza-haplar::-webkit-scrollbar { display: none; }
button.magaza-hap { flex: 0 0 auto; width: auto; max-width: 150px; min-height: 44px; margin: 0; padding: 8px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soluk); background: #fff; border: 1px solid var(--cizgi); border-radius: 99px; font-size: 14px; font-weight: 600; }
button.magaza-hap[aria-pressed="true"] { color: var(--vurgu-koyu); background: var(--vurgu-acik); border-color: var(--vurgu-cizgi); }
.grafik-ozet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; }
.grafik-ozet strong { font-size: 20px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cizelge { display: flex; gap: 8px; height: 190px; min-width: 0; }
.cizelge-eksen { display: flex; flex-direction: column; justify-content: space-between; min-width: 48px; padding-bottom: 26px; font-size: 12px; color: var(--soluk); text-align: right; white-space: nowrap; }
.cizelge-alan { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.sutunlar { display: flex; min-width: 100%; height: 100%; }
.sutun { flex: 1 0 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 22px; }
.kapsul { position: relative; flex: 1 1 auto; width: 12px; overflow: hidden; border-radius: 99px; background: #e9efeb; }
.kapsul i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 99px; background: #7fd1a0; }
.sutun.en .kapsul i { background: var(--vurgu); }
.etk { height: 20px; font-size: 14px; line-height: 20px; color: var(--soluk); white-space: nowrap; }

/* ---- ödeme dağılımı: tek yığılmış şerit + kısa liste ---- */
.odeme-nakit { --renk: var(--nakit); } .odeme-kart { --renk: var(--kart-odeme); } .odeme-yemek_karti { --renk: var(--yemek); }
.odeme-diger { --renk: var(--diger); } .odeme-pazaryeri { --renk: var(--pazaryeri); }
.odeme-toplam { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.odeme-toplam strong { font-size: 20px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.odeme-serit { display: flex; gap: 2px; height: 14px; overflow: hidden; border-radius: 99px; background: #e9efeb; }
.odeme-serit span { display: block; height: 100%; background: var(--renk); }
.odeme-liste { margin-top: 6px; }
.odeme-satir { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; min-height: 40px; padding: 6px 0; border-bottom: 1px solid var(--cizgi); }
.odeme-satir:last-child { border-bottom: 0; }
.renk { display: inline-block; width: 11px; height: 11px; border-radius: 4px; background: var(--renk); }
.odeme-ad { min-width: 0; overflow-wrap: anywhere; }
.odeme-oran { color: var(--soluk); font-size: 14px; font-variant-numeric: tabular-nums; }
.odeme-tutar { font-variant-numeric: tabular-nums; white-space: nowrap; }
.odeme-satir .cubuk { display: none; grid-column: 2 / -1; }
.odeme-satir .cubuk-ic { background: var(--renk); }

/* ---- saat yoğunluğu ısı haritası ---- */
.isi-ozet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.isi-sayi { font-size: 26px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.isi-en { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; flex-basis: 100%; }
.isi-izgara { display: grid; grid-template-columns: 50px repeat(7, minmax(0, 1fr)); grid-auto-rows: 30px; gap: 4px; font-size: 14px; }
.isi-izgara > [role="row"] { display: contents; }
.ib { display: flex; align-items: center; justify-content: center; color: var(--soluk); font-size: 14px; white-space: nowrap; }
.ib-saat { justify-content: flex-start; }
.isi { display: block; min-width: 0; border-radius: 8px; background: #f3eee6; }
.isi-1 { background: #d8f0e2; } .isi-2 { background: #9fd9b8; } .isi-3 { background: var(--vurgu-parlak); } .isi-4 { background: var(--vurgu); }
.isi-yok { background: repeating-linear-gradient(135deg, #f7f5f1, #f7f5f1 3px, #e7e3dc 3px, #e7e3dc 4px); }
.isi-anahtar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; }
.isi-anahtar .isi { width: 14px; height: 14px; border-radius: 4px; }

/* ---- ⚠ Dikkat ---- */
.dikkat-karti.var { border-color: #f3d2c8; }
.dikkat-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--cizgi); }
.dikkat-satir:last-child { border-bottom: 0; }
.dk-ad { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.dk-kisa, .dk-adet { display: none; }
.dikkat-satir.var .dk-uzun, .dikkat-satir.var .dk-kisa { font-weight: 650; }
.dikkat-satir strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dikkat-satir .sev { flex: 0 0 auto; padding: 2px 8px; border-radius: 99px; font-size: 14px; font-weight: 700; }
.dikkat-satir.kirmizi .sev { color: var(--kirmizi); background: var(--kirmizi-acik); }
.dikkat-satir.sari .sev { color: var(--sari); background: var(--sari-acik); }
.dikkat-satir.yesil .sev { color: var(--yesil); background: var(--yesil-acik); }
.dikkat-not { margin: 8px 0 0; }

/* ---- sekmeli kart (geniş ekran mağaza detayı) ---- */
.sekme-karti { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sekmeler { display: flex; gap: 2px; padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--cizgi); }
.sekmeler::-webkit-scrollbar { display: none; }
button.sekme { flex: 0 0 auto; width: auto; min-height: 44px; margin: 0 0 -1px; padding: 8px 14px; color: var(--soluk); background: transparent; border-bottom: 2px solid transparent; border-radius: 12px 12px 0 0; font-weight: 600; white-space: nowrap; }
button.sekme[aria-selected="true"] { color: var(--vurgu-koyu); border-bottom-color: var(--vurgu); }
.sekme-govde { flex: 1 1 auto; min-height: 0; padding: 6px 18px 14px; overflow: auto; }

/* ---- adisyon satırı: telefonda tek satır (saat · #no masa · ⚠ · tutar) ---- */
.adisyon-liste { display: flex; flex-direction: column; }
.adisyon-baslik { display: none; }
a.adisyon-satir { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 52px; padding: 6px 2px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--cizgi); }
a.adisyon-satir:last-child { border-bottom: 0; }
.as-saat { color: var(--soluk); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-masa { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-no { margin-right: 6px; color: var(--soluk); font-size: 14px; font-variant-numeric: tabular-nums; }
.as-kanal, .as-kapatan, .as-odeme, .as-rozet-b { display: none; }
.as-rozet { display: flex; gap: 4px; }
.as-rozet:empty { display: none; }
.as-rozet .rozet-indirim { display: none; }
.as-tutar { font-variant-numeric: tabular-nums; white-space: nowrap; }
.adisyon-satir.odemesiz .as-tutar { color: var(--kirmizi); }
.adisyon-blok { padding: 14px 16px 8px; }
a.tumu { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; margin-top: 4px; font-weight: 650; text-decoration: none; }
a.tumu .ikon { width: 18px; height: 18px; }
.adisyon-kart { padding: 14px 16px 10px; }
.adisyon-kpi { margin-bottom: 10px; }
button.daha { margin-top: 10px; }
.adisyon-izgara { display: flex; flex-direction: column; gap: 10px; }
.adisyon-hero.odemesiz .hero-deger { color: var(--kirmizi); }

/* ---- listeler, çubuklar, kayıtlar (mağaza detayı bölümleri) ---- */
.sat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; }
.sat-sol { min-width: 0; overflow-wrap: anywhere; }
.sat-sag { flex: 0 0 auto; max-width: 55%; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.liste .sat { border-bottom: 1px solid var(--cizgi); }
.liste .sat:last-child { border-bottom: 0; }
.dilim { margin: 4px 0 10px; }
.dilim .sat { padding-bottom: 3px; }
.cubuk { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #e9efeb; }
.cubuk-ic { display: block; height: 100%; border-radius: 99px; background: var(--vurgu); }
.kayit { padding: 9px 0; border-bottom: 1px solid var(--cizgi); overflow-wrap: anywhere; }
.kayit:last-child { border-bottom: 0; }
.rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.istisna { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid; border-radius: 12px; }
.istisna.kirmizi { background: var(--kirmizi-acik); border-color: #d2503f; } .istisna.sari { background: var(--sari-acik); border-color: #c99a1d; } .istisna.yesil { background: var(--yesil-acik); border-color: #3aa165; }
.istisna .sat-sol { min-width: 0; overflow-wrap: anywhere; }
.istisna .sev { flex: 0 0 auto; max-width: 45%; text-align: right; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.istisna.kirmizi .sev { color: var(--kirmizi); } .istisna.sari .sev { color: var(--sari); } .istisna.yesil .sev { color: var(--yesil); }
details.ac { margin-top: 8px; }
details.ac > summary { display: flex; align-items: center; min-height: 44px; font-weight: 650; color: var(--vurgu-koyu); cursor: pointer; }

/* ---- giriş / şifre / davet / mesaj: ortalı beyaz kart ---- */
body.dar-sayfa { min-height: 100vh; background: radial-gradient(ellipse 90% 45% at 50% 0%, #d7f0e1, transparent 70%), var(--zemin); }
.dar-sayfa .icerik { max-width: 468px; padding: 32px 16px; }
/* Giriş/şifre/davet kartı ekranın dikey ortasında; klavye açılınca görünür alan (dvh) küçülür, kart yukarı kayar. 72px ≈ üst bant. */
.dar-sayfa .icerik { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); min-height: calc(var(--gorunur-yukseklik, 100dvh) - 72px); }
.dar-sayfa h1 { margin: 0 0 18px; font-size: 26px; text-align: center; }
.dar-sayfa .kart { padding: 24px; box-shadow: 0 14px 50px rgba(15, 60, 35, .1); }
.dar-sayfa .kart > label:first-child { margin-top: 0; }
.dar-sayfa .icerik > .baglanti, .dar-sayfa .icerik > button:not(.baglanti) { display: flex; margin: 12px auto 0; }
.dar-sayfa .icerik > button:not(.baglanti) { width: auto; padding: 12px 28px; }

/* ======================================================================================================================
   TABLET + MASAÜSTÜ ORTAK (≥601)
   ====================================================================================================================== */
@media (min-width: 601px) {
  body.oturum { padding-bottom: 0; }
  .ust { gap: 16px; min-height: 64px; padding: 8px 24px; }
  .logo { font-size: 19px; }
  .kullanici { max-width: 260px; }
  .icerik { max-width: 1100px; padding: 18px 24px 32px; }
  h1 { font-size: 26px; }
  .sayfa-bant { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
  .baslik-blok { flex: 1 1 auto; margin: 0; }
  .baslik-blok h1 { flex: 0 1 auto; }
  .geri { margin-left: -4px; }
  .serit { position: static; flex: 0 1 auto; max-width: 100%; margin: 0; padding: 0; background: none; }
  @supports (backdrop-filter: blur(10px)) { .serit { background: none; backdrop-filter: none; } }
  .cip .uzun { display: inline; } .cip .kisa { display: none; }
  button.cip { flex: 0 0 auto; padding: 8px 14px; }
  .mag-sec { width: auto; height: 52px; background: none; border: 0; border-radius: 0; }
  .mag-sec:focus-within { outline: none; }
  .mag-sec.aktif { background: none; }
  .mag-sec.aktif::after, .mag-yerel, .mag-yerel-ikon { display: none; }
  button.mag-dugme { display: inline-flex; align-items: center; gap: 8px; width: auto; max-width: 260px; height: 52px; margin: 0; padding: 0 14px 0 16px; color: var(--metin); background: #fff; border: 1px solid var(--cizgi); border-radius: 99px; font-size: 14px; font-weight: 600; white-space: nowrap; }
  .mag-sec.aktif button.mag-dugme { color: var(--vurgu-koyu); border-color: var(--vurgu-cizgi); background: var(--vurgu-acik); }
  .mag-ad { min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
  .mag-ok { width: 16px; height: 16px; color: var(--soluk); transition: transform .15s; }
  button.mag-dugme[aria-expanded="true"] .mag-ok { transform: rotate(180deg); }
  .mag-liste { display: block; position: absolute; z-index: 26; top: 100%; right: 0; min-width: 240px; max-width: 340px; max-height: min(340px, 60vh); margin-top: 8px; padding: 6px; overflow-y: auto; background: #fff; border: 1px solid var(--cizgi); border-radius: 18px; box-shadow: 0 18px 50px rgba(48, 32, 16, .14); outline: none; }
  .mag-secenek { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; cursor: pointer; }
  .mag-secenek-ad { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mag-tik { width: 16px; height: 16px; color: var(--vurgu); visibility: hidden; }
  .mag-secenek.vurgulu { background: #f1eee9; }
  .mag-secenek[aria-selected="true"] { color: var(--vurgu-koyu); font-weight: 650; background: var(--vurgu-acik); }
  .mag-secenek[aria-selected="true"].vurgulu { background: #d8f0e2; }
  .mag-secenek[aria-selected="true"] .mag-tik { visibility: visible; }
  .ozel-form { position: absolute; z-index: 25; top: 100%; right: 0; width: min(480px, 100%); margin-top: 8px; box-shadow: 0 18px 50px rgba(48, 32, 16, .14); }
  .tarih-cift { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px 12px; }
  .ozel-form .tarih-cift label { margin: 0; }

  .ust-etiket { display: block; margin-bottom: 2px; }
  .kpi { gap: 6px; padding: 16px 18px; }
  .kpi-deger { margin-top: 4px; font-size: 26px; }
  .kpi-not { display: inline; }
  .degisim.kucuk { font-size: 13px; }
  .magaza-blok { display: flex; flex-direction: column; min-height: 0; padding: 16px 18px 8px; }
  .magaza-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .ms-durum { position: static; width: auto; height: auto; overflow: hidden; clip-path: none; text-overflow: ellipsis; font-size: 13px; }
  .ms-baslik { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 0 2px 0 22px; border-bottom: 1px solid var(--cizgi); }
  a.magaza-satir { grid-template-columns: 10px minmax(0, 1fr) 112px 44px; }
  .secim-satir { grid-template-columns: 10px minmax(0, 1fr) auto !important; }
  .ms-ciro { text-align: right; }
  .ms-uyari { text-align: right; }
  .ms-uyari:empty { display: block; }
  button.sirala { width: auto; min-height: 44px; margin: 0; padding: 4px 0; color: var(--soluk); background: none; font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; }
  .sirala-ciro { width: 112px !important; text-align: right !important; }
  .sirala-istisna { width: 44px !important; text-align: right !important; }
  .sirala-degisim { display: none; }
  button.sirala[data-sira] { color: var(--metin); }
  button.sirala[data-sira="artan"]::after { content: " ▲"; }
  button.sirala[data-sira="azalan"]::after { content: " ▼"; }
  .odeme-satir .cubuk { display: block; }
  .odeme-satir { padding: 6px 0 8px; }
  .dikkat-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
  .dikkat-satir { min-height: 0; padding: 6px 10px; border: 0; border-radius: 12px; background: var(--yuzey); }
  .dikkat-satir.var { background: var(--kirmizi-acik); }
  .dikkat-satir.var strong { color: var(--kirmizi); }
  .dk-uzun { display: none; } .dk-kisa { display: block; }
  .dikkat-satir .dk-sayi { display: none; }
  .dk-ad { flex-direction: row; align-items: center; gap: 6px; }
  .dk-adet { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #fff; font-size: 12px; font-weight: 700; color: var(--soluk); }
  .dikkat-satir.var .dk-adet { color: var(--kirmizi); }
  .kpi-alt { flex-wrap: wrap; }
  .kpi-not { flex: 1 1 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; } /* kesilmez: gerekirse 2 satıra sarar */
  .bolum-bas, .blok-bas, .ms-baslik, .sekmeler, .adisyon-baslik { flex-shrink: 0; }
  .adisyon-baslik { display: grid; gap: 10px; padding: 8px 2px; color: var(--soluk); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--cizgi); }
  .adisyon-baslik, a.adisyon-satir { grid-template-columns: 52px minmax(0, 1.3fr) minmax(0, 1fr) auto 110px; }
  .adisyon-baslik .as-tutar { text-align: right; }
  .as-odeme, .as-rozet-b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soluk); font-size: 14px; }
  .as-rozet:empty { display: block; }
  .as-tutar { text-align: right; }
  a.adisyon-satir { min-height: 48px; }
  .adisyon-kart { padding: 16px 20px 12px; }
  .adisyon-kpi .kpi-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ======================================================================================================================
   TABLET (601–1023): masaüstü ızgarasının iki sütunlu sade hali (sayfa kayar)
   ====================================================================================================================== */
@media (min-width: 601px) and (max-width: 1023px) {
  .kullanici { max-width: 200px; }
  .ana-pano, .detay-pano { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ana-pano { grid-template-areas: "grafik grafik" "kpi liste" "odeme orta"; }
  .detay-pano { grid-template-areas: "grafik grafik" "kpi kpi" "odeme orta" "liste liste"; }
  .pano .ciro-karti { grid-area: grafik; } .pano .kpi-izgara { grid-area: kpi; } .pano .odeme-karti { grid-area: odeme; }
  .pano .orta-sutun { grid-area: orta; } .pano .magaza-blok, .pano .sekme-karti { grid-area: liste; }
  .detay-pano .kpi-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ana-pano .magaza-blok { max-height: 360px; }
  .sekme-karti { max-height: 560px; }
  .ciro-karti .cizelge { height: 220px; }
  .orta-sutun { gap: 14px; }
  .kpi-deger { font-size: 24px; }
  .adisyon-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .adisyon-izgara > .hero, .adisyon-izgara > .kpi-izgara, .adisyon-izgara > .kalem-karti, .adisyon-izgara > .adisyon-yan { grid-column: 1 / -1; }
}

/* ======================================================================================================================
   MASAÜSTÜ (≥1024): referans ızgarası — üstte sol geniş grafik + sağ 2×2 KPI; altta ödeme | saat (+ dikkat) | mağazalar
   ====================================================================================================================== */
@media (min-width: 1024px) {
  body { font-size: 14px; }
  .ust { min-height: 64px; padding: 10px max(24px, calc((100% - 1640px) / 2)); gap: 20px; }
  .kullanici .baglanti { min-height: 40px; }
  .icerik { max-width: 1688px; padding: 16px 24px 20px; }
  h1 { font-size: 28px; }
  .sayfa-bant { flex-wrap: nowrap; margin-bottom: 14px; }
  .baslik-blok { flex-wrap: nowrap; align-items: center; gap: 4px 14px; }
  .baslik-blok .geri { flex-basis: auto; min-height: 36px; padding: 0 10px 0 6px; margin: 0; border-right: 1px solid var(--cizgi); }
  .baslik-blok h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .baslik-alt { flex-basis: auto; flex-wrap: nowrap; min-width: 0; }
  .baslik-alt .rozet { white-space: nowrap; }
  .serit { flex: 0 0 auto; }
  button.cip { min-height: 38px; padding: 6px 16px; font-size: 14px; }
  .mag-sec, button.mag-dugme { height: 46px; }
  .kart { padding: 18px 20px; }
  .bolum { padding: 0; }
  .bolum-bas { padding: 16px 20px 8px; }
  .bolum-govde { padding: 0 20px 16px; }
  h2 { font-size: 18px; }

  .ana-pano, .detay-pano { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(280px, 1fr) minmax(310px, 1.2fr);
    grid-template-areas: "grafik grafik kpi" "odeme orta liste"; gap: 16px; }
  .pano .ciro-karti { grid-area: grafik; } .pano .kpi-izgara { grid-area: kpi; } .pano .odeme-karti { grid-area: odeme; }
  .pano .orta-sutun { grid-area: orta; } .pano .magaza-blok, .pano .sekme-karti { grid-area: liste; }
  .pano > *, .orta-sutun > * { min-height: 0; }
  .ana-pano > .bolum, .detay-pano > .bolum, .orta-sutun > .bolum { display: flex; flex-direction: column; }
  .pano .bolum-govde { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
  .orta-sutun { gap: 16px; }
  .orta-sutun > .isi-karti { flex: 1 1 auto; }
  .orta-sutun > .dikkat-karti { flex: 0 0 auto; }
  .orta-sutun > .dikkat-karti .bolum-bas { padding-top: 12px; padding-bottom: 6px; }
  .orta-sutun > .dikkat-karti .bolum-govde { padding-bottom: 12px; }
  .kpi-izgara { grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .kpi { justify-content: flex-start; gap: 4px; padding: 14px 16px; }
  .kpi-not { line-height: 1.25; }
  .kpi-deger { font-size: clamp(22px, 1.9vw, 32px); margin: 4px 0 2px; }
  .kpi-alt { gap: 2px 8px; }

  /* grafik: başlık sağında mağaza hapları, çubuklar kalan yüksekliği doldurur */
  .ciro-karti { position: relative; background: linear-gradient(145deg, #f1faf4, #fff 60%); }
  .ciro-karti .bolum-govde { overflow: hidden; }
  .ciro-karti .magaza-haplar { position: absolute; top: 14px; right: 18px; max-width: 58%; margin: 0; justify-content: flex-end; }
  button.magaza-hap { min-height: 36px; padding: 6px 14px; font-size: 13px; }
  .ciro-karti .cizelge { flex: 1 1 auto; height: auto; min-height: 110px; }
  .sutun { flex: 1 1 0; min-width: 0; }
  .kapsul { width: 62%; max-width: 22px; min-width: 4px; }
  .etk { font-size: 12px; height: 18px; line-height: 18px; }
  .cizelge-alan { overflow: hidden; }

  /* ödeme / ısı / dikkat yoğun */
  .odeme-toplam { margin-bottom: 8px; }
  .odeme-liste { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .odeme-satir { min-height: 0; padding: 5px 0 7px; font-size: 14px; }
  .isi-karti .bolum-govde { overflow: hidden; }
  .isi-govde { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  .isi-ozet { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; margin: 0; white-space: nowrap; overflow: hidden; }
  .isi-sayi { font-size: 22px; line-height: 1.1; }
  .isi-en { flex-basis: auto; flex-wrap: nowrap; gap: 6px; margin-left: auto; }
  .isi-izgara { flex: 1 1 auto; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); grid-auto-rows: auto; grid-template-rows: auto repeat(6, minmax(8px, 1fr)); gap: 3px; min-height: 0; font-size: 12px; }
  .ib { font-size: 12px; }
  .isi { border-radius: 6px; }
  .bolum-bas .isi-anahtar { flex: 0 0 auto; margin: 2px 0 0; font-size: 12px; }
  .isi-anahtar .isi { width: 12px; height: 12px; }
  .dikkat-satir { font-size: 13px; }

  /* mağazalar / sekmeler: kendi içinde kayar */
  .magaza-blok { padding: 16px 20px 6px; }
  a.magaza-satir { min-height: 50px; gap: 10px; padding: 6px 2px; }
  .sekme-govde { padding: 4px 20px 12px; }
  .sekme-panel .adisyon-baslik { position: sticky; top: 0; z-index: 1; background: #fff; }
  .adisyon-baslik, a.adisyon-satir { grid-template-columns: 52px minmax(0, 1.2fr) 96px minmax(0, 1fr) minmax(0, 1fr) auto 104px; }
  .sekme-panel .adisyon-baslik, .sekme-panel a.adisyon-satir { grid-template-columns: 46px minmax(0, 1fr) minmax(0, .9fr) auto 96px; }
  .sekme-panel .as-kanal, .sekme-panel .as-kapatan { display: none !important; }
  .as-kanal, .as-kapatan { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soluk); font-size: 14px; }
  a.adisyon-satir { min-height: 42px; padding: 4px 2px; }
  .as-rozet .rozet-indirim { display: inline-block; font-size: 12px; }
  .uyari { font-size: 13px; }
  .tumu { justify-content: flex-start !important; min-height: 36px !important; }

  /* adisyon detayı: özet + KPI üstte; kalemler | ödemeler + iptaller */
  .adisyon-izgara { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 16px; }
  .adisyon-izgara > .kpi-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .adisyon-izgara > .hero { align-self: stretch; }
  .adisyon-izgara .kpi-deger { font-size: 24px; }
  .adisyon-kpi .kpi { min-height: 120px; }
}

/* masaüstünde yeterli yükseklik varsa: ana ekran ve mağaza detayı SAYFA KAYDIRMASIZ tek ekran */
@media (min-width: 1024px) and (min-height: 640px) {
  body.pano-sayfa { display: flex; flex-direction: column; height: 100vh; }
  body.pano-sayfa .ust { flex: 0 0 auto; }
  body.pano-sayfa .icerik { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.pano-sayfa .sayfa-bant { flex: 0 0 auto; }
  body.pano-sayfa .pano { flex: 1 1 auto; min-height: 0; }
  body.pano-sayfa .pano.sade { flex: 0 0 auto; }
  body.pano-sayfa .pano.sade > .magaza-blok { max-height: 70vh; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  a.magaza-satir { grid-template-columns: 10px minmax(0, 1fr) 100px 40px; }
  .sirala-ciro { width: 100px !important; }
  .sirala-istisna { width: 40px !important; }
  .kpi-not { display: none; }
}

@media (min-width: 1280px) and (max-width: 1439px) { .detay-pano .kpi-not { display: none; } }

/* 1280+: referans oranları; mağaza listesinde ±% sütunu */
@media (min-width: 1280px) {
  a.magaza-satir { grid-template-columns: 10px minmax(0, 1fr) 112px 76px 44px; }
  .ms-degisim { display: block; text-align: right; }
  .ms-baslik { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .sirala-degisim { display: block; width: 76px !important; text-align: right !important; }
}

@media (min-width: 1680px) {
  .kpi-deger { font-size: 34px; }
  .cizelge-eksen { font-size: 13px; }
}

@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled), .dugme:hover { filter: brightness(.95); }
  button.cip:hover:not([aria-pressed="true"]), button.magaza-hap:hover, button.sekme:hover { color: var(--vurgu-koyu); filter: none; }
  .baglanti:hover, .geri:hover, a.tumu:hover, details.ac > summary:hover { text-decoration: underline; }
  a.magaza-satir:hover, a.adisyon-satir:hover { background: var(--yuzey); }
  a.magaza-satir:hover .ad, a.adisyon-satir:hover .as-masa { color: var(--vurgu-koyu); }
  .ana-menu a:hover:not([aria-current]) { color: #fff; background: rgba(255, 255, 255, .2); }
  button.mag-dugme:hover:not(:disabled) { filter: none; border-color: var(--vurgu-cizgi); }
  button.sirala:hover { color: var(--vurgu-koyu); filter: none; }
  button.kpi:hover { border-color: var(--vurgu-cizgi); filter: none; }
  .sutun:hover .kapsul i { background: var(--vurgu-koyu); }
}
@media (prefers-reduced-motion: reduce) { .acilir-ok { transition: none; } }

/* ======================================================================================================================
   RAPORLAR SAYFASI (/raporlar) + UYARI AYARLARI (/ayarlar) + YAZDIRMA (PDF)
   Telefon: hap sekmeler, katlanır kartlar, tablolar yatay kayar (ilk sütun sabit), dokunma hedefi ≥ 44 px, metin ≥ 14 px.
   Tablet: iki sütun. Masaüstü (≥1024): kartlar yan yana ızgarada (3 sütun), tam genişlikli tablolar/KPI şeritleri.
   ====================================================================================================================== */
a.kullanici-ad { display: block; min-width: 44px; padding: 0 6px; line-height: 44px; color: inherit; text-decoration: none; border-radius: 12px; }
a.kullanici-ad[aria-current] { color: var(--vurgu-koyu); font-weight: 650; }
.rapor-ust { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.rapor-ust .cipler { flex: 1 1 auto; }
button.yazdir-dugme, a.csv-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; width: auto; min-width: 44px; min-height: 44px; margin: 0; padding: 8px 14px; font-size: 14px; font-weight: 650; color: var(--metin); background: #fff; border: 1px solid var(--cizgi); border-radius: 99px; text-decoration: none; }
button.yazdir-dugme .yazi { display: none; }
button.yazdir-dugme .ikon, a.csv-dugme .ikon { width: 18px; height: 18px; }
a.csv-dugme { min-height: 44px; }
.rapor-arac { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 0 6px; }
.yazdir-baslik { display: none; }
.rapor-izgara { display: flex; flex-direction: column; gap: 10px; }
.rapor-mod { margin: 0; }
.rapor-mod .mod-not { margin: 6px 4px 0; }
.rapor-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tablo-alan { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.tablo-alan:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
table.rapor-tablo { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.rapor-tablo th, .rapor-tablo td { padding: 9px 10px; text-align: right; font-size: 14px; white-space: nowrap; border-bottom: 1px solid var(--cizgi); }
.rapor-tablo thead th { font-weight: 650; color: var(--soluk); background: #fff; border-bottom: 1px solid var(--cizgi); vertical-align: bottom; }
.rapor-tablo tbody th { font-weight: 600; }
.rapor-tablo .metin { text-align: left; white-space: normal; overflow-wrap: anywhere; min-width: 96px; max-width: 220px; }
.rapor-tablo.sabit-ilk th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--cizgi); }
.rapor-tablo tr.toplam th, .rapor-tablo tr.toplam td { font-weight: 700; border-top: 2px solid var(--cizgi); }
.rapor-tablo tbody tr:last-child th, .rapor-tablo tbody tr:last-child td { border-bottom: 0; }

/* uyarı ayarları */
.ayar-formu { max-width: 680px; }
.ayar-blok { margin: 0 0 6px; }
.anahtar-grup { margin: 16px 0 4px; }
label.anahtar { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; cursor: pointer; }
label.anahtar input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.anahtar-gorsel { position: relative; flex: 0 0 auto; width: 46px; height: 28px; border-radius: 99px; background: #d9d4cc; transition: background .15s; }
.anahtar-gorsel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
label.anahtar input:checked + .anahtar-gorsel { background: var(--vurgu); }
label.anahtar input:checked + .anahtar-gorsel::after { transform: translateX(18px); }
label.anahtar input:focus-visible + .anahtar-gorsel { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.anahtar-yazi { min-width: 0; font-weight: 650; }
.anahtar-alt { margin: 0 0 4px 58px; }
.sayi-alani label { margin-top: 10px; }
.sayi-satir { display: flex; align-items: center; gap: 8px; }
.sayi-satir input { max-width: 160px; }
.sayi-cift { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.ayar-formu .basari, .ayar-formu .hata { margin-top: 14px; }

@media (min-width: 601px) {
  button.yazdir-dugme .yazi { display: inline; }
  .rapor-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .rapor-izgara > * { margin: 0; min-width: 0; }
  .rapor-izgara > .genis { grid-column: 1 / -1; }
  .rapor-kpi.genis { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; }
  .rapor-ust { margin-bottom: 14px; }
}
@media (min-width: 1024px) {
  .rapor-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rapor-izgara > .iki { grid-column: span 2; }
  .pano.rapor-izgara > .kpi-izgara { grid-area: auto; grid-column: 1 / -1; } /* ana pano "kpi" alan adını burada kullanma */
  .ayar-formu { max-width: none; }
  .ayar-bloklar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
  .ayar-bloklar > * { min-width: 0; }
  .ayar-formu > button[type="submit"] { max-width: 360px; }
  .rapor-izgara .bolum-govde { display: block; max-height: calc(100vh - 330px); overflow: auto; }
  button.yazdir-dugme, a.csv-dugme { min-height: 38px; padding: 5px 14px; }
  .rapor-kpi.genis { gap: 16px; }
  .rapor-kpi .kpi { min-height: 118px; }
  .sayi-cift { gap: 0 16px; }
}
@media (hover: hover) and (pointer: fine) {
  button.yazdir-dugme:hover, a.csv-dugme:hover { color: var(--vurgu-koyu); border-color: var(--vurgu-cizgi); background: var(--vurgu-acik); filter: none; }
  a.kullanici-ad:hover { color: var(--vurgu-koyu); }
}

/* ---- yazdırma (PDF olarak kaydet): menü, şerit ve düğmeler gizlenir; kartlar tam genişlikte, bölümler açık ---- */
@media print {
  @page { margin: 12mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; padding: 0 !important; font-size: 11pt; }
  .ust, .ana-menu, .serit, .ozel-form, .rapor-ust, .rapor-arac, .geri, .mag-sec, .acilir-ok, button, a.csv-dugme { display: none !important; }
  .icerik { max-width: none; padding: 0; }
  .sayfa-bant, .baslik-blok { display: block; margin: 0 0 4mm; }
  .yazdir-baslik { display: block; margin: 0 0 5mm; font-weight: 700; }
  .kart { border: 1px solid #bbb; box-shadow: none; background: #fff; break-inside: avoid; }
  .rapor-izgara { display: block; }
  .rapor-izgara > * { margin: 0 0 5mm; }
  .rapor-izgara .bolum-govde { max-height: none !important; overflow: visible !important; }
  .rapor-kpi.genis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4mm; }
  .tablo-alan { overflow: visible; }
  .rapor-tablo th, .rapor-tablo td { white-space: normal; padding: 4px 6px; font-size: 9pt; }
  .rapor-tablo thead th, .rapor-tablo.sabit-ilk th:first-child { position: static; box-shadow: none; }
  details.bolum > summary { pointer-events: none; }
}

/* ======================================================================================================================
   TELEFON GÖRÜNÜMÜ — "Cafe Merkez" marka dili (kardeş uygulamalar Su Merkez / Market Merkez ile aynı: gradyanlı başlık, kahraman ciro kartı,
   baş harf daireli mağaza kartları, dolu hap çipler, marka renkli alt sekme). Marka rengi Cafe = YEŞİL. YALNIZ ≤600 px; geniş ekran etkilenmez.
   ====================================================================================================================== */
.logo-f, .ad-tel, .ust-alt, .zil, .ms-bas, .ms-adet, .ms-metrik, .hero-metrik, .ana-menu a.yalniz-tel, .ana-menu a.yalniz-masa, .ust-ikon.yalniz-masa, .menu-alt, .ms-rozet, .ms-alt, .sayfa-adi, .ust-durum { display: none; }
.kullanici .baglanti .ikon { display: none; }
@media (max-width: 600px) {
  :root { --yaricap: 16px; }
  .dar-sayfa .kart { box-shadow: var(--golge); }
  .serit { background: rgba(243, 246, 244, .96); }
  @supports (backdrop-filter: blur(10px)) { .serit { background: rgba(243, 246, 244, .82); } }

  /* ---- gradyanlı başlık çubuğu ---- */
  .ust { gap: 8px; min-height: 64px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px 16px; }
  .logo { gap: 10px; }
  .logo-img, .ad-masa { display: none; }
  .logo-f { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
  .logo-yazi { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
  .ad-tel { display: block; font-size: 18px; font-weight: 400; letter-spacing: -.01em; }
  .ad-tel em { font-style: normal; font-weight: 800; }
  .ust-alt { display: block; max-width: 56vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .85); }
  .ust-alt:empty { display: none; }
  .kullanici .kullanici-ad, .kullanici .baglanti { display: none; }
  .kullanici .zil { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; background: rgba(255, 255, 255, .16); border-radius: 14px; }
  .zil .ikon { width: 22px; height: 22px; }
  .zil-rozet { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; font-size: 14px; line-height: 22px; font-weight: 800; text-align: center; color: #3a2a00; background: #f5b301; }

  /* ---- alt sekme çubuğu: seçili sekme marka renginde + üst çizgi ---- */
  .ana-menu a.yalniz-tel { display: flex; }
  .ana-menu { gap: 0; padding-left: 2px; padding-right: 2px; }
  .ana-menu a { position: relative; padding: 4px 0; border-radius: 0; letter-spacing: -.02em; }
  .ana-menu a[aria-current] { color: var(--vurgu); background: none; }
  .ana-menu a[aria-current]::before { content: ""; position: absolute; top: -4px; left: 50%; width: 30px; height: 3px; margin-left: -15px; border-radius: 0 0 3px 3px; background: var(--vurgu); }

  /* ---- tarih çipleri: seçili = marka renginde dolu hap ---- */
  button.cip[aria-pressed="true"] { color: #fff; background: var(--vurgu); }

  /* ---- kahraman ciro kartı ---- */
  .hero-etiket { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .hero-deger { font-size: 34px; }
  .hero.hero-m .hero-alt { display: none; }
  .hero-metrik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .hero-metrik > div { display: flex; flex-direction: column; min-width: 0; }
  .hero-metrik span { font-size: 14px; color: rgba(255, 255, 255, .8); }
  .hero-metrik strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
  .adisyon-hero.odemesiz .hero-deger { color: #ffd4cd; }

  /* ---- mağaza kartları ---- */
  .magaza-blok { padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
  .magaza-blok .blok-bas { margin: 4px 2px 8px; }
  .magaza-liste { gap: 10px; }
  a.magaza-satir { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "bas ad ciro" "bas ad adet" "metrik metrik metrik"; gap: 2px 10px; padding: 12px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); }
  a.magaza-satir:last-child { border-bottom: 1px solid var(--cizgi); }
  a.magaza-satir.cevrimdisi { background: #fffafa; border-color: #f3c6c0; }
  .magaza-satir > .nokta, .magaza-satir > .ms-degisim, .magaza-satir > .ms-uyari { display: none; }
  .ms-bas { grid-area: bas; display: flex; align-items: center; justify-content: center; align-self: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; font-size: 17px; color: var(--vurgu-koyu); background: var(--vurgu-acik); }
  .cevrimdisi .ms-bas { color: var(--kirmizi); background: var(--kirmizi-acik); }
  .ms-ad { grid-area: ad; }
  .ms-ciro { grid-area: ciro; align-self: end; font-size: 17px; font-weight: 750; }
  .ms-adet { grid-area: adet; display: block; text-align: right; font-size: 14px; color: var(--soluk); white-space: nowrap; }
  .ms-durum { position: static; display: flex; align-items: center; gap: 6px; width: auto; height: auto; overflow: hidden; clip-path: none; text-overflow: ellipsis; font-size: 14px; color: var(--soluk); }
  .ms-durum::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #22a05a; }
  .ms-durum.kapali-yazi::before { background: #aaa69e; }
  .cevrimdisi .ms-durum::before { background: var(--kirmizi); }
  .ms-metrik { grid-area: metrik; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
  .ms-m { display: flex; flex-direction: column; min-width: 0; padding: 4px 8px; border-radius: 10px; background: var(--yuzey); font-size: 14px; color: var(--soluk); }
  .ms-m strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; }
  .cevrimdisi .ms-m { background: #fdf1ef; }
  .secim-satir { grid-template-columns: 40px minmax(0, 1fr) auto; }

  /* ilk ekran sıkılığı (hero + 2×2 KPI + ilk 3 mağaza kartı alt sekmenin üstünde): başlık bandı ve "Mağazalar" başlığı telefonda gizli (kardeşlerde yok) */
  .pano-sayfa .sayfa-bant .baslik-blok { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ust { min-height: 56px; padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; }
  .hero { padding: 10px 16px 12px; }
  .hero-deger { margin-bottom: 2px; font-size: 32px; }
  .hero-metrik { margin-top: 6px; }
  .kpi { padding: 8px 10px; gap: 2px; }
  .kpi-izgara { gap: 8px; }
  .magaza-blok .blok-bas { display: none; }
  .magaza-liste { gap: 8px; }
  a.magaza-satir { padding: 8px 12px; }
  .serit { margin-bottom: 6px; }
  .hero, .kpi, a.magaza-satir { line-height: 1.22; }
  .ms-metrik { margin-top: 2px; }
  .ms-m { padding: 2px 8px; }
  .daha-kart p { margin: 4px 0; }
  .daha-ad { font-size: 18px; font-weight: 700; }
}

/* ======================================================================================================================
   MASAÜSTÜ + TABLET KABUĞU — Su Merkez / Market Merkez web panelleriyle aynı düzen: marka gradyanlı üst çubuk (F + "FuLoop Cafe Merkez" ·
   sayfa adı · durum çipleri · yenile/çıkış) + solda koyu yeşil dikey yan menü (tablet 601–1023: yalnız ikon; ≥1024: ikon + yazı).
   Telefon (≤600) alt sekme çubuğu aynen kalır. Yan menü, üst çubuğun (.ust) içindeki #ana-menu'dür (CSS ile sola alınır).
   ====================================================================================================================== */
@media (min-width: 601px) {
  body.oturum .icerik { margin-left: 72px; width: calc(100% - 72px); }
  .logo-img, .ad-masa { display: none; }
  .logo-f { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
  .logo-yazi { display: flex; flex-direction: column; }
  .ad-tel { display: block; font-weight: 400; letter-spacing: -.01em; }
  .ad-tel em { font-style: normal; font-weight: 800; }
  .ana-menu { position: fixed; z-index: 30; top: 64px; left: 0; right: auto; bottom: 0; width: 72px; flex-direction: column; gap: 6px; padding: 14px 10px; overflow-y: auto;
    background: linear-gradient(180deg, #0b4a2a 0%, #073a20 55%, #052a17 100%); border: 0; border-radius: 0; box-shadow: none; }
  .ana-menu a, .ana-menu a.yalniz-masa { position: relative; flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 8px;
    border-radius: 14px; color: rgba(255, 255, 255, .88); font-size: 15px; font-weight: 650; letter-spacing: 0; }
  .ana-menu a span:not(.menu-rozet) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ana-menu a .ikon { display: block; width: 22px; height: 22px; flex: 0 0 auto; }
  .ana-menu a[aria-current] { color: var(--vurgu-koyu); background: #f3f6f4; box-shadow: none; }
  .ana-menu a[aria-current]::before { display: none; }
  .menu-rozet { position: absolute; top: 2px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font-size: 12px; line-height: 20px; font-weight: 800; text-align: center; color: #3a2a00; background: #f5b301; }
  .menu-rozet[hidden] { display: none; }
  .ust-ikon.yalniz-masa { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; color: #fff; background: rgba(255, 255, 255, .16); border: 0; border-radius: 14px; }
  .ust-ikon .ikon, .kullanici .baglanti .ikon { display: block; width: 20px; height: 20px; }
  .kullanici .baglanti { display: inline-flex; align-items: center; justify-content: center; width: 44px; margin: 0; padding: 0; background: rgba(255, 255, 255, .16); border-radius: 14px; text-decoration: none; }
  .kullanici .baglanti .yazi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1024px) {
  body.oturum .icerik { margin-left: 240px; width: calc(100% - 240px); }
  .ust { gap: 18px; padding-left: 24px; padding-right: 24px; }
  .logo { font-size: 21px; }
  .sayfa-adi { display: block; margin-left: 18px; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .ust-durum { display: flex; align-items: center; gap: 22px; margin-left: auto; }
  .kullanici { margin-left: 0; max-width: none; gap: 10px; }
  .ust-cip { display: flex; align-items: center; gap: 8px; color: #fff; white-space: nowrap; }
  .ust-cip .ikon { width: 22px; height: 22px; color: rgba(255, 255, 255, .75); }
  .ust-cip-yazi { display: flex; flex-direction: column; line-height: 1.15; }
  .ust-cip-yazi b { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
  .ust-cip-yazi small { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: rgba(255, 255, 255, .75); }
  .kullanici .kullanici-ad { max-width: 260px; padding: 6px 14px; line-height: 1.15; font-size: 15px; font-weight: 750; color: #fff; background: rgba(255, 255, 255, .14); border-radius: 14px; }
  .kullanici .kullanici-ad::after { content: "YÖNETİCİ"; display: block; font-size: 11px; font-weight: 500; letter-spacing: .06em; color: rgba(255, 255, 255, .75); }
  .ana-menu { width: 240px; padding: 20px 14px 16px; }
  .ana-menu a, .ana-menu a.yalniz-masa { justify-content: flex-start; padding: 10px 14px; }
  .ana-menu a span:not(.menu-rozet) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .menu-rozet { position: static; margin-left: auto; }
  .ana-menu .menu-alt { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding: 14px 8px 0; font-size: 12px; color: rgba(255, 255, 255, .7); }

  /* ÖZET: üstte 4 KPI, altında mağaza kartları ızgarası, en altta ciro grafiği | ödeme | saat yoğunluğu + dikkat */
  .ana-pano { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(210px, 1fr) minmax(230px, 1.1fr); grid-template-areas: none; gap: 14px; }
  .ana-pano .kpi-izgara { grid-area: 1 / 1 / 2 / 13; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; gap: 14px; }
  .ana-pano .magaza-blok { grid-area: 2 / 1 / 3 / 10; position: relative; padding: 12px 16px 14px; }
  .ana-pano .ciro-karti { grid-area: 3 / 1 / 4 / 6; }
  .ana-pano .odeme-karti { grid-area: 3 / 6 / 4 / 9; }
  .ana-pano .orta-sutun { display: contents; }
  .ana-pano .dikkat-karti { grid-area: 2 / 10 / 3 / 13; }
  .ana-pano .isi-karti { grid-area: 3 / 9 / 4 / 13; }
  .ana-pano .dikkat-liste { grid-template-columns: minmax(0, 1fr); }
  .ana-pano .ciro-karti .magaza-haplar { position: static; max-width: none; margin: 0 0 6px; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  .ana-pano .kpi { min-height: 0; padding: 10px 14px; }
  .ana-pano .blok-bas { margin-bottom: 8px; }
  .ana-pano .ms-baslik { position: absolute; top: 10px; right: 140px; display: flex; gap: 6px; padding: 0; border-bottom: 0; }
  .ana-pano .ms-baslik button.sirala { width: auto !important; min-height: 32px; margin: 0; padding: 4px 12px; text-align: left !important; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 99px; }
  .ana-pano .magaza-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; align-content: start; grid-auto-rows: max-content; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .ana-pano a.magaza-satir { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "bas ad rozet" "ciro ciro adet" "metrik metrik metrik" "alt alt alt"; align-items: center; gap: 4px 10px;
    min-height: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); }
  .ana-pano a.magaza-satir:last-child { border-bottom: 1px solid var(--cizgi); }
  .ana-pano a.magaza-satir.cevrimdisi { background: #fffafa; border-color: #e3a49b; }
  .ana-pano .magaza-satir > .nokta, .ana-pano .magaza-satir > .ms-degisim, .ana-pano .magaza-satir > .ms-uyari { display: none; }
  .ana-pano .ms-bas { grid-area: bas; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; font-size: 17px; color: #fff; background: var(--marka-gradyan); }
  .ana-pano .cevrimdisi .ms-bas { background: var(--kirmizi); }
  .ana-pano .ms-ad { grid-area: ad; }
  .ana-pano .ms-rozet { grid-area: rozet; display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
  .ana-pano .ms-rozet.acik { color: var(--yesil); background: var(--yesil-acik); }
  .ana-pano .ms-rozet.kapali { color: var(--kirmizi); background: var(--kirmizi-acik); }
  .ana-pano .ms-rozet.bos { color: var(--soluk); background: #eef1ef; }
  .ana-pano .ms-ciro { grid-area: ciro; text-align: left; font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
  .ana-pano .ms-adet { grid-area: adet; display: block; text-align: right; font-size: 13px; color: var(--soluk); white-space: nowrap; }
  .ana-pano .ms-metrik { grid-area: metrik; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
  .ana-pano .ms-m { display: flex; flex-direction: column; min-width: 0; padding: 4px 8px; border-radius: 10px; background: var(--yuzey); font-size: 12px; color: var(--soluk); }
  .ana-pano .ms-m strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; }
  .ana-pano .ms-alt { grid-area: alt; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--soluk); }
  .ana-pano .ms-git-dugme { padding: 4px 12px; font-weight: 700; color: var(--vurgu-koyu); background: var(--vurgu-acik); border-radius: 99px; white-space: nowrap; }
  .ana-pano a.magaza-satir:hover .ms-git-dugme { color: #fff; background: var(--vurgu); }
  .ana-pano .orta-sutun > .isi-karti { min-height: 0; }
}
@media print { body.oturum .icerik { margin-left: 0 !important; width: auto !important; } }