/* ═══════════════════════════════════════════════════════════════════════════
   BUSTOP DESIGN TOKENS — premium mavi+beyaz sistem
   Bu dosya style.css'ten SONRA yüklenir; :root değişkenlerini premium seviyeye
   çıkarır. Bileşen yapısını bozmaz — tüm bileşenler bu token'ları okur.
   Mobil (src/theme/index.ts) ile birebir aynı değerleri paylaşır.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marka mavisi (güven + canlı etkileşim) ── */
  --primary:        #1D4ED8;   /* trust blue — ana aksiyon */
  --primary-dark:   #1E40AF;   /* koyu — basılı/aktif */
  --primary-hover:  #2563EB;   /* canlı — hover */
  --primary-light:  #EFF4FF;   /* açık yüzey — chip/badge zemini */
  --primary-mid:    #BFD3FF;   /* orta — çizgi/halkalar */
  --primary-tint:   #DBE6FF;   /* daha yumuşak vurgu */

  /* vNext sayfalarının kullandığı --brand aile (aynı maviye hizalı) */
  --brand:          #1D4ED8;
  --brand-hover:    #2563EB;
  --brand-soft:     #EFF4FF;
  --brand-tint:     #DBE6FF;

  --accent:         #0EA5E9;   /* sky — ikincil canlı vurgu (spotter/foto) */

  /* ── Durum renkleri ── */
  --success:        #15803D;  --success-light: #DCFCE7;
  --warning:        #B45309;  --warning-light: #FEF3C7;
  --danger:         #DC2626;  --danger-light:  #FEE2E2;
  --info:           #0369A1;  --info-light:    #E0F2FE;

  /* ── Nötrler / yüzeyler (kırık beyaz, mavi-nötr tonlu) ── */
  --bg:             #F7F9FC;   /* kırık beyaz sayfa zemini */
  --bg-dark:        #EEF2F8;   /* hafif gri-mavi ikinci zemin */
  --surface:        #FFFFFF;
  --card:           #FFFFFF;
  --border:         #E4E9F2;   /* yumuşak mavi-gri kenar */
  --border-dark:    #CFD8E8;
  --border-strong:  #B8C4DA;

  /* ── Metin ── */
  --text:           #0F172A;   /* ink */
  --text-2:         #475569;   /* ikincil */
  --muted:          #64748B;   /* muted */
  --muted-2:        #94A3B8;   /* muted-2 */
  --muted-light:    #94A3B8;

  /* ── Yarıçap ── */
  --r-sm:           8px;
  --r:              12px;
  --r-lg:           16px;
  --r-xl:           22px;
  --r-full:         999px;

  /* ── Gölge (yumuşak, premium — mavi-nötr) ── */
  --shadow-sm:      0 1px 2px rgba(15,23,42,.05);
  --shadow:         0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:      0 6px 18px rgba(15,23,42,.08);
  --shadow-lg:      0 14px 40px rgba(15,23,42,.12);
  --shadow-brand:   0 6px 20px rgba(29,78,216,.22);

  /* ── Hareket ── */
  --ease:           cubic-bezier(.4,0,.2,1);
  --ease-out:       cubic-bezier(.16,1,.3,1);
  --dur-fast:       .12s;
  --dur:            .2s;
  --dur-slow:       .32s;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ═══ KOYU TEMA — katmanlı premium (düz siyah değil) ═══════════════════════ */
[data-theme="dark"] {
  --primary:        #3B82F6;   /* koyuda daha parlak, ama patlamayan */
  --primary-dark:   #2563EB;
  --primary-hover:  #60A5FA;
  --primary-light:  #17233D;   /* koyu yüzey mavisi (chip zemini) */
  --primary-mid:    #1E3A6E;
  --primary-tint:   #1B2C4D;

  --brand:          #3B82F6;
  --brand-hover:    #60A5FA;
  --brand-soft:     #17233D;
  --brand-tint:     #1B2C4D;

  --accent:         #38BDF8;

  --success-light:  #0E2A1A;
  --warning-light:  #2A1E08;
  --danger-light:   #2A1414;
  --info-light:     #0C2233;

  /* katmanlı zeminler: bg < surface < card ayrışır */
  --bg:             #0B1020;   /* en arka */
  --bg-dark:        #070B16;
  --surface:        #141B2E;   /* topbar/sidebar/modal */
  --card:           #1B2438;   /* kart — bg'den belirgin ayrı */
  --border:         #273349;   /* görünür ama sert değil */
  --border-dark:    #334155;
  --border-strong:  #3E4C63;

  --text:           #F1F5F9;
  --text-2:         #CBD5E1;
  --muted:          #94A3B8;
  --muted-2:        #64748B;
  --muted-light:    #64748B;

  --shadow-sm:      0 1px 2px rgba(0,0,0,.4);
  --shadow:         0 2px 6px rgba(0,0,0,.45);
  --shadow-md:      0 8px 24px rgba(0,0,0,.5);
  --shadow-lg:      0 16px 44px rgba(0,0,0,.6);
  --shadow-brand:   0 6px 20px rgba(59,130,246,.3);
}

/* ═══ ORTAK İNCE RÖTUŞLAR (bileşen yapısını bozmadan premium his) ═══════════ */

/* Yumuşak, tutarlı geçişler */
.btn, .card, .listing-card, .mk-card, .job-card, .am-card,
input, select, textarea, .chip, .mk-chip, .badge {
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
              color var(--dur) var(--ease);
}

/* Butonlar — premium his + net state'ler */
.btn {
  background: var(--primary);
  border-radius: var(--r);
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--primary-hover); box-shadow: var(--shadow-brand); transform: translateY(-1px); }
.btn:active { background: var(--primary-dark); transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: 3px solid var(--primary-mid); outline-offset: 2px; }
.btn.ghost { background: transparent; color: var(--primary); border: 1px solid var(--border-strong); box-shadow: none; }
.btn.ghost:hover { background: var(--primary-light); border-color: var(--primary); transform: translateY(-1px); }

/* Kartlar — yumuşak yükseklik, hover'da hafif kalkış */
.card { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }

/* Girdi alanları — net focus halkası */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,.14);
}
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,.22);
}

/* Koyu temada medya çevresi beyaz artefact bırakmasın */
[data-theme="dark"] img { background: transparent; }
[data-theme="dark"] .mk-card-img, [data-theme="dark"] .am-thumb,
[data-theme="dark"] .vitrin-feed-img-wrap { background: #0F1626; }

/* Erişilebilir görünür odak (klavye) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--primary-mid);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skeleton parıltısı (yüklenme) */
@keyframes bt-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.bt-skeleton {
  background: linear-gradient(90deg, var(--bg-dark) 25%, var(--border) 37%, var(--bg-dark) 63%);
  background-size: 800px 100%;
  animation: bt-shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}

/* Reduced motion — hareketi kapat */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mobil safe-area (alt navigasyon çentikli ekranlar) */
@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-bottom-nav { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM BİLEŞEN KATMANI — mevcut class'ları elden geçirir (yapı bozulmaz)
   Vitrin/feed, story, composer, sidebar, kartlar, rozetler
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR — premium his, aktif durum vurgusu ── */
.sidebar { background: var(--surface); border-right: 1px solid var(--border); }
.sidebar-link {
  border-radius: 10px; margin: 2px 8px; padding: 10px 12px;
  font-weight: 600; color: var(--text-2);
  position: relative;
}
.sidebar-link:hover { background: var(--primary-light); color: var(--primary); transform: translateX(2px); }
.sidebar-link.active {
  background: var(--primary-light); color: var(--primary); font-weight: 700;
}
.sidebar-link.active::before {
  content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: var(--primary);
}
.sidebar-link svg, .sidebar-link .icon { transition: transform var(--dur) var(--ease); }
.sidebar-link:hover svg { transform: scale(1.08); }

/* ── STORY halkaları — premium gradient ring ── */
.story-ring {
  padding: 3px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 50%;
}
.story-ring.viewed { background: var(--border-strong); }
.story-ring .avatar { border: 2px solid var(--surface) !important; }
.story-item span, .story-add-item span {
  font-size: 11px; color: var(--text-2); font-weight: 600; margin-top: 5px;
}
.story-add-plus {
  background: var(--primary); border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
}
.story-item { transition: transform var(--dur-fast) var(--ease-out); }
.story-item:hover { transform: translateY(-2px) scale(1.04); }

/* ── COMPOSER — daha davetkar, premium ── */
.vitrin-composer-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}
.vitrin-composer-input {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-full); color: var(--muted);
}
.vitrin-composer-input:hover { border-color: var(--primary-mid); background: var(--primary-light); }
.vitrin-composer-btn {
  color: var(--text-2); font-weight: 600; border-radius: 10px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vitrin-composer-btn:hover { background: var(--primary-light); color: var(--primary); }

/* ── FEED KART — premium yükseklik, ince kenar, akıcı hover ── */
.feed-card, .vitrin-feed-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.feed-card:hover, .vitrin-feed-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-dark);
}
.feed-card-header { padding: 16px 18px; }
.feed-user-row strong { font-weight: 700; }
.feed-user-row .avatar { box-shadow: 0 0 0 2px var(--border); }
.feed-type-badge {
  background: var(--primary-light); border: none; color: var(--primary);
  font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 10px;
  padding: 4px 10px; border-radius: var(--r-full);
}
.feed-card-title { font-weight: 700; }
.feed-card-title a:hover { color: var(--primary); }
.feed-card-img-wrap, .feed-card-img { border-radius: 0; }
.feed-card-actions { border-top: 1px solid var(--border); padding: 12px 18px; }
.feed-action-btn {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  border-radius: 10px; font-weight: 600; padding: 7px 12px;
}
.feed-action-btn:hover { background: var(--primary-light); border-color: transparent; color: var(--primary); }
.feed-action-btn.like-btn.liked {
  color: #e11d48; background: rgba(225,29,72,.08); border-color: transparent;
}
.feed-action-btn.like-btn.liked .like-icon { animation: likePopIn .3s cubic-bezier(.36,.07,.19,.97); }

/* Resmi hesap gönderisi — premium mavi çerçeve vurgusu */
.feed-card.official-post {
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 1px var(--primary-mid), var(--shadow-sm);
}

/* ── GENEL KARTLAR (listing/request/mk/job) — tutarlı premium ── */
.listing-card, .request-card, .mk-card, .job-card {
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  border: 1px solid var(--border); background: var(--card);
}
.listing-card:hover, .request-card:hover, .mk-card:hover, .job-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-dark);
}

/* ── ROZETLER — premium, markaya özgü ── */
.badge {
  border-radius: var(--r-full); font-weight: 700; font-size: 11px;
  letter-spacing: .02em; padding: 4px 11px;
}
.badge.verified, .badge.official {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff; box-shadow: var(--shadow-sm);
}

/* ── TOPBAR / NAV — premium his ── */
.topnav, .topbar { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
.topnav-link { border-radius: 10px; font-weight: 600; }
.topnav-link:hover, .topnav-link.active { background: var(--primary-light); color: var(--primary); }

/* ── EMPTY STATE — davetkar ── */
.feed-empty, .mk-empty, .am-empty {
  background: var(--card); border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg); color: var(--muted);
}

/* ── SAYFALAMA / LOAD MORE ── */
.feed-load-more .btn { border-radius: var(--r-full); }

/* ── 404 / hata kartı — premium ── */
.error-card, .not-found-card {
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}

/* ── Beğeni animasyonu ── */
@keyframes likePopIn { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* ── Story pulse (görülmemiş) — daha yumuşak ── */
@keyframes storyPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(29,78,216,.3); } 50% { box-shadow: 0 0 0 5px rgba(29,78,216,0); } }
.story-ring:not(.viewed) { animation: storyPulse 2.4s infinite; }

/* Koyu temada feed kart görsel zemini */
[data-theme="dark"] .feed-card-img-wrap { background: #0F1626; }
[data-theme="dark"] .feed-type-badge { background: var(--primary-light); color: var(--primary-hover); }

/* ═══════════════════════════════════════════════════════════════════════════
   BUSTOP İMZA KATMANI — markaya özgü, "hazır şablon" hissini kıran detaylar
   Otobüs/rota dünyasından türetilmiş görsel imza öğeleri
   ═══════════════════════════════════════════════════════════════════════════ */

/* Marka logosu — rota durağı motifi (sidebar başlık) */
.brand-mark, .sidebar-brand-icon {
  position: relative;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important;
  box-shadow: var(--shadow-brand);
}

/* İmza: kartların üstünde ince "rota çizgisi" — durak-durak ilerleyen nokta deseni.
   Sadece official/featured kartlarda, sektörel kimlik hissi verir. */
.feed-card.official-post::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg,
    var(--primary) 0, var(--primary) 14px,
    transparent 14px, transparent 22px);
  opacity: .9;
}
.feed-card.official-post { position: relative; }

/* Bölüm başlıkları için eyebrow — sektörel, küçük, güçlü */
.section-eyebrow, .mk-h1 + .muted, .vf-sub {
  letter-spacing: .01em;
}
.mk-h1 {
  position: relative; padding-left: 14px;
}
.mk-h1::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

/* Rozet — rol bazlı, markaya özgü renk kodları (spotter/foto/kurumsal ayrışır) */
.role-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: var(--r-full);
}
.role-badge.spotter { background: #FCE7F3; color: #BE185D; }
.role-badge.corporate { background: var(--primary-light); color: var(--primary); }
.role-badge.driver { background: #DCFCE7; color: #15803D; }
[data-theme="dark"] .role-badge.spotter { background: #3B1329; color: #F472B6; }
[data-theme="dark"] .role-badge.driver { background: #0E2A1A; color: #4ADE80; }

/* İmza buton dokusu — hafif iç parlama (premium his, oyuncak değil) */
.btn:not(.ghost) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.04));
}

/* Kart görsel alanı — köşe yumuşatma + üstte hafif degrade maske (metin okunurluğu) */
.mk-card-img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,23,42,.06) 0%, transparent 30%);
}

/* Fiyat vurgusu — markaya özgü, güçlü ama zarif */
.mk-price, .mk-detail-price {
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* Boş durum ikonları — yumuşak daire zemin */
.mk-empty-emoji, .feed-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: var(--r-full);
  background: var(--primary-light); margin: 0 auto 14px;
}

/* Sekme (tabs) altı gösterge — akıcı */
.am-tab.active, .tab.active {
  position: relative;
}

/* Yükleme skeleton kartı hazır sınıfı */
.skeleton-card {
  height: 260px; border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--bg-dark) 25%, var(--border) 37%, var(--bg-dark) 63%);
  background-size: 800px 100%; animation: bt-shimmer 1.4s infinite linear;
}