/* =====================================================================
   Keyzar — game.css · oyun / DLC ürün sayfası (v4)
   Kaynak: Claude Design "Keyzar ana sayfa" kanvası › Ürün sayfaları.
   Renk, yazı tipi ve ölçüler app.css'teki değişkenlerden gelir; bu dosya
   yalnız ürün sayfasının bileşenlerini (gp-*) tanımlar.
   ===================================================================== */

.gp { --gp-panel-w: 420px; position: relative; }
.gp [hidden] { display: none !important; }
.gp-wrap { max-width: var(--content-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.gp-section { padding-top: 56px; }
.gp-section--tight { padding-top: 20px; }
.gp-muted { font-size: 13px; color: #8D9BB9; }
.gp-muted strong { color: #FFFFFF; font-weight: 700; font-variant-numeric: tabular-nums; }
.gp-link { color: var(--green-300); font-weight: 600; text-decoration: none; }
.gp-link:hover { color: var(--green-200); text-decoration: underline; text-underline-offset: 3px; }
.is-good { color: var(--green-300) !important; }
.is-mixed { color: var(--amber-500) !important; }
.is-bad, .is-warn { color: var(--amber-500) !important; }
.is-blue { color: var(--blue-500) !important; }

.gp-h2 {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-stretch: 88%;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; color: #FFFFFF;
}
.gp-h2--md { font-size: 24px; letter-spacing: -0.01em; }
.gp-h2--sm { font-size: 22px; letter-spacing: -0.01em; }
.gp-sechead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.gp-more { font-weight: 600; font-size: 14px; color: var(--fg-2); text-decoration: none; }
.gp-more:hover { color: #FFFFFF; }

.gp-card { box-sizing: border-box; padding: 24px; border-radius: var(--radius-md); background: var(--bg-1); border: 1px solid rgba(120,160,255,0.12); }
.gp-cardhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.gp-cardhead > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.gp-cardhead--base { align-items: baseline; }

.gp-disc {
  display: inline-block; padding: 4px 6px; border-radius: 4px; background: var(--amber-500); color: var(--amber-ink);
  font-weight: 700; font-size: 13px; line-height: 1.1; font-variant-numeric: tabular-nums;
}

/* ── Üst bölüm ───────────────────────────────────────────────────────── */
.gp-top { position: relative; overflow: hidden; padding: 20px 0 8px; background: var(--hero-band); }
.gp-backdrop {
  position: absolute; left: -60px; top: -60px; width: calc(100% + 120px); height: 620px; max-width: none;
  object-fit: cover; filter: blur(64px) saturate(1.35); opacity: .24; pointer-events: none;
}
.gp-backdrop-fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,18,34,0) 0%, rgba(10,18,34,.3) 55%, var(--bg-0) 100%); }
.gp-top__inner { position: relative; display: flex; flex-direction: column; gap: 18px; }

.gp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); }
.gp-crumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gp-crumbs a { color: var(--fg-2); text-decoration: none; }
.gp-crumbs a:hover { color: #FFFFFF; }
.gp-crumbs svg { color: #5E6B88; flex: 0 0 auto; }
.gp-crumbs [aria-current] { color: var(--fg-1); }

.gp-hero { display: grid; grid-template-columns: minmax(0, 1fr) var(--gp-panel-w); gap: 24px; align-items: stretch; }

/* Galeri: sahne her ekranda 16:9 — anahtar görsel ve ekran görüntüleri bu oranda üretilir, kırpılmaz */
.gp-media { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.gp-stage {
  position: relative; flex: none; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-1);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
}
.gp-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gp-stage__empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-3); font-weight: 600; }
.gp-count { position: absolute; top: 12px; right: 12px; padding: 5px 9px; border-radius: 6px; background: rgba(8,16,32,.72);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg-0); }
.gp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(120,160,255,.24); background: rgba(8,16,32,.72); display: grid; place-items: center; color: var(--fg-0);
  opacity: 0; transition: opacity var(--dur-state) var(--ease-out);
}
.gp-stage:hover .gp-arrow, .gp-arrow:focus-visible { opacity: 1; }
.gp-arrow--prev { left: 12px; }
.gp-arrow--next { right: 12px; }
.gp-thumbs { flex: 0 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(88px, 1fr); gap: 8px; overflow-x: auto; scrollbar-width: none; }
.gp-thumbs::-webkit-scrollbar { display: none; }
.gp-thumb { padding: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-1);
  box-shadow: 0 0 0 1px rgba(120,160,255,.14); opacity: .65; transition: opacity var(--dur-micro); }
.gp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gp-thumb:hover { opacity: 1; }
.gp-thumb[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--green-500); }

/* Bilgi + fiyat paneli */
.gp-panel {
  min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 22px;
  border-radius: var(--radius-md); background: rgba(17,36,82,.92); border: 1px solid rgba(120,160,255,.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.gp-dlc { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--bg-2);
  border: 1px solid rgba(120,160,255,.14); font-size: 13px; text-decoration: none; color: var(--fg-2); min-width: 0; }
.gp-dlc__name { font-weight: 700; color: var(--fg-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-dlc svg { margin-left: auto; flex: 0 0 auto; }
.gp-dlc:hover { border-color: rgba(120,160,255,.3); }
.gp-head { display: flex; flex-direction: column; gap: 6px; }
.gp-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 36px; line-height: 1.02;
  letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance; overflow-wrap: anywhere; }
.gp-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 14px; color: var(--fg-2); }
.gp-facts { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.gp-facts li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; background: rgba(255,255,255,.04); }
.gp-facts span { color: var(--fg-2); }
.gp-facts strong { color: #FFFFFF; font-weight: 700; }
.gp-editions { display: flex; gap: 6px; }
.gp-editions a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 7px 10px; border-radius: 8px;
  border: 1px solid rgba(120,160,255,.18); text-decoration: none; transition: border-color var(--dur-micro); }
.gp-editions a:hover { border-color: rgba(120,160,255,.45); }
.gp-editions a.is-current { border-color: var(--green-500); background: rgba(34,224,122,.08); }
.gp-editions__name { font-weight: 700; font-size: 13px; color: var(--fg-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-editions__price { font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; }

.gp-buy { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(120,160,255,.14); }
.gp-buy--none p { font-size: 14px; color: var(--fg-1); }
.gp-buy__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: rgba(34,224,122,.12); color: var(--green-500); font-weight: 700; font-size: 13px; }
.gp-buy__all { font-size: 13px; font-weight: 600; color: var(--fg-2); text-decoration: none; }
.gp-buy__all:hover { color: #FFFFFF; }
.gp-buy__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.gp-buy__store { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gp-buy__store strong { font-size: 16px; color: var(--fg-0); }
.gp-buy__store span { font-size: 13px; color: var(--fg-2); }
.gp-buy__price { display: flex; align-items: center; gap: 10px; }
.gp-buy__price .gp-disc { font-size: 14px; padding: 5px 8px; }
.gp-buy__nums { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.gp-buy__nums s { font-size: 13px; color: #8D9BB9; font-variant-numeric: tabular-nums; }
.gp-buy__big { font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; color: #FFFFFF; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 8px;
  background: var(--green-500); color: var(--on-green); font-weight: 700; font-size: 16px; text-decoration: none;
  transition: background var(--dur-micro); }
.gp-cta:hover { background: var(--green-400); color: var(--on-green); }
.gp-cta--sm { height: 48px; padding: 0 18px; font-size: 15px; margin-left: auto; flex: 0 0 auto; }
.gp-buy__note { font-size: 13px; color: var(--fg-2); text-wrap: pretty; }
.gp-buy__note strong { color: var(--fg-0); font-variant-numeric: tabular-nums; }
/* Ücretsiz oyun: "Steam'de başlat" (steam://run) yalnız fareli cihazda gösterilir (Steam istemcisi masaüstünde);
   dokunmatik ekranda steam:// çalışmaz, orada mağaza sayfası düğmesi kalır. Ekran genişliğine değil giriş türüne bakılır. */
.gp-free-run, .gp-free-alt { display: none; }
.gp-free-run svg { flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) {
  .gp-free-run { display: flex; }
  .gp-free-alt { display: block; }
  .gp-free-store { display: none; }
}

.gp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-tags a, .gp-tags span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(120,160,255,.18);
  background: rgba(17,36,82,.7); font-size: 13px; font-weight: 600; color: var(--fg-1); text-decoration: none; }
.gp-tags a:hover { border-color: rgba(120,160,255,.45); color: #FFFFFF; }

/* ── Teklifler ───────────────────────────────────────────────────────── */
.gp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 12px 0; margin-bottom: 12px;
  border-top: 1px solid rgba(120,160,255,.14); border-bottom: 1px solid rgba(120,160,255,.14); }
.gp-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gp-fgroup__label { font-size: 13px; font-weight: 600; color: var(--fg-2); margin-right: 2px; }
.gp-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(120,160,255,.22); font-size: 13px; font-weight: 600; color: var(--fg-1); }
.gp-chip span { font-size: 12px; color: #8D9BB9; font-variant-numeric: tabular-nums; }
.gp-chip:hover { border-color: rgba(120,160,255,.45); }
.gp-chip[aria-pressed="true"] { border-color: var(--cobalt-300); background: var(--cobalt-500); color: #FFFFFF; }
.gp-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--fg-2); }
.gp-sort select { height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(120,160,255,.22); background: var(--bg-1); color: var(--fg-0); font-size: 13px; }

.gp-list { display: flex; flex-direction: column; gap: 6px; }
.gp-offer {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto 168px; grid-template-areas: "store body price btn";
  align-items: center; gap: 12px 20px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--bg-1);
  box-shadow: 0 0 0 1px rgba(120,160,255,.10); text-decoration: none; color: inherit; transition: background var(--dur-micro);
}
.gp-offer:hover { background: var(--bg-2); color: inherit; }
.gp-offer.is-hero { background: rgba(34,224,122,.07); box-shadow: 0 0 0 1px rgba(34,224,122,.45); }
.gp-offer__store { grid-area: store; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gp-offer__store strong { font-size: 16px; color: #FFFFFF; }
.gp-offer__best { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--green-500); }
.gp-offer__body { grid-area: body; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Başlık: belirgin ve büyük; uzun başlık kesilmez, en fazla iki satıra sarar (telefonda üç) */
.gp-offer__title { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--fg-0); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.gp-offer__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gp-dlv, .gp-region { padding: 3px 8px; border-radius: 4px; font-size: 13px; font-weight: 700; }
.gp-dlv--key { background: rgba(91,184,255,.14); color: #9BD2FF; }
.gp-dlv--gift { background: rgba(183,148,255,.16); color: #CDB8FF; }
.gp-dlv--account { background: rgba(255,178,36,.14); color: #FFCB6B; }
.gp-dlv--topup { background: rgba(255,107,107,.14); color: #FFA3A3; }
.gp-dlv--store { background: rgba(255,255,255,.08); color: var(--fg-0); }
.gp-region { font-weight: 600; background: rgba(255,255,255,.05); color: var(--fg-1); }
.gp-offer__note { font-size: 13px; color: var(--fg-2); }
.gp-offer__price { grid-area: price; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.gp-offer__nums { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.gp-offer__big { font-size: 22px; font-weight: 700; color: #FFFFFF; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-offer__diff { font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.gp-btn { grid-area: btn; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 8px;
  border: 1px solid rgba(120,160,255,.26); font-weight: 700; font-size: 14px; color: var(--fg-0); }
.gp-btn--primary { background: var(--green-500); border-color: var(--green-500); color: var(--on-green); }
.gp-offer:hover .gp-btn:not(.gp-btn--primary) { border-color: rgba(120,160,255,.5); }

.gp-empty { padding: 28px; border-radius: var(--radius-md); background: var(--bg-1); text-align: center; color: var(--fg-2); }
.gp-empty button { color: var(--green-300); font-weight: 600; }
.gp-oos-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 10px 2px; font-size: 14px; font-weight: 600; color: var(--fg-2); }
.gp-oos-toggle svg { transition: transform var(--dur-state); }
.gp-oos-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.gp-oos { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.gp-oos li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 12px 16px;
  border-radius: var(--radius-md); background: rgba(17,36,82,.5); color: var(--fg-3); font-size: 14px; }
.gp-oos span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-oos em { font-style: normal; font-size: 13px; font-weight: 600; }

/* ── Grafik kartları ─────────────────────────────────────────────────── */
.gp-chartcard, #gp-players { display: flex; flex-direction: column; gap: 16px; }
.gp-tabsrow { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: var(--bg-band); }
.gp-tabs button { height: 34px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--fg-2); }
.gp-tabs button:hover { color: #FFFFFF; }
.gp-tabs button[aria-selected="true"] { background: var(--cobalt-500); color: #FFFFFF; }
.gp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; }
.gp-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 8px; background: var(--bg-band); min-width: 0; }
.gp-stat span { font-size: 12px; color: var(--fg-2); }
.gp-stat strong { font-size: 22px; font-weight: 700; color: var(--fg-0); font-variant-numeric: tabular-nums; }
.gp-stat em { font-style: normal; font-size: 12px; color: #8D9BB9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-stat--good { background: rgba(34,224,122,.08); }
.gp-stat--good strong { color: var(--green-500); }
.gp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--fg-1); min-height: 34px; }
.gp-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.gp-legend__line { width: 18px; height: 3px; border-radius: 2px; background: var(--green-500); }
.gp-legend__dash { width: 18px; border-top: 2px dashed #8D9BB9; }
.gp-legend__btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(120,160,255,.35); font-size: 13px; font-weight: 600; color: var(--fg-0); }
.gp-legend__btn[aria-pressed="false"] { border-color: rgba(120,160,255,.14); color: var(--fg-3); }
.gp-legend__btn[aria-pressed="false"] .gp-legend__dot { opacity: .3; }
.gp-legend__dot { width: 10px; height: 10px; border-radius: 999px; }
.gp-legend__btn em { font-style: normal; color: #8D9BB9; font-variant-numeric: tabular-nums; }
.gp-legend__hint { margin-left: auto; font-size: 12px; color: var(--fg-3); }
.gp-chart { position: relative; }
.gp-chart svg { width: 100%; height: auto; display: block; cursor: crosshair; touch-action: pan-y; font-family: var(--font-body); }
.gp-chart__empty { padding: 48px 0; text-align: center; color: var(--fg-3); font-size: 14px; }
.gp-verdict { padding: 12px 14px; border-radius: 8px; background: var(--bg-band); font-size: 14px; color: var(--fg-1); text-wrap: pretty; }
.gp-verdict:empty { display: none; }

/* Tablo görünümü (sunucuda yazılı; grafikle aynı veri, gün gün) */
.gp-table { display: flex; flex-direction: column; gap: 12px; }
.gp-table__note { font-size: 14px; line-height: 1.6; color: var(--fg-1); max-width: 80ch; text-wrap: pretty; }
.gp-table__scroll { max-height: 440px; overflow: auto; border-radius: 8px; background: var(--bg-band); overscroll-behavior: contain; }
.gp-table__scroll:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.gp-table table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.gp-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gp-table th, .gp-table td { padding: 9px 14px; text-align: right; white-space: nowrap; border-bottom: 1px solid rgba(120,160,255,.08); color: var(--fg-1); }
.gp-table th:first-child, .gp-table td:nth-child(3) { text-align: left; }
.gp-table--players td:nth-child(3) { text-align: right; }
.gp-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-2); font-size: 12px; font-weight: 700; color: var(--fg-2); }
.gp-table tbody th { font-weight: 500; color: var(--fg-2); }
.gp-table tbody tr:hover td, .gp-table tbody tr:hover th { background: rgba(120,160,255,.06); }
.gp-table .is-strong { font-weight: 700; color: var(--fg-0); }
.gp-table--price .is-down, .gp-table--players .is-up { color: var(--green-500); }
.gp-table--price .is-up, .gp-table--players .is-down { color: var(--amber-500); }
.gp-table__gap { font-size: 12px; color: var(--fg-3); }

.gp-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.gp-row--top { align-items: flex-start; }
.gp-row__main { flex: 999 1 600px; min-width: 0; }
.gp-row__side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.gp-inline-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.gp-inline-stats span { display: flex; flex-direction: column; }
.gp-inline-stats em { font-style: normal; font-size: 12px; color: var(--fg-2); }
.gp-inline-stats strong { font-size: 24px; font-weight: 700; color: var(--fg-0); font-variant-numeric: tabular-nums; }

.gp-hltb { display: flex; flex-direction: column; gap: 14px; }
.gp-hltb li { display: flex; flex-direction: column; gap: 6px; }
.gp-hltb__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--fg-1); }
.gp-hltb__row strong { color: #FFFFFF; font-variant-numeric: tabular-nums; }
.gp-hltb__bar { display: block; height: 8px; border-radius: 999px; background: var(--bg-band); overflow: hidden; }
.gp-hltb__fill { display: block; height: 100%; border-radius: 999px; }
.gp-hltb__fill--g { background: var(--green-500); }
.gp-hltb__fill--b { background: var(--blue-500); }
.gp-hltb__fill--p { background: #B794FF; }
.gp-hltb__foot { margin-top: auto; }

/* ── Hakkında, künye, gereksinimler ──────────────────────────────────── */
.gp-about { display: flex; flex-direction: column; gap: 14px; }
.gp-desc { position: relative; max-width: 72ch; font-size: 15px; line-height: 1.7; color: var(--fg-1); overflow: hidden; }
.gp-desc.is-collapsed { max-height: 180px; }
.gp-desc.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(180deg, rgba(10,18,34,0) 0%, var(--bg-0) 100%); }
.gp-desc p, .gp-desc ul { margin: 0 0 12px; }
.gp-desc ul { padding-left: 20px; list-style: disc; }
.gp-desc h1, .gp-desc h2, .gp-desc h3 { margin: 18px 0 8px; font-family: var(--font-display); font-size: 18px; color: #FFFFFF; }
.gp-desc img, .gp-desc video { max-width: 100%; height: auto; margin: 12px 0; border-radius: 6px; }
.gp-desc a { color: var(--green-300); }
.gp-ghost { align-self: flex-start; height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(120,160,255,.22); font-size: 14px; font-weight: 600; color: var(--fg-1); }
.gp-ghost:hover { border-color: rgba(120,160,255,.45); color: #FFFFFF; }
.gp-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; font-size: 14px; }
.gp-kv dt { color: var(--fg-2); }
.gp-kv dd { margin: 0; color: var(--fg-0); overflow-wrap: anywhere; }
.gp-kv--req { grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; }
.gp-sysreq-wrap { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.gp-sysreq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 16px; }
.gp-sysreq__col { padding: 18px 20px; }
.gp-sysreq__col.is-rec { border-color: rgba(34,224,122,.28); }
.gp-sysreq__label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--fg-2); }
.gp-sysreq__col.is-rec .gp-sysreq__label { color: var(--green-500); }
.gp-sysreq__text { font-size: 14px; color: var(--fg-1); line-height: 1.7; }

/* ── Kart rafları ────────────────────────────────────────────────────── */
.gp-dlcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.gp-dlccard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px;
  border-radius: var(--radius-md); background: var(--bg-1); text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease; }
.gp-dlccard img, .gp-dlccard .gp-ph { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.gp-dlccard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gp-dlccard__name { font-weight: 600; font-size: 15px; color: var(--fg-0); }
.gp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.gp-gcard { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-1);
  text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease; }
.gp-gcard img, .gp-gcard .gp-ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gp-gcard__body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.gp-gcard__name { font-weight: 600; font-size: 15px; color: var(--fg-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-gcard__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gp-gcard__price { display: flex; align-items: center; gap: 8px; }
.gp-gcard__price strong { font-size: 16px; font-weight: 700; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.gp-dlccard:hover, .gp-gcard:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(34,224,122,.55), 0 18px 36px -18px rgba(0,0,0,.9); color: inherit; }
.gp-ph { display: block; background: repeating-linear-gradient(135deg, var(--bg-1) 0 12px, #142A5C 12px 24px); }

/* ── Telefonda sabit satın alma çubuğu ───────────────────────────────── */
.gp-sticky { display: none; }

@media (max-width: 900px) {
  .gp-hero { grid-template-columns: minmax(0, 1fr); }
  .gp-arrow { opacity: 1; }
  .gp-offer { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "store price" "body body" "btn btn"; padding: 14px; }
  .gp-offer__title { -webkit-line-clamp: 3; line-clamp: 3; }
  .gp-oos li { grid-template-columns: minmax(0, 1fr) auto; }
  .gp-oos span { display: none; }
  .gp-legend__hint { display: none; }
  .gp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(8,16,32,.95);
    border-top: 1px solid rgba(120,160,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transform: translateY(110%); transition: transform var(--dur-entry) var(--ease-out);
  }
  .gp-sticky.is-on { transform: none; }
  .gp-sticky__info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .gp-sticky__info span { font-size: 12px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gp-sticky__info strong { font-size: 20px; color: #FFFFFF; font-variant-numeric: tabular-nums; }
}
@media (max-width: 640px) {
  .gp-section { padding-top: 40px; }
  .gp-title { font-size: 30px; }
  .gp-h2 { font-size: 24px; }
  .gp-panel { padding: 16px; }
  .gp-editions { overflow-x: auto; scrollbar-width: none; }
  .gp-editions a { flex: 0 0 auto; max-width: 70%; }
  .gp-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter); padding-right: var(--gutter); }
  .gp-fgroup { flex-wrap: nowrap; flex: 0 0 auto; }
  .gp-sort { margin-left: 0; flex: 0 0 auto; }
  .gp-card { padding: 16px; }
  .gp-dlcs, .gp-cards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 220px; overflow-x: auto; scrollbar-width: none;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; }
  .gp-dlccard { grid-template-columns: 1fr; }
  .gp-dlccard img, .gp-dlccard .gp-ph { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-gcard, .gp-dlccard, .gp-sticky, .gp-arrow { transition: none; }
}

/* ── Mağaza logoları (kutu yüksekliği; ölçek app.css .slogo) ── */
.gp-buy__store .slogo { --slogo-h: 38px; margin-bottom: 2px; }
.gp-offer__store .slogo { --slogo-h: 40px; }
.gp-oos .slogo { --slogo-h: 28px; }
.gp-legend__btn .slogo, .gp-legend__item .slogo { --slogo-h: 28px; width: auto; }
.gp-sticky__src { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gp-sticky__src .slogo { --slogo-h: 28px; width: auto; }
@media (max-width: 640px) {
  .gp-offer__store .slogo { --slogo-h: 34px; }
  .gp-buy__store .slogo { --slogo-h: 34px; }
}

/* ── Oyun içi para: markanın kart sayfasına bağlantı ve popüler tutarlar (kart sayfasındaki şeritle aynı dil) ── */
.gp-topups { display: flex; flex-direction: column; gap: 28px; }
.gp-topup .gp-sechead { margin-bottom: 12px; }
.gp-topup__link { display: inline-flex; align-items: center; gap: 6px; color: #FFFFFF; text-decoration: none; }
.gp-topup__link:hover { color: var(--green-300); }
.gp-topup__link svg { flex: none; transition: transform var(--dur-micro, .12s); }
.gp-topup__link:hover svg { transform: translateX(2px); }
.gp-topup__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.gp-topup__tiles a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--bg-1);
  border: 1px solid rgba(120,160,255,.18); text-decoration: none; color: inherit; transition: border-color var(--dur-micro, .12s); }
.gp-topup__tiles a:hover { border-color: rgba(120,160,255,.5); }
.gp-topup__tiles strong { font-size: 16px; font-weight: 800; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.gp-topup__tiles span { font-size: 13px; font-weight: 600; color: var(--fg-1); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .gp-topup__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .gp-topup__link svg { transition: none; }
}