/* Bileşenler: ürün ızgarası ve kartı, rozet, slider, hero, kategori kutusu,
   güven şeridi, bant, süsleme, etiket, bölüm başlığı, bildirim. */

/* Ürün ızgarası — mobilde 2 sütun. Eski tasarım tek sütundu ve
   kaydırma çok uzuyordu. */
.grid-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) { .grid-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-products { grid-template-columns: repeat(4, 1fr); } }
/* Beşinci sütun, konteynerin bir sonraki basamağıyla (1680px, bkz.
   tokens.css) aynı noktada devreye giriyor — 1440px'te ikisi aynı anda
   tetiklenseydi konteyner genişlerken kart küçülürdü (1439px'te ~276px,
   1440px'te ~242px): pencere büyürken kartın küçülmesi hataymış gibi
   okunuyordu. Ayrıştırılınca 1440px'te yalnız konteyner büyüyor (kart da
   büyüyor, ~306px), 1680px'te sütun artışını konteynerin ikinci basamağı
   karşılıyor ve kart genişliği yine ~306px'te kalıyor. */
@media (min-width: 1680px) { .grid-products { grid-template-columns: repeat(5, 1fr); } }

/* Ürün kartı — her şey görünür. Eskiden "İncele" butonu hover
   katmanındaydı ve dokunmatikte hiç görünmüyordu. */
/* Kenarında iç boşluk ve alttan açık yeşil gölge var; görsel kendi köşesiyle
   içeride duruyor. overflow: hidden kaldırıldı (görsel köşesi artık
   .card__media'da); onun sağladığı "en küçük içerik genişliği sıfır"
   davranışı min-width: 0 ile korunuyor — yoksa uzun bir ürün adı 360px'te
   ızgarayı taşırabiliyor. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
/* hover: hover — dokunmatikte :hover dokunduktan sonra takılı kalıyor, kart
   havada asılı görünüyordu. */
@media (hover: hover) {
  .card:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--tint); }
}
.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: calc(var(--radius-card) - var(--space-2));
  background: var(--tint-2);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  padding: var(--space-3) var(--space-1) var(--space-1);
}
.card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-ink);
}
/* overflow-wrap yoksa tek uzun kelime (kesme noktasız bir ürün adı) satırı
   kırmadan taşıp kartı ve onunla birlikte sayfayı genişletebiliyor. */
.card__title a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}

/* Başlık bağlantısının tıklama alanını karta genişletiyor; metnin kendisi
   ~20px, dokunma hedefi asgarisi 44px. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:hover { text-decoration: underline; }

/* Sepet düğmesi kaplamanın üstünde kalmalı, yoksa tıklama karta gidiyor. */
.card__body .btn { position: relative; z-index: 1; }
.card__meta { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
/* Fiyat sıcak vurgu renginde: beyaz kart zemininde 4,58:1 (spec §1). */
.card__price { margin: auto 0 0; font-size: var(--text-lg); font-weight: 700; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

.badge {
  position: absolute; top: var(--space-2); right: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700;
}
.badge--sale { background: var(--honey); color: var(--honey-ink); }

/* Kaydırmalı alan — revslider/owl/flexslider/bxslider yerine */
.slider { position: relative; }
.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { scroll-snap-align: start; }
.slider__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--brand-ink);
  font-size: var(--text-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.slider__btn:hover { background: var(--tint); }
.slider__btn--prev { left: calc(var(--gutter) - var(--space-3)); }
.slider__btn--next { right: calc(var(--gutter) - var(--space-3)); }
@media (max-width: 767px) { .slider__btn { display: none; } }

/* Hero — solda metin, sağda kemerli görsel; zemin .band, süs .ornament.
   Mobilde görsel üstte. Anasayfa ve kategori slaytları aynı parçayı
   (Partials/Hero.cshtml) kullanıyor. Başlık --text-2xl'den küçük olmaz:
   vurgulu kelime --accent renginde ve --tint zeminde, büyük metin eşiği
   (24px) altında okunabilirlik oranı yetmiyor (spec §1). */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5) var(--space-6);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.hero__tag { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 1; }
.hero__media { order: -1; }
.hero__media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border: 6px solid var(--surface);
  border-radius: 200px 200px var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-lift);
}
.hero__title { margin: 0 0 var(--space-3); font-size: var(--text-2xl); line-height: 1.05; }
.hero__lead { margin: 0 0 var(--space-5); color: var(--ink-soft); max-width: 40ch; }

@media (min-width: 768px) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-7);
    padding: var(--space-7);
  }
  .hero__media { order: 0; }
  .hero__media img { height: 320px; }
  .hero__title { font-size: var(--text-3xl); }
}
@media (min-width: 1024px) {
  .hero__media img { height: 400px; }
}
/* Görseli olmayan slayt tek sütun: iki sütunlu ızgarada sağ yarı boş kalıyordu. */
.hero:not(:has(.hero__media)) { grid-template-columns: minmax(0, 1fr); }

/* Kategori kutusu. Canlıda hiçbir kategoride görsel yok; görselsiz hal
   birincil tasarım (spec §5): noktalı zemin (.band), üstte ortalı yaprak
   süsü (.ornament), serif ad, ürün sayısı. Kategoriye özel sabit ikon yok —
   kategori eklenince ya da adı değişince kırılırdı.
   minmax(min(220px, 100%), 1fr): 220px'ten dar ekranda tek sütun taşmasın. */
.grid-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-4);
}
.category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  min-height: 11rem;
  padding: var(--space-8) var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.category-tile:hover { text-decoration: none; }
@media (hover: hover) {
  .category-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--line); }
}
.category-tile.ornament::before {
  top: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
}
.category-tile__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-ink);
}
.category-tile__count { font-size: var(--text-sm); color: var(--ink-soft); }

/* Görselli hal: süs yerine kemerli görsel. */
.category-tile--image { padding-top: var(--space-4); }
.category-tile--image.ornament::before { display: none; }
.category-tile__media { width: 100%; margin-bottom: var(--space-3); }
.category-tile__media img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border: 4px solid var(--surface);
  border-radius: 120px 120px var(--radius-input) var(--radius-input);
}

@media (min-width: 1024px) {
  .category-tile { min-height: 13rem; }
}
@media (prefers-reduced-motion: reduce) {
  .category-tile { transition: none; }
  .category-tile:hover { transform: none; }
}

/* Güven şeridi — hero'nun altında, koyu yeşil zeminde beyaz metin (5,08:1).
   Mobilde 2×2; 768px'ten itibaren madde sayısı kadar sütun (3 ya da 4 —
   kargo eşiği tanımsızsa madde basılmıyor). */
.trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  list-style: none;
  border-radius: var(--radius-card);
  background: var(--brand-deep);
  color: var(--on-brand);
  font-size: var(--text-sm);
  font-weight: 600;
}
.trust__item { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.trust__icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 768px) {
  .trust {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    justify-items: center;
  }
}

/* Noktalı açık yeşil bant — hero, sayfa başlık bandı, kategori kutusu, özet
   kutusu, ürün paneli, alt bilgi. Yalnız zemin
   tanımlar; kenar boşluğuna dokunmaz, .container ile güvenle birleşir. */
.band {
  background-color: var(--tint);
  background-image: var(--texture-dots);
  background-size: var(--texture-dots-size);
}

/* Yaprak süsü. Öğeye .ornament eklenir; varsayılan konum sol üst, gerekirse
   çağıran bileşen ::before'u yeniden konumlar. Dekoratif, tıklamayı engellemez. */
.ornament { position: relative; }
.ornament::before {
  content: "";
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: 40px;
  height: 40px;
  background: var(--ornament-leaf) center / contain no-repeat;
  pointer-events: none;
}

/* Bal sarısı eğik etiket ("%100 doğal"). */
.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--honey);
  color: var(--honey-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: var(--shadow-tag);
  transform: rotate(4deg);
}

/* margin-block, margin kısayolu DEĞİL: anasayfada bölümler `section container`
   olarak iki sınıfı birlikte taşıyor. `margin: X 0` yatay kenar boşluğunu 0'a
   çekip .container'ın `margin: 0 auto`'sunu eziyordu (bu dosya layout.css'ten
   sonra yükleniyor, özgüllük eşit) — bölümler ortalanmayıp sola yapışıyordu. */
.section { margin-block: var(--space-7); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }

/* Bölüm başlığından sonra kalan genişliği kesik çizgi dolduruyor. Yalnız
   doğrudan çocuk h2'de (anasayfa bölümleri, ürün açıklaması). */
.section__head > h2 {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
}
.section__head > h2::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--line);
}

/* Masaüstünde bölümler birbirine çok yakın duruyordu; taban 48px/16px
   aralık dar ekranda yeterliyken 1024px'te sayfa nefes almıyor. */
@media (min-width: 1024px) {
  .section { margin-block: var(--space-8); }
  .section__head { margin-bottom: var(--space-6); }
}

/* Bildirim kutusu. Zemin --brand-deep: --brand beyaz metinle 2,6:1'de kalıyor.
   basket.js zemini satır içi yazıyor — başarıda `var(--brand)`, hatada
   `var(--danger)` — ve satır içi stil aşağıdaki background'u eziyor. JS'e
   dokunmadan düzeltmek için --brand bu öğede --brand-deep'e yeniden
   tanımlanıyor; satır içi var(--brand) böylece koyu yeşile çözülüyor.
   (Gizli kutunun hesaplanan stilini okuyan ilk okunabilirlik ölçümü satır içi
   stili görmediği için bunu kaçırmıştı.) */
.notification-container {
  --brand: var(--brand-deep);
  position: fixed; bottom: var(--space-4); left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 2 * var(--space-4));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--brand-deep); color: var(--on-brand);
  font-weight: 600;
  box-shadow: var(--shadow-lift);
  display: none; z-index: 1000; cursor: pointer;
}