/* ==========================================================================
   SNN seçenek formu (ürün sayfası) — snn-core/modules/secenekler.php basar.

   Bölümler:
     1. Temel yerleşim (önceden secenekler.php içinde satır içi stildi)
     2. Kutu / Kart görünümü (panel: urun_secenek_gorunum; markup .snn-alan--gorunum-*)
     3. Parçalı buton (2 seçenekli radio; markup .snn-alan__liste--parcali)
     4. Aramalı açılır liste (.snn-secim; assets/secenekler.js kurar)
     5. Hareket azaltma

   Renk tokenları çocuk temanın tokens.css'inden gelir; her `var()` yedekli, tema
   kapalıysa da form okunur. Seçili renk: `--snn-secenek-vurgu` (panelden
   `snn_secenek_gorunum_css()` html:root'a basar; yoksa vurgu turuncusu).
   Tema `urun.css` bu dosyadan SONRA yüklenir (bu dosya wp_enqueue_scripts 5'te),
   ince ayar orada yapılabilir.
   ========================================================================== */

html:root { --snn-secenek-vurgu: var(--snn-vurgu, #F8A72B); }

/* ==================================================================
   1. Temel yerleşim
   ================================================================== */

.snn-secenekler { margin: 0 0 1.5em; }
.snn-alan { position: relative; margin: 0 0 1.1em; }
.snn-alan__baslik { display: block; font-weight: 600; margin: 0 0 .35em; }
.snn-alan__aciklama,
.snn-alan__ipucu { display: block; font-size: .85em; opacity: .75; margin: .25em 0; }
.snn-alan__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35em 1.2em; }
.snn-alan__ogesi label { display: flex; align-items: center; gap: .4em; cursor: pointer; }
.snn-alan__fark { font-size: .85em; opacity: .8; }
.snn-alan__girdi { max-width: 28em; width: 100%; }
.snn-secenekler__toplam { font-size: 1.1em; font-weight: 600; margin: .75em 0; }

/* Klasik görünüm: yalnız native işaretin rengi. */
.snn-alan--gorunum-klasik .snn-alan__ogesi input { accent-color: var(--snn-secenek-vurgu); }

/* JS öncesi native select de 44 px: combobox kurulunca yükseklik değişmez, sayfa zıplamaz. */
.snn-alan--select .snn-alan__girdi { min-height: 44px; }

/* Combobox kurulunca native select görsel olarak gizlenir (display:none DEĞİL:
   `required` doğrulaması ve `invalid` olayı çalışmaya devam eder). */
.snn-alan__girdi--gizli {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

/* ==================================================================
   2. Kutu / Kart görünümü
   `:has()` yoksa (eski Safari) bu blok hiç uygulanmaz → klasik görünüm kalır.
   ================================================================== */

@supports selector(:has(*)) {
  /* Ortak: native radio gizli, etiket kutu, onay rozeti ::before */
  .snn-alan--gorunum-kutu .snn-alan__ogesi label,
  .snn-alan--gorunum-kart .snn-alan__ogesi label {
    position: relative;
    box-sizing: border-box;
    background: var(--snn-kart, #FFFFFF);
    border: 1px solid var(--snn-kenar, #DDDBD0);
    color: var(--snn-kart-metin, #1A1A18);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  }

  .snn-alan--gorunum-kutu .snn-alan__ogesi input,
  .snn-alan--gorunum-kart .snn-alan__ogesi input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* Rozet: seçilmemişte ince halka (radio gibi okunur), seçilide dolu + koyu tik.
     Tik glyph'i data-URI SVG (#1A1A18 = --snn-vurgu-metin; turuncu üstünde koyu metin kuralı). */
  .snn-alan--gorunum-kutu .snn-alan__ogesi label::before,
  .snn-alan--gorunum-kart .snn-alan__ogesi label::before {
    content: "";
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--snn-form-kenar, #8F8C7E);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%231A1A18' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0 0 no-repeat;
    transition: border-color .15s ease, background-color .15s ease;
  }

  .snn-alan--gorunum-kutu .snn-alan__ogesi label:has(input:checked)::before,
  .snn-alan--gorunum-kart .snn-alan__ogesi label:has(input:checked)::before {
    border-color: var(--snn-secenek-vurgu);
    background-color: var(--snn-secenek-vurgu);
    background-size: 11px 11px;
    animation: snn-tik .16s cubic-bezier(.2, .9, .3, 1.4);
  }

  /* Seçili kutu: vurgu kenar + açık vurgu zemini (color-mix yoksa bölüm zemini). */
  .snn-alan--gorunum-kutu .snn-alan__ogesi label:has(input:checked),
  .snn-alan--gorunum-kart .snn-alan__ogesi label:has(input:checked) {
    border-color: var(--snn-secenek-vurgu);
    box-shadow: 0 0 0 1px var(--snn-secenek-vurgu);
    background-color: var(--snn-bolum, #E9E8E0);
    background-color: color-mix(in srgb, var(--snn-secenek-vurgu) 12%, #FFFFFF);
  }

  .snn-alan--gorunum-kutu .snn-alan__ogesi label:has(input:focus-visible),
  .snn-alan--gorunum-kart .snn-alan__ogesi label:has(input:focus-visible) {
    outline: 2px solid var(--snn-baglanti, #1A1A18);
    outline-offset: 2px;
  }

  @media (hover: hover) {
    .snn-alan--gorunum-kutu .snn-alan__ogesi label:hover,
    .snn-alan--gorunum-kart .snn-alan__ogesi label:hover { border-color: var(--snn-kart-kenar-hover, #CFCCBE); }
    .snn-alan--gorunum-kart .snn-alan__ogesi label:hover { box-shadow: var(--snn-golge-kart, 0 8px 20px rgba(0, 0, 0, .10)); }
    .snn-alan--gorunum-kart .snn-alan__ogesi label:has(input:checked):hover { box-shadow: 0 0 0 1px var(--snn-secenek-vurgu); }
  }

  /* --- Kutu (chip): etiket + fark yan yana, 40 px --- */
  .snn-alan--gorunum-kutu .snn-alan__liste { gap: 8px; }

  .snn-secenekler .snn-alan--gorunum-kutu .snn-alan__ogesi:not(.snn-alan__ogesi--gorselli) label {
    min-height: 40px;
    padding: 0 14px 0 12px;
    gap: 8px;
    border-radius: var(--snn-radius, 4px);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.25;
  }
  .snn-secenekler .snn-alan--gorunum-kutu .snn-alan__ogesi:not(.snn-alan__ogesi--gorselli) label:has(input:checked) { font-weight: 600; }
  .snn-alan--gorunum-kutu .snn-alan__ogesi:not(.snn-alan__ogesi--gorselli) .snn-alan__fark {
    font-size: 14px;
    opacity: 1;
    color: var(--snn-ikincil, #5C5C52);
  }

  /* --- Kart: dikey, rozet sağ üst köşede --- */
  .snn-alan--gorunum-kart .snn-alan__liste { gap: 10px; }

  .snn-secenekler .snn-alan--gorunum-kart .snn-alan__ogesi:not(.snn-alan__ogesi--gorselli) label {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 140px;
    min-height: 62px;
    padding: 12px 40px 12px 14px;
    border-radius: var(--snn-radius-kart, 6px);
    font-size: 15px;
    line-height: 1.25;
  }
  .snn-alan--gorunum-kart .snn-alan__ogesi:not(.snn-alan__ogesi--gorselli) .snn-alan__etiket { font-weight: 600; }
  .snn-alan--gorunum-kart .snn-alan__ogesi:not(.snn-alan__ogesi--gorselli) .snn-alan__fark {
    font-size: 13px;
    opacity: 1;
    color: var(--snn-ikincil, #5C5C52);
  }

  /* Kart ve görselli kartlarda (her iki görünüm) rozet köşede durur. */
  .snn-alan--gorunum-kart .snn-alan__ogesi label::before,
  .snn-alan--gorunum-kutu .snn-alan__ogesi--gorselli label::before {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background-color: var(--snn-kart, #FFFFFF);
  }
  .snn-alan--gorunum-kart .snn-alan__ogesi label:has(input:checked)::before,
  .snn-alan--gorunum-kutu .snn-alan__ogesi--gorselli label:has(input:checked)::before {
    background-color: var(--snn-secenek-vurgu);
    background-size: 13px 13px;
  }

  /* Telefon: kartlar iki sütun (görselli kartlarla aynı kural urun.css'te). */
  @media (max-width: 479.98px) {
    .snn-alan--gorunum-kart .snn-alan__ogesi:not(.snn-alan__ogesi--gorselli) { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .snn-secenekler .snn-alan--gorunum-kart .snn-alan__ogesi:not(.snn-alan__ogesi--gorselli) label { min-width: 0; width: 100%; }
  }
}

@keyframes snn-tik {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ==================================================================
   3. Parçalı buton (2 seçenekli radio: Sağ | Sol) — kutu ve kart görünümünde
   ================================================================== */

@supports selector(:has(*)) {
  .snn-alan--gorunum-kutu .snn-alan__liste--parcali,
  .snn-alan--gorunum-kart .snn-alan__liste--parcali {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0;
    border: 1px solid var(--snn-form-kenar, #8F8C7E);
    border-radius: var(--snn-radius, 4px);
    background: var(--snn-kart, #FFFFFF);
    overflow: hidden;
  }
  .snn-alan--gorunum-kutu .snn-alan__liste--parcali .snn-alan__ogesi,
  .snn-alan--gorunum-kart .snn-alan__liste--parcali .snn-alan__ogesi { flex: 0 1 auto; }

  .snn-secenekler .snn-alan--gorunum-kutu .snn-alan__liste--parcali .snn-alan__ogesi label,
  .snn-secenekler .snn-alan--gorunum-kart .snn-alan__liste--parcali .snn-alan__ogesi label {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    min-height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    font-weight: 400;
  }
  .snn-alan--gorunum-kutu .snn-alan__liste--parcali .snn-alan__ogesi + .snn-alan__ogesi label,
  .snn-alan--gorunum-kart .snn-alan__liste--parcali .snn-alan__ogesi + .snn-alan__ogesi label {
    border-left: 1px solid var(--snn-form-kenar, #8F8C7E);
  }
  .snn-alan--gorunum-kutu .snn-alan__liste--parcali .snn-alan__ogesi label::before,
  .snn-alan--gorunum-kart .snn-alan__liste--parcali .snn-alan__ogesi label::before { display: none; }

  .snn-secenekler .snn-alan--gorunum-kutu .snn-alan__liste--parcali .snn-alan__ogesi label:has(input:checked),
  .snn-secenekler .snn-alan--gorunum-kart .snn-alan__liste--parcali .snn-alan__ogesi label:has(input:checked) {
    font-weight: 600;
    box-shadow: inset 0 0 0 2px var(--snn-secenek-vurgu);
    background-color: var(--snn-bolum, #E9E8E0);
    background-color: color-mix(in srgb, var(--snn-secenek-vurgu) 12%, #FFFFFF);
  }
  .snn-alan--gorunum-kutu .snn-alan__liste--parcali .snn-alan__ogesi label:has(input:focus-visible),
  .snn-alan--gorunum-kart .snn-alan__liste--parcali .snn-alan__ogesi label:has(input:focus-visible) {
    outline-offset: -2px;
  }

  @media (max-width: 479.98px) {
    .snn-alan--gorunum-kutu .snn-alan__liste--parcali,
    .snn-alan--gorunum-kart .snn-alan__liste--parcali { display: flex; }
    .snn-alan--gorunum-kutu .snn-alan__liste--parcali .snn-alan__ogesi,
    .snn-alan--gorunum-kart .snn-alan__liste--parcali .snn-alan__ogesi { flex: 1 1 0; }
  }
}

/* ==================================================================
   4. Aramalı açılır liste (.snn-secim)
   Blocksy'nin genel `button` / `input[type=search]` kuralları bu dosyadan SONRA
   gelir; özgüllük için `.snn-secenekler` öneki kullanılır.
   ================================================================== */

.snn-secenekler .snn-secim { position: relative; max-width: 28em; width: 100%; }

.snn-secenekler .snn-secim__dugme {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 40px 8px 12px;
  background: var(--snn-kutu, #FFFFFF);
  color: var(--snn-metin, #1A1A18);
  border: 1px solid var(--snn-form-kenar, #8F8C7E);
  border-radius: var(--snn-radius, 4px);
  box-shadow: none;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease;
}
.snn-secenekler .snn-secim__dugme:hover {
  background: var(--snn-kutu, #FFFFFF);
  color: var(--snn-metin, #1A1A18);
  border-color: var(--snn-metin, #1A1A18);
}
.snn-secenekler .snn-secim--acik .snn-secim__dugme,
.snn-secenekler .snn-secim__dugme:focus-visible {
  border-color: var(--snn-vurgu-koyu, #8F5308);
  outline: 2px solid rgba(143, 83, 8, .25);
  outline-offset: 1px;
}
.snn-secenekler .snn-secim--hatali .snn-secim__dugme { border-color: var(--snn-indirim, #B3261E); }

.snn-secim__deger { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snn-secim:not(.snn-secim--dolu) .snn-secim__deger { color: var(--snn-ikincil, #5C5C52); }
.snn-secim__fark { flex: 0 0 auto; font-size: 14px; color: var(--snn-ikincil, #5C5C52); }
.snn-secim__fark:empty { display: none; }

.snn-secim__ok {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background-color: var(--snn-ikincil, #5C5C52);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  transition: transform .15s ease;
  pointer-events: none;
}
.snn-secim--acik .snn-secim__ok { transform: rotate(180deg); }

.snn-secenekler .snn-secim__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  background: var(--snn-kart, #FFFFFF);
  border: 1px solid var(--snn-kart-kenar, #E1DFD5);
  border-radius: var(--snn-radius-kart, 6px);
  box-shadow: var(--snn-golge-kart, 0 8px 20px rgba(0, 0, 0, .10));
  overflow: hidden;
  animation: snn-secim-ac .14s ease-out;
}
.snn-secenekler .snn-secim--yukari .snn-secim__panel { top: auto; bottom: calc(100% + 4px); }
.snn-secenekler .snn-secim__panel[hidden] { display: none; }

.snn-secenekler .snn-secim__panel .snn-secim__arama {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px 8px 36px;
  border: 0;
  border-bottom: 1px solid var(--snn-kart-kenar, #E1DFD5);
  border-radius: 0;
  background: var(--snn-kart, #FFFFFF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%235C5C52' stroke-width='1.6'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='%235C5C52' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 12px center / 16px 16px no-repeat;
  color: var(--snn-metin, #1A1A18);
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  outline: none;
  box-shadow: none;
}
.snn-secenekler .snn-secim__panel .snn-secim__arama:focus { box-shadow: inset 0 -2px 0 var(--snn-vurgu-koyu, #8F5308); }
.snn-secenekler .snn-secim__panel .snn-secim__arama::placeholder { color: var(--snn-ikincil, #5C5C52); }
.snn-secim__arama::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.snn-secenekler .snn-secim__liste {
  position: relative; /* satır offsetTop listeye göreli (JS listedeGoster) */
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 320px; /* JS açılışta boşluğa göre kırpar (160–320 px) */
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
}
.snn-secenekler .snn-secim__oge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  margin: 0;
  padding: 9px 36px 9px 12px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--snn-metin, #1A1A18);
  cursor: pointer;
}
.snn-secenekler .snn-secim__oge[hidden] { display: none; }
.snn-secenekler .snn-secim__oge--aktif { background: var(--snn-bolum, #E9E8E0); }
.snn-secenekler .snn-secim__oge[aria-selected="true"] { font-weight: 600; }
.snn-secenekler .snn-secim__oge[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background-color: var(--snn-secenek-vurgu);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.snn-secim__etiket { flex: 1 1 auto; min-width: 0; }
.snn-secim__oge-fark { flex: 0 0 auto; font-size: 13px; color: var(--snn-ikincil, #5C5C52); white-space: nowrap; }

.snn-secenekler .snn-secim__bos { margin: 0; padding: 12px; font-size: 14px; color: var(--snn-ikincil, #5C5C52); }
.snn-secenekler .snn-secim__bos[hidden] { display: none; }
.snn-secenekler .snn-secim__hata { margin: 6px 0 0; font-size: 14px; color: var(--snn-indirim, #B3261E); }
.snn-secenekler .snn-secim__hata[hidden] { display: none; }

/* Açılışta seçenekler kademeli süzülür (--i JS'ten, en çok 12 kademe). */
.snn-secim--giris .snn-secim__oge {
  animation: snn-secim-gir .18s ease-out both;
  animation-delay: calc(var(--i, 0) * 20ms);
}

@keyframes snn-secim-ac  { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes snn-secim-gir { from { opacity: 0; transform: translateY(4px); }  to { opacity: 1; transform: none; } }

@media (max-width: 768px) {
  .snn-secenekler .snn-secim__liste { max-height: min(60vh, 320px); }
}

/* ==================================================================
   5. Hareket azaltma
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .snn-alan--gorunum-kutu .snn-alan__ogesi label,
  .snn-alan--gorunum-kart .snn-alan__ogesi label,
  .snn-alan--gorunum-kutu .snn-alan__ogesi label::before,
  .snn-alan--gorunum-kart .snn-alan__ogesi label::before,
  .snn-secenekler .snn-secim__dugme,
  .snn-secim__ok,
  .snn-secenekler .snn-secim__panel,
  .snn-secim--giris .snn-secim__oge {
    animation: none;
    transition: none;
  }
}