: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;
}

/* ===== SVG wheels overlay ===== */
.wheel{
  position:absolute;
  height:var(--wheel-h, 23%);     /* % of canvas height */
  aspect-ratio:1/1;
  bottom:var(--wheel-bottom, 6%);
  z-index:2;
  animation:wheel-spin .85s linear infinite;
  animation-play-state:paused;
  will-change:transform;
  pointer-events:none;
  transform-origin:50% 50%;
}
.wheel.front{ left:var(--wheel-front, 18%); }
.wheel.rear{  left:var(--wheel-rear, 73%); }
.models-track.is-moving .wheel{
  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 ============ */
.about{padding:80px 24px;max-width:var(--max);margin:0 auto;text-align:center;
  background:url('_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-cards h3{
  font-family:var(--font-dealer-condensed);
  font-size:20px;
  text-transform:uppercase;
  margin-top:16px;
}
.experience-cards p{
  color:var(--color-road-gray);
  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('_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{
  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;
  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;
  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:24px;
  height:24px;
  border-radius:50%;
  background:#000;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-oj-sans);
}
.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;
}

/* ============ 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;
  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;
  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{grid-template-columns:1fr}
  .accessory-grid{grid-template-columns:1fr}
  .contact-list{grid-template-columns:1fr}
  .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{
    /* 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}
  .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}
}