/*
 * Ana sayfa — "Öne Çıkanlar" bölümü (modules/ana-sayfa-one-cikan.php, templates/ana-sayfa/one-cikanlar.php).
 * Yalnız ana sayfada yüklenir. Kartın kendisi tema.css §6'dan gelir; burada yalnız
 * bölümün düzeni (ızgara sütunu, şerit, "daha fazla göster", alt bağlantı) var.
 * Renkler --snn-* token'larından (sabit hex yok).
 *
 * Kırılımlar tema.css ile aynı: ≥1000 masaüstü · 690–999 tablet · <690 telefon.
 * Blocksy `[data-products]` sütununu dinamik CSS'te (0,1,0) sonra basar; tema.css
 * ≥1600'de (0,2,0) kullanır — burada `.snn-oc [data-products][data-products]` (0,3,0).
 */

/* ---- Başlık altı metni ---- */

.snn-oc .snn-oc__alt {
  max-width: 720px;
  margin: calc(-1 * var(--snn-bolum-bosluk) + 12px) auto var(--snn-bolum-bosluk);
  text-align: center;
  color: var(--snn-ikincil);
  font-size: 17px;
  line-height: 1.5;
}

.snn-oc__govde { position: relative; }

/* ---- Izgara (ızgara + "daha fazla göster") ---- */

@media (min-width: 1000px) {
  .snn-oc--izgara [data-products][data-products],
  .snn-oc--dahafazla [data-products][data-products] {
    --shop-columns: repeat(min(var(--snn-oc-sutun, 5), 4), minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .snn-oc--izgara [data-products][data-products],
  .snn-oc--dahafazla [data-products][data-products] {
    --shop-columns: repeat(var(--snn-oc-sutun, 5), minmax(0, 1fr));
  }
}

/* "Daha fazla göster": JS'in gizlediği kartlar (JS yoksa hiçbiri gizlenmez). */
.snn-oc [data-products] > li.snn-oc__gizli { display: none; }

/* ---- Kaydırmalı şerit ---- */

.snn-oc--serit [data-products][data-products] {
  /* Görünen kart sayısı: masaüstü panelden, tablet 3, telefon 1,5 (sonraki kart ucu görünür). */
  --snn-oc-gorunen: var(--snn-oc-sutun, 5);
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: calc((100% - (var(--snn-oc-gorunen) - 1) * var(--snn-izgara-bosluk)) / var(--snn-oc-gorunen));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--snn-kenar) transparent;
  padding-bottom: 12px; /* kaydırma çubuğu kart gölgesine binmesin */
  margin: 0;
}
.snn-oc--serit [data-products] > li {
  scroll-snap-align: start;
  min-width: 0;
}
.snn-oc--serit [data-products]:focus-visible {
  outline: 2px solid var(--snn-vurgu-koyu);
  outline-offset: 4px;
}

@media (min-width: 1000px) and (max-width: 1279.98px) {
  .snn-oc--serit [data-products][data-products] { --snn-oc-gorunen: min(var(--snn-oc-sutun, 5), 4); }
}
@media (min-width: 690px) and (max-width: 999.98px) {
  .snn-oc--serit [data-products][data-products] { --snn-oc-gorunen: 3; }
}
@media (max-width: 689.98px) {
  .snn-oc--serit [data-products][data-products] { --snn-oc-gorunen: 1.5; }
}

@media (prefers-reduced-motion: no-preference) {
  .snn-oc--serit [data-products] { scroll-behavior: smooth; }
}

/* Ok düğmeleri: görsel alanının ortasında, kenara yapışık. JS etkinleştirir (yoksa `hidden`). */
.snn-oc__ok {
  position: absolute;
  top: 34%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--snn-kart-kenar);
  border-radius: 50%;
  background: var(--snn-kart);
  color: var(--snn-kart-metin);
  box-shadow: var(--snn-golge-kart);
  cursor: pointer;
  transform: translateY(-50%);
}
.snn-oc__ok[hidden] { display: none; }
.snn-oc__ok--geri { left: -14px; }
.snn-oc__ok--ileri { right: -14px; }
.snn-oc__ok:hover { background: var(--snn-vurgu); border-color: var(--snn-vurgu); color: var(--snn-vurgu-metin); }
.snn-oc__ok:focus-visible { outline: 2px solid var(--snn-vurgu-koyu); outline-offset: 2px; }
.snn-oc__ok:disabled { opacity: .35; cursor: default; background: var(--snn-kart); color: var(--snn-kart-metin); border-color: var(--snn-kart-kenar); }

/* Telefonda oklar yok: parmakla kaydırma + görünen yarım kart yeterli. */
@media (max-width: 689.98px) {
  .snn-oc__ok { display: none !important; }
}

/* ---- Alt bar: "Daha fazla göster" + "Tümünü gör" ---- */

.snn-oc__alt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 32px;
}

.snn-oc__daha {
  min-height: 44px;
  padding: 10px 28px;
  border: 1px solid var(--snn-marka);
  border-radius: var(--snn-radius);
  background: transparent;
  color: var(--snn-metin);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.snn-oc__daha[hidden] { display: none; }
.snn-oc__daha:hover { background: var(--snn-marka); color: var(--snn-beyaz); }
.snn-oc__daha:focus-visible { outline: 2px solid var(--snn-vurgu-koyu); outline-offset: 2px; }

/* Açık zeminde bağlantı koyu + altı çizili, hover kehribar (tasarım kuralı). */
.snn-oc__tumu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--snn-baglanti);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.snn-oc__tumu:hover,
.snn-oc__tumu:focus-visible { color: var(--snn-baglanti-hover); }

@media (max-width: 689.98px) {
  .snn-oc .snn-oc__alt { margin: calc(-1 * var(--snn-bolum-bosluk-mobil) + 8px) auto var(--snn-bolum-bosluk-mobil); font-size: 16px; }
  .snn-oc__alt-bar { margin-top: 24px; }
}