/* GTI Tır Parkı — public arayüz.
   Tek şablon, breakpoint ile mobil/masaüstü. Arapça için yön RTL'ye döner.
   Dış bağımlılık yok: CDN, web font, @import kullanılmıyor — sürücülerin çoğu
   sınır kapısında zayıf mobil veriyle bağlanıyor, her ek istek açılışı geciktirir. */

:root {
  /* Kurumsal mavi. --primary yalnız çizgi/kenarlık/vurgu için: beyaz üzerinde
     4.74:1 kalıyor ve metin için sınırda. Metin ya da beyaz yazı taşıyan zeminde
     --primary-strong (6.6:1) veya --primary-dark (7.3:1) kullanılır. */
  --primary:        #0f7ab0;
  --primary-strong: #0b6390;
  --primary-dark:   #0a5c86;
  --primary-soft:   #e7f1f8;

  --bg:            #eef2f7;
  --surface:       #ffffff;
  --surface-muted: #f1f5f9;
  --border:        #cbd5e1;
  --border-soft:   #e2e8f0;

  /* Metin renkleri. Sürücü ekrana çoğu zaman gün ışığında, parlamayan olmayan bir
     telefon camından bakıyor; bu yüzden AA sınırında değil rahat üstünde duruluyor:
     --text 17.4:1, --text-soft 10.3:1, --muted 7.6:1, --placeholder 4.8:1 (beyaz zemin). */
  --text:          #0f172a;
  --text-soft:     #334155;
  --muted:         #475569;
  --placeholder:   #64748b;

  --dark:          #101828;
  --dark-2:        #1c2941;

  /* Bekleme süresi skalası yeşil→sarı→turuncu→kırmızı. Hepsi beyaz zeminde
     metin olarak da kullanıldığı için 4.9:1 altına inen ton seçilmedi. */
  --ok:            #15803d;
  --warn:          #b45309;
  --orange:        #c2410c;
  --danger:        #b91c1c;

  --radius:        10px;
  --radius-sm:     6px;
  --gutter:        16px;
  --gap:           16px;
  --shadow:        0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --tap:           44px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* 16px taban: 15px'te küçük gri metinler ("soluk" şikâyetinin diğer yarısı)
     360px'lik bir ekranda gözle seçilemiyordu. */
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* 360px'te yatay kaydırma olmasın: uzun plaka/park adları taşmak yerine kırılır. */
  overflow-wrap: break-word;
}

[dir="rtl"] { direction: rtl; }

img { max-width: 100%; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Klavye odağı her yerde görünür; fare tıklamasında halka çıkmaz. */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Vestibüler duyarlılığı olan kullanıcı için tüm geçişler kapanır; yalnız
   süreler sıfırlanır, durum değişiklikleri (renk/kenarlık) yerinde kalır. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Üst bar ---------- */
/* Bar üç bölgeye ayrılıyor: kurum logoları (başlangıç) — sayfa adı — dil seçici
   (bitiş). Eskiden altı öğe de aynı boşlukla yan yana diziliyordu; logo ile başlık
   tek bir blok gibi okunuyor, hangisinin ne olduğu ayırt edilmiyordu. Artık logo
   bloğu ile başlık arasında hem daha geniş bir boşluk hem ince bir ayraç var. */
.topbar {
  display: flex;
  align-items: center;
  /* Satır arası (10px) sütun arasından (18px) küçük: bayrak şeridi alta indiğinde
     satırlar birbirine yapışmasın ama yatayda bölgeler ayrık kalsın. */
  gap: 10px 18px;
  padding: 12px var(--gutter);
  background: var(--dark);
  color: #fff;
  flex-wrap: wrap;
  /* Altındaki sekme şeridi de koyu; bu ince çizgi olmadan iki bant tek parça
     görünüyor ve üst bar bitmemiş duruyordu. */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .09);
}
.topbar :focus-visible { outline-color: #fff; }

/* Logo bir bağlantı: dokunma hedefi görselin yüksekliğine bırakılmaz, butonun
   kendisi 44px'i garanti eder. */
.brand {
  display: flex;
  align-items: center;
  flex: none;
  min-height: var(--tap);
  padding-inline: 2px;
  border-radius: var(--radius-sm);
}
/* Amblem dairesel: yüksekliği TOBB'unkiyle aynı 54px. İki kurum logosu yan
   yana duruyor, biri diğerinden büyük olunca aralarında olmayan bir hiyerarşi
   kuruluyordu. Eski geniş yazı logosu 36px'ti; daire aynı yükseklikte çok daha
   küçük görünüyor, çünkü markanın kendisi dairenin ancak ortasını kaplıyor. */
.brand img { height: 54px; width: auto; display: block; }

/* Üst bardaki iki kurum logosu arasındaki ince ayırıcı. Yüksekliği sabit:
   align-self: stretch ile 44px'lik dokunma alanı boyunca uzayıp logodan
   daha baskın bir çizgi haline geliyordu. */
/* TOBB amblemi siyah yazılı şeffaf bir PNG; koyu üst barda yazı tamamen kayboluyor
   ve yalnız ortadaki renkli şekil görünüyordu. Beyaz yuvarlak bir zemine oturtuluyor:
   başka bir kurumun logosunu yeniden renklendirmek yerine doğru zeminini vermek
   hem okunur hem de marka açısından doğru olan. */
.brand-tobb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
  flex: none;
}
.brand-tobb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Başlık: logonun yanında küçük gri bir alt yazı değil, sayfanın adı.
   Başlangıç kenarındaki dikey çizgi kurumsal logo bloğunu sayfa adından ayırıyor;
   tek başına boşluk bu ayrımı kurmaya yetmiyordu. */
.topbar-title {
  min-width: 0;
  padding-inline-start: 18px;
  border-inline-start: 1px solid rgba(255, 255, 255, .2);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  letter-spacing: -.01em;
}
.topbar .spacer { flex: 1 1 0; min-width: 0; }

/* ---------- Dil seçimi (açılır menü) ---------- */
/* 11 dil bayrak şeridi olarak mobil ekrana sığmıyordu: bayraklar sıkışıp alt
   satıra taşıyor, üst bar dağılıyordu. Tetikleyici tek bir düğme, diller
   panelde. <details> olduğu için JavaScript gerekmiyor. */
.lang-menu { position: relative; flex: none; }

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap);
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  /* Varsayılan açılma üçgeni gizleniyor; yerine kendi oku konuyor. */
  list-style: none;
}
.lang-trigger::-webkit-details-marker { display: none; }
/* Yalnız bayrak, düğmenin ne işe yaradığını anlatmıyordu — bayrağı ülke seçimi
   sanan kullanıcı oluyor (formda ayrıca gerçek bir ülke seçici var). Çeviri
   ikonu yerleşik bir simge; okuma bilmeyen sürücü de tanır. */
.lang-icon {
  width: 19px;
  height: 19px;
  color: rgba(255, 255, 255, .9);
  flex: none;
}
.lang-trigger:hover { background: rgba(255, 255, 255, .18); }
.lang-trigger img {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  /* Beyaz şeritli bayraklar (Bulgaristan, Polonya) koyu zemine karışmasın. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
  flex: none;
}
.lang-caret {
  width: 0;
  height: 0;
  border-inline-start: 5px solid transparent;
  border-inline-end: 5px solid transparent;
  border-top: 6px solid rgba(255, 255, 255, .8);
  flex: none;
}
.lang-menu[open] .lang-caret { transform: rotate(180deg); }

.lang-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 232px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .28);
  /* Kısa ekranlarda liste ekranı taşmasın. */
  max-height: 70vh;
  overflow-y: auto;
}
.lang-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: var(--tap);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
}
.lang-item img {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
  flex: none;
}
.lang-item:hover { background: var(--surface-muted); }
.lang-item.is-current { background: var(--primary-soft); font-weight: 700; }

/* Dar ekranda dilin adı yerine yalnız bayrak ve ok: üst barda logo, başlık ve
   TOBB amblemiyle birlikte tek satırda kalması gerekiyor. */
@media (max-width: 519px) {
  .lang-trigger { padding: 6px 10px; gap: 7px; }
  .lang-trigger-name { display: none; }
}

/* ---------- Sekmeler ---------- */
/* Sekmeler: seçili olan SAYFANIN KENDİSİ gibi görünüyor.

   Önceki hâlde seçim yalnız 3px alt çizgi ve %8 beyazla belirtiliyordu; koyu
   lacivert üzerinde ikisi de neredeyse görünmüyordu ve hangi sekmede olduğunuz
   ancak dikkatle bakınca anlaşılıyordu.

   Şimdi seçili sekme aşağıdaki içerik alanıyla aynı açık zemini alıyor ve üst
   köşeleri yuvarlanıyor: klasik sekme eğretilemesi. Sekme "içeriğe bağlı"
   göründüğü için hangi sayfada olduğunuz bakar bakmaz anlaşılıyor, renk körlüğü
   olan biri için de çalışıyor — ayrım renkte değil, biçimde. */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--dark-2);
  padding: 6px var(--gutter) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 11px 20px;
  /* #cdd8e8 koyu lacivert üzerinde 10.1:1 */
  color: #cdd8e8;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  border-radius: 10px 10px 0 0;
  transition: background-color .12s ease, color .12s ease;
}

.tab:hover { color: #fff; background: rgba(255, 255, 255, .10); }

.tab.is-active {
  background: var(--bg);
  color: var(--primary-dark);
  font-weight: 700;

  /* Alttaki içerik alanıyla arasında çizgi kalmasın: sekme oraya bağlı görünmeli.
     1px taşırma, yuvarlatmadan kalan ince boşluğu kapatıyor. */
  margin-bottom: -1px;
  padding-bottom: 12px;
}

.tab.is-active:hover { background: var(--bg); color: var(--primary-dark); }

.tabs :focus-visible { outline-color: #fff; outline-offset: -3px; }

@media (max-width: 560px) {
  /* Dar ekranda sekmeler genişliği paylaşsın: dokunma hedefi büyür ve artan
     boşluk tek bir sekmenin ucunda birikmez. */
  .tabs { padding-inline: 8px; }
  .tab { flex: 1; justify-content: center; padding-inline: 12px; }
}

@media (max-width: 430px) {
  /* Üçüncü sekme (Randevu) eklendikten sonra "Bekleme Süreleri" + "Araç
     Sorgulama" + "Randevu" bu genişlikte yan yana sığmıyor; şerit yatay
     kaydırmaya düşüyor ve son sekme ekranın dışında kalıyordu. Punto ve iç
     boşluk küçülünce üçü de görünür oluyor: kaydırmadan fark edilmeyen bir
     sekme, olmayan sekmedir. */
  .tab { font-size: 14px; padding-inline: 8px; }
}

/* ---------- Düzen ---------- */
.wrap {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px var(--gutter) 48px;
}

/* /bekleme'de kartlar doğrudan .wrap içinde alt alta geliyordu ve birbirine
   yapışıyordu. Kart aralığı burada veriliyor; .query-layout / .result-flow
   kendi grid boşluğunu kullandığı için sorgu sayfası etkilenmiyor. */
.wrap > .card { margin-bottom: var(--gap); }
.wrap > .card:last-of-type { margin-bottom: 4px; }

.page-head { margin: 4px 0 18px; }
h1 {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--text);
}
@media (max-width: 520px) { h1 { font-size: 21px; } }
.page-desc { margin: 0; color: var(--text-soft); }

/* ---------- Park seçici (buton) ---------- */
.site-picker { margin-bottom: 20px; }
.site-picker-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  /* Eskiden büyük harf + geniş harf aralıklı soluk gri idi; küçük puntoda
     büyük harf okumayı yavaşlatıyor, üstelik kart başlıklarıyla karışıyordu. */
  color: var(--text-soft);
}

/* minmax(min(100%, 240px), …): dar ekranda 240px'e sığmayan ikinci sütun
   açılmaz, yani park adı ("Cilvegözü") asla kırpılmaz; 600px'ten sonra iki,
   ~760px'ten sonra üç sütun kendiliğinden oluşur. */
.site-picker-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px;
}
.site-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  transition: border-color .12s, background-color .12s;
}
.site-btn:hover { border-color: var(--primary); background: #f8fbfe; }

/* İki harflik rozet: üç parkı okumadan, yalnız biçimden ayırt etmeyi sağlıyor. */
.site-btn-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}
.site-btn-body { min-width: 0; }
.site-btn-name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}
/* Seçili park yalnız renkle değil, onay işaretiyle de belirtiliyor. */
.site-btn-state {
  position: relative;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex: none;
}
/* Seçili park dört ayrı işaretle belirtiliyor: kalın renkli kenarlık, dışındaki
   halka, sol kenardaki dolu şerit ve dolu onay dairesi. Tek başına renk farkı
   yetmiyordu — seçilmemiş kartların kenarlığı da açık mavimsi olduğu için ikisi
   bir bakışta ayrılmıyordu. Halka ve şerit renkten bağımsız biçim ipuçları,
   renk körlüğünde de görünür. */
.site-btn.is-current {
  border-color: var(--primary-strong);
  background: var(--primary-soft);
  box-shadow: 0 0 0 3px rgba(15, 122, 176, .22), 0 2px 6px rgba(15, 23, 42, .1);
  /* Sol şerit için: kenarlık zaten 2px, üzerine iç gölge ile 5px'lik dolu bant. */
  background-image: linear-gradient(to right, var(--primary-strong) 0 5px, transparent 5px);
  padding-inline-start: 19px;
}

/* Seçilmemiş kartların kenarlığı nötr gri: mavimsi bırakıldığında seçili olanla
   aynı aileden görünüp ayrımı zayıflatıyordu. */
.site-btn:not(.is-current) { border-color: #d5dbe3; }
.site-btn.is-current .site-btn-mark {
  background: var(--primary-strong);
  color: #fff;
}
/* Seçili parkın adı KOYU RENK alır, zemin değil. Burada background yazılıydı ve
   ada koyu lacivert bir şerit çekiyordu — metin seçilmiş gibi görünüyordu. */
.site-btn.is-current .site-btn-name { color: var(--primary-dark); }

/* Onay dairesi dolar. Önceki seçici ".site-btn.is-current" sınıfını iki kez
   zincirlediği için HİÇBİR ZAMAN eşleşmiyordu: seçili park işaretlenmiş
   görünmüyordu. */
.site-btn.is-current .site-btn-state {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
}

/* Arapça ve Farsça sayfada şerit sağ kenara geçmeli; linear-gradient yön duyarlı
   değil, bu yüzden RTL'de ayrıca yazılıyor. */
[dir="rtl"] .site-btn.is-current {
  background-image: linear-gradient(to left, var(--primary-strong) 0 5px, transparent 5px);
}
.site-btn.is-current .site-btn-state::after {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- Sorgu sayfası düzeni ---------- */
.query-layout { display: grid; gap: 18px; align-items: start; }
@media (min-width: 860px) {
  .query-layout { grid-template-columns: 360px 1fr; }
  .query-card { position: sticky; top: 16px; }
}

/* Sonuç tek akış: durum → sıra → durum geçmişi → kayıt bilgileri.
   Önceki düzende geçmiş ve detay ayrı kolondaydı, okuma sırası kopuyordu. */
.result-flow { display: grid; gap: var(--gap); align-content: start; }

.empty-state {
  margin: 0;
  padding: 28px 20px;
  text-align: center;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ---------- Kart ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Kart başlığı. Eski hali gri zemin üzerinde gri, büyük harf, 13px'lik bir
   şeritti: hem soluk hem okuması yavaş. Artık beyaz zeminde normal yazımlı
   koyu metin (17.4:1) ve başlangıç kenarında renkli bir vurgu çubuğu —
   başlık kart içeriğinden ayrılıyor ama gürültü çıkarmıyor. */
.card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
/* Kart başlığının altındaki park toplamları. KAPASİTE DEĞİL, yalnız o an sırada
   bekleyen araç sayısı: kapasite kapıdan gelmiyor, yazılsaydı elle güncellenen ve
   eninde sonunda yanlış olan bir sayı olurdu. */
.kart-toplam {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-muted);
}

/* Her toplam kendi rozetinde. Düz yan yana iki cümleyken başlığın altına
   iliştirilmiş bir dipnot gibi duruyordu; rozet onları kartın kendi bilgisi
   hâline getiriyor ve dar ekranda alt alta düzgün kırılıyor. */
.kart-toplam > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  /* Rozet ortasından bölünmesin; sığmazsa komple alt satıra insin. */
  white-space: nowrap;
}

/* Sayı rozetin asıl bilgisi: etiket soluk, sayı koyu ve bir punto büyük.
   tabular-nums, tazelemede sayı değişince rozetin genişliğini oynatmıyor. */
.kart-toplam b {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.card-header::before {
  content: "";
  flex: none;
  width: 4px;
  align-self: stretch;
  min-height: 18px;
  border-radius: 999px;
  background: var(--primary);
}
.card-body { padding: 16px; }
.stack { display: grid; gap: 14px; }

/* Kuyruk kartı bekleme skalasının rengini taşıyor (JS .card'a .w-* ekliyor).
   1px'lik kenarlıkta bu renk görünmüyordu; başlangıç kenarı kalınlaştırılıp
   başlık çubuğu da aynı renge çekiliyor. */
.card.w-ok,
.card.w-mid,
.card.w-high,
.card.w-crit { border-inline-start-width: 5px; }
.card.w-ok   { border-inline-start-color: var(--ok); }
.card.w-mid  { border-inline-start-color: var(--warn); }
.card.w-high { border-inline-start-color: var(--orange); }
.card.w-crit { border-inline-start-color: var(--danger); }
.card.w-ok   > .card-header::before { background: var(--ok); }
.card.w-mid  > .card-header::before { background: var(--warn); }
.card.w-high > .card-header::before { background: var(--orange); }
.card.w-crit > .card-header::before { background: var(--danger); }

/* ---------- Form ---------- */
.field { display: grid; gap: 6px; }
.field-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
}
.field input,
.field select,
.phone-row input,
.phone-row select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  /* 16px altı yazı iOS Safari'de alana odaklanınca sayfayı zorla yakınlaştırır. */
  font-size: 16px;
  background: #fff;
  color: var(--text);
}
.field input::placeholder,
.phone-row input::placeholder { color: var(--placeholder); opacity: 1; }
.field input:focus,
.field select:focus,
.phone-row input:focus,
.phone-row select:focus {
  outline: 2px solid var(--primary-strong);
  outline-offset: -1px;
  border-color: var(--primary-strong);
}
.input-plate {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
/* Ülke butonu içeriği kadar yer alır (bayrak + "TR +90" + ok); numara alanı
   kalanı doldurur. Sabit genişlikli bir sütun, uzun arama kodlarında ("+359")
   içeriği satır kırdırıyordu. */
.phone-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.phone-row > .country-field { flex: 0 0 auto; }
.phone-row > input { flex: 1 1 auto; min-width: 0; }

/* Ülke kodu seçimi. Tarayıcının yerleşik oku kutuya sığmıyor, bazı Android
   sürümlerinde kenarda kırpılıyordu; ok kapatılıp kendi SVG'miz çiziliyor.
   Gömülü SVG, dış istek doğurmadığı için tek dosya kuralını bozmuyor. */
.country-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-variant-numeric: tabular-nums;
  padding-inline-end: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: right 12px center;
}
/* RTL'de okun kendisi aynalanmaz ama yeri değişir: padding-inline-end zaten
   sol tarafta açıldığı için ok da sola alınır. background-position'ın
   mantıksal karşılığı olmadığından tek yön istisnası burada. */
[dir="rtl"] .country-select { background-position: left 12px center; }
.country-select::-ms-expand { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn:hover { background: var(--surface-muted); border-color: #94a3b8; }
/* Beyaz yazı --primary üzerinde 4.74:1 ile sınırda kalıyordu; bir ton koyu
   --primary-strong ile 6.6:1'e çıkıyor ve buton "soluk" görünmüyor. */
.btn-primary {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(11, 99, 144, .3);
}
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-primary:disabled { opacity: .7; cursor: progress; }
.btn-block { width: 100%; }
/* Bekleme sayfasının altındaki eylem çağrısı.

   Eskiden beyaz zeminli, ince çerçeveli bir "geri dön" bağlantısıydı: sayfanın
   geri kalanıyla aynı renkteydi ve bir düğme olduğu bile zor anlaşılıyordu.
   Oysa sürücünün bu sayfadan sonra yapacağı asıl iş bu — kendi aracını sorgulamak.

   Dolgulu ve büyük: sayfadaki tek birincil eylem, öyle görünmeli. Üstünde ayırıcı
   bir çizgi var ki alt nottan kopsun, notun devamı gibi okunmasın. */
.cta-sorgula {
  margin-top: 24px;
  padding-top: 16px;
  font-size: 17px;
  min-height: 52px;
  box-shadow: 0 2px 8px rgba(15, 122, 176, .25);
}

.cta-sorgula::before {
  content: '';
  display: block;
}

/* Ayırıcı düğmenin kendisine değil, üstündeki boşluğa çiziliyor. */
.cta-ayirici {
  margin: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
}

.alert {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  border: 1px solid #f19a9a;
  /* #991b1b açık kırmızı zeminde 7.4:1 — hata mesajı en okunur metin olmalı. */
  color: #991b1b;
  font-size: 15px;
  font-weight: 600;
}
.hint { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------- Durum kartı ---------- */
.status-card { border-inline-start: 5px solid var(--border); padding: 18px 16px; }
/* Plakanın üstündeki park adı. Küçük ve soluk: asıl bilgi plaka, bu onu
   konumlandıran bağlam. Harf aralığı plakanınkiyle aynı değil — plaka aralıklı
   yazıldığı için ikisi aynı olsaydı iki satır tek bir blok gibi okunurdu. */
.status-card .park-adi {
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
}

.status-card .plate {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .05em;
}
.status-card .sub { margin-top: 10px; color: var(--text-soft); }

.badge {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.s-out   { border-inline-start-color: var(--warn); }
.s-call  { border-inline-start-color: var(--orange); }
.s-in    { border-inline-start-color: var(--primary); }
.s-queue { border-inline-start-color: var(--primary); }
.s-done  { border-inline-start-color: var(--ok); }

/* Rozet renkleri: her biri kendi açık zemininde 5.9:1 üstünde. */
.b-out   { background: #fef3c7; color: #854d0e; }
.b-call  { background: #ffedd5; color: #9a3412; }
.b-in    { background: var(--primary-soft); color: var(--primary-dark); }
.b-queue { background: var(--primary-soft); color: var(--primary-dark); }
.b-done  { background: #dcfce7; color: #166534; }

/* Sırası düşen kayıt kırmızı: sürücünün bir şey yapması gerekiyor (kapı görevlisine
   gitmesi). Durumu henüz belli olmayan kayıt nötr gri — yanlış bir aciliyet
   hissi vermemeli, birkaç dakika içinde kendiliğinden düzeliyor. */
.s-lost  { border-inline-start-color: var(--danger); }
.s-wait  { border-inline-start-color: var(--muted); }
.b-lost  { background: #fee2e2; color: #991b1b; }
.b-wait  { background: #e2e8f0; color: #334155; }

/* ---------- Kuyruk kutusu ---------- */
.queue-hero { padding: 22px 16px 16px; text-align: center; }

/* Sürücünün KENDİ sıra numarası sayfanın en büyük sayısı.
   Önceden buradaki sayı "önünüzde kaç araç var" idi ve sürücünün kendi sırası
   dört eşit kutucuktan biriydi: asıl merak edilen bilgi ekranın en silik
   yerinde duruyordu. */
.queue-hero .sira {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--primary-dark);
}
.queue-hero .sira-label { margin-top: 6px; font-weight: 700; color: var(--text); }

/* Aynı bilgi ikinci bir açıdan: sıra no = önündeki araç + 1. Büyük sayının ne
   anlama geldiğini doğruluyor ve kuyruğun başındakine "önünüzde 0 araç" diyor. */
.queue-hero .onunde { margin-top: 10px; font-size: 14px; color: var(--text-soft); }
.queue-hero .onunde b { font-weight: 700; color: var(--text); }

.queue-meta { display: grid; grid-template-columns: repeat(2, 1fr); }
/* Sıra no hero'ya çıkınca kutucuk sayısı 4'ten 3'e indi. Dar ekranda 2+1
   diziliyor; tek kalan sonuncu satırı doldursun ki yarım hücre boşluğu kalmasın. */
.queue-meta > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .queue-meta { grid-template-columns: repeat(3, 1fr); }
  .queue-meta > div:last-child:nth-child(odd) { grid-column: auto; }
}
.queue-meta > div {
  padding: 12px 8px;
  text-align: center;
  border-inline-end: 1px solid var(--border-soft);
  border-top: 1px solid var(--border-soft);
}
.queue-meta > div:last-child { border-inline-end: none; }
.queue-meta b { display: block; font-size: 18px; font-weight: 700; }
/* 12px + gri, dört kutucuğun altında hiç okunmuyordu: 13px ve bir kademe koyu. */
.queue-meta span { font-size: 13px; color: var(--text-soft); }

/* Kuyruk kartının KAPSAMI. Sayılar aracın kendi kategori + tarifesinden
   geliyor; kapı da parka ve çıkışa çağırırken bu ikisinin uygunluğuna
   bakıyor. Yazmazsak "önünüzde 0 araç" parkın tamamı sanılıyor.
   Rozet başlıkta, açıklama kartın altında. */
.queue-scope {
  margin-inline-start: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  text-align: end;
}
/* Kapsam notu hero'nun İÇİNDE, "önünüzde N araç" satırının hemen altında:
   büyük sayının neyi saydığını okuyan kişi aynı bakışta görsün. Kartın
   altındayken sayıdan çok uzaktı ve gözden kaçıyordu. Kalın yazılıyor —
   sayıyı park geneli sanmanın maliyeti yüksek. */
.queue-note {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
}

/* ---------- Kategori tablosu ---------- */

/* Sütun şablonu tek yerde: başlık satırı ile veri satırı birebir aynı ızgarayı
   kullanmalı, yoksa başlıklar değerlerin üstüne denk gelmez. */
.cat-head,
.cat {
  padding: 12px 16px;
  /* Veri satırı bekleme rengini sol kenarda taşıyor. Başlık satırına da aynı
     kalınlıkta saydam kenarlık veriliyor; yoksa iki satır 4px kayık duruyor. */
  border-inline-start: 4px solid transparent;
}

/* ÖNEMLİ: taban kurallar medya sorgusundan ÖNCE gelmeli. Medya sorgusu özgüllük
   kazandırmıyor; aynı özgüllükteki bir kural dosyada sonra yazılırsa onu ezer.
   Bu sıra bozulduğunda .cat-split "display: contents" olmaktan çıkıp tek bir
   ızgara hücresine dönüşüyor ve satır 4 yerine 3 sütuna yayılıyordu. */
.cat-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cat-head {
  display: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-soft);
}

.cat {
  display: grid;
  gap: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.cat:last-child { border-bottom: none; }

.cat-main { min-width: 0; }
.cat-name { font-size: 16px; font-weight: 700; display: block; }
.cat-count { display: block; font-size: 13px; color: var(--muted); }
.cat-split > div { font-size: 13px; min-width: 0; }
.cat-split-label { color: var(--muted); }
.cat-split b { display: block; font-size: 17px; font-weight: 700; color: var(--text); }

/* Kuyruktaki araç sayısı, ait olduğu sürenin hemen altında. Süreden küçük ama
   soluk değil: ikinci derece bilgi, gizlenmesi gereken bir ayrıntı değil. */
/* Süre biriminin başlıktaki ipucu. Değerler artık her zaman saat:dakika
   (37:04); birim yazılmazsa "37" saat mi dakika mı belirsiz kalıyor. */
.birim-not {
  margin-inline-start: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: normal;
  text-transform: none;
}

/* Saatin altındaki gün karşılığı. Saatten belirgin şekilde küçük: asıl değer
   saat, bu yalnız okumayı kolaylaştıran ikinci bir okuma. */
.gun-not {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: normal;
}

.cat-total .gun-not { font-size: 12px; font-weight: 500; }

/* Sıradaki araç sayısı kalın: sürücünün sorduğu asıl soru "kaç kişi önümde" ve
   bu satır süre kadar okunuyor. */
.cat-queue {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* Kuyruğu boş olan taraf soluklaşır: "0 araç sırada" ile "14 araç sırada" aynı
   ağırlıkta durursa göz hangisinin dolu olduğunu ayırt edemiyor. */
.cat-queue.is-none { font-weight: 500; color: var(--muted); }
.cat-total { font-size: 20px; font-weight: 700; }

/* Dar ekran: toplam süre kategori adıyla AYNI SATIRDA, sağda.
   Kendi satırında dururken her kategori iki satır daha uzuyordu; dokuz kategoride
   sayfa gereksiz uzuyor ve sürücü aradığı kategoriyi bulmak için kaydırıyordu. */
@media (max-width: 699px) {
  .cat {
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 8px;
  }

  .cat-main {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .cat-total {
    grid-column: 2;
    grid-row: 1;
    text-align: end;
    align-self: center;
  }

  .cat-split {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 700px) {
  .cat-head,
  .cat {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 12px;
    align-items: center;
  }

  /* İki süre hücresi .cat-split kutusundan çıkıp doğrudan satırın sütunlarına
     yerleşiyor; başlıktaki "Dış Park" ve "İç Park" ile aynı hizaya ancak böyle gelir. */
  .cat-split { display: contents; }

  /* Etiketler sütun başlığında zaten var; her satırda tekrarlanınca tablo gürültülü. */
  .cat-split-label { display: none; }

  .cat-head span:last-child,
  .cat-total { text-align: end; }
}

/* Boş kategori soluklaştırılır ama okunaksız hale getirilmez: sırada araç olmaması
   da bir bilgi, gizlenmesi gereken bir durum değil. */
.cat.is-empty .cat-split b,
.cat.is-empty .cat-total { color: var(--muted); font-weight: 600; }
.cat.is-empty .cat-queue { color: var(--muted); font-weight: 500; }

.w-ok   { border-inline-start-color: var(--ok); }
.w-mid  { border-inline-start-color: var(--warn); }
.w-high { border-inline-start-color: var(--orange); }
.w-crit { border-inline-start-color: var(--danger); }
.w-ok   .cat-total { color: var(--ok); }
.w-mid  .cat-total { color: var(--warn); }
.w-high .cat-total { color: var(--orange); }
.w-crit .cat-total { color: var(--danger); }

/* ---------- Durum geçmişi ---------- */
.steps { list-style: none; margin: 0; padding: 16px; display: grid; gap: 14px; }
.steps li {
  position: relative;
  padding-inline-start: 28px;
  color: var(--muted);
}
.steps li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #7c8ba1;
  background: #fff;
}
.steps li.done { color: var(--text); font-weight: 600; }
.steps li.done::before { border-color: var(--ok); background: var(--ok); }
.steps li.current { color: var(--primary-dark); font-weight: 700; }
.steps li.current::before { border-color: var(--primary-strong); border-width: 4px; }
.steps .when { display: block; font-size: 14px; color: var(--muted); font-weight: 400; }
.steps li.current .when { color: var(--text-soft); }

/* ---------- Satırlar ---------- */
.rows { padding: 6px 16px 16px; }
.row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 15px;
}
.row:last-child { border-bottom: none; }
.row .k { color: var(--muted); min-width: 0; }
.row .v { font-weight: 600; text-align: end; color: var(--text); min-width: 0; }
/* Boş değer ayırt edilsin ama okunabilir kalsın: 2.6:1'lik açık gri yerine 7.6:1. */
.row .v.empty { color: var(--muted); font-weight: 400; }

/* ---------- Diğer ---------- */
.foot-note {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* Tazeleme damgası diğer dipnotlardan ayrılıyor: sürücünün ekrandaki sürelere
   güvenip güvenmeyeceğini bu satır söylüyor, yasal uyarı gibi okunmamalı. */
#updatedAt { font-weight: 700; color: var(--text-soft); }
[hidden] { display: none !important; }

/* ---------- Alt bilgi ---------- */
/* Sayfanın en altında koyu bir şerit: içerikle karışmasın diye zemin değiştiriyor.
   Geniş ekranda telif başlangıç, geliştirici künyesi bitiş kenarında duruyor.
   Eskiden ikisi de ortalanmış alt alta iki satırdı; künye telif satırının hemen
   altında, aynı eksende olduğu için ondan daha çok göze çarpıyordu. Ayrı uçlarda
   punto/renk farkı hiyerarşiyi kendiliğinden kuruyor, künyeyi ne büyütmek ne de
   okunmayacak kadar soluklaştırmak gerekiyor. */
.site-footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 36px;
  padding: 12px var(--gutter);
  background: var(--dark);
  color: #cdd8e8;
  text-align: start;
  /* Açık gövdeden koyu şeride geçiş sert bir kesme gibi duruyordu; kurumsal mavi
     ince bir çizgi geçişi bilinçli gösteriyor. */
  border-top: 3px solid var(--primary);
}
.site-footer :focus-visible { outline-color: #fff; }

.footer-rights {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  /* Koyu lacivert üzerinde ~12:1 — telif satırı küçük ama okunur kalmalı. */
  color: #d6dfeb;
}

.footer-by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  /* Telif satırından bir punto küçük ve bir kademe silik: ikincil olduğu
     tipografiden anlaşılsın. ~8:1 ile hâlâ rahat okunuyor, "silik" değil. */
  font-size: 13px;
  color: #a7b4c7;
}
.footer-by a {
  display: inline-flex;
  align-items: center;
  /* Küçük bir logo bile en az 44px'lik bir dokunma hedefi içinde durmalı. */
  min-height: var(--tap);
  padding-inline: 6px;
  border-radius: var(--radius-sm);
  /* Beyaz logo koyu zeminde zaten en parlak öğe; tam opaklıkta künye telif
     satırının önüne geçiyor. */
  opacity: .9;
  transition: opacity .12s, background-color .12s;
}
.footer-by a:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.footer-by img { display: block; height: 17px; width: auto; }

/* Dar ekranda iki uç düzeni anlamını yitiriyor (satırlar zaten alt alta iniyor):
   ortalanmış bir yığın daha derli toplu duruyor. */
@media (max-width: 619px) {
  .site-footer {
  margin-top: auto;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 14px var(--gutter) 16px;
  }
}

/* ---------- Ülke seçici (aranabilir) ---------- */
/* 63 ülke arasından seçim yerleşik açılır listeyle zor: seçenekte bayrak
   gösterilemiyor ve tarayıcının harf eşleştirmesi ancak ülkenin Türkçe adını
   bilene yarıyor. Değeri hâlâ gizli bir <select> taşıyor, bu yalnız onun yüzü. */
.country-field { position: relative; display: inline-flex; }

.country-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  white-space: nowrap;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.country-button:hover { border-color: var(--primary); }
.country-flag {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
  flex: none;
}
.country-label { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Ok, seçenek listesinin açılabildiğini gösteren tek işaret; dolayısıyla
   yerleşik select okuyla aynı yerde ve büyüklükte duruyor. */
.country-caret {
  margin-inline-start: auto;
  width: 0;
  height: 0;
  border-inline-start: 5px solid transparent;
  border-inline-end: 5px solid transparent;
  border-top: 6px solid var(--muted);
  flex: none;
}

.country-panel {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 4px);
  z-index: 30;
  /* Panel alanın kendisinden geniş: ülke adları sığmalı, ama ekranı da taşmamalı. */
  width: max(280px, 100%);
  max-width: calc(100vw - 2 * var(--gutter));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
  overflow: hidden;
}

.country-search {
  width: 100%;
  padding: 11px 13px;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  font: inherit;
  font-size: 16px;
  color: var(--text);
}
.country-search:focus { outline: 2px solid var(--primary); outline-offset: -2px; }

.country-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  /* Yaklaşık altı satır: panelin ekranı kaplamadan kaydırılabilir kalması için. */
  max-height: 280px;
  overflow-y: auto;
}
.country-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.country-option img {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
  flex: none;
}
.country-option-name { flex: 1 1 auto; min-width: 0; }
.country-option-dial { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Klavyeyle gezinen satır ile seçili ülke ayrı işaretler: biri "şu an nerede
   duruyorum", diğeri "hangisi kayıtlı". İkisi aynı görünürse ok tuşu kayboluyor. */
.country-option.is-active { background: var(--primary-soft); }
.country-option.is-selected { font-weight: 700; }
.country-option.is-selected .country-option-dial { color: var(--text-soft); }

.country-empty {
  margin: 0;
  padding: 16px;
  text-align: center;
  color: var(--muted);
}

/* ---------- Alt bilgi satırları ---------- */
.footer-company,
.footer-reserved { display: block; }
.footer-reserved { font-weight: 400; }

/* KeyTech künyesi bilinçli olarak küçük: sürücünün işine yaramayan bir bilgi,
   sayfanın asıl içeriğiyle ya da GTI'nin telif satırıyla yarışmamalı. */
.footer-by img { height: 11px; }

/* Ülke paneli kartın dışına taşabilmeli. .card üzerindeki "overflow: hidden"
   yuvarlak köşelerin içeriği kırpması için var; sorgu kartında bu, açılan
   listenin alt kenarda kesilmesine yol açıyordu. Kırpma kapatılıp köşe
   yuvarlaklığı doğrudan başlık ve gövdeye veriliyor. */
.query-card { overflow: visible; }
.query-card > .card-header {
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
}
.query-card > .card-body {
  border-end-start-radius: var(--radius);
  border-end-end-radius: var(--radius);
}

/* Panel konumlandırılmış bir öğe olduğu için sayfadaki konumlandırılmamış
   kartların zaten üstünde boyanıyor; kartın kendi position değerine dokunulmuyor
   (masaüstünde sticky ve bozulmamalı). */

/* Plaka alanı girilen metni büyük harfe çeviriyor; dönüşüm yer tutucuya da
   uygulandığı için ipucu bağırıyormuş gibi duruyordu. Yer tutucu kendi
   yazımında kalır. */
.input-plate::placeholder {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

/* ---------- Üst bar: mobil ---------- */
/* Logo, başlık, dil menüsü ve TOBB amblemi dar ekranda tek satıra sığmıyordu;
   bayrak şeridi kaldırıldıktan sonra sığıyor. Başlık kendi satırına iniyor:
   sayfanın adı, kurum logolarıyla aynı satırda yarışmamalı. */
.topbar { flex-wrap: wrap; row-gap: 8px; }
.topbar-title { min-width: 0; }

@media (max-width: 700px) {
  .topbar { gap: 10px; padding: 10px var(--gutter); }

  /* Başlık tam satır kaplar ve logo satırının ALTINA iner. */
  .topbar-title {
    order: 10;
    flex-basis: 100%;
    font-size: 16px;
  }
  /* Kurum logoları solda bir arada, dil menüsü sağda. Başlık en sona (order: 10)
     alındığı için kendi satırına iniyor. */
  .topbar .spacer { order: 1; }
  .lang-menu { order: 2; }

  .brand img { height: 38px; }
  .brand-tobb { width: 38px; height: 38px; }
}

@media (max-width: 380px) {
  .brand img { height: 34px; }
  .brand-tobb { width: 34px; height: 34px; }
  .topbar-title { font-size: 15px; }
}

/* ---------- Yapım aşamasında bildirimi ---------- */
/* Randevu sekmesi, arkasındaki iş hazır olmadan açıldı: sürücü randevunun
   geleceğini bilsin diye. Boş bir sayfa "bozuk mu" sorusunu doğururdu; bu blok
   ne olduğunu söylüyor.

   Biçim /insaat/index.html'deki "Yapım Aşamasındadır" rozetiyle bilinçli olarak
   aynı. Aynı bilgiyi iki ayrı yerde iki ayrı görünümle vermek, ikisinin de aynı
   sistem olduğunu gizler. Renkler oradaki sabitler değil buradaki belirteçler:
   kurumsal mavi tek yerden değişmeli. */
.soon {
  padding: 44px 24px 48px;
  text-align: center;
}

.soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: var(--primary-soft);
  /* Açık mavi zeminde 6.2:1. Rozet metni küçük ve büyük harf; sınırda bir
     kontrast bu puntoda okunmazdı. */
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* flex: none — rozet metni sarınca daireyi ezip yumurtaya çeviriyordu. */
.soon-badge svg { width: 17px; height: 17px; flex: none; }

.soon-title {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--text);
}

/* Ölçülü satır uzunluğu: kart masaüstünde 1100px'e kadar açılıyor ve tek
   paragraf o genişlikte tek satıra yayılıp okunmuyordu. */
.soon-text {
  max-width: 460px;
  margin: 0 auto;
  color: var(--text-soft);
}

@media (max-width: 520px) {
  .soon { padding: 32px 18px 36px; }
  .soon-title { font-size: 19px; }
  /* Büyük harf + geniş harf aralığı dar ekranda rozeti iki satıra kırıyordu. */
  .soon-badge { font-size: 12px; letter-spacing: .04em; }
}