[data-tema="tablo"] {
  /* Jetonlar — YALNIZ AÇIK KİP. Bu blok ile hemen altındaki
     [data-theme="light"] bloğu BİREBİR aynı değerleri taşır (owner kararı
     19.09.2026: tablo temasının koyu sürümü yok). Bu kural dosyanın İLK
     kuralıdır — testler ilk eşleşmeyi okur; başlık yorumu bu yüzden
     aşağıdadır. */
  --bg-primary: #eceef1;
  --bg-secondary: #f4f6f8;
  --bg-card: #ffffff;
  --bg-input: #f7f8fa;
  --border: #d5dae0;
  --border-focus: #b91c1c;

  --text-primary: #14181d;
  --text-secondary: #4a525c;
  --text-muted: #6b7480;

  --accent: #b91c1c;
  --accent-light: #7f1010;
  --accent-glow: #fdf6f6;
  --on-accent: #ffffff;
  --dugme-arka: #b91c1c;

  --font-body: 'Archivo', system-ui, sans-serif;
  --font-display: 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --tablo-bas-arka: #f4f6f8;
  --tablo-bas-yazi: #4a525c;
  --kart-golge: none;
  --shadow: none;
  --shadow-lg: none;

  --atmosfer-1: transparent;
  --atmosfer-2: transparent;
  --izgara-opaklik: 0;

  --radius: 0;
  --radius-sm: 0;

  /* Durum renkleri palet içinde: hata/uyarı = bordo, başarı = mürekkep. */
  --success: #14181d;
  --danger: #b91c1c;
  --warning: #7f1010;
  --info: #4a525c;

  --tb-ink: #14181d;
  --tb-ink-2: #2c333c;
  --tb-ink-5: #8b949e;
  --tb-rule-soft: #eef0f3;
  --tb-field-border: #c6ccd4;
  --tb-accent-light: #f87171;
  --tb-dark-2: #1a1f26;
  --tb-dark-rule: #2c333c;

  color-scheme: light;
}

[data-tema="tablo"][data-theme="light"] {
  /* Açık kip — üstteki blokla BİREBİR aynı (yalnız açık kip). */
  --bg-primary: #eceef1;
  --bg-secondary: #f4f6f8;
  --bg-card: #ffffff;
  --bg-input: #f7f8fa;
  --border: #d5dae0;
  --border-focus: #b91c1c;

  --text-primary: #14181d;
  --text-secondary: #4a525c;
  --text-muted: #6b7480;

  --accent: #b91c1c;
  --accent-light: #7f1010;
  --accent-glow: #fdf6f6;
  --on-accent: #ffffff;
  --dugme-arka: #b91c1c;

  --font-body: 'Archivo', system-ui, sans-serif;
  --font-display: 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --tablo-bas-arka: #f4f6f8;
  --tablo-bas-yazi: #4a525c;
  --kart-golge: none;
  --shadow: none;
  --shadow-lg: none;

  --atmosfer-1: transparent;
  --atmosfer-2: transparent;
  --izgara-opaklik: 0;

  --radius: 0;
  --radius-sm: 0;

  /* Durum renkleri palet içinde: hata/uyarı = bordo, başarı = mürekkep. */
  --success: #14181d;
  --danger: #b91c1c;
  --warning: #7f1010;
  --info: #4a525c;

  --tb-ink: #14181d;
  --tb-ink-2: #2c333c;
  --tb-ink-5: #8b949e;
  --tb-rule-soft: #eef0f3;
  --tb-field-border: #c6ccd4;
  --tb-accent-light: #f87171;
  --tb-dark-2: #1a1f26;
  --tb-dark-rule: #2c333c;

  color-scheme: light;
}

/* Tablo — Yön B "veri terminali" kimliği. Ürün bir pazarlama sitesi değil,
   bilirkişi hesap tablosu üreten uzman aracı: nötr gri zemin, beyaz içerik
   yüzeyleri, sıkı grid, her yerde 1px koyu ayraç, Archivo Narrow UPPERCASE
   başlıklar, JetBrains Mono etiket/sütun başlıkları, TEK bordo vurgu
   (yalnız CTA, aktif durum, toplam tutar). Köşe yarıçapı 0 — istisnasız;
   gölge, gradient, cam efekti YOK.

   YALNIZ AÇIK KİP (owner kararı 19.09.2026): koyu ve açık jeton blokları
   aynı değerleri taşır; tema değiştirme düğmeleri bu temada gizlenir.

   Palet YALNIZ handoff/tokens.css değerleridir — yeni renk üretilmez
   (tests/test_tema_tablo.py::test_palet_disinda_renk_yok bunu bekçiler).
   Spec: docs/superpowers/specs/2026-09-19-tablo-theme-design.md
   Yazı tipleri: static/fonts/fontlar-tablo.css (self-host, latin + latin-ext).

   Jeton adları templates/base.html + templates/store/public_base.html
   ':root' bloklarıyla birebir aynıdır; `--tb-*` jetonları handoff'un ek
   renkleridir (ink-2/ink-5, rule-soft, field-border, koyu zemin tonları).

   ===== İÇİNDEKİLER =====
   1. Jetonlar (yukarıda — koyu + açık, aynı değerler)
   2. Genel bileşen yeniden şekillendirme (köşe/gölge, zemin, başlık, tablo,
      buton, kart, form)
   3. Tema değiştirme düğmelerinin gizlenmesi
   4. İskelet sınıfları (.tb-*) — Görev 4–6 parçalarının kullandığı kitaplık
   5. Duyarlı (≤900px) kırılım
   6. Genel iskelet parçaları (_header / _footer / _modul_hero)
   7. Ana sayfa (_karsilama + _fiyat_paketler + store/fiyatlar.html)
   8. Uygulama kabuğu (_uygulama_kabugu — koyu sol menü + kredi kutusu)
   9. Sayfa geçişi (mevcut sayfaların bileşenleri; formlar, tablolar,
      modallar, bağımsız sayfalar, dar telefon kırılımı)
*/

/* ===================== 2. GENEL BİLEŞEN YENİDEN ŞEKİL ===================== */

/* Köşe yarıçapı 0 ve gölge yok — istisnasız (spinner / sohbet balonu dahil). */
[data-tema="tablo"] *,
[data-tema="tablo"] *::before,
[data-tema="tablo"] *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Düz zemin — atmosfer degradeleri ve ızgara dokusu kapalı. */
[data-tema="tablo"] body {
  background: var(--bg-primary);
  background-image: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
[data-tema="tablo"] body::before,
[data-tema="tablo"] body::after {
  background: none;
  opacity: 0;
}

[data-tema="tablo"] a:hover {
  color: var(--accent-light);
}

/* Başlıklar: condensed, UPPERCASE, kalın. */
[data-tema="tablo"] h1,
[data-tema="tablo"] h2,
[data-tema="tablo"] h3,
[data-tema="tablo"] .display {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .01em;
}

/* Tablolar: mono sütun başlığı, yumuşak satır çizgisi, tablo rakamları. */
[data-tema="tablo"] table {
  font-variant-numeric: tabular-nums;
  border-collapse: collapse;
}
[data-tema="tablo"] table th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tablo-bas-yazi);
  background: var(--tablo-bas-arka);
}
[data-tema="tablo"] table td {
  border-bottom: 1px solid var(--tb-rule-soft);
}
[data-tema="tablo"] .data-table tbody tr:hover {
  background: var(--accent-glow);
}

/* Butonlar: düz bordo, beyaz yazı, condensed UPPERCASE. */
[data-tema="tablo"] .btn {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 0;
}
[data-tema="tablo"] .btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
  opacity: 1;
}
[data-tema="tablo"] .btn-primary:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
  color: var(--on-accent);
  opacity: 1;
}
[data-tema="tablo"] .btn-ghost {
  background: transparent;
  color: var(--tb-ink);
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .btn-ghost:hover {
  background: var(--bg-secondary);
  color: var(--tb-ink);
}

/* Kartlar: beyaz, 1px kenarlık, gölgesiz. */
[data-tema="tablo"] .card,
[data-tema="tablo"] .stat-card,
[data-tema="tablo"] .form-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: none;
}

/* Form alanları: hafif gri zemin, belirgin kenarlık, bordo odak. */
[data-tema="tablo"] .form-control {
  background: var(--bg-input);
  border: 1px solid var(--tb-field-border);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
[data-tema="tablo"] .form-control:focus {
  border-color: var(--accent);
  background: var(--bg-card);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ================== 3. TEMA DEĞİŞTİRME DÜĞMELERİ GİZLİ ================== */

/* Yalnız açık kip — koyu/açık geçişi bu temada anlamsız. */
[data-tema="tablo"] .theme-toggle,
[data-tema="tablo"] .icon-btn[onclick*="toggleTheme"] {
  display: none !important;
}

/* ======================= 4. İSKELET SINIFLARI (.tb-*) ======================= */

/* Mono etiket — her bölümün / sütunun üstünde. */
[data-tema="tablo"] .tb-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
[data-tema="tablo"] .tb-label--accent {
  color: var(--accent);
}

/* Condensed UPPERCASE başlık ölçeği. */
[data-tema="tablo"] .tb-h {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.02;
  color: var(--tb-ink);
  margin: 0;
}
[data-tema="tablo"] h1.tb-h {
  font-size: clamp(30px, 4vw, 68px);
}
[data-tema="tablo"] h2.tb-h,
[data-tema="tablo"] .tb-h--2 {
  font-size: clamp(24px, 2.8vw, 42px);
}
[data-tema="tablo"] h3.tb-h {
  font-size: 18px;
}

/* Beyaz üst bar: logo + dikey çizgilerle bölünmüş nav; altı 2px siyah. */
[data-tema="tablo"] .tb-bar {
  background: var(--bg-card);
  border-bottom: 2px solid var(--tb-ink);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  min-height: 60px;
}
[data-tema="tablo"] .tb-nav {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-tema="tablo"] .tb-nav > a,
[data-tema="tablo"] .tb-nav > li > a {
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-left: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tb-ink);
  text-decoration: none;
}
[data-tema="tablo"] .tb-nav > a:hover,
[data-tema="tablo"] .tb-nav > li > a:hover {
  background: var(--bg-secondary);
  color: var(--tb-ink);
}
[data-tema="tablo"] .tb-nav > a.aktif,
[data-tema="tablo"] .tb-nav > a[aria-current="page"],
[data-tema="tablo"] .tb-nav > li > a.aktif {
  color: var(--accent);
  box-shadow: none;
  border-bottom: 2px solid var(--accent);
}

/* 1px koyu ayraçlı grid — Yön B'nin imzası. */
[data-tema="tablo"] .tb-grid {
  display: grid;
  gap: 1px;
  background: var(--tb-ink);
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .tb-grid > * {
  background: var(--bg-card);
}
[data-tema="tablo"] .tb-grid--soft {
  background: var(--border);
  border-color: var(--border);
}

/* Butonlar. */
[data-tema="tablo"] .tb-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 22px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.1;
}
[data-tema="tablo"] .tb-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
  color: var(--on-accent);
}
[data-tema="tablo"] .tb-btn--ghost {
  background: transparent;
  color: var(--tb-ink);
  border-color: var(--tb-ink);
}
[data-tema="tablo"] .tb-btn--ghost:hover {
  background: var(--bg-secondary);
  color: var(--tb-ink);
}
/* Klavye odağı: düz 2px bordo halka + 2px boşluk (yarı saydam halka
   ~1.3:1 kontrastla görünmüyordu). Koyu sol menüde halka beyazdır. */
[data-tema="tablo"] a:focus-visible,
[data-tema="tablo"] button:focus-visible,
[data-tema="tablo"] .tb-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
[data-tema="tablo"] .tb-yan a:focus-visible,
[data-tema="tablo"] .tb-yan button:focus-visible {
  outline-color: #ffffff;
}

/* Tablo — ürünün ana görsel öğesi. */
[data-tema="tablo"] .tb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--tb-ink);
  background: var(--bg-card);
  font-variant-numeric: tabular-nums;
}
[data-tema="tablo"] .tb-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 8px 13px;
  border-bottom: 1px solid var(--tb-ink);
  text-align: left;
}
[data-tema="tablo"] .tb-table td {
  padding: 7px 13px;
  border-bottom: 1px solid var(--tb-rule-soft);
}
[data-tema="tablo"] .tb-table .num,
[data-tema="tablo"] .tb-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
[data-tema="tablo"] .tb-table .mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-secondary);
}
[data-tema="tablo"] .tb-table thead.tb-koyu th {
  background: var(--tb-ink);
  color: var(--tb-ink-5);
  border-bottom-color: var(--tb-ink);
}

/* Toplam satırı / toplam tutar — bordo yalnız burada. */
[data-tema="tablo"] .tb-total td,
[data-tema="tablo"] .tb-table tr.tb-total td {
  background: var(--bg-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-top: 1px solid var(--tb-ink);
  border-bottom: 0;
}
[data-tema="tablo"] .tb-total td.num,
[data-tema="tablo"] .tb-table tr.tb-total td.num {
  font-size: 19px;
  color: var(--accent);
  letter-spacing: 0;
  text-transform: none;
}

/* Uyarı / bilgi kutusu. */
[data-tema="tablo"] .tb-note {
  border-left: 3px solid var(--accent);
  background: var(--accent-glow);
  color: var(--tb-ink-2);
  padding: 16px 20px;
  max-width: 66ch;
}

/* ========================= 5. DUYARLI (≤900px) ========================= */

@media (max-width: 900px) {
  /* Grid şeritleri tek sütuna düşer. */
  [data-tema="tablo"] .tb-grid {
    grid-template-columns: 1fr;
  }

  /* Koyu sol menü (.tb-yan) dar ekranda base.html'in off-canvas
     davranışını AYNEN korur (#sidebar.open + toggleSidebar/closeSidebar
     JS sözleşmesi) — bkz. bölüm 6. Handoff'taki "yatay şerit" önerisi
     uygulama kabuğunda UYGULANMAZ (Görev 6 kararı). */

  /* Üst bar nav'ı yatay kaydırılabilir. */
  [data-tema="tablo"] .tb-nav {
    overflow-x: auto;
  }

  /* Geniş tablolar yatay kaydırılır. */
  [data-tema="tablo"] .tb-table,
  [data-tema="tablo"] .data-table {
    display: block;
    overflow-x: auto;
  }
}

/* ============ 6. GENEL İSKELET PARÇALARI (Task 4: header/footer/hero) ============
   templates/tema/tablo/_header.html, _footer.html, _modul_hero.html için.
   Taban kurallar public_base.html'de (.nav/.nav-inner/.brand/.footer/.psp-row);
   burada yalnız tablo kimliği bindirilir. */

/* --- Üst bar: .nav yapışkanlığı korunur; bulanık yarı saydam zemin yerine düz beyaz. */
[data-tema="tablo"] .tb-bar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-tema="tablo"] .tb-bar > .wrap {
  flex: 1;
}
[data-tema="tablo"] .tb-bar .nav-inner {
  height: auto;
  min-height: 60px;
  align-items: stretch;
  gap: 20px;
}
[data-tema="tablo"] .tb-bar .brand,
[data-tema="tablo"] .tb-bar .nav-links {
  align-self: center;
}
[data-tema="tablo"] .tb-bar .brand {
  gap: 11px;
  color: var(--tb-ink);
}
[data-tema="tablo"] .brand .logo {
  width: 30px;
  height: 30px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
[data-tema="tablo"] .brand .b-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tb-ink);
}
[data-tema="tablo"] .tb-bar .tb-nav > a:last-child {
  border-right: 1px solid var(--border);
}
[data-tema="tablo"] .tb-bar .nav-links {
  gap: 8px;
}
[data-tema="tablo"] .tb-bar .nav-links > a:not(.btn) {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tb-ink);
  padding: 8px 12px;
}
[data-tema="tablo"] .tb-bar .nav-links > a:not(.btn):hover {
  background: var(--bg-secondary);
  color: var(--tb-ink);
}
/* Giriş: ince siyah çerçeveli ikincil düğme (maket). */
[data-tema="tablo"] .tb-bar .nav-links > a[href="/login"] {
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .tb-bar .menu-btn {
  border-color: var(--tb-ink);
  color: var(--tb-ink);
}
[data-tema="tablo"] .tb-bar .menu-btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}
[data-tema="tablo"] .tb-bar .menu-panel {
  border: 1px solid var(--tb-ink);
  top: calc(100% + 12px);
}
[data-tema="tablo"] .tb-bar .menu-panel h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .12em;
}
/* Dört nav bağlantısının hepsi açılır menüde de var — sığmadığı genişlikte gizle. */
@media (max-width: 960px) {
  [data-tema="tablo"] .tb-bar .tb-nav {
    display: none;
  }
}

/* --- Altbilgi: beyaz, üstü 2px siyah; marka + dört sütun. */
[data-tema="tablo"] .tb-footer {
  background: var(--bg-card);
  border-top: 2px solid var(--tb-ink);
  padding: 40px 0 30px;
  color: var(--text-secondary);
}
[data-tema="tablo"] .tb-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
  gap: 36px;
}
[data-tema="tablo"] .tb-footer-marka p {
  font-size: 13.5px;
  color: var(--text-secondary);
  max-width: 40ch;
  margin: 0;
}
[data-tema="tablo"] .tb-footer h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}
[data-tema="tablo"] .tb-footer-grid a {
  color: var(--tb-ink);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
[data-tema="tablo"] .tb-footer-grid a:hover {
  color: var(--accent);
}
[data-tema="tablo"] .tb-footer .psp-row {
  border-top-color: var(--border);
}
[data-tema="tablo"] .tb-footer .pay-chip {
  border-color: var(--border);
}
@media (max-width: 900px) {
  [data-tema="tablo"] .tb-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }
  [data-tema="tablo"] .tb-footer-marka {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  [data-tema="tablo"] .tb-footer-grid {
    grid-template-columns: 1fr;
  }
}
/* Sol alttaki yüzen "Canlı Yardım" düğmesi sayfa sonunda Paratika satırını ve
   son bağlantıları örtüyordu: altbilgi düğme kadar pay bırakır. */
@media (max-width: 720px) {
  [data-tema="tablo"] .tb-footer {
    padding-bottom: 96px;
  }
  /* Dokunma adımı ~29px'ti (21px bağlantı + 8px aralık). */
  [data-tema="tablo"] .tb-footer-grid a {
    display: block;
    padding: 8px 0;
    margin: 0;
  }
  /* Telefonda 10-10,5px mono etiketler okunmuyordu (mobil denetim 25.09.2026). */
  [data-tema="tablo"] .tb-label,
  [data-tema="tablo"] .tb-fiyat-rozet,
  [data-tema="tablo"] .tb-hero-rozet li,
  [data-tema="tablo"] .tb-bar .menu-panel h4 {
    font-size: 11px;
  }
}

/* --- Modül iniş kahramanı: sol başlık + CTA, sağ "Hesap Esasları" tablosu. */
[data-tema="tablo"] .tb-modul-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--tb-ink);
}
[data-tema="tablo"] .tb-modul-hero h1 {
  margin: 0 0 16px;
  line-height: 1;
}
[data-tema="tablo"] .tb-modul-hero .ozet {
  color: var(--text-secondary);
  max-width: 60ch;
}
[data-tema="tablo"] .tb-modul-hero .lnd-cta {
  background: var(--bg-card);
  border: 1px solid var(--tb-ink);
  margin: 24px 0 0;
}
[data-tema="tablo"] .tb-hesap-kart .tb-table td:first-child {
  color: var(--text-secondary);
}
[data-tema="tablo"] .tb-hesap-kart .tb-table td.num {
  color: var(--tb-ink);
  font-weight: 500;
}
[data-tema="tablo"] .tb-hesap-kart .tb-table tr:last-child td {
  border-bottom: 0;
}
@media (max-width: 900px) {
  [data-tema="tablo"] .tb-modul-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* 5. bölümdeki "geniş tablo = block" kuralı iki satırlık özeti daraltmasın. */
  [data-tema="tablo"] .tb-hesap-kart .tb-table {
    display: table;
  }
}

/* ============ 7. ANA SAYFA (Task 5: _karsilama + _fiyat_paketler) ============
   templates/tema/tablo/_karsilama.html, _fiyat_paketler.html ve
   store/fiyatlar.html'in kendi bölümleri (adet tabloları .tbl-*, .steps,
   .note, "Ücretsiz araçlar") — son üçü YALNIZ CSS ile yeniden biçimlenir. */

/* Ekran okuyucuya özel metin. */
[data-tema="tablo"] .tb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Kahraman: iki sütun, arada 1px siyah dikey çizgi. */
[data-tema="tablo"] .tb-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--tb-ink);
  margin-top: 28px;
}
/* Kahraman, şerit ve fiyat bölümü store/fiyatlar.html'in .section'ı gibi yan
   iç boşluksuz: kenarlar alttaki bölümlerle aynı çizgiye oturur; dar
   ekranda 24px kenar payı genişlikten düşülür. */
[data-tema="tablo"] .tb-hero,
[data-tema="tablo"] .tb-serit-sar,
[data-tema="tablo"] .tb-fiyat {
  padding-left: 0;
  padding-right: 0;
  width: calc(100% - 48px);
}
[data-tema="tablo"] .tb-hero-sol {
  padding: 44px 40px 40px 32px;
  min-width: 0;
}
[data-tema="tablo"] .tb-hero .tb-label {
  margin-bottom: 18px;
}
[data-tema="tablo"] .tb-h1 {
  font-size: clamp(40px, 5vw, 66px);
  line-height: .98;
  letter-spacing: -.015em;
  margin: 0 0 20px;
  color: var(--tb-ink);
}
[data-tema="tablo"] .tb-lead {
  font-size: 16.5px;
  color: var(--text-secondary);
  max-width: 46ch;
  margin: 0 0 26px;
}
/* Kahraman rozetleri (mevcut'un .pills karşılığı): ince çerçeveli mono etiketler. */
[data-tema="tablo"] .tb-hero-rozet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
[data-tema="tablo"] .tb-hero-rozet li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tb-ink-2);
  border: 1px solid var(--tb-field-border);
  padding: 5px 9px;
}
/* Hediye kutusu: ince siyah çerçeve, açık bordo zemin. */
[data-tema="tablo"] .tb-hediye {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  border: 1px solid var(--tb-ink);
  background: var(--accent-glow);
  padding: 14px 16px;
  margin-bottom: 22px;
}
[data-tema="tablo"] .tb-hediye-rozet {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--accent);
  align-self: baseline;
}
[data-tema="tablo"] .tb-hediye-metin {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 220px;
}
[data-tema="tablo"] .tb-hediye-metin b {
  font-size: 15px;
  color: var(--tb-ink);
}
[data-tema="tablo"] .tb-hediye-metin .tb-vurgu {
  color: var(--accent);
}
[data-tema="tablo"] .tb-hediye-metin span:not(.tb-vurgu) {
  font-size: 13px;
  color: var(--text-secondary);
}
[data-tema="tablo"] .tb-slogan {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .tb-slogan b {
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--tb-ink);
}
[data-tema="tablo"] .tb-slogan span {
  font-size: 13.5px;
  color: var(--text-secondary);
}
[data-tema="tablo"] .tb-mutalaa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
[data-tema="tablo"] .tb-mutalaa-metin {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 220px;
}
[data-tema="tablo"] .tb-mutalaa-metin b {
  font-size: 14.5px;
  color: var(--tb-ink);
}
[data-tema="tablo"] .tb-mutalaa-metin span {
  font-size: 13px;
  color: var(--text-secondary);
}
[data-tema="tablo"] .tb-hediye .tb-btn,
[data-tema="tablo"] .tb-mutalaa .tb-btn {
  white-space: nowrap;
}

/* --- Kahramanın sağ sütunu: hediye, slogan, mütalaa (1px dikey çizgiyle
   ayrık). Tasarımdaki "ÖRNEK HESAP" tablosu owner kararıyla (19.09.2026)
   kaldırıldı; sütun çağrıları taşır. */
[data-tema="tablo"] .tb-hero-sag {
  border-left: 1px solid var(--tb-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 32px 40px;
  min-width: 0;
}
[data-tema="tablo"] .tb-hero-sag > :first-child {
  margin-top: 0;
}
[data-tema="tablo"] .tb-hero-sag > :last-child {
  margin-bottom: 0;
}

/* --- 4 sütunlu hesaplama şeridi (1px koyu ayraç). */
[data-tema="tablo"] .tb-serit-sar {
  margin-top: 0;
}
[data-tema="tablo"] .tb-serit {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 0;
}
[data-tema="tablo"] .tb-serit > a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  color: var(--tb-ink);
  text-decoration: none;
}
[data-tema="tablo"] .tb-serit > a:hover {
  background: var(--bg-secondary);
  color: var(--tb-ink);
}
[data-tema="tablo"] .tb-serit > a:hover b {
  color: var(--accent);
}
[data-tema="tablo"] .tb-serit b {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
}
[data-tema="tablo"] .tb-serit > a > span:last-child {
  font-size: 13px;
  color: var(--text-secondary);
}

/* --- Kredi fiyatları: kademe hücreleri 1px koyu ayraçlı grid. */
[data-tema="tablo"] .tb-fiyat {
  padding-top: 56px;
}
@media (max-width: 1188px) {
  /* .section (store/fiyatlar.html) dar ekranda kenara yapışır; tablo
     temasında ona da aynı 24px kenar payı verilir. */
  [data-tema="tablo"] .section {
    width: calc(100% - 48px);
  }
}
[data-tema="tablo"] .tb-fiyat-uyari {
  max-width: none;
  margin-bottom: 22px;
}
[data-tema="tablo"] .tb-fiyat-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 24px;
  margin-bottom: 22px;
}
[data-tema="tablo"] .tb-fiyat-bas h2 {
  margin: 6px 0 0;
  line-height: 1;
}
[data-tema="tablo"] .tb-fiyat-bas p.tb-label {
  max-width: 46ch;
  margin: 0;
  line-height: 1.6;
}
[data-tema="tablo"] .tb-fiyat-kartlar {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
[data-tema="tablo"] .tb-fiyat-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 24px 26px;
}
/* "EN POPÜLER" (mevcut .ver-card.featured::before karşılığı): üst kenara
   yaslı bordo sekme. */
[data-tema="tablo"] .tb-fiyat-rozet {
  position: absolute;
  top: 0;
  left: 24px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  padding: 3px 8px;
}
[data-tema="tablo"] .tb-fiyat-aciklama {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: -4px 0 16px;
}
[data-tema="tablo"] .tb-fiyat-ust {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
[data-tema="tablo"] .tb-fiyat-ad {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--tb-ink);
}
[data-tema="tablo"] .tb-fiyat-tutar {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--tb-rule-soft);
}
[data-tema="tablo"] .tb-fiyat-tutar b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--tb-ink);
  font-variant-numeric: tabular-nums;
}
[data-tema="tablo"] .tb-fiyat-tutar span {
  font-size: 13px;
  color: var(--text-muted);
}
[data-tema="tablo"] .tb-fiyat-tutar .tb-fiyat-sure {
  margin-left: auto;
  font-size: 10px;
}
[data-tema="tablo"] .tb-fiyat-ozellik {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
[data-tema="tablo"] .tb-fiyat-ozellik li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
}
[data-tema="tablo"] .tb-fiyat-ozellik li.yok {
  color: var(--text-muted);
}
[data-tema="tablo"] .tb-isaret {
  font-family: var(--font-mono);
  width: 1.2em;
  flex: none;
  color: var(--tb-ink);
}
[data-tema="tablo"] .tb-fiyat-ozellik li.yok .tb-isaret {
  color: var(--tb-ink-5);
}
[data-tema="tablo"] .tb-btn--blok {
  display: block;
  width: 100%;
  text-align: center;
}
[data-tema="tablo"] .tb-btn--kapali,
[data-tema="tablo"] .tb-btn--kapali:hover {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* --- store/fiyatlar.html: adet indirim tabloları (yalnız CSS). */
[data-tema="tablo"] .tbl-baslik {
  text-align: left;
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 56px 0 8px;
}
[data-tema="tablo"] .tbl-alt {
  text-align: left;
  margin: 0 0 22px;
  max-width: 70ch;
}
[data-tema="tablo"] .tbl-grid {
  gap: 1px;
  max-width: none;
  background: var(--tb-ink);
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .tbl-kart {
  border: 0;
  background: var(--bg-card);
}
[data-tema="tablo"] .tbl-kart-bas {
  background: var(--tb-ink);
  border-bottom: 0;
}
[data-tema="tablo"] .tbl-kart-bas .tk-ad,
[data-tema="tablo"] .tbl-kart-bas.rapor .tk-ad {
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #ffffff;
}
[data-tema="tablo"] .tbl-kart-bas.rapor {
  background: var(--tb-ink);
}
/* Pro kartı: yan çubuk yerine koyu bantta bordo-açık mono süre etiketi. */
[data-tema="tablo"] .tbl-kart-bas.rapor .tk-sure {
  color: var(--tb-accent-light);
}
[data-tema="tablo"] .tbl-kart-bas .tk-sure {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tb-ink-5);
}
[data-tema="tablo"] .fiyat-tablo {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
[data-tema="tablo"] .fiyat-tablo th,
[data-tema="tablo"] .fiyat-tablo td {
  padding: 8px 16px;
}
[data-tema="tablo"] .fiyat-tablo thead th {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .08em;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .fiyat-tablo tbody td {
  border-bottom: 1px solid var(--tb-rule-soft);
}
[data-tema="tablo"] .fiyat-tablo tbody tr:nth-child(even) {
  background: transparent;
}
[data-tema="tablo"] .fiyat-tablo tbody tr:hover {
  background: var(--bg-secondary);
}
[data-tema="tablo"] .fiyat-tablo td.adet {
  font-family: var(--font-mono);
}
[data-tema="tablo"] .tbl-satin-al {
  border-top: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .tbl-satin-al .ver-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
}
[data-tema="tablo"] .tbl-satin-al .ver-select {
  border-color: var(--tb-field-border);
}
[data-tema="tablo"] .tbl-satin-al .tbl-toplam,
[data-tema="tablo"] .vp-total {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* --- store/fiyatlar.html: bölüm başlıkları, dört adım, notlar. */
[data-tema="tablo"] .section h2 {
  text-align: left;
  font-size: clamp(24px, 2.6vw, 32px);
}
[data-tema="tablo"] .section .sub {
  text-align: left;
  margin-bottom: 22px;
}
/* "Aktüer hesaplama programı" kartı: başlık sola yaslı, kart da onunla hizalı. */
[data-tema="tablo"] .pm-kart {
  margin-left: 0;
}
[data-tema="tablo"] .steps {
  gap: 1px;
  background: var(--tb-ink);
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .steps > .step {
  border: 0;
  background: var(--bg-card);
  padding: 22px 22px 24px;
}
[data-tema="tablo"] .step .num {
  width: 34px;
  height: 34px;
  background: var(--tb-ink);
  color: #ffffff;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
}
[data-tema="tablo"] .step h3 {
  font-size: 18px;
}
[data-tema="tablo"] .note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  line-height: 1.7;
  text-align: left;
}

/* --- "Ücretsiz araçlar": koyu bant (bağlantı kartlı .steps yalnız burada). */
[data-tema="tablo"] .section:has(> .steps > a.step) {
  background: var(--tb-ink);
  color: var(--border);
  padding: 40px 24px;
  margin-top: 56px;
}
[data-tema="tablo"] .section:has(> .steps > a.step) h2 {
  color: #ffffff;
}
[data-tema="tablo"] .section:has(> .steps > a.step) .sub {
  color: var(--tb-ink-5);
}
[data-tema="tablo"] .steps:has(> a.step) {
  background: var(--tb-dark-rule);
  border-color: var(--tb-dark-rule);
}
[data-tema="tablo"] .steps > a.step {
  background: var(--tb-dark-2);
  color: #ffffff;
}
[data-tema="tablo"] .steps > a.step h3 {
  color: #ffffff;
}
[data-tema="tablo"] .steps > a.step p {
  color: var(--border);
}
[data-tema="tablo"] .steps > a.step .note {
  color: var(--tb-accent-light);
}
[data-tema="tablo"] .steps > a.step:hover {
  background: var(--tb-ink-2);
}

@media (max-width: 900px) {
  [data-tema="tablo"] .tb-hero {
    grid-template-columns: 1fr;
  }
  [data-tema="tablo"] .tb-hero-sol {
    padding: 28px 20px 24px;
  }
  /* Dikey çizgi yatay çizgiye döner. */
  [data-tema="tablo"] .tb-hero-sag {
    border-left: 0;
    border-top: 1px solid var(--tb-ink);
    padding: 24px 20px 28px;
  }
  [data-tema="tablo"] .tb-serit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  [data-tema="tablo"] .tb-serit {
    grid-template-columns: 1fr;
  }
}

/* ================= 8. UYGULAMA KABUĞU (_uygulama_kabugu) ================= */

/* 224px KOYU sol menü. Genişlik/konum dışında base.html'in .sidebar
   kuralları (fixed, 100vh, overflow-y:auto, ≤768px off-canvas
   translateX + .open) AYNEN geçerlidir — JS sözleşmesi değişmez. */
[data-tema="tablo"] .sidebar.tb-yan {
  width: 224px;
  padding: 0 0 calc(22px + env(safe-area-inset-bottom, 0px));
  background: var(--tb-ink);
  color: var(--tb-ink-5);
  border-right: 0;
}
[data-tema="tablo"] .main-content.tb-ana {
  margin-left: 224px;
  background: var(--bg-primary);
}

/* Marka satırı. */
[data-tema="tablo"] .tb-yan-marka {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--tb-dark-rule);
  text-decoration: none;
}
[data-tema="tablo"] .tb-yan-logo {
  width: 28px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
[data-tema="tablo"] .tb-yan-ad {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: #ffffff;
}
[data-tema="tablo"] .tb-yan-marka:hover .tb-yan-ad {
  color: #ffffff;
}

/* Menü bağlantıları: condensed UPPERCASE, yan çubuk YOK (border-left: 0);
   aktif = tam satır bordo zemin + beyaz yazı. Menü akışta kalır (flex:1 yok) → kredi kutusu hemen
   altına oturur, altbilgi en alta itilir. */
[data-tema="tablo"] .tb-yan .sidebar-nav {
  margin-top: 0;
  flex: 0 0 auto;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}
[data-tema="tablo"] .tb-yan .sidebar-nav a {
  gap: 10px;
  margin: 0;
  padding: 9px 18px;
  border-left: 0;
  background: transparent;
  color: var(--tb-ink-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: none;
}
[data-tema="tablo"] .tb-yan .sidebar-nav a i {
  width: 16px;
  font-size: 13px;
}
[data-tema="tablo"] .tb-yan .sidebar-nav a:hover {
  background: var(--tb-dark-2);
  color: #ffffff;
}
/* Aktif menü öğesi: yan çubuk yok — tam satır bordo zemin, beyaz yazı. */
[data-tema="tablo"] .tb-yan .sidebar-nav a.active,
[data-tema="tablo"] .tb-yan .sidebar-nav a.active:hover {
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
}
[data-tema="tablo"] .tb-yan .sidebar-nav .nav-divider {
  height: 1px;
  margin: 10px 18px;
  background: var(--tb-dark-rule);
}
[data-tema="tablo"] .tb-yan .sidebar-nav .nav-kategori {
  padding: 10px 18px 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--text-muted);
}

/* KREDİ BAKİYESİ kutusu — gerçek bakiye (rapor = Pro, detay = Standart). */
[data-tema="tablo"] .tb-kredi {
  margin: 14px 18px 0;
  padding: 13px;
  border: 1px solid var(--tb-dark-rule);
  background: var(--tb-dark-2);
}
[data-tema="tablo"] .tb-kredi .tb-label {
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
[data-tema="tablo"] .tb-kredi-satir {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
  padding: 6px 0;
  color: var(--border);
}
[data-tema="tablo"] .tb-kredi-satir + .tb-kredi-satir {
  border-top: 1px solid var(--tb-dark-rule);
}
[data-tema="tablo"] .tb-kredi-satir b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}
[data-tema="tablo"] .tb-btn--ince {
  display: block;
  text-align: center;
  margin-top: 11px;
  padding: 8px;
  font-size: 13px;
}

/* Altbilgi: kullanıcı + Çıkış (tema düğmesi yok — yalnız açık kip). */
[data-tema="tablo"] .tb-yan .sidebar-footer.tb-yan-alt {
  margin: auto 0 0;
  padding: 14px 18px 0;
  border-top: 1px solid var(--tb-dark-rule);
}
[data-tema="tablo"] .tb-yan-alt .user-info {
  padding: 0 0 10px;
}
[data-tema="tablo"] .tb-yan-alt .user-avatar {
  background: var(--tb-dark-2);
  border: 1px solid var(--tb-dark-rule);
  color: #ffffff;
  font-family: var(--font-display);
}
[data-tema="tablo"] .tb-yan-alt .user-name {
  color: #ffffff;
}
[data-tema="tablo"] .tb-yan-alt .user-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tb-ink-5);
}
[data-tema="tablo"] .tb-yan-cikis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--tb-dark-rule);
  color: var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
[data-tema="tablo"] .tb-yan-cikis:hover {
  background: var(--tb-dark-2);
  color: #ffffff;
}

/* Beyaz üst bar, altı 2px siyah — ana alanın dolgusunu taşarak kenardan
   kenara uzanır (main-content dolgusu değişmez → sayfa içerikleri aynı). */
[data-tema="tablo"] .top-bar.tb-ust-bar {
  margin: -24px -32px 28px;
  padding: 16px 32px;
  background: var(--bg-card);
  border-bottom: 2px solid var(--tb-ink);
  gap: 16px;
}
[data-tema="tablo"] .tb-ust-bar-sol {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
[data-tema="tablo"] .tb-ust-bar h2 {
  font-size: 26px;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--tb-ink);
}
[data-tema="tablo"] .tb-ust-bar .hamburger {
  color: var(--tb-ink);
}

/* base.html ≤1024px 220px'e daraltır — tablo 224px'te sabit kalır;
   ≤768px'te base.html'in off-canvas kuralı (translateX + .open) işler. */
@media (max-width: 1024px) {
  [data-tema="tablo"] .sidebar.tb-yan { width: 224px; }
  [data-tema="tablo"] .main-content.tb-ana { margin-left: 224px; }
}
@media (max-width: 768px) {
  [data-tema="tablo"] .sidebar.tb-yan { width: 280px; }
  [data-tema="tablo"] .main-content.tb-ana { margin-left: 0; }
  [data-tema="tablo"] .top-bar.tb-ust-bar {
    margin: -16px -16px 16px;
    padding: 12px 16px;
  }
  [data-tema="tablo"] .tb-ust-bar h2 { font-size: 20px; }
}

/* ============ 9. SAYFA GEÇİŞİ (Görev 7: mevcut sayfaların bileşenleri) ============
   Şablonlara dokunmadan mevcut sayfaların (uygulama formları, panel, hesap,
   mağaza ayarları, giriş, rehber, SSS, faiz, mütalaa, kayıt) bileşenlerini
   tablo kimliğine taşır. Satır içi (style="…") renkler yalnız öznitelik
   seçicisi + !important ile ezilebilir — bu bölümdeki !important'ların
   tamamı o nedenledir. */

/* --- Yerel denetimler (onay kutusu / radyo) bordo. */
[data-tema="tablo"] input[type="checkbox"],
[data-tema="tablo"] input[type="radio"] {
  accent-color: var(--accent);
}

/* --- Sayfa içi durum renkleri: yeşil/mavi/sarı palet dışı → mürekkep / bordo. */
/* Nötr / olumlu (yeşil, mavi, gök mavisi) → mürekkep; hata / eksi / uyarı
   (kırmızı, e74c3c tonu, amber) → bordo. Çerçeve rengi YALNIZ satır içi
   stilinde "border" geçen öğelerde değişir — hücrelerin (td) satır çizgisi
   bozulmasın. */
[data-tema="tablo"] [style*="22c55e"],
[data-tema="tablo"] [style*="16a34a"],
[data-tema="tablo"] [style*="3b82f6"],
[data-tema="tablo"] [style*="0ea5e9"] {
  color: var(--tb-ink) !important;
}
[data-tema="tablo"] [style*="ef4444"],
[data-tema="tablo"] [style*="dc2626"],
[data-tema="tablo"] [style*="e74c3c"],
[data-tema="tablo"] [style*="f59e0b"] {
  color: var(--accent) !important;
}
[data-tema="tablo"] [style*="border"][style*="22c55e"],
[data-tema="tablo"] [style*="border"][style*="16a34a"],
[data-tema="tablo"] [style*="border"][style*="3b82f6"],
[data-tema="tablo"] [style*="border"][style*="0ea5e9"] {
  border-color: var(--tb-ink) !important;
}
[data-tema="tablo"] [style*="border"][style*="ef4444"],
[data-tema="tablo"] [style*="border"][style*="dc2626"],
[data-tema="tablo"] [style*="border"][style*="e74c3c"],
[data-tema="tablo"] [style*="border"][style*="f59e0b"] {
  border-color: var(--accent) !important;
}
/* Satır içi 3px renkli sol çubuk (garameten kartı: border-left:3px …) →
   yan çubuk yok, tam 1px mürekkep çerçeve. */
[data-tema="tablo"] [style*="border-left:3px"] {
  border: 1px solid var(--tb-ink) !important;
}
/* Sonuç özet kutuları: renkli çerçeve → mürekkep (nötr) / bordo (eksi, aşan,
   kusurlu net). Değerin rengi yukarıdaki kurallardan gelir. */
[data-tema="tablo"] .result-item[style*="border-color"] {
  border-color: var(--tb-ink) !important;
}
[data-tema="tablo"] .result-item[style*="border-color"][style*="ef4444"],
[data-tema="tablo"] .result-item[style*="border-color"][style*="e74c3c"],
[data-tema="tablo"] .result-item[style*="border-color"][style*="f59e0b"],
[data-tema="tablo"] .result-item[style*="border-color:var(--accent)"] {
  border-color: var(--accent) !important;
}
/* Satır içi rgba renkli satır/kutu zeminleri → palet tonları. */
[data-tema="tablo"] [style*="rgba(239,68,68"],
[data-tema="tablo"] [style*="rgba(220,38,38"] {
  background: var(--accent-glow) !important;
}
[data-tema="tablo"] [style*="rgba(34,197,94"],
[data-tema="tablo"] [style*="rgba(255,193,7"],
[data-tema="tablo"] [style*="rgba(245,158,11"],
[data-tema="tablo"] [style*="rgba(201,164,76"] {
  background: var(--bg-secondary) !important;
}
[data-tema="tablo"] [style*="rgba(59,130,246"] {
  background: var(--tb-rule-soft) !important;
}
[data-tema="tablo"] .zorunlu {
  color: var(--accent) !important;
}

/* --- Form etiketleri: mono, küçük, aralıklı (maket .ap-field > span). */
[data-tema="tablo"] .form-group > label,
[data-tema="tablo"] .mt-alan > label,
[data-tema="tablo"] .ar-alan > label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* muted, 10-11px mono'da AA altında kalıyordu (mobil denetim 25.09.2026). */
  color: var(--text-secondary);
}
/* Telefonda 10-11px büyük harf mono etiket okunmuyordu; mütalaanın uzun soru
   cümleleri ("15. VARSA SGK'NIN BAĞLADIĞI…") büyük harfte iki satıra kırılıyordu. */
@media (max-width: 768px) {
  [data-tema="tablo"] .form-group > label,
  [data-tema="tablo"] .ar-alan > label {
    font-size: 12px;
    letter-spacing: .05em;
  }
  [data-tema="tablo"] .mt-alan > label {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }
}
/* Onay kutulu etiket bir alan başlığı değil, cümledir — gövde yazısı. */
[data-tema="tablo"] .form-group > label:has(input[type="checkbox"]),
[data-tema="tablo"] .form-group > label:has(input[type="radio"]) {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}
[data-tema="tablo"] .form-hint,
[data-tema="tablo"] .mt-ipucu {
  color: var(--text-muted);
}

/* --- Sayfaya özel alanlar (.mt-alan, .ar-alan, .input-wrap): .form-control gibi. */
[data-tema="tablo"] .mt-alan input,
[data-tema="tablo"] .mt-alan select,
[data-tema="tablo"] .mt-alan textarea,
[data-tema="tablo"] .ar-alan input,
[data-tema="tablo"] .ar-alan select,
[data-tema="tablo"] .input-wrap input,
[data-tema="tablo"] .mt-kod input {
  background: var(--bg-input);
  border: 1px solid var(--tb-field-border);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
[data-tema="tablo"] .mt-alan input:focus,
[data-tema="tablo"] .mt-alan select:focus,
[data-tema="tablo"] .mt-alan textarea:focus,
[data-tema="tablo"] .ar-alan input:focus,
[data-tema="tablo"] .ar-alan select:focus,
[data-tema="tablo"] .input-wrap input:focus {
  border-color: var(--accent);
  background: var(--bg-card);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Form bölümleri: beyaz yüzey; başlık condensed UPPERCASE mürekkep,
   ikon bordo (maketteki "01" numarası yerine), altında 1px çizgi. */
[data-tema="tablo"] .form-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
}
[data-tema="tablo"] .form-section-title,
[data-tema="tablo"] .result-title,
[data-tema="tablo"] .card-header,
[data-tema="tablo"] .mt-bolum {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tb-ink);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
[data-tema="tablo"] .form-section-title i,
[data-tema="tablo"] .result-title i,
[data-tema="tablo"] .card-header i {
  color: var(--accent);
  font-size: 13px;
}
/* Hak sahibi alt başlığı + "Kaldır". */
[data-tema="tablo"] .hs-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--tb-ink);
}
[data-tema="tablo"] .hs-remove {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* "+ Ekle" düğmeleri: maketteki kesik çerçeveli mürekkep düğme. */
[data-tema="tablo"] .hs-add-btn,
[data-tema="tablo"] [class*="add-btn"] {
  border: 1px dashed var(--tb-ink-5);
  background: transparent;
  color: var(--tb-ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
[data-tema="tablo"] .hs-add-btn:hover,
[data-tema="tablo"] [class*="add-btn"]:hover {
  border-color: var(--tb-ink);
  background: var(--bg-secondary);
  color: var(--tb-ink);
}

/* Uygulama içi h4 (ör. "Parola Değiştir") — başlık dili. Mono h4'ler
   (menü paneli, altbilgi sütun başlıkları) kendi kurallarını korur. */
[data-tema="tablo"] .main-content h4,
[data-tema="tablo"] .card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* --- Sekmeler: condensed UPPERCASE; aktif = bordo alt çizgi. */
[data-tema="tablo"] .tabs {
  border-bottom: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .tab-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom-width: 2px;
  margin-bottom: -1px;
}
[data-tema="tablo"] .tab-btn:hover {
  color: var(--tb-ink);
  background: var(--bg-secondary);
}
[data-tema="tablo"] .tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
[data-tema="tablo"] .tab-btn i {
  font-size: 12px;
}
/* Mütalaa sekmeleri ve giriş Bireysel/Kurumsal seçici. */
[data-tema="tablo"] .mt-sekme {
  gap: 0;
  border: 1px solid var(--tb-ink);
  display: inline-flex;
}
[data-tema="tablo"] .mt-sekme button,
[data-tema="tablo"] .hesap-sekme button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0;
  background: var(--bg-card);
  color: var(--text-secondary);
}
[data-tema="tablo"] .mt-sekme button + button {
  border-left: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .mt-sekme button.aktif,
[data-tema="tablo"] .hesap-sekme button.aktif {
  background: var(--tb-ink);
  color: #ffffff;
}
[data-tema="tablo"] .hesap-sekme {
  gap: 0;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--tb-ink);
}

/* --- Veri tabloları: 1px mürekkep çerçeve, mono başlık, yumuşak satır çizgisi. */
[data-tema="tablo"] .data-table {
  border: 1px solid var(--tb-ink);
  background: var(--bg-card);
}
[data-tema="tablo"] .data-table thead th {
  font-size: 9.5px;
  letter-spacing: .08em;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .data-table tbody td {
  border-bottom: 1px solid var(--tb-rule-soft);
}
[data-tema="tablo"] .data-table .money,
[data-tema="tablo"] .data-table td.num {
  font-family: var(--font-body);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Sonuç tablolarının TOPLAM satırı (destek.html/bedensel.html JS'i satır içi
   stil ile basar: arka plan + font-weight:700) → maketin toplam satırı. */
[data-tema="tablo"] .data-table tr[style*="font-weight:700"] td,
[data-tema="tablo"] .data-table tr[style*="font-weight: 700"] td,
[data-tema="tablo"] .data-table tr[style*="bg-secondary"][style*="font-weight:600"] td,
[data-tema="tablo"] .data-table tfoot td {
  background: var(--bg-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-top: 1px solid var(--tb-ink);
  border-bottom: 0;
}
[data-tema="tablo"] .data-table tr[style*="font-weight:700"] td.money,
[data-tema="tablo"] .data-table tr[style*="font-weight: 700"] td.money,
[data-tema="tablo"] .data-table tr[style*="bg-secondary"][style*="font-weight:600"] td.money,
[data-tema="tablo"] .data-table tfoot td.money {
  font-size: 17px;
  color: var(--accent);
  letter-spacing: 0;
}
/* Rapor No gibi mono kimlik bağlantıları bordo kalmasın — mürekkep. */
[data-tema="tablo"] .data-table td a:not(.btn) {
  color: var(--tb-ink);
  font-family: var(--font-mono);
  font-size: 12px;
}
[data-tema="tablo"] .data-table td a:not(.btn):hover {
  color: var(--accent);
}

/* --- Rozetler: renkli dolgu yok → ince çerçeveli mono etiket. */
[data-tema="tablo"] .badge,
[data-tema="tablo"] .rozet,
[data-tema="tablo"] .data-table td > span[style*="background"] {
  background: transparent !important;
  border: 1px solid currentColor;
  color: var(--text-secondary) !important;
  font-family: var(--font-mono);
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px !important;
}
[data-tema="tablo"] .badge.confirmed,
[data-tema="tablo"] .badge.on,
[data-tema="tablo"] .badge.badge-paid,
[data-tema="tablo"] .rozet.ok {
  color: var(--tb-ink) !important;
}
[data-tema="tablo"] .badge.rejected,
[data-tema="tablo"] .badge.badge-danger,
[data-tema="tablo"] .badge.badge-unpaid,
[data-tema="tablo"] .rozet.no {
  color: var(--accent) !important;
}

/* --- Panel sayaçları (.stat-card) → maketin KPI şeridi: renkli ikon rozeti
   yok, 1px mürekkep ayraç, mono etiket, condensed rakam. Kapsayıcı grid
   satır içi stil taşır (gap:16px) — :has ile yakalanıp ayraca çevrilir. */
[data-tema="tablo"] div:has(> .stat-card) {
  gap: 1px !important;
  background: var(--tb-ink);
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .stat-card {
  border: 0;
  padding: 14px 16px;
}
[data-tema="tablo"] .stat-card .stat-icon {
  display: none;
}
[data-tema="tablo"] .stat-card .stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
[data-tema="tablo"] .stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--tb-ink);
  font-variant-numeric: tabular-nums;
}

/* --- Sonuç özet kutuları (.result-item / .ds-item): 1px çerçeve, mono etiket,
   condensed rakam; toplam bordo. */
[data-tema="tablo"] .result-panel {
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .result-item,
[data-tema="tablo"] .ds-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
}
[data-tema="tablo"] .result-item .ri-label,
[data-tema="tablo"] .ds-item .ds-label {
  font-family: var(--font-mono);
  letter-spacing: .1em;
  color: var(--text-muted);
}
[data-tema="tablo"] .result-item .ri-value,
[data-tema="tablo"] .ds-item .ds-val {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
[data-tema="tablo"] .result-item .ri-value.total {
  font-size: 20px;
  color: var(--accent);
}

/* --- Uyarı / bilgi kutuları: tam 1px çerçeve (yan çubuk YALNIZ .tb-note'ta).
   Hata/uyarı = bordo çerçeve + açık bordo zemin; başarı/bilgi = mürekkep
   çerçeve + gri zemin. */
[data-tema="tablo"] .alert,
[data-tema="tablo"] .flash-msg,
[data-tema="tablo"] .error-msg,
[data-tema="tablo"] .mt-mesaj,
[data-tema="tablo"] .ar-hata {
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  color: var(--tb-ink-2);
}
[data-tema="tablo"] .alert.success,
[data-tema="tablo"] .flash-msg.success,
[data-tema="tablo"] .mt-mesaj.iyi,
[data-tema="tablo"] .alert.info {
  background: var(--bg-secondary);
  border-color: var(--tb-ink);
  color: var(--tb-ink);
}
[data-tema="tablo"] .mt-aciklama {
  border: 1px solid var(--tb-ink);
  background: var(--bg-card);
  color: var(--tb-ink-2);
}
[data-tema="tablo"] .mt-kod {
  border: 1px solid var(--accent);
  background: var(--accent-glow);
  color: var(--tb-ink-2);
}

/* --- Uyarı modalı (showAlert / showConfirm). */
[data-tema="tablo"] .alert-overlay,
[data-tema="tablo"] .giris-bg,
[data-tema="tablo"] .modal-bg {
  background: rgba(20,24,29,.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-tema="tablo"] .alert-modal,
[data-tema="tablo"] .giris-modal,
[data-tema="tablo"] .modal {
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .alert-modal .alert-ok-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
[data-tema="tablo"] .alert-modal .alert-ok-btn:hover {
  background: var(--accent-light);
  opacity: 1;
}
[data-tema="tablo"] .alert-modal .alert-ok-btn.secondary {
  background: transparent;
  color: var(--tb-ink);
  border-color: var(--tb-ink);
}
[data-tema="tablo"] .alert-modal .alert-ok-btn.secondary:hover {
  background: var(--bg-secondary);
}
[data-tema="tablo"] .giris-brand .g-logo {
  width: 40px;
  height: 40px;
  background: var(--accent);
  font-family: var(--font-display);
  font-size: 20px;
}
[data-tema="tablo"] .giris-foot a {
  color: var(--accent);
}

/* --- Bildirim (toast): mürekkep çerçeve, sol 3px şerit. */
/* Tam 1px çerçeve (yan çubuk yok); hata/uyarı çerçevesi bordo. */
[data-tema="tablo"] .toast,
[data-tema="tablo"] .toast.success {
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .toast.error,
[data-tema="tablo"] .toast.warning {
  border-color: var(--accent);
}

/* --- Yüzen WhatsApp düğmesi: marka yeşili palet dışı → mürekkep blok. */
[data-tema="tablo"] .wa-fab {
  background: var(--tb-ink);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
}
[data-tema="tablo"] .wa-fab:hover {
  background: var(--tb-ink-2);
  color: #ffffff;
  transform: none;
}

/* --- Bağımsız giriş sayfası (templates/login.html). */
[data-tema="tablo"] .login-brand .icon {
  width: 52px;
  height: 52px;
  background: var(--accent);
  font-family: var(--font-display);
  font-size: 26px;
}
[data-tema="tablo"] .login-brand h1 {
  letter-spacing: .02em;
}
[data-tema="tablo"] .login-card {
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .login-btn {
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
[data-tema="tablo"] .login-btn:hover {
  background: var(--accent-light);
  opacity: 1;
}
[data-tema="tablo"] .login-footer {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- Rehber yazısı: h1 altı 2px mürekkep, metin sütunu 66ch, koyu CTA bandı. */
[data-tema="tablo"] .rhb h1 {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--tb-ink);
  margin-bottom: 16px;
}
[data-tema="tablo"] .rhb .kirinti,
[data-tema="tablo"] .rhb .tar {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* muted (~4,1:1) küçük mono yazıda AA altında kalıyordu. */
  color: var(--text-secondary);
}
[data-tema="tablo"] .rhb .ozet,
[data-tema="tablo"] .rhb section p,
[data-tema="tablo"] .rhb section ul {
  max-width: 66ch;
}
[data-tema="tablo"] .rhb-tablo {
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .rhb-tablo th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .rhb-tablo td {
  border-bottom-color: var(--tb-rule-soft);
}
[data-tema="tablo"] .rhb .rhb-yazar {
  background: var(--bg-card);
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .rhb .rhb-yazar .ry-bas {
  background: var(--tb-ink);
  color: #ffffff;
  font-family: var(--font-display);
}
[data-tema="tablo"] .rhb .rhb-yazar .ry-etiket {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}
[data-tema="tablo"] .rhb-cta,
[data-tema="tablo"] .lnd-cta {
  background: var(--tb-ink);
  border: 0;
  color: var(--border);
  padding: 24px 26px;
}
[data-tema="tablo"] .rhb-cta a:not(.btn),
[data-tema="tablo"] .lnd-cta a:not(.btn) {
  color: #ffffff;
}
[data-tema="tablo"] .rhb-cta strong,
[data-tema="tablo"] .lnd-cta strong,
[data-tema="tablo"] .rhb-cta b,
[data-tema="tablo"] .lnd-cta b {
  color: #ffffff;
}
/* Modül kahramanındaki hediye kutusu (Görev 4) beyaz kalır — üstteki koyu
   bant kuralının yalnız rengini geri al (zemin/çerçeve 6. bölümde). */
[data-tema="tablo"] .tb-modul-hero .lnd-cta {
  color: var(--text-primary);
  padding: 22px 24px;
}
[data-tema="tablo"] .tb-modul-hero .lnd-cta strong,
[data-tema="tablo"] .tb-modul-hero .lnd-cta b {
  color: var(--tb-ink);
}

/* --- Araç / mütalaa / kayıt sayfaları: başlık üst boşluğu ve kutular. */
[data-tema="tablo"] main > .ar-kap,
[data-tema="tablo"] main > .mt-kap {
  padding-top: 36px;
}
[data-tema="tablo"] .ar-kap > h1,
[data-tema="tablo"] .mt-kap > h1 {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--tb-ink);
  margin-bottom: 18px;
}
[data-tema="tablo"] .ar-kutu {
  background: var(--bg-card);
  border: 1px solid var(--tb-ink);
}
[data-tema="tablo"] .ar-kutu .ad {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}
[data-tema="tablo"] .ar-kutu .deger {
  font-family: var(--font-display);
  color: var(--tb-ink);
}
[data-tema="tablo"] .mt-form {
  border: 1px solid var(--border);
}
[data-tema="tablo"] .mt-gonder {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- Dar telefon (≤560px): üst bar sığsın — logo + Giriş + Üye Ol + menü. */
@media (max-width: 560px) {
  [data-tema="tablo"] .tb-bar .wrap.nav-inner {
    padding-left: 14px;
    padding-right: 14px;
    gap: 8px;
  }
  [data-tema="tablo"] .tb-bar .brand {
    gap: 8px;
    min-width: 0;
  }
  [data-tema="tablo"] .tb-bar .brand .logo {
    width: 26px;
    height: 26px;
    font-size: 15px;
    flex: none;
  }
  [data-tema="tablo"] .tb-bar .brand .b-text {
    font-size: 16px;
  }
  [data-tema="tablo"] .tb-bar .nav-links {
    gap: 7px;
  }
  /* Dokunma hedefi ≥40px (Giriş/Üye Ol/menü 37-38px ve 5px aralıktı). */
  [data-tema="tablo"] .tb-bar .nav-links > a {
    white-space: nowrap;
    font-size: 12.5px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  [data-tema="tablo"] .tb-bar .menu-btn {
    width: 40px;
    height: 40px;
  }
  [data-tema="tablo"] .tb-bar .nav-links > a:not(.btn) {
    padding: 7px 8px;
  }
  [data-tema="tablo"] .tb-bar .nav-links > a.btn {
    padding: 8px 10px !important;
  }
}
@media (max-width: 360px) {
  [data-tema="tablo"] .tb-bar .brand .b-text {
    display: none;
  }
}
/* Koyu sol menü marka bağlantısı: tarayıcı varsayılan bağlantı mavisi kalmasın. */
[data-tema="tablo"] a.tb-yan-marka {
  color: #ffffff;
}
/* Dar ekranda .data-table blok + yatay kaydırmalıdır (5. bölüm); hücreler
   satır kırmasın ki "RPR-2026-0130" gibi kimlikler üç satıra bölünmesin. */
@media (max-width: 900px) {
  [data-tema="tablo"] .data-table th,
  [data-tema="tablo"] .data-table td {
    white-space: nowrap;
  }
}

/* Sözlük "Not" kutusu: 2px gri yan çizgi yerine tam 1px çerçeve. */
[data-tema="tablo"] .szl .not {
  border: 1px solid var(--border);
  padding: 10px 14px;
}