:root{
  --bg:#ffffff;
  --fg:#0b0b0b;
  --muted:#4f4f4f;
  --line:#e9e9ee;
  --card:#f7f7fb;
  --radius:16px;
  --shadow:0 18px 40px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--fg);
  background:var(--bg);
}

/* Layout */
.container{width:min(1200px,92%); margin-inline:auto}

.site-header{
  position:fixed; inset:0 0 auto 0; height:64px; z-index:50;
  display:flex; align-items:center;
  background:rgba(255,255,255,.75); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.logo{font-weight:800; letter-spacing:.08em; color:#444; text-decoration:none; font-size:20px}
.nav{display:flex; gap:22px}
.nav a{color:#222; text-decoration:none; opacity:.9; font-weight:500}
.nav a:hover{opacity:1}

.menu-btn{
  display:none; width:42px; height:42px; border:0; background:transparent; position:relative; cursor:pointer;
}
.menu-btn span{
  position:absolute; left:10px; right:10px; height:2px; background:#444; transition:transform .25s, opacity .25s;
}
.menu-btn span:nth-child(1){top:13px}
.menu-btn span:nth-child(2){top:20px}
.menu-btn span:nth-child(3){top:27px}
.menu-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.active span:nth-child(2){opacity:0}
.menu-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* GENEL RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* HEADER */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

#header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
}

/* LOGO */
.logo-img {
  height: 120px;
  width: auto;
  object-fit: contain;
  transition: all 0.3s ease;
}

/* Mobilde logo daha küçük */
@media (max-width: 768px) {
  .logo-img {
    height: 70px;
    width: auto;
  }
}

/* HERO SLIDER */
.hero-slider-section {
  position: relative;
  overflow: hidden;
}

.hero-slider {
  display: flex;
  transition: transform 0.8s ease;
}

.hero-slide {
  flex: 0 0 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* HERO YAZILAR */
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-text h1 {
  font-size: 3rem;
  color: white;
}

.hero-text p {
  color: white;
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 1.8rem;
  }
  .hero-text p {
    font-size: 1rem;
  }
}

/* PANELS */
.panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 16px;
}

@media (max-width: 768px) {
  .panel {
    padding: 64px 12px;
    min-height: auto; /* Mobilde yüksekliği kısıtla */
  }
}

.panel .panel-content {
  z-index: 1;
  transform: translateY(8px);
  opacity: 0;
  transition: all 0.6s ease;
}

.panel.visible .panel-content {
  transform: none;
  opacity: 1;
}

.panel .sub {
  color: #fff;
  margin-top: 6px;
}

/* === MODELLER DÜZENİ VE MOBİL OPTİMİZASYONU === */

/* Her model paneli */
.panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 16px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Görünür hale gelince kayarak gelsin */
.panel.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Başlık altındaki küçük yazı */
.panel .sub {
  color: #fff;
  margin-top: 8px;
}

/* Modellerin arasına boşluk + çizgi */
.panel.product {
  border-bottom: 1px solid rgba(0,0,0,0.1); /* açık temada zarif çizgi */
  padding-bottom: 80px;
  margin-bottom: 80px;
}

/* Son modelin altında çizgi olmasın */
.panel.product:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

/* Mobil uyum */
@media (max-width: 768px) {
  .panel {
    padding: 64px 12px;
    min-height: auto;
  }

  .panel-content {
    text-align: center;
    padding: 0 20px;
  }

  .panel-content h2 {
    font-size: 1.6rem;
  }

  .panel-content .sub {
    font-size: 1rem;
    line-height: 1.4;
  }

  .btn {
    display: inline-block;
    width: 90%;
    max-width: 300px;
    margin: 12px auto 0;
  }

  .panel.product {
    padding-bottom: 60px;
    margin-bottom: 60px;
  }
}





.hero{
  background:
    radial-gradient(1200px 500px at 50% 100%, rgba(0,0,0,.05), transparent 60%),
    linear-gradient(#fff,#fafafa);
}
.hero .hero-content h1{font-size:clamp(40px,7vw,72px); margin:0 0 8px}
.hero .hero-content p{margin:0 0 18px; color:#666}
.scroll-hint{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-size:12px; letter-spacing:.3em; color:#888}

.product.light .bg{
  position:absolute; inset:0; background-size:cover; background-position:center; opacity:.9; filter:saturate(105%) contrast(105%);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 18px; border-radius:999px; border:1px solid #d6d6de;
  background:#fff; color:#444; font-weight:700; text-decoration:none;
  box-shadow:var(--shadow); transition:transform .15s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px); background:#f5f5f9}
.btn.primary{background:#fff; color:#000; border-color:#000}
.btn.primary:hover{background:#000}
.btn.ghost{background:#fff; color:#000}

/* Config */
.config-section{padding:80px 0; background:#fff; border-top:1px solid var(--line)}
.config-grid{display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:28px; align-items:start}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0 24px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; text-align:left;
  display:grid; gap:6px; cursor:pointer; transition:transform .15s, border-color .2s, background .2s;
}
.card .title{font-weight:800}
.card .desc{color:#666; font-size:14px}
.card .price{font-weight:800; color:#444}
.card:hover{transform:translateY(-1.5px); background:#fafafa}
.card.active{border-color:#444; box-shadow:0 0 0 2px #4441}

.group{margin:24px 0}
.group-head{display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:8px}
.group-head h3{margin:0}
.group-note{color:#777; font-size:13px}

.swatches{display:flex; gap:10px; flex-wrap:wrap}
.swatch{
  width:40px; height:40px; border-radius:999px; border:2px solid #d9d9e3; background:var(--c);
  box-shadow:var(--shadow); cursor:pointer; transition:transform .15s, border-color .2s;
}
.swatch:hover{transform:translateY(-1px)}
.swatch.active{border-color:#444}

.choices{display:flex; gap:10px; flex-wrap:wrap}
.choice{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; gap:2px;
  cursor:pointer; transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.choice small{color:#777}
.choice.active{border-color:#444; background:#f9f9fb}

.addons{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.addon{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px;
}
.addon-input{width:18px; height:18px}
.addon em{color:#444; font-style:normal}

.form-inline{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-inline .full{grid-column:1/-1}
input,select{
  width:100%; height:46px; border-radius:12px; border:1px solid #d6d6de; background:#fff; color:#444; padding:0 12px;
}
.form-note{min-height:20px; color:#666}

/* Sağ: Önizleme + Özet */
.config-right{display:grid; gap:16px}
.preview{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:10px; box-shadow:var(--shadow);
}
#carPreview{width:100%; height:auto; display:block; border-radius:12px}

.summary{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}
.summary h3{margin:0 0 12px}
.summary-list{list-style:none; padding:0; margin:0 0 12px; display:grid; gap:8px}
.summary-list li{display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px dashed #e6e6ee; padding:8px 0}
.summary-list span{color:#666}
.total{display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:20px; font-weight:900}

/* Footer */
.site-footer{padding:28px 0; border-top:1px solid var(--line); background:#fff; color:#333}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer-nav{display:flex; gap:16px; flex-wrap:wrap}
.footer-nav a{color:#333; text-decoration:none}

/* Responsive */
@media (max-width:1100px){
  .cards{grid-template-columns:1fr}
  .config-grid{grid-template-columns:1fr}
  .form-inline{grid-template-columns:1fr}
  .addons{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav{
    display:none; position:fixed; inset:64px 0 auto 0; background:#fff;
    padding:20px 24px; border-bottom:1px solid var(--line); flex-direction:column; gap:16px
  }
  .nav.open{display:flex}
  .menu-btn{display:block}
}
/* TESLA STYLE HEADER */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  z-index: 100;
}
#header.scrolled {
  background: rgba(255,255,255,0.9);
  border-color: rgba(0,0,0,0.05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

#header .container {
  width: min(1200px, 94%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header .logo {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: 18px;
  color: #000;
  text-decoration: none;
  flex: 1;
  text-align: center;
}

#nav {
  display: flex;
  gap: 26px;
  align-items: center;
}
#nav a {
  position: relative;
  color: #000;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .02em;
  opacity: .85;
  transition: opacity .2s ease, color .2s ease;
}
#nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
#nav a:hover {
  opacity: 1;
}
#nav a:hover::after {
  transform: scaleX(1);
}

/* Menü butonu (mobil) */
#menuBtn {
  display: none;
  width: 42px; height: 42px;
  border: none; background: transparent;
  position: relative; cursor: pointer;
}
#menuBtn span {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: #000;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
#menuBtn span:nth-child(1){ top: 13px; }
#menuBtn span:nth-child(2){ top: 20px; }
#menuBtn span:nth-child(3){ top: 27px; }
#menuBtn.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
#menuBtn.active span:nth-child(2){ opacity: 0; }
#menuBtn.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobil görünüm */
@media (max-width: 900px) {
  #header .container { justify-content: space-between; }
  #header .logo { flex: none; order: 1; }
  #nav {
    display: none;
    position: fixed;
    inset: 64px 0 auto 0;
    background: #fff;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 0;
    border-bottom: 1px solid #e5e5e9;
    transition: opacity .3s ease;
  }
  #nav.open { display: flex; }
  #menuBtn { display: block; order: 2; }
}
/* ===== Tesla Araçlar Menüsü ===== */
.vehicle-menu {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: none;
  flex-direction: column;
  padding: 24px 20px 40px;
  overflow-y: auto;
  animation: fadeIn .3s ease;
}
.vehicle-menu.open { display: flex !important; }

/* Üst kısım */
.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ececec;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.menu-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #333;
  line-height: 1;
}

/* Araç listesi */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.menu-item img {
  width: 140px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}
.menu-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
}
.menu-item .links {
  display: flex;
  gap: 14px;
}
.menu-item .links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #0070c9;
}
.menu-item .links a:hover { text-decoration: underline; }

/* Basit animasyon */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-slider-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 90vh;
  max-height: 800px;
}

.hero-slider {
  display: flex;
  transition: transform 0.6s ease-in-out;
  height: 100%;
}

.hero-slide {
  min-width: 100%;
  height: 100%;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 2rem;
  z-index: 2;
}

.hero-text h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.hero-text p {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}

.hero-text .cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-dots {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  z-index: 3;
}

.hero-dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-dots span.active {
  background: #fff;
}

@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-text p {
    font-size: 1.1rem;
  }

  .hero-text .cta {
    flex-direction: column;
    gap: 0.75rem;
  }
}
.summary {
  background: #fafafa;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  font-family: "Segoe UI", sans-serif;
}

.summary h3 {
  font-size: 20px;
  margin-bottom: 16px;
  color: #333;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}

.summary-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}

.summary-list li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 15px;
  color: #555;
}

.summary-list li span {
  font-weight: 500;
  color: #666;
}

.summary-list li strong {
  font-weight: 600;
  color: #222;
}

.total-line {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: bold;
  color: #0069d9;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}