/* ═══════════════════════════════════════════════════════════════
   whitemodz — REHBERLER IV  (guides.html: /guides ve /guide/<slug>; wm-site4.css'ten sonra)

   Liste: arama kutulu hero + en son güncellenen üç rehberin kapak destesi,
   oyun filtre satırı, oyunla başlayan kapak kartları. Detay: hero (başlık,
   özet, güncelleme ve oyun çipleri), solda yapışkan ürün kartı + "Bu
   sayfada" dizini (kaydırma takipli), sağda okuma genişliğinde metin,
   altta aynı oyunun diğer rehberleri. Ortak ilkeller wm-site4.css'te.
   ═══════════════════════════════════════════════════════════════ */

/* Sunucunun tarayıcılar için bastığı liste (routes/seo.js), JS'ten önce
   görünür: düzenli, küçük, sütunlu. guides.js yerini alınca kaybolur. */
#guidesRoot .ssr-guide-list{ columns: 3 240px; gap: 24px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13px; }
#guidesRoot .ssr-guide-list li{ break-inside: avoid; padding: 4px 0; }
#guidesRoot .ssr-guide-list a{ color: var(--wm-g); text-decoration: none; }
#guidesRoot .ssr-guide-list a:hover{ color: var(--wm-y); }
/* Liste kısa, yerine gelen kart listesi uzun: masaüstünde alttaki bölüm
   görünürken aşağı itiliyordu (lab CLS 0,36). Liste dururken kök en az bir
   ekran boyu yer tutar; alttaki bölüm baştan ekranın dışında başlar. */
#guidesRoot:has(.ssr-guide-list){ min-height: 100vh; }

/* ═══ 1 · Liste hero'su ═════════════════════════════════════════ */
.g4-hero .breadcrumbs span:last-child{ color: var(--wm-w); }
.g4-search{ margin-top: 26px; max-width: 520px; }
.g4-search input::-webkit-search-cancel-button{ -webkit-appearance: none; display: none; }
.g4-deck{ width: min(100%, 380px); }
.g4-deck .s4-deck__tag b{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

/* ═══ 2 · Oyun filtresi ═════════════════════════════════════════ */
.g4-bar{ border-block: 1px solid var(--wm-line); background: linear-gradient(var(--wm-k-band), var(--wm-k)); }
.g4-tabs{ padding-block: 12px; }
.g4-tabs .s4-tab{ font-family: var(--wm-body); }

/* ═══ 3 · Gruplar ve kartlar ════════════════════════════════════ */
.g4-list{ padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(56px, 7vw, 96px); }
.g4-guides.wm-guides{ max-width: none; }
.g4-group + .g4-group{ margin-top: clamp(40px, 5vw, 60px); }
.g4-group__head{ display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.g4-group__head h2{
  margin: 0; color: var(--wm-w); font-family: var(--wm-display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05;
  font-weight: 800; font-variation-settings: "wdth" 110, "wght" 800; letter-spacing: -.024em; text-transform: none;
}
.g4-count{ height: 28px; font-variant-numeric: tabular-nums; }
.g4-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.g4-card.wm-gcard{
  position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 12px 16px 12px 12px; border-radius: 20px; text-decoration: none; color: var(--wm-w);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 42%), var(--wm-k-raise);
  border: 1px solid rgba(255,255,255,.075); box-shadow: var(--s4-core-top), 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), box-shadow var(--wm-dur-2) var(--wm-ease-out);
}
.g4-card.wm-gcard:hover{ border-color: rgba(255,255,255,.16); transform: translateY(-3px); box-shadow: var(--s4-core-top), 0 0 0 1px rgba(0,0,0,.5), var(--wm-e3); }
.g4-card[hidden]{ display: none; }
.g4-card__art{ width: 88px; height: 88px; border-radius: 14px; overflow: hidden; border: 1px solid var(--wm-line-2); background: var(--wm-k-sink); display: grid; place-items: center; }
.g4-card__art img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--wm-ease-out); }
.g4-card:hover .g4-card__art img{ transform: scale(1.06); }
.g4-noart{ display: grid; place-items: center; width: 100%; height: 100%; color: var(--wm-y); background: var(--wm-y-soft); }
.g4-noart svg{ width: 24px; height: 24px; }
.g4-card__body{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.g4-card__game{
  align-self: flex-start; font-style: normal; color: var(--wm-y); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.g4-card__body b{
  font-family: var(--wm-display); font-size: 15.5px; line-height: 1.22; font-weight: 700; font-variation-settings: "wdth" 104, "wght" 700; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.g4-card__sum{ color: var(--wm-g); font-size: 12.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g4-card__go{
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--wm-g);
  border: 1px solid var(--wm-line-2); transition: background var(--wm-dur-2) var(--wm-ease-out), color var(--wm-dur-2) var(--wm-ease-out), transform var(--wm-dur-2) var(--wm-ease-out);
}
.g4-card__go svg{ width: 15px; height: 15px; }
.g4-card:hover .g4-card__go{ background: var(--wm-y); color: var(--wm-on-y); border-color: var(--wm-y); transform: translateX(2px); }
.g4-empty{ margin-top: 10px; }
.g4-empty svg{ width: 26px; height: 26px; color: var(--wm-g-dim); }
.g4-grid .g4-card{ animation: s4-up 520ms var(--wm-ease-out) both; }

/* ═══ 4 · Detay ═════════════════════════════════════════════════ */
.g4-dhero .s4-hero__copy{ max-width: 820px; }
.g4-meta{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.g4-chip{ text-decoration: none; color: var(--wm-w); transition: border-color var(--wm-dur-1) var(--wm-ease-out); }
.g4-chip:hover{ border-color: var(--wm-y-line); }
.g4-chip img{ width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.g4-dbody.section-tight{ padding-top: clamp(34px, 4vw, 56px); }
.g4-layout.wm-guide, .g4-layout.wm-guide--for{
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start;
}
.g4-layout .g4-side.wm-guide__aside{ grid-column: 1; grid-row: 1; position: sticky; top: 90px; display: flex; flex-direction: column; gap: 14px; }
.g4-layout .g4-article.wm-guide__main{ grid-column: 2; grid-row: 1; max-width: 76ch; }
.g4-prod.wm-guide__for{
  display: flex; flex-direction: column; padding: 6px; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--wm-w);
  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);
}
.g4-prod.wm-guide__for:hover{ border-color: var(--wm-y-line); transform: translateY(-3px); }
.g4-prod__shot.wm-guide__shot{ aspect-ratio: 1; border-radius: 17px; overflow: hidden; border: 0; }
.g4-prod__shot img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.g4-prod__body.wm-guide__for-body{ padding: 14px 10px 4px; }
.g4-prod__body .wm-guide__for-lab{ font-size: 10.5px; letter-spacing: .12em; }
.g4-prod__body b{ font-family: var(--wm-display); font-size: 18px; font-weight: 700; font-variation-settings: "wdth" 104, "wght" 700; letter-spacing: -.012em; text-transform: none; }
.g4-prod__go.s4-ghost{ margin: 12px 8px 8px; height: 48px; font-size: 13.5px; }
.g4-prod:hover .g4-prod__go .s4-ic{ background: var(--wm-y); color: var(--wm-on-y); transform: translateX(3px); }
.g4-toc.s4-toc{ position: static; }
.g4-toc[hidden]{ display: none; }
.g4-article .pd-rich-desc{ font-size: 15.5px; line-height: 1.78; color: rgba(247,247,249,.82); }
.g4-article .pd-rich-desc :is(h2, h3){ scroll-margin-top: 96px; }
.g4-article .pd-rich-desc h3{
  margin: 2em 0 .7em; color: var(--wm-w); font-family: var(--wm-display); font-size: 22px; line-height: 1.2;
  font-weight: 800; font-variation-settings: "wdth" 108, "wght" 800; letter-spacing: -.016em; text-transform: none;
}
.g4-article .pd-rich-desc > :first-child{ margin-top: 0; }
.g4-more{ padding-bottom: clamp(56px, 7vw, 96px); }
.g4-more .s4-head{ margin-bottom: 20px; }

/* ═══ 5 · Duyarlı ═══════════════════════════════════════════════ */
@media (max-width: 1180px){ .g4-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px){
  .g4-layout.wm-guide, .g4-layout.wm-guide--for{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .g4-layout .g4-side.wm-guide__aside{ grid-row: 1; position: static; }
  .g4-layout .g4-article.wm-guide__main{ grid-column: 1; grid-row: 2; }
  .g4-prod.wm-guide__for{ flex-direction: row; align-items: center; gap: 12px; padding: 8px; }
  .g4-prod__shot.wm-guide__shot{ width: 72px; flex: none; border-radius: 14px; }
  .g4-prod__body.wm-guide__for-body{ flex: 1; padding: 0; }
  .g4-prod__go.s4-ghost{ margin: 0; padding: 4px; width: 46px; height: 46px; justify-content: center; }
  .g4-prod__go.s4-ghost > span:first-child{ display: none; }
}
@media (max-width: 700px){
  .g4-grid{ grid-template-columns: minmax(0, 1fr); }
  .g4-card.wm-gcard{ grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; }
  .g4-card__art{ width: 72px; height: 72px; }
  .g4-hero .s4-hero__visual{ display: none; }
}

/* ═══ 6 · Hareket hassasiyeti ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .g4-grid .g4-card{ animation: none; }
  .g4-card.wm-gcard, .g4-prod.wm-guide__for{ transition: none; }
  .g4-card.wm-gcard:hover, .g4-prod.wm-guide__for:hover{ transform: none; }
}