@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* =========================================================================
   V-Tracker Design Tokens (2026-07-07 modernization)
   -------------------------------------------------------------------------
   Modern SaaS dashboard aesthetic — Apple Find My / Linear / Stripe / Tesla.
   Beyaz/açık gri base, mavi sadece vurgu (CTA, aktif tab, focus).
   ========================================================================= */
:root {
  --vc-primary: #1677ff;
  --vc-primary-dark: #0b5ed7;
  --vc-primary-soft: #eef6ff;
  --vc-bg: #f8fafc;
  --vc-surface: #ffffff;
  --vc-surface-soft: #f1f5f9;
  --vc-text: #0f172a;
  --vc-text-muted: #64748b;
  --vc-border: #e2e8f0;
  --vc-success: #16a34a;
  --vc-warning: #f59e0b;
  --vc-danger: #ef4444;
  --vc-radius-md: 14px;
  --vc-radius-lg: 20px;
  --vc-radius-xl: 28px;
  --vc-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
  --vc-shadow-md: 0 12px 36px rgba(15, 23, 42, 0.10);
  --vc-transition: 180ms ease;
}

/* Reusable utility classes — vc-* prefix (backward compat: eski class'lar
   alias olarak kalır index.php/views içindeki inline stiller ile). */
.vc-surface        { background: var(--vc-surface); border: 1px solid var(--vc-border); border-radius: var(--vc-radius-lg); }
.vc-surface-soft   { background: var(--vc-surface-soft); border-radius: var(--vc-radius-lg); }
.vc-shadow-sm      { box-shadow: var(--vc-shadow-sm); }
.vc-shadow-md      { box-shadow: var(--vc-shadow-md); }
.vc-border         { border: 1px solid var(--vc-border); }
.vc-text-muted     { color: var(--vc-text-muted); }
.vc-radius-md      { border-radius: var(--vc-radius-md); }
.vc-radius-lg      { border-radius: var(--vc-radius-lg); }
.vc-radius-xl      { border-radius: var(--vc-radius-xl); }

.vc-hover-lift     { transition: transform var(--vc-transition), box-shadow var(--vc-transition), border-color var(--vc-transition); }
.vc-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--vc-shadow-md); }

.vc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--vc-surface-soft); color: var(--vc-text);
  font-size: .82rem; font-weight: 500;
  border: 1px solid transparent;
  transition: all var(--vc-transition);
  cursor: pointer;
  white-space: nowrap;
}
.vc-chip:hover { background: var(--vc-primary-soft); color: var(--vc-primary); }
.vc-chip.is-active {
  background: var(--vc-primary-soft);
  color: var(--vc-primary);
  border-color: rgba(22,119,255,0.2);
  font-weight: 600;
}

.vc-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--vc-primary); color: #fff;
  border: none; border-radius: var(--vc-radius-md);
  padding: 10px 20px; font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none;
  transition: background var(--vc-transition), transform var(--vc-transition);
}
/* Hover'da primary-dark yerine primary tone — "Daha Verimli Operasyonlar" ile aynı renk. */
.vc-btn-primary:hover { background: var(--vc-primary); color: #fff; transform: translateY(-1px); }

.vc-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--vc-surface); color: var(--vc-text);
  border: 1px solid var(--vc-border); border-radius: var(--vc-radius-md);
  padding: 10px 20px; font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none;
  transition: all var(--vc-transition);
}
.vc-btn-outline:hover { border-color: var(--vc-primary); color: var(--vc-primary); background: var(--vc-primary-soft); }

.vc-stat-card {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-md);
  padding: 12px 14px;
  transition: all var(--vc-transition);
}
.vc-stat-card:hover { border-color: rgba(22,119,255,0.3); box-shadow: var(--vc-shadow-sm); }
.vc-stat-card .vc-stat-label { font-size: .75rem; color: var(--vc-text-muted); font-weight: 500; margin-bottom: 4px; }
.vc-stat-card .vc-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--vc-text); line-height: 1.1; }
.vc-stat-card .vc-stat-icon  { width: 32px; height: 32px; display:flex; align-items:center; justify-content:center; border-radius:8px; }

.vc-section-title { font-size: 1.6rem; font-weight: 700; color: var(--vc-text); letter-spacing: -0.01em; margin-bottom: 8px; }
.vc-section-sub   { font-size: 1rem; color: var(--vc-text-muted); margin-bottom: 24px; }

/* Feature tab card system — modern SaaS dashboard cards.
   Kullanılabilir yerler: _features_eco, _features_speed, _features_route,
   _features_reports gibi tab content'lerde standart görünüm için. */
.vc-tab-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 991.98px) {
  .vc-tab-grid { grid-template-columns: 1fr 1fr; }
  .vc-tab-grid > .vc-card-wide { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .vc-tab-grid { grid-template-columns: 1fr; }
}
.vc-card {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-lg);
  padding: 20px;
  box-shadow: var(--vc-shadow-sm);
  transition: transform var(--vc-transition), box-shadow var(--vc-transition);
}
.vc-card:hover { box-shadow: var(--vc-shadow-md); }
.vc-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px;
}
.vc-card-title {
  font-size: 1.05rem; font-weight: 700; color: var(--vc-text);
  margin: 0; letter-spacing: -0.01em;
}
.vc-card-link {
  font-size: .82rem; color: var(--vc-text-muted);
  text-decoration: none; font-weight: 500;
  transition: color var(--vc-transition);
}
.vc-card-link:hover { color: var(--vc-primary); }
.vc-card-link.vc-card-link-primary { color: var(--vc-primary); }

/* Progress bar — inline stat rows için */
.vc-progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vc-progress-row:last-child { margin-bottom: 0; }
.vc-progress-label { font-size: .9rem; color: var(--vc-text); font-weight: 500; flex: 0 0 auto; min-width: 120px; }
.vc-progress-bar {
  flex: 1; height: 6px; background: var(--vc-surface-soft);
  border-radius: 999px; overflow: hidden; position: relative;
}
.vc-progress-fill {
  height: 100%; background: var(--vc-success);
  border-radius: 999px; transition: width 400ms ease;
}
.vc-progress-value { font-size: .8rem; color: var(--vc-text-muted); font-weight: 600; flex: 0 0 60px; text-align: right; }

/* Circular score (SVG-based) */
.vc-score-ring { position: relative; width: 160px; height: 160px; margin: 0 auto; }
.vc-score-ring svg { transform: rotate(-90deg); }
.vc-score-ring .vc-score-track { stroke: var(--vc-surface-soft); }
.vc-score-ring .vc-score-progress { stroke: var(--vc-success); transition: stroke-dashoffset 600ms ease; }
.vc-score-ring .vc-score-center {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column;
}
.vc-score-ring .vc-score-value { font-size: 2.2rem; font-weight: 800; color: var(--vc-success); line-height: 1; }
.vc-score-ring .vc-score-max { font-size: .85rem; color: var(--vc-text-muted); font-weight: 500; margin-top: 2px; }
.vc-score-label {
  text-align: center; font-size: 1rem; font-weight: 700;
  color: var(--vc-success); margin-top: 8px;
}
.vc-score-foot {
  text-align: center; font-size: .82rem; color: var(--vc-text-muted); margin-top: 6px;
}

/* Icon row list (Sürüş Özeti, Rota Özeti, Akıllı Uyarılar) */
.vc-icon-list { list-style: none; padding: 0; margin: 0; }
.vc-icon-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--vc-border);
}
.vc-icon-list li:last-child { border-bottom: none; }
.vc-icon-list .vc-icon-slot {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--vc-surface-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--vc-text-muted);
  flex-shrink: 0;
}
.vc-icon-list .vc-icon-body { flex: 1; min-width: 0; }
.vc-icon-list .vc-icon-title { font-size: .92rem; font-weight: 600; color: var(--vc-text); line-height: 1.3; }
.vc-icon-list .vc-icon-sub { font-size: .78rem; color: var(--vc-text-muted); }
.vc-icon-list .vc-icon-value { font-size: .95rem; font-weight: 700; color: var(--vc-text); flex-shrink: 0; }

/* Donut chart (CSS conic-gradient) */
.vc-donut {
  width: 140px; height: 140px; border-radius: 50%;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.vc-donut::before {
  content: ""; position: absolute; inset: 22%;
  background: var(--vc-surface); border-radius: 50%;
}
.vc-donut-center { position: relative; z-index: 1; text-align: center; }
.vc-donut-center .vc-donut-value { font-size: 1.8rem; font-weight: 800; color: var(--vc-text); line-height: 1; }
.vc-donut-center .vc-donut-label { font-size: .72rem; color: var(--vc-text-muted); font-weight: 500; }
.vc-donut-legend { list-style: none; padding: 0; margin: 12px 0 0; }
.vc-donut-legend li { display: flex; align-items: center; gap: 8px; font-size: .82rem; padding: 4px 0; }
.vc-donut-legend .vc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.vc-donut-legend .vc-donut-legend-label { flex: 1; color: var(--vc-text); }
.vc-donut-legend .vc-donut-legend-value { color: var(--vc-text-muted); font-weight: 600; }

/* Big stat block (Yakıt Tasarrufu vs.) */
.vc-big-stat { text-align: center; padding: 8px 0 4px; }
.vc-big-stat .vc-big-value { font-size: 2.3rem; font-weight: 800; color: var(--vc-text); letter-spacing: -0.02em; }
.vc-big-stat .vc-big-label { font-size: .9rem; color: var(--vc-text-muted); font-weight: 500; margin-top: 2px; }
.vc-big-stat-delta { font-size: .78rem; color: var(--vc-success); font-weight: 600; margin-top: 4px; }
.vc-big-stat-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  border-top: 1px solid var(--vc-border);
  padding-top: 12px; margin-top: 16px;
}
.vc-big-stat-split .vc-split-item { text-align: center; }
.vc-big-stat-split .vc-split-value { font-size: 1.05rem; font-weight: 700; color: var(--vc-text); }
.vc-big-stat-split .vc-split-label { font-size: .72rem; color: var(--vc-text-muted); margin-top: 2px; }

/* Timeline (Rota Geçmişi, Akıllı Uyarılar) */
.vc-timeline { list-style: none; padding: 0; margin: 0; }
.vc-timeline li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--vc-border);
}
.vc-timeline li:last-child { border-bottom: none; }
.vc-timeline .vc-tl-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--vc-primary-soft); color: var(--vc-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .85rem;
}
.vc-timeline .vc-tl-body { flex: 1; min-width: 0; }
.vc-timeline .vc-tl-title { font-size: .88rem; font-weight: 600; color: var(--vc-text); }
.vc-timeline .vc-tl-meta { font-size: .78rem; color: var(--vc-text-muted); margin-top: 2px; }
.vc-timeline .vc-tl-value { font-size: .85rem; color: var(--vc-text); font-weight: 600; flex-shrink: 0; }

/* Report card (Otomatik Raporlar tab) */
.vc-report-card {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-lg);
  padding: 20px;
  text-align: center;
  transition: all var(--vc-transition);
}
.vc-report-card:hover { border-color: rgba(22,119,255,0.3); box-shadow: var(--vc-shadow-md); }
.vc-report-card .vc-report-icon {
  width: 48px; height: 48px; border-radius: 12px;
  margin: 0 auto 12px;
  background: var(--vc-primary-soft); color: var(--vc-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.vc-report-card .vc-report-title { font-size: 1rem; font-weight: 700; color: var(--vc-text); margin-bottom: 6px; }
.vc-report-card .vc-report-desc { font-size: .82rem; color: var(--vc-text-muted); line-height: 1.5; margin-bottom: 10px; min-height: 60px; }
.vc-report-card .vc-report-fmt {
  font-size: .72rem; color: var(--vc-text-muted); margin-bottom: 8px;
}
.vc-report-card .vc-report-fmt i { color: var(--vc-primary); margin-right: 4px; }

@media (min-width: 992px) {
  .rounded-lg-3 { border-radius: .3rem; }
}

body {
    /*  font-family: "Red Hat Display", sans-serif !important;*/
    font-family: "Nunito", sans-serif !important;

}

.text-extra-small {
    font-size: 50%;
}


.fa-gradient {
  font-size: 2rem;
  line-height: 1;
  padding: 0.1em;
  background: var(--vc-primary, #1677ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important;
}

/* 2026-07-07: eski cyan gradient (#3592eb → #00e5ff) tone kaldırıldı, tüm
   btn-primary artık düz primary solid — "Daha Verimli Operasyonlar" ile aynı. */
.btn.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary {
  background-image: none !important;
  background-color: var(--vc-primary, #1677ff) !important;
  border-color: var(--vc-primary, #1677ff) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn-check:focus + .btn.btn-primary,
.btn-check:checked + .btn.btn-primary,
.btn.btn-primary:active,
.btn.btn-primary.active,
.show > .btn.btn-primary.dropdown-toggle {
  background-image: none !important;
  background-color: var(--vc-primary, #1677ff) !important;
  border-color: var(--vc-primary, #1677ff) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(22,119,255,0.25) !important;
}

ul.primary li::marker {
  background: var(--vc-primary, #1677ff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--vc-primary, #1677ff) !important; /* fallback */
}

ul.list-unstyled i.text-primary {
  display: inline-block;
  background: var(--vc-primary, #1677ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--vc-primary, #1677ff) !important; /* fallback */
}

/* Marketing sayfaları — ortak wrapper (fleet, verticals, cold-chain, products,
   try, api). index.php hero paletiyle aynı zemin, modern beyaz kartlar.
   `main:has(> .vc-page-topbar)` — _landing_nav.php include eden tüm marketing
   sayfaları otomatik wrapper alır. Sayfa PHP'lerinde ekstra edit gerektirmez. */
.vc-page-shell,
main:has(> .vc-page-topbar) {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(22,119,255,0.10), transparent 60%),
    radial-gradient(900px 400px at 5% 100%, rgba(22,119,255,0.06), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  /* Ana sayfa `<header class="p-3">` (16px) ile aynı yan padding — nav konumu
     ana sayfa ile eşitlensin, alt sayfalara geçişte kaymasın. */
  padding: 16px 16px 40px;
}

/* Bootstrap .text-primary default #0d6efd — bizim --vc-primary #1677ff ile
   tutarlı olsun (auth, register, share sayfalarında tone farkı gitsin). */
.text-primary { color: var(--vc-primary, #1677ff) !important; }

/* VT ürün sayfalarının 1. hero card (ürün resmi + tanıtım + fiyat) —
   index.php hero gradient (soft primary radial + linear white). */
.vc-vt-hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(22,119,255,0.10), transparent 60%),
    radial-gradient(900px 400px at 5% 100%, rgba(22,119,255,0.06), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--vc-border, #e2e8f0) !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 32px rgba(22,119,255,0.06), 0 1px 3px rgba(15,23,42,0.04) !important;
}
/* 1. hero nested fiyat kutusu transparan */
.vc-vt-hero .card.bg-white.border-white {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* VT ürün sayfalarının 2. hero card (Canlı Konum/Son Konum/Rotalar nav-tabs +
   video preview) — SAF PRIMARY + tüm text beyaz. */
.vc-vt-hero-2 {
  background: var(--vc-primary, #1677ff) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--vc-primary, #1677ff) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 36px rgba(22,119,255,0.24) !important;
  color: #fff !important;
}
.vc-vt-hero-2,
.vc-vt-hero-2 *,
.vc-vt-hero-2 h1,
.vc-vt-hero-2 h2,
.vc-vt-hero-2 h3,
.vc-vt-hero-2 h4,
.vc-vt-hero-2 p,
.vc-vt-hero-2 li,
.vc-vt-hero-2 small,
.vc-vt-hero-2 span,
.vc-vt-hero-2 div,
.vc-vt-hero-2 .text-dark,
.vc-vt-hero-2 .text-muted,
.vc-vt-hero-2 .text-primary,
.vc-vt-hero-2 .text-body-secondary {
  color: #fff !important;
}
/* Nested kartlar transparan */
.vc-vt-hero-2 .card.bg-white.border-white,
.vc-vt-hero-2 .card {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* Nav-tabs kulakları — transparan bg, beyaz border+text.
   Aktif olan: beyaz bg + primary text (ters kontrast). */
.vc-vt-hero-2 .nav-tabs {
  border-bottom-color: transparent !important;
}
.vc-vt-hero-2 .nav-tabs .nav-link,
.vc-vt-hero-2 .nav-tabs .nav-link.bg-light {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
.vc-vt-hero-2 .nav-tabs .nav-link:hover:not(.active) {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-color: #fff !important;
}
.vc-vt-hero-2 .nav-tabs .nav-link.active,
.vc-vt-hero-2 .nav-tabs .nav-link.active.bg-light,
.vc-vt-hero-2 .nav-tabs .nav-link.bg-light.active {
  background: #fff !important;
  color: var(--vc-primary, #1677ff) !important;
  border-color: #fff !important;
}
/* Aktif ikon ve text de primary */
.vc-vt-hero-2 .nav-tabs .nav-link.active *,
.vc-vt-hero-2 .nav-tabs .nav-link.active .tab-text,
.vc-vt-hero-2 .nav-tabs .nav-link.active .tab-icon,
.vc-vt-hero-2 .nav-tabs .nav-link.active i {
  color: var(--vc-primary, #1677ff) !important;
}
/* Topbar ana sayfa nav ile aynı genişlikte: viewport kenarına kadar */
.vc-page-topbar { max-width: none; margin: 0 0 16px; padding: 0; position: relative; z-index: 1500; }
.vc-page-inner  { max-width: 1200px; margin: 0 auto; padding: 20px 8px 0; }

/* Sayfa başlığı — about.php ile aynı stil */
.vc-page-title {
  font-size: 1.75rem; font-weight: 800; color: var(--vc-text);
  margin: 0 0 12px; display: inline-flex; align-items: center; gap: 12px;
}
.vc-page-title i { color: var(--vc-primary); font-size: 1.5rem; }
.vc-page-lead {
  font-size: 1.05rem; color: var(--vc-text-muted);
  line-height: 1.6; margin: 0 0 24px; max-width: 780px;
}
/* Modernize card wrapper — sayfa content bölümlerini sarar */
.vc-page-card {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 4px 20px rgba(15,23,42,0.05);
  margin-bottom: 24px;
}

/* Modern navbar (.vc-nav-link) exclude — 2026-07-07 modernize: underline yerine
   soft-blue background pill kullanılıyor. Eski tema kullanan sayfalar için kural
   korunur, sadece yeni nav-link'te devre dışı.
   `> a` direct child — dropdown İÇİNDEKİ (.nav-dropdown > a) linkleri etkilemez. */
.nav-item > a:hover:not(.active):not(.vc-nav-link) {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px !important;
}