/* ===========================================================
   VIP Taksi Çanakkale — Tema
   2026-08-10

   Amaç: siteyi canakkalekepeztaksi.com'un sıcak (krem + altın)
   kimliğinden ayırmak. Kepez'in renkleri bu sitede HİÇ
   kullanılmaz.

   Yöntem: style.css ve legacy-shell.css içindeki 258 sabit renk
   "açıklık koruyan takas" ile soğuk karşılıklarına çevrildi
   (altın→gök mavisi, krem→soğuk beyaz, lacivert→arduvaz).
   Açıklık korunduğu için mevcut metin/zemin kontrastları bozulmadı.

   Bu dosya en son yüklenir; token'ları sabitler, tipografiyi
   değiştirir ve rota odaklı bileşenleri ekler.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  /* --- VIP paleti (soğuk, açık zemin) --- */
  --vip-ink:      #0F172A;   /* koyu arduvaz — başlık ve metin */
  --vip-body:     #334155;   /* gövde metni */
  --vip-muted:    #64748B;   /* ikincil metin */
  --vip-bg:       #F8FAFC;   /* sayfa zemini */
  --vip-surface:  #FFFFFF;   /* kart yüzeyi */
  --vip-surface2: #F1F5F9;   /* ikincil yüzey */
  --vip-line:     #E2E8F0;   /* çizgi/kenarlık */

  --vip-accent:       #0284C7;  /* dolu buton, beyaz metinle AA kontrast */
  --vip-accent-dark:  #075985;  /* hover */
  --vip-accent-bright:#38BDF8;  /* vurgu zemini, koyu metinle */
  --vip-accent-tint:  #E0F2FE;  /* çok açık vurgu zemini */

  --vip-radius: 4px;            /* oval yok: köşeli */
}

/* --- Tipografi: Kepez Syne/Cabinet Grotesk kullanıyor, VIP Space Grotesk --- */
h1,h2,h3,h4,.vip-display{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  letter-spacing:-0.015em;
  color:var(--vip-ink);
}

/* --- Oval biçim yasağı --- */
.button,.btn,button,input[type=submit],
[class*="rounded"],[class*="pill"]{
  border-radius:var(--vip-radius) !important;
}

/* --- Bileşenler --- */
.vip-wrap{max-width:1180px;margin:0 auto;padding:0 20px;}

.vip-card{
  background:var(--vip-surface);
  border:1px solid var(--vip-line);
  border-radius:var(--vip-radius);
  padding:24px;
}

.vip-btn{
  display:inline-block;
  background:var(--vip-accent);
  color:#FFFFFF;
  border:0;
  border-radius:var(--vip-radius);
  padding:14px 22px;
  font-weight:600;
  text-decoration:none;
  transition:background .18s ease;
}
.vip-btn:hover{background:var(--vip-accent-dark);color:#FFFFFF;}

.vip-btn-ghost{
  background:transparent;
  color:var(--vip-accent);
  border:1px solid var(--vip-line);
}
.vip-btn-ghost:hover{border-color:var(--vip-accent);background:var(--vip-accent-tint);}

.vip-muted{color:var(--vip-muted);}

/* --- Rota kartı ızgarası: anasayfanın omurgası --- */
.vip-route-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}

.vip-route-card{
  background:var(--vip-surface);
  border:1px solid var(--vip-line);
  border-left:3px solid var(--vip-accent-bright);
  border-radius:var(--vip-radius);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.vip-route-card__route{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:1.05rem;
  font-weight:600;
  color:var(--vip-ink);
}
.vip-route-card__meta{
  display:flex;
  gap:18px;
  color:var(--vip-muted);
  font-size:.9rem;
  border-top:1px solid var(--vip-line);
  padding-top:10px;
  margin-top:auto;
}

/* --- Nereden → Nereye seçim bloğu --- */
.vip-od-picker{
  display:grid;
  grid-template-columns:1fr auto 1fr auto;
  gap:12px;
  align-items:center;
  background:var(--vip-surface);
  border:1px solid var(--vip-line);
  border-radius:var(--vip-radius);
  padding:16px;
}
.vip-od-picker select,.vip-od-picker input{
  width:100%;
  background:var(--vip-surface);
  color:var(--vip-ink);
  border:1px solid var(--vip-line);
  border-radius:var(--vip-radius);
  padding:12px 14px;
  font-family:inherit;
}
.vip-od-picker__arrow{color:var(--vip-accent);font-weight:700;}

/* --- Yolculuk planlama adım çizelgesi --- */
.vip-timeline{list-style:none;margin:0;padding:0;}
.vip-timeline li{
  position:relative;
  padding:0 0 22px 28px;
  border-left:1px solid var(--vip-line);
}
.vip-timeline li:last-child{border-left-color:transparent;padding-bottom:0;}
.vip-timeline li::before{
  content:"";
  position:absolute;
  left:-4px;top:5px;
  width:7px;height:7px;
  background:var(--vip-accent);
}
.vip-timeline__time{
  display:block;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:600;
  color:var(--vip-accent);
  margin-bottom:2px;
}

/* --- Bölüm başlığı --- */
.vip-section-head{margin:0 0 20px;}
.vip-section-head h2{margin:0 0 6px;font-size:1.6rem;}
.vip-section-head p{margin:0;color:var(--vip-muted);}

/* --- Mobil --- */
@media (max-width:768px){
  .vip-od-picker{grid-template-columns:1fr;}
  .vip-od-picker__arrow{transform:rotate(90deg);justify-self:start;}
  .vip-route-grid{grid-template-columns:1fr;}
  .vip-btn,.vip-btn-ghost{display:block;text-align:center;min-height:44px;}
  .vip-section-head h2{font-size:1.35rem;}
}