/* ─────────────── TOKENS ─────────────── */
:root{
  --c-bg:        #0a0a0a;
  --c-bg2:       #111111;
  --c-bg3:       #161616;
  --c-card:      #141414;
  --c-border:    rgba(255,255,255,.07);
  --c-border2:   rgba(255,255,255,.12);
  --c-gold:      #e8a020;
  --c-gold-l:    #f5bb4a;
  --c-gold-dim:  rgba(232,160,32,.15);
  --c-text:      #f0f0f0;
  --c-muted:     #888;
  --c-muted2:    #666;
  --r:           6px;
  --fn:          'Space Grotesk', sans-serif;
  --fm:          'DM Mono', monospace;
  --ease-out:    cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--fn);
  background:var(--c-bg);
  color:var(--c-text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--c-gold);color:#000}
a{text-decoration:none;color:inherit}
img,svg{display:block}

/* ─────────────── SCROLLBAR ─────────────── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--c-bg)}
::-webkit-scrollbar-thumb{background:var(--c-gold);border-radius:4px}

/* ─────────────── CANVAS BG ─────────────── */
#bgCanvas{
  position:fixed;inset:0;
  width:100%;height:100%;
  z-index:0;opacity:.55;
  pointer-events:none;
}

/* ─────────────── UTILS ─────────────── */
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1.25rem,5vw,4rem)}
.sec{padding:clamp(5rem,10vw,9rem) 0;position:relative;z-index:1}
.sec-alt{background:var(--c-bg2)}
.tag{
  display:inline-block;
  font-family:var(--fm);font-size:.78rem;letter-spacing:.12em;
  color:var(--c-gold);text-transform:uppercase;margin-bottom:1.25rem;
}
.section-title{
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.1;
  margin-bottom:1rem;
}
.section-sub{
  font-size:1.1rem;color:var(--c-muted);
  max-width:600px;margin-bottom:3.5rem;
}
.divider{
  width:40px;height:2px;
  background:var(--c-gold);
  margin:1.5rem 0 2.5rem;
}

/* ─────────────── BUTTONS ─────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.8rem;border-radius:var(--r);
  font-size:1rem;font-weight:600;
  cursor:pointer;border:none;
  transition:all .3s var(--ease-out);
}
.btn-gold{background:var(--c-gold);color:#050505}
.btn-gold:hover{background:#ffbb33;transform:translateY(-2px);box-shadow:0 0 15px rgba(232,160,32,0.4)}
.btn-wa{background:#25d366;color:#fff;animation:btnGlow 2s infinite alternate;}
.btn-wa:hover{background:#1ebe5a;transform:translateY(-2px)}
@keyframes btnGlow {
  0% { box-shadow: 0 0 5px rgba(37,211,102,0.2); }
  100% { box-shadow: 0 0 20px rgba(37,211,102,0.8); }
}

/* ─── FLOATING ACTION BUTTONS (FAB) ─── */
.fab-container {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 15px; z-index: 9999;
}
@media (max-width: 768px) {
  .fab-container { bottom: 15px; right: 15px; gap: 10px; }
}
.fab-btn {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  transition: all 0.3s ease; position: relative;
}
.fab-btn:hover { transform: scale(1.1); color: #fff; }
.fab-btn svg { z-index: 2; position: relative; }
.fab-btn::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; z-index: 1;
  animation: fabPulse 2s infinite;
}
.fab-wa { background: #25d366; }
.fab-wa::after { background: #25d366; }
.fab-phone { background: var(--c-gold); color: #000; }
.fab-phone::after { background: var(--c-gold); }
.fab-phone:hover { color: #000; }
@keyframes fabPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}
.btn-lg{padding:1.1rem 2.5rem;font-size:1.1rem}

/* ─────────────── HEADER ─────────────── */
header{
  position:fixed;top:0;left:0;right:0;z-index:999;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem clamp(1.25rem,5vw,4rem);
  background:rgba(10,10,10,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--c-border);
  transition:all .4s ease;
}
header.scrolled{background:rgba(10,10,10,.97)}
.logo{display:flex;align-items:center;gap:.4rem;font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.logo span:nth-of-type(1){color:var(--c-text)}
.logo span:nth-of-type(2){color:var(--c-gold)}
.logo-dot{width:6px;height:6px;background:var(--c-gold);border-radius:50%;margin:0 .2rem}
nav{display:flex;align-items:center;gap:2rem}
nav a{font-size:.9rem;font-weight:500;color:var(--c-muted);transition:color .2s}
nav a:hover{color:var(--c-text)}
.nav-cta{color:#000!important;font-weight:600!important}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{width:24px;height:1.5px;background:var(--c-text);transition:all .3s}
.mobile-nav{
  display:none;position:fixed;inset:0;z-index:998;
  background:rgba(10,10,10,.98);backdrop-filter:blur(20px);
  flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;
}
.mobile-nav.open{display:flex}
.mobile-nav a{font-size:1.8rem;font-weight:700;color:var(--c-muted);transition:color .2s}
.mobile-nav a:hover{color:var(--c-gold)}

/* ─────────────── HERO ─────────────── */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;z-index:1;
  padding:12rem clamp(1.25rem,5vw,4rem) 5rem;
  overflow:hidden;
  text-align:center;
}
/* CSS road/speed lines behind hero */
.hero::before{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:60%;
  background:
    linear-gradient(to right, transparent 49.5%, rgba(232,160,32,.05) 49.5%, rgba(232,160,32,.05) 50.5%, transparent 50.5%),
    linear-gradient(to right, transparent 24.5%, rgba(255,255,255,.02) 24.5%, rgba(255,255,255,.02) 25.5%, transparent 25.5%),
    linear-gradient(to right, transparent 74.5%, rgba(255,255,255,.02) 74.5%, rgba(255,255,255,.02) 75.5%, transparent 75.5%);
  pointer-events:none;
}
.hero-inner{
  max-width:900px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--fm);font-size:.8rem;letter-spacing:.15em;
  color:var(--c-gold);text-transform:uppercase;
  margin: 0 auto 2rem;
}
.hero-eyebrow::before{
  content:'';width:30px;height:1px;background:var(--c-gold);
}
h1{
  font-size:clamp(3.2rem,8vw,7rem);
  font-weight:800;letter-spacing:-.04em;line-height:1.0;
  margin-bottom:1.75rem;
}
h1 .line{display:block;overflow:hidden}
h1 .word{
  display:inline-block;
  transition:transform .9s var(--ease-out), opacity .6s ease;
}
.js h1 .word {
  transform:translateY(110%);opacity:0;
}
h1 .word.au{color:var(--c-gold)}
.js h1.ready .word{transform:translateY(0);opacity:1}
.hero-desc{
  font-size:clamp(1.05rem,2vw,1.25rem);
  color:var(--c-muted);
  max-width:680px;
  margin: 0 auto 2.75rem;
  line-height:1.75;
}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:4rem;justify-content:center}


/* ─────────────── STATS STRIP ─────────────── */
.stats-strip{
  position:relative;z-index:1;
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  background:var(--c-bg2);
}
.stats-inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  divide-x:1px solid var(--c-border);
}
.stat-item{
  padding:2.5rem 2rem;
  text-align:center;
  border-right:1px solid var(--c-border);
}
.stat-item:last-child{border-right:none}
.stat-num{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800;color:var(--c-gold);
  letter-spacing:-.03em;line-height:1;
  margin-bottom:.35rem;
  display:block;
}
.stat-lbl{font-size:.85rem;color:var(--c-muted);font-weight:500}

/* ─────────────── H2: HİZMETLER ─────────────── */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem;
}
.svc-card{
  background:var(--c-card);
  border:1px solid var(--c-border);
  border-radius:var(--r);
  padding:2.5rem;
  transition:border-color .3s, transform .4s var(--ease-out);
  position:relative;overflow:hidden;
}
.svc-card::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg, var(--c-gold-dim) 0%, transparent 60%);
  opacity:0;transition:opacity .4s;
}
.svc-card:hover{border-color:var(--c-gold);transform:translateY(-6px)}
.svc-card:hover::after{opacity:1}
.svc-icon{
  width:48px;height:48px;margin-bottom:1.5rem;
  color:var(--c-gold);
}
.svc-title{font-size:1.2rem;font-weight:700;margin-bottom:.6rem}
.svc-desc{font-size:.95rem;color:var(--c-muted);line-height:1.7}

/* ─────────────── H3: ARAÇ SINIFLARI ─────────────── */
.vehicles-wrap{display:flex;flex-direction:column;gap:2rem}
.vehicle-card{
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:3rem;align-items:center;
  background:var(--c-card);
  border:1px solid var(--c-border);
  border-radius:var(--r);
  padding:3rem;
  transition:border-color .4s;
  position:relative;overflow:hidden;
}
.vehicle-card.featured{border-color:var(--c-gold);background:linear-gradient(135deg,#161616 60%,#1a1500)}
.vehicle-card:hover{border-color:var(--c-border2)}
.vehicle-card.featured:hover{border-color:var(--c-gold-l)}
.vehicle-badge{
  position:absolute;top:1.5rem;right:1.5rem;
  background:var(--c-gold);color:#000;
  font-size:.7rem;font-weight:800;letter-spacing:.1em;
  padding:.3rem .8rem;border-radius:4px;text-transform:uppercase;
}
/* SVG car visuals */
.car-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem 0 0.5rem;
  width:100%;
  min-height:180px;
}
.car-visual svg{
  width:100%;max-width:420px;height:auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.6));
  transition:filter .4s ease, transform .5s var(--ease-out);
}
.vehicle-card:hover .car-visual svg{
  filter:drop-shadow(0 12px 32px rgba(232,160,32,0.25)) drop-shadow(0 4px 12px rgba(0,0,0,0.8));
  transform:scale(1.04) translateY(-4px);
}
@keyframes headlightPulse{
  0%,100%{opacity:1}
  50%{opacity:.6}
}
@keyframes wheelSpin{
  from{transform-origin:center;transform:rotate(0deg)}
  to{transform-origin:center;transform:rotate(360deg)}
}
@keyframes groundGlow{
  0%,100%{opacity:.35}
  50%{opacity:.6}
}
.car-light.rear{
  left:-2px;top:22px;
  background:#cc2222;
  box-shadow:0 0 10px #cc2222;
}
@keyframes lightPulse{
  0%,100%{opacity:1;box-shadow:0 0 12px var(--c-gold)}
  50%{opacity:.7;box-shadow:0 0 20px var(--c-gold)}
}
/* VIP car is wider/taller */
.vehicle-card.featured .car-body{width:260px}
.vehicle-card.featured .car-top{width:170px;height:58px}
.vehicle-card.featured .car-bottom{width:260px;height:62px}
.vehicle-card.featured .car-wheel{width:38px;height:38px}
.vehicle-card.featured .car-wheel.left{left:30px}
.vehicle-card.featured .car-wheel.right{right:30px}

.vehicle-info h4{
  font-size:clamp(1.4rem,2.5vw,2rem);
  font-weight:700;margin-bottom:.75rem;letter-spacing:-.02em;
}
.vehicle-sub{font-size:.9rem;color:var(--c-gold);font-weight:600;margin-bottom:.75rem}
.vehicle-desc{font-size:1rem;color:var(--c-muted);margin-bottom:1.5rem;line-height:1.75}
.feature-list{list-style:none;margin-bottom:2rem}
.feature-list li{
  display:flex;align-items:center;gap:.75rem;
  font-size:.9rem;color:var(--c-muted);padding:.45rem 0;
  border-bottom:1px solid var(--c-border);
}
.feature-list li:last-child{border-bottom:none}
.feature-list li::before{
  content:'✓';color:var(--c-gold);font-weight:700;flex-shrink:0;
}

/* ─────────────── H4: NEDEN BİZ ─────────────── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.why-list{display:flex;flex-direction:column;gap:2rem}
.why-item{
  display:flex;gap:1.5rem;align-items:flex-start;
  padding:2rem;background:var(--c-card);
  border:1px solid var(--c-border);border-radius:var(--r);
  transition:border-color .3s, transform .4s var(--ease-out);
}
.why-item:hover{border-color:var(--c-gold);transform:translateX(8px)}
.why-num{
  font-family:var(--fm);
  font-size:2.5rem;font-weight:500;
  color:var(--c-border2);line-height:1;flex-shrink:0;
}
.why-text strong{font-size:1.1rem;display:block;margin-bottom:.4rem}
.why-text p{font-size:.92rem;color:var(--c-muted);line-height:1.65;margin:0}
.why-visual{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
}
.kpi-box{
  background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--r);padding:2.5rem 1.5rem;text-align:center;
}
.kpi-val{
  font-size:clamp(1.8rem,3vw,3rem);font-weight:800;
  color:var(--c-gold);letter-spacing:-.03em;
  display:block;margin-bottom:.25rem;
}
.kpi-lbl{font-size:.8rem;color:var(--c-muted);font-weight:500;text-transform:uppercase;letter-spacing:.1em}

/* ─────────────── H5: FİYAT ÖĞREN ─────────────── */
.price-wrap{
  background:var(--c-bg2);
  border:1px solid var(--c-border);
  border-radius:var(--r);
  overflow:hidden;
}
.price-header{
  background:var(--c-bg3);
  padding:3rem clamp(2rem,5vw,4rem);
  border-bottom:1px solid var(--c-border);
}
.price-form{
  padding:3rem clamp(2rem,5vw,4rem);
  display:grid;gap:1.5rem;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-group{display:flex;flex-direction:column;gap:.6rem}
.form-group label{
  font-size:.85rem;font-weight:600;
  color:var(--c-muted);letter-spacing:.04em;text-transform:uppercase;
}
.form-group input,
.form-group select,
.form-group textarea{
  background:var(--c-card);
  border:1px solid var(--c-border2);
  border-radius:var(--r);
  padding:.9rem 1.1rem;
  font-size:1rem;font-family:var(--fn);
  color:var(--c-text);
  outline:none;
  transition:border-color .25s;
  -webkit-appearance:none;
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--c-muted2)}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--c-gold)}
.form-group select option{background:var(--c-card);color:var(--c-text)}
.form-actions{
  display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  padding-top:.5rem;
}
.price-note{font-size:.85rem;color:var(--c-muted);display:flex;align-items:center;gap:.5rem}
.price-note::before{content:'ℹ';color:var(--c-gold)}

/* ─────────────── H6: SSS ─────────────── */
.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--c-border)}
.faq-q{
  width:100%;background:none;border:none;
  color:var(--c-text);font-family:var(--fn);
  font-size:1.05rem;font-weight:600;text-align:left;
  padding:1.75rem 0;
  cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:color .2s;
}
.faq-q:hover{color:var(--c-gold)}
.faq-icon{
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--c-border2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:var(--c-gold);font-size:1.1rem;font-weight:300;
  transition:transform .35s var(--ease-out), background .3s, border-color .3s;
}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--c-gold-dim);border-color:var(--c-gold)}
.faq-body{
  max-height:0;overflow:hidden;
  transition:max-height .45s var(--ease-out);
}
.faq-body p{padding-bottom:1.75rem;color:var(--c-muted);font-size:.98rem;line-height:1.75;margin:0}

/* ─────────────── İLETİŞİM / CTA ─────────────── */
.contact-cta{
  text-align:center;
  background:
    radial-gradient(ellipse at center, rgba(232,160,32,.08) 0%, transparent 60%),
    var(--c-bg);
  border-top:1px solid var(--c-border);
}
.contact-cta h2{font-size:clamp(2rem,5vw,4rem);letter-spacing:-.04em;margin-bottom:1rem}
.contact-cta p{font-size:1.15rem;color:var(--c-muted);max-width:500px;margin:0 auto 3rem}
.contact-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}
.contact-phone{
  font-family:var(--fm);font-size:2.5rem;font-weight:700;
  color:var(--c-text);letter-spacing:.04em;
}
.contact-phone a:hover{color:var(--c-gold)}

/* ─────────────── FOOTER ─────────────── */
footer{
  background:var(--c-bg2);
  border-top:1px solid var(--c-border);
  padding:3rem 0 2rem;
  position:relative;z-index:1;
}
.footer-grid{
  display:flex;justify-content:space-between;align-items:center;
  gap:2rem;flex-wrap:wrap;
  padding-bottom:2rem;margin-bottom:2rem;
  border-bottom:1px solid var(--c-border);
}
.footer-copy{font-size:.85rem;color:var(--c-muted)}

/* ─────────────── REVEAL ANIMATIONS ─────────────── */
.reveal, .reveal-l, .reveal-r { transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal{opacity:0;transform:translateY(28px);}
.js .reveal.vis{opacity:1;transform:translateY(0)}
.js .reveal-l{opacity:0;transform:translateX(-30px);}
.js .reveal-l.vis{opacity:1;transform:translateX(0)}
.js .reveal-r{opacity:0;transform:translateX(30px);}
.js .reveal-r.vis{opacity:1;transform:translateX(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ─────────────── RESPONSIVE ─────────────── */
@media(max-width:900px){
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .vehicle-card{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .why-visual{margin-top:-1rem}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:640px){
  nav{display:none}
  .hamburger{display:flex}
  h1{font-size:clamp(2.8rem,10vw,4.5rem)}
  .stats-inner{grid-template-columns:1fr 1fr}
  .hero-visual{display:none}
}