/* =================================================================
   ÜRÜNLER SAYFASI (urunler.html, 2026-10-29) — ürün ailesi kartları + teknik karşılaştırma tablosu.
   Hero, tablo ve talep bandı urun.css'ten; bu dosya yalnız sayfaya özgü düzeni ekler. Ölçüler rem (bkz. CLAUDE.md "Ölçekleme").
   ================================================================= */

/* ---------- Ürün ailesi: dört kart, üzerine gelince cihazın videosu (js/site.js [data-kart-video]) ---------- */
/* Zeminler (kullanıcı 2026-11-02): karşılaştırma dışındaki bölümler kurumsal lacivert (urun.css .bolum--useritli; önceki: açık gri / beyaz),
   karşılaştırma bölümü açık gri-mavi (--kagit-2), tablo beyaz kutu. Kartlar koyu zemine göre. */
.bolum--seri { background: var(--kagit-2); }
.tablo-kap--seri { background: var(--kagit); }
.skart .ok-link, .akskart .ok-link { color: var(--xg-acik); }
.skart .ok-link:hover, .akskart a:hover .ok-link { color: #fff; }
.skartlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.skart {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, opacity .7s var(--ease);
}
.skart:hover, .js .skart.is-gorunur:hover { transform: translateY(-0.375rem); }
.skart:hover { border-color: rgba(var(--xg-rgb), .7); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .45); }
/* Vitrin: anasayfa ürün kartlarıyla aynı koyu zemin ve spot ışık; siyah cihaz silüeti okunsun */
.skart__medya {
  position: relative; isolation: isolate; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background:
    radial-gradient(ellipse 40% 62% at 50% 58%, rgba(124, 155, 255, .55) 0%, rgba(var(--xg-rgb), .26) 42%, rgba(var(--xg-rgb), 0) 78%),
    radial-gradient(ellipse 60% 18% at 50% 100%, rgba(var(--xg-rgb), .22), transparent 70%),
    var(--ink-2);
}
.skart__gorsel { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem 0 1rem; transition: transform .6s var(--ease); }
.skart:hover .skart__gorsel { transform: scale(1.04); }
.skart__video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease); }
.skart.is-oynuyor .skart__video { opacity: 1; }
.skart__govde { display: flex; flex: 1; flex-direction: column; padding: 1.5rem 1.5rem 1.75rem; }
.skart__tur { font-family: var(--font-baslik); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--xg-acik); }
.skart__ad { margin-top: 0.25rem; font-family: var(--font-baslik); font-size: 2rem; font-weight: 700; line-height: 1.05; color: #fff; }
.skart__ad a { transition: color .2s; }
.skart__ad a:hover { color: var(--xg-acik); }
.skart__slogan { margin-top: 0.375rem; font-weight: 600; line-height: 1.35; color: var(--koyu-metin); }
.skart__maddeler { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 1rem; }
.skart__maddeler li { position: relative; padding-left: 1.125rem; font-size: var(--fs-sm); line-height: 1.45; color: var(--koyu-soluk); }
.skart__maddeler li::before { content: ""; position: absolute; left: 0; top: .55em; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--xg); }
.skart__link { margin-top: auto; padding-top: 1.5rem; }

/* ---------- Karşılaştırma tablosu: urun.css .karsilastirma ailesi; masaüstünde başlık satırı header'ın altına yapışır ---------- */
.karsilastirma--seri { min-width: 72rem; table-layout: fixed; }
.karsilastirma--seri th:first-child { width: 13rem; }
.karsilastirma--seri thead th { font-size: var(--fs-base); letter-spacing: .06em; color: var(--ink); }
.karsilastirma--seri thead a { transition: color .2s; }
.karsilastirma--seri thead a:hover { color: var(--xg); }
.karsilastirma--seri td { font-size: var(--fs-sm); line-height: 1.5; }
.karsilastirma--seri tbody th { white-space: normal; }
.kliste { list-style: none; margin: 0; padding: 0; }
.kliste li + li { margin-top: 0.375rem; }
.seri__dipnot { margin-top: 1.5rem; }
@media (min-width: 1101px) {
  .tablo-kap--seri { overflow: visible; }   /* yapışkan başlık satırı sayfaya göre çalışsın */
  .karsilastirma--seri thead th { position: sticky; top: var(--ust-h); z-index: 2; box-shadow: inset 0 -1px 0 var(--cizgi); }
}

/* ---------- Aksesuarlar (2026-10-31): cihaz başına kart; vitrinde 2×2 aksesuar fotoğrafı, gri zemin + multiply (urun.css .xicerik ile aynı aile) ---------- */
.akskartlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.akskart { display: flex; }
.akskart a {
  display: flex; flex-direction: column; width: 100%; overflow: hidden; background: var(--ink-2); border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap);
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.akskart a:hover, .akskart a:focus-visible { border-color: rgba(var(--xg-rgb), .7); transform: translateY(-0.25rem); box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .45); }
.akskart__vitrin {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.5rem;
  aspect-ratio: 1 / 1; padding: 1.25rem; background: linear-gradient(180deg, #dcdfe6, #c8cdd6);
}
.akskart__vitrin img { width: 100%; height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.akskart a:hover .akskart__vitrin img { transform: scale(1.04); }
.akskart__govde { display: flex; flex: 1; flex-direction: column; padding: 1.5rem 1.5rem 1.75rem; }
.akskart__tur { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--xg-acik); }
.akskart__ad { margin-top: 0.5rem; font-family: var(--font-baslik); font-size: 1.75rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: #fff; }
.akskart__metin { margin: 0.625rem 0 1.25rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--koyu-soluk); }
/* Adlar kartın altına yaslı ve en az üç satır: ayırıcı çizgiler, listeler ve bağlantılar yan yana kartlarda aynı hizada (kart boyları eşit) */
.akskart__liste { min-height: calc(1rem + 4.8em); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--cizgi-koyu); font-size: var(--fs-xs); line-height: 1.6; color: var(--koyu-metin); }
.akskart .ok-link { padding-top: 1.25rem; }

/* ---------- Talep bandı vitrini: dört cihaz yan yana ---------- */
.utalep__vitrin--aile { display: flex; align-items: flex-end; justify-content: center; }
.utalep__vitrin--aile img { width: 32%; height: auto; max-height: 100%; margin-inline: -1.75rem; }
.utalep__vitrin--aile img[src*="portalcam"] { padding: 0; width: 26%; }

@media (prefers-reduced-motion: reduce) {
  .skart, .skart__gorsel, .skart__video, .akskart a, .akskart__vitrin img { transition: none; }
}

/* ---------- Tablet / mobil ---------- */
@media (max-width: 1100px) {
  /* Hero videosunda cihazlar sağda (~%62–68, tools/medya/seri.js): dar/dikey kutuda kırpım cihazı ortalar */
  .sayfa-urunler .uhero__medya { object-position: 66% 50%; }
  .skartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .akskartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tablo yatay kayar; özellik sütunu solda sabit kalır */
  .karsilastirma--seri { min-width: 60rem; }
  .karsilastirma--seri th:first-child { position: sticky; left: 0; z-index: 1; background: var(--kagit); box-shadow: inset -1px 0 0 var(--cizgi); }
  .karsilastirma--seri th:first-child { width: 10rem; }
}
@media (max-width: 640px) {
  .skartlar { grid-template-columns: minmax(0, 1fr); }
  .akskartlar { grid-template-columns: minmax(0, 1fr); }
  .utalep__vitrin--aile img { margin-inline: -1rem; }
}