/* --------- Genel --------- */
:root{
  --container: 1200px;
  --muted:#667085; --ink:#111827; --border:#e5e7eb; --tint:#0A84FF;
}
.home .container{ max-width:var(--container); margin:0 auto; padding:0 16px }

/* --------- 1) HERO (tam genişlik banner.webp) --------- */
.hero{ margin: 14px 0 }
.hero__img{
  display:block; width:100%; height:420px;
  background:#222 center/cover no-repeat;
  border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.12);
}

/* --------- 2) Slider + Yan Afiş --------- */
.hero2{
  display:grid; grid-template-columns: 2fr 1fr; gap:14px; margin: 14px auto;
}
.slider{
  position:relative; overflow:hidden; border-radius:14px;
  background:#111;
}
.slides{ display:flex; transition: transform .5s ease }
.slide{
  flex: 0 0 100%;
  height: 320px;
  background:#333 center/cover no-repeat; /* gif/jpg sorun yok */
}
.slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border:0; border-radius:999px;
  background:rgba(255,255,255,.85); cursor:pointer;
  display:grid; place-items:center; font-size:18px;
}
.slider .nav:hover{ filter:brightness(1.03) }
.slider .nav.prev{ left:10px } .slider .nav.next{ right:10px }
.slider .dots{
  position:absolute; left:0; right:0; bottom:8px; display:flex; gap:6px;
  justify-content:center;
}
.slider .dots > i{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.5) }
.slider .dots > i.active{ background:#fff }

.side img{
  width:100%; height:320px; object-fit:cover; border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
}

/* --------- Denizbutik'e yakın vitrin görünümü --------- */
.home-board{
  position:relative;
  background: #fdebd3;
  border: 1px solid #f6dbc0;
  border-radius: 14px;
  padding: 22px 10px 16px;
  margin: 18px 0;
}
.home-board .head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 12px 10px;
}
.home-board h2{
  margin:0; font-weight:800; font-size:22px; letter-spacing:.2px; color:#1f2937;
}
.head-link{ color:#2563eb; font-weight:700; text-decoration:none }
.head-link:hover{ text-decoration:underline }

/* Karusel */
.carousel{ position:relative; }
.carousel .track{
  display:flex; gap:22px;
  overflow-x:auto; scroll-behavior:smooth;
  padding: 0 60px;            /* oklar için iç boşluk */
  scrollbar-width:none;
}
.carousel .track::-webkit-scrollbar{ display:none }

/* Ürün kartı */
.pcard{
  min-width: 290px; width: 290px;
  background:#fff; border:1px solid #e8e8e8; border-radius:10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  overflow:hidden;
}
.pcard .img{
  aspect-ratio: 3 / 4;        /* 3:4 vitrin oranı */
  background-size: cover;
  background-position: center;
}
.pcard .body{ padding:12px 14px 14px }
.pcard .title{
  font-size:14px; font-weight:600; color:#111827; margin:0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* WebKit (Chrome, Safari, Edge) */
  line-clamp: 2;               /* Standart sözdizim - destek yayılıyor */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard .price .old{ font-size:12px; color:#9aa0a6; text-decoration:line-through; margin-bottom:4px }
.pcard .price .new{ font-size:18px; font-weight:800; color:#111827 }

/* ok butonları */
.cnav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:999px;
  background:#fff; border:1px solid #eaeaea;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  display:grid; place-items:center; cursor:pointer; z-index:2;
}
.cnav.prev{ left:10px } .cnav.next{ right:10px }
.cnav svg{ width:18px; height:18px; color:#111 }

/* dots */
.carousel .dots{ display:flex; gap:6px; justify-content:center; margin-top:10px }
.carousel .dots i{ width:6px; height:6px; border-radius:999px; background:#e2e8f0 }
.carousel .dots i.active{ background:#ff6a00; transform:scale(1.25) }

/* Orta banner */
.mid-banner{ margin:24px auto }
.mid-banner img{
  width:100%; height:220px; object-fit:cover; border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
}

/* --------- Mobil --------- */
@media (max-width: 980px){
  .hero__img{ height: 320px }
  .hero2{ grid-template-columns:1fr }
  .side{ order:2 } .slider{ order:1 }
}
@media (max-width: 1100px){
  .pcard{ width:260px; min-width:260px }
  .carousel .track{ gap:16px }
}
@media (max-width: 700px){
  .pcard{ width:62vw; min-width:62vw }
  .home-board{ padding:16px 8px }
  .carousel .track{ padding:0 52px }
}