/* ═══════════════════════════════════════════════════════════
   GaleriVizyon — Görsel Dil Katmanı ("Vizyon" teması)
   YALNIZCA DEMO KOPYASI (port 3001). Canlıya uygulanmaz.

   styles.css'ten SONRA yüklenir; onu değiştirmez, üstüne biner.
   Temayı kapatmak = index.html'deki <link> satırını silmek.

   Kaynak: kullanıcının gönderdiği tek-dosya mockup.
   Yaklaşım: bileşenleri tek tek boyamak yerine, mevcut kodun
   zaten kullandığı token setlerini (--fo-*, --sm-*, --gk-*,
   --accent-*) yeni palete yeniden bağlamak. Böylece ekranların
   büyük kısmı otomatik uyum sağlar, işlev hiç kaybolmaz.
   ═══════════════════════════════════════════════════════════ */

/* ── Palet ──────────────────────────────────────────────── */
:root{
  --gv-page:#EFF1EE;
  --gv-card:#FFFFFF;
  --gv-edge:#DCE0DA;
  --gv-edge-strong:#C3C9C0;

  --gv-ink:#0E151C;          /* sidebar / koyu yüzey */
  --gv-ink-2:#16202A;        /* metin */
  --gv-ink-3:#1E2B37;        /* aktif menü zemini */
  --gv-muted:#6B7680;

  --gv-amber:#D98B14;        /* aksan: aktif ikon, KPI şeridi, odak */
  --gv-amber-deep:#C97C0C;   /* amber buton zemini */
  --gv-amber-soft:#FCF1DE;
  --gv-amber-line:#F0D9AC;
  --gv-amber-ink:#8A5804;

  --gv-red:#C4402F;   --gv-red-soft:#FBE9E6;   --gv-red-line:#F0C9C2;
  --gv-green:#3F7D4E; --gv-green-soft:#E6F1E8; --gv-green-line:#C3DECA;
  --gv-blue:#2F6D93;  --gv-blue-soft:#E5EFF5;  --gv-blue-line:#BFD8E6;

  --gv-steel-1:#D6DAD3;
  --gv-steel-2:#B9BEB6;

  --gv-radius:10px;
  --gv-shadow:0 1px 2px rgba(14,21,28,.06), 0 8px 24px rgba(14,21,28,.05);

  --gv-sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --gv-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Aksan sistemi amber'e bağlanır → --accent-light/-subtle türevleri
     otomatik olarak yumuşak amber tonlarına döner. */
  --accent-h:36; --accent-s:83%; --accent-l:42%;
  --accent-rgb:201,124,12;
}

[data-bs-theme="dark"]{
  --gv-page:#12181D;
  --gv-card:#18222C;
  --gv-edge:#26333F;
  --gv-edge-strong:#33424F;
  --gv-ink:#0A1015;
  --gv-ink-2:#D7DDE2;
  --gv-ink-3:#22303C;
  --gv-muted:#8894A0;
  --gv-amber:#E8A63A; --gv-amber-deep:#D98B14;
  --gv-amber-soft:#33280F; --gv-amber-line:#4A3A16; --gv-amber-ink:#E8C486;
  --gv-red:#E08A75;   --gv-red-soft:#3A211C;   --gv-red-line:#4E2C25;
  --gv-green:#7FBE8E; --gv-green-soft:#1D2E22; --gv-green-line:#2B4433;
  --gv-blue:#8FBBE0;  --gv-blue-soft:#1A2A36;  --gv-blue-line:#274052;
  --gv-shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 28px -14px rgba(0,0,0,.6);

  --tblr-body-bg:var(--gv-page);
  --bs-body-bg:var(--gv-page);
  --tblr-card-bg:var(--gv-card);
  --bs-card-bg:var(--gv-card);
  --tblr-border-color:var(--gv-edge);
  --bs-border-color:var(--gv-edge);
  --tblr-body-color:var(--gv-ink-2);
  --bs-body-color:var(--gv-ink-2);
}

/* ── Tipografi + zemin ──────────────────────────────────── */
body,
body.antialiased{
  font-family:var(--gv-sans);
  font-size:14px;
  line-height:1.5;
  background:var(--gv-page);
  color:var(--gv-ink-2);
  -webkit-font-smoothing:antialiased;
}
.page-wrapper{ background:var(--gv-page); }
.fo, .sm{ font-family:var(--gv-sans); }

/* Sayısal alanlar mono — mockup'taki tabular görünüm */
.fo .fo-num, .sm .sm-tutar, .sak-plaka,
.gv-mono, code, kbd, samp{ font-family:var(--gv-mono); }

h1,h2,h3,h4,h5{ letter-spacing:-.015em; }

/* ── Sol menü (sidebar) ─────────────────────────────────── */
/* header.navbar'ın zemini index.html'de inline (--accent) verildiği
   için burada !important şart. */
#main-page > header.navbar{
  background:var(--gv-ink) !important;
  border-right:1px solid rgba(255,255,255,.06);
}
#main-page > header.navbar .navbar-brand{
  border-bottom-color:rgba(255,255,255,.07) !important;
}
#main-page > header.navbar .navbar-brand .fs-4{
  font-size:15px !important; font-weight:600; letter-spacing:-.01em;
}
#main-page > header.navbar #main-nav .nav-link{
  color:#AEB9C2;
  font-size:13px;
  position:relative;
  transition:background .12s, color .12s;
}
#main-page > header.navbar #main-nav .nav-link .licon{ opacity:.75; }
#main-page > header.navbar #main-nav .nav-link:hover{
  background:rgba(255,255,255,.05); color:#E6EBEF;
}
#main-page > header.navbar #main-nav .nav-link.active{
  background:var(--gv-ink-3); color:#fff;
}
#main-page > header.navbar #main-nav .nav-link.active .licon{
  opacity:1; color:var(--gv-amber);
}
#main-page > header.navbar #main-nav .nav-link.active::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px;
  background:var(--gv-amber); border-radius:0 2px 2px 0;
}
#main-page > header.navbar .navbar-nav.order-md-last{
  border-top-color:rgba(255,255,255,.07) !important;
}
.global-search-box{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  border-radius:7px;
}
.global-search-box input:focus{ outline:none; }

/* ── Kartlar ────────────────────────────────────────────── */
.card{
  background:var(--gv-card);
  border:1px solid var(--gv-edge);
  border-radius:var(--gv-radius);
  box-shadow:var(--gv-shadow);
}
.card-header{
  background:transparent;
  border-bottom:1px solid var(--gv-edge);
  padding:14px 16px;
  min-height:0;
}
.card-title, h3.card-title{
  font-size:13px; font-weight:600; margin:0; letter-spacing:0;
}
#galerim .card, #customers .card, #tahsilatlar .card,
#expenses .card, #is-emirleri .card{
  border-radius:var(--gv-radius);
  box-shadow:var(--gv-shadow);
}

/* ── Tablolar ───────────────────────────────────────────── */
.table thead th,
.card-table thead th{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  font-weight:600; color:var(--gv-muted);
  background:color-mix(in srgb, var(--gv-page) 55%, var(--gv-card));
  border-bottom:1px solid var(--gv-edge);
}
.table td{ border-bottom-color:var(--gv-edge); font-size:13px; }
.table tbody tr:hover > td{
  background:color-mix(in srgb, var(--gv-page) 45%, var(--gv-card));
}

/* ── Butonlar ───────────────────────────────────────────── */
.btn{
  border-radius:7px;
  font-weight:500;
  border:1px solid var(--gv-edge-strong);
  background:var(--gv-card);
  color:var(--gv-ink-2);
}
.btn:hover{
  background:color-mix(in srgb, var(--gv-page) 60%, var(--gv-card));
  border-color:var(--gv-muted);
  color:var(--gv-ink-2);
}
/* Birincil aksiyon = koyu mürekkep (mockup'taki .btn) */
.btn-primary{
  background:var(--gv-ink) !important;
  border-color:var(--gv-ink) !important;
  color:#fff !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background:var(--gv-ink-3) !important;
  border-color:var(--gv-ink-3) !important;
}
/* Öne çıkan CTA = amber (mockup'taki .btn-amber) */
.btn-warning, .fo .fo-btn-accent, .sm .sm-btn-vurgu{
  background:var(--gv-amber-deep) !important;
  border-color:var(--gv-amber-deep) !important;
  color:#fff !important;
}
.btn-warning:hover, .fo .fo-btn-accent:hover, .sm .sm-btn-vurgu:hover{
  filter:brightness(1.06); color:#fff !important;
}
.btn-success{ background:var(--gv-green); border-color:var(--gv-green); color:#fff; }
.btn-danger { background:var(--gv-red);   border-color:var(--gv-red);   color:#fff; }
.btn-outline-primary{
  background:transparent; border-color:var(--gv-edge-strong); color:var(--gv-ink-2);
}
.btn-outline-primary:hover{
  background:var(--gv-ink); border-color:var(--gv-ink); color:#fff;
}
.btn-outline-danger{ background:transparent; border-color:var(--gv-red-line); color:var(--gv-red); }
.btn-outline-danger:hover{ background:var(--gv-red); border-color:var(--gv-red); color:#fff; }
.btn-outline-success{ background:transparent; border-color:var(--gv-green-line); color:var(--gv-green); }
.btn-outline-success:hover{ background:var(--gv-green); border-color:var(--gv-green); color:#fff; }
.btn-outline-info{ background:transparent; border-color:var(--gv-blue-line); color:var(--gv-blue); }
.btn-outline-info:hover{ background:var(--gv-blue); border-color:var(--gv-blue); color:#fff; }
.btn-outline-secondary, .btn-secondary{
  background:var(--gv-card); border-color:var(--gv-edge-strong); color:var(--gv-ink-2);
}
.btn-outline-light{ background:transparent; border-color:rgba(255,255,255,.3); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.45); color:#fff; }
/* Ghost = çerçevesiz; mockup'ta ikon/ikincil aksiyonlar böyle */
.btn-ghost-secondary, .btn-ghost-primary, .btn-ghost-success, .btn-ghost-info{
  background:transparent; border-color:transparent;
}
.btn-ghost-secondary{ color:var(--gv-muted); }
.btn-ghost-primary  { color:var(--gv-ink-2); }
.btn-ghost-success  { color:var(--gv-green); }
.btn-ghost-info     { color:var(--gv-blue); }
.btn-ghost-secondary:hover, .btn-ghost-primary:hover,
.btn-ghost-success:hover, .btn-ghost-info:hover{
  background:color-mix(in srgb, var(--gv-page) 60%, var(--gv-card));
  border-color:transparent;
}
.btn-sm{ padding:4px 10px; font-size:12px; border-radius:6px; }

/* Bağlantılar: aksan amber'in koyu tonu (beyaz üstünde okunur kontrast) */
a{ color:var(--gv-amber-ink); }
a:hover{ color:var(--gv-amber-deep); }
[data-bs-theme="dark"] a{ color:var(--gv-amber); }

/* ── Form alanları ──────────────────────────────────────── */
.form-control, .form-select{
  background-color:color-mix(in srgb, var(--gv-page) 55%, var(--gv-card));
  border:1px solid var(--gv-edge);
  border-radius:7px;
  color:var(--gv-ink-2);
}
.form-control:focus, .form-select:focus{
  background-color:var(--gv-card);
  border-color:var(--gv-amber);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gv-amber) 18%, transparent);
}
.form-label{ font-size:11.5px; color:var(--gv-muted); margin-bottom:4px; }

/* ── Rozetler → pill ────────────────────────────────────── */
.badge{
  font-size:11px; font-weight:500; padding:4px 10px; border-radius:20px;
  border:1px solid transparent;
}
.badge.bg-green-lt,  .badge.bg-success-lt{ background:var(--gv-green-soft)!important; color:var(--gv-green)!important; border-color:var(--gv-green-line); }
.badge.bg-red-lt,    .badge.bg-danger-lt { background:var(--gv-red-soft)!important;   color:var(--gv-red)!important;   border-color:var(--gv-red-line); }
.badge.bg-yellow-lt, .badge.bg-orange-lt,
.badge.bg-warning-lt{ background:var(--gv-amber-soft)!important; color:var(--gv-amber-ink)!important; border-color:var(--gv-amber-line); }
.badge.bg-blue-lt,   .badge.bg-azure-lt, .badge.bg-cyan-lt{ background:var(--gv-blue-soft)!important; color:var(--gv-blue)!important; border-color:var(--gv-blue-line); }
.badge.bg-secondary-lt, .badge.bg-muted-lt{ background:color-mix(in srgb, var(--gv-page) 70%, var(--gv-card))!important; color:var(--gv-muted)!important; border-color:var(--gv-edge-strong); }

/* ── Finansal Özet (.fo) token yeniden bağlama ──────────── */
.fo{
  --fo-bg:var(--gv-page); --fo-surface:var(--gv-card);
  --fo-surface-2:color-mix(in srgb, var(--gv-page) 70%, var(--gv-card));
  --fo-ink:var(--gv-ink-2); --fo-ink-2:#4A5560; --fo-ink-3:var(--gv-muted);
  --fo-line:var(--gv-edge); --fo-line-2:var(--gv-edge-strong);
  --fo-accent:var(--gv-ink); --fo-accent-soft:var(--gv-amber-soft); --fo-accent-ink:var(--gv-amber-ink);
  --fo-warn-bg:var(--gv-amber-soft);  --fo-warn-ink:var(--gv-amber-ink);
  --fo-danger-bg:var(--gv-red-soft);  --fo-danger-ink:var(--gv-red);
  --fo-ok-bg:var(--gv-green-soft);    --fo-ok-ink:var(--gv-green);
  --fo-blue-bg:var(--gv-blue-soft);   --fo-blue-ink:var(--gv-blue);
  --fo-purple-bg:var(--gv-blue-soft); --fo-purple-ink:var(--gv-blue);
  --fo-coral-bg:var(--gv-amber-soft); --fo-coral-ink:var(--gv-amber-ink);
  --fo-shadow:var(--gv-shadow);
  /* Mockup'ta serif başlık yok — sayısal vurgular mono */
  --fo-serif:var(--gv-mono);
}
[data-bs-theme="dark"] .fo{
  --fo-bg:var(--gv-page); --fo-surface:var(--gv-card);
  --fo-surface-2:var(--gv-ink-3);
  --fo-ink:var(--gv-ink-2); --fo-ink-2:#A7B2BC; --fo-ink-3:var(--gv-muted);
  --fo-line:var(--gv-edge); --fo-line-2:var(--gv-edge-strong);
  --fo-accent:var(--gv-amber); --fo-accent-soft:var(--gv-amber-soft); --fo-accent-ink:var(--gv-amber-ink);
  --fo-warn-bg:var(--gv-amber-soft);  --fo-warn-ink:var(--gv-amber-ink);
  --fo-danger-bg:var(--gv-red-soft);  --fo-danger-ink:var(--gv-red);
  --fo-ok-bg:var(--gv-green-soft);    --fo-ok-ink:var(--gv-green);
  --fo-blue-bg:var(--gv-blue-soft);   --fo-blue-ink:var(--gv-blue);
  --fo-purple-bg:var(--gv-blue-soft); --fo-purple-ink:var(--gv-blue);
  --fo-coral-bg:var(--gv-amber-soft); --fo-coral-ink:var(--gv-amber-ink);
}
.fo h2.fo-sec{ font-family:var(--gv-sans); font-size:21px; font-weight:600; }

/* REGRESYON DÜZELTMESİ (2026-08-09): --fo-serif'i mono'ya bağlayınca
   .fo-hero-num (36px) kartı taşırdı — "1.063.520,00 ₺" kesiliyor, ₺ alt
   satıra düşüyordu. Mono, sans'a göre karakter başına belirgin daha geniş.
   Çözüm: hero sayılarda boyutu kapsayıcıya göre küçült ve taşmayı engelle. */
.fo .fo-hero-num{
  font-weight:600;
  letter-spacing:-.03em;
  font-size:clamp(19px, 2.1vw, 27px);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
/* "1.4 araç/ay" gibi ek etiketler sayıyla aynı satırda kalsın */
.fo .fo-hero-num span{ font-size:12px !important; font-family:var(--gv-sans); letter-spacing:0; }
.fo .fo-kpi-card .v{
  font-weight:600; letter-spacing:-.025em;
  font-size:clamp(17px, 1.7vw, 22px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
/* Hero kartlarında alt açıklama sayının altına sıkışmasın */
.fo .fo-grid4 .fo-card{ min-width:0; }
.fo .fo-grid4 .fo-hint{ margin-top:6px; }
.fo .fo-card, .fo .fo-tw{ border-radius:var(--gv-radius); }

/* KPI kartı: mockup'taki sol renk şeridi */
.fo .fo-kpi-card{
  border-radius:var(--gv-radius);
  position:relative; overflow:hidden;
  box-shadow:var(--gv-shadow);
}
.fo .fo-kpi-card::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--gv-edge-strong);
}
.fo .fo-kpi-card:has(.s.bad)::after { background:var(--gv-red); }
.fo .fo-kpi-card:has(.s.good)::after{ background:var(--gv-green); }
.fo .fo-kpi-card:hover{ transform:none; box-shadow:var(--gv-shadow); }
.fo .fo-kpi-card .l{ letter-spacing:.03em; }

/* Çip / sekme çubuğu */
.fo nav.fo-nav button.active,
.fo .fo-chips button.active{
  background:var(--gv-ink); border-color:var(--gv-ink); color:#fff;
}
.fo .fo-badge{ border:1px solid transparent; font-weight:500; }
.fo .fo-b-ok{ border-color:var(--gv-green-line); }
.fo .fo-b-danger{ border-color:var(--gv-red-line); }
.fo .fo-b-warn, .fo .fo-b-coral{ border-color:var(--gv-amber-line); }
.fo .fo-b-blue, .fo .fo-b-purple{ border-color:var(--gv-blue-line); }
.fo .fo-prog > div{ background:var(--gv-amber); }
.fo .ak-git{ color:var(--gv-amber-ink); }

/* ── Satış Merkezi (.sm) token yeniden bağlama ──────────── */
.sm{
  --sm-zemin:var(--gv-page); --sm-kart:var(--gv-card);
  --sm-murekkep:var(--gv-ink-2); --sm-ikincil:#4A5560; --sm-soluk:var(--gv-muted);
  --sm-cizgi:var(--gv-edge); --sm-cizgi-koyu:var(--gv-edge-strong);
  --sm-vurgu:var(--gv-ink); --sm-vurgu-koyu:var(--gv-ink-3); --sm-vurgu-zemin:var(--gv-amber-soft);
  --sm-kirmizi:var(--gv-red);   --sm-kirmizi-zemin:var(--gv-red-soft);
  --sm-amber:var(--gv-amber-ink); --sm-amber-zemin:var(--gv-amber-soft);
  --sm-yesil:var(--gv-green);   --sm-yesil-zemin:var(--gv-green-soft);
}
[data-bs-theme="dark"] .sm{
  --sm-zemin:var(--gv-page); --sm-kart:var(--gv-card);
  --sm-murekkep:var(--gv-ink-2); --sm-ikincil:#A7B2BC; --sm-soluk:var(--gv-muted);
  --sm-cizgi:var(--gv-edge); --sm-cizgi-koyu:var(--gv-edge-strong);
  --sm-vurgu:var(--gv-amber); --sm-vurgu-koyu:var(--gv-amber-deep); --sm-vurgu-zemin:var(--gv-amber-soft);
  --sm-kirmizi:var(--gv-red);   --sm-kirmizi-zemin:var(--gv-red-soft);
  --sm-amber:var(--gv-amber-ink); --sm-amber-zemin:var(--gv-amber-soft);
  --sm-yesil:var(--gv-green);   --sm-yesil-zemin:var(--gv-green-soft);
}

/* ── Koyu kart yüzeyleri (--gk-*) ───────────────────────── */
:root{
  --gk-surface:var(--gv-card);
  --gk-surface-2:color-mix(in srgb, var(--gv-page) 70%, var(--gv-card));
  --gk-line:var(--gv-edge);
  --gk-shadow:var(--gv-shadow);
}
[data-bs-theme="dark"]{
  --gk-surface:var(--gv-card);
  --gk-surface-2:var(--gv-ink-3);
  --gk-line:var(--gv-edge);
  --gk-shadow:var(--gv-shadow);
}

/* ── İmza öğe: plaka — satış kartlarında da tescil plakası görünümü
      (Araç Listesi'ndeki .v-plaka-no ile aynı dil, bkz. bölüm 3). ── */
.sak-plaka{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box;
  width:100px; height:21px;
  padding:0 5px 0 14px;
  background:#FFFFFF;
  border:1px solid #14181C;
  border-radius:3px;
  color:#14181C;
  font-family:var(--gv-sans);
  font-weight:700; font-size:11.5px; letter-spacing:.03em; line-height:1;
  opacity:1; overflow:hidden;
}
.sak-plaka::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:8.7px;
  background:linear-gradient(180deg,#2350C8,#14349A);
  border-right:1px solid #14181C;
}
.sak-plaka::after{
  content:"";
  position:absolute; left:1.1px; top:1.8px;   /* şeridin üstü (bkz. .v-plaka-no::after) */
  width:4.5px; height:4.5px; border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
}

/* ── İthalat menü / adım butonları ──────────────────────── */
.ithal-menu-btn.aktif{
  background:var(--gv-ink) !important; border-color:var(--gv-ink) !important; color:#fff;
}
.yolda-step.aktif{
  background:var(--gv-amber-deep); border-color:var(--gv-amber-deep); color:#fff;
}

/* ── Giriş ekranı ───────────────────────────────────────── */
.auth-overlay{
  background:radial-gradient(ellipse at top, #1E2B37 0%, #0A1015 100%) !important;
}
.auth-card{
  background:var(--gv-card);
  border:1px solid var(--gv-edge);
  border-radius:var(--gv-radius);
  box-shadow:0 20px 60px rgba(14,21,28,.35), 0 2px 8px rgba(14,21,28,.18);
}
.auth-title{
  color:var(--gv-ink-2); font-weight:600; font-size:1.2rem; letter-spacing:-.015em;
}
.auth-subtitle{
  color:var(--gv-muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
}
.auth-input{
  background:color-mix(in srgb, var(--gv-page) 55%, var(--gv-card));
  border-color:var(--gv-edge);
  border-radius:7px;
  font-size:14px;
  color:var(--gv-ink-2);
}
.auth-input:focus{ background:var(--gv-card); }
.auth-submit{
  background:var(--gv-ink); border-radius:7px; font-size:14px; font-weight:500;
}
.auth-submit:hover{ background:var(--gv-ink-3); }
.auth-error{
  background:var(--gv-red-soft); border-color:var(--gv-red-line); color:var(--gv-red);
  border-radius:7px;
}

/* ── Toast / bildirim ───────────────────────────────────── */
.galeri-toast{ border-radius:7px; }
.bildirim-dropdown, .user-menu-dropdown, .global-search-results{
  border-radius:var(--gv-radius); border-color:var(--gv-edge);
}

/* ═══════════════════════════════════════════════════════════
   2. GEÇİŞ — ekran ekran kapsama (2026-08-09)
   Token yeniden bağlama ekranların çoğunu getirdi; burası
   token kullanmayan, kendi rengini/kenarını sabitlemiş
   bileşenleri yeni dile çeker. Sınıf listesi index.html +
   app.js taranarak çıkarıldı.
   ═══════════════════════════════════════════════════════════ */

/* ── Modal ──────────────────────────────────────────────── */
.modal-content{
  background:var(--gv-card);
  border:1px solid var(--gv-edge);
  border-radius:var(--gv-radius);
  box-shadow:0 24px 64px rgba(14,21,28,.28);
}
.modal-header{
  border-bottom:1px solid var(--gv-edge);
  padding:14px 16px;
}
.modal-title{ font-size:14px; font-weight:600; letter-spacing:-.01em; }
.modal-footer{
  border-top:1px solid var(--gv-edge);
  padding:12px 16px;
  background:color-mix(in srgb, var(--gv-page) 45%, var(--gv-card));
}
.modal-backdrop.show{ opacity:.55; background:#0E151C; }
.btn-close{ opacity:.5; }
.btn-close:hover{ opacity:.9; }
[data-bs-theme="dark"] .btn-close{ filter:invert(1) grayscale(1); }

/* ── Uyarı kutuları ─────────────────────────────────────── */
.alert{
  border-radius:var(--gv-radius);
  border:1px solid transparent;
  font-size:13px;
  padding:11px 14px;
}
.alert-danger { background:var(--gv-red-soft);   color:var(--gv-red);       border-color:var(--gv-red-line); }
.alert-warning{ background:var(--gv-amber-soft); color:var(--gv-amber-ink); border-color:var(--gv-amber-line); }
.alert-success{ background:var(--gv-green-soft); color:var(--gv-green);     border-color:var(--gv-green-line); }
.alert-info   { background:var(--gv-blue-soft);  color:var(--gv-blue);      border-color:var(--gv-blue-line); }

/* ── Sekme çubukları (İthalat menüsü / Galerim sekmeleri) ─ */
.ithal-menu-btn{
  border-radius:20px;
  border:1px solid var(--gv-edge-strong);
  background:var(--gv-card);
  color:var(--gv-ink-2);
  font-size:12.5px; font-weight:500;
  padding:7px 14px;
}
.ithal-menu-btn:hover{
  background:color-mix(in srgb, var(--gv-page) 60%, var(--gv-card));
  border-color:var(--gv-muted);
}
.galerim-tabbar{ border-bottom-color:var(--gv-edge); }
/* DEMO KOPYASI: Galerim'in dört sekmesi de artık sol menüde
   (Galerim=Araç Listesi, Araç Alımı=Araç Ekle, Müşteriler, Atölye) —
   sekme çubuğu tamamen gizlendi; Müşteriler'e girince tepede "Araç Listesi /
   Araç Ekle" butonlarının asılı kalması bundandı.
   Butonlar DOM'da KALIYOR (silinmiyor): sol menü girişleri
   galerimSekmeGoster() üzerinden bunların 'aktif' durumunu kullanıyor. */
/* Galerim'in dört sekmesi de sol menüde (Galerim=Araç Listesi, Araç Ekle,
   Müşteriler, Atölye) — çubuk gizli. Butonlar DOM'da kalıyor: sol menü
   girişleri galerimSekmeGoster() üzerinden onların 'aktif' durumunu kullanıyor. */
#galerim-menu{ display:none; }

/* ── Satış tipi seçici ──────────────────────────────────── */
.sale-tip-btn{ color:var(--gv-muted); }
.sale-tip-btn:hover{ color:var(--gv-ink-2); }
.sale-tip-btn.aktif, .sale-tip-btn.active{
  color:var(--gv-ink-2); border-bottom-color:var(--gv-amber);
}
.sale-tip-ikon{ opacity:.8; }
.sale-tip-btn.aktif .sale-tip-ikon,
.sale-tip-btn.active .sale-tip-ikon{ opacity:1; color:var(--gv-amber); }
.sale-tip-ad{ font-size:12.5px; font-weight:500; }

/* DEMO KOPYASI (2026-08-09): Araç Satışı / İthal Araç Siparişi / Araç Alımı
   kutuları sol menüye taşındı — Satış Merkezi'nde görünmesinler.
   SİLİNMİYOR, gizleniyor: bu kutuların click dinleyicileri o üç akışın tek
   kaynağı; DOM'dan çıkarılırsa app.js açılışta $('#siparis-kutu-yerli')
   üzerinde patlar ve sol menü girişleri de tetikleyecek hedef bulamaz. */
/* Üç işlem kutusu sol menüye taşındı. SİLİNMİYOR, gizleniyor: o kutuların
   click dinleyicileri üç akışın tek kaynağı, DOM'dan çıkarsa menü girişleri
   tetikleyecek hedef bulamaz. */
#sales #sm-islem-grid{ display:none; }

/* ── Satış Merkezi işlem kartları ───────────────────────── */
.sm .sm-islem{
  border-radius:var(--gv-radius);
  box-shadow:var(--gv-shadow);
}
.sm .sm-islem:hover{
  transform:none;
  border-color:var(--gv-edge-strong);
  background:color-mix(in srgb, var(--gv-page) 35%, var(--gv-card));
}
.sm .sm-ikon{
  border-radius:8px;
  background:var(--gv-amber-soft);
  color:var(--gv-amber-ink);
}
.sm .sm-rozet{ font-weight:500; border:1px solid transparent; }

/* ── Araç seçim kartı + ilan/donanım çipleri ────────────── */
.sale-arac-kart{
  border:1px solid var(--gv-edge);
  border-radius:var(--gv-radius);
  background:var(--gv-card);
  box-shadow:var(--gv-shadow);
}
.sale-arac-kart:hover{
  transform:none;
  border-color:var(--gv-edge-strong);
}
.sale-arac-kart.secili, .sale-arac-kart.aktif, .sale-arac-kart.active{
  border-color:var(--gv-amber);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gv-amber) 16%, transparent);
}
.cb-chip{
  background:color-mix(in srgb, var(--gv-page) 55%, var(--gv-card));
  border:1px solid var(--gv-edge);
  border-radius:20px;
  color:var(--gv-ink-2);
  font-size:12px;
  padding:5px 11px;
}
.cb-chip:hover{ border-color:var(--gv-edge-strong); }
.cb-chip:has(input:checked){
  background:var(--gv-ink); border-color:var(--gv-ink); color:#fff;
}
.donanim-grup-baslik{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gv-muted); font-weight:600; margin-bottom:6px;
}

/* ── İthal araç kaynak kartları ─────────────────────────── */
.ithal-site-kart{
  border-radius:var(--gv-radius);
  background:var(--gv-card);
  border-color:var(--gv-edge);
  box-shadow:var(--gv-shadow);
}
.ithal-site-kart:hover{
  transform:none; border-color:var(--gv-amber); box-shadow:var(--gv-shadow);
}
.ithal-site-ad{ font-weight:600; font-size:13.5px; }
.ithal-site-not{ font-size:11.5px; color:var(--gv-muted); }
.ithal-site-ikon{ color:var(--gv-amber-ink); }

/* ── Sıralanabilir tablo başlığı ────────────────────────── */
.vehicle-sort-th{ cursor:pointer; user-select:none; }
.vehicle-sort-th:hover{ color:var(--gv-ink-2); }
.sort-ok{ color:var(--gv-amber); font-size:10px; margin-left:3px; }

/* ── Fotoğraf kutucukları ───────────────────────────────── */
.foto-item img{ border-radius:7px; border-color:var(--gv-edge); }
.foto-item:first-child::after{
  background:rgba(14,21,28,.82);
  border-radius:0 0 6px 6px;
  letter-spacing:.05em;
}

/* ── Ayarlar çekmecesi ──────────────────────────────────── */
.settings-section-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--gv-muted); font-weight:600;
}
.settings-nav-btn{ border-radius:7px; font-size:13px; }
.settings-nav-btn.active{ background:var(--gv-ink); color:#fff; }
.theme-btn, .font-option, .density-btn{
  border-radius:7px; border:1px solid var(--gv-edge); background:var(--gv-card);
}
.theme-btn.active, .font-option.active, .density-btn.active{
  border-color:var(--gv-amber) !important;
  background:var(--gv-amber-soft);
  color:var(--gv-amber-ink);
}

/* ── Küçük varyantlar ───────────────────────────────────── */
.form-control-sm, .form-select-sm{
  border-radius:6px; font-size:12.5px; padding:5px 9px;
}
.table-sm td, .table-sm th{ padding:7px 10px; }
.card-sm .card-body{ padding:12px 14px; }

/* ── Boş durum / yükleniyor / toast ─────────────────────── */
.empty{ color:var(--gv-muted); font-size:13px; }
.galeri-toast{ color:var(--gv-muted); font-size:12.5px; font-weight:500; }
.spinner-border{ color:var(--gv-amber); }

/* ── Açılır listeler (arama / bildirim / hesap) ─────────── */
.gs-sonuc{ border-bottom-color:var(--gv-edge); font-size:12.5px; }
.gs-sonuc:hover, .bildirim-oge:hover, .user-menu-item:hover{
  background:color-mix(in srgb, var(--gv-page) 60%, var(--gv-card));
}
.gs-grup-baslik{
  font-size:10px; letter-spacing:.08em; color:var(--gv-muted); opacity:1;
}
.bildirim-oge{ border-bottom-color:var(--gv-edge); font-size:12.5px; }
.bildirim-oge.okunmadi{ background:var(--gv-amber-soft); font-weight:500; }
.bildirim-badge{ background:var(--gv-red); font-weight:600; }
.bildirim-dropdown-head{ border-bottom-color:var(--gv-edge); font-size:12.5px; }
.bildirim-tumunu-oku{ color:var(--gv-amber-ink); font-size:11.5px; }

/* ── Kaydırma çubuğu (küçük ama her ekranda görünür) ────── */
*{ scrollbar-width:thin; scrollbar-color:var(--gv-edge-strong) transparent; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--gv-edge-strong); border-radius:99px;
  border:2px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--gv-muted); background-clip:content-box; }

/* ═══════════════════════════════════════════════════════════
   3. Araç Listesi — satır sadeleştirme + açılır ayrıntı paneli
   (2026-08-09, kullanıcı işaretlemesi). Liste "çip ızgarası"
   dilinde kalır; ayrıntı satırı ise düz bir panel olur —
   yoksa styles.css'teki `td{border-radius:999px}` kuralı
   paneli de hap şekline sokuyor.
   ═══════════════════════════════════════════════════════════ */

/* Fotoğraf ve Plaka AYRI sütun (2026-08-09). Hücre zeminleri satır
   kutusundan gelir (bkz. bölüm 4); burada yalnız iç yerleşim ayarlanır. */
#galerim-panel-liste .card-table tbody td.v-foto-td{ padding:6px 10px; }
#galerim-panel-liste .card-table tbody td.v-plaka-td{ padding:6px 10px; }
.v-foto{
  width:64px; height:46px;
  object-fit:cover; border-radius:8px;
  border:1px solid var(--gv-edge-strong);
  background:color-mix(in srgb, var(--gv-page) 70%, var(--gv-card));
  display:block; margin:0 auto;
}
/* Plaka — KKTC YENİ plakası, tüzük Cetvel 31 çizimine göre.
   KAYNAK: kullanıcının gönderdiği Cetvel 31 teknik çizimi (520×110 mm).
   NOT: Bir ara "mavi şerit KKTC'de yok" diye kaldırmıştım — YANLIŞTI; web
   araması eski İKİ HARFLİ sistemi (düz beyaz plaka) anlatan kaynaklara
   düşmüştü. Çizimdeki "TAA 001A" yazısı yeni KKTC formatıdır (AA 001 A;
   T = toplu taşıma), Türkiye formatı değil. Mavi şerit yerinde kalacak.

   Çizimden ölçek: şerit 45/520 ≈ %8,7 genişlik · karakter yüksekliği
   75-79/110 ≈ %70 · köşeler hafif yuvarlak · kenarda siyah baskı çerçevesi.
   Şeritteki mühür halkası ve kabartmalı imalatçı kayıt no bu ölçekte
   okunmaz; halka temsilen çizilir, kayıt no çizilmez. */
.v-plaka-no{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box;
  width:112px; height:24px;              /* ≈ 520×110 oranı (4,7:1) */
  padding:0 6px 0 16px;                  /* soldaki pay mavi şerit için */
  background:#FFFFFF;
  border:1px solid #14181C;              /* iç siyah çerçeve */
  border-radius:3px;
  color:#14181C;
  font-family:var(--gv-sans);
  font-weight:700;
  font-size:13px;                        /* ≈ plaka yüksekliğinin %70'i */
  letter-spacing:.03em;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  font-variant-numeric:lining-nums tabular-nums;
  box-shadow:0 1px 2px rgba(14,21,28,.16);
}
.v-plaka-no::before{                     /* mavi transparant serigrafi şerit */
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:9.7px;                           /* 112px'in ≈ %8,7'si */
  background:linear-gradient(180deg,#2350C8,#14349A);
  border-right:1px solid #14181C;
}
.v-plaka-no::after{                      /* serigrafi baskı mühür halkası */
  /* Çizimde halka şeridin ÜST kısmında; altta kabartmalı imalatçı kayıt no
     var (bu ölçekte çizilmiyor). Dikey ortalamak yanlıştı. */
  content:"";
  position:absolute; left:1.4px; top:2px;   /* şerit genişliğinde yatay ortalı */
  width:5px; height:5px; border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
}
/* Henüz plakası çıkmamış araçlar (yolda/gümrükte) — sahte plaka gösterme */
.v-plaka-yok{
  display:inline-block;
  font-size:11.5px; color:var(--gv-muted);
  background:color-mix(in srgb, var(--gv-page) 70%, var(--gv-card));
  border:1px dashed var(--gv-edge-strong); border-radius:20px;
  padding:4px 11px; white-space:nowrap;
}

/* Satır: tıklanabilir + açık durumu */
.v-satir{ cursor:pointer; }
.v-satir .v-ad{ font-weight:500; }
#galerim-panel-liste .card-table tbody tr.v-satir:hover > td{
  border-color:var(--gv-edge-strong);
}
#galerim-panel-liste .card-table tbody tr.v-satir.acik > td{
  border-color:var(--gv-amber-line);
  background:var(--gv-amber-soft);
}

/* Aç/kapa oku */
#galerim-panel-liste .card-table tbody td .v-ac-btn{
  border:1px solid var(--gv-edge-strong); border-radius:50%;
  background:var(--gv-card); color:var(--gv-muted);
  width:28px; height:28px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.v-ac-btn:hover{ color:var(--gv-ink-2); border-color:var(--gv-muted); }
.v-ac-ok{ width:14px; height:14px; transition:transform .15s ease; }
.v-ac-btn[aria-expanded="true"] .v-ac-ok{ transform:rotate(180deg); color:var(--gv-amber); }

/* Ayrıntı satırı: hap değil, düz panel */
#galerim-panel-liste .card-table tbody tr.v-detay-satir > td{
  border:1px solid var(--gv-amber-line);
  border-radius:var(--gv-radius);
  background:var(--gv-card);
  text-align:left;
  padding:16px 18px;
}
.v-detay{
  display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;
  justify-content:space-between;
}
.v-detay-sol{ flex:1 1 360px; min-width:0; display:flex; flex-direction:column; gap:12px; }

.v-cipler{ display:flex; flex-wrap:wrap; gap:6px; }
.v-cip{
  font-size:11.5px; font-weight:500; padding:3px 10px; border-radius:20px;
  background:color-mix(in srgb, var(--gv-page) 70%, var(--gv-card));
  border:1px solid var(--gv-edge); color:var(--gv-ink-2);
}
.v-kunye-baslik{
  font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gv-ink-2); font-weight:700; margin:0 0 7px;
  display:flex; align-items:center; gap:8px;
}
/* Başlığın sağına ince çizgi — bölümler kutu ızgarasında birbirine karışmasın */
.v-kunye-baslik::after{
  content:""; flex:1; height:1px; background:var(--gv-edge);
}

/* Künye/Finans/Satış satırları: her değer kendi kutusunda (2026-08-22).
   Önce düz etiket+değer ızgarasıydı; listenin geri kalanındaki çip diliyle
   aynı olsun diye kutulandı. */
.v-kunye{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:8px; margin:0;
}
.v-kunye > div{
  min-width:0;
  padding:7px 11px;
  background:color-mix(in srgb, var(--gv-page) 55%, var(--gv-card));
  border:1px solid var(--gv-edge);
  border-radius:var(--gv-radius);
  transition:border-color .12s;
}
.v-kunye > div:hover{ border-color:var(--gv-edge-strong); }
.v-kunye dt{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--gv-muted); font-weight:600; margin:0 0 3px;
}
.v-kunye dd{
  margin:0; font-size:13px; font-weight:500;
  font-family:var(--gv-mono); font-variant-numeric:tabular-nums;
  color:var(--gv-ink-2);
  overflow-wrap:anywhere; line-height:1.35;
}
/* Kalan gün rozeti kutunun içinde alt satıra düşsün, taşmasın */
.v-kunye dd .v-uyari{ margin:3px 0 0; display:inline-block; }

.v-tramer{
  font-size:12px; font-weight:500; align-self:flex-start;
  background:var(--gv-red-soft); color:var(--gv-red);
  border:1px solid var(--gv-red-line); border-radius:7px;
  padding:5px 10px;
}

.v-detay-aksiyon{
  display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start;
  flex:0 0 auto;
}
#galerim-panel-liste .v-detay-aksiyon .btn{
  border:1px solid var(--gv-edge-strong); border-radius:20px;
  background:var(--gv-card); color:var(--gv-ink-2);
  font-size:12px; padding:4px 11px;
  display:inline-flex; align-items:center; gap:5px;
}
#galerim-panel-liste .v-detay-aksiyon .btn:hover{
  background:color-mix(in srgb, var(--gv-page) 60%, var(--gv-card));
  border-color:var(--gv-muted);
}
.v-detay-aksiyon .licon{ width:14px; height:14px; }

@media (max-width:760px){
  .v-detay{ flex-direction:column; }
  .v-detay-aksiyon{ width:100%; }
}

/* ═══════════════════════════════════════════════════════════
   4. Araç Listesi — SATIR = TEK KUTU (2026-08-09)
   styles.css'te her `td` ayrı bir hap ("çip ızgarası"). Kullanıcı
   işaretlemesi: satırın tamamı tek çerçeve olsun. Yöntem: hücre
   çerçevelerinin sol/sağ kenarını sıfırla, sadece satırın ilk ve
   son hücresine dış kenar + köşe ver → hücreler birleşip tek
   kutu görünür. `border-spacing`in yatay bileşeni 0'a çekilmezse
   hücreler arasında boşluk kalır ve kutu bölünür.
   ═══════════════════════════════════════════════════════════ */
#galerim-panel-liste .card-table{
  border-collapse:separate;
  border-spacing:0 8px;   /* yatay 0 (kutu bütün), dikey 8px (satır arası) */
}

#galerim-panel-liste .card-table thead th,
#galerim-panel-liste .card-table tbody td{
  background:var(--gv-card);
  border:1px solid var(--gv-edge);
  border-left-width:0;
  border-right-width:0;
  border-radius:0;
  padding:9px 14px;
  vertical-align:middle;
}
/* Satırın uçları: dış kenar + yuvarlatma */
#galerim-panel-liste .card-table tr > *:first-child{
  border-left-width:1px;
  border-top-left-radius:var(--gv-radius);
  border-bottom-left-radius:var(--gv-radius);
}
#galerim-panel-liste .card-table tr > *:last-child{
  border-right-width:1px;
  border-top-right-radius:var(--gv-radius);
  border-bottom-right-radius:var(--gv-radius);
}

/* Başlık satırı: aynı kutu, sakin zemin */
#galerim-panel-liste .card-table thead th{
  background:color-mix(in srgb, var(--gv-page) 55%, var(--gv-card));
  font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:600; color:var(--gv-muted); text-align:center;
}

/* Satır etkileşimi tek parça hissetsin */
#galerim-panel-liste .card-table tbody tr.v-satir:hover > td{
  background:color-mix(in srgb, var(--gv-page) 45%, var(--gv-card));
  border-color:var(--gv-edge-strong);
}
#galerim-panel-liste .card-table tbody tr.v-satir.acik > td{
  background:var(--gv-amber-soft);
  border-color:var(--gv-amber-line);
}

/* ÖZGÜLLÜK NOTU: styles.css, Durum ve aksiyon hücrelerini
   `...tbody td:last-child / :nth-last-child(2){background:transparent;border:none}`
   ile saydamlaştırıyor — özgüllüğü (1,2,2). Yukarıdaki genel kuralım (1,1,2)
   olduğu için o iki hücrede kaybediyordu ve satır kutusu sağdan kesik
   kalıyordu. Araya `tr` eklemek özgüllüğü (1,2,3) yapıp sorunu çözer. */
#galerim-panel-liste .card-table thead tr th:last-child,
#galerim-panel-liste .card-table thead tr th:nth-last-child(2),
#galerim-panel-liste .card-table tbody tr td:last-child,
#galerim-panel-liste .card-table tbody tr td:nth-last-child(2){
  border-top:1px solid var(--gv-edge);
  border-bottom:1px solid var(--gv-edge);
  border-left-width:0;
}
#galerim-panel-liste .card-table tbody tr td:last-child,
#galerim-panel-liste .card-table tbody tr td:nth-last-child(2){
  background:var(--gv-card);
}
#galerim-panel-liste .card-table thead tr th:last-child,
#galerim-panel-liste .card-table thead tr th:nth-last-child(2){
  background:color-mix(in srgb, var(--gv-page) 55%, var(--gv-card));
}
#galerim-panel-liste .card-table thead tr th:last-child,
#galerim-panel-liste .card-table tbody tr td:last-child{
  border-right:1px solid var(--gv-edge);
  border-top-right-radius:var(--gv-radius);
  border-bottom-right-radius:var(--gv-radius);
}
/* Aynı gerekçeyle hover/açık durumunda da son iki hücre geride kalmasın */
#galerim-panel-liste .card-table tbody tr.v-satir:hover > td:last-child,
#galerim-panel-liste .card-table tbody tr.v-satir:hover > td:nth-last-child(2){
  background:color-mix(in srgb, var(--gv-page) 45%, var(--gv-card));
}
#galerim-panel-liste .card-table tbody tr.v-satir.acik > td:last-child,
#galerim-panel-liste .card-table tbody tr.v-satir.acik > td:nth-last-child(2){
  background:var(--gv-amber-soft);
  border-color:var(--gv-amber-line);
}

/* Ayrıntı satırı zaten tek hücre — bölüm 3'teki panel görünümü korunur
   (bu bölümdeki kurallar sonra geldiği için yeniden yazılıyor). */
#galerim-panel-liste .card-table tbody tr.v-detay-satir > td{
  border:1px solid var(--gv-amber-line);
  border-radius:var(--gv-radius);
  background:var(--gv-card);
  text-align:left;
  padding:16px 18px;
}

/* ── Satır kutusunun İÇİ: her değer kendi çipinde ───────────
   Kullanıcı tercihi (2026-08-09): sadeleştirme yerine iç çip.
   Plaka (.v-plaka-no), durum (.badge), fotoğraf ve aç/kapa
   butonu kendi kutusunu zaten taşıyor; kalan altı değer
   .v-deger ile aynı dile getirildi.                          */
.v-deger{
  display:inline-block;
  max-width:100%;
  background:color-mix(in srgb, var(--gv-page) 65%, var(--gv-card));
  border:1px solid var(--gv-edge);
  border-radius:20px;
  padding:4px 12px;
  font-size:12.5px;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}
.v-deger.v-kod, .v-deger.v-sayi{
  font-family:var(--gv-mono);
  font-variant-numeric:tabular-nums;
}
.v-deger.v-ad{ font-weight:500; }
/* Hücrenin kendi iç boşluğu küçülsün — çip zaten boşluk taşıyor */
#galerim-panel-liste .card-table tbody td:has(.v-deger){ padding:6px 8px; }
/* Satır açıkken/üzerine gelince çipler zeminle uyumlu kalsın */
#galerim-panel-liste .card-table tbody tr.v-satir:hover .v-deger{
  border-color:var(--gv-edge-strong);
}
#galerim-panel-liste .card-table tbody tr.v-satir.acik .v-deger{
  background:var(--gv-card);
  border-color:var(--gv-amber-line);
}

/* ── Yoğunluk ayarı (2026-08-09): %100 yakınlaştırmada sığsın ────
   Satır 1366px genişlikte taşıyor, sağdaki aç/kapa sütunu kırpılıyordu
   (%90'da sığıyor, %100'de değil). Foto/plaka/çip ölçüleri ve hücre iç
   boşlukları küçültüldü; ayrıca tablo hiçbir koşulda kırpılmasın diye
   yatay kaydırma güvenceye alındı.                                   */
#galerim-panel-liste .table-responsive{ overflow-x:auto; }

#galerim-panel-liste .card-table thead th,
#galerim-panel-liste .card-table tbody td{ padding:6px 7px; }
#galerim-panel-liste .card-table tbody td.v-foto-td,
#galerim-panel-liste .card-table tbody td.v-plaka-td{ padding:5px 7px; }
#galerim-panel-liste .card-table tbody td:has(.v-deger){ padding:6px 5px; }

.v-foto{ width:52px; height:37px; border-radius:6px; }

.v-plaka-no{
  width:98px; height:21px;               /* 4,67 — Cetvel 31'deki 4,73'e yakın */
  padding:0 5px 0 13px;
  font-size:11px;
  letter-spacing:.02em;
}
.v-plaka-no::before{ width:8.5px; }      /* 98px'in %8,7'si */
.v-plaka-no::after{
  left:1.2px; top:1.6px;                 /* şeritte yatay ortalı, üstte */
  width:4px; height:4px;
}
.v-plaka-yok{ font-size:10.5px; padding:3px 9px; }

.v-deger{ font-size:11.5px; padding:3px 9px; }
.v-deger.v-ad{ max-width:170px; }        /* en uzun sütun tabloyu itmesin */

#galerim-panel-liste .card-table tbody td .v-ac-btn{ width:24px; height:24px; }
.v-ac-ok{ width:13px; height:13px; }

/* Arama + filtre şeridi de tek kutu (işaretlemedeki 3 numaralı çerçeve) */
#galerim-panel-liste .card-header{
  background:var(--gv-card);
  border:1px solid var(--gv-edge);
  border-radius:var(--gv-radius);
  box-shadow:var(--gv-shadow);
  padding:10px 12px;
  margin-bottom:10px;
}

/* ═══════════════════════════════════════════════════════════
   5. Finans tabloları — Galerim > Araç Listesi'yle aynı dil
   (2026-08-09): satır = tek kutu, değerler çip içinde.
   Çip sarmalayıcıyı app.js → foCipleriUygula() ekliyor;
   burası satır kutusunu kuruyor. Yöntem Araç Listesi'yle
   aynı: hücrelerin yan kenarları sıfırlanır, yalnız satırın
   ilk/son hücresine dış kenar + köşe verilir.
   ═══════════════════════════════════════════════════════════ */
.fo .fo-tw{
  border:none;
  background:transparent;
  border-radius:0;
  overflow-x:auto;
}
.fo .fo-tw table{
  border-collapse:separate;
  border-spacing:0 8px;
}
.fo .fo-tw th,
.fo .fo-tw td{
  background:var(--gv-card);
  border-top:1px solid var(--gv-edge);
  border-bottom:1px solid var(--gv-edge);
  border-left:0;
  border-right:0;
  padding:7px 12px;
}
/* styles.css son satırın alt kenarını siliyor — satır kutusu açık kalırdı */
.fo .fo-tw tr:last-child td{ border-bottom:1px solid var(--gv-edge); }
.fo .fo-tw tr > *:first-child{
  border-left:1px solid var(--gv-edge);
  border-top-left-radius:var(--gv-radius);
  border-bottom-left-radius:var(--gv-radius);
}
.fo .fo-tw tr > *:last-child{
  border-right:1px solid var(--gv-edge);
  border-top-right-radius:var(--gv-radius);
  border-bottom-right-radius:var(--gv-radius);
}
.fo .fo-tw th{
  background:color-mix(in srgb, var(--gv-page) 55%, var(--gv-card));
  letter-spacing:.06em;
}
/* Hover: zemin td'de olduğu için tr'ye verilen renk görünmüyordu */
.fo .fo-tw tbody tr:hover{ background:transparent; }
.fo .fo-tw tbody tr:hover > td{
  background:color-mix(in srgb, var(--gv-page) 45%, var(--gv-card));
  border-color:var(--gv-edge-strong);
}
/* Çip içeren hücrede iç boşluk küçülsün — çip zaten boşluk taşıyor */
.fo .fo-tw td:has(.v-deger){ padding:6px 6px; }

/* ── Genel Bakış → "Bugün Yapılacaklar" aksiyon kuyruğu ─────
   Satırlar ince çizgiyle ayrılmış düz tablo hâlindeydi; Finans'ın
   geri kalanı satır-kutusuna geçince burası eski dilde kaldı.
   Aynı kutu dili + tıklanabilirlik ipucu (satırlar zaten ilgili
   ekrana götürüyor, bunu görsel olarak da söylesin). */
.fo .ak-blok .table{
  border-collapse:separate;
  border-spacing:0 6px;
  margin-bottom:0;
}
.fo .ak-blok .ak-tr > td{
  background:var(--gv-card);
  border-top:1px solid var(--gv-edge);
  border-bottom:1px solid var(--gv-edge);
  border-left:0; border-right:0;
  padding:6px 10px;
}
.fo .ak-blok .ak-tr > td:first-child{
  border-left:1px solid var(--gv-edge);
  border-top-left-radius:var(--gv-radius);
  border-bottom-left-radius:var(--gv-radius);
}
.fo .ak-blok .ak-tr > td:last-child{
  border-right:1px solid var(--gv-edge);
  border-top-right-radius:var(--gv-radius);
  border-bottom-right-radius:var(--gv-radius);
}
.fo .ak-blok .ak-tr:hover > td{
  background:color-mix(in srgb, var(--gv-page) 45%, var(--gv-card));
  border-color:var(--gv-amber-line);
}
.fo .ak-blok .ak-tr{ cursor:pointer; }
.fo .ak-blok-baslik{
  font-size:12.5px; font-weight:600; color:var(--gv-ink-2);
  margin-bottom:8px;
}
.fo .ak-git{
  color:var(--gv-amber-ink); font-size:11.5px; font-weight:600;
  border-radius:20px; padding:3px 10px;
}
.fo .ak-git:hover{ background:var(--gv-amber-soft); }
.fo .ak-blok + .ak-blok{ border-top:1px solid var(--gv-edge); padding-top:14px; }

/* Aynı dil, Gelirler ve Masraflar alt sayfalarındaki tablolarda da */
#tahsilatlar .card, #expenses .card{ background:transparent; border:none; box-shadow:none; }
#tahsilatlar .card-table, #expenses .card-table{
  border-collapse:separate; border-spacing:0 8px; background:transparent;
}
#tahsilatlar .card-table th, #expenses .card-table th,
#tahsilatlar .card-table td, #expenses .card-table td{
  background:var(--gv-card);
  border-top:1px solid var(--gv-edge);
  border-bottom:1px solid var(--gv-edge);
  border-left:0; border-right:0;
  padding:7px 12px;
}
#tahsilatlar .card-table tr > *:first-child,
#expenses .card-table tr > *:first-child{
  border-left:1px solid var(--gv-edge);
  border-top-left-radius:var(--gv-radius);
  border-bottom-left-radius:var(--gv-radius);
}
#tahsilatlar .card-table tr > *:last-child,
#expenses .card-table tr > *:last-child{
  border-right:1px solid var(--gv-edge);
  border-top-right-radius:var(--gv-radius);
  border-bottom-right-radius:var(--gv-radius);
}
#tahsilatlar .card-table thead th, #expenses .card-table thead th{
  background:color-mix(in srgb, var(--gv-page) 55%, var(--gv-card));
}
#tahsilatlar .card-table tbody tr:hover > td,
#expenses .card-table tbody tr:hover > td{
  background:color-mix(in srgb, var(--gv-page) 45%, var(--gv-card));
  border-color:var(--gv-edge-strong);
}
#tahsilatlar .card-table td:has(.v-deger),
#expenses .card-table td:has(.v-deger){ padding:6px 6px; }

/* Finans alt sayfaları (Araç Masrafları / Gelirler / Raporlar) artık sekme
   çubuğunun altında, #fo-panel'in yerinde açılıyor — üstteki sekmelerle
   aynı ritmi tutsun. */
.fo-altsayfa{ margin-top:2px; }
.fo-altsayfa.d-none{ display:none !important; }

/* ── Finans alt sayfalarında kayıt formlarını gizle ──────────
   Kullanıcı isteği (2026-08-09): Gelirler'de "Yeni Gelir",
   Masraflar'da "Gider Ekle" kartı görünmesin — bu ekranlar
   tanıtımda salt görüntüleme olarak kalsın.
   Formlar DOM'da KALIYOR: app.js açılışta fillSelect() ile
   #tahsilat-form / #expense-form içindeki select'leri dolduruyor,
   silinirse orada patlar. */
/* AKTARIMDA DEVRE DIŞI (2026-08-12) — Gelir/Gider ekleme formlarını gizler. CANLIDA KAPALI: gerçek kullanıcı
     bu formlarla kayıt giriyor; demoda salt-görüntüleme istenmişti.
#tahsilatlar .card:has(#tahsilat-form),
#expenses .card:has(#expense-form){ display:none; } */

/* ═══════════════════════════════════════════════════════════
   6. GÜNDEM > TAKVİM (2026-08-09)
   Solda seçili günün ajandası, sağda ay ızgarası. Ay ızgarası
   grid; hücreler buton (klavyeyle de gezilebilir).
   ═══════════════════════════════════════════════════════════ */
.gundem-tabbar{
  justify-content:flex-start;
  margin:14px 0 16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--gv-edge);
}
.gundem-takvim{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
}
@media (max-width:900px){
  .gundem-takvim{ grid-template-columns:1fr; }
}

/* ── Sol: seçili günün ajandası ─────────────────────────── */
.gundem-gun h3{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.gt-gun-etiket{ font-size:11.5px; font-weight:400; color:var(--gv-muted); }
.gt-olay{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--gv-edge);
}
.gt-olay:last-child{ border-bottom:none; }
.gt-olay-govde{ flex:1; min-width:0; }
.gt-olay-baslik{ font-size:13px; font-weight:500; }
.gt-olay-detay{ font-size:11.5px; color:var(--gv-muted); margin-top:2px; }
.gt-olay-tip{
  flex:0 0 auto; font-size:10.5px; font-weight:500;
  color:var(--gv-muted);
  background:color-mix(in srgb, var(--gv-page) 70%, var(--gv-card));
  border:1px solid var(--gv-edge); border-radius:20px;
  padding:2px 9px; white-space:nowrap;
}
.gt-bos-gun{
  padding:34px 12px; text-align:center;
  color:var(--gv-muted); font-size:12.5px;
}

/* ── Sağ: ay ızgarası ───────────────────────────────────── */
.gundem-ay-bas{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:12px;
}
.gundem-ay-bas h3{ font-size:13px; font-weight:600; }
.gundem-ay-izgara{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
}
.gt-baslik{
  text-align:center; font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--gv-muted); padding-bottom:4px;
}
.gt-bos{ /* ayın ilk gününden önceki boş hücreler */ }
.gt-gun{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  aspect-ratio:1/1;
  min-height:38px;
  padding:2px;
  background:var(--gv-card);
  border:1px solid var(--gv-edge);
  border-radius:8px;
  color:var(--gv-ink-2);
  font-size:12.5px;
  cursor:pointer;
  transition:border-color .12s, background .12s;
}
.gt-gun:hover{ border-color:var(--gv-edge-strong); }
.gt-gun.gt-dolu{ font-weight:600; }
.gt-gun.gt-bugun{
  border-color:var(--gv-amber);
  box-shadow:inset 0 0 0 1px var(--gv-amber);
}
.gt-gun.gt-secili{
  background:var(--gv-ink);
  border-color:var(--gv-ink);
  color:#fff;
}
.gt-sayi{ line-height:1; font-variant-numeric:tabular-nums; }
.gt-noktalar{ display:flex; gap:2px; min-height:5px; }
.gt-nokta{
  width:5px; height:5px; border-radius:50%;
  background:var(--gv-muted); display:inline-block; flex:0 0 5px;
}
.gt-taksit  { background:var(--gv-red); }
.gt-gorusme { background:var(--gv-blue); }
.gt-muayene { background:var(--gv-amber); }
.gt-sigorta { background:var(--gv-green); }
.gt-test    { background:#7C6BB0; }

.gundem-ay-lejant{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:12px; padding-top:10px;
  border-top:1px solid var(--gv-edge);
}
.gt-lejant{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; color:var(--gv-muted);
}

/* Bugün Yapılacaklar artık Takvim sekmesinin altında (2026-08-12) —
   iki sütunlu takvimden sonra tam genişlikte, araya ayraç. */
.gundem-yapilacaklar-alan{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--gv-edge);
}

/* ── Araç ayrıntı paneli: bölümlü düzen (2026-08-20 genişletme) ──────
   Panel yalnız çip + 5 satırlık künye gösteriyordu; /api/vehicles zaten
   finans, ithalat dökümü, satış koşulları ve sevkiyat alanlarını da
   döndürüyordu. Bölümler ayrı başlıklarla ızgaraya yerleşir.            */
.v-detay-bolum + .v-detay-bolum{ margin-top:12px; }
/* Kalan/geçen gün rozetleri — muayene, sigorta, ETA */
.v-uyari{
  display:inline-block; margin-left:6px; padding:1px 7px;
  font-size:10px; font-weight:600; border-radius:20px;
  background:color-mix(in srgb, var(--gv-page) 70%, var(--gv-card));
  border:1px solid var(--gv-edge); color:var(--gv-muted);
  font-family:var(--gv-sans); letter-spacing:0;
}
.v-uyari-amber{ background:var(--gv-amber-soft); border-color:var(--gv-amber-line); color:var(--gv-amber-ink); }
.v-uyari-kirmizi{ background:var(--gv-red-soft); border-color:var(--gv-red-line); color:var(--gv-red); }
/* Ayrıntı panelinde sol sütun genişlesin — artık daha çok bilgi var */
@media (min-width:900px){
  .v-detay-sol{ flex:1 1 520px; }
}

/* ── Sayfa ritmi: her ekranın başlığı aynı hizada başlasın ─ */
.view{ padding-top:2px; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}