:root{
  --color-dealer-cyan:#63aec1;
  --color-light-ice-blue:#d7edf2;
  --color-aqua-signal:#0deaf1;
  --color-deep-teal:#006f7b;
  --color-arctic-white:#ffffff;
  --color-snow-surface:#f9f9f9;
  --color-mist-gray:#eaeaeb;
  --color-metal-silver:#cfd4d6;
  --color-graphite:#3e343b;
  --color-carbon-black:#000000;
  --color-night-cabin:#151515;
  --color-download-red:#d71920;
  --color-warm-bronze:#a17054;
  --color-road-gray:#666462;

  --gradient-night-drive:linear-gradient(135deg,rgb(21,21,21) 0%,rgb(0,111,123) 100%);
  --gradient-cyan-fade:linear-gradient(135deg,rgb(99,174,193) 0%,rgb(215,237,242) 100%);

  --font-dealer-condensed:'Oswald','DIN Condensed','Arial Narrow',ui-sans-serif,system-ui,sans-serif;
  --font-oj-sans:'Inter','Helvetica Neue',Arial,ui-sans-serif,system-ui,sans-serif;
  --font-oj-mono:'Roboto Mono','SFMono-Regular',Consolas,monospace;

  --max:1320px;
  --header-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-oj-sans);
  color:var(--color-carbon-black);
  background:var(--color-arctic-white);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ============ HEADER ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.header-inner{
  max-width:var(--max);margin:0 auto;height:100%;
  display:flex;align-items:center;gap:32px;padding:0 24px;
}
.logo-wrap{flex-shrink:0}
.logo{height:22px;width:auto;filter:brightness(0) invert(1)}
.primary-nav{display:flex;gap:28px;margin-left:24px}
.primary-nav a{
  font-family:var(--font-dealer-condensed);
  font-weight:500;font-size:13px;
  letter-spacing:.06em;color:#fff;text-transform:uppercase;
  transition:color .2s;
}
.primary-nav a:hover{color:var(--color-dealer-cyan)}
.dealer-locator{
  margin-left:auto;
  font-family:var(--font-dealer-condensed);
  font-size:12px;letter-spacing:.08em;color:#fff;
  display:flex;align-items:center;gap:8px;text-transform:uppercase;
}
.dealer-locator .pin{color:var(--color-dealer-cyan)}
.menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:2px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  flex-shrink:0;
}
.menu-toggle span{
  width:18px;
  height:2px;
  background:#fff;
  display:block;
  transition:transform .2s,opacity .2s;
}
.site-header.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.menu-open .menu-toggle span:nth-child(2){opacity:0}
.site-header.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{
  position:relative;height:100vh;min-height:640px;
  overflow:hidden;color:#fff;
  background:#000;
}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.9}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 70%),
             linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.4) 100%);
}
.hero-copy{
  position:relative;z-index:2;
  max-width:var(--max);margin:0 auto;padding:0 24px;
  height:100%;display:flex;flex-direction:column;justify-content:center;
}
.hero-eyebrow{
  font-family:var(--font-dealer-condensed);
  font-size:20px;color:var(--color-aqua-signal);
  letter-spacing:.15em;font-weight:600;
}
.hero-title{
  font-family:var(--font-dealer-condensed);
  font-size:clamp(64px,9vw,128px);
  font-weight:700;letter-spacing:-.01em;line-height:.95;
  text-transform:uppercase;margin-top:4px;
}
.hero-title span{color:var(--color-arctic-white)}
.hero-sub{
  font-family:var(--font-dealer-condensed);
  font-size:32px;font-weight:500;letter-spacing:.05em;
  margin-bottom:20px;color:var(--color-light-ice-blue);
  text-transform:uppercase;
}
.hero-offer{font-size:18px;margin-top:8px}
.hero-offer.big{
  font-family:var(--font-dealer-condensed);
  font-size:28px;letter-spacing:.04em;font-weight:600;
}
.hero-offer strong{color:var(--color-aqua-signal);font-weight:600}
.hero-foot{font-size:13px;opacity:.85;margin-top:8px}
.hero-cta{display:flex;gap:12px;margin-top:24px}

.hero-dots{
  position:absolute;right:28px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;z-index:2;
}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4)}
.dot.active{background:var(--color-aqua-signal);box-shadow:0 0 0 4px rgba(13,234,241,.2)}

/* ============ BUTTONS ============ */
.btn{
  font-family:var(--font-dealer-condensed);
  text-transform:uppercase;
  font-size:14px;letter-spacing:.06em;
  padding:14px 24px;border-radius:2px;
  display:inline-flex;align-items:center;gap:8px;
  transition:all .2s;font-weight:600;
}
.btn-primary{background:var(--color-dealer-cyan);color:#fff}
.btn-primary:hover{background:var(--color-deep-teal)}
.btn-dark{background:#000;color:#fff}
.btn-dark:hover{background:var(--color-deep-teal)}
.btn-ghost{background:transparent;color:#fff;border:1px solid #fff}
.btn-ghost:hover{background:#fff;color:#000}
.btn-outline{background:#fff;color:var(--color-deep-teal);border:1px solid var(--color-dealer-cyan)}
.btn-outline:hover{background:var(--color-light-ice-blue);color:#000}

.section-title{
  font-family:var(--font-dealer-condensed);
  font-size:clamp(28px,3.5vw,40px);
  letter-spacing:.02em;text-transform:uppercase;
  text-align:center;font-weight:600;
}
.section-title.left{text-align:left}
.section-kicker{
  font-family:var(--font-oj-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-deep-teal);
  margin-bottom:10px;
}
.section-actions{text-align:center;margin-top:32px}
.section-actions .btn-ghost{color:var(--color-deep-teal);border-color:var(--color-deep-teal)}
.section-actions .btn-ghost:hover{background:var(--color-deep-teal);color:#fff}

/* ============ MODELS — PINNED HORIZONTAL SCROLL ============ */
.models-section{
  position:relative;background:#f2f2f2;
  /* total scroll length: 1vh per slide hold + extra for smoothness.
     JS reads --count from data-count and sets height accordingly. */
  height:calc((var(--slides, 5)) * 100vh);
}
.models-pin{
  position:sticky;top:0;
  height:100vh;width:100%;
  overflow:hidden;
  display:flex;align-items:center;justify-content:flex-start;
}
.models-track{
  display:flex;flex-wrap:nowrap;
  height:100%;align-items:center;
  will-change:transform;
  /* leading + trailing padding so first / last slide center exactly in the viewport */
  padding:0 calc((100vw - var(--slide-w)) / 2);
}
:root{ --slide-w:70vw; }
.vehicle-slide{
  position:relative;
  flex:0 0 var(--slide-w);
  height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:80px 0 40px;
}
.vehicle-bg-name{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-185%) scale(.98);
  font-family:var(--font-dealer-condensed);
  font-weight:800;text-transform:uppercase;
  font-size:clamp(100px,14vw,220px);
  line-height:.85;letter-spacing:-.05em;
  color:#0a0a0a;white-space:nowrap;
  z-index:1;pointer-events:none;user-select:none;
  opacity:calc(0.18 + var(--bg-opacity,0) * 0.82);
  transition:opacity .25s ease-out, transform .35s ease-out;
}
.vehicle-slide.is-centered .vehicle-bg-name{
  transform:translate(-50%,-170%) scale(1);
}
.vehicle-canvas{
  position:relative;z-index:2;
  width:min(1100px,68vw);
  aspect-ratio:1304/469;     /* exact match for source images so % positions = image % */
  display:flex;align-items:center;justify-content:center;
  margin-top:4vh;
}
.vehicle-img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 30px 30px rgba(0,0,0,.25));
  position:relative;z-index:1;
  /* WebKit/Safari: drop-shadow() alpha kanalını takip eder, AMA filtrelenmiş
     bu görsel `will-change:transform` taşıyan .models-track'in içinde. Track
     durup kalktıkça WebKit kirli-dikdörtgen (partial repaint) ile yeniden
     boyuyor ve gölgeyi araç siluetine göre değil ELEMANIN KUTUSUNA göre
     rasterize ediyor — ekranda gelip giden dikdörtgen gri blok bu.
     Kendi compositing katmanına sabitleyince filtre tek seferde rasterize
     ediliyor ve kısmi yeniden boyama artefaktı ortadan kalkıyor. */
  will-change:filter;
  transform:translateZ(0);
}

/* ===== SVG wheels overlay =====
   Kaynak, tüm jant sembolünü (lastik + jant + göbek + fren kalibre ipucu) TEK
   <use> olarak döndürüyordu. Burada bilinçli tek sapma: kalibre ipucu göbeğe
   değil süspansiyona bağlıdır, gerçekte dönmez — bu yüzden sembol ikiye
   ayrıldı (wheel-art = dönen kısım, wheel-caliper = sabit kısım, bkz.
   icons.tsx) ve animasyon yalnızca dönen katmana uygulanıyor.
   NOT: Bu ayrım, bildirilen "gelip giden gri blok" hatasının sebebi DEĞİLDİ
   (o hata .vehicle-img'in drop-shadow'unda — bkz. oradaki yorum); yalnızca
   fiziksel doğruluk için korunuyor. */
.wheel{
  position:absolute;
  height:var(--wheel-h, 23%);     /* % of canvas height */
  aspect-ratio:1/1;
  bottom:var(--wheel-bottom, 6%);
  z-index:2;
  pointer-events:none;
}
.wheel.front{ left:var(--wheel-front, 18%); }
.wheel.rear{  left:var(--wheel-rear, 73%); }
.wheel-spin,
.wheel-caliper{
  position:absolute;inset:0;width:100%;height:100%;
}
.wheel-spin{
  animation:wheel-spin .85s linear infinite;
  animation-play-state:paused;
  will-change:transform;
  transform-origin:50% 50%;
  backface-visibility:hidden;
}
/* Safari/WebKit: bir kardeşin animation-play-state'i her değiştiğinde, kendi
   katmanına alınmamış bu statik kardeş de yeniden boyanıp bir anlık görünüp
   kayboluyordu (kalibre lekesinin flick etmesi). Kendi compositing layer'ına
   sabitleyip bu WebKit tuhaflığını önlüyoruz. */
.wheel-caliper{
  transform:translateZ(0);
  backface-visibility:hidden;
}
.models-track.is-moving .wheel-spin{
  animation-play-state:running;
}
@keyframes wheel-spin{
  to{ transform:rotate(-360deg); }
}

/* ============================================================
   TEKERLEK MANUEL AYAR — her araç için ayrı tune et
   ------------------------------------------------------------
   --wheel-front  : ÖN tekerlek sol konumu (canvas genişliğinin %'si)
   --wheel-rear   : ARKA tekerlek sol konumu
   --wheel-h      : Tekerlek çapı (canvas yüksekliğinin %'si)
   --wheel-bottom : Alttan boşluk (canvas yüksekliğinin %'si)

   Nasıl ayarlanır:
   1) Tarayıcıda sayfayı aç, ilgili slide'a kaydır.
   2) DevTools (sağ tık → İncele) aç, .vehicle-slide:nth-child(N)
      kuralını seç, değerleri ok tuşlarıyla artır/azalt — anında görürsün.
   3) PNG'deki gerçek tekerlek tam SVG ile çakışınca, değerleri
      buraya kopyala.
   ============================================================ */
.vehicle-slide:nth-child(1){ --wheel-front:17.5%; --wheel-rear:70.3%; --wheel-h:34%; --wheel-bottom:5.5%;   } /* OMODA 5 */
.vehicle-slide:nth-child(2){ --wheel-front:16.4%; --wheel-rear:70.2%; --wheel-h:34%; --wheel-bottom:4.9%; } /* OMODA 7 */
.vehicle-slide:nth-child(3){ --wheel-front:15.2%; --wheel-rear:70.5%; --wheel-h:36%; --wheel-bottom:6%;   } /* EVOLVE 4x2 */
.vehicle-slide:nth-child(4){ --wheel-front:15.2%; --wheel-rear:70.5%; --wheel-h:36%; --wheel-bottom:6%;   } /* EVOLVE 4x4 */
.vehicle-slide:nth-child(5){ --wheel-front:15.2%; --wheel-rear:70.5%; --wheel-h:36%; --wheel-bottom:6%;   } /* REVIVE */
.vehicle-content{
  position:relative;z-index:3;
  margin-top:24px;text-align:center;
  padding:0 20px;
}
.vehicle-tag{
  font-family:var(--font-oj-sans);
  font-size:18px;font-weight:500;color:#000;
  margin-bottom:8px;
}
.vehicle-sub{
  font-family:var(--font-oj-mono);
  font-size:13px;color:var(--color-road-gray);
  letter-spacing:.04em;margin-bottom:18px;
}
.vehicle-cta{display:flex;gap:12px;justify-content:center}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;min-width:152px;padding:12px 28px;
  border-radius:9999px;
  font-family:var(--font-dealer-condensed);
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;transition:.2s;
}
.pill-dark{background:#000;color:#fff}
.pill-dark:hover{background:var(--color-deep-teal)}
.pill-light{background:#fff;color:#000;border:1px solid #e5e5e5}
.pill-light:hover{background:var(--color-light-ice-blue)}

.models-progress{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:5;
}
.models-progress span{
  width:24px;height:3px;background:#cfd4d6;border-radius:2px;
  transition:background .3s, width .3s;
}
.models-progress span.active{background:var(--color-dealer-cyan);width:48px}

/* ============ ABOUT ============ */
/* Source directory was flat (css/images side by side); engine puts CSS under
   assets/css/ and this fixed design photo under assets/images/, so the two
   url() below point one level up — no other change to this file. */
.about{padding:80px 24px;max-width:var(--max);margin:0 auto;text-align:center;
  background:url('../images/_DSC8415.jpg') center/cover no-repeat;
  background-blend-mode:lighten;
  color:#fff;position:relative;border-radius:0;
  margin-top:0;
}
.about::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.3))}
.about>*{position:relative;z-index:1}
.about .section-title{color:#fff}
.about-lead{max-width:880px;margin:24px auto 0;font-size:15px;line-height:1.7;opacity:.95}
.about-cta{margin-top:24px}
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  margin-top:48px;
}
.about-card{position:relative;overflow:hidden}
.about-card img{width:100%;height:280px;object-fit:cover}
.about-card-body{
  position:absolute;bottom:0;left:0;right:0;padding:20px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));
  text-align:left;
}
.about-card-body h3{
  font-family:var(--font-dealer-condensed);
  font-size:18px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
}

/* ============ HOME EXPERIENCE FLOW ============ */
.experience-flow{
  background:linear-gradient(180deg,#f4f7f8 0%,#d7edf2 18%,#8fb1c1 42%,#151515 68%,#050505 100%);
  overflow:hidden;
}
.experience-intro{
  max-width:var(--max);
  margin:0 auto;
  padding:96px 24px 120px;
  text-align:center;
}
.experience-intro h2,
.safety-panorama h2,
.service-hero-copy h2,
.tech-copy h2,
.keep-exploring h2{
  font-family:var(--font-dealer-condensed);
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.08;
}
.experience-intro h2{
  max-width:620px;
  margin:0 auto;
  font-size:clamp(38px,5vw,72px);
}
.experience-tabs{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:#fff;
  border:1px solid var(--color-mist-gray);
  border-radius:999px;
  padding:4px;
  margin:24px auto 28px;
}
.experience-tabs button{
  min-width:92px;
  padding:8px 14px;
  border-radius:999px;
  font-family:var(--font-dealer-condensed);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-road-gray);
  transition:background .2s,color .2s;
}
.experience-tabs button:focus-visible{
  outline:2px solid var(--color-aqua-signal);
  outline-offset:2px;
}
.experience-tabs .active{
  background:#000;
  color:#fff;
}
.experience-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:920px;
  margin:0 auto;
}
.experience-panel{
  text-align:left;
}
.experience-panel[hidden]{display:none}
.experience-cards img{
  width:100%;
  height:230px;
  object-fit:cover;
  border-radius:8px;
  background:#000;
}
/* .experience-flow'un gradyanı %68'den sonra #151515/#050505'e iner ve kartlar
   TAM O KOYU BÖLGEDE oturur; kaynak bu iki kuralda metin rengini hiç
   ayarlamadığı için başlık body'den gelen siyahı miras alıyor, yani siyah
   zeminde siyah yazı oluyordu. Açık renge çekildi (dosyadaki diğer koyu
   bölümlerle aynı .78 opaklık deseni — bkz. .service-points article p). */
.experience-cards h3{
  font-family:var(--font-dealer-condensed);
  font-size:20px;
  text-transform:uppercase;
  margin-top:16px;
  color:#fff;
}
.experience-cards p{
  color:rgba(255,255,255,.78);
  font-size:13px;
  margin-top:8px;
}
.safety-panorama{
  min-height:760px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(143,177,193,.1) 0%,rgba(15,24,28,.15) 38%,rgba(0,0,0,.25) 100%),
    url('../images/_DSC8415.jpg') center/cover no-repeat;
}
.panorama-copy{
  max-width:620px;
  padding:0 24px;
  text-shadow:0 8px 30px rgba(0,0,0,.38);
}
.panorama-copy span,
.service-hero-copy span{
  font-family:var(--font-oj-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-aqua-signal);
}
.safety-panorama h2{
  font-size:clamp(34px,5vw,64px);
  margin-top:14px;
}
.safety-panorama p{
  color:rgba(255,255,255,.86);
  margin-top:14px;
}
.dealer-experience{
  max-width:920px;
  margin:-78px auto 140px;
  padding:0 24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  position:relative;
  z-index:2;
}
.dealer-card{
  border-radius:8px;
  overflow:hidden;
  min-height:260px;
}
.dealer-card.light{
  background:#fff;
  color:#000;
}
.dealer-card.light img{
  width:100%;
  height:150px;
  object-fit:cover;
}
.dealer-card.light div,
.dealer-card.dark{
  padding:22px;
}
.dealer-card h3{
  font-family:var(--font-dealer-condensed);
  font-size:26px;
  text-transform:uppercase;
  line-height:1.12;
}
.dealer-card p{
  color:var(--color-road-gray);
  font-size:13px;
  margin:8px 0 14px;
}
.dealer-card.dark{
  background:#030303;
  color:#fff;
}
.dealer-card.dark .lead-form{margin-top:18px}
.dealer-card.wide{
  grid-column:1 / -1;
  min-height:220px;
  position:relative;
  color:#fff;
}
.dealer-card.wide img{
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
  filter:brightness(.62);
}
.dealer-card.wide div{
  position:absolute;
  inset:auto auto 22px 22px;
}
.mini-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 16px;
  border-radius:999px;
  background:#000;
  color:#fff;
  font-family:var(--font-dealer-condensed);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.dealer-card.wide .mini-pill{background:#fff;color:#000;margin-top:12px}
.service-depth{
  /* .service-hero kendi fotoğrafıyla zaten koyu; ama .service-points'in
     (bakım kartlarının altındaki beyaz metin) hiç arka planı yoktu — sayfanın
     varsayılan beyaz zeminine oturunca görünmez oluyordu. */
  background:var(--color-night-cabin);
  color:#fff;
}
.service-hero{
  position:relative;
  min-height:720px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.service-hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.52);
}
.service-hero::after{
  content:"";
  position:absolute;
  inset:40% 0 0;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.88));
}
.service-hero-copy{
  position:relative;
  z-index:1;
  max-width:var(--max);
  width:100%;
  margin:0 auto;
  padding:0 24px 74px;
}
.service-hero-copy h2{
  max-width:560px;
  font-size:clamp(36px,5vw,68px);
  line-height:1.12;
  margin-top:12px;
}
.service-hero-copy p{
  max-width:560px;
  color:rgba(255,255,255,.78);
  margin-top:14px;
}
.service-points{
  max-width:var(--max);
  margin:-36px auto 0;
  padding:0 24px 120px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  position:relative;
  z-index:2;
}
.service-points article img{
  width:100%;
  height:190px;
  object-fit:cover;
  border-radius:8px;
}
.service-points article p{
  color:rgba(255,255,255,.78);
  font-size:13px;
  margin-top:12px;
}
.tech-focus{
  max-width:var(--max);
  margin:0 auto;
  padding:64px 24px 112px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:56px;
  align-items:center;
  /* .tech-copy beyaz metin varsayıyordu ama bölümün hiç arka planı yoktu —
     beyaz zeminde görünmez kalıyordu. Section max-width'li olduğu için düz
     background yerine box-shadow/clip-path ile tam-genişlik koyu şerit
     üretiliyor (görsel diğer koyu bölümlerle tutarlı kalsın diye). */
  background:var(--color-night-cabin);
  box-shadow:0 0 0 100vmax var(--color-night-cabin);
  clip-path:inset(0 -100vmax);
  color:#fff;
}
.tech-copy h2{
  font-size:clamp(34px,4.5vw,62px);
  line-height:1.12;
  max-width:560px;
}
.tech-copy p{
  color:rgba(255,255,255,.74);
  margin:18px 0 24px;
  max-width:560px;
}
.tech-display{
  background:radial-gradient(circle at 50% 40%,rgba(99,174,193,.28),rgba(0,0,0,0) 55%);
}
.tech-display img{
  width:100%;
  max-height:520px;
  object-fit:cover;
  border-radius:8px;
  filter:brightness(.78) contrast(1.05);
}
.keep-exploring{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px 96px;
  /* aynı eksik-arka-plan sorunu (bkz. .tech-focus yorumu) */
  background:var(--color-night-cabin);
  box-shadow:0 0 0 100vmax var(--color-night-cabin);
  clip-path:inset(0 -100vmax);
  color:#fff;
}
.keep-exploring h2{
  font-size:clamp(32px,4vw,54px);
  text-align:center;
  margin-bottom:26px;
}
.explore-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.explore-links a{
  min-height:76px;
  padding:18px;
  border-radius:4px;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-dealer-condensed);
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:1px solid rgba(99,174,193,.45);
  background:#fff;
  transition:background .2s,border-color .2s,color .2s;
}
.explore-links a:nth-child(1){background:var(--color-dealer-cyan);color:#fff;border-color:var(--color-dealer-cyan)}
.explore-links a:nth-child(2){background:var(--color-light-ice-blue);border-color:var(--color-dealer-cyan)}
.explore-links a:nth-child(3){background:#fff;border-color:var(--color-dealer-cyan)}
.explore-links a:hover{background:var(--color-deep-teal);color:#fff;border-color:var(--color-deep-teal)}
.explore-links span{
  width:28px;
  height:28px;
  flex-shrink:0;     /* olmadan flex satırı sıkıştıkça daire oval basılıyordu */
  border-radius:50%;
  background:#000;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-oj-sans);
}
/* Ok artık metin karakteri değil vektör (bkz. icons.tsx ArrowRightIcon) —
   yuvarlağın içindeki oran her tarayıcıda birebir aynı. */
.explore-links span svg{
  width:14px;
  height:14px;
  display:block;
}
.explore-links a:hover span{background:#fff;color:#000}
.explore-signup{
  margin-top:10px;
  background:#050505;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:28px;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:32px;
  align-items:center;
}
.explore-signup p{
  max-width:420px;
  color:rgba(255,255,255,.82);
  font-size:18px;
  font-weight:600;
}
.compact-form{
  gap:10px;
}
.compact-form label{
  color:inherit;
}
.compact-form input{
  background:#161616;
  border-color:#303030;
  color:#fff;
}

/* ============ SUB PAGES ============ */
.page-hero{
  position:relative;
  min-height:430px;
  padding:calc(var(--header-h) + 96px) 24px 72px;
  background:var(--gradient-night-drive);
  color:#fff;
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:auto -8vw -18vw auto;
  width:48vw;
  aspect-ratio:1;
  background:rgba(99,174,193,.18);
  transform:skewX(-18deg);
}
.page-hero-inner{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin:0 auto;
}
.page-hero .section-kicker{color:var(--color-aqua-signal)}
.page-title{
  font-family:var(--font-dealer-condensed);
  font-size:clamp(48px,7vw,96px);
  line-height:1.14;
  text-transform:uppercase;
  letter-spacing:0;
  max-width:880px;
}
.page-lead{
  max-width:640px;
  color:rgba(255,255,255,.78);
  margin-top:22px;
  font-size:18px;
}
.page-main{
  padding:72px 24px 88px;
}
.page-main.compact{padding-top:56px}
.page-container{
  max-width:var(--max);
  margin:0 auto;
}
.feature-strip{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:32px;
  align-items:stretch;
  margin-bottom:48px;
}
.feature-strip img{
  width:100%;
  height:420px;
  object-fit:cover;
}
.feature-panel{
  background:var(--color-light-ice-blue);
  padding:36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.feature-panel h2{
  font-family:var(--font-dealer-condensed);
  font-size:34px;
  text-transform:uppercase;
  line-height:1.16;
}
.feature-panel p{color:var(--color-road-gray);margin-top:14px}
.info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.info-card{
  background:#fff;
  border:1px solid var(--color-mist-gray);
  padding:28px;
  min-height:210px;
}
.info-card .number,
.info-card .label{
  font-family:var(--font-oj-mono);
  font-size:12px;
  color:var(--color-deep-teal);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.info-card h3{
  font-family:var(--font-dealer-condensed);
  font-size:24px;
  line-height:1.16;
  text-transform:uppercase;
  margin-top:28px;
}
.info-card p{
  color:var(--color-road-gray);
  font-size:14px;
  margin-top:12px;
}

/* ============ MODEL DETAIL ============ */
.model-detail{
  background:#fff;
}
.model-hero{
  position:relative;
  min-height:720px;
  padding:calc(var(--header-h) + 56px) 24px 80px;
  background:linear-gradient(180deg,#050505 0%,#111314 70%,#1c2024 100%);
  color:#fff;
  overflow:hidden;
}
.model-hero-bg{
  position:absolute;
  top:calc(var(--header-h) + 40px);
  left:50%;
  transform:translateX(-50%);
  margin:0;
  font-family:var(--font-dealer-condensed);
  font-weight:700;
  font-size:clamp(140px,22vw,360px);
  line-height:.9;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:rgba(255,255,255,.06);
  white-space:nowrap;
  pointer-events:none;
  z-index:0;
}
.model-hero-inner{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin:0 auto;
  min-height:620px;
  display:grid;
  grid-template-columns:.84fr 1.16fr;
  gap:44px;
  align-items:center;
}
.model-visual{position:relative}
.model-copy h1,
.model-section h2{
  font-family:var(--font-dealer-condensed);
  text-transform:uppercase;
  letter-spacing:0;
  line-height:1.04;
}
.model-copy h1{
  font-size:clamp(54px,8vw,118px);
}
.model-copy h1 span{
  display:block;
  color:var(--color-dealer-cyan);
}
.model-copy p{
  max-width:560px;
  color:rgba(255,255,255,.78);
  margin-top:18px;
  font-size:18px;
}
.model-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.model-visual{
  align-self:center;
  padding-top:40px;
}
.model-visual img{
  width:100%;
  object-fit:contain;
  filter:drop-shadow(0 36px 38px rgba(0,0,0,.32));
}
.model-hero .btn-ghost{
  background:rgba(255,255,255,.08);
}
.model-hero .btn-ghost:hover{background:#fff;color:var(--color-deep-teal)}
.model-stats{
  max-width:var(--max);
  margin:-58px auto 0;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  position:relative;
  z-index:2;
}
.model-stats article{
  min-height:116px;
  background:#fff;
  border:1px solid var(--color-mist-gray);
  border-radius:8px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.model-stats span,
.model-spec-list dt,
.model-color-list span{
  font-family:var(--font-oj-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-deep-teal);
}
.model-stats strong{
  font-family:var(--font-dealer-condensed);
  font-size:30px;
  line-height:1.1;
}
.model-visual-story{
  max-width:var(--max);
  margin:0 auto;
  padding:88px 24px 0;
}
.model-story-lead{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  min-height:520px;
  background:#050505;
  color:#fff;
  border-radius:8px;
  overflow:hidden;
}
.model-story-lead img{
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
  background:#000;
}
.model-story-lead div{
  padding:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.model-story-lead span,
.model-cinematic span{
  font-family:var(--font-oj-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-aqua-signal);
}
.model-story-lead h2,
.model-cinematic h2{
  font-family:var(--font-dealer-condensed);
  font-size:clamp(36px,5vw,68px);
  line-height:1.06;
  text-transform:uppercase;
  margin-top:14px;
}
.model-story-lead p,
.model-cinematic p{
  color:rgba(255,255,255,.78);
  margin-top:16px;
  max-width:560px;
}
.model-story-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:12px;
}
.model-story-grid article{
  position:relative;
  min-height:390px;
  border-radius:8px;
  overflow:hidden;
  color:#fff;
  background:#000;
}
.model-story-grid img{
  width:100%;
  height:100%;
  min-height:390px;
  object-fit:cover;
  filter:brightness(.72);
}
.model-story-grid div{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:26px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.88));
}
.model-story-grid h3{
  font-family:var(--font-dealer-condensed);
  font-size:28px;
  line-height:1.1;
  text-transform:uppercase;
}
.model-story-grid p{
  color:rgba(255,255,255,.78);
  font-size:14px;
  margin-top:10px;
  max-width:520px;
}
.model-cinematic{
  min-height:720px;
  margin-top:96px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.54)),
    var(--model-cinematic) center/cover no-repeat;
}
.model-cinematic div{
  max-width:720px;
  text-shadow:0 14px 42px rgba(0,0,0,.42);
}
.model-cinematic p{
  margin-left:auto;
  margin-right:auto;
}
.model-section{
  max-width:var(--max);
  margin:0 auto;
  padding:88px 24px 0;
}
.model-section h2{
  font-size:clamp(34px,4.5vw,64px);
}
.model-overview{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:48px;
}
.model-highlight-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.model-highlight-grid article{
  min-height:250px;
  padding:26px;
  border:1px solid var(--color-mist-gray);
  border-radius:8px;
  background:var(--color-snow-surface);
}
.model-highlight-grid h3{
  font-family:var(--font-dealer-condensed);
  font-size:24px;
  line-height:1.12;
  text-transform:uppercase;
}
.model-highlight-grid p,
.model-spec-copy p{
  color:var(--color-road-gray);
  font-size:14px;
  margin-top:14px;
}
.model-spec-layout{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:48px;
  align-items:start;
}
.model-spec-copy{
  position:relative;
}
.model-spec-copy .mini-pill{
  margin-top:22px;
}
.model-spec-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.model-spec-list div{
  min-height:78px;
  border:1px solid var(--color-mist-gray);
  border-radius:4px;
  padding:16px 18px;
  background:#fff;
}
.model-spec-list dd{
  margin-top:8px;
  font-weight:600;
  color:#111;
}
.model-feature-band{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:44px;
  align-items:start;
  padding-bottom:0;
}
.model-feature-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.model-feature-list span{
  min-height:66px;
  border-radius:4px;
  background:var(--color-light-ice-blue);
  border:1px solid rgba(0,111,123,.16);
  padding:16px;
  display:flex;
  align-items:center;
  font-weight:600;
}
.model-colors{
  padding-bottom:96px;
}
.model-color-list{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.model-color-list span{
  min-height:40px;
  border:1px solid var(--color-mist-gray);
  border-radius:999px;
  padding:9px 16px 9px 9px;
  background:#fff;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:500;
  color:#111;
}
.model-color-list span i{
  width:24px;
  height:24px;
  border-radius:999px;
  display:inline-block;
  border:1px solid rgba(0,0,0,.18);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
}

/* ===== Highlights with images ===== */
.model-highlights-visual{
  display:block;
}
.model-section-head{
  max-width:780px;
  margin:0 auto 36px;
  text-align:center;
}
.model-section-head h2{margin-top:8px}
.model-section-head .section-kicker{justify-content:center}
.model-gallery-head .section-kicker,
.model-explore-head .section-kicker{justify-content:center}
.model-highlights-visual .model-highlight-grid{
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.model-highlights-visual .model-highlight-grid article{
  padding:0;
  background:#0a0a0a;
  color:#fff;
  border:0;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:440px;
}
.model-highlights-visual .hl-media{
  position:relative;
  height:240px;
  overflow:hidden;
}
.model-highlights-visual .hl-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);
}
.model-highlights-visual .hl-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease;
}
.model-highlights-visual .model-highlight-grid article:hover .hl-media img{transform:scale(1.06)}
.model-highlights-visual .hl-body{
  padding:24px 26px 28px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.model-highlights-visual .hl-body > span{
  font-family:var(--font-oj-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--color-aqua-signal);
}
.model-highlights-visual .hl-body h3{
  font-family:var(--font-dealer-condensed);
  font-size:26px;
  line-height:1.12;
  text-transform:uppercase;
  color:#fff;
}
.model-highlights-visual .hl-body p{
  color:rgba(255,255,255,.74);
  font-size:14px;
  margin-top:0;
}

/* ===== Gallery ===== */
.model-gallery{
  max-width:var(--max);
  margin:0 auto;
  padding:96px 24px 0;
}
.model-gallery-head{
  max-width:780px;
  margin:0 auto 36px;
  text-align:center;
}
.model-gallery-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:180px;
  gap:12px;
}
.model-gallery-grid .gi{
  margin:0;
  border-radius:10px;
  overflow:hidden;
  background:#0a0a0a;
}
.model-gallery-grid .gi img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s ease;
}
.model-gallery-grid .gi:hover img{transform:scale(1.05)}
.model-gallery-grid .gi-0{grid-column:span 4;grid-row:span 2}
.model-gallery-grid .gi-1{grid-column:span 2;grid-row:span 1}
.model-gallery-grid .gi-2{grid-column:span 2;grid-row:span 1}
.model-gallery-grid .gi-3{grid-column:span 6;grid-row:span 1}

/* ===== Spec/Feature with image ===== */
.model-spec-image{
  margin-top:28px;
  border-radius:12px;
  overflow:hidden;
  height:340px;
  background:linear-gradient(135deg,#151515,#006f7b);
  display:flex;
  align-items:center;
  justify-content:center;
}
.model-spec-image img{
  width:96%;
  height:auto;
  max-height:88%;
  object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.5));
}
.model-feature-copy{display:flex;flex-direction:column;gap:18px}
.model-feature-image{
  margin-top:14px;
  border-radius:12px;
  overflow:hidden;
  height:320px;
  background:linear-gradient(135deg,#151515,#006f7b);
  display:flex;
  align-items:center;
  justify-content:center;
}
.model-feature-image img{
  width:96%;
  height:auto;
  max-height:88%;
  object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.5));
}

/* ===== CTA Band ===== */
.model-cta-band{
  max-width:var(--max);
  margin:96px auto 0;
  padding:0 24px;
}
.model-cta-band > div{
  background:var(--gradient-night-drive);
  color:#fff;
  border-radius:14px;
  padding:64px 56px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.model-cta-band > div::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(13,234,241,.18),transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(99,174,193,.22),transparent 55%);
  pointer-events:none;
}
.model-cta-band .section-kicker{color:var(--color-aqua-signal)}
.model-cta-band .btn-ghost{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
}
.model-cta-band .btn-ghost:hover{background:#fff;color:var(--color-deep-teal)}
.model-cta-band h2{
  font-family:var(--font-dealer-condensed);
  font-size:clamp(36px,5vw,68px);
  text-transform:uppercase;
  line-height:1.06;
  margin-top:8px;
  position:relative;
}
.model-cta-band p{
  position:relative;
  max-width:560px;
  margin:18px auto 26px;
  color:rgba(255,255,255,.82);
}
.model-cta-band .model-actions{
  position:relative;
  justify-content:center;
}

/* ===== Explore other models ===== */
.model-explore{
  max-width:var(--max);
  margin:0 auto;
  padding:96px 24px 120px;
}
.model-explore-head{
  max-width:780px;
  margin:0 auto 36px;
  text-align:center;
}
.model-explore-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.model-explore-card{
  border-radius:12px;
  overflow:hidden;
  background:#0a0a0a;
  color:#fff;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  min-height:340px;
  transition:transform .35s ease;
}
.model-explore-card:hover{transform:translateY(-4px)}
.mec-media{
  position:relative;
  height:200px;
  overflow:hidden;
  background:linear-gradient(135deg,#151515,#006f7b);
  display:flex;
  align-items:center;
  justify-content:center;
}
.mec-media img{
  width:88%;
  object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.5));
  transition:transform .6s ease;
}
.model-explore-card:hover .mec-media img{transform:scale(1.05)}
.mec-body{
  padding:22px 24px 24px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.mec-body > span{
  font-family:var(--font-oj-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--color-aqua-signal);
}
.mec-body h3{
  font-family:var(--font-dealer-condensed);
  font-size:24px;
  line-height:1.12;
  text-transform:uppercase;
}
.mec-body h3 em{
  font-style:normal;
  color:var(--color-dealer-cyan);
  display:block;
  font-size:18px;
  margin-top:2px;
}
.mec-link{
  margin-top:auto;
  font-family:var(--font-oj-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:#fff;
  text-transform:uppercase;
}

/* ============ PRICE ============ */
.price-section{
  max-width:var(--max);
  margin:0 auto;
  padding:80px 24px 64px;
}
.price-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:28px;
}
.price-card{
  border:1px solid var(--color-mist-gray);
  background:#fff;
  min-height:420px;
  padding:28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.price-card.featured{
  background:var(--gradient-night-drive);
  color:#fff;
  border-color:transparent;
}
.model-code{
  font-family:var(--font-oj-mono);
  color:var(--color-dealer-cyan);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.price-card h3{
  font-family:var(--font-dealer-condensed);
  font-size:30px;
  line-height:1.18;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-top:12px;
}
.price-card p{
  color:var(--color-road-gray);
  font-size:14px;
  margin-top:14px;
  line-height:1.6;
}
.price-card.featured p{color:rgba(255,255,255,.82)}
.price-specs{
  width:100%;
  display:grid;
  gap:10px;
  margin-top:22px;
}
.price-specs div{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--color-mist-gray);
}
.featured .price-specs div{border-color:rgba(255,255,255,.18)}
.price-specs dt{
  font-family:var(--font-oj-mono);
  font-size:11px;
  color:var(--color-deep-teal);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.featured .price-specs dt{color:var(--color-aqua-signal)}
.price-specs dd{
  font-size:13px;
  color:var(--color-road-gray);
}
.featured .price-specs dd{color:rgba(255,255,255,.82)}
.price-line{
  width:100%;
  margin:28px 0 22px;
  padding-top:18px;
  border-top:1px solid rgba(99,174,193,.45);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.price-line span{
  font-family:var(--font-oj-mono);
  font-size:11px;
  color:var(--color-road-gray);
  text-transform:uppercase;
}
.featured .price-line span{color:rgba(255,255,255,.65)}
.price-line strong{
  font-family:var(--font-dealer-condensed);
  font-size:24px;
  line-height:1.18;
  text-transform:uppercase;
  text-align:right;
}
.price-stack{
  width:100%;
  display:grid;
  gap:8px;
  margin:26px 0 18px;
}
.price-stack div{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-top:1px solid rgba(99,174,193,.35);
}
.price-stack span{
  font-family:var(--font-oj-mono);
  font-size:11px;
  color:var(--color-road-gray);
  text-transform:uppercase;
}
.price-stack strong{
  font-family:var(--font-dealer-condensed);
  font-size:24px;
  line-height:1.18;
  text-align:right;
}
.price-stack.highlight div:last-child{
  background:var(--color-light-ice-blue);
  margin:0 -12px;
  padding:14px 12px;
  border-top:0;
}
.campaign-note{
  font-size:12px !important;
  color:var(--color-road-gray);
  margin:0 0 18px !important;
}
.featured .campaign-note{color:rgba(255,255,255,.7)}
.price-legal{
  margin-top:28px;
  padding:24px;
  border:1px solid var(--color-mist-gray);
  background:var(--color-snow-surface);
}
.price-legal p{
  color:var(--color-road-gray);
  font-size:12px;
  line-height:1.65;
}
.price-legal p+p{margin-top:10px}
@media (max-width:1180px){
  .price-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============ ACCESSORY ============ */
.accessory-section{
  background:var(--color-light-ice-blue);
  display:grid;
  grid-template-columns:minmax(280px,.8fr) 1.2fr;
  gap:48px;
  align-items:start;
  padding:72px max(24px,calc((100vw - var(--max)) / 2 + 24px));
}
.accessory-copy p{
  color:var(--color-road-gray);
  max-width:460px;
  margin-top:14px;
}
.accessory-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.accessory-grid article{
  background:#fff;
  border:1px solid rgba(0,111,123,.18);
  padding:24px;
  min-height:220px;
}
.accessory-grid span{
  font-family:var(--font-oj-mono);
  color:var(--color-deep-teal);
  font-size:12px;
}
.accessory-grid h3{
  font-family:var(--font-dealer-condensed);
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:22px;
  margin-top:42px;
}
.accessory-grid p{
  color:var(--color-road-gray);
  font-size:13px;
  margin-top:10px;
}

/* ============ AFTERSALES ============ */
.aftersales{
  background:var(--color-snow-surface);padding:64px 24px;
}
.aftersales>.section-title,.aftersales>.section-actions{
  max-width:var(--max);margin-left:auto;margin-right:auto;
}
.aftersales-grid{
  max-width:var(--max);margin:32px auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.service-card{background:#fff;border:1px solid var(--color-mist-gray)}
.service-card .img{position:relative;height:240px;overflow:hidden}
.service-card .img img{width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.service-card .badge{
  position:absolute;top:16px;left:16px;
  background:var(--color-dealer-cyan);color:#fff;
  font-family:var(--font-dealer-condensed);font-size:12px;
  padding:4px 10px;letter-spacing:.06em;text-transform:uppercase;
}
.service-card .overlay-title{
  position:absolute;bottom:16px;left:16px;color:#fff;
  font-family:var(--font-dealer-condensed);font-size:28px;
  text-transform:uppercase;letter-spacing:.03em;font-weight:700;line-height:1;
}
.service-card .overlay-title span{font-size:16px;font-weight:500;display:block;margin-top:4px}
.service-card .body{padding:20px}
.service-card h5{
  font-family:var(--font-dealer-condensed);
  font-size:14px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;
}
.service-card p{font-size:13px;color:var(--color-road-gray);margin-top:8px;line-height:1.5}
.service-card .link{display:inline-block;margin-top:12px;font-family:var(--font-dealer-condensed);font-size:12px;color:var(--color-deep-teal);letter-spacing:.05em;text-transform:uppercase}

/* ============ SERVICE PAGE DETAILS ============ */
.service-support{
  max-width:var(--max);
  margin:0 auto;
  padding:72px 24px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
}
.support-panel{
  background:var(--color-light-ice-blue);
  border:1px solid rgba(0,111,123,.18);
  padding:36px;
}
.support-panel.dark{
  background:var(--color-night-cabin);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.support-panel h2,
.support-panel h3,
.warranty-section h2{
  font-family:var(--font-dealer-condensed);
  text-transform:uppercase;
  line-height:1.16;
  letter-spacing:0;
}
.support-panel h2{font-size:clamp(32px,4vw,54px);max-width:680px}
.support-panel h3{font-size:32px}
.support-panel p{
  color:var(--color-road-gray);
  margin-top:16px;
  max-width:760px;
}
.support-panel.dark p{color:rgba(255,255,255,.76);margin-bottom:24px}
.support-hotline{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid rgba(0,111,123,.25);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}
.support-hotline span{
  font-family:var(--font-oj-mono);
  font-size:12px;
  color:var(--color-deep-teal);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.support-hotline a{
  font-family:var(--font-dealer-condensed);
  font-size:34px;
  line-height:1.1;
}
.manuals-section{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px 72px;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:48px;
}
.manuals-copy p{
  color:var(--color-road-gray);
  margin-top:14px;
  max-width:560px;
}
.manual-links{
  display:grid;
  gap:12px;
}
.manual-links a{
  min-height:74px;
  border:1px solid var(--color-mist-gray);
  background:#fff;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-family:var(--font-dealer-condensed);
  font-size:18px;
  line-height:1.18;
  text-transform:uppercase;
  letter-spacing:.03em;
  transition:background .2s,border-color .2s;
}
.manual-links a:hover{
  background:var(--color-light-ice-blue);
  border-color:var(--color-dealer-cyan);
}
.manual-links span{
  font-family:var(--font-oj-mono);
  font-size:11px;
  color:var(--color-deep-teal);
}
.warranty-section{
  max-width:var(--max);
  margin:0 auto 80px;
  padding:40px;
  background:var(--gradient-cyan-fade);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:32px;
}
.warranty-section h2{
  font-size:clamp(32px,4vw,56px);
}
.warranty-section p{
  color:var(--color-road-gray);
  margin-top:14px;
  max-width:820px;
}

/* ============ TEST DRIVE ============ */
.test-drive{
  max-width:var(--max);
  margin:80px auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:0;
  align-items:stretch;
}
.test-media{background:#000;min-height:560px}
.test-media img{width:100%;height:100%;object-fit:cover}
.test-panel{
  background:var(--color-night-cabin);
  color:#fff;
  padding:48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.test-panel p{color:rgba(255,255,255,.75);margin:16px 0 26px}
.test-panel .section-kicker{color:var(--color-aqua-signal)}

/* ============ FORMS ============ */
.lead-form{
  display:grid;
  gap:14px;
}
.lead-form label{
  display:grid;
  gap:7px;
  font-family:var(--font-dealer-condensed);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.lead-form input,
.lead-form select,
.lead-form textarea{
  width:100%;
  border:1px solid var(--color-metal-silver);
  background:#fff;
  color:#000;
  border-radius:2px;
  padding:13px 14px;
  font:500 14px var(--font-oj-sans);
  outline:none;
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus{
  border-color:var(--color-dealer-cyan);
  box-shadow:0 0 0 2px rgba(99,174,193,.18);
}
.lead-form textarea{resize:vertical}
.lead-form button{justify-self:start;margin-top:6px}

/* ============ CONTACT ============ */
.contact-section{
  max-width:var(--max);
  margin:0 auto 80px;
  padding:72px 24px 0;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:48px;
  border-top:1px solid var(--color-mist-gray);
}
.contact-info>p{
  color:var(--color-road-gray);
  max-width:600px;
  margin-top:14px;
}
.contact-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:32px;
}
.contact-list a,
.contact-list div{
  min-height:168px;
  border:1px solid var(--color-mist-gray);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.contact-list span{
  width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--color-light-ice-blue);
  color:var(--color-deep-teal);
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-list strong{
  font-family:var(--font-dealer-condensed);
  font-size:17px;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.04em;
  overflow-wrap:anywhere;
}
.contact-list small{color:var(--color-road-gray);font-size:12px}
.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.contact-card{
  background:var(--color-light-ice-blue);
  border:1px solid rgba(0,111,123,.18);
  padding:32px;
}
.contact-card h3{
  font-family:var(--font-dealer-condensed);
  font-size:26px;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:20px;
}
.map-section{
  max-width:var(--max);
  margin:0 auto 80px;
  padding:0 24px;
}
.map-section iframe{
  width:100%;
  height:440px;
  border:0;
  display:block;
  filter:saturate(.9) contrast(1.02);
  background:var(--color-mist-gray);
}

/* ============ FOOTER ============ */
.site-footer{background:var(--color-night-cabin);color:#fff;padding:48px 24px 24px;margin-top:0}
.footer-top{max-width:var(--max);margin:0 auto 32px}
.footer-logo{height:24px;filter:brightness(0) invert(1)}
.footer-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:32px;
  padding-bottom:32px;border-bottom:1px solid #2a2a2a;
}
.footer-grid h6{
  font-family:var(--font-dealer-condensed);font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  margin-bottom:12px;color:var(--color-dealer-cyan);
}
.footer-grid ul{list-style:none}
.footer-grid li{font-size:12px;color:#bbb;padding:4px 0;letter-spacing:.03em}
.footer-grid a{color:#bbb;transition:color .2s}
.footer-grid a:hover{color:#fff}
.footer-bottom{
  max-width:var(--max);margin:16px auto 0;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:#777;
}
.socials{display:flex;gap:12px}
.socials a{
  width:34px;
  height:34px;
  flex-shrink:0;
  border:1px solid #444;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  transition:background .2s,border-color .2s,color .2s;
}
.socials a:hover{
  background:var(--color-dealer-cyan);
  border-color:var(--color-dealer-cyan);
  color:#fff;
}
.socials svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.socials a:nth-child(2) svg,
.socials a:nth-child(3) svg{
  fill:currentColor;
  stroke:none;
}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .header-inner{position:relative;gap:16px;justify-content:space-between}
  .logo-wrap{margin-right:auto}
  .dealer-locator{display:none}
  .menu-toggle{display:flex;margin-left:auto}
  .primary-nav{
    position:absolute;
    top:calc(100% + 1px);
    left:16px;
    right:16px;
    display:grid;
    gap:0;
    margin-left:0;
    padding:10px;
    background:rgba(0,0,0,.92);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .2s,transform .2s;
  }
  .site-header.menu-open .primary-nav{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
  .primary-nav a{
    padding:14px 12px;
    border-bottom:1px solid rgba(255,255,255,.1);
    font-size:15px;
  }
  .primary-nav a:last-child{border-bottom:0}
  .about-grid,.experience-cards,.dealer-experience,.service-points,.tech-focus,.explore-links,.explore-signup,.feature-strip,.info-grid,.price-grid,.accessory-section,.aftersales-grid,.service-support,.manuals-section,.warranty-section,.test-drive,.contact-section,.model-hero-inner,.model-stats,.model-story-lead,.model-story-grid,.model-overview,.model-highlight-grid,.model-spec-layout,.model-feature-band,.model-explore-grid{grid-template-columns:1fr}
  .model-gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .model-gallery-grid .gi-0,.model-gallery-grid .gi-3{grid-column:span 2}
  .model-gallery-grid .gi-1,.model-gallery-grid .gi-2{grid-column:span 1}
  .model-hero-bg{font-size:clamp(110px,28vw,220px)}
  .model-cta-band > div{padding:48px 24px}
  .accessory-grid{grid-template-columns:1fr}
  .contact-list{grid-template-columns:1fr}
  .model-spec-copy{position:static}
  .model-hero{min-height:auto;background:linear-gradient(180deg,#050505 0%,#111314 70%,#1c2024 100%)}
  .model-hero-inner{min-height:auto}
  .model-visual{padding-top:12px}
  .model-stats{margin-top:-28px}
  .model-story-lead img,.model-story-lead{min-height:0}
  .model-story-lead img{height:420px}
  .model-cinematic{min-height:580px}
  .test-media{min-height:420px}
  .footer-grid{grid-template-columns:1fr}
  .dealer-card.wide{grid-column:auto}
  .safety-panorama,.service-hero{min-height:620px}
}

/* ===== MOBİL: modeller dikey liste, sağdan içeri kayma ===== */
@media (max-width:768px){
  .models-section{ height:auto; }
  .models-pin{
    position:static;
    height:auto;
    display:block;
    overflow:hidden;          /* sağa taşan kartı kırp */
  }
  .models-track{
    display:block;
    height:auto;
    padding:0;
    transform:none !important;  /* JS'nin yatay transform'unu nötrle */
    will-change:auto;
  }
  .vehicle-slide{
    flex:none;
    width:100%;
    height:auto;
    padding:60px 16px 40px;
    /* başlangıçta sağ dışarıda + saydam */
    opacity:0;
    transform:translate3d(40%,0,0);
    transition:transform .9s cubic-bezier(.22,.61,.36,1),
               opacity .7s ease-out;
  }
  .vehicle-slide.in-view{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  .vehicle-canvas{
    width:100%;
    margin-top:2vh;
  }
  .vehicle-bg-name{
    font-size:clamp(70px,18vw,140px);
    transform:translate(-50%,-55%) !important;
    opacity:.22 !important;     /* mobilde sabit baseline */
  }
  .wheel-spin{
    /* mobilde scroll-tetikli animasyon yok, sürekli yavaşça dönsün */
    animation-play-state:running;
    animation-duration:2.4s;
  }
  .models-progress{ display:none; }
}

@media (max-width:640px){
  .hero-title{font-size:64px}
  .header-inner{padding:0 16px}
  .hero{min-height:620px}
  .hero-cta{flex-direction:column;align-items:flex-start}
  .experience-intro{padding:72px 16px 96px}
  .experience-tabs{width:auto;max-width:100%;overflow:visible;justify-content:center}
  .experience-tabs button{min-width:auto;flex:1 1 0;padding:8px 12px}
  .experience-cards img{height:190px}
  .safety-panorama{min-height:540px}
  .dealer-experience{margin:-48px auto 88px;padding:0 16px}
  .service-hero{min-height:560px}
  .service-hero-copy{padding:0 16px 56px}
  .service-points{padding:0 16px 80px}
  .tech-focus{padding:48px 16px 80px}
  .keep-exploring{padding:0 16px 72px}
  .explore-signup{padding:22px}
  .price-section,.aftersales,.test-drive,.contact-section{padding-left:16px;padding-right:16px}
  .map-section{padding:0 16px;margin-bottom:56px}
  .map-section iframe{height:340px}
  .service-support,.manuals-section{padding-left:16px;padding-right:16px}
  .model-hero{padding-left:16px;padding-right:16px;padding-bottom:48px}
  .model-copy p{font-size:16px}
  .model-actions{flex-direction:column;align-items:flex-start}
  .model-stats,.model-section,.model-visual-story,.model-gallery,.model-cta-band,.model-explore{padding-left:16px;padding-right:16px}
  .model-section{padding-top:64px}
  .model-visual-story{padding-top:64px}
  .model-story-lead div{padding:26px}
  .model-story-lead img{height:300px}
  .model-story-grid article,.model-story-grid img{min-height:310px}
  .model-cinematic{min-height:500px;margin-top:72px;padding:0 16px}
  .model-spec-list,.model-feature-list{grid-template-columns:1fr}
  .model-highlight-grid article{min-height:auto}
  .support-panel,.warranty-section{padding:24px}
  .support-hotline{align-items:flex-start;flex-direction:column}
  .accessory-section{padding:56px 16px}
  .price-card,.test-panel,.contact-card{padding:24px}
  .contact-section{margin-bottom:56px}
  .footer-bottom{align-items:flex-start;flex-direction:column;gap:16px}
}