@charset "UTF-8";
/* =====================================================================
   Müşteri sitesinin stil dosyası (views/site.ejs)
   Tarayıcıda /css/site.css adresinden açılır (app.js'teki express.static("public")).
   Yönetim paneli bu dosyayı kullanmaz; onun stili views/admin.ejs içinde.

   Tasarım fikri: "asfalt ve yol çizgisi"
     siyah asfalt + kâğıt beyazı zemin + tek vurgu rengi olarak yol boyası sarısı,
     çok geniş ve kalın büyük harfli başlıklar, gösterge paneli gibi monospace rakamlar,
     keskin köşeler ve kalın çizgiler.

   Renkleri değiştirmek için çoğu zaman 1. bölümdeki :root değerleri yeterli.
   Yazı tiplerini değiştirirsen site.ejs'teki Google Fonts linkini de değiştir.

   Bölümler:
     1. Renkler, yazı tipleri, ölçüler
     2. Temel kurallar
     3. Ortak parçalar: ikon, düğme, form alanı, başlıklar, kart tipleri
     4. İlk açılış perdesi
     5. Üst menü
     6. Ana sayfa: hero, 3D yol, arama bileti, şerit bantları, rota, satırlar
     7. Araç kartı
     8. Sayfa başlığı
     9. Araçlar listesi
    10. Araç detay
    11. Bilgi sayfaları
    12. Çağrı bandı, footer, mobil "Hemen ara"
    13. Hata sayfası
    14. Animasyonlar
    15. Ekran genişliğine göre düzen
   ===================================================================== */


/* ---------- 1. Renkler, yazı tipleri, ölçüler ---------- */
:root {
  --asfalt: #0e0e0e;            /* koyu zemin ve ana yazı */
  --asfalt-2: #181818;          /* koyu zemindeki kutular */
  --kagit: #f3f1eb;             /* açık zemin (kâğıt beyazı) */
  --kagit-2: #e9e6dd;           /* açık zemindeki ikinci ton */
  --beyaz: #ffffff;
  --gri: #6d6b65;               /* ikincil yazı */
  --cizgi: #0e0e0e;             /* açık zemindeki kalın çizgiler */
  --cizgi-ince: #d6d2c6;        /* açık zemindeki ince çizgiler */
  --sari: #ffd400;              /* yol boyası sarısı: tek vurgu rengi */

  --koyu-yazi: #b5b3ad;         /* koyu zemindeki normal yazı */
  --koyu-soluk: #7c7a75;        /* koyu zemindeki soluk yazı */
  --koyu-cizgi: rgba(255, 255, 255, .14);

  --yazi-tipi: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --egri: cubic-bezier(.2, .8, .2, 1);
  --gecis: .25s var(--egri);
}


/* ---------- 2. Temel kurallar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--yazi-tipi); font-size: 16px; line-height: 1.6; color: var(--asfalt); background: var(--kagit); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.1; }
::selection { color: var(--asfalt); background: var(--sari); }
:focus-visible { outline: 3px solid var(--sari); outline-offset: 3px; }
.ic { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.ikon-listesi { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ---------- 3. Ortak parçalar ---------- */
.ikon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; vertical-align: -0.18em; }

/* dev başlık: çok geniş, çok kalın, büyük harf */
.dev-baslik { font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: .92; }
.dev-baslik em { font-style: normal; color: var(--sari); }

/* küçük üst yazı: ── FİLOMUZDAN */
.ust-baslik { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gri); }
.ust-baslik::before { content: ""; width: 18px; height: 3px; background: var(--sari); }

/* düğmeler: .dugme (sarı), .cizgili (koyu zeminde çerçeveli), .siyah, .cizgili-siyah (sarı zeminde), .ikincil, .buyuk, .tam */
.dugme { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--yazi-tipi); font-stretch: 112%; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; color: var(--asfalt); background: var(--sari); border: 2px solid var(--sari); border-radius: 0; padding: 14px 24px; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate; transition: color var(--gecis), border-color var(--gecis), transform .35s var(--egri); }
.dugme::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--asfalt); transform: translateY(101%); transition: transform .35s var(--egri); }
.dugme:hover { color: var(--sari); border-color: var(--asfalt); }
.dugme:hover::before { transform: translateY(0); }
.dugme .ikon { transition: transform .35s var(--egri); }
.dugme:hover .ikon { transform: translateX(4px); }
.dugme.buyuk { font-size: 15px; padding: 18px 30px; }
.dugme.tam { width: 100%; }
.dugme.cizgili { color: var(--beyaz); background: transparent; border-color: rgba(255, 255, 255, .4); }
.dugme.cizgili::before { background: var(--beyaz); }
.dugme.cizgili:hover { color: var(--asfalt); border-color: var(--beyaz); }
.dugme.siyah { color: var(--sari); background: var(--asfalt); border-color: var(--asfalt); }
.dugme.siyah::before { background: var(--beyaz); }
.dugme.siyah:hover { color: var(--asfalt); border-color: var(--beyaz); }
.dugme.cizgili-siyah { color: var(--asfalt); background: transparent; border-color: var(--asfalt); }
.dugme.cizgili-siyah:hover { color: var(--sari); }
.dugme.ikincil { color: var(--asfalt); background: transparent; border-color: var(--asfalt); }
.dugme.ikincil:hover { color: var(--sari); }

/* form alanları */
select, input[type="number"], input[type="text"] { width: 100%; height: 50px; font: inherit; font-size: 15px; font-weight: 500; color: var(--asfalt); background-color: var(--beyaz); border: 2px solid var(--asfalt); border-radius: 0; padding: 0 14px; transition: box-shadow var(--gecis); }
select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230e0e0e' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
select:focus, input:focus { outline: none; box-shadow: 5px 5px 0 var(--sari); }
input::placeholder { color: #a3a09a; }

/* bölümler */
.bolum { padding: 120px 0; }
.bolum.acik { background: var(--kagit-2); }
.bolum.koyu { color: var(--beyaz); background: var(--asfalt); }
.bolum h2 { font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: clamp(32px, 4.6vw, 64px); letter-spacing: -0.02em; line-height: .95; margin: 10px 0 0; }

.bolum-bas { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 16px 32px; margin-bottom: 56px; padding-bottom: 28px; border-bottom: 2px solid currentColor; }
.bolum-bas.orta { grid-template-columns: 1fr; text-align: center; }
.bolum-no { font-family: var(--mono); font-size: clamp(56px, 8vw, 120px); font-weight: 700; line-height: .8; color: transparent; -webkit-text-stroke: 2px currentColor; }
.koyu .bolum-no { -webkit-text-stroke-color: var(--sari); }
.koyu .ust-baslik { color: var(--koyu-soluk); }
.bolum-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 0 2px 4px; background: linear-gradient(var(--sari), var(--sari)) 0 100% / 100% 3px no-repeat; transition: background-size var(--gecis); }
.bolum-link:hover { background-size: 100% 100%; }
.bolum-link .ikon { transition: transform var(--gecis); }
.bolum-link:hover .ikon { transform: translateX(5px); }

/* özellik kartları: kalın çerçeveli ızgara, üzerine gelince alttan sarıyla dolar */
.ozellik-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--cizgi); border-left: 2px solid var(--cizgi); }
.ozellik-izgara.uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ozellik-kart { position: relative; padding: 36px 30px 40px; border-right: 2px solid var(--cizgi); border-bottom: 2px solid var(--cizgi); background: linear-gradient(var(--sari), var(--sari)) 0 100% / 100% 0 no-repeat; transition: background-size .45s var(--egri); }
.ozellik-kart:hover { background-size: 100% 100%; }
.ozellik-kart h3 { font-stretch: 115%; font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: -0.01em; margin: 28px 0 10px; }
.ozellik-kart p { margin: 0; font-size: 15px; color: var(--gri); transition: color var(--gecis); }
.ozellik-kart:hover p { color: var(--asfalt); }
.ozellik-ikon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; color: var(--sari); background: var(--asfalt); transition: transform .45s var(--egri); }
.ozellik-ikon .ikon { width: 26px; height: 26px; }
.ozellik-kart:hover .ozellik-ikon { transform: rotate(-8deg) scale(1.08); }
.ozellik-ikon.yesil { color: #25d366; }

/* numaralı adımlar (hakkımızda, vizyonumuz) */
.adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--cizgi); }
.adimlar li { position: relative; padding: 36px 32px 44px 0; }
.adimlar li + li { padding-left: 32px; border-left: 2px solid var(--cizgi); }
.adim-no { display: block; font-family: var(--mono); font-size: 64px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--asfalt); transition: color var(--gecis); }
.adimlar li:hover .adim-no { color: var(--sari); }
.adimlar h3 { font-stretch: 115%; font-weight: 800; font-size: 21px; text-transform: uppercase; margin: 22px 0 10px; }
.adimlar p { margin: 0; color: var(--gri); }

/* diğer sayfalara geçiş satırları: üzerine gelince soldan sarı dolar */
.gecis { display: grid; border-top: 2px solid var(--cizgi); }
.gecis a { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 28px 8px; border-bottom: 2px solid var(--cizgi); text-decoration: none; overflow: hidden; isolation: isolate; }
.gecis a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sari); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--egri); }
.gecis a:hover::before { transform: scaleX(1); }
.gecis-ikon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; color: var(--sari); background: var(--asfalt); }
.gecis-ikon .ikon { width: 24px; height: 24px; }
.gecis strong { display: block; font-stretch: 125%; font-weight: 900; font-size: clamp(22px, 3vw, 36px); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; transition: transform .5s var(--egri); }
.gecis a:hover strong { transform: translateX(12px); }
.gecis small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gri); }
.gecis a:hover small { color: var(--asfalt); }
.gecis .ok .ikon { width: 34px; height: 34px; transition: transform .5s var(--egri); }
.gecis a:hover .ok .ikon { transform: translateX(8px) rotate(-45deg); }

/* tikli liste */
.tik-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0 40px; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--cizgi); }
.tik-liste li { position: relative; padding: 16px 0 16px 38px; font-weight: 600; border-bottom: 1px solid var(--cizgi-ince); }
.tik-liste li::before { content: ""; position: absolute; left: 0; top: 18px; width: 22px; height: 22px; background: var(--sari) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230e0e0e' stroke-width='3.5' stroke-linecap='square'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center no-repeat; }
.tik-liste.kucuk { grid-template-columns: 1fr; border-top: none; font-size: 14px; }
.tik-liste.kucuk li { padding: 10px 0 10px 32px; font-weight: 500; }
.tik-liste.kucuk li::before { top: 11px; width: 20px; height: 20px; }

/* boş liste uyarısı */
.bos-durum { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 72px 24px; border: 2px dashed var(--asfalt); }
.bos-durum .ikon { width: 44px; height: 44px; stroke-width: 1.5; }
.bos-durum p { margin: 0; max-width: 48ch; font-weight: 500; }
.bos-durum a { font-weight: 700; text-decoration-color: var(--sari); text-decoration-thickness: 3px; }

/* sayfa yolu (Ana sayfa / Araçlar) */
.yol { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--koyu-soluk); }
.yol a { text-decoration: none; transition: color var(--gecis); }
.yol a:hover { color: var(--sari); }
.yol span { margin: 0 12px; color: var(--sari); }


/* ---------- 4. İlk açılış perdesi (oturumda bir kez, site.ejs <head> scripti açar) ---------- */
.perde { display: none; }
.perde-acik .perde { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--sari); pointer-events: none; animation: perde-kalk .8s 1.05s cubic-bezier(.8, 0, .2, 1) forwards; }
.perde-yazi { font-stretch: 125%; font-weight: 900; font-size: clamp(56px, 14vw, 220px); text-transform: uppercase; letter-spacing: -0.03em; line-height: 1; color: var(--asfalt); animation: perde-yazi .9s var(--egri) both; }
.perde-serit { position: absolute; left: 0; right: 0; top: calc(50% + clamp(40px, 9vw, 130px)); height: 10px; background: repeating-linear-gradient(90deg, var(--asfalt) 0 60px, transparent 60px 100px); animation: serit-ak .6s linear infinite; }


/* ---------- 5. Üst menü ---------- */
.ustbar { position: sticky; top: 0; z-index: 50; color: var(--beyaz); background: var(--asfalt); border-bottom: 1px solid var(--koyu-cizgi); transition: box-shadow var(--gecis); }
.ustbar.kaydi { box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .7); }
.ustbar-ic { display: flex; align-items: center; gap: 28px; height: 78px; }

.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; color: inherit; }
.logo-isaret { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; font-stretch: 125%; font-weight: 900; font-size: 22px; color: var(--asfalt); background: var(--sari); transition: transform .5s var(--egri); }
.logo:hover .logo-isaret { transform: rotate(-90deg); }
.logo-yazi { display: flex; flex-direction: column; font-stretch: 125%; font-weight: 900; font-size: 19px; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; }
.logo-yazi b { margin-top: 5px; font-family: var(--mono); font-stretch: 100%; font-weight: 500; font-size: 10px; letter-spacing: .28em; color: var(--sari); }

.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu a { position: relative; display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 14px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--koyu-yazi); transition: color var(--gecis); }
.menu a small { font-size: 10px; color: var(--koyu-soluk); transition: color var(--gecis); }
.menu a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; background: var(--sari); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--egri); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--beyaz); }
.menu a:hover small, .menu a[aria-current="page"] small { color: var(--sari); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu .menu-tel { display: none; }

.ust-tel { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; font-family: var(--mono); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; color: var(--asfalt); background: var(--sari); transition: transform .35s var(--egri), background var(--gecis); }
.ust-tel:hover { background: var(--beyaz); }

.menu-dugme { display: none; position: relative; margin-left: auto; width: 48px; height: 48px; padding: 0; background: var(--sari); border: none; cursor: pointer; }
.menu-dugme span { position: absolute; left: 12px; right: 12px; height: 3px; background: var(--asfalt); transition: transform .35s var(--egri), top .35s var(--egri); }
.menu-dugme span:first-child { top: 17px; }
.menu-dugme span:last-child { top: 28px; }
.ustbar.menu-acik .menu-dugme span:first-child { top: 22px; transform: rotate(45deg); }
.ustbar.menu-acik .menu-dugme span:last-child { top: 22px; transform: rotate(-45deg); }

/* üst menünün altında sayfa ilerleme çizgisi (destekleyen tarayıcılarda) */
@supports (animation-timeline: scroll()) {
  .ustbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; transform-origin: 0 50%; background: var(--sari); animation: ilerleme linear both; animation-timeline: scroll(root); }
}


/* ---------- 6. Ana sayfa ---------- */
.hero { position: relative; overflow: hidden; display: flex; min-height: calc(100svh - 78px); color: var(--beyaz); background: var(--asfalt); }
.hero-ic { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding-top: 72px; padding-bottom: 200px; }

/* sağdaki eğik fotoğraf paneli */
.hero-foto { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 52%; margin: 0; overflow: hidden; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); animation: panel-ac 1.4s .2s var(--egri) both; }
.hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--asfalt) 0%, rgba(14, 14, 14, .35) 40%, rgba(14, 14, 14, .15) 100%), linear-gradient(0deg, var(--asfalt) 0%, transparent 45%); }
.hero-foto-ic { position: absolute; inset: -12% 0; background: var(--foto) center / cover no-repeat; filter: grayscale(1) contrast(1.15) brightness(.8); will-change: transform; }

.hero-ust { display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--koyu-yazi); animation: yukari-gel .8s .2s var(--egri) both; }
.canli { display: inline-flex; align-items: center; gap: 10px; color: var(--sari); }
.canli::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sari); animation: nabiz 1.8s ease-out infinite; }

.hero h1 { font-size: clamp(44px, 6.3vw, 112px); margin: 0; }
.hero h1 em { color: transparent; -webkit-text-stroke: 2px var(--sari); }
.hero-alt { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; max-width: 980px; }
.hero-alt p { margin: 0; max-width: 44ch; font-size: 18px; color: var(--koyu-yazi); animation: yukari-gel .9s .9s var(--egri) both; }
.hero-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; animation: yukari-gel .9s 1.05s var(--egri) both; }

/* alttaki 3D yol: şeritler izleyiciye doğru akar */
.yol-3d { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 44%; perspective: 260px; perspective-origin: 50% 0%; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); pointer-events: none; }
.yol-zemin { position: absolute; left: 50%; bottom: 0; width: 1400px; height: 2600px; margin-left: -700px; transform-origin: 50% 100%; transform: rotateX(78deg);
  background:
    repeating-linear-gradient(180deg, var(--sari) 0 90px, transparent 90px 190px) 50% 0 / 14px 100% no-repeat,
    linear-gradient(90deg, transparent 0 calc(50% - 360px), rgba(255, 255, 255, .55) calc(50% - 360px) calc(50% - 352px), transparent calc(50% - 352px) calc(50% + 352px), rgba(255, 255, 255, .55) calc(50% + 352px) calc(50% + 360px), transparent calc(50% + 360px)),
    linear-gradient(90deg, transparent 0 calc(50% - 420px), #151515 calc(50% - 420px) calc(50% + 420px), transparent calc(50% + 420px));
  animation: yol-ak .55s linear infinite; }

/* aşağı kaydır işareti */
.asagi { position: absolute; z-index: 3; left: 50%; bottom: 28px; width: 28px; height: 46px; margin-left: -14px; border: 2px solid var(--koyu-yazi); border-radius: 14px; }
.asagi span { position: absolute; left: 50%; top: 8px; width: 4px; height: 10px; margin-left: -2px; background: var(--sari); animation: tekerlek 1.6s var(--egri) infinite; }

/* arama bileti */
.bilet-bant { position: relative; z-index: 5; margin-top: -1px; padding: 0 0 72px; background: linear-gradient(180deg, var(--asfalt) 0 50%, var(--kagit) 50% 100%); }
.bilet { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)) auto; align-items: stretch; background: var(--beyaz); border: 2px solid var(--asfalt); box-shadow: 10px 10px 0 var(--sari); animation: yukari-gel .9s 1.2s var(--egri) both; }
.bilet-baslik { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 22px 26px; border-right: 2px dashed var(--asfalt); }
.bilet-baslik strong { font-stretch: 120%; font-weight: 900; font-size: 18px; text-transform: uppercase; line-height: 1.1; }
.bilet-alan { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 18px; border-right: 1px solid var(--cizgi-ince); }
.bilet-alan > span { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gri); }
.bilet-alan select, .bilet-alan input { height: 34px; padding: 0 28px 0 0; font-weight: 700; border: none; background-color: transparent; background-position: right 2px center; }
.bilet-alan input { padding-right: 0; }
.bilet-alan select:focus, .bilet-alan input:focus { box-shadow: none; }
.bilet-alan:focus-within { background: #fffbe0; }
.bilet-dugme { border: none; padding: 0 34px; font-size: 15px; }

/* çapraz şerit bantları: kaydırma hızına göre eğilir (--egim'i script verir) */
.seritler { position: relative; z-index: 4; height: 230px; overflow: hidden; background: var(--kagit); }
.serit { position: absolute; left: -5%; right: -5%; top: 50%; padding: 18px 0; overflow: hidden; white-space: nowrap; }
.serit.bir { z-index: 2; color: var(--asfalt); background: var(--sari); transform: translateY(-50%) rotate(-3deg) skewX(var(--egim, 0deg)); border-top: 3px solid var(--asfalt); border-bottom: 3px solid var(--asfalt); }
.serit.iki { z-index: 1; color: var(--sari); background: var(--asfalt); transform: translateY(-50%) rotate(3deg) skewX(calc(var(--egim, 0deg) * -1)); }
.serit-ic { display: inline-flex; align-items: center; animation: kay 38s linear infinite; }
.serit-ic.ters { animation-direction: reverse; animation-duration: 44s; }
.serit-ic span { font-stretch: 125%; font-weight: 900; font-size: clamp(22px, 3vw, 38px); text-transform: uppercase; letter-spacing: -0.01em; }
.serit-ic i { margin: 0 30px; font-style: normal; font-size: 22px; }

/* rota: kaydırdıkça ilerleyen yol ve araç (--ilerleme'yi ve aracın konumunu script verir) */
.rota-bolumu { overflow: hidden; }
.rota { position: relative; --ilerleme: 0; }
.rota-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rota-asfalt { fill: none; stroke: #232323; stroke-width: 70px; vector-effect: non-scaling-stroke; }
.rota-serit { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 3px; stroke-dasharray: 22 18; vector-effect: non-scaling-stroke; }
.rota-iz { fill: none; stroke: var(--sari); stroke-width: 4px; stroke-dasharray: 22 18; vector-effect: non-scaling-stroke; }
.rota-boyali { clip-path: inset(0 0 calc((1 - var(--ilerleme)) * 100%) 0); }
.rota-cizgi { display: none; }
.rota-arac { position: absolute; z-index: 3; top: 0; left: 0; width: 30px; height: 50px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); will-change: transform; }
.rota-arac svg { display: block; width: 100%; height: 100%; }
.rota-arac rect { fill: var(--sari); stroke: var(--asfalt); stroke-width: 2; }
.rota-arac rect.cam { fill: var(--asfalt); stroke: none; }
.rota-adimlar { position: relative; z-index: 2; display: grid; grid-template-rows: repeat(3, minmax(280px, auto)); list-style: none; margin: 0; padding: 0; }
.rota-adimlar li { align-self: center; width: min(40%, 440px); padding: 30px 32px 34px; background: var(--asfalt-2); border: 2px solid var(--koyu-cizgi); transition: border-color var(--gecis), transform .45s var(--egri); }
.rota-adimlar li:hover { border-color: var(--sari); transform: translateY(-6px); }
.rota-adimlar li:nth-child(1) { justify-self: end; }
.rota-adimlar li:nth-child(2), .rota-adimlar li:nth-child(3) { justify-self: start; }
.rota-adimlar .adim-no { -webkit-text-stroke-color: var(--sari); }
.rota-adimlar li:hover .adim-no { color: var(--sari); }
.rota-adimlar h3 { font-stretch: 120%; font-weight: 900; font-size: 24px; text-transform: uppercase; margin: 18px 0 10px; }
.rota-adimlar p { margin: 0; color: var(--koyu-yazi); }

/* kiralamadan önce: satırlar, üzerine gelince soldan sarı dolar */
.satirlar { border-top: 2px solid var(--cizgi); }
.satir { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.3fr) 64px; align-items: center; gap: 24px; padding: 34px 12px; border-bottom: 2px solid var(--cizgi); isolation: isolate; }
.satir::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sari); clip-path: inset(0 100% 0 0); transition: clip-path .55s var(--egri); }
.satir:hover::before { clip-path: inset(0 0 0 0); }
.satir-no { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.satir h3 { margin: 0; font-stretch: 125%; font-weight: 900; font-size: clamp(22px, 2.6vw, 34px); text-transform: uppercase; letter-spacing: -0.02em; transition: transform .55s var(--egri); }
.satir:hover h3 { transform: translateX(10px); }
.satir p { margin: 0; color: var(--gri); transition: color var(--gecis); }
.satir:hover p { color: var(--asfalt); }
.satir-ikon { justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; color: var(--sari); background: var(--asfalt); transition: transform .55s var(--egri); }
.satir-ikon .ikon { width: 26px; height: 26px; }
.satir:hover .satir-ikon { transform: rotate(90deg); }


/* ---------- 7. Araç kartı (fareyi takip eden 3D eğilmeyi script verir: --rx, --ry, --mx, --my) ---------- */
.arac-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 28px; }
.arac-kart { position: relative; display: flex; flex-direction: column; color: var(--asfalt); background: var(--beyaz); border: 2px solid var(--asfalt); text-decoration: none; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform .5s var(--egri), box-shadow .5s var(--egri); }
.arac-kart:hover { --ty: -8px; box-shadow: 12px 12px 0 var(--sari); transition: transform .12s linear, box-shadow .5s var(--egri); }
.arac-isik { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 212, 0, .35), transparent 60%); mix-blend-mode: multiply; transition: opacity var(--gecis); }
.arac-kart:hover .arac-isik { opacity: 1; }
.arac-foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kagit-2); border-bottom: 2px solid var(--asfalt); }
.arac-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) contrast(1.05); transform: scale(1.02); transition: filter .6s var(--egri), transform .8s var(--egri); }
.arac-kart:hover .arac-foto img { filter: grayscale(0); transform: scale(1.08); }
.foto-yok { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gri); background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(14, 14, 14, .045) 14px 28px); }
.foto-yok .ikon { width: 52px; height: 52px; stroke-width: 1.4; }
.arac-no { position: absolute; top: 0; left: 0; padding: 8px 12px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--sari); background: var(--asfalt); }
.arac-yil { position: absolute; top: 12px; right: 12px; padding: 4px 10px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--asfalt); background: var(--sari); }
.arac-govde { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 0; }
.arac-marka { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gri); }
.arac-govde h3 { margin: 4px 0 16px; font-stretch: 125%; font-weight: 900; font-size: 30px; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.arac-ozet { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; }
.arac-ozet li { padding: 4px 9px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--asfalt); }
.arac-alt { display: flex; align-items: stretch; justify-content: space-between; margin: auto -24px 0; border-top: 2px solid var(--asfalt); }
.arac-fiyat { display: flex; align-items: baseline; gap: 6px; padding: 16px 24px; }
.arac-fiyat strong { font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.arac-fiyat span { font-family: var(--mono); font-size: 12px; color: var(--gri); }
.arac-git { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sari); background: var(--asfalt); transition: gap var(--gecis); }
.arac-kart:hover .arac-git { gap: 14px; }


/* ---------- 8. Sayfa başlığı ---------- */
.sayfa-bas { position: relative; overflow: hidden; color: var(--beyaz); background: var(--asfalt); padding: 110px 0 120px; }
.sayfa-bas .ic { position: relative; z-index: 2; }
/* sağdaki eğik panel: siyah-beyaz fotoğraf sarı zeminle çarpılır (sarı-siyah iki renkli görüntü) */
.bas-foto { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 46%; margin: 0; overflow: hidden; background: var(--sari); clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); animation: panel-ac 1.3s .1s var(--egri) both; }
.bas-foto-ic { position: absolute; inset: -14% 0; background: var(--foto) center 60% / cover no-repeat; filter: grayscale(1) contrast(1.3); mix-blend-mode: multiply; will-change: transform; }
.sayfa-bas h1 { font-size: clamp(40px, 7.4vw, 116px); margin: 0 0 28px; max-width: 14ch; }
.sayfa-bas h1:has(br) { font-size: clamp(32px, 4.8vw, 78px); max-width: 22ch; } /* uzun, iki satırlı başlıklar */
.sayfa-bas .giris { max-width: 52ch; margin: 0; font-size: 18px; color: var(--koyu-yazi); animation: yukari-gel .9s .6s var(--egri) both; }
.sayfa-bas .yol { animation: yukari-gel .8s var(--egri) both; }


/* ---------- 9. Araçlar listesi ---------- */
.arac-liste { padding: 64px 0 120px; }
.liste-duzen { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; }
.liste-yan { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 20px; }

.filtre { background: var(--beyaz); border: 2px solid var(--asfalt); }
.filtre summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; font-stretch: 120%; font-weight: 900; font-size: 17px; text-transform: uppercase; color: var(--beyaz); background: var(--asfalt); }
.filtre summary::-webkit-details-marker { display: none; }
.filtre summary::after { content: "+"; font-family: var(--mono); font-size: 22px; font-weight: 400; line-height: 1; color: var(--sari); transition: transform var(--gecis); }
.filtre[open] summary::after { transform: rotate(45deg); }
.filtre-baslik { display: inline-flex; align-items: center; gap: 10px; }
.filtre-baslik .ikon { color: var(--sari); }
.filtre .adet { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--asfalt); background: var(--sari); padding: 1px 8px; }
.filtre-govde { padding: 20px; }
.alanlar { display: grid; grid-template-columns: 1fr; gap: 16px; }
.alan label, .alan-etiket { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gri); }
.aralik { display: flex; align-items: center; gap: 8px; }
.aralik span { font-family: var(--mono); color: var(--gri); }
.alan .onay { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--yazi-tipi); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--asfalt); cursor: pointer; }
.alan .onay input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--asfalt); }
.filtre-son { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 22px; }
.temizle { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration-color: var(--sari); text-decoration-thickness: 3px; }

.yan-yardim { display: flex; flex-direction: column; gap: 8px; padding: 26px 22px; color: var(--asfalt); background: var(--sari); border: 2px solid var(--asfalt); }
.yan-yardim .ozellik-ikon { margin-bottom: 8px; }
.yan-yardim strong { font-stretch: 120%; font-weight: 900; font-size: 19px; text-transform: uppercase; line-height: 1.1; }
.yan-yardim p { margin: 0; font-size: 14px; }
.yan-yardim a { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--mono); font-weight: 700; font-size: 17px; text-decoration: none; }

.sonuc-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 28px; padding: 0 0 18px; border-bottom: 2px solid var(--asfalt); font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--gri); }
.sonuc-bar strong { font-size: 28px; font-weight: 700; color: var(--asfalt); letter-spacing: -0.02em; }
.sonuc-sayfa { margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--cizgi-ince); }
.siralama { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--asfalt); }
.siralama select { width: auto; height: 44px; font-family: var(--yazi-tipi); text-transform: none; letter-spacing: 0; }
.liste-ana .arac-izgara { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 24px; }

.sayfalar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 56px; }
.sayfalar a, .sayfalar span { min-width: 46px; height: 46px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; font-weight: 700; text-decoration: none; background: var(--beyaz); border: 2px solid var(--asfalt); transition: background var(--gecis), color var(--gecis); }
.sayfalar a:hover { background: var(--sari); }
.sayfalar [aria-current="page"] { color: var(--sari); background: var(--asfalt); }
.sayfalar .ara { background: none; border: none; min-width: auto; padding: 0 4px; }


/* ---------- 10. Araç detay ---------- */
.detay { padding: 40px 0 120px; }
.detay .yol { color: var(--gri); }
.detay .yol a:hover { color: var(--asfalt); background: var(--sari); }
.detay-izgara { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; }

.galeri-buyuk { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kagit-2); border: 2px solid var(--asfalt); }
.galeri-buyuk img { display: block; width: 100%; height: 100%; object-fit: cover; animation: foto-gel .9s var(--egri) both; }
.galeri-buyuk .foto-yok .ikon { width: 72px; height: 72px; }
.kucukler { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 10px; }
.kucukler a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid transparent; filter: grayscale(1); transition: filter var(--gecis), border-color var(--gecis); }
.kucukler a:hover { filter: grayscale(0); }
.kucukler a[aria-current="true"] { border-color: var(--asfalt); box-shadow: 4px 4px 0 var(--sari); filter: none; }
.kucukler img { display: block; width: 100%; height: 100%; object-fit: cover; }

.bilgi { position: sticky; top: 104px; }
.bilgi-kart { padding: 30px; background: var(--beyaz); border: 2px solid var(--asfalt); box-shadow: 12px 12px 0 var(--asfalt); }
.bilgi-kart h1 { margin: 10px 0 0; font-stretch: 125%; font-weight: 900; font-size: clamp(32px, 3.8vw, 52px); text-transform: uppercase; letter-spacing: -0.02em; line-height: .95; }
.altbaslik { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gri); }
.detay-fiyat { margin: 24px -30px 22px; padding: 20px 30px; color: var(--beyaz); background: var(--asfalt); }
.detay-fiyat > span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--koyu-soluk); }
.detay-fiyat strong { font-family: var(--mono); font-size: 42px; font-weight: 700; letter-spacing: -0.04em; color: var(--sari); }
.detay-fiyat small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--koyu-yazi); }
.cagri-not { margin: 12px 0 0; font-size: 13px; color: var(--gri); text-align: center; }
.ozellikler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 26px 0; border-top: 2px solid var(--asfalt); border-left: 2px solid var(--asfalt); }
.ozellik { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border-right: 2px solid var(--asfalt); border-bottom: 2px solid var(--asfalt); transition: background var(--gecis); }
.ozellik:hover { background: var(--sari); }
.ozellik .ikon { grid-row: 1 / 3; width: 22px; height: 22px; }
.ozellik dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gri); }
.ozellik dd { margin: 0; font-weight: 800; font-size: 15px; }

.aciklama { margin-top: 40px; padding: 34px; max-width: calc(60% - 18px); background: var(--beyaz); border: 2px solid var(--asfalt); }
.aciklama h2 { margin: 0 0 14px; font-stretch: 125%; font-weight: 900; font-size: 26px; text-transform: uppercase; }
.aciklama p { margin: 0; white-space: pre-line; }


/* ---------- 11. Bilgi sayfaları ---------- */
.iki-kolon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
.iki-kolon h2 { font-size: clamp(28px, 3.2vw, 46px); }
.metin p { margin: 0 0 20px; font-size: 18px; line-height: 1.75; }
.metin p:first-child { font-stretch: 105%; font-size: 22px; font-weight: 600; line-height: 1.5; }
.metin p:last-child { margin-bottom: 0; }
.metin.ortali { max-width: 760px; margin: 0 auto; text-align: center; }
.yan-not { margin: 16px 0 0; color: var(--gri); }
.yan-gorsel { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 36px; border: 2px solid var(--asfalt); box-shadow: 12px 12px 0 var(--sari); filter: grayscale(.5); transition: filter .6s var(--egri); }
.yan-gorsel:hover { filter: grayscale(0); }

.ilke { position: relative; margin: 0 0 72px; padding: 64px 56px; color: var(--asfalt); background: var(--sari); border: 2px solid var(--asfalt); overflow: hidden; }
.ilke::after { content: "“"; position: absolute; right: 24px; top: -40px; font-stretch: 125%; font-weight: 900; font-size: 320px; line-height: 1; opacity: .12; }
.ilke > .ikon { width: 54px; height: 54px; padding: 13px; margin-bottom: 26px; color: var(--sari); background: var(--asfalt); }
.ilke p { position: relative; margin: 0; max-width: 24ch; font-stretch: 125%; font-weight: 900; font-size: clamp(28px, 4vw, 58px); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }

.kanallar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); border-top: 2px solid var(--asfalt); border-left: 2px solid var(--asfalt); }
.kanal { display: flex; flex-direction: column; gap: 8px; padding: 32px 28px; border-right: 2px solid var(--asfalt); border-bottom: 2px solid var(--asfalt); background: linear-gradient(var(--sari), var(--sari)) 0 100% / 100% 0 no-repeat; transition: background-size .45s var(--egri); }
.kanal:hover { background-size: 100% 100%; }
.kanal .ozellik-ikon { margin-bottom: 14px; }
.kanal-etiket { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gri); }
.kanal:hover .kanal-etiket, .kanal:hover .not { color: var(--asfalt); }
.deger { font-family: var(--mono); font-size: 18px; font-weight: 700; text-decoration: none; }
.deger.buyuk { font-size: 22px; white-space: nowrap; }
.kirilir { overflow-wrap: anywhere; }
.adres { font-size: 17px; font-weight: 700; line-height: 1.45; }
.not { font-size: 14px; color: var(--gri); }
.baglanti { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.baglanti .ikon { transition: transform var(--gecis); }
.baglanti:hover .ikon { transform: translateX(6px); }


/* ---------- 12. Çağrı bandı, footer, mobil düğme ---------- */
.cagri { position: relative; overflow: hidden; padding: 120px 0; color: var(--asfalt); background: var(--sari); border-top: 2px solid var(--asfalt); }
.cagri-foto { position: absolute; inset: -15% 0; background: var(--foto) center / cover no-repeat; filter: grayscale(1) contrast(1.35); mix-blend-mode: multiply; opacity: .5; will-change: transform; }
.cagri-ic { position: relative; z-index: 1; }
.cagri .ust-baslik { color: var(--asfalt); }
.cagri .ust-baslik::before { background: var(--asfalt); }
.cagri h2 { margin: 20px 0 40px; font-size: clamp(44px, 8.6vw, 140px); }
.cagri-alt { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.cagri p { margin: 0; max-width: 40ch; font-size: 19px; font-weight: 600; }
.cagri-sag { display: flex; flex-wrap: wrap; gap: 12px; }

.alt { overflow: hidden; color: var(--koyu-yazi); background: var(--asfalt); padding: 88px 0 28px; font-size: 15px; }
.alt-ic { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr 1fr; gap: 40px; }
.alt-marka p { margin: 0 0 18px; max-width: 30ch; font-size: 17px; color: var(--beyaz); }
.alt-tel { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--sari); text-decoration: none; letter-spacing: -0.02em; }
.alt-tel:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.alt h4 { margin: 4px 0 18px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--koyu-soluk); }
.alt ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.alt a { text-decoration: none; transition: color var(--gecis); }
.alt ul a:hover { color: var(--sari); }
.alt-dev { display: flex; align-items: flex-start; margin: 72px 0 0; font-stretch: 125%; font-weight: 900; font-size: clamp(56px, 12.5vw, 220px); text-transform: uppercase; letter-spacing: -0.04em; line-height: .78; color: transparent; -webkit-text-stroke: 2px #2c2c2c; white-space: nowrap; }
.alt-dev span { margin: .12em 0 0 .25em; font-size: .22em; letter-spacing: 0; line-height: 1; -webkit-text-stroke: 0; color: var(--sari); }
.alt-son { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--koyu-cizgi); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--koyu-soluk); }
.alt-son a:hover { color: var(--sari); }

.mobil-ara { display: none; }


/* ---------- 13. Hata sayfası ---------- */
.hata-sayfasi { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--beyaz); background: var(--asfalt); }
.hata-kutu { max-width: 720px; text-align: center; }
.hata-kutu .logo { margin-bottom: 40px; text-align: left; }
.hata-kod { font-family: var(--mono); font-size: clamp(120px, 24vw, 260px); font-weight: 700; line-height: .9; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 3px var(--sari); animation: yukari-gel .9s var(--egri) both; }
.hata-kutu h1 { margin: 20px 0 12px; font-stretch: 125%; font-weight: 900; font-size: clamp(26px, 4vw, 44px); text-transform: uppercase; }
.hata-kutu p { margin: 0 0 36px; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--koyu-yazi); }
.hata-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hata-dugmeler .ikincil { color: var(--beyaz); border-color: rgba(255, 255, 255, .4); }
.hata-dugmeler .ikincil::before { background: var(--beyaz); }
.hata-dugmeler .ikincil:hover { color: var(--asfalt); }


/* ---------- 14. Animasyonlar ---------- */
/* harf harf gelen başlıklar (site.ejs'in sonundaki script harflere böler) */
.harfli .kelime { display: inline-block; padding: .14em 0 .06em; margin: -.14em 0 -.06em; overflow: hidden; vertical-align: top; }
.harfli .harf { display: inline-block; transform: translateY(115%) rotate(6deg); }
.harfli.oynat .harf { animation: harf-gel .9s var(--egri) both; animation-delay: calc(var(--i) * 26ms + .05s); }
/* ilk açılışta perde kalkana kadar beklesinler */
.perde-acik .hero .harfli.oynat .harf, .perde-acik .sayfa-bas .harfli.oynat .harf { animation-delay: calc(var(--i) * 26ms + 1.35s); }
.perde-acik .hero-alt p, .perde-acik .hero-dugmeler, .perde-acik .bilet, .perde-acik .hero-ust, .perde-acik .hero-foto, .perde-acik .bas-foto, .perde-acik .sayfa-bas .giris, .perde-acik .sayfa-bas .yol { animation-delay: 1.3s; }

/* kaydırınca beliren öğeler */
.belirecek { opacity: 0; transform: translateY(40px); transition: opacity .8s ease var(--gecikme, 0ms), transform 1s var(--egri) var(--gecikme, 0ms); }
.belirecek.gorunur { opacity: 1; transform: none; }
.arac-kart.belirecek { transform: translateY(60px) rotate(1.5deg); }
.arac-kart.belirecek.gorunur { transform: none; }
.bolum-bas.belirecek { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--egri) var(--gecikme, 0ms); }
.bolum-bas.belirecek.gorunur { clip-path: inset(0 0 0 0); }
.alt-dev.belirecek { opacity: 1; transform: translateY(60%); transition: transform 1.2s var(--egri); }
.alt-dev.belirecek.gorunur { transform: none; }

.mobil-ara::before { content: ""; position: absolute; inset: -2px; animation: nabiz-kutu 2.2s ease-out infinite; }

@keyframes harf-gel { from { transform: translateY(115%) rotate(6deg); } to { transform: none; } }
@keyframes yukari-gel { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes panel-ac { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } }
@keyframes foto-gel { from { opacity: 0; transform: scale(1.06); } }
@keyframes yol-ak { from { background-position: 50% 0, 0 0, 0 0; } to { background-position: 50% 190px, 0 0, 0 0; } }
@keyframes kay { to { transform: translateX(-50%); } }
@keyframes tekerlek { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(255, 212, 0, .6); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 212, 0, 0); } }
@keyframes nabiz-kutu { 0% { box-shadow: 0 0 0 0 rgba(255, 212, 0, .7); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 212, 0, 0); } }
@keyframes ilerleme { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes perde-kalk { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes perde-yazi { from { opacity: 0; transform: translateY(40px) scale(.96); letter-spacing: .1em; } }
@keyframes serit-ak { to { background-position: -100px 0; } }


/* ---------- 15. Ekran genişliğine göre düzen ---------- */
@media (max-width: 1180px) {
  .bilet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bilet-baslik { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; border-right: none; border-bottom: 2px dashed var(--asfalt); }
  .bilet-dugme { grid-column: 1 / -1; height: 58px; }
  .bilet-alan:nth-child(5) { border-right: none; }
  .ozellik-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alt-ic { grid-template-columns: 1fr 1fr; }
  .aciklama { max-width: none; }
}
@media (max-width: 1000px) {
  .ustbar-ic { height: 70px; }
  .js .menu-dugme { display: block; }
  .ust-tel { display: none; }
  .js .menu { position: fixed; inset: 70px 0 0 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 32px; background: var(--asfalt); overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .55s var(--egri), visibility 0s .55s; }
  .js .ustbar.menu-acik .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .55s var(--egri), visibility 0s; }
  .js .menu a { padding: 18px 0; font-family: var(--yazi-tipi); font-stretch: 125%; font-weight: 900; font-size: 30px; letter-spacing: -0.01em; color: var(--beyaz); border-bottom: 1px solid var(--koyu-cizgi); }
  .js .menu a small { font-family: var(--mono); font-stretch: 100%; font-size: 12px; font-weight: 500; }
  .js .menu a::after { left: 0; right: auto; width: 60px; bottom: -1px; }
  .js .menu .menu-tel { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; padding: 18px; font-family: var(--mono); font-stretch: 100%; font-size: 18px; color: var(--asfalt); background: var(--sari); border: none; }
  .js .menu .menu-tel::after { display: none; }
  html:not(.js) .ustbar-ic { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; }
  html:not(.js) .menu { flex-wrap: wrap; margin-left: 0; width: 100%; }
  .hero-foto { width: 100%; clip-path: none; opacity: .45; animation-name: foto-gel; }
  .liste-duzen { grid-template-columns: 1fr; gap: 24px; }
  .liste-yan { position: static; }
  .yan-yardim { display: none; }
  .alanlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alan.genis { grid-column: span 3; }
  .filtre-son { flex-direction: row; justify-content: flex-start; }
  .filtre-son .dugme.tam { width: auto; }
  .detay-izgara { grid-template-columns: minmax(0, 1fr); }
  .bilgi-kart .dugme { white-space: normal; text-align: center; }
  .bilgi { position: static; }
  .iki-kolon { grid-template-columns: 1fr; gap: 32px; }
  .ozellik-izgara.uc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bas-foto { width: 100%; clip-path: none; opacity: .3; animation-name: foto-gel; }
  .rota-adimlar li { width: min(48%, 440px); }
}
@media (max-width: 760px) {
  .ic { padding: 0 18px; }
  .bolum { padding: 80px 0; }
  .bolum-bas { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 36px; }
  .bolum-bas .bolum-link { justify-self: start; }
  .bolum-no { font-size: 52px; }
  .bolum h2 { font-size: clamp(22px, 7.4vw, 44px); font-stretch: 112%; overflow-wrap: anywhere; }
  .hero-ic { gap: 28px; padding-top: 48px; padding-bottom: 150px; }
  .hero-ust { gap: 6px 14px; }
  .hero h1 em { -webkit-text-stroke-width: 1.5px; }
  /* uzun kelimeler (KİRALAYIN, ARAÇLARIMIZ) dar ekrana sığsın */
  .hero h1 { font-size: clamp(30px, 10.4vw, 60px); }
  .sayfa-bas h1 { font-size: clamp(30px, 10vw, 60px); }
  .sayfa-bas h1:has(br) { font-size: clamp(26px, 7.4vw, 44px); }
  .cagri h2 { font-size: clamp(32px, 11vw, 64px); }
  .hero-alt p { font-size: 16px; }
  .hero-dugmeler, .hero-dugmeler .dugme { width: 100%; }
  .asagi { display: none; }
  .yol-3d { height: 34%; }
  .bilet { grid-template-columns: 1fr 1fr; box-shadow: 6px 6px 0 var(--sari); }
  .bilet-baslik { flex-direction: column; align-items: flex-start; padding: 18px; }
  .bilet-alan { padding: 12px 14px; border-bottom: 1px solid var(--cizgi-ince); }
  .bilet-alan:nth-child(3), .bilet-alan:nth-child(5) { border-right: none; }
  .seritler { height: 170px; }
  .serit { padding: 12px 0; }
  .ozellik-izgara, .ozellik-izgara.uc { grid-template-columns: 1fr; }
  .adimlar { grid-template-columns: 1fr; }
  .adimlar li, .adimlar li + li { padding: 28px 0; border-left: none; border-bottom: 2px solid var(--cizgi); }
  .satir { grid-template-columns: 1fr auto; gap: 10px 16px; padding: 26px 4px; }
  .satir-no, .satir p { grid-column: 1 / -1; }
  .satir-ikon { grid-row: 2; grid-column: 2; width: 46px; height: 46px; }
  .gecis a { grid-template-columns: auto 1fr; gap: 16px; }
  .gecis .ok { display: none; }

  /* telefonda rota: yol solda düz bir çizgi, araç onun üzerinde iner */
  .rota-svg { display: none; }
  .rota-cizgi { display: block; position: absolute; top: 0; bottom: 0; left: 10px; width: 24px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .3) 0 14px, transparent 14px 26px) 50% 0 / 3px 100% no-repeat, #232323; }
  .rota-cizgi::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--ilerleme) * 100%); background: repeating-linear-gradient(180deg, var(--sari) 0 14px, transparent 14px 26px) 50% 0 / 4px 100% no-repeat; }
  .rota-adimlar { grid-template-rows: none; gap: 20px; padding-left: 52px; }
  .rota-adimlar li, .rota-adimlar li:nth-child(n) { width: auto; justify-self: stretch; }

  .sayfa-bas { padding: 72px 0 80px; }
  .sayfa-bas .giris { font-size: 16px; }
  .arac-liste { padding: 32px 0 80px; }
  .alanlar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .alan.genis { grid-column: 1 / -1; }
  .filtre-son .dugme.tam { width: 100%; }
  .filtre-son { flex-direction: column; }
  .siralama { width: 100%; }
  .siralama select { flex: 1; width: 100%; }
  .detay { padding: 24px 0 80px; }
  .bilgi-kart { padding: 22px; box-shadow: 8px 8px 0 var(--asfalt); }
  .detay-fiyat { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
  .aciklama { padding: 24px 22px; }
  .ilke { padding: 44px 24px; }
  .cagri { padding: 80px 0; }
  .cagri-sag, .cagri-sag .dugme { width: 100%; }
  .alt { padding-top: 64px; }
  .alt-ic { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .alt-marka, .alt-ic > div:nth-child(2) { grid-column: 1 / -1; }
  .alt-dev { margin-top: 48px; -webkit-text-stroke-width: 1.5px; }

  /* telefonda ekranın altında sabit "Hemen ara" düğmesi */
  .tel-var { padding-bottom: 78px; }
  .mobil-ara { position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; font-family: var(--yazi-tipi); font-stretch: 120%; font-weight: 900; font-size: 16px; text-transform: uppercase; color: var(--asfalt); text-decoration: none; background: var(--sari); border: 2px solid var(--asfalt); box-shadow: 5px 5px 0 var(--asfalt); }
}
@media (max-width: 480px) {
  .bilet { grid-template-columns: 1fr; }
  .bilet-alan { border-right: none; }
  .ozellikler { grid-template-columns: 1fr 1fr; }
  .detay-fiyat strong { font-size: 34px; }
  .sonuc-sayfa { display: block; margin-left: 0; padding-left: 0; border-left: none; }
  .arac-govde h3 { font-size: 26px; }
}

/* hareket azaltma tercihi olan kullanıcılar için hareketleri kapatır */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .perde-acik .perde { display: none; }
}

/* ===== Demo şeridi (her sayfanın en üstü) ===== */
.demo-serit { position: relative; z-index: 60; padding: 6px 16px; font: 600 12px/1.4 var(--mono); letter-spacing: .04em; text-align: center; color: var(--asfalt); background: var(--sari); }
.demo-serit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hata-sayfasi .demo-serit { position: fixed; top: 0; left: 0; right: 0; }