/* ═══════════════════════════════════════════════════════════════
   whitemodz — MAĞAZA IV  (shop.html + /category/<slug>; wm-site4.css'ten sonra)

   Hero: sol başlık + tek cümle, sağda gerçek çok satanlar destesi;
   kategori açıkken deste yerini oyunun büyük kapak kartına bırakır
   (#shopArt görünür olunca :has ile). Altında kapak küçük resimli oyun
   sekmeleri, yapışkan cam araç çubuğu, çift çerçeveli filtre paneli,
   ızgara. wm-catalog.css'in iskeleti ve bütün id'ler aynen durur.
   ═══════════════════════════════════════════════════════════════ */

:root{ --sh4-top: 65px; }   /* yapışkan araç çubuğu: navigasyonun hemen altı */

/* ═══ 1 · Hero ══════════════════════════════════════════════════ */
.sh4-hero{ padding-bottom: clamp(30px, 3.6vw, 48px); }
.sh4-hero::after{ display: none; }   /* ayırıcıyı sekme bandı taşır */
.sh4-hero .wm-crumb{
  max-width: none; margin: 0 0 18px; padding: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--wm-g-dim);
}
.sh4-hero .wm-crumb span:last-child{ color: var(--wm-w); }
.sh4-hero #shopTitle{ text-transform: none; }
.sh4-hero .s4-hero__lead{ max-width: 54ch; }
.sh4-visual{ display: grid; place-items: center; min-height: 250px; }
.sh4-visual .s4-deck{ width: min(100%, 400px); }
/* Kategori görünümü: oyunun kapağı büyük, imleçle eğilen kart */
.sh4-art{
  flex: none; width: min(100%, 300px); height: auto; aspect-ratio: 1; padding: 6px; overflow: visible;
  border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,0);
  transform: perspective(1200px) rotateX(calc(3deg - var(--py, 0) * 4deg)) rotateY(calc(-8deg + var(--px, 0) * 8deg));
  transition: transform 700ms var(--wm-ease-out);
  animation: s4-in 800ms var(--wm-ease-out) both;
}
.sh4-art img{ width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
.sh4-art .glyph-ph{ width: 48px; height: 48px; }
.sh4-visual:has(#shopArt:not([hidden])) .s4-deck{ display: none; }

/* ═══ 2 · Oyun sekmeleri ═════════════════════════════════════════ */
.sh4-cats{ border-block: 1px solid var(--wm-line); background: linear-gradient(var(--wm-k-band), var(--wm-k)); }
.sh4-tabs.wm-chead__cats{ flex: none; margin: 0; padding: 12px 2px 12px; gap: 6px; }
.sh4-tabs a.s4-tab{
  height: auto; padding: 11px 8px 12px; min-width: 92px;
  background: transparent; border: 1px solid transparent; border-radius: 16px;
  color: var(--wm-g); font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.sh4-tabs a.s4-tab:hover{ color: var(--wm-w); border-color: transparent; background: rgba(255,255,255,.03); }
.sh4-tabs a.s4-tab[aria-current="true"]{ color: var(--wm-w); background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.sh4-tabs a.s4-tab[aria-current="true"] img, .sh4-tabs a.s4-tab[aria-current="true"] .s4-tab__all{
  transform: translateY(-3px) scale(1.06); border-color: transparent;
  box-shadow: 0 0 0 2px var(--wm-k), 0 0 0 4px var(--wm-y), 0 14px 30px rgba(255,199,0,.25);
}
.sh4-tabs .s4-tab__all{ font-style: normal; }
/* Taşan satırın kenarı erir: yana kaydığı belli olur */
.sh4-tabs{
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
@media (min-width: 1100px){ .sh4-tabs{ -webkit-mask-image: none; mask-image: none; justify-content: flex-start; } }

/* ═══ 3 · Öne çıkan kampanya (yalnız gerçek indirim varken) ═════ */
.sh4-promo-wrap{ padding-top: 18px; }
.sh4-promo-wrap:has(#shopPromo[hidden]){ display: none; }
.sh4-promo.wm-promo{
  width: 100%; margin: 0; padding: 6px; gap: 0; border-radius: 22px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), var(--wm-e2);
  transition: border-color var(--wm-dur-2) var(--wm-ease-out), transform var(--wm-dur-2) var(--wm-ease-spring);
}
.sh4-promo.wm-promo:hover{ border-color: var(--wm-y-line); transform: translateY(-2px); }
.sh4-promo .wm-promo__tag{
  align-self: center; height: 32px; margin: 0 14px 0 10px; padding: 0 14px; border-radius: var(--wm-r-pill);
  font-size: 10.5px; letter-spacing: .1em;
}
.sh4-promo .wm-promo__shot{ width: 76px; height: 76px; border: 0; border-radius: 16px; }
.sh4-promo .wm-promo__name{
  font-weight: 800; font-variation-settings: "wdth" 106, "wght" 800; font-size: 20px; letter-spacing: -.014em; text-transform: none;
}
.sh4-promo .wm-promo__game{ text-transform: none; letter-spacing: .02em; font-size: 12px; font-weight: 700; }
.sh4-promo .wm-promo__price b{ font-weight: 800; font-variation-settings: "wdth" 108, "wght" 800; letter-spacing: -.02em; }
.sh4-promo .wm-promo__cta{
  align-self: center; height: 44px; margin-right: 4px; padding: 0 18px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--wm-r-pill);
  background: rgba(255,255,255,.05); color: var(--wm-w); font-size: 13px; letter-spacing: .01em; text-transform: none;
}
.sh4-promo:hover .wm-promo__cta{ border-color: var(--wm-y-line); color: var(--wm-y); }

/* ═══ 4 · Yapışkan araç çubuğu ══════════════════════════════════ */
.sh4-bar.wm-fbar{
  position: sticky; top: var(--sh4-top); z-index: 30; margin-top: 18px;
  background: rgba(10,10,10,.96); border-block: 1px solid var(--wm-line);   /* DESIGN.md: buzlu cam yok */
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.8);
}
.sh4-bar .wm-fbar__in{ padding-block: 10px; gap: 8px; }
.sh4-bar .wm-fbar__search{
  height: 46px; padding: 0 16px; flex: 1 1 280px; border-radius: var(--wm-r-pill);
  background: var(--wm-k-sink); border-color: var(--wm-line-2); box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.sh4-bar .wm-fbar__search svg{ width: 16px; height: 16px; }
.sh4-bar .wm-fbar__search input{ font-size: 14px; font-weight: 600; }
.sh4-bar .wm-fbar__search:focus-within{ border-color: var(--wm-y); box-shadow: inset 0 1px 2px rgba(0,0,0,.35), var(--wm-ring); }
.sh4-bar .wm-fbar__cell{
  height: 46px; padding: 0 16px; border-radius: var(--wm-r-pill);
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--wm-g); font-size: 13px; font-weight: 700; letter-spacing: .005em; text-transform: none;
  transition: background var(--wm-dur-2) var(--wm-ease-out), color var(--wm-dur-2) var(--wm-ease-out), border-color var(--wm-dur-2) var(--wm-ease-out);
}
.sh4-bar .wm-fbar__cell:hover{ color: var(--wm-w); border-color: rgba(255,255,255,.24); }
.sh4-bar .wm-fbar__cell[aria-pressed="true"]{ background: var(--wm-y-soft); color: var(--wm-y); border-color: var(--wm-y-line-2); }
.sh4-bar select{ height: 44px; font-size: 13px; font-weight: 700; letter-spacing: .005em; text-transform: none; }
.sh4-bar .wm-fbar__count{ background: none; border-color: transparent; box-shadow: none; color: var(--wm-g); font-weight: 700; }
.sh4-bar .wm-fbar__count b{ font-weight: 800; font-variation-settings: "wdth" 108, "wght" 800; font-size: 18px; margin-right: 2px; }
.sh4-bar .wm-fbar__cell--filters[aria-expanded="true"]{ color: var(--wm-w); border-color: var(--wm-y-line); }

/* ═══ 5 · Filtre paneli ═════════════════════════════════════════ */
#shopRail.wm-rail-side{ top: calc(var(--sh4-top) + 82px); max-height: calc(100vh - var(--sh4-top) - 100px); }
#shopRail .wm-rail-side__grp{
  padding: 14px 12px 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 42%), var(--wm-k-raise);
  border-color: rgba(255,255,255,.075); box-shadow: var(--s4-core-top), 0 0 0 1px rgba(0,0,0,.5);
}
#shopRail h4{ margin: 0 4px 8px; color: var(--wm-g-dim); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; }
#shopRail .wm-rail-side__grp button{ padding: 9px 10px; border-radius: 10px; font-size: 13.5px; }
#shopRail .wm-rail-side__grp button span{ font-size: 11.5px; font-variant-numeric: tabular-nums; }
#shopRail .wm-rail__clear{
  padding: 0; height: 46px; border-radius: var(--wm-r-pill); font-size: 13px; letter-spacing: .005em; text-transform: none; font-weight: 700;
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14);
}

/* ═══ 6 · Izgara ve kartlar ═════════════════════════════════════ */
.sh4-bar + .wm-cwrap .wm-cbody{ padding-top: 28px; padding-bottom: clamp(56px, 7vw, 96px); }
#shopGrid.wm-cards{ gap: 30px var(--wm-gap); }
#shopGrid .wm-pc__media{
  border-radius: 18px; border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.45), var(--wm-e2);
  transition: border-color var(--wm-dur-2) var(--wm-ease-out), box-shadow var(--wm-dur-2) var(--wm-ease-out), transform var(--wm-dur-2) var(--wm-ease-spring);
}
#shopGrid .wm-pc:hover .wm-pc__media{ transform: translateY(-4px); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.45), var(--wm-e3); }
#shopGrid .wm-pc__media img{ transition: transform 700ms var(--wm-ease-out); }
#shopGrid .wm-pc__name{ transition: color var(--wm-dur-1) var(--wm-ease-out); }
#shopGrid .wm-pc:hover .wm-pc__name{ color: var(--wm-y); }
#shopGrid .wm-pc__cat{ text-transform: none; letter-spacing: .01em; font-size: 12px; font-weight: 700; }
#shopGrid .wm-pc__price{ font-weight: 800; font-variation-settings: "wdth" 106, "wght" 800; font-size: 16px; }
/* Sunucunun tarayıcılar için bastığı düz linkler (routes/seo.js): istemci
   ızgarayı çizene kadar görünmez ama okunabilir kalır. */
#shopGrid > .ssr-item{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Boş durum: açıklama + çıkış yolu */
.sh4-empty.wm-empty{ background: none; border: 1px dashed var(--wm-line-2); border-radius: 24px; padding: clamp(44px, 6vw, 72px) 24px; }
.sh4-empty h3{ font-weight: 800; font-variation-settings: "wdth" 108, "wght" 800; font-size: 24px; letter-spacing: -.02em; text-transform: none; }
.sh4-empty p{ margin: 0 auto; max-width: 46ch; }
.sh4-empty .s4-ghost{ margin-top: 18px; height: 48px; }

/* ═══ 7 · Duyarlı ═══════════════════════════════════════════════ */
@media (max-width: 980px){
  .sh4-visual{ min-height: 0; }
  .sh4-visual .s4-deck{ width: min(100%, 360px); }
  .sh4-art{ width: min(100%, 240px); }
}
@media (max-width: 940px){
  #shopRail.wm-rail-side{
    top: auto; max-height: 82vh; z-index: 1000; padding: 18px var(--wm-gut) 26px;
    border-radius: 24px 24px 0 0; border-top: 1px solid var(--wm-y-line);
  }
  #shopRail.wm-rail-side[data-open="1"]{ box-shadow: 0 0 0 100vmax rgba(0,0,0,.6); }
  #shopRail .wm-rail__close{ height: 50px; padding: 0; border-radius: var(--wm-r-pill); font-size: 14px; letter-spacing: .005em; text-transform: none; font-weight: 800; }
}
@media (max-width: 760px){
  .sh4-hero .s4-hero__visual{ display: none; }   /* telefonda ürünler başlığın hemen altında */
  .sh4-hero:has(#shopArt:not([hidden])) .s4-hero__visual{ display: grid; }
  .sh4-hero:has(#shopArt:not([hidden])) .s4-deck{ display: none; }
  .sh4-art{ width: 150px; }
  .sh4-bar.wm-fbar{ position: static; box-shadow: none; }   /* iki satırlık çubuk telefonda ekranı yemesin */
  .sh4-bar .wm-fbar__in{ padding-block: 8px; }
  .sh4-bar .wm-fbar__search{ flex: 1 1 100%; height: 44px; }
  .sh4-bar .wm-fbar__cell{ height: 40px; padding: 0 13px; font-size: 12.5px; }
  .sh4-promo .wm-promo__tag{ margin: 8px 10px 0; }
  .sh4-promo .wm-promo__cta{ margin: 6px; justify-content: center; }
}

/* ═══ 8 · Hareket hassasiyeti ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .sh4-art{ transform: none; transition: none; animation: none; }
  #shopGrid .wm-pc__media, .sh4-promo.wm-promo{ transition: none; }
  #shopGrid .wm-pc:hover .wm-pc__media, .sh4-promo.wm-promo:hover{ transform: none; }
}

/* ═══ 9 · Kategori merkezi (routes/seo.js · db/categoryCopy.js) ═══
   Ürünlerin altında: giriş metni + SSS yan yana, altında 2+ ürünlü oyunlarda
   karşılaştırma tablosu. Yalnızca /category/<slug> sayfasında dolu gelir. */
.sh4-hub__grid{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.sh4-hub__links{ display: flex; flex-wrap: wrap; gap: 8px 22px; }
.sh4-hub__faq h3, .sh4-hub__cmp h3{
  margin: 0 0 14px; color: var(--wm-w); font-size: 18px; font-weight: 800; line-height: 1.3; text-transform: none;
}
.sh4-faq{ border-top: 1px solid var(--wm-line); }
.sh4-faq:last-child{ border-bottom: 1px solid var(--wm-line); }
.sh4-faq summary{
  position: relative; list-style: none; cursor: pointer; padding: 15px 34px 15px 0;
  color: var(--wm-w); font-size: 15px; font-weight: 700; line-height: 1.45;
}
.sh4-faq summary::-webkit-details-marker{ display: none; }
.sh4-faq summary::after{
  content: "+"; position: absolute; right: 6px; top: 12px; color: var(--wm-y); font-size: 21px; font-weight: 600; line-height: 1;
  transition: transform var(--wm-dur-2) var(--wm-ease-out);
}
.sh4-faq[open] summary::after{ transform: rotate(45deg); }
.sh4-faq summary:hover{ color: var(--wm-y); }
.sh4-faq summary:focus-visible{ outline: 2px solid var(--wm-y); outline-offset: 3px; border-radius: 6px; }
.sh4-faq p{ margin: 0 0 16px; color: rgba(247,247,249,.78); font-size: 14.5px; line-height: 1.7; }
.sh4-hub__cmp{ margin-top: clamp(36px, 4vw, 56px); }
.sh4-hub__scroll{ overflow-x: auto; border: 1px solid var(--wm-line); border-radius: 16px; background: rgba(255,255,255,.015); }
.sh4-cmp{ width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.sh4-cmp th, .sh4-cmp td{ padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--wm-line); white-space: nowrap; color: var(--wm-g); }
.sh4-cmp thead th{ color: var(--wm-g-dim); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sh4-cmp tbody tr:last-child th, .sh4-cmp tbody tr:last-child td{ border-bottom: 0; }
.sh4-cmp tbody th{ color: var(--wm-w); font-weight: 700; }
.sh4-cmp a{ color: inherit; text-decoration: none; transition: color var(--wm-dur-2) var(--wm-ease-out); }
.sh4-cmp tbody th a{ color: var(--wm-w); }
.sh4-cmp a:hover{ color: var(--wm-y); }
.sh4-cmp td a{ color: var(--wm-y); }
.sh4-cmp__price{ color: var(--wm-w) !important; font-weight: 800; }
.sh4-hub__note{ margin: 12px 0 0; color: var(--wm-g-dim); font-size: 13px; line-height: 1.6; }
@media (max-width: 900px){
  .sh4-hub__grid{ grid-template-columns: 1fr; }
}
/* Telefonda tablo yana kaydırılmıyor: fiyat ekranın dışında kalıyordu. Her
   ürün iki satırlık bir kayda dönüşür — ad + fiyat, altında geliştirici ·
   aktivasyon + rehber. Sütun başlıkları ekran okuyucular için yerinde kalır. */
@media (max-width: 640px){
  .sh4-hub__scroll{ overflow: visible; }
  .sh4-cmp, .sh4-cmp tbody{ display: block; min-width: 0; }
  .sh4-cmp thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sh4-cmp tbody tr{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 8px; padding: 14px 16px; border-bottom: 1px solid var(--wm-line); }
  .sh4-cmp tbody tr:last-child{ border-bottom: 0; }
  .sh4-cmp tbody tr::after{ content: ""; order: 3; flex-basis: 100%; }   /* ad + fiyat satırını bitirir */
  .sh4-cmp tbody th, .sh4-cmp tbody td{ padding: 0; border: 0; white-space: normal; }
  .sh4-cmp tbody td:empty{ display: none; }
  .sh4-cmp tbody th{ order: 1; flex: 1 1 0; min-width: 0; font-size: 15px; }
  .sh4-cmp .sh4-cmp__price{ order: 2; font-size: 15px; }
  .sh4-cmp .sh4-cmp__dev, .sh4-cmp .sh4-cmp__how, .sh4-cmp .sh4-cmp__guide{ font-size: 13px; }
  .sh4-cmp .sh4-cmp__dev{ order: 4; }
  .sh4-cmp .sh4-cmp__how{ order: 5; }
  .sh4-cmp .sh4-cmp__dev:not(:empty) + .sh4-cmp__how::before{ content: "·"; margin-right: 8px; }
  .sh4-cmp .sh4-cmp__guide{ order: 6; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce){
  .sh4-faq summary::after, .sh4-cmp a{ transition: none; }
}