/* =====================================================================
   EQO Döner Muhasebe — Tasarım sistemi
   APPLE_DESIGN.md temel alınmış, veri yoğun panel için uyarlanmıştır:
   tek aksan rengi (Action Blue), gölgesiz yüzeyler, hairline ayraçlar,
   pill birincil aksiyon, 44px dokunma hedefi.
   ===================================================================== */

:root {
  /* Marka rengi — kimlik alanlarında kullanılır (logo, menü, aktif durum).
     Aksiyonlarda KULLANILMAZ; kırmızı buton "silme" gibi okunur. */
  --marka:          #e71e24;
  --marka-koyu:     #c4161b;
  --marka-soft:     #fdecec;

  /* Aksiyon rengi — tüm butonlar, bağlantılar, odak halkası */
  --primary:        #0066cc;
  --primary-focus:  #0071e3;
  --primary-soft:   #eef5fd;
  --ink:            #1d1d1f;
  --ink-80:         #333333;
  --ink-48:         #7a7a7a;
  --divider:        #f0f0f0;
  --hairline:       #e0e0e0;
  --canvas:         #ffffff;
  --parchment:      #f5f5f7;
  --pearl:          #fafafc;
  --tile-dark:      #272729;
  --on-dark:        #ffffff;
  --muted-on-dark:  #cccccc;

  /* Durum renkleri — YALNIZCA rakam metni ve grafik serilerinde */
  --pozitif:        #1d8a4e;
  --negatif:        #c8102e;
  --dikkat:         #9a6700;
  --pozitif-soft:   #edf7f1;
  --negatif-soft:   #fdeff1;
  --dikkat-soft:    #fdf6e6;

  /* Tipografi */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Yarıçap */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;

  /* Boşluk */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 17px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;

  --yan-genislik: 244px;
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.374px; }
p { margin: 0 0 var(--s-sm); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; border-radius: 4px; }

.atla {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: 10px 16px; z-index: 999; border-radius: 0 0 var(--r-sm) 0;
}
.atla:focus { left: 0; }

/* Rakamlar hizalı okunsun */
.para, td.para, .kpi-deger, .tablo td.sag { font-variant-numeric: tabular-nums; }

/* ============================================================ ADMIN KABUK */
.kabuk { display: flex; min-height: 100vh; }

.yan {
  width: var(--yan-genislik);
  flex: 0 0 var(--yan-genislik);
  background: var(--canvas);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
}
.yan-marka {
  display: flex; align-items: center; gap: 10px;
  padding: 16px var(--s-md); font-size: 15px; font-weight: 600;
  border-bottom: 1px solid var(--divider);
}
.marka-logo {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: var(--r-sm); object-fit: cover; display: block;
}
.marka-yazi { line-height: 1.2; }
.marka-yazi small {
  display: block; font-size: 11px; font-weight: 400; color: var(--ink-48);
  letter-spacing: 0.2px; text-transform: uppercase;
}
.yan-menu { padding: var(--s-sm) var(--s-xs); flex: 1; overflow-y: auto; }
.yan-menu a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--ink-80); font-size: 14px; letter-spacing: -0.224px; margin-bottom: 2px;
}
.yan-menu a:hover { background: var(--parchment); text-decoration: none; }
.yan-menu a.aktif { background: var(--marka-soft); color: var(--marka); font-weight: 600; }
.yan-alt { border-top: 1px solid var(--divider); padding: var(--s-sm) var(--s-md); }
.yan-kullanici { font-size: 13px; line-height: 1.35; margin-bottom: 10px; }
.yan-kullanici strong { display: block; font-size: 14px; }
.yan-kullanici span { color: var(--ink-48); font-size: 12px; }
.cikis-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--ink-48);
}
.cikis-link svg { width: 16px; height: 16px; }

.ana { flex: 1; margin-left: var(--yan-genislik); min-width: 0; }
.ust {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-sm);
  height: 60px; padding: 0 var(--s-lg);
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.ust h1 { font-size: 21px; letter-spacing: -0.3px; flex: 1; }
.ust-sag { display: flex; align-items: center; gap: var(--s-xs); flex-wrap: wrap; }
.menu-dugme {
  display: none; width: 40px; height: 40px; border: 0; background: none;
  color: var(--ink); border-radius: var(--r-sm); padding: 8px; cursor: pointer;
}
.menu-dugme svg { width: 24px; height: 24px; }
.ana-ic { padding: var(--s-lg); max-width: 1440px; }
.ana.genis .ana-ic { max-width: none; }
.yan-perde { display: none; }

/* ============================================================ ŞUBE KABUK */
.kabuk-sube { min-height: 100vh; padding-bottom: 76px; }
.sube-ust {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.sube-ust-ic {
  max-width: 780px; margin: 0 auto; padding: 10px var(--s-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm);
}
.sube-marka { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); }
.sube-marka:hover { text-decoration: none; }
.sube-marka strong { display: block; font-size: 15px; line-height: 1.25; }
.sube-marka > span > span { font-size: 12px; color: var(--ink-48); }
.sube-marka .marka-logo { width: 32px; height: 32px; flex: 0 0 32px; }
.sube-ust .cikis-link { width: 44px; height: 44px; justify-content: center; }
.sube-ust .cikis-link svg { width: 20px; height: 20px; }
.sube-ana { max-width: 780px; margin: 0 auto; padding: var(--s-md) var(--s-md) var(--s-xl); }
.sayfa-baslik { font-size: 28px; letter-spacing: -0.4px; margin-bottom: var(--s-md); }

.alt-menu {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex; justify-content: space-around;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.alt-menu a {
  flex: 1; min-height: 56px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-48); font-size: 10px; letter-spacing: -0.12px;
}
.alt-menu a:hover { text-decoration: none; }
.alt-menu a svg { width: 22px; height: 22px; }
.alt-menu a.aktif { color: var(--marka); }

/* ============================================================== KARTLAR */
.kart {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  margin-bottom: var(--s-md);
}
.kart.sikisik { padding: var(--s-md); }
.kart-baslik {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-sm); flex-wrap: wrap; margin-bottom: var(--s-md);
}
.kart-baslik h2 { font-size: 17px; font-weight: 600; }
.kart-baslik .alt { font-size: 13px; color: var(--ink-48); font-weight: 400; }
.kart > .tablo-sarmal:last-child { margin-bottom: calc(var(--s-lg) * -1); }

.izgara { display: grid; gap: var(--s-md); }
.izgara-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.izgara-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.izgara-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.izgara-ana-yan { grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); }

/* KPI */
.kpi {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--s-md) var(--s-md) 14px;
}
.kpi-etiket { font-size: 12px; color: var(--ink-48); letter-spacing: -0.12px; margin-bottom: 6px; }
.kpi-deger { font-size: 26px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; }
.kpi-not { font-size: 12px; color: var(--ink-48); margin-top: 5px; }
.kpi.vurgu {
  background: var(--tile-dark); border-color: var(--tile-dark);
  position: relative; overflow: hidden;
}
.kpi.vurgu .kpi-etiket, .kpi.vurgu .kpi-not { color: var(--muted-on-dark); }
.kpi.vurgu .kpi-deger { color: var(--on-dark); }
/* Koyu kutuda ince marka filigranı */
.kpi.vurgu::after {
  content: ""; position: absolute; right: -16px; bottom: -20px;
  width: 116px; height: 116px; opacity: .07; pointer-events: none;
  background: url("../img/eqo-logo-fill.png") no-repeat center / contain;
}
.kpi.vurgu > * { position: relative; }

.pozitif { color: var(--pozitif); }
.negatif { color: var(--negatif); }
.notr { color: var(--ink-48); }

/* Hedef çubuğu */
.hedef-cubuk {
  height: 8px; background: var(--divider); border-radius: var(--r-pill);
  overflow: hidden; margin-top: 10px;
}
.hedef-cubuk .dolu { height: 100%; border-radius: var(--r-pill); background: var(--primary); }
.hedef-cubuk.iyi .dolu { background: var(--pozitif); }
.hedef-cubuk.orta .dolu { background: var(--primary); }
.hedef-cubuk.zayif .dolu { background: var(--negatif); }

/* =============================================================== TABLO */
.tablo-sarmal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablo { width: 100%; border-collapse: collapse; font-size: 14px; letter-spacing: -0.224px; }
.tablo th {
  text-align: left; font-weight: 600; font-size: 12px; color: var(--ink-48);
  padding: 10px 12px; border-bottom: 1px solid var(--hairline); white-space: nowrap;
  letter-spacing: -0.12px; text-transform: none;
}
.tablo td { padding: 11px 12px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover { background: var(--pearl); }
.tablo .sag, .tablo th.sag { text-align: right; }
.tablo .orta, .tablo th.orta { text-align: center; }
.tablo .kucuk { font-size: 12px; color: var(--ink-48); }
.tablo tfoot td { font-weight: 600; border-top: 1px solid var(--hairline); background: var(--pearl); }
.tablo tr.pasif td { opacity: .55; }

.rozet {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; letter-spacing: -0.12px; background: var(--parchment); color: var(--ink-80);
}
.rozet.yesil { background: var(--pozitif-soft); color: var(--pozitif); }
.rozet.kirmizi { background: var(--negatif-soft); color: var(--negatif); }
.rozet.sari { background: var(--dikkat-soft); color: var(--dikkat); }
.rozet.mavi { background: var(--primary-soft); color: var(--primary); }

.bos-not { color: var(--ink-48); font-size: 14px; padding: var(--s-md) 0; margin: 0; }
.bos-durum { text-align: center; padding: var(--s-xl) var(--s-md); color: var(--ink-48); }
.bos-durum p { margin-bottom: var(--s-md); }

/* =============================================================== FORM */
.form-satir { margin-bottom: var(--s-md); }
.form-izgara { display: grid; gap: var(--s-md); grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-izgara-3 { display: grid; gap: var(--s-md); grid-template-columns: repeat(3, minmax(0,1fr)); }
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-80); margin-bottom: 6px; letter-spacing: -0.2px; }
label .ops { font-weight: 400; color: var(--ink-48); }

.girdi, input[type=text], input[type=password], input[type=date], input[type=number],
input[type=tel], input[type=email], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 14px;
  font-family: inherit; font-size: 16px; letter-spacing: -0.3px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-md); appearance: none;
}
textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237a7a7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
  padding-right: 36px;
}
.girdi:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary-focus);
  box-shadow: 0 0 0 3px rgba(0,113,227,.14);
}
input[readonly], input:disabled, select:disabled { background: var(--parchment); color: var(--ink-48); }
.yardim { font-size: 12px; color: var(--ink-48); margin-top: 6px; line-height: 1.4; }
.hata-metin { font-size: 13px; color: var(--negatif); margin-top: 6px; }

.onay { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.onay input[type=checkbox] {
  width: 22px; height: 22px; min-height: 22px; margin: 0; accent-color: var(--primary); flex: 0 0 22px;
}
.onay label { margin: 0; font-weight: 400; font-size: 15px; color: var(--ink); }

.para-girdi { position: relative; }
.para-girdi input { padding-right: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.para-girdi::after {
  content: "₺"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-48); font-size: 15px; pointer-events: none;
}

.form-aksiyon {
  display: flex; gap: var(--s-sm); align-items: center; flex-wrap: wrap;
  margin-top: var(--s-lg); padding-top: var(--s-md); border-top: 1px solid var(--divider);
}

/* ============================================================== BUTON */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 22px; border: 1px solid transparent;
  border-radius: var(--r-pill); font-size: 16px; letter-spacing: -0.3px;
  cursor: pointer; background: none; color: var(--primary); transition: transform .08s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.96); }
.btn-birincil { background: var(--primary); color: #fff; }
.btn-hayalet { border-color: var(--primary); color: var(--primary); background: var(--canvas); }
.btn-notr { border-color: var(--hairline); color: var(--ink-80); background: var(--canvas); }
.btn-tehlike { border-color: var(--negatif); color: var(--negatif); background: var(--canvas); }
.btn-tam { width: 100%; }
.btn:disabled, .btn.pasif { opacity: .45; pointer-events: none; }

.btn-utility {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 8px 15px; border-radius: var(--r-sm); border: 1px solid var(--hairline);
  background: var(--canvas); color: var(--ink-80); font-size: 14px;
  letter-spacing: -0.224px; cursor: pointer; transition: transform .08s ease;
}
.btn-utility:hover { text-decoration: none; background: var(--pearl); }
.btn-utility:active { transform: scale(.96); }
.btn-utility.koyu { background: var(--ink); color: #fff; border-color: var(--ink); }

.satir-aksiyon { display: inline-flex; gap: 6px; }
.satir-aksiyon a, .satir-aksiyon button {
  font-size: 13px; padding: 6px 10px; min-height: 32px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline); background: var(--canvas); color: var(--ink-80); cursor: pointer;
}
.satir-aksiyon a:hover { text-decoration: none; background: var(--pearl); }
.satir-aksiyon .sil { color: var(--negatif); border-color: #f3d6db; }

/* ============================================================== UYARI */
.uyari {
  padding: 12px 16px; border-radius: var(--r-md); font-size: 15px;
  margin-bottom: var(--s-md); border: 1px solid transparent; line-height: 1.45;
}
.uyari-basari { background: var(--pozitif-soft); color: #14653a; border-color: #cfe9db; }
.uyari-hata { background: var(--negatif-soft); color: #8f0b21; border-color: #f3d0d7; }
.uyari-dikkat { background: var(--dikkat-soft); color: #6b4700; border-color: #f0e0b8; }
.uyari-bilgi { background: var(--primary-soft); color: #0a4a94; border-color: #cfe2f8; }

/* ============================================================ AY SEÇİCİ */
.ay-secici {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--canvas); padding: 3px;
}
.ay-ok {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); color: var(--ink-80); font-size: 20px; line-height: 1;
}
.ay-ok:hover { background: var(--parchment); text-decoration: none; }
.ay-ad { padding: 0 12px; font-size: 14px; font-weight: 600; letter-spacing: -0.224px; min-width: 116px; text-align: center; }

.filtre-cubuk {
  display: flex; gap: var(--s-sm); align-items: flex-end; flex-wrap: wrap;
  margin-bottom: var(--s-md);
}
.filtre-cubuk .form-satir { margin: 0; min-width: 160px; }
.filtre-cubuk label { font-size: 12px; }

/* ============================================================ GRAFİKLER */
.ch-sarmal { position: relative; }
.ch { width: 100%; height: 240px; display: block; }
.ch-ust { font-size: 11px; color: var(--ink-48); margin-bottom: 2px; }
.ch-legend { display: flex; gap: var(--s-md); font-size: 12px; color: var(--ink-48); margin-top: 6px; }
.ch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ch-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.ch-halka-sarmal { display: flex; gap: var(--s-lg); align-items: center; flex-wrap: wrap; }
.ch-halka { width: 168px; height: 168px; flex: 0 0 168px; }
.ch-liste { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; }
.ch-liste li {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  padding: 7px 0; border-bottom: 1px solid var(--divider);
}
.ch-liste li:last-child { border-bottom: 0; }
.ch-liste i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.ch-liste .ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-liste .tutar { font-variant-numeric: tabular-nums; }
.ch-liste .oran { color: var(--ink-48); width: 52px; text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================== GİRİŞ */
.giris-sayfa, .giris-sag {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--s-lg); background: var(--parchment);
}
.giris-kutu {
  width: 100%; max-width: 384px;
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--s-xl);
  text-align: left;
}
.giris-logo {
  display: block; width: 96px; height: 96px; margin: 0 auto var(--s-lg);
  border-radius: var(--r-lg);
}
.giris-kutu h1 { font-size: 26px; letter-spacing: -0.4px; margin-bottom: 6px; text-align: center; }
.giris-kutu .alt-metin {
  color: var(--ink-48); font-size: 15px; margin-bottom: var(--s-lg); text-align: center;
}
.giris-kutu .form-satir { margin-bottom: var(--s-sm); }
.giris-kutu .btn { margin-top: var(--s-xs); }
.giris-dipnot {
  margin: var(--s-lg) 0 0; padding-top: var(--s-md); border-top: 1px solid var(--divider);
  font-size: 12px; color: var(--ink-48); line-height: 1.5; text-align: center;
}

/* ============================================================== FİŞLER */
.fis-izgara { display: flex; gap: var(--s-sm); flex-wrap: wrap; }
.fis-kutu {
  width: 92px; height: 92px; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--hairline); background: var(--parchment); display: block; position: relative;
}
.fis-kutu img { width: 100%; height: 100%; object-fit: cover; }
.fis-sil {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.9); border: 0; color: var(--negatif); font-size: 14px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fis-buyuk { max-width: 100%; border-radius: var(--r-sm); border: 1px solid var(--hairline); }

.dosya-alan {
  border: 1px dashed var(--hairline); border-radius: var(--r-md); padding: var(--s-md);
  text-align: center; background: var(--pearl); font-size: 14px; color: var(--ink-48);
}
.dosya-alan input[type=file] { margin-top: 8px; font-size: 13px; }

/* ============================================================== ÇEŞİTLİ */
.ust-bilgi { font-size: 13px; color: var(--ink-48); margin-bottom: var(--s-md); }
.ayrac { height: 1px; background: var(--divider); margin: var(--s-lg) 0; border: 0; }
.gizli { display: none !important; }
.sadece-okuma-kutu {
  background: var(--parchment); border-radius: var(--r-md); padding: 12px 14px;
  font-size: 15px; font-variant-numeric: tabular-nums;
}
.kod-kutu {
  background: var(--tile-dark); color: var(--on-dark); border-radius: var(--r-md);
  padding: var(--s-md); font-size: 15px; line-height: 1.7; word-break: break-all;
}
.kod-kutu strong { color: #fff; }
.gun-basligi {
  display: flex; align-items: baseline; gap: 10px; margin: var(--s-lg) 0 var(--s-xs);
  font-size: 15px; font-weight: 600;
}
.gun-basligi .gun-alt { font-size: 13px; font-weight: 400; color: var(--ink-48); }
.sayfalama { display: flex; gap: 6px; align-items: center; margin-top: var(--s-md); flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); border-radius: var(--r-sm); font-size: 14px; color: var(--ink-80);
  padding: 0 10px; background: var(--canvas);
}
.sayfalama a:hover { text-decoration: none; background: var(--pearl); }
.sayfalama .aktif { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ========================================================== DUYARLILIK */
@media (max-width: 1068px) {
  .izgara-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .izgara-ana-yan { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 900px) {
  .izgara-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .yan {
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: none;
  }
  body.menu-acik .yan { transform: translateX(0); }
  body.menu-acik .yan-perde {
    display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.28);
  }
  .ana { margin-left: 0; }
  .menu-dugme { display: inline-flex; align-items: center; justify-content: center; }
  .ana-ic { padding: var(--s-md); }
  .ust { padding: 0 var(--s-md); }
}

@media (max-width: 640px) {
  .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: minmax(0,1fr); }
  .form-izgara, .form-izgara-3 { grid-template-columns: minmax(0,1fr); }
  .kart { padding: var(--s-md); border-radius: var(--r-md); }
  .sayfa-baslik { font-size: 24px; }
  .kpi-deger { font-size: 23px; }
  .ust h1 { font-size: 17px; }
  .giris-kutu { padding: var(--s-lg); }
  .giris-logo { width: 76px; height: 76px; }
  .ch-halka-sarmal { justify-content: center; }

  /* Tabloları karta dönüştür */
  .tablo-mobil-kart thead { display: none; }
  .tablo-mobil-kart tbody tr {
    display: block; border: 1px solid var(--hairline); border-radius: var(--r-md);
    padding: 10px 12px; margin-bottom: 10px; background: var(--canvas);
  }
  .tablo-mobil-kart tbody tr:hover { background: var(--canvas); }
  .tablo-mobil-kart td {
    display: flex; justify-content: space-between; gap: var(--s-sm);
    padding: 5px 0; border: 0; text-align: right;
  }
  .tablo-mobil-kart td::before {
    content: attr(data-etiket); font-size: 12px; color: var(--ink-48);
    font-weight: 600; text-align: left; flex: 0 0 auto;
  }
  .tablo-mobil-kart td:empty { display: none; }
  .tablo-mobil-kart tfoot td { display: flex; }
}

@media print {
  .yan, .ust, .alt-menu, .sube-ust, .form-aksiyon, .satir-aksiyon, .ay-secici { display: none !important; }
  .ana { margin: 0; }
  body { background: #fff; }
  .kart { break-inside: avoid; border-color: #ddd; }
}