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

/* ========== BASE ========== */
:root {
  --red:#ff1a1a;
  --bg:#0e0e0f;
  --card:#111;
  --text:#ffffff;
  --muted:#ccc;
  --line:#333;
}

body {
  font-family: Arial, sans-serif;
  color: var(--text);
  background-image: url('../img/background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

/* Başlıklar, menü ve footer'a Tektur font */
h1,h2,h3,nav a,footer { font-family: 'Tektur', sans-serif; }

.container { max-width: 1350px; margin: 0 auto; padding: 0 20px; }

/* ========== HEADER / NAV ========== */
header {
  background-color: transparent;
  padding: 10px 0;
  margin: 20px 0;
  position: relative;
  z-index: 200;
}
.header-container { display:flex; justify-content:space-between; align-items:center; }
header img { height:40px; width:auto; }

nav ul { list-style:none; display:flex; gap:20px; }
nav ul li a { text-decoration:none; color:#fff; font-weight:600; font-size:18px; }

.menu-toggle {
  display:none; background:var(--red); color:#fff; border:none;
  padding:8px 15px; font-size:16px; cursor:pointer;
}

/* ========== SLIDER ========== */
.slider {
  position:relative; width:100%; max-width:1310px; margin:auto;
  overflow:hidden; background:#000;
  aspect-ratio: 1310 / 400; /* Masaüstü: yüksekliği koru */
}
.slides { position:relative; height:100%; }
.slide { position:absolute; inset:0; left:100%; opacity:0; transition:all .7s ease; z-index:0; }
.slide.active { left:0; opacity:1; z-index:1; }
.slide img {
  width:100%; height:100%;
  object-fit: cover;          /* default: alanı doldur */
  object-position: center;
  display:block;
}

/* Odak noktası yardımcı sınıfları (gerekirse slayda ekle) */
.slide--top img    { object-position: center top; }
.slide--bottom img { object-position: center bottom; }
.slide--left img   { object-position: left center; }
.slide--right img  { object-position: right center; }

/* Oklar (düz ikon) */
.prev,.next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; width:auto; height:auto;
  font-size:40px; color:#fff; cursor:pointer; z-index:10;
  transition:color .2s ease;
}
.prev:hover,.next:hover { color:var(--red); }
.prev { left:14px; } .next { right:14px; }

/* Noktalar */
.dots {
  position:absolute; bottom:12px; left:0; right:0;
  display:flex; justify-content:center; gap:8px; z-index:5;
}
.dot {
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.55);
  outline:2px solid rgba(0,0,0,.2);
  cursor:pointer; transition:transform .2s ease, background .2s ease;
}
.dot:hover { transform:scale(1.08); }
.dot.active { background:var(--red); }

/* ========== FOOTER ========== */
footer { background-color:transparent; color:#ccc; padding:40px 0; text-align:center; }

/* ========== HİZMETLER ========== */
.section-title { text-align:center; font-size:32px; margin-bottom:24px; color:var(--red); }
.services { padding:40px 0; }
.service-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

.card {
  background-color:rgba(0,0,0,.5);
  padding:18px; border-radius:0; width:100%; text-align:center; color:#fff;
  transition:transform .3s ease,border-color .2s ease; border:1px solid var(--line);
}
.card:hover { transform:translateY(-3px); border-color:var(--red); }
.card h3 { margin-bottom:8px; font-family:'Barlow Semi Condensed', sans-serif; }

/* ========== MARKA GALERİSİ ========== */
.brand-gallery { padding:40px 0; text-align:center; }
.brand-gallery h2 { font-size:24px; margin-bottom:30px; font-family:'Barlow Semi Condensed', sans-serif; }
.brand-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:20px; justify-items:center; }
.brand img { max-width:100px; height:auto; filter:drop-shadow(0 0 5px rgba(0,0,0,.3)); transition:transform .3s ease; }
.brand img:hover { transform:scale(1.1); }

/* ========== FORM + SON ARAÇLAR BLOĞU ========== */
.container-flex {
  max-width:1350px; width:100%;
  display:grid; grid-template-columns:400px 1fr;
  align-items:start; gap:20px;
}

.tuning-form {
  width:100%; background-color:var(--card); border:1px solid var(--line); padding:15px;
  font-family:'Barlow Semi Condensed', sans-serif; color:#fff;
}
.tuning-form h2 {
  font-size:18px; margin-bottom:10px; border-bottom:1px solid var(--line);
  padding-bottom:5px; color:#fff; text-transform:uppercase; letter-spacing:1px;
}
.tuning-form a { float:right; font-size:12px; color:#999; text-decoration:none; margin-top:-25px; }
.tuning-form select {
  width:100%; padding:15px; margin-bottom:20px; background:#000; border:1px solid #444; color:#fff;
  font-size:14px; border-radius:0; appearance:none;
  background-image:url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="white" d="M2 0L0 2h4z"/></svg>');
  background-repeat:no-repeat; background-position:right 10px center; background-size:10px; text-transform:uppercase;
}
.tuning-form .tuning-btn {
  width:100%; padding:10px; background:#222; color:#fff; font-weight:bold; border:none;
  border-left:6px solid var(--red); cursor:pointer; transition:.3s;
}
.tuning-form .tuning-btn:hover { background:var(--red); color:#fff; }
.tuning-form .tuning-btn i { margin-left:10px; }

.recent-cars { width:100%; align-self:flex-start; background:var(--card); padding:15px; border:1px solid var(--line); }
.section-header { display:flex; justify-content:space-between; align-items:center; color:#fff; margin-bottom:16px; }
.section-header h2 { font-family:'Barlow Semi Condensed', sans-serif; font-size:22px; color:#ccc; }
.see-all { color:#888; font-size:13px; text-decoration:none; }

.car-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.car-card {
  position:relative; background:#1a1a1a; border:1px solid #222; padding:10px; color:#fff;
  font-family:'Barlow Semi Condensed', sans-serif; overflow:hidden;
}
.badge {
  position:absolute; top:10px; left:10px; background:var(--red); color:#fff;
  padding:2px 6px; font-size:12px; font-weight:bold; border-radius:3px; z-index:10;
}
.car-card img { width:100%; height:auto; display:block; }
.car-info h3 { margin:10px 0 5px; font-size:16px; text-transform:lowercase; }
.car-info p { margin:2px 0; font-size:14px; color:#ccc; }
.car-info .gain { color:var(--red); }
.car-info .gain span { margin-left:10px; }

.home-bottom {
  display:flex; justify-content:center; align-items:flex-start; gap:40px;
  margin:40px auto; max-width:1350px; padding:20px;
}

/* ========== RESPONSIVE ========== */
@media (max-width:1200px) {
  .service-cards { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:992px) {
  .service-cards { grid-template-columns:repeat(2,1fr); }
  .container-flex { grid-template-columns:360px 1fr; }
}
@media (max-width:768px) {
  .container { padding:0 20px; }
  .home-bottom { padding:0 20px; }

  .menu-toggle { display:block; }
  nav ul {
    display:none; flex-direction:column; background:#111; position:absolute;
    top:70px; left:0; width:100%; padding:10px 0; border-top:1px solid #333; z-index:150;
  }
  nav ul.active { display:flex; }
  nav ul li { padding:10px 0; }
  nav ul li a { font-size:18px; display:block; text-align:center; }

  header img { height:30px; }

  /* 🔥 Mobil: siyah bant YOK → cover + daha kısa yükseklik */
  .slider{
    aspect-ratio: auto;                     /* oranı kapat */
    height: clamp(180px, 44vw, 240px);      /* daha kısa, ekrana göre */
    background:#000;
  }
  .slide img{
    object-fit: cover;                      /* alanı doldur (bant yok) */
    object-position: center;                /* odak ortada */
    background:#000;
  }

  /* Gerekirse görselin önemli kısmına göre şu sınıflardan birini .slide'a ekle:
     .slide--top / .slide--bottom / .slide--left / .slide--right (yukarıda tanımlı) */

  .container-flex { grid-template-columns:1fr; gap:14px; }
  .home-bottom { gap:16px; margin:24px auto; padding:12px 20px; }

  .car-grid { grid-template-columns:1fr; gap:10px; }
  .car-card { display:flex; align-items:center; gap:10px; padding:10px; }
  .car-card img { width:80px; height:60px; object-fit:cover; flex-shrink:0; }
  .car-info { flex:1; }
  .car-info h3 { font-size:14px; margin:0 0 4px; }
  .car-info p { font-size:12px; margin:2px 0; }
}
@media (max-width:480px) {
  .service-cards { grid-template-columns:1fr; }
  .dots { gap:6px; bottom:10px; }
  .dot { width:8px; height:8px; }
}