/* Body */
body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', Arial, sans-serif;
  background: #ffffff; /* Arka plan rengi buradan kontrol edilir */
  color: #222;
  overflow-x: hidden;
}

/* Root */
:root {
  --red: #c00;
  --black: #000;
  --gray: #f8f9fa;
}

/* Link */
a {
  text-decoration: none;
  color: inherit;
  transition: .2s;
}
a:hover { color: var(--red); }

/* Reset */
ul, li { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

/* Banner */
.banner-container img {
  width: 100%;
  object-fit: cover;
  border: none;
}

/* Kategoriler */
.category-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  padding: 10px 0;
  max-width: 1300px;
  margin: 0 auto;
}
.category-btn {
  height: 58px;
  border-radius: 14px;
  font-weight: 600;
  background: linear-gradient(#fff,#fff) padding-box,
             linear-gradient(90deg,var(--red),var(--black)) border-box;
  border: 2px solid transparent;
  color: #000;
  transition: .25s;
  text-align: center;
}
.category-btn:hover {
  background: linear-gradient(90deg,var(--red),var(--black));
  color: #fff;
  transform: scale(1.05);
}

/* Slider */
.slider-container {
  position: relative;
  width: 100%;
  max-width: 1300px;
  margin: 10px auto 20px auto;
  overflow: hidden;
}
.slider-track {
  display: flex;
  gap: 10px;
  scroll-behavior: smooth;
  overflow-x: auto;
  padding: 6px 0;
}
.latest-card {
  flex: 0 0 calc(16.666% - 8px);
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  text-align: center;
  transition: .2s;
}
.latest-card:hover { transform: translateY(-3px); }
.lc-body { padding:8px; }
.lc-title { font-size:.9rem; font-weight:600; height:2.4em; overflow:hidden; }
.lc-price { color: var(--red); font-weight:700; margin:.25rem 0 .4rem 0; }
.lc-link {
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; border-radius:10px;
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(90deg,var(--red),var(--black)) border-box;
  border:2px solid transparent; color:#000;
  font-weight:600; padding:0 10px;
}
.lc-link:hover { background: linear-gradient(90deg,var(--red),var(--black)); color:#fff; }

/* Alt Panel */
.alt-panel {
  display: grid;
  grid-template-columns: 26% 1fr 1fr 1fr 1fr;
  gap:10px;
  padding:12px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  margin-top:12px;
}
.side-cols { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.col-block { background: var(--gray); border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:6px; }
.col-title { font-weight:700; color:var(--red); font-size:.95rem; text-align:center; }
.col-body { display:flex; flex-direction:column; gap:5px; }
.kbtn {
  border-radius:10px; padding:6px 8px;
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(90deg,var(--red),var(--black)) border-box;
  border:1.5px solid transparent;
  font-weight:600;
  transition:.2s;
  text-align:left;
}
.kbtn:hover { background: linear-gradient(90deg,var(--red),var(--black)); color:#fff; }
.prod-area { grid-column:2/span 4; background:#f8f9fa; border-radius:12px; padding:10px; }
.prod-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.p-card { border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.08); overflow:hidden; background:#fff; text-align:center; transition:.2s; }
.p-card:hover { transform:translateY(-3px); }
.p-card img { width:100%; height:140px; object-fit:cover; }
.p-body { padding:6px; }
.p-title { font-size:.85rem; font-weight:600; height:2.4em; overflow:hidden; }
.p-price { color:var(--red); font-weight:700; font-size:.9rem; }
.p-link { display:inline-flex; align-items:center; justify-content:center; height:32px; border:2px solid transparent; border-radius:10px; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,var(--red),var(--black)) border-box; color:#000; font-weight:600; padding:0 10px; }
.p-link:hover { background:linear-gradient(90deg,var(--red),var(--black)); color:#fff; }