/* ÜRÜN OPSİYON SETLERİ — ÇERÇEVE VE BAŞLIK (tek kaynak)
 *
 * KULLANICI İSTEĞİ (2026-10-13): "Ürün opsiyon seçeneklerinin tablolarını,
 * opsiyon başlıklarını ve her opsiyon setinin kendi grup çerçevelerini daha
 * belirgin, daha anlaşılır, daha göze gelir güzel bir şekilde tasarla."
 *
 * NEDEN AYRI DOSYA: aynı biçim DÖRT sayfada kopyalıydı (urun.html, iki 3D
 * sayfası, eski-tema/urun.html). Kopya biçim bu projede defalarca ayrıştı;
 * sayfalardaki kurallar buraya taşındı ve sayfalar yalnızca bu dosyayı
 * bağlıyor. Sayfaya özgü sıkıştırmalar (ör. 3D sayfasının #opsiyon-icerik
 * önekli kuralları) daha yüksek özgüllükte olduğu için yine çalışıyor —
 * bağlantı sayfanın kendi <style> bloğundan ÖNCE duruyor.
 *
 * NE DEĞİŞMEDİ: seçenek kutuları (.opsiyon-kart) aynı ölçüde kaldı. Kullanıcı
 * kuralı: "küçük minik kibar, yer kaplamayan, yan yana en az 6 opsiyon
 * sığacak kadar." Belirginleşen şey SETİN ÇERÇEVESİ ve BAŞLIĞI.
 */

/* Sıra numarası sayacı. display:none olan setler sayacı ARTIRMAZ (CSS kuralı),
   yani zorunlu-set mantığı bir seti gizlediğinde numaralar kaymıyor. */
#opsiyon-icerik { counter-reset: opsset; }

/* ── SETİN KENDİ ÇERÇEVESİ ───────────────────────────────────────────────────
   Eskiden setler yalnızca alt çizgiyle ayrılıyordu; nerede bittiği, hangi
   seçeneğin hangi başlığa ait olduğu zor okunuyordu. Artık her set kendi
   kartında duruyor. */
.opsiyon-set {
  position: relative;
  margin: 0 10px 9px;
  padding: 0 0 7px;
  border: 1.5px solid var(--bdr, #e2e8f0);
  border-radius: 11px;
  background: var(--surf, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  overflow: hidden;
  /* Alt çizgi devri kapandı: çerçeve zaten ayırıyor, ikisi birden gürültü. */
  border-bottom: 1.5px solid var(--bdr, #e2e8f0);
}
.opsiyon-set:last-child { margin-bottom: 3px; }

/* SEÇİMİ YAPILMIŞ SET belli olsun: müşteri uzun listede nerede kaldığını
   başlığı okumadan görüyor. :has() desteklemeyen tarayıcı bu kuralı yok
   sayıyor ve çerçeve varsayılan hâlinde kalıyor — kırılma yok. */
.opsiyon-set:has(.opsiyon-kart.secili) {
  border-color: rgba(34, 197, 94, .42);
}
.opsiyon-set:has(.opsiyon-kart.secili) > .opsiyon-set-baslik {
  background: linear-gradient(180deg, rgba(34, 197, 94, .11), rgba(34, 197, 94, .04));
  border-bottom-color: rgba(34, 197, 94, .3);
}

/* ── BAŞLIK ŞERİDİ ───────────────────────────────────────────────────────────
   BÜYÜK HARF KALDIRILDI: 11px'lik harf aralıklı büyük harf, uzun Türkçe set
   adlarında ("Arka Yüz Seçenekleri") hem iki satıra taşıyor hem okunurluğu
   düşürüyordu. Yerine daha büyük, daha koyu ve daha kalın bir başlık geldi —
   "göze gelir" olan şey punto değil kontrast. */
.opsiyon-set-baslik {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  padding: 7px 11px 7px 9px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text, #0f172a);
  background: linear-gradient(180deg, rgba(13, 148, 136, .10), rgba(13, 148, 136, .03));
  border-bottom: 1px solid var(--bdr, #e2e8f0);
  counter-increment: opsset;
}

/* SIRA NUMARASI — içerik ::before ile üretiliyor, yani metnin içinde DEĞİL.
   Bu bilerek böyle: başlığın textContent'i "zorunlu alan eksik" uyarısında
   set adı olarak okunuyor (bkz. urun.html/_zorunluAlanlarTamam). Numarayı
   metne yazsaydık uyarı "1 Kaplama Seçenekleri" derdi. */
.opsiyon-set-baslik::before {
  content: counter(opsset);
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--acc, #0d9488);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.opsiyon-set:has(.opsiyon-kart.secili) > .opsiyon-set-baslik::before {
  background: #22c55e;
}

/* Setin kendi resmi (FM'den gelen set görseli) numaradan sonra geliyor. */
.opsiyon-set-baslik-resim {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--bdr, #e2e8f0);
  flex-shrink: 0;
}

/* Telefonda dokunma hedefi ve okunurluk: başlık biraz daha ferah. */
@media (max-width: 600px) {
  .opsiyon-set { margin: 0 8px 8px; }
  .opsiyon-set-baslik { font-size: 13px; padding: 8px 11px 8px 9px; }
  .opsiyon-set-baslik::before { width: 20px; height: 20px; font-size: 11px; }
}