/* ============================================================
   Ürün seçenekleri (başlıklar, alt seçenekler, rozet, stok).
   Renkler temaların ortak değişkenlerinden okunur; Atina, Çarşı,
   Orkide ve varsayılan temada ayrı uyarlama gerekmez.
   ============================================================ */

.po{
  --po-surface:var(--surface-2,#f4f5f8);
  --po-surface-2:var(--surface,#fff);
  --po-line:var(--stroke,rgba(128,128,128,.22));
  --po-line-2:var(--stroke-2,rgba(128,128,128,.4));
  --po-text:var(--text,#13151d);
  --po-muted:var(--muted,#6b7280);
  --po-accent:var(--red-2,var(--red,#e11931));
  --po-accent-rgb:var(--red-rgb,225,25,49);
  --po-ok:var(--green,#16a34a);
  --po-warn:#d79412;
  --po-r:14px;

  display:flex;
  flex-direction:column;
  gap:1.15rem;
}

/* Açık temada yeşil/turuncu tonlar koyulaştırılır, yoksa açık zeminde okunmuyor. */
html[data-theme="light"] .po{--po-ok:#107a52;--po-warn:#8a5a00}

/* Çarşı ve varsayılan tema ortak değişkenleri farklı adlarla tanımlar. */
body.crs-body .po{--po-accent:var(--c-accent,#dd0e2c);--po-accent-rgb:var(--c-accent-rgb,221,14,44)}
body:not(.crs-body):not(.ork-body) .po{
  --po-surface:var(--surface-2,var(--bg-tertiary,#2a2a2a));
  --po-surface-2:var(--surface,var(--bg-secondary,#222));
  --po-line:var(--stroke,var(--border-color,#2a2a2a));
  --po-line-2:var(--stroke-2,var(--border-light,#333));
  --po-text:var(--text,var(--text-primary,#fff));
  --po-muted:var(--muted,var(--text-secondary,#9ca3af));
}

/* ---------- Başlık ---------- */
.po-g{display:flex;flex-direction:column;gap:.6rem}
.po-g-head{display:flex;flex-direction:column;gap:.2rem;border-left:3px solid var(--po-accent);border-radius:2px;padding-left:.7rem}
.po-g--plain .po-g-head{border-left-color:var(--po-line-2)}
.po-g-line{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.po-g-title{font-size:.95rem;font-weight:700;color:var(--po-text);line-height:1.3}
.po-g-sub{font-size:.8rem;color:var(--po-muted);line-height:1.4;margin:0}

.po-req{
  display:inline-flex;align-items:center;
  font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--po-text);background:rgba(var(--po-accent-rgb),.16);
  border:1px solid rgba(var(--po-accent-rgb),.45);
  border-radius:999px;padding:.16rem .5rem;white-space:nowrap;
}

/* ---------- Liste ---------- */
.po-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:.55rem}
.po-item{min-width:0}
.po-item--wide{grid-column:1/-1}

/* ---------- Seçenek kartı ---------- */
.po-opt{
  position:relative;display:flex;align-items:center;gap:.7rem;
  padding:.8rem .9rem;border:1px solid var(--po-line);border-radius:var(--po-r);
  background:var(--po-surface);color:var(--po-muted);cursor:pointer;overflow:hidden;
  transition:border-color .18s,background .18s,box-shadow .18s;
  min-height:3.4rem;
}
.po-opt:hover{border-color:var(--po-line-2)}
.po-opt:has(.po-input:checked){
  border-color:rgba(var(--po-accent-rgb),.6);
  background:rgba(var(--po-accent-rgb),.07);
  box-shadow:0 6px 18px -10px rgba(var(--po-accent-rgb),.55);
}
.po-opt:has(.po-input:focus-visible){outline:2px solid rgba(var(--po-accent-rgb),.6);outline-offset:2px}
.po-opt--out{opacity:.55;cursor:not-allowed}
.po-opt--child{background:var(--po-surface-2)}

.po-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

/* Arka plan görseli ya da rengi */
.po-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.po-opt--img .po-bg{background-image:var(--po-img);background-size:cover;background-position:center}
/* Renk seçilen kartlarda renk okunabilirliği bozmasın diye yumuşatılır. */
.po-opt--color .po-bg{background:linear-gradient(135deg,color-mix(in srgb,var(--po-tint) 40%,transparent),color-mix(in srgb,var(--po-tint) 12%,transparent))}
.po-opt--img .po-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
html[data-theme="light"] .po-opt--img .po-bg::after{background:rgba(255,255,255,.52)}
.po-opt--img .po-body,.po-opt--color .po-body,
.po-opt--img .po-stock,.po-opt--color .po-stock,
.po-opt--img .po-mark,.po-opt--color .po-mark{position:relative;z-index:1}
.po-opt--img .po-name{text-shadow:0 1px 2px rgba(0,0,0,.55)}
html[data-theme="light"] .po-opt--img .po-name{text-shadow:0 1px 2px rgba(255,255,255,.65)}

.po-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.18rem}
.po-name-row{display:flex;align-items:center;gap:.4rem;min-width:0}
.po-name{font-size:.87rem;font-weight:600;color:var(--po-text);line-height:1.3}
.po-desc{font-size:.76rem;color:var(--po-muted);line-height:1.35}
/* Fiyat ve rozet yazıları metin renginde: vurgu rengi açık tonlu olan sitelerde
   (ör. sarı) renkli yazı açık temada okunmuyordu. Vurgu rengi seçim, rozet zemini
   ve başlık çizgisinde kalır. */
.po-price{font-size:.8rem;font-weight:700;color:var(--po-text);line-height:1.3;margin-top:.1rem}

/* ---------- Rozet ---------- */
.po-badge{
  align-self:flex-start;display:inline-flex;align-items:center;
  font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:.14rem .45rem;margin-bottom:.15rem;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.po-badge--accent{color:var(--po-text);background:rgba(var(--po-accent-rgb),.16);border:1px solid rgba(var(--po-accent-rgb),.45)}
.po-badge--neutral{color:var(--po-muted);background:var(--po-surface-2);border:1px solid var(--po-line-2)}
.po-badge--success{color:var(--po-ok);background:color-mix(in srgb,var(--po-ok) 14%,transparent);border:1px solid color-mix(in srgb,var(--po-ok) 45%,transparent)}
.po-badge--warning{color:var(--po-warn);background:color-mix(in srgb,var(--po-warn) 14%,transparent);border:1px solid color-mix(in srgb,var(--po-warn) 45%,transparent)}

/* ---------- Stok ---------- */
.po-stock{
  margin-left:auto;align-self:center;white-space:nowrap;
  font-size:.66rem;font-weight:700;border-radius:999px;padding:.18rem .5rem;
}
.po-stock--success{color:var(--po-ok);background:color-mix(in srgb,var(--po-ok) 12%,transparent);border:1px solid color-mix(in srgb,var(--po-ok) 40%,transparent)}
.po-stock--warning{color:var(--po-warn);background:color-mix(in srgb,var(--po-warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--po-warn) 40%,transparent)}
.po-stock--out{color:var(--po-muted);background:var(--po-surface-2);border:1px solid var(--po-line-2)}

/* ---------- Seçim göstergesi ---------- */
.po-mark{
  flex-shrink:0;width:1.15rem;height:1.15rem;border-radius:.4rem;
  border:1.5px solid var(--po-line-2);background:var(--po-surface-2);
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s;
}
.po-opt:has(.po-input[type="radio"]) .po-mark{border-radius:50%}
.po-mark::after{content:"";opacity:0;transition:opacity .15s}
.po-opt:has(.po-input[type="checkbox"]) .po-mark::after{
  width:.3rem;height:.55rem;margin-top:-.12rem;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.po-opt:has(.po-input[type="radio"]) .po-mark::after{width:.42rem;height:.42rem;border-radius:50%;background:#fff}
.po-opt:has(.po-input:checked) .po-mark{background:var(--po-accent);border-color:var(--po-accent)}
.po-opt:has(.po-input:checked) .po-mark::after{opacity:1}

/* ---------- "?" açıklaması ---------- */
.po-i{
  flex-shrink:0;width:1.05rem;height:1.05rem;border-radius:50%;
  border:1px solid var(--po-line-2);background:transparent;color:var(--po-muted);
  font-size:.62rem;font-weight:800;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s;
}
.po-i:hover,.po-i[aria-expanded="true"]{color:var(--po-accent);border-color:var(--po-accent)}
.po-tip{
  display:block;margin-top:.45rem;padding:.55rem .65rem;
  background:var(--po-surface-2);border:1px solid var(--po-line);border-radius:10px;
  font-size:.76rem;line-height:1.5;color:var(--po-muted);font-weight:400;
}
.po-tip[hidden]{display:none}
.po-g-head .po-tip{margin-top:.5rem}

/* ---------- Alt seçenekler ---------- */
.po-children{
  margin-top:.5rem;padding:.7rem .75rem;border:1px dashed var(--po-line-2);
  border-radius:var(--po-r);background:var(--po-surface-2);
  display:flex;flex-direction:column;gap:.5rem;
}
.po-children[hidden]{display:none}
.po-children-head{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.po-children-title{font-size:.8rem;font-weight:700;color:var(--po-text)}

/* ---------- Daha fazla göster ---------- */
.po-more{
  align-self:flex-start;font-size:.78rem;font-weight:700;color:var(--po-muted);
  background:none;border:0;padding:.3rem .1rem;cursor:pointer;transition:color .15s;
}
.po-more:hover{color:var(--po-text)}

/* ---------- Uyarı ---------- */
.po-error{
  margin-top:.4rem;font-size:.78rem;font-weight:600;color:var(--po-accent);
  display:flex;align-items:center;gap:.35rem;
}
.po-g.po-invalid .po-g-head{border-left-color:var(--po-accent)}

@media (max-width:420px){
  .po-list{grid-template-columns:1fr}
  .po-opt{padding:.7rem .75rem}
}