/* ============================================================
   ALIŞVERİŞ — Günün Fırsatları
   Sitenin yazı sayfalarından ayrı bir düzen: burada okur metin okumaya değil
   ürün taramaya geliyor. Bu yüzden ızgara, büyük görsel, tek bakışta fiyat.
   Renkler site kimliğinden (mürekkep zemin, krem kart, orkide vurgu).
   ============================================================ */

.af-hero {
  position: relative;
  background:
    radial-gradient(70% 90% at 85% 0%, rgba(162, 28, 175, .5), transparent),
    linear-gradient(180deg, #151a22, var(--ink));
  color: var(--paper);
  padding: calc(var(--header-h) + 2.6rem) 1.25rem 2.2rem;
}
.af-hero-inner { max-width: var(--w-wide); margin: 0 auto; }
.af-hero .kicker {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-bright);
}
.af-hero h1 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.05;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem); margin: .35rem 0 .6rem;
}
.af-hero-alt {
  font-family: var(--font-serif); font-size: clamp(1rem, 2vw, 1.18rem);
  color: #d9d5cc; max-width: 46rem;
}
.af-sayac {
  display: flex; flex-wrap: wrap; gap: .6rem; list-style: none;
  margin-top: 1.4rem;
}
.af-sayac li {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: .5rem .9rem; border: 1px solid var(--line-dark); border-radius: .7rem;
  background: rgba(255, 255, 255, .04); min-width: 6.5rem;
}
.af-sayac b {
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: var(--paper);
}
.af-sayac span {
  font-size: .72rem; letter-spacing: .04em; color: var(--muted-dark);
  text-transform: uppercase;
}

.af-bolum { background: var(--paper); padding: 2rem 1.25rem 4rem; }
.af-inner { max-width: var(--w-wide); margin: 0 auto; }

/* ---------- kategori süzgeci ---------- */
.af-filtreler {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem;
}
.af-filtre {
  font-size: .82rem; padding: .38rem .85rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  transition: background .15s, color .15s, border-color .15s;
}
.af-filtre:hover { border-color: var(--ink); }
.af-filtre.etkin { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- ürün ızgarası ---------- */
.af-izgara {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21.5rem), 1fr));
  align-items: start;
}
.af-kart {
  background: #fff; border: 1px solid var(--line); border-radius: 1rem;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.af-kart:hover { box-shadow: 0 14px 40px rgba(16, 19, 25, .12); transform: translateY(-2px); }
.af-kart[data-gizli] { display: none; }
.af-kart[data-bitti] { opacity: .72; }

.af-vitrin {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: #fbfaf7; border-bottom: 1px solid var(--line);
  padding: .9rem;
}
.af-vitrin img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: normal; }
.af-gorsel-yok { font-size: .8rem; color: var(--muted); }
.af-rozet {
  position: absolute; top: .7rem; left: .7rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem;
  border-radius: 50%; background: var(--accent-warm); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem;
  line-height: 1; box-shadow: 0 4px 14px rgba(255, 92, 56, .35);
}
.af-rozet small { font-size: .52rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.af-plat {
  position: absolute; bottom: .7rem; right: .7rem; font-size: .72rem;
  padding: .22rem .6rem; border-radius: 999px; background: var(--ink);
  color: var(--paper); letter-spacing: .02em;
}

.af-govde { padding: 1rem 1.05rem 1.15rem; display: flex; flex-direction: column; gap: .55rem; }
.af-etiketler { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.af-cip {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, #fff);
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  padding: .18rem .55rem; border-radius: 999px;
}
.af-kiyas { font-size: .72rem; color: var(--muted); }
.af-kiyas-tek { color: #9a6b00; }

.af-kart h3 {
  font-family: var(--font-sans); font-size: .98rem; font-weight: 600;
  line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.af-kart h3 a:hover { color: var(--accent); }

.af-puan { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--muted); }
.af-yildiz { color: #f0a11a; letter-spacing: .04em; font-size: .92rem; }
.af-yildiz-bos { color: var(--line); }

.af-fiyat-blok { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.af-fiyat-blok strong {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  line-height: 1.1; color: var(--ink);
}
.af-fiyat-blok s { color: var(--muted); font-size: .92rem; }

.af-hukum {
  font-family: var(--font-serif); font-size: .88rem; line-height: 1.5;
  color: #3c4350; border-left: 3px solid var(--accent-bright);
  padding-left: .65rem;
}

.af-cta {
  display: block; text-align: center; padding: .7rem 1rem; border-radius: .6rem;
  background: var(--ink); color: var(--paper); font-weight: 600; font-size: .92rem;
  transition: background .15s;
}
.af-cta:hover { background: var(--accent); }
.af-kart[data-bitti] .af-cta { background: var(--muted); }

.af-kunye {
  list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .55rem;
  font-size: .74rem; color: var(--muted);
}
.af-kunye li:not(:last-child)::after { content: " ·"; color: var(--line); }

.af-yedek { font-size: .78rem; color: var(--muted); }
.af-yedek a { text-decoration: underline; }

/* ---------- platform fiyat tablosu ---------- */
.af-tablo-sar { border-top: 1px dashed var(--line); padding-top: .7rem; }
.af-tablo-sar h4 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: .35rem; font-weight: 600;
}
.af-tablo { width: 100%; border-collapse: collapse; font-size: .82rem; }
.af-tablo th {
  text-align: left; font-weight: 500; padding: .3rem 0;
  border-bottom: 1px solid var(--paper-2);
}
.af-tablo td { text-align: right; padding: .3rem 0; border-bottom: 1px solid var(--paper-2); }
.af-tablo a { text-decoration: underline; text-decoration-color: var(--line); }
.af-tablo a:hover { color: var(--accent); }
.af-tablo em {
  font-style: normal; font-size: .66rem; margin-left: .35rem; padding: .05rem .35rem;
  border-radius: .3rem; background: var(--paper-2); color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.af-tutar { font-family: var(--font-mono); white-space: nowrap; }
.af-ucuz th, .af-ucuz td { font-weight: 700; color: #0f7b3f; }
.af-ucuz em { background: #e4f6ea; color: #0f7b3f; }

/* ---------- açılır ayrıntı ---------- */
.af-detay { border-top: 1px dashed var(--line); padding-top: .55rem; }
.af-detay summary {
  cursor: pointer; font-size: .78rem; color: var(--accent); font-weight: 600;
  list-style: none;
}
.af-detay summary::-webkit-details-marker { display: none; }
.af-detay summary::before { content: "＋ "; }
.af-detay[open] summary::before { content: "－ "; }
.af-detay > *:not(summary) { margin-top: .6rem; }

.af-grafik svg { width: 100%; height: auto; background: #fbfaf7; border-radius: .5rem; }
.af-grafik figcaption, .af-grafik-yok {
  font-size: .72rem; color: var(--muted); margin-top: .3rem;
}
.af-yorum { display: grid; gap: .7rem; font-size: .82rem; }
.af-yorum h4 { font-size: .8rem; margin-bottom: .2rem; }
.af-yorum ul { padding-left: 1.1rem; }
.af-yorum-kaynak, .af-yorum-yok { font-size: .74rem; color: var(--muted); }
.af-puan-liste { list-style: none; padding: 0; display: grid; gap: .2rem; }
.af-puan-liste li { font-size: .8rem; }
.af-puan-liste b { font-weight: 600; }
.af-notlar { list-style: none; font-size: .74rem; color: #9a6b00; }
.af-notlar li::before { content: "⚠ "; }

/* ---------- canlı durum şeridi ---------- */
.af-durum {
  display: block; font-size: .74rem; font-weight: 600; padding: .3rem .6rem;
  border-radius: .4rem; background: #fff4e5; color: #9a5b00;
}
.af-durum[data-tur="bitti"] { background: #fdecea; color: #b3261e; }
.af-durum[data-tur="dustu"] { background: #e4f6ea; color: #0f7b3f; }

/* ---------- yöntem, uyarı, arşiv ---------- */
.af-uyari {
  font-size: .78rem; color: var(--muted); margin: 2rem 0 1.5rem;
  max-width: 46rem; line-height: 1.6;
}
.af-bolum .ozet-box { margin: 0 0 1.5rem; }
.af-arsiv { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.af-arsiv h2 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: .6rem; }
.af-arsiv ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.af-arsiv a {
  font-size: .84rem; padding: .32rem .75rem; border: 1px solid var(--line);
  border-radius: 999px; background: #fff;
}
.af-arsiv a:hover { border-color: var(--ink); }
.af-bos {
  font-family: var(--font-serif); font-size: 1.05rem; padding: 2rem;
  background: #fff; border: 1px solid var(--line); border-radius: 1rem;
}

@media (max-width: 640px) {
  .af-fiyat-blok strong { font-size: 1.42rem; }
  .af-vitrin { aspect-ratio: 3 / 2; }
}