/* ===================================================================== style.css — güzergâh karşılaştırma arayüzü (2. tasarım turu) Görsel dil: karayolu tabelası mavisi, bilet perforasyonu, sade kâğıt zemin — kullanıcının ilettiği referans tasarımdan uyarlandı. --navy/--amber : marka rengi --car/--bus/--train/--plane (+ -soft) : moda göre aksan rengi, .app üzerindeki data-mode="car|bus|train|plane" ile aktifleşir ===================================================================== */ :root { --bg: #EDF1F4; --surface: #FFFFFF; --surface-2: #F5F8FA; --ink: #0F1F2B; --ink-2: #44576A; --ink-3: #444; --line: #D6DEE5; --line-strong: #B4C1CC; --navy: #0E2A47; --amber: #F5A800; --car: #0B57A4; --car-soft: #E3EEFA; --bus: #A75B00; --bus-soft: #FBEEDA; /* (2026-09-30, kullanıcı isteği: "Tren renkleri #333333 olsun") eski kırmızı (#B3262B) koyu nötr griye çevrildi - --train-soft de buna uyumlu açık gri bir tona (#E8E8E8) güncellendi. */ --train: #333333; --train-soft: #E8E8E8; /* (2026-09-30, 36. tur, kullanıcı isteği: "uçak rengi yeşil gökyüzü mavisi yapsak daha iyi olmaz mı?") eski #08706B bir koyu teal/yeşil tonuydu - uçak/gökyüzü çağrışımı yapan daha canlı bir mavi (--car'ın koyu lacivert-mavisinden BİLEREK farklı/daha açık bir ton, ikisi yan yana sekmede karışmasın diye) ile değiştirildi. */ --plane: #0EA5E9; --plane-soft: #E0F2FE; /* (16. tur) --taxi: klasik "taksi sarısı" - car/bus/train/plane'in hiçbiriyle karışmayan ayrı bir aksan rengi (bkz. .mode-tab[data-tab-mode="taxi"] ve RenderHelpers::renderTaxiCard()'ın --route-color olarak kullandığı yer). */ --taxi: #B8860B; --taxi-soft: #FBF1D6; --transit: #C62828; --transit-soft: #FDECEC; --sea: #00897B; --sea-soft: #E0F2F1; --suburban: #EF6C00; --suburban-soft: #FFF0E0; /* (2026-09-30, 36. tur devamı, kullanıcı isteği: "karşılaştırma tablosunu görseldeki hale getirsene") Kullanıcının paylaştığı referans görselde maliyet karşılaştırma KARTLARININ dairesel ikon rengi - haritadaki/sekmelerdeki --car (lacivert) ve --bus (kahve/ turuncu) tonlarından BİLEREK FARKLI, sadece bu kart bileşenine özel bir palet (görseldeki yeşil araba / turuncu otobüs / mavi uçak ile birebir eşleşsin diye) - harita/sekme renkleri (yukarıdaki --car/ --bus/--train/--plane) HİÇ değiştirilmedi, sadece bu YENİ değişkenler eklendi. --compare-plane ve --compare-train, sitenin geri kalanıyla tutarlı kalsın diye kasıtlı olarak mevcut --plane/--train'i tekrar kullanıyor (referans görselde uçak zaten benzer bir mavi). */ --compare-car: #16A34A; --compare-bus: #F59E0B; --compare-train: var(--train); --compare-plane: var(--plane); /* (2026-10-02, 43. tur, kullanıcı tespiti verbatim: "Karşılaştırma tablosunda taksi iconu rengi yok taksi rengi olarak gelsin.") KÖK NEDEN: taksi modu (16. tur) bu --compare-* paletinin TANIMLANMASINDAN SONRA eklenmişti - car/bus/train/plane için birer `[data-compare-icon="..."]` renk kuralı varken taksi için hiç eklenmemişti, bu yüzden ikon rozeti rengi .compare-card__icon'un renksiz/şeffaf varsayılanında kalıyordu. train/plane'in yaptığı gibi (sitenin GERÇEK taksi rengini tekrar kullanmak, YENİ bir renk UYDURMAMAK) burada da mevcut --taxi değişkeni kullanılıyor. */ --compare-taxi: var(--taxi); --mode: var(--car); --mode-soft: var(--car-soft); --ok: #1E7A45; --warn: #A94400; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; /* (2026-10-03, 48. tur 17. devam, kullanıcı isteği verbatim: "benim için hız ve performans çok önemli o yüzden lcp öncelik olsun. googleapis font kodlarını kaldıralım") Google Fonts (Bricolage Grotesque/Instrument Sans) TAMAMEN kaldırıldı - artık sadece cihazın KENDİ sistem fontları kullanılıyor: hiçbir ağ isteği YOK (DNS/TLS/CSS/ .woff2 - raporun "Ağ bağımlılık ağacı"nda kritik yolun EN UZUN parçası buydu, 418ms), hiçbir render-blocking CSS YOK (rapordaki "Oluşturma engelleme istekleri" bulgusundaki 370ms'nin kaynağı), hiçbir FOUT/ FOIT (yazı tipi değişimiyle göz kırpması) riski YOK. `-apple-system` (macOS/iOS: San Francisco), `Segoe UI` (Windows), `Roboto` (Android/ Chrome OS), `Helvetica Neue`/`Arial` (eski/diğer) - neredeyse HER cihazda zaten YÜKLÜ, modern ve okunabilir bir yazı tipiyle sonuçlanan, yaygın kullanılan bir "sistem fontu" zinciri. `--font-display`/ `--font-body` AYNI kaldı (tüm dosyada tek değişim noktası burası - CSS'in geri kalanı, font-weight/boyut farklarıyla zaten görsel hiyerarşi kuruyordu, tek bir typeface kullanmak bunu BOZMAZ). */ --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --shadow: 0 1px 2px rgba(15, 31, 43, .08), 0 6px 20px rgba(15, 31, 43, .08); --shadow-card: var(--shadow); } /* .app üzerinde data-mode ile aktif olur (ROUTE_COLORS'tan BAĞIMSIZ bir kavram: bu, "araç vs otobüs vs tren vs uçak" temasıdır; ROUTE_COLORS ise araç sekmesindeki ALTERNATİF rotaları birbirinden ayırt eder). */ [data-mode="car"] { --mode: var(--car); --mode-soft: var(--car-soft); } [data-mode="bus"] { --mode: var(--bus); --mode-soft: var(--bus-soft); } [data-mode="train"] { --mode: var(--train); --mode-soft: var(--train-soft); } [data-mode="plane"] { --mode: var(--plane); --mode-soft: var(--plane-soft); } [data-mode="taxi"] { --mode: var(--taxi); --mode-soft: var(--taxi-soft); } [data-mode="transit"] { --mode: var(--transit); --mode-soft: var(--transit-soft); } [data-mode="sea"] { --mode: var(--sea); --mode-soft: var(--sea-soft); } [data-mode="suburban"] { --mode: var(--suburban); --mode-soft: var(--suburban-soft); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font: 400 15px/1.5 var(--font-body); color: var(--ink); background: var(--bg); } h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; letter-spacing: -0.01em; } p { margin: 0; } ul {padding-left: 15px} img, svg { max-width: 100%; } .icon { flex: none; display: block; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- */ /* Header */ /* ---------------------------------------------------------------- */ /* (2026-10-03, 48. tur 7. devam, kullanıcı isteği verbatim: "headerı şekillendirelim. Eklenecek link/kategoriler: rotalar, şehirler, keşfet ve arama motoru olacak.") Header artık 3 bölge: marka | nav (Rotalar/ Şehirler/Keşfet) | arama kutusu. Renk paleti `anasayfa-tasarim.html` (47. tur onaylanmış tasarım) ile BİREBİR aynı: BEYAZ header, koyu gri nav metni - eski `.site-nav a { color: #D3DFEC }` AÇIK MAVİ tonu koyu bir header için yazılmıştı (hiç kullanılmamıştı, gerçek header hep beyazdı) - o yüzden burada KOYU metne çevrildi, aksi halde beyaz zemin üzerinde neredeyse görünmez olurdu. Yükseklik 56px'TE BİLİNÇLİ OLARAK SABİT bırakıldı (.app'in iki calc(100vh - 56px)/calc(100dvh - 56px) referansını ETKİLEMEMEK için) - navın kendisi bu yüzden kompakt/küçük punto. */ .site-header { display: flex; align-items: center; gap: 16px; padding: 0 20px; height: 56px; background: var(--surface); color: var(--ink); /* (2026-10-03, 48. tur 14. devam, kullanıcı isteği verbatim: "tren, otobüs, uçak sefer detaylarına tıklayınca header yok oluyor sanırım sağdaki scroll olayı bozuyor") Asıl hata js/app.js'teki scrollPaneIntoView()'da BULUNUP DÜZELTİLDİ (bkz. o dosyadaki ayrıntılı not) - ama header'ın `position: relative` olması, GERÇEK bir sayfa kaydırması olduğunda (ör. .sheet panelinin sonuna gelip footer'a kaydırırken - madde 1) header'ın da normal akışın parçası olarak yukarı kayıp GÖRÜNÜMDEN ÇIKMASINA izin veriyordu - bu da kullanıcının "sağdaki scroll olayı bozuyor" sezgisinin isabetli olduğu ikinci bir etkendi. `position: sticky; top: 0` ile header artık GERÇEK sayfa kaydırması ne kadar ilerlerse ilerlesin (footer'a inerken dahil) her zaman viewport'un en üstünde sabit kalıyor - yükseklik yine BİLEREK 56px'te sabit (`.app`'in calc(100vh - 56px) referansını etkilememek için, bkz. yukarıdaki eski not). */ position: sticky; top: 0; z-index: 1100; border-bottom: 1px solid #ccc; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 4px; text-decoration: none; color: var(--ink); flex: 0 0 auto; } .brand__mark { display: block; width: 40px; height:40px; object-fit: contain; } .brand__text { display: flex; flex-direction: column; line-height: 1.05; } .brand__name { font: 700 clamp(1.2rem, 3vw, 1rem) var(--font-display); letter-spacing: -0.02em; color: #0b57a4; } /* (2026-10-03, 48. tur 8. devam, kullanıcı isteği verbatim: "logo aldına küçük yazıyla "Türkiye'nin ulaşım rehberi" yazdıralım.") Onaylanan tasarım referansı anasayfa-tasarim.html'deki `.logo-text span` deseniyle AYNI: küçük, soluk alt-başlık. O dosyada da dar ekranlarda (≤560px) `display:none` oluyordu (bkz. aşağıdaki @media) - header'da yer kazanmak için aynı davranış burada da uygulandı. */ .brand__tagline { font: 500 clamp(.72rem, 3vw, .55rem) var(--font-body); color: var(--ink-3); line-height: 1; white-space: nowrap; } .site-nav { display: flex; flex-direction: column; gap: 2px; } .site-nav a { color: #42586C; text-decoration: none; font-weight: 600; font-size: 14px; padding: 10px 12px; border-radius: 6px; white-space: nowrap; } .site-nav a:hover { color: var(--car); background: var(--car-soft); } .site-nav a.is-active { color: var(--car); } /* (2026-10-03, 48. tur 8. devam, kullanıcı isteği verbatim: "header da sadece linkler olsun (duraklar da ekle) ve arama motoru masaüstünde icon şeklinde dursun tıklanınca açılsın.") 47. tur 7. devam'da arama kutusu SADECE mobilde (≤860px) ikona dönüşüyor, masaüstünde HER ZAMAN açık bir metin kutusu olarak duruyordu. Artık TEK bir davranış var - TÜM genişliklerde iki ikon-buton (ara/menü) + tıklanınca açılan TEK bir panel (nav + arama formu birlikte). Bu yüzden eskiden "mobile" eki taşıyan sınıflar (`.site-header__mobile-actions`, `.site-header__mobile-panel`, `.site-nav--mobile`, `.site-header__search--mobile`) sadeleştirildi/kaldırıldı - artık tek bir kopya olduğu için ayrıca "masaüstü asıl + mobil kopya" çakışma riski de (bkz. eski not, artık geçersiz) YOK. */ .site-header__actions { display: flex; margin-left: auto; gap: 6px; } .site-header__icon-btn { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: #42586C; cursor: pointer; } .site-header__icon-btn .icon { width: 17px; height: 17px; } .site-header__icon-btn[aria-expanded="true"] { background: var(--car-soft); color: var(--car); border-color: var(--car); } .site-header__panel { display: none; position: absolute; right: 20px; top: 64px; width: 280px; max-width: calc(100vw - 40px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(15,31,43,.16); padding: 14px; z-index: 1090; flex-direction: column; gap: 14px; } .site-header__panel[data-open="true"] { display: flex; } .site-header__search { display: flex; align-items: center; gap: 6px; width: 100%; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 20px; padding: 4px 4px 4px 12px; } .site-header__search input { border: 0; background: transparent; font: 400 13px/1 var(--font-body); color: var(--ink); width: auto; flex: 1 1 auto; padding: 6px 2px; min-width: 0; } .site-header__search input:focus { outline: none; } .site-header__search input::placeholder { color: var(--ink-3); } .site-header__search-divider { color: var(--line-strong); font-size: 12px; } .site-header__search button { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: var(--car); color: #fff; cursor: pointer; } .site-header__search button:hover { filter: brightness(0.92); } .site-header__search button .icon { width: 16px; height: 16px; } .main-nav ul { display: flex; gap: 4px; list-style: none; } .main-nav a { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 16px; font-weight: 500; color: var(--navy); transition: background .2s, color .2s; } .icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #164b78; border-radius: 8px; cursor: pointer; padding: 0; transition: background .2s ease, color .2s ease; } .icon-btn svg { width: 20px; height: 20px; display: block; } .icon-btn:hover { background: #eef6fc; color: #087bea; } .menu-check{display:none!important} .menu-toggle{display:none;width:42px;height:42px;padding:0;margin:0;align-items:center;justify-content:center;cursor:pointer;color:inherit} .menu-icon{width:23px;height:23px;display:block;overflow:visible} .menu-line{transform-box:fill-box;transform-origin:center;transition:transform .25s ease,opacity .2s ease} @media(max-width:800px){ .header-inner{position:relative;min-height:70px;display:flex;align-items:center;justify-content:space-between} .header-actions{width:auto!important;height:70px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important;flex-shrink:0} .icon-btn,.menu-toggle{flex:0 0 42px!important;width:42px!important;height:42px!important;margin:0!important} .icon-btn{display:flex!important;align-items:center!important;justify-content:center!important} .icon-btn svg{width:22px;height:22px;display:block} .menu-toggle{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important} .menu-icon{width:23px;height:23px} .site-header:has(#menu-check:checked) .line-1{transform:translateY(6px) rotate(45deg)} .site-header:has(#menu-check:checked) .line-2{opacity:0} .site-header:has(#menu-check:checked) .line-3{transform:translateY(-6px) rotate(-45deg)} .main-nav{position:fixed!important;top:56px!important;left:0!important;right:0!important;width:100%!important;max-width:none!important;height:calc(100dvh - 70px)!important;margin:0!important;padding:0!important;background:#fff!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:9999!important;transform:translateX(100%)!important;visibility:hidden!important;transition:transform .28s ease,visibility .28s ease!important;box-shadow:none!important} .site-header:has(#menu-check:checked) .main-nav{transform:translateX(0)!important;visibility:visible!important} .main-nav>ul{display:flex!important;flex-direction:column!important;width:100%!important;margin:0!important;padding:8px 20px 30px!important;list-style:none!important;box-sizing:border-box!important} .main-nav>ul>li{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-bottom:1px solid #e8e8e8!important;box-sizing:border-box!important} .main-nav>ul>li>a{display:flex!important;width:100%!important;min-height:58px!important;margin:0!important;padding:0 4px!important;align-items:center!important;color:#171717!important;background:transparent!important;text-decoration:none!important;font-size:17px!important;font-weight:600!important;white-space:nowrap!important;box-sizing:border-box!important} .main-nav>ul>li>a:active{background:#f5f5f5!important} .main-nav>ul>li>a:before,.main-nav>ul>li>a:after{content:none!important;display:none!important} .main-nav .dropdown,.main-nav .submenu,.main-nav ul ul{display:none!important} .menu-overlay{display:block!important;position:fixed!important;top:70px!important;left:0!important;right:0!important;bottom:0!important;background:rgba(0,0,0,.28)!important;opacity:0;visibility:hidden;z-index:9998!important;transition:opacity .25s ease,visibility .25s ease} .site-header:has(#menu-check:checked)~.menu-overlay{opacity:1;visibility:visible} .brand{flex-shrink:0} } @media(max-width:480px){ .header-inner{min-height:70px;padding-left:12px;padding-right:12px} .header-actions{gap:2px!important} .icon-btn,.menu-toggle{width:40px!important;height:40px!important;flex-basis:40px!important} .icon-btn svg{width:21px;height:21px} .menu-icon{width:22px;height:22px} .main-nav{top:56px!important;height:calc(100dvh - 70px)!important} .main-nav>ul{padding-left:16px!important;padding-right:16px!important} .main-nav>ul>li>a{min-height:56px!important;font-size:16px!important} .sheet[data-state="half"] { height: 70dvh; } } @media (max-width: 560px) { /* bkz. yukarıdaki .brand__tagline notu - anasayfa-tasarim.html referansıyla AYNI dar-ekran davranışı. */ .site-header__panel { left: 12px; right: 12px; width: auto; max-width: none; } } /* (2026-10-02, 41. tur 13. devam, kullanıcı isteği verbatim, madde 5: "Ana içeriğe geç kurgusu kaldırılsın.") .skip-link/.skip-link:focus kuralları kaldırıldı - karşılığı olan