/* /trafik — Trafik ve Güvenlik · "Güvenli Yollar"
   ═══════════════════════════════════════════════════════════════════════
   ⚠️ BU DOSYA habits.css'İN KOPYASI DEĞİL ama İSKELETİ ONDAN GELİYOR — ve
   bu bilerek. 28 Ağu 2026'da /sel, /turkiye ve /habits tek bir form
   deneyimine getirildi (hero iskeleti, adım sırası, özet şeridi); dördüncü
   ödemeli ürünün o deneyimden ayrılması için hiçbir sebep yok. Ayrışan
   yalnızca RENK ve DEKOR.

   AÇIK ZEMİN (Murat'ın kararı, 12 Eyl 2026). İki gerekçe:
     1. Sitedeki koyu sayfalar SEL (mor), /turkiye (teal) ve /thy (siyah).
        /thy'nin ana rengi de kırmızı (#c90019) — trafiği koyu zemine
        koymak onu /thy'nin görünümüne yaklaştırırdı.
     2. Ürünün tonu korkutmamak üzerine kurulu (brief §1: kaza hiçbir
        sayfada gösterilmez). Gündüz, açık, tanıdık bir zemin o sözün
        görsel karşılığı.

   Maliyeti düşük: base.css AÇIK ZEMİN İÇİN yazılmış; ezilmesi gereken üç
   blok (form alanları, fotoğraf kutusu, hata kutusu) aşağıda "BASE.CSS
   EZMELERİ" başlığı altında ve habits.css'tekiyle aynı gerekçeye sahip.

   DEKOR = YOL. habits'in ödül çizelgesi zemini burada YOK; yerinde
   /turkiye'nin `.decorative-svg-layer` deseni var (brief §7'de onaylanan
   altı figür: gülen trafik ışığı, arabalar, yaya geçidi, trafik polisi,
   kıvrımlı yol, bisiklet). Hepsi saf CSS animasyonlu, mobilde (≤640px)
   yoğun olanlar gizleniyor.

   ⚠️ DEKORDA OKUNABİLİR YAZI YOK. Tabelalar, farlar ve rozetler yalnızca
   şekil ve renk — kitabın görsel kuralının ("no text, no letters") sayfa
   karşılığı, marka tutarlılığı için.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* — Palet ————————————————————————————————
     Zemin nötr-sıcak bir beton beyazı: kırmızı ve sarı üstüne oturunca
     tabela renkleri okunuyor, ama zemin sitenin amberiyle çakışmıyor. */
  --wash:    #f7f6f3;   /* sayfa zemini */
  --card:    #ffffff;   /* kart yüzeyi */
  --ink:     #191c22;   /* metin — saf siyah değil, asfalt grisi */
  --asphalt: #c53136;   /* çalışan kırmızı: açık zeminde kontrastı geçen ton */
  --signal:  #e5484d;   /* brief §7 sinyal kırmızısı — dolgu ve vurgu */
  --amber:   #ffc22b;   /* brief §7 trafik sarısı */
  --sky:     #2d6cdf;   /* üçüncü katman rengi — tabela mavisi */

  /* — base.css'in okuduğu değişkenler ————————————— */
  --accent:      var(--asphalt);
  --accent-soft: rgba(229,72,77,0.26);
  --text:        var(--ink);
  --muted:       rgba(25,28,34,0.62);
  --card-bg:     var(--card);
  --card-border: rgba(25,28,34,0.12);
  --danger:      #be321e;
  --header-bg:   rgba(247,246,243,0.88);
  --slider-track: linear-gradient(90deg, var(--signal), var(--amber));

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-util:    'Inter', -apple-system, sans-serif;

  --radius: 14px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(25,28,34,0.06), 0 4px 12px rgba(25,28,34,0.05);
  --shadow-md: 0 2px 4px rgba(25,28,34,0.07), 0 12px 32px rgba(25,28,34,0.08);
}

body {
  font-family: var(--font-body);
  background: var(--wash);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* içeriği dekor katmanının üstünde tut */
.product-header, .hero, .why-section, .form-wrapper,
.urun-icerik, .longform, .page-footer {
  position: relative;
  z-index: 1;
}

/* ════════ ÜST ÇUBUK ════════ */
.product-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(25,28,34,0.08);
}

.product-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lang-switcher { display: flex; gap: 4px; }

.lang-btn {
  font-family: var(--font-util);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.lang-btn:hover { color: var(--ink); background: rgba(25,28,34,0.05); }
.lang-btn.active {
  color: var(--asphalt);
  border-color: rgba(197,49,54,0.32);
  background: rgba(229,72,77,0.14);
}

.scroll-progress-track { background: rgba(25,28,34,0.07); }
.scroll-progress-bar { background: linear-gradient(90deg, var(--signal), var(--amber)); }

/* ════════ HERO ════════
   sel.css'te hero iki sütunlu: solda metin, sağda kare illüstrasyon + yüzen
   kart. Burada tek kolon ve MERKEZDE değil sola yaslı bir tipografik açılış,
   altında imza şeridi tam genişlikte. Sebep: sayfanın tezi görsel değil,
   "aynı gün" mekanizması — o yüzden en geniş yeri o alıyor. */
.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(44px, 7vw, 86px) 22px clamp(28px, 4vw, 44px);
}

.hero-inner { max-width: 780px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-util);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--asphalt);
  background: rgba(229,72,77,0.15);
  border: 1px solid rgba(197,49,54,0.22);
  padding: 7px 14px;
  border-radius: 999px;
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  flex: none;
}

.hero-h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  /* Ölçüldü (1200px, tarayıcı): 60px + 16ch başlığı BEŞ satıra bölüyor ve
     imza şeridini tamamen ekranın dışına itiyordu. Brief'in cümlesi uzun,
     o yüzden punto küçüldü ve satır genişledi — üç satırda oturuyor. */
  /* Ölçüldü (1200px, tarayıcı): 60px + 16ch başlığı BEŞ satıra bölüyor ve
     imza şeridini tamamen ekranın dışına itiyordu. */
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 20px 0 0;
  max-width: 24ch;
  text-wrap: balance;
}

/* Başlıktaki tek vurgulu parça. Altındaki çizgi bir "işaretleme" jesti —
   ebeveynin listede işaretlediği şey. */
.hero-h1 em {
  font-style: italic;
  color: var(--asphalt);
  position: relative;
  white-space: nowrap;
}
.hero-h1 em::after {
  content: '';
  position: absolute;
  left: -0.04em; right: -0.04em; bottom: 0.04em;
  height: 0.30em;
  background: rgba(255,194,43,0.42);
  border-radius: 3px;
  z-index: -1;
}

.hero-desc {
  font-size: clamp(16px, 1.7vw, 18.5px);
  line-height: 1.62;
  color: var(--muted);
  max-width: 52ch;
  margin: 20px 0 0;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-top: 30px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16.5px;
  color: #fff;
  background: var(--ink);
  padding: 15px 26px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.hero-cta:hover {
  background: var(--asphalt);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ⚠️ base.css fiyatı ÇERÇEVELİ BİR HAP olarak çiziyor (/sel ve /turkiye'de
   öyle duruyor). Burada CTA da hap biçiminde ve ikisi yan yana: tarayıcıda
   bakıldığında iki düğme gibi okunuyordu, fiyat tıklanabilir sanılıyordu.
   Çerçeve ve zemin kaldırıldı — fiyat bir etiket, bir eylem değil. */
.hero-price {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-family: var(--font-util);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin: 0;
}
.hero-price b {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 20px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-util);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--card-border);
  padding: 6px 12px;
  border-radius: 999px;
}
.chip .chk {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--signal);
  color: #0f2a1a;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex: none;
}

/* ════════ NEDEN ÖNEMLİ ════════ */
.why-section {
  max-width: 1120px;
  margin: clamp(56px, 9vw, 104px) auto 0;
  padding: 0 22px;
}

.why-head { max-width: 46ch; }

.why-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(27px, 3.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
}
.why-subtitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(27px, 3.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--amber);
  margin: 0;
}
.why-desc {
  font-size: clamp(15.5px, 1.7vw, 17.5px);
  line-height: 1.65;
  color: var(--muted);
  margin: 20px 0 0;
  max-width: 58ch;
}

.why-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 34px;
}

/* Kart bir tabela gibi: solda yuvarlak rozet, sağda ne söylediği. */
.why-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-sm);
}

.wc-stamp {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 16px;
  background: rgba(229,72,77,0.18);
  border: 1.5px solid rgba(197,49,54,0.3);
}
.why-card:nth-child(2) .wc-stamp { background: rgba(255,194,43,0.24); border-color: rgba(214,150,20,0.32); }
.why-card:nth-child(3) .wc-stamp { background: rgba(45,108,223,0.14); border-color: rgba(45,108,223,0.32); }

.wc-title {
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.4;
  margin: 5px 0 0;
}

/* ════════ FORM ════════ */
.form-wrapper {
  max-width: 1120px;
  margin: clamp(56px, 9vw, 104px) auto 0;
  padding: 0 22px;
}

.step-section {
  max-width: 100%;
  padding: 0 0 clamp(38px, 5vw, 58px);
  /* ⚠️ base.css bu bölümün başlığını, alt yazısını, yaş kaydırıcısını, onay
     kutularını ve güven şeridini ORTALIYOR (/sel ve /turkiye ortalı düzende).
     Buradaki düzen baştan sona sola yaslı: hero solda, ızgara solda. İkisi
     karışınca sayfa "yarısı ortalı" görünüyordu. Hepsi burada sola alınıyor. */
  text-align: left;
}
.step-section .step-title,
.step-section .step-sub,
.step-section .submit-wrap,
.step-section .trust-strip { text-align: left; }
.step-section .age-slider-wrap,
.step-section .consent-block,
.step-section .age-topic-note,
.step-section .submit-wrap { margin-left: 0; margin-right: 0; }
.step-section .trust-strip { justify-content: flex-start; }

/* Adım numarası tabela-şekilli bir rozet (brief §7 ikon dili). */
.step-section .step-label {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-family: var(--font-util);
  font-size: 13px;
  font-weight: 700;
  color: var(--asphalt);
  background: rgba(229,72,77,0.16);
  border: 1.5px solid rgba(197,49,54,0.28);
  margin-bottom: 12px;
  opacity: 1;
}

.step-section .step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.16;
  margin: 0;
}

.step-section .step-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 7px 0 0;
}

.option-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.option-card {
  box-shadow: var(--shadow-sm);
  padding: 13px 14px;
  border-width: 1.5px;
}
.option-card:hover { box-shadow: var(--shadow-md); }
.option-card .oc-title { font-size: 14.5px; font-weight: 700; }

/* KONU KARTLARI — sol kenardaki renk şeridi KATMANI gösteriyor.
   sel.css'te ton rastgele çeşitlilikti; burada bilgi taşıyor. Konular
   taksonomide katman katman sıralı, o yüzden ızgarada üç blok görünüyor ve
   gruplama etiketsiz okunuyor. */
.topic-card {
  padding-left: 18px;
  overflow: hidden;
}
.topic-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
}
.topic-card.tone-1::before { background: var(--signal); }
.topic-card.tone-2::before { background: var(--amber); }
.topic-card.tone-3::before { background: var(--sky); }

.topic-card.tone-1.selected { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(229,72,77,0.24); }
.topic-card.tone-2.selected { border-color: var(--amber);  box-shadow: 0 0 0 3px rgba(255,194,43,0.22); }
.topic-card.tone-3.selected { border-color: #2d6cdf;       box-shadow: 0 0 0 3px rgba(45,108,223,0.26); }

/* Katman anahtarı — ızgaranın üstünde, üç renk ne demek. */
.layer-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  font-family: var(--font-util);
  font-size: 12px;
  color: var(--muted);
}
.layer-key span { display: inline-flex; align-items: center; gap: 7px; }
.layer-key i {
  width: 11px; height: 11px; border-radius: 3px; flex: none;
}
.lk-1 { background: var(--signal); }
.lk-2 { background: var(--amber); }
.lk-3 { background: var(--sky); }

.grid-expand-btn {
  border-color: rgba(197,49,54,0.3);
  color: var(--asphalt);
  background: var(--card);
  font-family: var(--font-util);
}
.grid-expand-btn:hover { background: rgba(229,72,77,0.1); }

/* Yaş kilidi notu */
.age-topic-note {
  max-width: 520px;
  margin: 16px auto 0;
  background: rgba(255,194,43,0.16);
  border: 1px solid rgba(214,150,20,0.3);
  border-radius: var(--radius);
  padding: 11px 15px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.age-slider-wrap { margin-top: 26px; }
.age-slider-value { font-family: var(--font-display); font-weight: 600; }
.age-slider-ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-util);
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.field-narrow { max-width: 420px; margin-top: 22px; }

.consent-block { margin-top: 22px; }
.consent-row { box-shadow: var(--shadow-sm); }

.submit-wrap { max-width: 520px; margin: 30px auto 0; text-align: center; }

.pay-note {
  font-family: var(--font-util);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.submit-btn {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 17px 26px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background .18s ease, transform .18s ease;
}
.submit-btn:not(:disabled):hover { background: var(--asphalt); transform: translateY(-2px); opacity: 1; }

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 24px;
  font-family: var(--font-util);
  font-size: 12.5px;
  color: var(--muted);
}
.trust-item { display: inline-flex; align-items: center; gap: 7px; }

/* ════════ UZUN METİN BÖLÜMÜ ════════
   sel.css'te bu bölümün sınıf adları .sel-* idi ve /habits ilk sürümde onları
   aynen kullanıyordu — iki sayfa aynı isimleri paylaşınca birinde yapılan bir
   düzeltme ötekini sessizce etkileyebiliyordu. Burada kendi adları var. */
.longform {
  max-width: 1120px;
  margin: clamp(56px, 9vw, 104px) auto 0;
  padding: 0 22px;
}
/* Kap GENİŞ, ölçü DAR: kartlar (katmanlar) üç sütun olabilsin ama düz metin
   okunabilir satır uzunluğunda kalsın. Tek bir 74ch kabı kullanıldığında üç
   katman kartından ikisi yan yana geliyor, üçüncüsü altta tek başına kalıp
   yanında boşluk bırakıyordu. */
.longform-inner { max-width: 1076px; }
.longform h2,
.longform h3,
.longform p,
.longform-lede { max-width: 68ch; }

.longform h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(27px, 3.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 0 20px;
}
.longform-lede {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.68;
  color: var(--muted);
  margin: 0;
}
.longform p { line-height: 1.72; margin: 16px 0 0; }
.longform h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.012em;
  margin: 44px 0 0;
}

/* ════════ ALT BİLGİ ════════ */
.page-footer {
  max-width: 1120px;
  margin: clamp(56px, 8vw, 90px) auto 0;
  padding: 26px 22px 46px;
  border-top: 1px solid rgba(25,28,34,0.09);
  font-family: var(--font-util);
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}
.page-footer a { color: var(--muted); text-decoration: none; }
.page-footer a:hover { color: var(--asphalt); text-decoration: underline; }
.brand-link b { color: #D95F01; }

/* ════════════════════════════════════════════════════════════════
   BASE.CSS EZMELERİ
   base.css bu üç bileşende beyaz-üstüne-koyu varsayıyor (rgba(255,255,255,…)).
   Sayfa açık zeminli olduğu için üçü de burada yeniden tanımlanıyor.
   ⚠️ Açık zeminde yeni bir base.css bileşeni kullanılacaksa önce orada
   sabit beyaz var mı diye bakılır; varsa ezmesi buraya eklenir.
   ════════════════════════════════════════════════════════════════ */

.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=number],
.form-group select {
  background: var(--card);
  border: 1.5px solid var(--card-border);
  color: var(--ink);
  font-family: var(--font-body);
  box-shadow: var(--shadow-sm);
}
.form-group input::placeholder { color: rgba(25,28,34,0.38); }
.form-group input:focus,
.form-group select:focus {
  border-color: var(--asphalt);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group select option { background: #fff; color: var(--ink); }

/* Fotoğraf ipucu kutusu — /turkiye, /sel ve /thy ile AYNI metni taşır.
   Açık zemin olduğu için dolgu yeşilin en soluk hâli; kenarlık kart
   kenarlığıyla aynı ki fotoğraf kutusuyla yarışmasın. */
.photo-hint {
  /* GENİŞLİK YOK, /sel ve /turkiye'nin aksine: bu sayfada .photo-drop tam
     genişlikte duruyor (base.css'ten geliyor, habits onu daraltmıyor).
     420px'e sabitlenmiş bir ipucu kutusu altındaki geniş bırakma alanının
     üstünde ortada asılı kalıyordu — kutu drop alanıyla aynı hizada. */
  margin: 0 0 14px;
  background: rgba(229,72,77,0.09);
  border: 1px solid rgba(197,49,54,0.22);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}
.photo-hint strong { color: var(--ink); display: block; margin-bottom: 6px; }

.photo-drop {
  background: var(--card);
  border: 2px dashed rgba(197,49,54,0.34);
}
.photo-drop:hover { border-color: var(--asphalt); background: rgba(229,72,77,0.06); }
.photo-drop #photo-placeholder { color: var(--muted); }
.photo-drop #photo-preview { border-color: var(--signal); }

#form-error {
  background: rgba(190,50,30,0.09);
  border: 1px solid rgba(190,50,30,0.32);
  color: #9c2f1c;
  font-weight: 600;
}

.photo-error { color: #9c2f1c; font-size: 13.5px; margin-top: 10px; }

/* ════════ ERİŞİLEBİLİRLİK ════════ */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  /* Dekoratif figürlerin bob/drift hareketi ve yolun akan orta şeridi
     tamamen duruyor. base.css ayrıca `.decorative-svg-layer [class*="deco-"]`
     için aynı şeyi yapıyor; buradaki kural yolun `road-dash` animasyonunu ve
     sayfadaki geçişleri de kapsıyor.
     ⚠️ Bu blok habits.css'ten geldiği için bir süre "imza şeridinin dönmesi"
     diyen yanlış bir yorum taşıdı — /trafik'te öyle bir şerit hiç yok. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 600px) {
  .option-card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .hero-actions { gap: 14px; }
  .hero-cta { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   DEKORATİF SVG KATMANI  (brief §7 · Murat onayladı 12 Eyl 2026)

   Teknik yaklaşım /turkiye'deki `.decorative-svg-layer` deseninin aynısı:
   `position: fixed` figürler, hafif bob/drift animasyonu, mobilde çoğu
   gizli. Kapsayıcının kendi kuralları base.css'te (`inset: 0`,
   `pointer-events: none`, `prefers-reduced-motion` ile animasyon kapama) —
   burada yalnızca bu sayfanın figürleri var.

   ⚠️ `.decorative-svg-layer` base.css'te `position: absolute`; /turkiye onu
   `fixed`e çeviriyor ve burada da öyle: figürler sayfayla birlikte kaymasın,
   sabit bir "yol" hissi versin diye.
   ════════════════════════════════════════════════════════════════ */

.decorative-svg-layer { position: fixed; }

@keyframes deco-light-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes deco-car-drift { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(10px) rotate(1deg); } }
@keyframes deco-bike-bob  { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes deco-road-flow { to { stroke-dashoffset: -88; } }

.deco-trafficlight { position: fixed; width: 66px; opacity: 0.82; animation: deco-light-bob 5s ease-in-out infinite; }

/* ⚠️ OPAKLIKLAR GÖZLE AYARLANDI (12 Eyl 2026, 1440×960 + 390×844).
   İlk değerler /turkiye'den kopyalanmıştı (0.85-0.9) ve bu sayfada fazla
   baskın çıkıyordu: figürler `fixed`, yani sayfa kaydıkça konu kartlarının ve
   form alanlarının arkasından geçiyorlar. /turkiye'de sorun olmamasının
   sebebi zemininin KOYU olması — açık zeminde aynı opaklık çok daha görünür.

   ⚠️ SONRA BİR TIK GERİ AÇILDI (0.6 → 0.7 ailesi). Figürler yeniden
   çizilince kontur kazandılar; konturlu bir çizim düşük opaklıkta soluk
   değil HASTALIKLI görünüyor, dolgusu ile konturu birlikte zayıflıyor.
   Sayı olarak doğrulanamaz; değiştirirsen sayfayı açıp bak. */

.deco-car    { position: fixed; width: 96px; opacity: 0.72; animation: deco-car-drift 6s ease-in-out infinite; }
.deco-car.c2 { width: 74px; animation-duration: 7.5s; animation-delay: -2s; opacity: 0.66; }

/* ⚠️ ÜÇÜNCÜ ARABA (mavi, .c3) 12 Eyl 2026'DA KALDIRILDI, geri eklenmesin.
   Alt-ortada duruyordu ve imza öğesiyle — yaya geçidindeki el ele tutuşan iki
   çocukla — çakışıyordu. Üç araba zaten fazlaydı; biri gidince geçit nefes
   aldı. Sayfada tek bir yerde cesur olunur, o yer geçit. */

/* İMZA ÖĞESİ — en görünür figür, en yüksek opaklık. */
.deco-crossing { position: fixed; width: 262px; transform: translateX(-50%); opacity: 0.68; }
.deco-police   { position: fixed; width: 70px; opacity: 0.7; animation: deco-bike-bob 6s ease-in-out infinite; }
.deco-bike     { position: fixed; width: 100px; opacity: 0.7; animation: deco-bike-bob 5.5s ease-in-out infinite; }

/* Kıvrımlı yol: tüm sayfa yüksekliğinde, çok düşük opasiteli zemin çizgisi.
   z-index -1 ile en altta — içerik okunabilirliğini bozmuyor. */
.deco-road { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }
.deco-road .road-dash { animation: deco-road-flow 3s linear infinite; }

/* Mobilde yalnızca en sakin iki figür kalıyor: trafik ışığı ve zemin yolu.
   Diğerleri dar ekranda formun üstüne biniyor ve okumayı zorlaştırıyor. */
@media (max-width: 640px) {
  .deco-car, .deco-police, .deco-bike, .deco-crossing { display: none; }
  .deco-trafficlight { width: 44px; opacity: 0.7; }
}