/* ============================================================
   ARAÇ GELSİN — Design 3 ("Split Konsol") katman stilleri
   ------------------------------------------------------------
   tokens.css'teki RENK ve FONT değişkenlerinin hiçbirini değiştirmez —
   palet (kırmızı vurgu, obsidyen koyu zemin) ve tipografi (Sora/Inter)
   Design 1 ile birebir aynı; yalnızca köşe yarıçapı keskinleştirildi
   (bkz. tokens.css). Bu dosya, Design 2'nin alt-theme.css'i site
   GENELİNİN bileşen dilini nasıl ezdiyse aynı yöntemle, ama TAMAMEN
   FARKLI bir yönde çalışır: Design 1'in ortalanmış/yuvarlak "SaaS"
   hissi ile Design 2'nin yüzen pill/bento "app" hissinin ikisinden de
   uzak, tam genişlik bölünmüş panelli, keskin köşeli, ince kırmızı
   şeritli bir "operasyon konsolu" kompozisyonu: tam-genişlik split
   hero, bağlantı çizgisiz numaralı spec satırları, sol-şeritli kartlar,
   dikey ayraçlı footer. Sadece design-3 kopyasında var.
   ============================================================ */

::selection { background: var(--c-red); color: #fff; }

/* ---------- Header: cam/blur yerine düz zemin + ince kırmızı alt çizgi ---------- */
.site-header { background: var(--c-header-bg-scrolled); backdrop-filter: none; border-bottom: 1px solid var(--c-border); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-red); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
.site-header.is-scrolled::after { transform: scaleX(1); }
.site-header { position: sticky; }

.main-nav ul { gap: var(--sp-1); }
.main-nav a { border-radius: var(--r-sm); }
.main-nav a.nav-cta {
  background: transparent; color: var(--c-red-light); border: 1.5px solid var(--c-red);
}
.main-nav a.nav-cta:hover { background: var(--c-red); color: #fff; border-color: var(--c-red); }

/* ---------- Sabit iletişim butonu: köşeli mühür ---------- */
.call-float { border-radius: var(--r-md); }

/* ============================================================
   HERO — "Operasyon Konsolu": tek panel, tam genişlik bilgi alanı
   (Design 1'in çerçeveli/ortalanmış hero'sunun ve Design 2'nin bento
   ızgarasının karşıtı). Üstte ince kırmızı şerit + hafif blueprint
   dokusu. Rozetler bilerek yuvarlak pill diliyle (.hero__badges,
   pages.css) kalıyor — hemen altındaki .trust şeridi de aynı veriyi
   bölünmüş-çizgili bir bantla gösterdiği için buraya AYNI dili
   (bölünmüş grid) koymak iki neredeyse özdeş şerit üst üste yığardı. */
.console-hero { position: relative; background: var(--c-bg); overflow: hidden; padding-block: var(--sp-16) var(--sp-16); }
.console-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c-red); z-index: 2;
}
.console-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--c-border) 1px, transparent 1px), linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 62% 68% at 82% 12%, #000 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse 62% 68% at 82% 12%, #000 0%, transparent 68%);
}
.console-hero .container { position: relative; z-index: 1; }

/* Hero'nun tamamı iki sütunlu gerçek bir yerleşim: solda başlık/CTA/rozet
   şeridi, sağda uygulama kartı — align-items: stretch ile ikisi de aynı
   satırın üst hizasından başlayıp aynı yükseklikte biter (kısa sütun,
   uzun sütunun boyuna geriliyor). */
.console-hero__row { display: flex; align-items: stretch; gap: var(--sp-10); }
.console-hero__inner { flex: 1 1 auto; min-width: 0; }
.console-hero__inner h1 { margin-top: 0; margin-bottom: var(--sp-5); }
.console-hero__inner .lead { max-width: 58ch; margin-bottom: var(--sp-8); }

.console-hero__apps { flex: 0 0 auto; padding-top: var(--sp-2); }
.console-hero__apps-card {
  /* Zemin/kenarlık/gölge kaldırıldı — artık ayrı bir "kart" paneli değil,
     hero'nun kendi (transparan) zemini üzerinde duran bir içerik bloğu.
     Solla aynı yükseklikte olması için sütun boyunca dikey yayılıyor
     (height: 100%, flex column) — justify-content: flex-end ile tüm blok
     (eyebrow + başlık + rozetler) en alta, sol sütunun bittiği çizgiye
     hizalanıyor; başlık rozetlerin hemen üstünde duruyor. Sadece App
     Store/Google Play rozetleri kendi resmi siyah zeminini koruyor (bkz.
     .store-badge, components.css: bu ikisi temaya göre değişmez). */
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-6) 0; width: 280px;
}
@media (max-width: 1100px) { .console-hero__apps { display: none; } }
.console-hero__apps-card .eyebrow { margin-bottom: var(--sp-3); color: var(--c-red); }
.console-hero__apps-card h3 { color: var(--c-heading); font-size: var(--fs-xl); line-height: 1.2; margin-bottom: var(--sp-4); }
.console-hero__apps-badges { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---------- Hero kapanış ifadesi: rozet şeridinden sonra hero panelinin
   altında kalan boş alanı dolduran büyük, tek satırlık marka konumlandırma
   cümlesi ("Taksi değil. Servis değil. ..."). İki sütunun (başlık +
   uygulama kartı) altında, container'ın tam genişliğinde. ---------- */
.console-hero__statement {
  margin: var(--sp-10) 0 0; padding-top: var(--sp-6); max-width: 640px;
  border-top: 1px solid var(--c-border);
  font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: var(--fs-lg); line-height: var(--lh-base); color: var(--c-text);
}

/* ---------- Hero rozetleri: .trust kaldırıldığı için (aynı 3 rakamı
   tekrar ediyordu) tek gösterim burada — açıklama satırını da taşıyor.
   Zemin, hero'nun arkasındaki mavi baskı dokusuna karşı net bir "ortak
   bölge" (Gestalt) oluşturması için tam opak karta çevrildi.
   ------------------------------------------------------------
   Paylaşılan temel bunu flex-wrap + min-width ile diziyordu: kartlar bir
   satıra tam sığmayınca sonuncusu tek başına alt satıra düşüp sola
   yaslanıyor, sıradaki boşluğu doldurmuyordu — dengesiz/amatör duruyordu.
   Sabit 3 sütunlu grid de aynı sorunu 4. kart eklendiğinde (bkz. admin'de
   eklenen "B2B" rozeti) yeniden yaratıyordu. auto-fit + minmax ile sütun
   sayısı mevcut rozet sayısına göre kendini ayarlıyor, her satır sona
   kadar eşit dolduruluyor. ---------- */
.hero__badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: stretch; }
.hero__badges li {
  align-items: flex-start; background: var(--c-card); box-shadow: var(--shadow-sm);
  min-width: 0;
}
.hero__badges li:hover { background: var(--c-card); box-shadow: var(--shadow-md); }
.hero__badge-desc { display: block; font-size: var(--fs-xs); color: var(--c-text-light); margin-top: 2px; }
@media (max-width: 640px) {
  .hero__badges { grid-template-columns: 1fr; }
}

/* ============ STATS BAND: gradyan yerine düz zemin + üst kırmızı çizgi ============ */
.stats { background: var(--c-surface); border-block: 1px solid var(--c-border); border-top: 2px solid var(--c-red); }

/* ---------- Hedef / goal banner ----------
   Önceki sürüm sol kırmızı şerit taşıyordu; içerik (rozet + cümle) mobilde
   sarınca şerit orantısız uzuyordu. Şerit kaldırıldı; dar ekranda rozet ve
   metin satır yerine üst üste (column) diziliyor. */
.goal-banner { border-radius: var(--r-sm); }
@media (max-width: 560px) { .goal-banner { flex-direction: column; align-items: flex-start; } }

/* ---------- Süreç adımları: dairesel + noktalı bağlantı yerine
   numaralı, düz spec satırları. Vurgu artık sol şerit yerine zeminle
   veriliyor (hover'da arka plan değişir). Dar ekranda numara + başlık +
   açıklama tek satırda sıkışmasın diye column'a geçiyor. */
.process { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--c-border); }
.process__step {
  display: flex; align-items: center; gap: var(--sp-6); text-align: left; padding: var(--sp-6) var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.process__step:hover { background: var(--c-overlay-1); padding-left: var(--sp-4); }
.process__step-num {
  flex-shrink: 0; margin: 0; width: 52px; height: 52px; border-radius: var(--r-sm);
  background: var(--c-card); border: 1.5px solid var(--c-border-strong); color: var(--c-red-light);
}
.process__step:hover .process__step-num { transform: none; }
.process__step::before { display: none; }
.process__step h3 { margin-bottom: 2px; }
.process__step p { font-size: var(--fs-sm); }
@media (max-width: 560px) {
  .process__step { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* ---------- CTA band ----------
   Sol şerit kaldırıldı: mobilde metin ortalanınca (aşağıdaki media query)
   tek taraflı bir şeritle asimetrik duruyordu. */
.cta-band {
  border-radius: var(--r-sm); background: var(--c-card); border: 1px solid var(--c-border);
  text-align: left; padding: var(--sp-12) var(--sp-10);
}
.cta-band h2, .cta-band p { text-align: left; margin-left: 0; margin-right: 0; }
.cta-band .hero-actions { justify-content: flex-start; }
@media (max-width: 767px) { .cta-band { text-align: center; } .cta-band h2, .cta-band p { text-align: center; } .cta-band .hero-actions { justify-content: center; } }

/* ---------- Sayfa başlığı ----------
   background önceden ezilmemişti — components.css'teki gradyan hâlâ
   uygulanıyordu (gözden kaçmıştı). */
.page-head { background: var(--c-bg); overflow: visible; }
.page-head::after { display: none; }

/* ---------- Karşılaştırma tablosu: köşeler zaten keskin (tokens.css) ---------- */
.compare-table thead th.compare-table__highlight-col { border-bottom: 2px solid var(--c-red); }

/* ============================================================
   KİMLİK AYRIŞTIRMA — feature/fleet kartları şu ana kadar hiç
   ezilmemişti; components.css'teki paylaşılan yuvarlak kart + soft-kırmızı
   daire ikon + hover-lift dilini birebir kullanıyorlardı (design-2 ve
   root ile aynı). Bu, design-3'ü "aynı ürünün başka rengi" gibi
   gösteriyordu. Aşağıdaki kurallar bu bileşenleri de "operasyon konsolu"
   kimliğine (düz, gölgesiz, teknik/mono rakamlı) bağlıyor. Sadece
   design-3'te var; root/design-2 etkilenmiyor.
   ============================================================ */
.lift:hover { transform: none; box-shadow: none; border-color: var(--c-border-strong); }

.feature-card { box-shadow: none; transition: border-color var(--dur) var(--ease); }
.feature-card__icon {
  background: transparent; border: 1.5px solid var(--c-border-strong); border-radius: var(--r-sm); color: var(--c-red);
}

/* Aynı daire-ikon + hover-zıplama kalıbı iletişim sayfasında (hızlı
   iletişim kartları, form rozeti, iletişim listesi) ve filo/yönetim
   panelindeki satır ikonlarında da tekrarlanıyordu. */
.quick-contact-card { box-shadow: none; transition: border-color var(--dur) var(--ease); }
.quick-contact-card:hover { transform: none; box-shadow: none; }
.quick-contact-card__icon, .contact-card__badge, .feature-row__icon {
  background: transparent; border: 1.5px solid var(--c-border-strong); border-radius: var(--r-sm); color: var(--c-red);
}
.management-visual .stat-tile:hover { transform: none; }

.fleet-card { box-shadow: none; }
.fleet-card__media img { transition: none; }
.fleet-card:hover .fleet-card__media img { transform: none; }

/* Sayısal göstergeler (adım no, problem no, sayaç) artık mono genişlikli
   bir yazı tipiyle — "teknik okuma/konsol" hissi, design-2'nin yuvarlak
   Sora rakamlarından bilerek uzak. */
.problem-num, .process__step-num, .stat__num {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ---------- Footer: dikey ayraçlar ---------- */
.site-footer .footer-grid > div { position: relative; padding-left: var(--sp-8); }
.site-footer .footer-grid > div:first-child { padding-left: 0; }
.site-footer .footer-grid > div::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--c-border-strong);
}
.site-footer .footer-grid > div:first-child::before { display: none; }
@media (max-width: 1023px) { .site-footer .footer-grid > div { padding-left: 0; } .site-footer .footer-grid > div::before { display: none; } }