/* ==========================================================================
   Stok listesi — stok-listesi.php (v4: açık hero, yapışkan süzgeç çubuğu, gruplu tablo / mobilde kart).
   Yalnızca site.css tokenları. Ortak parçalar katalog.css'ten: .uh__crumbs (açık breadcrumb), .uq (adet stepper).
   skh: hero · skb: sekme + sepet çubuğu · skf: arama + durum · skm/skt/skg/skr: tablo · ske: boş sonuç · skc: alt CTA
   ========================================================================== */

.skl { --skb-h: 60px; }

/* ---------- 1 · hero ---------- */
.skh { background: var(--white); border-bottom: 1px solid var(--line); padding-block: clamp(18px, 2.5vw, 28px) clamp(30px, 4vw, 48px); }
.skh__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.skh__copy { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.skh__t { font: 800 clamp(2.2rem, 2.6vw + 1.2rem, 3.6rem)/1.04 var(--f-head); letter-spacing: -.025em; }
.skh__lead { max-width: 58ch; font-size: clamp(1.02rem, .3vw + .96rem, 1.12rem); color: var(--steel-600); }
.skh__steps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 2px 0 0; padding: 0; list-style: none; font-weight: 600; font-size: .9rem; color: var(--steel-800); }
.skh__steps li { display: inline-flex; align-items: center; gap: 9px; }
.skh__steps span {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bordo-50); border: 1.5px solid var(--bordo-100); color: var(--bordo); font: 800 .82rem/1 var(--f-head);
}

.skh__side { display: grid; gap: 12px; min-width: 0; }
.skh__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--bordo); border-radius: 6px; }
.skh__stats > div { padding: 16px 18px; min-width: 0; }
.skh__stats > div + div { border-left: 1px solid var(--line); }
.skh__stats dt { font: 700 .7rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.skh__stats dd { margin: 6px 0 0; font: 800 clamp(1.7rem, 1.2vw + 1.1rem, 2.3rem)/1 var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.skh__stats > div:nth-child(2) dd { color: var(--ok); }
.skh__note { display: flex; gap: 8px; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.skh__note .ic { flex: none; margin-top: 3px; color: var(--bordo); }

@media (max-width: 900px) {
  .skh__grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
}
@media (max-width: 480px) {
  .skh__stats > div { padding: 12px; }
  .skh__steps { gap: 8px 16px; font-size: .86rem; }
}

/* ---------- 2 · yapışkan sekme çubuğu ---------- */
.skb {
  position: sticky; top: var(--hdr-h); z-index: 30;
  background: color-mix(in srgb, var(--white) 96%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); transition: box-shadow .2s;
}
.skb.is-stuck { box-shadow: var(--shadow-1); }
.skb__in { display: flex; align-items: center; gap: 16px; min-height: var(--skb-h); }
.skb__nav { flex: 1 1 auto; min-width: 0; }
.skb__tabs { display: flex; gap: 6px; overflow-x: auto; padding-block: 9px; scrollbar-width: none; overscroll-behavior-x: contain; }
.skb__tabs::-webkit-scrollbar { display: none; }
.skb__tab {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--white);
  font: 600 .88rem/1 var(--f-head); color: var(--steel-800); white-space: nowrap;
  transition: border-color .15s, background-color .15s, color .15s;
}
.skb__tab:hover { border-color: var(--bordo); color: var(--bordo); }
.skb__tab:focus-visible { outline-offset: 2px; }
.skb__n {
  min-width: 24px; padding: 3px 7px; border-radius: 999px; text-align: center;
  background: var(--paper-2); font: 700 .74rem/1 var(--f-body); font-variant-numeric: tabular-nums; color: var(--steel-600);
}
.skb__tab[aria-current="true"] { background: var(--bordo); border-color: var(--bordo); color: var(--white); }
.skb__tab[aria-current="true"] .skb__n { background: color-mix(in srgb, var(--white) 22%, transparent); color: var(--white); }
.skb__tab.is-zero:not([aria-current="true"]) { color: var(--muted); }
.skb__tab.is-zero:not([aria-current="true"]) .skb__n { background: transparent; }

/* sepet: masaüstünde arama satırında (.skf__cart), mobilde sekme çubuğunda ikon (.skb__cart) */
.skb__cart { flex: none; position: relative; }
.skb__cart-ic { position: relative; display: inline-flex; }
.skb__cart-ic .hdr__cart-n { position: absolute; top: -9px; right: -11px; }
.skf__cart { flex: none; gap: 8px; font-variant-numeric: tabular-nums; }
.skf__cart-n { font-weight: 600; opacity: .85; }
@media (min-width: 901px) { .skb__cart { display: none; } }
@media (max-width: 900px) { .skf__cart { display: none; } }

/* ---------- 3 · arama + durum ---------- */
.skf { background: var(--paper); border-bottom: 1px solid var(--line); }
.skf__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-block: 12px; }
.skf__search { position: relative; flex: 1 1 280px; max-width: 460px; }
.skf__search-ic { position: absolute; left: 13px; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.skf__input { width: 100%; min-height: 44px; padding-left: 40px; background: var(--white); border-radius: var(--r-md); }

.skf__seg { display: inline-flex; flex: none; margin: 0; padding: 3px; border: 1.5px solid var(--line-2); border-radius: var(--r-lg); background: var(--white); }
.skf__opt { position: relative; display: inline-flex; cursor: pointer; }
.skf__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.skf__opt span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border-radius: var(--r-md);
  font-weight: 600; font-size: .86rem; color: var(--steel-800); white-space: nowrap; transition: background-color .15s, color .15s;
}
.skf__opt--stok span::before, .skf__opt--siparis span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.skf__opt--siparis span::before { background: #A84800; }
.skf__opt:hover span { color: var(--bordo); }
.skf__opt input:checked + span { background: var(--ink); color: var(--white); }
.skf__opt input:focus-visible + span { outline: 3px solid var(--bordo); outline-offset: 1px; }

.skf__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-left: auto; }
.skf__meta + .skf__cart { margin-left: 4px; }
.skf__count { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.skf__count strong { font: 800 1rem/1 var(--f-head); color: var(--ink); }
.skf__reset { font-weight: 700; font-size: .86rem; color: var(--bordo); text-decoration: underline; text-underline-offset: 3px; }
.skf__reset[hidden] { display: none; }
.js .skf__submit { display: none; }

/* masaüstü: arama satırı da sekme çubuğunun altında yapışık */
@media (min-width: 901px) {
  .skf { position: sticky; top: calc(var(--hdr-h) + var(--skb-h)); z-index: 29; }
}
@media (max-width: 900px) {
  .skl { --skb-h: 56px; }
  .skb__in { gap: 10px; padding-right: 0; }
  .skb__tabs { padding-right: 4px; }
  .skb__tab { min-height: 38px; padding: 7px 12px; font-size: .84rem; }
  .skb__cart { min-height: 38px; padding: 7px 11px; margin-right: var(--gutter); }
  .skf__search { flex: 1 1 100%; max-width: none; }
  .skf__seg { flex: 1 1 auto; }
  .skf__opt { flex: 1 1 auto; }
  .skf__opt span { width: 100%; justify-content: center; padding: 0 8px; }
  .skf__meta { margin-left: 0; width: 100%; justify-content: space-between; }
}
@media (max-width: 380px) {
  .skf__opt span { font-size: .8rem; padding: 0 6px; gap: 5px; }
}

/* ---------- 4 · gruplu tablo ---------- */
.skm { padding-block: clamp(24px, 3vw, 36px) clamp(56px, 7vw, 96px); scroll-margin-top: calc(var(--hdr-h) + var(--skb-h) + 70px); }
.skm__wrap { background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-1); overflow: hidden; }
.skt { width: 100%; border-collapse: collapse; font-size: .92rem; }
.skt thead th {
  padding: 13px 12px; text-align: left; vertical-align: bottom; background: var(--steel-900); color: var(--white);
  font: 700 .72rem/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.skt td, .skt tbody th { padding: 9px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.skg[hidden], .skr[hidden] { display: none; }

/* grup başlığı */
.skg__head th { padding: 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.skg + .skg .skg__head th { border-top: 1px solid var(--line-2); }
.skg__bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.skg__shape { display: inline-flex; width: 50px; height: 38px; flex: none; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); }
.skg__shape .shape { transform: scale(1.45); }
.skg__shape .sh-dim, .skg__shape .sh-txt { display: none; }
.skg__shape .sh-hole { fill: var(--white); }
.skg__name { font: 800 1.05rem/1.2 var(--f-head); color: var(--ink); letter-spacing: -.01em; }
.skg__meta { font-size: .82rem; font-weight: 500; color: var(--muted); }
.skg__link { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 700; font-size: .86rem; color: var(--bordo); white-space: nowrap; }
.skg__link:hover { text-decoration: underline; }
.skg__link .ic { transition: transform .15s var(--ease); }
.skg__link:hover .ic { transform: translateX(3px); }

/* satırlar */
.skr { transition: background-color .15s; }
.skr__size { font: 700 1.04rem/1.2 var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.skr__spec { color: var(--steel-800); font-variant-numeric: tabular-nums; }
.skr__code { font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.skr .stock-badge { border-radius: var(--r-md); }
.skr.is-added { background: color-mix(in srgb, var(--ok) 7%, var(--white)); }
.skr__ask { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; font-weight: 700; font-size: .86rem; color: var(--wa-700); }
.skr__ask:hover { text-decoration: underline; }

@media (min-width: 901px) {
  .skt tbody tr.skr:hover > * { background: var(--bordo-50); }
  .skr__size { width: 22%; }
  .skr__st { white-space: nowrap; }
  .skr__qty, .skr__add, .skr__wa { width: 1%; white-space: nowrap; }
  .skr__qty { padding-right: 4px; }
  .skr__add { padding-inline: 4px; }
  .skr__wa { padding-left: 4px; padding-right: 14px; }
  .skr__ask { width: 40px; border: 1.5px solid currentColor; border-radius: var(--r-md); }
  .skr__ask:hover { background: var(--wa); border-color: var(--wa); color: var(--white); text-decoration: none; }
  .skr__ask-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html:not(.js) .skr__ask { width: auto; padding-inline: 10px; }
  html:not(.js) .skr__ask-txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* dar masaüstü: "Sepete ekle" yalnızca ikon (ad aria-label'da) */
@media (min-width: 901px) and (max-width: 1100px) {
  .skr__btn { width: 40px; padding: 0; }
  .skr__btn [data-cart-add-txt] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* mobil: her satır bir kart (seçiciler .skt ile başlar: tablo display sıfırlamasını ezmek için) */
@media (max-width: 900px) {
  .skm__wrap { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .skt, .skt tbody, .skt tr, .skt th, .skt td { display: block; }
  .skt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .skt .skg { display: grid; gap: 10px; }
  .skt .skg[hidden], .skt .skr[hidden] { display: none; }
  .skt .skg + .skg { margin-top: 24px; }
  .skt .skg__head th, .skt .skg + .skg .skg__head th { padding: 0; background: transparent; border: 0; }
  .skg__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 12px; padding: 0 0 2px; }
  .skg__shape { grid-row: span 2; }
  .skg__name { grid-column: 2; font-size: 1.14rem; }
  .skg__meta { grid-column: 2; grid-row: 2; }
  .skg__link { grid-column: 3; grid-row: 1 / span 2; margin-left: 0; min-height: 44px; }

  .skt .skr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; padding: 14px;
    background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-1);
  }
  /* satır kırıcılar: [ölçü · durum] / [et · boy · cins] / [adet · sepete ekle · fiyat sor] */
  .skt .skr::before, .skt .skr::after { content: ""; flex: 0 0 100%; height: 0; }
  .skt .skr::before { order: 2; }
  .skt .skr::after { order: 4; }
  .skt .skr > * { padding: 0; border: 0; min-width: 0; }
  .skt .skr__size { order: 0; flex: 1 1 50%; font-size: 1.3rem; }
  .skt .skr__st { order: 1; flex: none; }
  .skt .skr__spec { order: 3; }
  .skt .skr__qty, .skt .skr__add, .skt .skr__wa { order: 5; }
  .skt .skr__spec {
    flex: 1 1 auto; display: grid; align-content: start; gap: 2px; padding: 6px 9px; background: var(--paper); border-radius: var(--r-md);
    font-size: .86rem; font-weight: 600; line-height: 1.3; overflow-wrap: break-word;
  }
  .skt .skr__spec::before { content: attr(data-label); font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .skt .skr__spec.is-empty { display: none; }
  .skt .skr__code { color: var(--steel-800); font-size: .86rem; }
  .skt .skr__qty { flex: none; }
  .skt .skr__add { flex: 1 1 auto; }
  .skr__btn { width: 100%; min-height: 44px; }
  .skr .uq__btn { width: 40px; }
  .skr .uq .cart-add__qty { min-height: 42px; width: 46px; }
  .skt .skr__wa { flex: none; }
  .skr__ask { width: 44px; min-height: 44px; border: 1.5px solid currentColor; border-radius: var(--r-md); }
  .skr__ask-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html:not(.js) .skt .skr__wa { flex: 1 1 100%; }
  html:not(.js) .skr__ask { width: 100%; }
  html:not(.js) .skr__ask-txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (max-width: 370px) {
  .skt .skr { padding: 12px; gap: 4px 6px; }
  .skr .uq__btn { width: 36px; }
  .skr .uq .cart-add__qty { width: 40px; }
  .skr__btn { padding-inline: 8px; gap: 6px; }
}

/* ---------- boş sonuç ---------- */
.ske {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 16px; padding: clamp(20px, 3vw, 28px);
  background: var(--white); border: 1.5px dashed var(--line-2); border-radius: 8px;
}
.ske[hidden] { display: none; }
.ske__ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--bordo-50); color: var(--bordo); }
.ske__txt { flex: 1 1 300px; display: grid; gap: 4px; }
.ske__t { font: 800 1.12rem/1.25 var(--f-head); color: var(--ink); }
.ske__txt p { color: var(--steel-600); font-size: .93rem; }
.ske__btns { display: flex; flex-wrap: wrap; gap: 10px; }
/* tablo tamamen boşken çerçevesini gizle */
.skm__wrap:has(.skg:not([hidden])) ~ .ske { margin-top: 16px; }
.skm__wrap:not(:has(.skg:not([hidden]))) { display: none; }

.skm__note { display: flex; gap: 8px; margin-top: 14px; font-size: .85rem; color: var(--muted); }
.skm__note .ic { flex: none; margin-top: 3px; color: var(--bordo); }

/* ---------- 5 · alt CTA ---------- */
.skc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px;
  margin-top: clamp(32px, 4vw, 48px); padding: clamp(20px, 3vw, 32px);
  background: var(--bordo-50); border: 1px solid var(--bordo-100); border-left: 4px solid var(--bordo); border-radius: 8px;
}
.skc__ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 60px; height: 60px; border-radius: var(--r-lg); background: var(--white); color: var(--bordo); }
.skc__txt { flex: 1 1 340px; display: grid; gap: 6px; }
.skc__txt p { color: var(--steel-600); }
.skc__btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 520px) { .skc__btns, .skc__btns .btn, .ske__btns, .ske__btns .btn { width: 100%; } }

.skm__noscript { margin-bottom: 32px; }

/* ---------- yazdırma: süzülmüş liste sade tablo olarak ---------- */
@media print {
  .skb, .skf, .ske, .skc, .skr__qty, .skr__add, .skr__wa, .skt thead th.cart-js-only, .skt thead th:last-child, .skh__steps { display: none !important; }
  .skh { padding: 0 0 8pt; border: 0; }
  .skh__grid { grid-template-columns: 1fr; }
  .skm { padding: 0; }
  .skm__wrap { box-shadow: none; border: 0; }
  .skt thead th { background: none; color: var(--ink); border-bottom: 1px solid var(--ink); }
  .skg__head th { background: none; }
  .skg__link { display: none; }
  .skr { break-inside: avoid; }
}