/* Gamerhood Galeri · Çelik. Tek kaynak: DESIGN.md. Yazı tipleri sitenin kendi sunucusundan (OFL). */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(/design/fonts/archivo-latin-standard-normal.woff2) format('woff2-variations'), url(/design/fonts/archivo-latin-standard-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(/design/fonts/archivo-latin-ext-standard-normal.woff2) format('woff2-variations'), url(/design/fonts/archivo-latin-ext-standard-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(/design/fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2-variations'), url(/design/fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(/design/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations'), url(/design/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/design/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/design/fonts/jetbrains-mono-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/design/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/design/fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
  color-scheme: dark;
  --gh-bg: #0e1319;
  --gh-panel: #161d26;
  --gh-panel-2: #1e2732;
  --gh-line: #2d3a48;
  --gh-hair: #c8d4e055;
  --gh-fg: #eef2f6;
  --gh-fg-soft: #cdd6e0;
  --gh-muted: #9caab9;
  --gh-accent: #c9d5e2;
  --gh-accent-strong: #dbe4ee;
  --gh-fill: linear-gradient(135deg, #e3eaf2, #a9b9cb);
  --gh-on-accent: #0e1319;
  --gh-live: #6fd3a0;
  --gh-focus: #9cc0e2;
  --gh-ambient: radial-gradient(1000px 650px at 90% -10%, #5b7a9a40, transparent 60%), radial-gradient(900px 600px at 0% 80%, #33465a55, transparent 62%);
  --gh-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --gh-body: 'Schibsted Grotesk', 'Segoe UI', Arial, sans-serif;
  --gh-mono: 'JetBrains Mono', Consolas, monospace;
  --gutter: clamp(16px, 4vw, 64px);
  --gh-max: 1440px;
  --muted: var(--gh-muted);
  --line: var(--gh-line);
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--gh-bg);
  color:var(--gh-fg);
  font:16px/1.65 'Segoe UI',Arial,sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit
}
a,button,input,summary {
  touch-action:manipulation
}
button,summary {
  cursor:pointer
}
img,svg {
  display:block;
  max-width:100%
}
button {
  color:inherit
}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid var(--gh-accent);
  outline-offset:4px
}
[hidden] {
  display:none!important
}
[tabindex='-1']:focus {
  outline:none
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.skip {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:20;
  background:var(--gh-panel);
  padding:12px;
  border:2px solid var(--gh-accent)
}
.skip:focus {
  top:8px
}
.wrap {
  width:100%;
  max-width:1440px;
  padding-inline:var(--gutter);
  margin-inline:auto
}
.header-bg {
  border-bottom:1px solid var(--gh-line);
  background:var(--gh-panel)
}
.header {
  min-height:88px;
  display:flex;
  align-items:center;
  gap:clamp(22px,3vw,48px);
  padding-block:16px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:25px;
  line-height:1;
  font-weight:800;
  letter-spacing:-1px;
  white-space:nowrap;
  color:var(--gh-fg)
}
.brand svg {
  width:30px;
  height:32px;
  fill:currentColor
}
.header nav {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}
.header nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:14px;
  font-weight:600;
  color:var(--gh-muted);
  border-bottom:2px solid transparent
}
.header nav a:hover,.header nav a[aria-current] {
  color:var(--gh-accent);
  border-bottom-color:var(--gh-accent)
}
.search {
  display:flex;
  align-items:center;
  margin-left:auto;
  max-width:230px;
  min-width:140px;
  background:var(--gh-panel);
  border:1px solid var(--gh-line);
  border-radius:4px;
  padding:0 12px
}
.search input {
  min-width:0;
  width:100%;
  height:42px;
  background:transparent;
  border:0;
  color:var(--gh-fg);
  font-size:14px
}
.search input::placeholder {
  color:var(--gh-muted)
}
.search:focus-within {
  outline:2px solid var(--gh-accent)
}
.search input:focus-visible {
  outline:none
}
.search button {
  border:0;
  background:transparent;
  min-width:32px;
  min-height:38px;
  font-size:22px
}
.search input::-webkit-search-cancel-button {
  -webkit-appearance:none
}
.hero-backdrop {
  background:var(--gh-panel)
}
.hero {
  max-width:1600px;
  margin-inline:auto;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--gh-fg);
  background:var(--gh-panel);
  min-height:530px
}
.hero-art {
  position:absolute;
  inset:0 0 0 auto;
  width:75%;
  height:100%;
  object-fit:cover;
  object-position:80% 45%;
  z-index:-3
}
.hero:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,var(--gh-panel) 0%,var(--gh-panel) 24%,color-mix(in srgb, var(--gh-panel) 96%, transparent) 37%,color-mix(in srgb, var(--gh-panel) 76%, transparent) 48%,color-mix(in srgb, var(--gh-panel) 10%, transparent) 67%,transparent 83%)
}
.hero-inner {
  position:relative;
  padding-block:68px 76px
}
.edition {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.6px;
  color:var(--gh-accent);
  margin:0 0 25px
}
.hero h1, .hero .hero-title {
  font-size:clamp(36px,4.3vw,64px);
  font-weight:750;
  line-height:1.1;
  letter-spacing:-2.5px;
  margin:0 0 24px;
  max-width:720px;
  text-wrap:balance
}
.hero-copy {
  max-width:440px;
  font-size:16px;
  line-height:1.85;
  color:var(--gh-fg-soft);
  margin:0 0 28px
}
.actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}
.primary {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:46px;
  padding:10px 19px;
  background:var(--gh-accent);
  color:#fff;
  border:1px solid var(--gh-accent);
  border-radius:3px;
  font-size:14px;
  font-weight:600;
  transition:background .15s
}
.primary:hover {
  background:var(--gh-accent)
}
.secondary {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  border-bottom:1px solid var(--gh-line);
  font-size:14px;
  color:var(--gh-accent)
}
.hero-status {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  letter-spacing:1px;
  font-weight:650;
  color:var(--gh-muted);
  margin:24px 0 0
}
.hero-status span {
  width:6px;
  height:6px;
  background:var(--gh-accent);
  border-radius:50%;
  flex-shrink:0
}
.art-caption {
  position:absolute;
  bottom:16px;
  right:var(--gutter);
  max-width:calc(100% - 40px);
  font-size:10px;
  line-height:1.5;
  color:#fff;
  background:color-mix(in srgb, var(--gh-bg) 91%, transparent);
  padding:4px 8px;
  border-radius:3px
}
.strip {
  border-block:1px solid var(--gh-line);
  background:var(--gh-panel)
}
.strip-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:22px
}
.strip p {
  font-size:13px;
  color:var(--gh-muted);
  margin:0;
  max-width:800px
}
.strip b {
  font-size:11px;
  font-weight:700;
  color:var(--gh-fg-soft);
  display:block;
  margin-bottom:4px;
  letter-spacing:.5px
}
.strip a {
  font-size:13px;
  white-space:nowrap;
  color:var(--gh-accent);
  min-height:44px;
  display:inline-flex;
  align-items:center
}
.section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin:46px 0 24px
}
.section-head h2 {
  font-size:clamp(23px,2.1vw,29px);
  line-height:1.3;
  letter-spacing:-.7px;
  margin:0
}
.section-head p:not(.kicker) {
  margin:8px 0 0;
  font-size:14px;
  color:var(--gh-muted)
}
.kicker {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  color:var(--gh-accent);
  margin:0 0 9px
}
.count {
  font-size:10px;
  font-weight:600;
  letter-spacing:.7px;
  white-space:nowrap;
  color:var(--gh-muted)
}
.library {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:24px
}
.game-card {
  display:flex;
  align-items:center;
  gap:24px;
  padding:24px;
  border:1px solid var(--gh-line);
  border-radius:4px;
  background:var(--gh-panel);
  min-width:0
}
.cover {
  width:120px;
  height:158px;
  flex-shrink:0;
  position:relative;
  overflow:hidden;
  background:var(--gh-bg);
  display:flex;
  align-items:end;
  padding:12px;
  color:white
}
.cover img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:80% 50%;
  opacity:.6
}
.cover b {
  position:relative;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.6px
}
.game-copy {
  min-width:0
}
.game-copy h3 {
  font-size:25px;
  line-height:1.2;
  letter-spacing:-.7px;
  margin:0 0 12px
}
.game-copy>p:not(.kicker) {
  font-size:14px;
  line-height:1.7;
  color:var(--gh-muted);
  margin:0 0 8px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  font-size:14px;
  font-weight:600;
  color:var(--gh-accent)
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.card-meta {
  display:flex;
  flex-wrap:wrap;
  gap:6px 15px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
  font-size:11px;
  color:var(--gh-muted)
}
.card-meta li:first-child {
  color:var(--gh-fg-soft);
  background:var(--gh-panel-2);
  padding:2px 7px;
  border-radius:3px
}
.roadmap {
  display:flex;
  align-items:center;
  gap:24px;
  padding:26px;
  background:var(--gh-panel);
  border:1px solid var(--gh-line)
}
.index {
  font-size:40px;
  font-weight:300;
  letter-spacing:-2px;
  color:var(--gh-muted)
}
.roadmap h3 {
  font-size:22px;
  line-height:1.35;
  letter-spacing:-.6px;
  margin:0 0 12px
}
.roadmap p:not(.kicker) {
  font-size:14px;
  color:var(--gh-muted);
  margin:0
}
.empty {
  border:1px dashed var(--gh-line);
  padding:24px;
  margin:20px 0
}
.empty button {
  border:0;
  background:none;
  color:var(--gh-accent);
  min-height:44px;
  text-decoration:underline
}
.modes-section {
  margin-top:56px
}
.modes {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.mode {
  padding:24px;
  background:var(--gh-panel);
  border-top:2px solid var(--gh-line)
}
.mode h3 {
  font-size:18px;
  line-height:1.4;
  margin:0 0 10px
}
.mode p:not(.kicker) {
  font-size:14px;
  color:var(--gh-muted);
  margin:0
}
.guide {
  margin:42px 0 56px;
  border:1px solid var(--gh-line);
  border-radius:3px
}
.guide summary {
  padding:20px 24px;
  font-weight:600;
  font-size:16px
}
.guide-notes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  padding:0 24px 20px
}
.guide-notes h3 {
  font-size:16px;
  margin:0 0 8px
}
.guide-notes p {
  font-size:14px;
  color:var(--gh-muted);
  margin:0
}
.guide-links {
  display:flex;
  gap:12px 30px;
  flex-wrap:wrap;
  padding:0 24px 20px
}
.guide-links a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--gh-accent);
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:4px
}
.footer {
  border-top:1px solid var(--gh-line);
  padding-block:32px 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  color:var(--gh-muted)
}
.footer-brand {
  font-size:22px;
  font-weight:800;
  letter-spacing:-1px;
  color:var(--gh-fg)
}
.footer p {
  font-size:12px;
  margin:8px 0 0
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:4px 24px
}
.footer-links a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:13px
}
.footer-links a:hover {
  text-decoration:underline;
  color:var(--gh-accent)
}
.document-main {
  max-width:940px;
  margin:auto;
  padding:28px var(--gutter) 76px
}
.breadcrumbs ol {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  list-style:none;
  margin:0;
  padding:18px 0 26px;
  font-size:12px;
  color:var(--gh-muted)
}
.breadcrumbs li+li:before {
  content:'/';
  margin-right:10px;
  color:var(--gh-muted)
}
.breadcrumbs a {
  color:var(--gh-muted);
  text-decoration:none;
  display:inline-block;
  padding-block:5px
}
.breadcrumbs a:hover {
  text-decoration:underline
}
.document-main h1 {
  font-size:clamp(34px,4.5vw,50px);
  line-height:1.15;
  letter-spacing:-1.6px;
  margin:12px 0 26px;
  text-wrap:balance
}
.document-main h2 {
  font-size:25px;
  line-height:1.35;
  letter-spacing:-.5px;
  margin:38px 0 14px
}
.document-main p,.document-main li {
  color:var(--gh-muted);
  line-height:1.85
}
.document-main a:not(.primary) {
  color:var(--gh-accent);
  text-decoration:underline;
  text-underline-offset:4px
}
.document-main .primary {
  color:#fff;
  text-decoration:none
}
.document-eyebrow {
  font-size:11px!important;
  letter-spacing:1.5px;
  font-weight:650;
  color:var(--gh-accent)!important;
  margin-top:18px
}
.document-main .notice {
  background:var(--gh-panel);
  padding:20px 24px;
  border-left:3px solid var(--gh-accent);
  margin:28px 0
}
.notice p:last-child {
  margin-bottom:0
}
.document-main details {
  border:1px solid var(--gh-line);
  border-radius:4px;
  padding:18px 22px;
  margin:12px 0
}
.document-main summary {
  font-weight:650
}
.document-main .game-card {
  margin-top:30px
}
.document-main .game-card h3 {
  color:var(--gh-fg)
}
.document-main .game-card p,.document-main .card-meta li {
  font-size:14px
}
.contact-card {
  background:var(--gh-panel);
  border:1px solid var(--gh-line);
  padding:24px;
  margin:28px 0
}
.contact-card h2 {
  font-size:16px;
  margin:0 0 10px
}
.contact-card>a {
  font-size:clamp(18px,3vw,25px);
  font-weight:650;
  overflow-wrap:anywhere
}
.contact-card p {
  font-size:14px;
  margin-bottom:0
}
.milestones {
  padding-left:24px
}
.milestones li {
  padding-left:8px;
  margin-bottom:24px
}
.milestones strong {
  color:var(--gh-fg)
}
.milestones p {
  margin:6px 0
}
.detail-lead {
  font-size:28px;
  line-height:1.3;
  margin:0 0 20px;
  font-weight:600
}
.game-hero .hero-inner {
  padding-block:50px 62px
}
.game-hero .hero h1 {
  font-size:64px
}
.game-hero .secondary {
  margin-top:14px
}
.detail-columns {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:48px;
  padding-block:48px 40px
}
.detail-section {
  margin:0 0 36px;
  padding-bottom:32px;
  border-bottom:1px solid var(--gh-line)
}
.detail-section h2 {
  font-size:28px;
  line-height:1.3;
  letter-spacing:-.7px;
  margin:0 0 20px
}
.detail-section>p:not(.kicker) {
  color:var(--gh-muted);
  max-width:70ch;
  line-height:1.85
}
.detail-section a {
  color:var(--gh-accent);
  text-decoration:underline;
  text-underline-offset:4px
}
.detail-section .modes {
  gap:16px;
  margin-top:24px
}
.detail-section .mode {
  padding:18px
}
.detail-section .mode h3 {
  font-size:16px
}
.detail-info {
  align-self:start;
  background:var(--gh-panel);
  border:1px solid var(--gh-line);
  padding:24px
}
.detail-info h2 {
  font-size:22px;
  line-height:1.3;
  margin:0 0 18px
}
.detail-info dl {
  margin:0 0 20px
}
.detail-info dl>div {
  padding:12px 0;
  border-bottom:1px solid var(--gh-line)
}
.detail-info dt {
  font-size:12px;
  color:var(--gh-muted)
}
.detail-info dd {
  font-size:14px;
  font-weight:600;
  margin:4px 0 0
}
@media(min-width:1600px) {
  .hero:after {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,var(--gh-panel),transparent 6%,transparent 96%,var(--gh-panel));
    pointer-events:none
  }
}
@media(max-width:1100px) {
  .header {
    gap:24px;
    flex-wrap:wrap
  }
  .header nav {
    margin-left:auto
  }
  .search {
    flex-basis:100%;
    max-width:none;
    margin:0
  }
  .hero h1, .hero .hero-title {
    font-size:clamp(36px,5vw,56px)
  }
  .library {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }
  .game-card {
    gap:18px;
    padding:20px
  }
  .cover {
    width:90px
  }
  .roadmap {
    gap:18px;
    padding:22px
  }
  .index {
    display:none
  }
  .detail-columns {
    gap:28px;
    grid-template-columns:minmax(0,1fr) 250px
  }
  .detail-section .modes {
    grid-template-columns:1fr
  }
}
@media(max-width:760px) {
  .header {
    gap:12px;
    min-height:80px
  }
  .header nav {
    gap:18px
  }
  .header nav a {
    font-size:13px
  }
  .brand {
    font-size:23px
  }
  .brand svg {
    width:26px;
    height:29px
  }
  .hero-inner {
    padding-block:44px 60px
  }
  .hero {
    min-height:490px
  }
  .hero:before {
    background:linear-gradient(90deg,var(--gh-panel) 8%,color-mix(in srgb, var(--gh-panel) 93%, transparent) 41%,color-mix(in srgb, var(--gh-panel) 58%, transparent) 68%,color-mix(in srgb, var(--gh-panel) 10%, transparent))
  }
  .hero-art {
    width:100%
  }
  .hero h1, .hero .hero-title {
    font-size:43px;
    letter-spacing:-1.8px
  }
  .hero-copy {
    max-width:380px
  }
  .section-head {
    align-items:start;
    flex-wrap:wrap;
    gap:12px;
    margin-top:34px
  }
  .library,.modes {
    grid-template-columns:1fr
  }
  .roadmap {
    padding:24px
  }
  .index {
    display:block
  }
  .modes-section {
    margin-top:38px
  }
  .modes {
    gap:16px
  }
  .mode {
    padding:22px
  }
  .guide-notes {
    grid-template-columns:1fr;
    gap:22px
  }
  .footer {
    align-items:start;
    flex-direction:column;
    gap:16px
  }
  .footer-links {
    gap:4px 20px
  }
  .strip-inner {
    display:block;
    padding-block:18px
  }
  .strip a {
    margin-top:6px
  }
  .detail-columns {
    grid-template-columns:minmax(0,1fr);
    padding-top:30px
  }
  .detail-info {
    margin-bottom:24px
  }
  .detail-section .modes {
    grid-template-columns:1fr
  }
}
@media(max-width:520px) {
  .header nav {
    width:100%;
    margin:0;
    justify-content:space-between;
    gap:10px
  }
  .header nav a {
    font-size:13px;
    min-height:38px
  }
  .search {
    margin-top:2px
  }
  .hero {
    min-height:0
  }
  .hero-art {
    height:52%;
    top:auto;
    bottom:0;
    object-position:80% 45%
  }
  .hero:before {
    background:linear-gradient(180deg,var(--gh-panel) 0%,var(--gh-panel) 29%,color-mix(in srgb, var(--gh-panel) 95%, transparent) 51%,color-mix(in srgb, var(--gh-panel) 10%, transparent) 80%,transparent)
  }
  .hero-inner {
    padding-block:32px 180px
  }
  .edition {
    font-size:8px;
    letter-spacing:.9px;
    margin-bottom:22px
  }
  .hero h1, .hero .hero-title {
    font-size:clamp(34px,8.5vw,43px);
    letter-spacing:-1.5px
  }
  .hero-copy {
    font-size:15px;
    max-width:360px
  }
  .hero-status {
    font-size:9px;
    letter-spacing:.5px;
    max-width:290px
  }
  .actions {
    gap:12px 20px
  }
  .primary,.secondary {
    font-size:13px
  }
  .art-caption {
    font-size:9px;
    right:20px;
    bottom:12px
  }
  .cover {
    width:80px;
    height:150px
  }
  .game-card {
    padding:18px;
    gap:16px
  }
  .game-copy h3 {
    font-size:23px
  }
  .game-copy>p:not(.kicker) {
    font-size:13px
  }
  .card-meta {
    font-size:10px;
    gap:6px
  }
  .roadmap {
    gap:20px
  }
  .roadmap h3 {
    font-size:20px
  }
  .section-head h2 {
    font-size:24px
  }
  .section-head p:not(.kicker) {
    font-size:14px
  }
  .guide summary {
    padding:18px;
    font-size:15px
  }
  .guide-notes,.guide-links {
    padding-inline:18px
  }
  .document-main {
    padding-top:16px
  }
  .document-main h1 {
    font-size:34px
  }
  .document-main h2 {
    font-size:23px
  }
  .document-main p,.document-main li {
    font-size:15px
  }
  .document-main details {
    padding:16px
  }
  .document-main .notice {
    padding:18px
  }
  .contact-card {
    padding:20px
  }
  .game-hero .hero-inner {
    padding-block:32px 180px
  }
  .detail-section h2 {
    font-size:25px
  }
}
@media(max-width:350px) {
  .game-card {
    flex-direction:column;
    align-items:stretch
  }
  .cover {
    width:100%;
    height:140px
  }
  .cover img {
    object-position:80% 50%
  }
  .hero-status {
    font-size:8px
  }
  .edition {
    font-size:7.5px
  }
  .header nav {
    gap:8px
  }
  .header nav a {
    font-size:12px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}
.editorial-section { padding:0 0 64px; }
.editorial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.editorial-card { padding:30px 0 24px; border-top:2px solid var(--gh-line); min-width:0; }
.editorial-card h2,.editorial-card h3 { font-size:24px; line-height:1.25; margin:16px 0; letter-spacing:-.6px; }
.editorial-card h2 a,.editorial-card h3 a { color:inherit; text-decoration:none; }
.editorial-card h2 a:hover,.editorial-card h3 a:hover { text-decoration:underline; text-underline-offset:5px; }
.editorial-card p:not(.kicker) { color:var(--gh-muted); font-size:15px; line-height:1.7; }
.editorial-card .text-link { display:inline-block; margin-top:16px; }
.journal-main { padding-block:32px 72px; }
.journal-main h1 { font-size:clamp(34px,4.6vw,64px); line-height:1.06; letter-spacing:-2px; margin:28px 0; }
.article-lead { font-size:20px; line-height:1.6; max-width:720px; color:var(--gh-muted); }
.journal-main .editorial-grid { margin-block:48px; }
.journal-main .notice { background:var(--gh-panel-2); padding:28px; border-radius:8px; }
.article-main { max-width:850px; }
.article-main .article-meta { font-size:13px; color:var(--gh-muted); margin-block:24px 36px; }
.article-toc { padding:24px 28px; background:var(--gh-panel-2); border-left:3px solid var(--gh-line); margin-bottom:40px; }
.article-toc h2 { margin:0 0 12px; font-size:18px; }
.article-toc ol { padding-left:22px; margin-bottom:0; }
.article-main section[id] { scroll-margin-top:100px; }
.article-main section[id] p { line-height:1.85; }
.related-reading { border-top:1px solid var(--gh-line); margin-top:44px; padding-top:8px; }
.external-library { margin-top:56px; }
.article-source { margin:32px 0; padding:24px; background:var(--gh-panel-2); border-radius:6px; overflow-wrap:anywhere; }
.article-source h2 { margin-top:0; }
.news-cover { width:100%; height:auto; border-radius:6px; margin:24px 0; }
.site-results { list-style:none; padding:0; margin:24px 0; border-top:1px solid var(--gh-line); }
.site-results li { padding:16px 0; border-bottom:1px solid var(--gh-line); display:flex; gap:20px; align-items:baseline; }
.site-results span { font-size:12px; color:var(--gh-muted); min-width:90px; }
.site-results a { font-weight:650; color:var(--gh-fg-soft); }
.catalog-main,.hub-main { max-width:1320px; }
.discovery-section { padding-bottom:72px; }
.game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 26px; margin-block:28px 52px; }
.game-tile { min-width:0; border-bottom:1px solid var(--gh-line); padding-bottom:24px; }
.game-art { display:block; aspect-ratio:460/215; background:var(--gh-panel-2); overflow:hidden; border-radius:6px; }
.game-art img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.game-art:hover img { transform:scale(1.025); }
.game-art span { display:grid; height:100%; place-items:center; font-size:28px; font-weight:750; }
.game-tile-copy .kicker { font-size:10px; letter-spacing:.7px; margin:18px 0 10px; }
.game-tile h3 { font-size:22px; line-height:1.3; margin:0 0 10px; letter-spacing:-.5px; }
.document-main .game-tile h3 a { color:var(--gh-fg); text-decoration:none; }
.game-tile-copy p:not(.kicker) { font-size:14px; line-height:1.7; margin:10px 0 16px; }
.game-tile .text-link { font-size:13px; }
.catalog-jump,.hub-nav { display:flex; flex-wrap:wrap; gap:8px; padding:20px 0; border-block:1px solid var(--gh-line); margin-block:30px; }
.document-main .catalog-jump a,.document-main .hub-nav a { text-decoration:none; background:var(--gh-panel); border:1px solid var(--gh-line); border-radius:4px; padding:9px 13px; font-size:13px; }
.catalog-jump a:hover,.hub-nav a:hover { background:var(--gh-panel-2); }
.catalog-main .external-library { margin-top:36px; }
.catalog-main { padding-top:12px; }
.catalog-main .breadcrumbs ol { padding:12px 0 14px; }
.catalog-main .document-eyebrow { margin:8px 0; }
.catalog-main h1 { margin:8px 0 12px; }
.catalog-main .catalog-jump { margin-block:16px; padding-block:12px; }
.catalog-main section h2 { margin-top:24px; }
.catalog-main .game-grid { margin-top:20px; }
.catalog-search { max-width:620px; }
.catalog-search label { display:block; font-weight:600; font-size:13px; margin-bottom:8px; }
.catalog-search input { width:100%; border:1px solid var(--gh-line); background:var(--gh-panel); padding:12px 16px; border-radius:5px; }
.catalog-search p { font-size:12px; margin:8px 0; }
.own-games { border-top:1px solid var(--gh-line); padding-top:20px; }
.own-games .game-card { max-width:820px; }
.hub-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,460px); gap:50px; align-items:center; margin-bottom:36px; }
.hub-cover { width:100%; height:auto; border-radius:6px; }
.hub-main h1 { font-size:clamp(32px,4vw,56px); }
.hub-main .article-lead { font-size:18px; }
.article-meta,.hub-main .article-meta { font-size:12px; line-height:1.6; color:var(--gh-muted); }
.game-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; background:var(--gh-panel); padding:24px; margin:0; border-radius:6px; }
.game-facts dt { font-size:11px; color:var(--gh-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.game-facts dd { margin:0; font-size:14px; line-height:1.7; }
.hub-reading { max-width:800px; margin-inline:auto; }
.hub-reading>section { padding-top:8px; scroll-margin-top:24px; }
.game-scene { margin:24px 0; }
.game-scene img { width:100%; height:auto; border-radius:6px; }
.game-scene figcaption { font-size:12px; color:var(--gh-muted); padding-top:10px; }
.trailer { padding:24px; background:var(--gh-panel); border:1px solid var(--gh-line); border-radius:6px; }
.trailer-start { font:inherit; border:0; border-radius:4px; background:var(--gh-panel-2); color:#fff; padding:13px 20px; }
.trailer-start:disabled { opacity:.6; cursor:wait; }
.trailer video { display:block; width:100%; aspect-ratio:16/9; background:var(--gh-bg); margin-block:16px; }
.trailer>a { font-size:13px; }
.youtube-player iframe { display:block; width:100%; aspect-ratio:16/9; border:0; margin-block:16px; background:var(--gh-bg); }
.series-games { scroll-margin-top:24px; padding-block:8px 20px; border-bottom:1px solid var(--gh-line); }
.series-games h2 { font-size:clamp(24px,3vw,36px); }
.game-tile [hidden] { display:none; }
.video-status { font-size:13px; }
.video-status:empty { display:none; }
.requirements { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.requirements>div { background:var(--gh-panel); padding:22px; border-radius:4px; overflow-wrap:anywhere; }
.requirements h3 { margin:0 0 12px; font-size:16px; }
.requirements p { font-size:13px; white-space:normal; }
.forum-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; padding-left:20px; }
@media(max-width:1000px) {
  .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hub-intro { grid-template-columns:minmax(0,1fr) minmax(230px,35%); gap:26px; }
}
@media(max-width:650px) {
  .game-grid { grid-template-columns:1fr; gap:26px; }
  .hub-intro { grid-template-columns:1fr; gap:18px; }
  .hub-cover { max-width:460px; }
  .game-facts,.requirements,.forum-directory { grid-template-columns:1fr; }
  .game-facts { gap:18px; padding:20px; }
  .trailer { padding:16px; }
  .hub-nav { gap:6px; }
  .document-main .hub-nav a { font-size:12px; padding:8px 10px; }
  .discovery-section .section-head { align-items:flex-start; gap:16px; }
}
@media(max-width:800px) {
  .editorial-grid { grid-template-columns:1fr; gap:12px; }
  .editorial-card { padding-block:22px; }
  .editorial-card h2,.editorial-card h3 { font-size:23px; }
  .journal-main h1 { letter-spacing:-1px; }
  .article-toc { padding:20px; }
}

/* Published owner-managed browser games. */
.playable-games{margin-block:48px}.playable-games h2{margin:8px 0 24px;font-size:clamp(26px,3vw,36px)}.playable-grid{display:grid;gap:24px}.playable-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border:1px solid var(--line,var(--gh-line));border-radius:16px;background:var(--paper,var(--gh-panel));overflow:hidden}.playable-card>a{display:block;min-width:0;background:var(--gh-bg)}.playable-card img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}.playable-card>div{padding:clamp(22px,3vw,40px);min-width:0}.playable-card h3{font-size:clamp(23px,2.4vw,30px);margin:8px 0 16px}.playable-card p:not(.kicker){line-height:1.7;color:var(--muted,var(--gh-muted))}.playable-card .actions{flex-wrap:wrap;gap:20px;margin-top:24px}.playable-card .primary{font-size:14px}.playable-card .text-link{font-size:14px}@media(max-width:700px){.playable-card{grid-template-columns:1fr}.playable-games{margin-block:32px}}

/* Ana sayfa vitrini:CMS'teki Gamerhood oyunları 5 saniyede bir sağa doğru kayar. */
.hero-carousel { position:relative; max-width:1600px; margin-inline:auto; overflow:hidden; touch-action:pan-y }
.hero-track { display:flex; transition:transform .75s cubic-bezier(.22,.7,.2,1) }
.hero-track > .hero { flex:0 0 100%; max-width:none; margin:0 }
.hero-track.no-anim { transition:none }
.hero-controls { position:absolute; z-index:2; left:50%; bottom:16px; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:4px; background:color-mix(in srgb, var(--gh-panel) 85%, transparent); border:1px solid var(--gh-line); border-radius:999px }
.hero-controls button { display:grid; place-items:center; min-width:32px; min-height:32px; border:0; border-radius:999px; background:transparent; color:var(--gh-accent); font-size:16px; cursor:pointer }
.hero-controls button:hover { background:var(--gh-panel-2) }
.hero-controls button:focus-visible { outline:2px solid var(--gh-accent); outline-offset:1px }
.hero-dots { display:flex; gap:2px }
.hero-dots button { min-width:28px }
.hero-dots button::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--gh-panel-2); transition:width .2s, background .2s }
.hero-dots button[aria-current="true"]::before { width:22px; border-radius:4px; background:var(--gh-accent) }
@media(max-width:520px) { .hero-controls { bottom:10px } .hero-slide .art-caption { bottom:56px } }
@media(prefers-reduced-motion:reduce) { .hero-track { transition:none } }


/* ================= Galeri · Çelik katmanı ================= */
html { background: var(--gh-bg); }
body { background: var(--gh-ambient), var(--gh-bg); background-attachment: fixed; color: var(--gh-fg); font: 400 16px/1.65 var(--gh-body); -webkit-font-smoothing: antialiased; }
body .wrap { max-width: var(--gh-max); padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gh-focus); outline-offset: 3px; }
::selection { background: #c9d5e244; }
.skip { background: var(--gh-panel); color: var(--gh-fg); border: 1px solid var(--gh-accent); border-radius: 8px; }
.gh-caps, .document-main > h1, .document-main article > h1, .catalog-main h1, .journal-main h1, .hub-main h1, .game-hero h1, .section-head h2 { font-family: var(--gh-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; line-height: .92; }
.document-main > h1, .document-main article > h1, .catalog-main h1, .journal-main h1, .hub-main h1 { font-size: clamp(40px, 6vw, 84px); text-wrap: balance; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 60px); }
.kicker, .document-eyebrow, .edition, .article-meta, .count, .card-meta li, .breadcrumbs, .gh-label { font-family: var(--gh-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; color: var(--gh-muted); }
.breadcrumbs a { color: var(--gh-fg-soft); }
.breadcrumbs a:hover { color: var(--gh-fg); }
.document-main a:not([class]), .hub-main a:not([class]), .catalog-main p a:not([class]), .journal-main p a:not([class]) { color: var(--gh-accent-strong); text-decoration: underline; text-decoration-color: var(--gh-hair); text-underline-offset: 3px; }
.document-main a:not([class]):hover, .hub-main a:not([class]):hover { text-decoration-color: var(--gh-accent); }

/* başlık */
.header-bg { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--gh-bg) 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--gh-line); }
.header { min-height: 64px; padding-block: 10px; gap: clamp(14px, 2.4vw, 32px); }
.brand { font-family: var(--gh-display); font-weight: 800; font-stretch: 110%; font-size: 21px; letter-spacing: -.02em; color: var(--gh-fg); }
.brand svg { width: 24px; height: 26px; }
.header nav { gap: 4px; }
.header nav a { min-height: 38px; padding: 0 12px; border: 0; border-radius: 8px; font-weight: 600; color: var(--gh-muted); }
.header nav a:hover, .header nav a[aria-current] { color: var(--gh-fg); background: var(--gh-panel-2); border: 0; }
.search { background: var(--gh-panel); border: 1px solid var(--gh-line); border-radius: 999px; padding: 0 14px; }
.search input { color: var(--gh-fg); }
.search input::placeholder { color: var(--gh-muted); }
.search:focus-within { outline: 2px solid var(--gh-focus); outline-offset: 2px; }

/* düğmeler */
.primary, .gh-btn-accent { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--gh-fill); color: var(--gh-on-accent); font: 600 15px/1 var(--gh-body); transition: filter .15s, transform .15s; }
.primary:hover, .gh-btn-accent:hover { background: var(--gh-fill); filter: brightness(1.08); }
.primary:active, .gh-btn:active { transform: scale(.98); }
.secondary, .gh-btn-line { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid #ffffff4d; border-radius: 999px; color: var(--gh-fg); background: #0e131959; font: 600 15px/1 var(--gh-body); transition: border-color .15s; }
.secondary:hover, .gh-btn-line:hover { border-color: var(--gh-fg); }
.text-link { color: var(--gh-accent-strong); font-weight: 600; }
.text-link:hover { color: var(--gh-fg); }
button.primary, button.secondary { cursor: pointer; }

/* kartlar ve paneller */
.game-card, .editorial-card, .game-tile, .contact-card, .mode, .roadmap, .requirements > div, .article-source, .article-toc, .notice, .detail-info, .hub-intro, .forum-directory li, .external-library, .series-games, .guide, .related-reading, .playable-card, .custom-block, .milestones li { background: var(--gh-panel); border: 1px solid var(--gh-line); border-radius: 14px; }
.game-card:hover, .editorial-card:hover, .game-tile:hover, .contact-card:hover, .playable-card:hover { border-color: var(--gh-hair); }
.notice { color: var(--gh-fg-soft); }
.document-main, .hub-main, .catalog-main, .journal-main { color: var(--gh-fg-soft); }
.document-main h2, .document-main h3, .hub-main h2, .hub-main h3 { color: var(--gh-fg); }
input[type=search], input[type=text], input[type=email], select, textarea { background: var(--gh-panel); color: var(--gh-fg); border: 1px solid var(--gh-line); border-radius: 10px; }
input::placeholder, textarea::placeholder { color: var(--gh-muted); }
details > summary { color: var(--gh-fg); }
hr { border: 0; border-top: 1px solid var(--gh-line); }
table { border-color: var(--gh-line); }
th, td { border-color: var(--gh-line) !important; }

/* alt bilgi */
.footer { border-top: 1px solid var(--gh-line); color: var(--gh-muted); font-size: 14px; }
.footer-brand { font-family: var(--gh-display); font-weight: 800; font-stretch: 110%; color: var(--gh-fg); }
.footer-links a { color: var(--gh-fg-soft); }
.footer-links a:hover { color: var(--gh-fg); }

.document-main .primary, .hub-main .primary, .catalog-main .primary { color: var(--gh-on-accent); }

/* ================= Ana sayfa ================= */
.gh-label { display: inline-flex; align-items: center; gap: 10px; }
.gh-tag { font: 500 11px/1 var(--gh-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gh-accent-strong); }
.gh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gh-live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gh-live) 18%, transparent); }

/* duyuru şeridi */
.gh-notice { background: var(--gh-panel); border-bottom: 1px solid var(--gh-line); font-size: 14px; color: var(--gh-fg-soft); }
.gh-notice .wrap { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 6px; }
.gh-notice b { flex: none; font: 500 11px/1 var(--gh-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gh-on-accent); background: var(--gh-fill); padding: 5px 7px; border-radius: 4px; }
.gh-notice p { margin: 0; min-width: 0; }
.gh-notice a { color: var(--gh-fg); font-weight: 600; white-space: nowrap; }
.gh-notice a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* vitrin */
.gh-stage { position: relative; overflow: hidden; background: #05080b; touch-action: pan-y; }
.gh-track { display: flex; transition: transform .8s cubic-bezier(.22,.7,.2,1); }
.gh-track.snap { transition: none; }
.gh-slide { position: relative; flex: 0 0 100%; min-height: clamp(560px, 76vh, 780px); display: grid; align-items: center; overflow: hidden; color: #f1f2f4; }
.gh-slide .gh-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.gh-slide .gh-art.side { left: auto; width: 62%; }
.gh-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #000000f0 0%, #000000c4 32%, #00000040 62%, #0000 80%), linear-gradient(0deg, var(--gh-bg) 0%, transparent 30%); }
.gh-copy { position: relative; z-index: 1; display: grid; gap: 22px; padding-block: 72px 160px; }
.gh-copy > * { max-width: 760px; margin: 0; }
.gh-copy .gh-label { color: #cfd4db; }
.gh-copy h1, .gh-copy h2 { font-size: clamp(52px, 7vw, 112px); text-wrap: balance; overflow-wrap: break-word; color: #f4f6f8; }
.gh-copy h1 em, .gh-copy h2 em { font-style: normal; color: var(--gh-accent-strong); }
.gh-copy p { color: #d3d7dd; font-size: 18px; max-width: 46ch; }
.gh-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gh-copy .secondary { border-color: #ffffff59; color: #f1f2f4; background: #0a0c0f59; }
.gh-credit { font: 500 12px/1 var(--gh-mono); letter-spacing: .06em; color: #c6ccd4; }
.gh-arrows { position: absolute; z-index: 4; left: 0; right: 0; bottom: 108px; pointer-events: none; }
.gh-arrows .wrap { display: flex; justify-content: flex-end; gap: 10px; }
.gh-arrow { pointer-events: auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #ffffff4d; background: #0a0c0f8c; color: #f1f2f4; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .15s, border-color .15s; }
.gh-arrow:hover { background: #0a0c0fcc; border-color: #f1f2f4; }
.gh-arrow svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.gh-switch { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; }
.gh-switch .wrap { display: grid; grid-template-columns: repeat(var(--gh-picks, 3), minmax(0, 1fr)); gap: 12px; padding-bottom: 24px; }
.gh-pick { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; text-align: left; background: color-mix(in srgb, var(--gh-panel) 82%, transparent); border: 1px solid var(--gh-line); border-radius: 10px; cursor: pointer; overflow: hidden; min-width: 0; color: var(--gh-fg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gh-pick img { width: 72px; height: 42px; object-fit: cover; border-radius: 5px; flex: none; }
.gh-pick span { display: grid; gap: 2px; min-width: 0; }
.gh-pick b { font: 700 15px/1.1 var(--gh-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-pick small { font: 500 11px/1.2 var(--gh-mono); color: var(--gh-muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-pick::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gh-accent); transform: scaleX(0); transform-origin: left; }
.gh-pick[aria-current="true"] { border-color: var(--gh-hair); background: color-mix(in srgb, var(--gh-panel-2) 92%, transparent); }
.gh-pick[aria-current="true"]::after { animation: gh-fill var(--gh-dwell, 5s) linear forwards; }
.gh-stage.held .gh-pick[aria-current="true"]::after { animation-play-state: paused; }
.gh-stage.still .gh-pick[aria-current="true"]::after { animation: none; transform: scaleX(1); }
@keyframes gh-fill { to { transform: scaleX(1); } }

/* bölümler */
.gh-block { padding-top: 88px; }
.gh-head { display: flex; align-items: end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.gh-head h2 { margin: 0; font-size: clamp(34px, 4.6vw, 64px); overflow-wrap: break-word; }
.gh-more { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--gh-body); letter-spacing: .06em; text-transform: uppercase; padding: 12px 16px; border: 1px solid var(--gh-line); border-radius: 999px; color: var(--gh-fg); }
.gh-more:hover { border-color: var(--gh-muted); }
.gh-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.gh-games > .playable-card { display: grid; grid-template-rows: auto 1fr; background: var(--gh-panel); border: 1px solid var(--gh-line); border-radius: 14px; overflow: hidden; color: var(--gh-fg); transition: border-color .2s, transform .2s; }
.gh-games > .playable-card:hover { border-color: var(--gh-hair); transform: translateY(-2px); }
.gh-games > .playable-card .gh-pic { aspect-ratio: 16 / 9; overflow: hidden; background: var(--gh-panel-2); }
.gh-games > .playable-card .gh-pic img { width: 100%; height: 100%; object-fit: cover; }
.gh-games > .playable-card .gh-body { display: grid; gap: 14px; align-content: start; padding: 22px; }
.gh-games > .playable-card h3 { margin: 0; font-size: 34px; }
.gh-games > .playable-card p { margin: 0; color: var(--gh-muted); font-size: 15px; }
.gh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gh-chip { font: 500 11px/1 var(--gh-mono); letter-spacing: .04em; text-transform: uppercase; padding: 7px 9px; border-radius: 5px; background: var(--gh-panel-2); color: var(--gh-fg-soft); }
.gh-chip.on { background: color-mix(in srgb, var(--gh-live) 14%, transparent); color: var(--gh-live); }
.gh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--gh-line); padding-top: 16px; margin-top: 4px; }
.gh-go { font: 700 14px/1 var(--gh-body); }
.gh-news { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gh-card { display: grid; gap: 14px; align-content: start; color: var(--gh-fg); }
.gh-card .gh-pic { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--gh-panel); }
.gh-card .gh-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.gh-card:hover .gh-pic img { transform: scale(1.05); }
.gh-card h3 { margin: 0; font: 700 19px/1.25 var(--gh-body); text-wrap: balance; }
.gh-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.gh-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.gh-reads { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.gh-feature { position: relative; display: grid; align-content: end; min-height: 420px; border-radius: 14px; overflow: hidden; padding: 28px; background: #12151a; color: #f1f2f4; }
.gh-feature img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .6; transition: opacity .3s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.gh-feature:hover img { transform: scale(1.04); }
.gh-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #0a0c0f 5%, transparent 70%); }
.gh-feature > * { position: relative; z-index: 1; }
.gh-feature h3 { margin: 10px 0 8px; font-size: clamp(28px, 3vw, 44px); }
.gh-feature p { margin: 0; color: #cfd4db; max-width: 52ch; }
.gh-feature .gh-tag, .gh-feature h3, .gh-feature p { transition: opacity .3s ease; }
.gh-feature.swap img, .gh-feature.swap .gh-tag, .gh-feature.swap h3, .gh-feature.swap p { opacity: 0; }
.gh-feature .gh-bar { position: absolute; z-index: 2; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gh-accent); transform: scaleX(0); transform-origin: left; }
.gh-feature.run .gh-bar { animation: gh-fill 7s linear forwards; }
.gh-line { display: block; white-space: nowrap; }
.gh-list { display: grid; gap: 16px; align-content: start; }
.gh-item { display: grid; gap: 8px; padding: 24px; border-radius: 14px; background: var(--gh-panel); border: 1px solid var(--gh-line); align-content: start; color: var(--gh-fg); text-align: left; font: inherit; width: 100%; }
button.gh-item { cursor: pointer; }
.gh-item:hover { border-color: var(--gh-hair); }
.gh-item h3, .gh-item .gh-h { margin: 0; font: 700 21px/1.25 var(--gh-body); }
.gh-item p, .gh-item .gh-p { margin: 0; color: var(--gh-muted); font-size: 15px; }
.gh-item.media { grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); gap: 18px; align-items: start; padding: 14px; }
.gh-item.media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.gh-item .gh-txt { display: grid; gap: 8px; min-width: 0; padding-top: 4px; }
.gh-articles .editorial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.gh-articles .editorial-card { padding: 24px; display: grid; gap: 8px; align-content: start; }
.gh-articles .editorial-card h3 { margin: 0; font: 700 21px/1.25 var(--gh-body); }
.gh-articles .editorial-card p { margin: 0; color: var(--gh-muted); font-size: 15px; }
.gh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--gh-line); }
.gh-steps article { padding: 22px 22px 6px 0; display: grid; gap: 8px; align-content: start; }
.gh-steps article + article { border-left: 1px solid var(--gh-line); padding-left: 22px; }
.gh-steps h3 { margin: 0; font: 700 21px/1.25 var(--gh-body); }
.gh-steps p { margin: 0; color: var(--gh-muted); font-size: 15px; }
.gh-faq { margin-top: 88px; }
.gh-faq summary { padding: 22px 24px; font: 700 18px/1.3 var(--gh-body); }
.gh-faq .guide-notes { padding: 0 24px 24px; }
.gh-faq .guide-links { padding: 0 24px 24px; }

@media (min-width: 1680px) { :root { --gh-max: 1600px; } }
@media (min-width: 2200px) { body { zoom: 1.2; } }
@media (min-width: 2800px) { body { zoom: 1.45; } }
@media (min-width: 3400px) { body { zoom: 1.75; } }
@media (min-width: 4200px) { body { zoom: 2.2; } }
@media (min-width: 5200px) { body { zoom: 2.75; } }
@media (min-width: 6400px) { body { zoom: 3.4; } }
@media (min-width: 7400px) { body { zoom: 4; } }
@media (max-width: 1100px) {
  .gh-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-reads, .gh-articles .editorial-grid { grid-template-columns: minmax(0, 1fr); }
  .gh-steps { grid-template-columns: minmax(0, 1fr); }
  .gh-steps article + article { border-left: 0; padding-left: 0; border-top: 1px solid var(--gh-line); }
}
@media (max-width: 700px) {
  .gh-slide { min-height: 620px; align-items: start; }
  .gh-slide .gh-art.side { width: 100%; height: 55%; top: auto; bottom: 0; }
  .gh-slide::after { background: linear-gradient(180deg, #000000f0 0%, #000000c0 45%, #00000020 75%, var(--gh-bg) 100%); }
  .gh-copy { padding-block: 40px 200px; gap: 16px; }
  .gh-copy p { font-size: 16px; }
  .gh-switch .wrap { gap: 6px; padding-bottom: 16px; }
  .gh-pick { padding: 8px; }
  .gh-pick img, .gh-pick small { display: none; }
  .gh-pick b { font-size: 13px; }
  .gh-arrows { bottom: 72px; }
  .gh-arrow { width: 44px; height: 44px; }
  .gh-news { grid-template-columns: minmax(0, 1fr); }
  .gh-block { padding-top: 64px; }
  .gh-notice a { display: none; }
}
@media (max-width: 480px) { .gh-line { white-space: normal; } .gh-item.media { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 360px) {
  .gh-copy h1, .gh-copy h2 { font-size: clamp(36px, 13vw, 52px); }
  .gh-head h2 { font-size: 30px; }
  .primary, .secondary { padding: 0 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .gh-track, .gh-card .gh-pic img, .gh-feature img, .gh-games > .playable-card { transition: none; } .gh-feature .gh-bar { display: none; } }

/* site içi arama sonuçları */
.header-bg { position: sticky; }
.gh-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 31; list-style: none; margin: 0 auto; padding-top: 8px; padding-bottom: 8px; display: grid; gap: 4px; max-width: min(720px, 100%); background: var(--gh-panel); border: 1px solid var(--gh-line); border-radius: 0 0 14px 14px; box-shadow: 0 24px 60px #0008; }
.gh-results li a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--gh-fg); font-weight: 600; }
.gh-results li a:hover, .gh-results li a:focus-visible { background: var(--gh-panel-2); }
.gh-results li span { display: block; padding: 8px 12px 0; font: 500 11px/1 var(--gh-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gh-muted); }
.gh-results .gh-empty { padding: 12px; color: var(--gh-muted); }
.gh-log article { gap: 10px; }
/* sınıfsız düğmeler (ör. gizlilik tercihleri) */
.document-main button:not([class]), .hub-main button:not([class]) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--gh-hair); border-radius: 999px; background: var(--gh-panel-2); color: var(--gh-fg); font: 600 15px/1 var(--gh-body); cursor: pointer; }
.document-main button:not([class]):hover, .hub-main button:not([class]):hover { border-color: var(--gh-fg); }

/* Gamerhood oyun posterleri (CMS kartı) */
.playable-games:has(.gh-games) { margin-block: 0; }
.gh-games > .playable-card { display: grid; grid-template-columns: none; grid-template-rows: auto 1fr; border-radius: 14px; }
.gh-games > .playable-card .gh-pic { display: block; }
.gh-games > .playable-card .kicker { margin: 0; }
.gh-games > .playable-card h3 { font-family: var(--gh-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; line-height: .92; font-size: 34px; }
.gh-links { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gh-go { font: 700 14px/1 var(--gh-body); color: var(--gh-fg); }
.gh-go:hover { color: var(--gh-accent-strong); }

/* stüdyo imzası: Gamerhood ve AdoGame simgeleri */
.gh-credit { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.gh-studios { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.gh-studio { width: 18px; height: 18px; flex: none; }
.gh-studio-ado { width: 24px; height: 20px; }

/* SSS: kapalıyken cevaplar görünmez */
details.gh-faq:not([open]) > :not(summary) { display: none; }

/* ================= Telefon: görsel üstte, yazı altta; hiçbir öğe üst üste binmez ================= */
@media (max-width: 700px) {
  .header-bg { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .header { flex-wrap: wrap; gap: 8px 12px; min-height: 0; padding-block: 10px; }
  .header .search { order: 2; flex: 1 1 140px; min-width: 0; max-width: none; margin-left: auto; }
  .header nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); width: calc(100% + 2 * var(--gutter)); }
  .header nav::-webkit-scrollbar { display: none; }
  .header nav a { flex: none; white-space: nowrap; }
  .gh-results { position: static; border-radius: 12px; margin-bottom: 8px; }

  .gh-slide { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .gh-slide .gh-art, .gh-slide .gh-art.side { position: relative; inset: auto; order: -1; width: 100%; height: auto; aspect-ratio: 16 / 10; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .gh-slide::after { display: none; }
  .gh-copy { padding-block: 4px 24px; gap: 14px; }
  .gh-copy h1, .gh-copy h2 { font-size: clamp(36px, 11vw, 52px); }
  .gh-arrows { top: calc(62.5vw - 58px); bottom: auto; }
  .gh-switch { position: static; }
  .gh-switch .wrap { padding-top: 12px; padding-bottom: 8px; }

  .gh-feature { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .gh-feature img { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; opacity: 1; }
  .gh-feature::after { display: none; }
  .gh-feature .gh-tag, .gh-feature h3, .gh-feature p { margin-left: 18px; margin-right: 18px; }
  .gh-feature .gh-tag { margin-top: 16px; }
  .gh-feature p { margin-bottom: 22px; }
  .gh-feature .gh-bar { top: auto; bottom: 0; }
}

/* kapalı açılır bölümlerin içeriği her sayfada gizli kalır */
details:not([open]) > :not(summary) { display: none !important; }

/* telefonda oyun bilgi sayfası vitrini: metin üstte, görsel altında ayrı blok */
@media (max-width: 700px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero:before, .hero:after { display: none; }
  .hero-art { position: relative; inset: auto; order: 2; width: 100%; height: auto; aspect-ratio: 16 / 10; object-position: 70% 50%; z-index: 0; }
  .hero-inner { padding-block: 28px 20px; }
  .hero .art-caption { position: static; align-self: flex-end; margin: 8px var(--gutter) 12px; }
}

/* tablet (701–900px): vitrin ve rehber kartında da görsel üstte, yazı altta */
@media (min-width: 701px) and (max-width: 900px) {
  .gh-slide { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .gh-slide .gh-art, .gh-slide .gh-art.side { position: relative; inset: auto; order: -1; width: 100%; height: auto; aspect-ratio: 16 / 9; -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
  .gh-slide::after { display: none; }
  .gh-copy { padding-block: 8px 28px; }
  .gh-arrows { top: calc(56.25vw - 66px); bottom: auto; }
  .gh-switch { position: static; }
  .gh-switch .wrap { padding-top: 14px; padding-bottom: 10px; }
  .gh-feature { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .gh-feature img { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; opacity: 1; }
  .gh-feature::after { display: none; }
  .gh-feature .gh-tag, .gh-feature h3, .gh-feature p { margin-left: 24px; margin-right: 24px; }
  .gh-feature .gh-tag { margin-top: 18px; }
  .gh-feature p { margin-bottom: 26px; }
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero:before, .hero:after { display: none; }
  .hero-art { position: relative; inset: auto; order: 2; width: 100%; height: auto; aspect-ratio: 16 / 9; z-index: 0; }
  .hero-inner { padding-block: 36px 24px; }
}

/* ================= Görseller: oran korunur, logo ve yazı kesilmez, büyütülüp bulanıklaşmaz ================= */
/* haber kartı: görselin tamamı görünür; boşluğu aynı görselin bulanık hâli doldurur */
.gh-card .gh-pic { position: relative; isolation: isolate; }
.gh-card .gh-pic .gh-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(.55) saturate(1.2); transform: scale(1.2); z-index: -1; }
.gh-card .gh-pic .gh-fit { position: relative; width: 100%; height: 100%; object-fit: contain; }
.gh-card:hover .gh-pic .gh-fit { transform: scale(1.03); }
/* katalog kartı: Steam başlığı (460×215) kutuyu tam doldurur; farklı orandaki görseller kırpılmadan sığar */
.game-art img { object-fit: contain; background: var(--gh-panel-2); }
/* oyun rehberi sahne görseli: kendi çözünürlüğünden büyük çizilmez */
.game-scene img { width: auto; max-width: 100%; margin-inline: auto; }
/* yazı/haber kapağı ve rehber kapağı: oran korunur */
.news-cover, .hub-cover { height: auto; object-fit: contain; }
/* katalogdaki GH Football kartı: kapak 16:9 kutuda kırpılmadan */
.game-card .cover { width: 240px; height: auto; aspect-ratio: 16 / 9; padding: 0; border-radius: 10px; align-self: center; }
.game-card .cover img { opacity: 1; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 700px) { .game-card { flex-direction: column; align-items: stretch; } .game-card .cover { width: 100%; height: auto; } .game-card > * { min-width: 0; } }
/* düşük çözünürlüklü haber kapağı kendi boyutundan büyük çizilmez */
.news-cover { width: auto; max-width: 100%; }
/* geniş telefonlarda (500–700px) kartlar iki sütun: 460px'lik görseller büyütülmez */
@media (min-width: 500px) and (max-width: 700px) {
  .gh-news, .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
}

/* ================= Kartlar: her panelin iç boşluğu ve tutarlı kart yazısı ================= */
.editorial-card, .custom-block, .milestones li, .article-source, .article-toc, .notice, .related-reading, .contact-card, .roadmap, .requirements > div, .detail-info, .hub-intro, .series-games, .external-library { padding: clamp(18px, 2.2vw, 28px); }
.forum-directory li { padding: 0; }
.forum-directory li a { display: block; padding: 12px 16px; }
.editorial-card { display: grid; gap: 10px; align-content: start; }
.editorial-card > * { margin: 0; }
.editorial-card h2, .editorial-card h3 { font: 700 clamp(19px, 1.6vw, 22px)/1.25 var(--gh-body); text-wrap: balance; }
.editorial-card h2 a, .editorial-card h3 a { color: var(--gh-fg); text-decoration: none; }
.editorial-card h2 a:hover, .editorial-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.editorial-card p { color: var(--gh-muted); font-size: 15px; line-height: 1.6; }
.editorial-card .text-link { margin-top: 4px; text-decoration: none; }
.editorial-card .article-meta { margin-top: auto; padding-top: 6px; }
.editorial-grid { gap: 16px; }
.custom-block > :first-child, .notice > :first-child, .article-source > :first-child, .article-toc > :first-child { margin-top: 0; }
.custom-block > :last-child, .notice > :last-child, .article-source > :last-child, .article-toc > :last-child { margin-bottom: 0; }
.custom-block h2 { font: 700 clamp(21px, 2vw, 26px)/1.25 var(--gh-body); margin: 0 0 12px; }
.custom-copy { color: var(--gh-fg-soft); line-height: 1.75; }
.gh-steps article.mode { padding: 22px; }
.modes-section .gh-steps { gap: 16px; border-top: 0; }
.gh-steps article.mode + article.mode { padding-left: 22px; border: 1px solid var(--gh-line); }
/* haber listesi kartı görseli: kartın üstünde, kenara taşar, kırpılmadan */
.editorial-pic { position: relative; isolation: isolate; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--gh-panel-2); margin: calc(-1 * clamp(8px, 1vw, 12px)) calc(-1 * clamp(8px, 1vw, 12px)) 4px; }
.editorial-pic .gh-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(.55) saturate(1.2); transform: scale(1.2); z-index: -1; }
.editorial-pic .gh-fit { position: relative; width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.editorial-card:hover .editorial-pic .gh-fit { transform: scale(1.03); }
/* ilgili haberler: panel içinde panel değil; kartlar sütuna sığdığı kadar yan yana */
.related-reading { background: none; border: 0; padding: 0; margin-top: 48px; }
.related-reading > h2 { font: 700 clamp(22px, 2.2vw, 28px)/1.2 var(--gh-body); margin: 0 0 16px; }
.related-reading .editorial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.related-reading > a { display: inline-block; margin-top: 18px; }
/* kart başlıklarında gövde metni bağlantı çizgisi kullanılmaz */
.document-main .editorial-card :is(h2, h3) a, .hub-main .editorial-card :is(h2, h3) a, .journal-main .editorial-card :is(h2, h3) a { color: var(--gh-fg); text-decoration: none; }
.document-main .editorial-card :is(h2, h3) a:hover, .hub-main .editorial-card :is(h2, h3) a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* YouTube küçük resmi (4:3) içindeki 16:9 görüntü: gömülü siyah bantlar kırpılır */
img.gh-yt, .gh-card .gh-pic .gh-fit.gh-yt, .editorial-pic .gh-fit.gh-yt, .game-art img.gh-yt { object-fit: cover; }
/* Gamerhood oyun sayfası: imza, durum ve oyunu aç düğmesi */
.own-game-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 4px 0 18px; }
.own-game-credit { font: 500 12px/1 var(--gh-mono); letter-spacing: .06em; color: var(--gh-fg-soft); margin-right: 6px; }
.own-game-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 28px; }
.own-game-end { margin-top: 32px; }
.custom-block + .custom-block, .own-game-media + .custom-block { margin-top: 16px; }
.own-game-media { margin: 0 0 16px; }
/* Katalogdaki öne çıkan oyun kartı: kabın tamamını kullanır, kapak büyük ve solda. */
@media (min-width: 701px) { .own-games .game-card { max-width: none; gap: clamp(24px, 3vw, 44px); } .own-games .game-card .cover { width: min(46%, 560px); border-radius: 12px; } }
/* Bütün olarak görünmesi gereken vitrin görseli (Kariyer Yolu merdiveni): kırpılmaz, seçici çubuğunun üstünde kalır. */
.gh-slide .gh-art.whole { top: 24px; bottom: auto; right: 2%; height: calc(100% - 150px); width: 62%; object-fit: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%), linear-gradient(180deg, #000 84%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 18%), linear-gradient(180deg, #000 84%, transparent); mask-composite: intersect; }
@media (max-width: 900px) {
  .gh-slide .gh-art.whole { top: auto; bottom: auto; right: auto; width: 100%; height: auto; aspect-ratio: 980 / 740; object-fit: contain; object-position: 50% 0 !important; -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent); mask-image: linear-gradient(180deg, #000 90%, transparent); }
}
@media (min-width: 901px) { .gh-slide:has(.gh-art.whole)::after { background: linear-gradient(90deg, #000000f0 0%, #000000b0 26%, #0000 40%), linear-gradient(0deg, var(--gh-bg) 0%, transparent 22%); } }
/* Afişli video oynatıcı: oyun görseli + ortada oynat simgesi; oynatınca yerini gerçek oynatıcı alır. */
.trailer { padding: 0; overflow: hidden; border-radius: 14px; }
.trailer-start { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 0; background: #05080b; color: #fff; cursor: pointer; overflow: hidden; }
.trailer-start img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .25s, transform .4s; }
.trailer-start::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #000000b8 0%, #0000 55%); }
.trailer-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: clamp(56px, 7vw, 84px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #0e1319c4; border: 2px solid #ffffffd9; backdrop-filter: blur(6px); transition: transform .2s, background .2s; }
.trailer-play::before { content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; }
.trailer-label { position: absolute; z-index: 1; left: 18px; bottom: 14px; right: 18px; text-align: left; font: 700 15px/1.3 var(--gh-body); text-shadow: 0 1px 8px #000; }
.trailer-start:hover img, .trailer-start:focus-visible img { opacity: 1; transform: scale(1.03); }
.trailer-start:hover .trailer-play, .trailer-start:focus-visible .trailer-play { transform: translate(-50%, -50%) scale(1.08); background: #0e1319; }
.trailer video, .youtube-player iframe { margin-block: 0; }
.trailer > .article-meta, .trailer > .video-status, .trailer > a { margin: 0; padding: 12px 18px 0; }
.trailer > a { display: inline-block; padding-bottom: 16px; }
.trailer > .video-status:empty { display: none; }
@media (max-width: 700px) { .trailer { padding: 0; } }
/* Ana sayfa rafları: yatay kayar, oklar masaüstünde görünür, dokunmatikte kaydırılır. */
.gh-sub { margin: -12px 0 24px; max-width: 70ch; color: var(--gh-muted); }
.gh-rail { position: relative; }
.gh-rail .game-grid, .gh-trailers { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: clamp(240px, 24%, 320px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--gh-line) transparent; overscroll-behavior-x: contain; }
.gh-trailers { grid-auto-columns: clamp(280px, 32%, 440px); }
.gh-rail .game-grid > *, .gh-trailers > * { scroll-snap-align: start; min-width: 0; }
.gh-rail .game-tile p:not(.kicker) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gh-trailer-card { display: grid; gap: 10px; align-content: start; }
.gh-trailer-card h3 { margin: 0; font: 700 17px/1.3 var(--gh-body); }
.gh-trailer-card h3 a { color: var(--gh-fg); text-decoration: none; }
.gh-trailer-card .trailer > .article-meta { font-size: 11px; padding-top: 10px; }
.gh-trailer-card .trailer > a { font-size: 12px; padding-bottom: 12px; }
.gh-rail-nav { position: absolute; z-index: 2; top: 40%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gh-line); background: #0e1319e6; color: var(--gh-fg); font: 400 28px/1 var(--gh-body); cursor: pointer; display: grid; place-items: center; }
.gh-rail-nav.prev { left: -10px; } .gh-rail-nav.next { right: -10px; }
.gh-rail-nav:hover { border-color: var(--gh-muted); }
.gh-rail-nav[disabled] { opacity: 0; pointer-events: none; }
/* Oklar her genişlikte ve dokunmatikte de görünür; telefonda daha küçük ve kartın içinde. */
.gh-rail-nav { top: clamp(60px, 22%, 120px); }
@media (max-width: 700px), (hover: none) { .gh-rail .game-grid { grid-auto-columns: 78%; } .gh-trailers { grid-auto-columns: 86%; } }
@media (max-width: 700px) { .gh-rail-nav { width: 38px; height: 38px; font-size: 24px; } .gh-rail-nav.prev { left: 6px; } .gh-rail-nav.next { right: 6px; } }
/* Kart içindeki yazılar kenara dayanmasın. */
.gh-rail .game-tile { overflow: hidden; padding-bottom: 20px; }
.gh-rail .game-tile-copy { padding-inline: clamp(14px, 1.6vw, 20px); }
.gh-rail .game-tile .game-art img { display: block; width: 100%; height: auto; }

/* ===== Topluluk: Etkileşim Meydanı (Instagram benzeri) ve Karargâh (Discord benzeri) ===== */
.community { padding-block: 32px 64px; }
.cm-top { display: flex; justify-content: space-between; align-items: end; gap: 16px 32px; flex-wrap: wrap; }
.cm-top h1 { margin: 6px 0 8px; font-size: clamp(40px, 6vw, 72px); }
.cm-lead { margin: 0; color: var(--gh-muted); max-width: 62ch; }
.cm-lead b { color: var(--gh-fg); }
.cm-account { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-me { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--gh-line); border-radius: 999px; color: var(--gh-fg); text-decoration: none; font-weight: 700; }
.cm-login { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--gh-fill); color: var(--gh-on-accent); font-weight: 700; text-decoration: none; }
.cm-note .cm-login, .cm-empty .cm-login, .cm-locked .cm-login, .kg-composer.locked .cm-login { display: inline; min-height: 0; padding: 0; background: none; color: var(--gh-fg); text-decoration: underline; text-underline-offset: 3px; }
.cm-tabs { display: flex; gap: 6px; margin: 28px 0 20px; border-bottom: 1px solid var(--gh-line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.cm-tabs a { padding: 12px 18px; color: var(--gh-muted); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.cm-tabs a[aria-current="page"] { color: var(--gh-fg); border-bottom-color: var(--gh-accent); }
.cm-card { background: var(--gh-panel); border: 1px solid var(--gh-line); border-radius: 14px; }
.cm-note, .cm-meta { color: var(--gh-muted); font-size: 13px; }
.cm-empty { padding: 32px 16px; text-align: center; color: var(--gh-muted); }
.cm-status { font-size: 13px; color: var(--gh-muted); }
.cm-status.error, .cm-empty.error { color: #f0a3a3; }
.cm-ava { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font: 800 16px/1 var(--gh-body); }
.cm-ava.sm { width: 30px; height: 30px; font-size: 13px; }
.cm-ava.lg { width: 96px; height: 96px; font-size: 40px; }
.cm-author { display: inline-flex; align-items: center; gap: 10px; color: var(--gh-fg); text-decoration: none; }
.cm-author:hover b { text-decoration: underline; }
.community button.primary, .community a.primary, .cm-dialog button.primary { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--gh-fill); color: var(--gh-on-accent); font: 700 14px/1 var(--gh-body); cursor: pointer; text-decoration: none; }
.community button.secondary, .community a.secondary, .cm-dialog button.secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--gh-line); border-radius: 999px; background: transparent; color: var(--gh-fg); font: 600 14px/1 var(--gh-body); cursor: pointer; text-decoration: none; }
.community button.text-link { border: 0; background: none; color: var(--gh-muted); cursor: pointer; text-decoration: underline; padding: 4px 0; text-align: left; }
.community button:disabled { opacity: .55; cursor: wait; }
.community textarea, .community input[type="text"], .community select, .cm-dialog textarea, .cm-dialog input, .cm-dialog select { width: 100%; padding: 10px 12px; border: 1px solid var(--gh-line); border-radius: 10px; background: var(--gh-bg); color: var(--gh-fg); font: 15px/1.5 var(--gh-body); resize: vertical; }
.community select { width: auto; max-width: 100%; }
/* Etkileşim Meydanı */
.cm-view { min-width: 0; }
.cm-composer, .cm-subtabs, .cm-feed, .cm-more, .cm-profile, .cm-view > h2, .cm-report { max-width: 640px; margin-inline: auto; }
.cm-composer { padding: 16px; display: grid; gap: 12px; }
.cm-composer-row { display: flex; gap: 12px; align-items: flex-start; }
.cm-composer-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.cm-composer-bar select { flex: 1 1 220px; }
.cm-previews { display: flex; gap: 8px; flex-wrap: wrap; }
.cm-previews:empty { display: none; }
.cm-previews figure { position: relative; margin: 0; width: 88px; height: 88px; border-radius: 10px; overflow: hidden; }
.cm-previews img { width: 100%; height: 100%; object-fit: cover; }
.cm-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #000a; color: #fff; cursor: pointer; }
.cm-subtabs { display: flex; gap: 8px; margin-block: 18px 12px; }
.cm-subtabs a { padding: 8px 14px; border-radius: 999px; color: var(--gh-muted); font-weight: 700; text-decoration: none; border: 1px solid transparent; }
.cm-subtabs a[aria-selected="true"] { color: var(--gh-fg); border-color: var(--gh-line); background: var(--gh-panel); }
.cm-feed { display: grid; gap: 16px; }
.cm-post { overflow: hidden; }
.cm-post > header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
.cm-post > header .cm-meta { margin-right: auto; }
.cm-photos { display: grid; gap: 2px; background: #000; }
.cm-photos.n1 { grid-template-columns: 1fr; }
.cm-photos.n2, .cm-photos.n4 { grid-template-columns: 1fr 1fr; }
.cm-photos.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.cm-photos.n3 a:first-child { grid-row: span 2; }
.cm-photos a { display: block; min-height: 0; }
.cm-photos img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.cm-photos.n1 img { aspect-ratio: auto; max-height: 720px; object-fit: contain; background: #000; }
.cm-body { margin: 0; padding: 12px 16px 4px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.cm-post > footer { display: flex; gap: 6px; padding: 6px 10px 10px; }
.cm-act { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--gh-fg-soft); font: 600 15px/1 var(--gh-body); cursor: pointer; }
.cm-act:hover { background: var(--gh-panel-2); }
.cm-act.on { color: #ff8a8a; }
.cm-replies { border-top: 1px solid var(--gh-line); padding: 12px 16px; display: grid; gap: 12px; }
.cm-reply { display: flex; gap: 10px; align-items: flex-start; }
.cm-reply > div { flex: 1; min-width: 0; }
.cm-reply p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-reply-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cm-reply-form input { flex: 1 1 200px; width: auto; }
.cm-more { display: block; margin-top: 16px; }
.cm-menu { position: relative; }
.cm-menu summary { list-style: none; cursor: pointer; padding: 4px 10px; border-radius: 8px; color: var(--gh-muted); font-size: 20px; line-height: 1; }
.cm-menu summary::-webkit-details-marker { display: none; }
.cm-menu-list { position: absolute; right: 0; top: 100%; z-index: 5; display: grid; min-width: 170px; padding: 6px; background: var(--gh-panel-2); border: 1px solid var(--gh-line); border-radius: 10px; box-shadow: 0 12px 30px #0008; }
.cm-menu-list button { padding: 10px 12px; border: 0; border-radius: 6px; background: none; color: var(--gh-fg); text-align: left; font: 14px var(--gh-body); cursor: pointer; }
.cm-menu-list button:hover { background: var(--gh-panel); }
/* Profil */
.cm-profile { display: flex; gap: 24px; align-items: center; padding: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.cm-profile > div { flex: 1; min-width: 200px; }
.cm-profile h2 { margin: 0 0 6px; font-size: 28px; overflow-wrap: anywhere; }
.cm-profile p { margin: 0; color: var(--gh-fg-soft); }
.cm-stats { display: flex; gap: 18px; list-style: none; padding: 0; margin: 10px 0 14px; color: var(--gh-fg-soft); flex-wrap: wrap; }
/* Karargâh */
.cm-discord { display: grid; grid-template-columns: 72px 248px minmax(0, 1fr); height: clamp(520px, calc(100vh - 260px), 860px); border: 1px solid var(--gh-line); border-radius: 14px; overflow: hidden; background: var(--gh-panel); }
.cm-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; background: var(--gh-bg); overflow-y: auto; }
.cm-server { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--gh-panel-2); color: var(--gh-fg); font: 800 18px/1 var(--gh-body); text-decoration: none; transition: border-radius .15s, background .15s; }
.cm-server:hover, .cm-server.on { border-radius: 14px; background: var(--gh-accent); color: var(--gh-on-accent); }
.cm-server.add { color: var(--gh-live); }
.cm-server.add.on, .cm-server.add:hover { background: var(--gh-live); color: #0e1319; }
.cm-side { display: flex; flex-direction: column; gap: 12px; padding: 16px 12px; border-right: 1px solid var(--gh-line); overflow-y: auto; background: var(--gh-panel); }
.cm-side header h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.cm-side header p { margin: 4px 0 0; }
.cm-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cm-channels a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--gh-muted); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.cm-channels a:hover, .cm-channels a[aria-current="page"] { background: var(--gh-panel-2); color: var(--gh-fg); }
.cm-small { min-height: 32px !important; font-size: 13px !important; }
.cm-pending h3 { margin: 8px 0; font-size: 14px; }
.cm-pending > div { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.cm-pending span { flex: 1; overflow-wrap: anywhere; }
.cm-room { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: color-mix(in srgb, var(--gh-panel) 55%, var(--gh-bg)); }
.cm-room-head { padding: 14px 18px; border-bottom: 1px solid var(--gh-line); }
.cm-room-title { margin: 0; font-size: 18px; }
.cm-room-head p { margin: 2px 0 0; }
.cm-room > .cm-room-title { padding: 16px 18px 0; }
.cm-messages { flex: 1; list-style: none; margin: 0; padding: 12px 6px; overflow-y: auto; }
.cm-msg { display: flex; gap: 12px; align-items: flex-start; padding: 8px 12px; border-radius: 8px; }
.cm-msg:hover { background: var(--gh-panel-2); }
.cm-msg > div { flex: 1; min-width: 0; }
.cm-msg p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.cm-send { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--gh-line); flex-wrap: wrap; }
.cm-send textarea { flex: 1 1 240px; width: auto; min-height: 44px; max-height: 160px; }
.cm-send .cm-status { flex-basis: 100%; }
.cm-send .cm-status:empty { display: none; }
.cm-locked { margin: 0; padding: 14px 18px; border-top: 1px solid var(--gh-line); }
.cm-server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 16px 18px; overflow-y: auto; }
.cm-server-card { display: grid; gap: 8px; padding: 18px; align-content: start; }
.cm-server-card h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.cm-server-card h3 a { color: var(--gh-fg); text-decoration: none; }
.cm-server-card p { margin: 0; }
.cm-report { padding: 16px; margin-bottom: 12px; display: grid; gap: 8px; }
.cm-report p, .cm-report blockquote { margin: 0; }
.cm-report blockquote { padding: 10px 12px; border-left: 3px solid var(--gh-line); background: var(--gh-bg); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-rules { max-width: 860px; margin: 48px auto 0; color: var(--gh-fg-soft); }
.cm-rules h2 { font-size: 20px; }
.cm-rules li { margin-bottom: 6px; }
.cm-dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--gh-line); border-radius: 14px; background: var(--gh-panel); color: var(--gh-fg); }
.cm-dialog::backdrop { background: #000a; }
.cm-dialog form { display: grid; gap: 10px; padding: 20px; }
.cm-dialog h2 { margin: 0 0 6px; font-size: 20px; }
.cm-dialog label { font-weight: 700; font-size: 14px; }
.cm-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
@media (max-width: 900px) {
  .cm-discord { grid-template-columns: 1fr; height: auto; }
  .cm-rail { flex-direction: row; padding: 10px 12px; overflow-x: auto; }
  .cm-side { border-right: 0; border-bottom: 1px solid var(--gh-line); }
  .cm-channels { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .cm-channels a { white-space: nowrap; }
  .cm-messages { height: min(60vh, 520px); flex: none; }
}
@media (max-width: 480px) {
  .cm-profile { padding: 18px; gap: 16px; }
  .cm-ava.lg { width: 72px; height: 72px; font-size: 30px; }
  .cm-composer-bar > * { flex: 1 1 auto; }
}

/* Topluluk girişi (/topluluk-merkezi/): iki uygulamaya giden kartlar. */
.cm-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.cm-app-card { display: flex; gap: 20px; align-items: flex-start; padding: 28px; border: 1px solid var(--gh-line); border-radius: 18px; background: var(--gh-panel); color: var(--gh-fg); text-decoration: none; transition: border-color .15s, transform .15s; }
.cm-app-card:hover { border-color: var(--gh-muted); transform: translateY(-2px); }
.cm-app-card img { flex: none; width: 72px; height: 72px; border-radius: 18px; }
.cm-app-card > span { display: grid; gap: 8px; }
.cm-app-card b { font: 800 clamp(22px, 2.4vw, 30px)/1.1 var(--gh-display, var(--gh-body)); }
.cm-app-card > span > span { color: var(--gh-fg-soft); line-height: 1.55; }
.cm-app-card em { font-style: normal; font-weight: 700; color: var(--gh-accent); margin-top: 4px; }
.cm-app-card.meydan { background: linear-gradient(160deg, #0f2f36, var(--gh-panel) 60%); }
.cm-app-card.karargah { background: linear-gradient(160deg, #1b2532, var(--gh-panel) 60%); }
@media (max-width: 760px) { .cm-apps { grid-template-columns: minmax(0, 1fr); } .cm-app-card { padding: 20px; gap: 14px; } .cm-app-card img { width: 56px; height: 56px; border-radius: 14px; } }

/* Hafif efektler (DESIGN.md › Motion & Effects). JS: design/effects.mjs. Hepsi azaltılmış harekette kapanır. */
:root { --gh-glow: #c9d5e22e; --gh-path-line: #9caab92e; --gh-spot-size: 320px; }
/* Spotlight: kart içine eklenen .gh-spot katmanı, içerik ile zemin arasında. */
.gh-spotted { position: relative; isolation: isolate; }
.gh-spot { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(var(--gh-spot-size) circle at var(--mx, 50%) var(--my, 50%), var(--gh-glow), transparent 62%); }
.gh-spotted:hover > .gh-spot { opacity: 1; }
/* Nav limelight: etkin bağlantının üstünde çizgi + aşağı inen ışık. */
.header nav { position: relative; }
.gh-lime { position: absolute; top: -10px; left: 0; width: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--gh-accent-strong); pointer-events: none; opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), width .35s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.gh-lime::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 42px; background: linear-gradient(180deg, var(--gh-glow), transparent); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }
.gh-lime.on { opacity: 1; }
/* Vitrin kaydırması: yalnız CSS, destekleyen tarayıcıda. */
@supports (animation-timeline: view()) {
  @media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
    .gh-stage { view-timeline: --gh-hero block; }
    .gh-stage .gh-copy { animation: gh-hero-copy linear both; animation-timeline: --gh-hero; animation-range: exit 0% exit 80%; transform-origin: left center; }
    .gh-stage .gh-slide .gh-art { animation: gh-hero-art linear both; animation-timeline: --gh-hero; animation-range: exit 0% exit 100%; }
  }
}
@keyframes gh-hero-copy { to { transform: translateY(-8%) scale(1.06); opacity: 0; } }
@keyframes gh-hero-art { to { transform: translateY(14%) scale(1.04); } }
/* Arka plan çizgileri (Topluluk Merkezi). */
[data-gh-paths] { position: relative; isolation: isolate; }
.gh-paths { position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: -40px; width: calc(100% + 2 * var(--gutter)); height: 520px; z-index: -1; pointer-events: none; overflow: visible;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
/* Dar ekranda menü yatay kayan şerittir: ışık kırpılmasın diye bağlantının altına ince çizgi olarak iner (konum: effects.mjs). */
@media (max-width: 760px) { .gh-lime { border-radius: 3px 3px 0 0; } .gh-lime::after { display: none; } }
.gh-paths path { fill: none; stroke: var(--gh-path-line); stroke-width: 1; stroke-dasharray: 6 12; animation: gh-path-flow linear infinite; }
.gh-paths.paused path { animation-play-state: paused; }
@keyframes gh-path-flow { to { stroke-dashoffset: -180; } }
@media (prefers-reduced-motion: reduce) { .gh-spot, .gh-lime { display: none; } .gh-paths path { animation: none; } }

/* Haberler şeridi: kütüphane ve fragmanlarla aynı kaydırma ve oklar. */
.gh-rail .gh-news { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: clamp(240px, 24%, 320px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--gh-line) transparent; overscroll-behavior-x: contain; }
.gh-rail .gh-news > * { scroll-snap-align: start; min-width: 0; }
@media (max-width: 700px), (hover: none) { .gh-rail .gh-news { grid-auto-columns: 78%; } }
/* Alt bilgi bağlantılarında da menü ışığı (design/effects.mjs). */
.footer-links { position: relative; }

/* Tafix indirme (Topluluk Merkezi + ana sayfa): yazısız, tek küçük düğme; cihaza göre dosya (shared/app-download.mjs). */
.gh-dl { display: flex; justify-content: flex-end; margin-top: 12px; }
.gh-dl-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gh-dl-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gh-line); background: var(--gh-panel-2); color: var(--gh-fg); font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; }
.gh-dl-btn .gh-dl-ic { width: 20px; height: 20px; border-radius: 5px; margin-left: -6px; }
.gh-dl-btn:hover { border-color: var(--gh-hair); background: #26313d; }
.gh-dl-note { margin: 0; font-size: 12px; color: var(--gh-muted); }
#tafix .gh-dl { justify-content: flex-start; margin-top: 0; }
/* İki seçenek (30 Ekim 2026): ziyaretçinin kendi cihazına uyan düğme vurgulu; iOS/macOS düğmesi kurulum tarifini açar. */
.gh-dl-btn.own { border-color: var(--gh-accent); background: color-mix(in srgb, var(--gh-accent) 22%, transparent); font-weight: 700; }
.gh-dl-btn.own:hover { background: color-mix(in srgb, var(--gh-accent) 32%, transparent); }
.gh-dl-guide { width: min(460px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--gh-line); border-radius: 14px; background: var(--gh-panel, #161d26); color: var(--gh-fg); }
.gh-dl-guide::backdrop { background: #000a; }
.gh-dl-guide h2 { margin: 0 0 12px; font-size: 19px; }
.gh-dl-guide ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 8px; line-height: 1.5; }
.gh-dl-guide .gh-dl-note { margin: 0 0 14px; font-size: 13px; }
.gh-dl-guide .gh-dl-btns { justify-content: flex-end; }
/* Başlıkla aynı boyda uygulama simgesi (ana sayfa Tafix bölümü). */
.gh-title-with-icon { display: inline-flex; align-items: center; gap: .28em; }
.gh-title-ic { width: .92em; height: .92em; border-radius: .22em; flex: none; }
/* Tafix tanışma (ana sayfa): masaüstünde bölüm --gh-txr-pin boyunca ekrana sabitlenir; ortadaki "Tafix'le tanışın" kartı
   kaydırdıkça tam genişliğe açılır, ayrıntılar ve uygulama görünümü belirir. Yalnız CSS; desteklemeyen tarayıcıda ve
   azaltılmış harekette açık hâli görünür. Telefonda sabitleme yok, kart kısa bir büyümeyle açılır. */
:root { --gh-txr-pin: 90vh; --gh-txr-card: inset(7% 10% 7% 10% round 28px); --gh-txr-bg: radial-gradient(70% 90% at 88% 10%, #2b3f55aa, transparent 62%), radial-gradient(60% 80% at 0% 100%, #1f2c3c, transparent 70%), var(--gh-panel); }
.gh-txr-frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(24px, 4vw, 56px); border: 1px solid var(--gh-line); border-radius: 14px; background: var(--gh-txr-bg); overflow: hidden; }
.gh-txr-intro { display: none; }
.gh-txr-copy h2 { margin: 0 0 16px; font-size: clamp(34px, 4.6vw, 64px); }
.gh-txr-lead { margin: 0; max-width: 46ch; color: var(--gh-fg-soft); font-size: 18px; }
.gh-txr-list { list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.gh-txr-list li { display: grid; gap: 4px; padding-left: 14px; border-left: 2px solid var(--gh-line); }
.gh-txr-list b { font: 700 16px/1.3 var(--gh-body); color: var(--gh-fg); }
.gh-txr-list span { font-size: 14px; color: var(--gh-muted); }
.gh-txr-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gh-txr-actions .gh-dl { margin: 0; }
@media (max-width: 900px) { :root { --gh-txr-card: inset(3% 7% round 24px); } .gh-txr-frame { grid-template-columns: minmax(0, 1fr); } }
/* Sağda büyük dönen dünya (design/globe.mjs); eski uygulama çizimi yerine, 28 Ekim 2026. */
.gh-txr-globe { position: relative; height: clamp(440px, 46vw, 660px); margin-block: -40px; --gh-globe-scale: .47; }
.gh-txr-globe canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@media (max-width: 900px) { .gh-txr-globe { height: 360px; margin-block: 0; } }
@media (max-width: 560px) { .gh-txr-list { grid-template-columns: minmax(0, 1fr); } .gh-txr-globe { height: 320px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gh-txr { view-timeline: --gh-txr block; }
    .gh-txr-frame { animation: gh-txr-open linear both; animation-timeline: --gh-txr; animation-range: entry 0% cover 40%; }
  }
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .gh-txr::after { content: ""; display: block; height: var(--gh-txr-pin); }
    .gh-txr-stage { position: sticky; top: 72px; min-height: calc(100vh - 88px); display: grid; align-items: center; }
    .gh-txr-frame { animation-range: contain 0% contain 45%; }
    .gh-txr-intro { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; background: var(--gh-txr-bg);
      animation: gh-txr-out linear both; animation-timeline: --gh-txr; animation-range: contain 18% contain 48%; }
    .gh-txr-intro img { width: clamp(96px, 9vw, 140px); height: auto; aspect-ratio: 1; border-radius: 26px; }
    .gh-txr-intro b { font: 800 clamp(72px, 9.6vw, 156px)/.92 var(--gh-display); font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; color: var(--gh-fg); }
    .gh-txr-copy { animation: gh-txr-in linear both; animation-timeline: --gh-txr; animation-range: contain 42% contain 75%; }
    .gh-txr-globe { animation: gh-txr-app linear both; animation-timeline: --gh-txr; animation-range: contain 38% contain 82%; }
  }
}
@keyframes gh-txr-open { from { clip-path: var(--gh-txr-card); } to { clip-path: inset(0 round 14px); } }
@keyframes gh-txr-out { to { opacity: 0; transform: scale(.94); visibility: hidden; } }
@keyframes gh-txr-in { from { opacity: 0; transform: translateY(32px); } }
@keyframes gh-txr-app { from { opacity: 0; transform: translateX(48px) scale(.94); } }
/* Noktalı zemin (üyelik paneli, design/effects.mjs › dots). Panelin alt yarısında, yazının arkasında. */
:root { --gh-dot: #9caab9; }
[data-gh-dots] { position: relative; isolation: isolate; }
.gh-dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; color: var(--gh-dot);
  }
/* Halka galeri (Oyunlar sayfası, design/effects.mjs › ring). Kendiliğinden dönmez; yalnız tıklama/kaydırmayla döner. */
:root { --gh-ring-w: 300px; --gh-ring-tilt: -9deg; }
.gh-ring { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin: 8px 0 28px; padding: 20px 0; border-block: 1px solid var(--gh-line); }
.gh-ring-info { display: grid; gap: 10px; align-content: center; min-width: 0; }
.gh-ring-info h3 { margin: 0; font: 800 clamp(28px, 3vw, 40px)/.95 var(--gh-display); font-stretch: 75%; text-transform: uppercase; }
.catalog-main .gh-ring-info h3 a { color: var(--gh-fg); text-decoration: none; }
.gh-ring-info h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.gh-ring-info > p:not(.kicker) { margin: 0; color: var(--gh-muted); font-size: 15px; min-height: 4.8em; }
.gh-ring-ctl { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.gh-ring-ctl .gh-arrow { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--gh-line); background: var(--gh-panel-2); color: var(--gh-fg); display: grid; place-items: center; padding: 0; cursor: pointer; }
.gh-ring-ctl .gh-arrow:hover { border-color: var(--gh-hair); }
.gh-ring-ctl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.gh-ring-count { font: 500 12px/1 var(--gh-mono); color: var(--gh-muted); min-width: 4.5em; text-align: center; }
.gh-ring-stage { height: 380px; perspective: 1000px; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.gh-ring-spin { position: relative; width: var(--gh-ring-w); aspect-ratio: 460 / 215; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.gh-ring-card { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--gh-line); background: var(--gh-panel-2); cursor: pointer; transition: opacity .7s, border-color .3s; }
.gh-ring-card.on { border-color: var(--gh-hair); }
.gh-ring-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (max-width: 760px) { :root { --gh-ring-w: 170px; } .gh-ring { grid-template-columns: minmax(0, 1fr); } .gh-ring-stage { height: 230px; order: -1; perspective: 700px; } }
@media (prefers-reduced-motion: reduce) { .gh-ring-spin, .gh-ring-card { transition: none; } }
/* Oyun poster kartları (/oyunlar/; ana sayfadan 28 Ekim 2026 kaldırıldı): yarı boy. Geniş görsel, iki satır açıklama; durum ve
   etiket satırı gizli (oyunun kendi sayfasında var). */
.gh-games > .playable-card .gh-pic { aspect-ratio: 21 / 9; }
.gh-games > .playable-card .gh-body { gap: 10px; padding: 18px 20px; }
.gh-games > .playable-card .kicker, .gh-games > .playable-card .gh-chips { display: none; }
.gh-games > .playable-card h3 { font-size: 30px; }
.gh-games > .playable-card .gh-body > p:not(.kicker) { font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* Noktalı dünya (Hakkımızda girişi, design/effects.mjs › globe). Solda başlık, sağda küre; dar ekranda başlığın altında. */
:root { --gh-globe-dot: #9caab9; --gh-globe-line: #3a4a5c; }
.gh-globe-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(16px, 3vw, 40px); align-items: center; }
.gh-globe-copy > :last-child { margin-bottom: 0; }
.gh-globe-copy h1 { font-family: var(--gh-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; line-height: .92; }
.gh-globe { width: 100%; max-width: 380px; aspect-ratio: 1; justify-self: end; }
.gh-globe canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 760px) { .gh-globe-hero { grid-template-columns: minmax(0, 1fr); } .gh-globe { max-width: 260px; justify-self: center; } }
/* Tafix giriş ekranı: arkada tam ekran dönen noktalı dünya ve şehirler arası bağlantı yayları (design/globe.mjs, "full").
   Yalnız giriş katmanı (.tx-auth) açıkken görünür; kapanınca gizlenir ve çizim durur. Formun arkası hafif koyulaşır. */
.tx-auth-bg { display: none; position: fixed; inset: 0; z-index: 899; background: var(--gh-bg); pointer-events: none; }
.tx-auth-bg canvas { display: block; width: 100%; height: 100%; opacity: .8; }
.tx-auth-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side at 50% 46%, #0e1319d9, #0e131966 70%, transparent); }
body:has(.tx-auth) .tx-auth-bg { display: block; }
/* html öneki: Tafix temasının "html[data-tx-theme] .tx-auth" opak arka planından (app.css, sonra yüklenir) daha belirgin olmalı. */
html body:has(.tx-auth-bg) .tx-auth { background: transparent; }
/* Tafix sayfası (/topluluk-merkezi/): Etkileşim Meydanı kartının yerinde dönen noktalı dünya (design/globe.mjs). */
.cm-globe { min-height: 420px; position: relative; --gh-globe-scale: .46; }
.cm-globe canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@media (max-width: 760px) { .cm-globe { min-height: 300px; } }
/* Tafix markası sitede (28 Ekim 2026, kullanıcı isteği): ana sayfa Tafix bölümü ve Tafix sayfası Tafix'in kendi "Ufuk" temasını
   taşır (değerler Tafix dalındaki DESIGN.md › ufuk-* jetonları). Başlık Sora, metin Geist (OFL 1.1, design/fonts/). Simge /tafix/icon-192.png. */
@font-face { font-family: 'Sora'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/design/fonts/sora-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Sora'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/design/fonts/sora-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/design/fonts/geist-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/design/fonts/geist-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
.tx-brand { --txb-bg: #131518; --txb-panel: #1a1d21; --txb-panel-2: #22262b; --txb-line: #2e333a; --txb-fg: #eae9e4; --txb-soft: #b3b4b3; --txb-muted: #8f9090;
  --txb-accent: #3cc7aa; --txb-on-accent: #0b1f1b; --txb-status: #4cc777; --txb-horizon: linear-gradient(90deg, #45bfa7, #f19c40);
  --txb-head: 'Sora', 'Geist', system-ui, sans-serif; --txb-body: 'Geist', system-ui, sans-serif;
  --gh-globe-dot: #8f9090; --gh-globe-line: #3a3d43; --gh-live: #45bfa7;
  --gh-txr-bg: radial-gradient(70% 90% at 88% 8%, #3cc7aa17, transparent 60%), radial-gradient(60% 80% at 0% 100%, #f19c400d, transparent 70%), #1a1d21;
  font-family: var(--txb-body); }
.tx-brand .tx-head { font-family: var(--txb-head); font-stretch: normal; text-transform: none; font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.tx-brand .tx-horizon { padding-bottom: 16px; background: var(--txb-horizon) left bottom / 76px 3px no-repeat; }
.tx-brand .tx-primary { background: var(--txb-accent); color: var(--txb-on-accent); border-color: transparent; }
.tx-brand .tx-primary:hover { background: #5ad6bc; border-color: transparent; }
.tx-brand .gh-dl-btn { background: var(--txb-panel-2); border-color: var(--txb-line); color: var(--txb-fg); }
.tx-brand .gh-dl-btn:hover { border-color: var(--txb-accent); background: var(--txb-panel-2); }
/* Ana sayfa Tafix bölümü */
.gh-txr.tx-brand .gh-txr-frame { border-color: var(--txb-line); color: var(--txb-fg); }
.gh-txr.tx-brand .gh-txr-intro b { font-family: var(--txb-head); font-stretch: normal; text-transform: none; font-weight: 700; letter-spacing: -.04em; }
.gh-txr.tx-brand .gh-txr-lead { color: var(--txb-soft); }
.gh-txr.tx-brand .gh-txr-list li { border-left-color: var(--txb-line); }
.gh-txr.tx-brand .gh-txr-list b { color: var(--txb-fg); font-family: var(--txb-head); letter-spacing: -.01em; }
.gh-txr.tx-brand .gh-txr-list span { color: var(--txb-muted); }
/* Tafix sayfası (/topluluk-merkezi/) */
.community.tx-brand h1 { font-size: clamp(48px, 6vw, 84px); margin-bottom: 18px; }
.community.tx-brand .document-eyebrow { color: var(--txb-accent); }
.community.tx-brand .cm-lead { color: var(--txb-soft); }
.community.tx-brand .cm-app-card { background: var(--txb-panel); border-color: var(--txb-line); color: var(--txb-fg); }
.community.tx-brand .cm-app-card:hover { border-color: var(--txb-accent); }
.community.tx-brand .cm-app-card b { font-family: var(--txb-head); letter-spacing: -.02em; }
.community.tx-brand .cm-app-card em { color: var(--txb-accent); }
.community.tx-brand .cm-rules h2 { font-family: var(--txb-head); letter-spacing: -.02em; }
/* Tafix vitrini (/tafix/, 31 Ekim 2026): uygulama tafix.net'te; sayfa tanıtım + yönlendirme. Yalnız txb-* jetonları. */
.tx-vitrin { color: var(--txb-fg); }
.tx-vitrin a:not([class]) { color: var(--txb-accent); }
.tx-vitrin .breadcrumbs, .tx-vitrin .breadcrumbs a { color: var(--txb-muted); }
.tx-vitrin h2 { font-family: var(--txb-head); font-size: clamp(26px, 3vw, 36px); letter-spacing: -.025em; color: var(--txb-fg); margin: 0 0 12px; }
.tx-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.tx-vitrin .gh-more { min-height: 44px; padding: 0 20px; border: 1px solid var(--txb-line); border-radius: 999px; color: var(--txb-fg); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.tx-vitrin .gh-more:hover { border-color: var(--txb-accent); }
.tx-vitrin .gh-more.tx-primary { border-color: transparent; }
.tx-vitrin .cm-tafix { display: grid; gap: 16px; align-content: center; }
.tx-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tx-facts li { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--txb-line); border-radius: 14px; background: var(--txb-panel); }
.tx-facts b { font: 700 20px/1.2 var(--txb-head); color: var(--txb-accent); }
.tx-facts span { font-size: 13px; color: var(--txb-muted); }
.tx-section { margin-top: 72px; }
.tx-section > p { max-width: 720px; color: var(--txb-soft); margin: 0; }
.tx-vitrin .gh-txr-list li { border-left-color: var(--txb-line); }
.tx-vitrin .gh-txr-list b { color: var(--txb-fg); font-family: var(--txb-head); letter-spacing: -.01em; }
.tx-vitrin .gh-txr-list span { color: var(--txb-muted); line-height: 1.55; }
.tx-steps { list-style: none; counter-reset: tx-step; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tx-steps li { counter-increment: tx-step; display: grid; gap: 8px; padding: 24px; border: 1px solid var(--txb-line); border-radius: 14px; background: var(--txb-panel); }
.tx-steps li::before { content: counter(tx-step); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; background: var(--txb-accent); color: var(--txb-on-accent); font: 700 16px/1 var(--txb-head); }
.tx-steps b { font: 700 18px/1.25 var(--txb-head); }
.tx-steps span { color: var(--txb-soft); line-height: 1.55; }
.tx-vitrin .cm-rules { color: var(--txb-soft); margin-top: 72px; }
.tx-faq { border-color: var(--txb-line); border-radius: 14px; background: var(--txb-panel); margin-top: 56px; }
.tx-faq summary, .tx-faq .guide-notes h3 { font-family: var(--txb-head); color: var(--txb-fg); }
.tx-faq .guide-notes p { color: var(--txb-soft); }
.tx-faq .guide-links a { color: var(--txb-accent); }
@media (max-width: 760px) { .tx-steps, .tx-facts { grid-template-columns: minmax(0, 1fr); } .tx-section { margin-top: 56px; } }
/* Tafix içi giriş ekranı: dünya seçili Tafix temasının renklerini alır. */
html[data-tx-theme="ufuk"] .tx-auth-bg { --txa-bg: #111214; background: #111214; --gh-globe-dot: #8f9090; --gh-globe-line: #3a3d43; --gh-live: #45bfa7; }
html[data-tx-theme="koz"] .tx-auth-bg { --txa-bg: #0f0f10; background: #0f0f10; --gh-globe-dot: #87837c; --gh-globe-line: #34343a; --gh-live: #3cc7aa; }
html[data-tx-theme] .tx-auth-bg::after { background: radial-gradient(closest-side at 50% 46%, color-mix(in srgb, var(--txa-bg) 85%, transparent), color-mix(in srgb, var(--txa-bg) 40%, transparent) 70%, transparent); }
body:has(.community.tx-brand) { background: radial-gradient(900px 600px at 85% -10%, #3cc7aa0f, transparent 60%), radial-gradient(800px 600px at 0% 70%, #f19c400a, transparent 62%), #131518; }
.community.tx-brand { --gh-path-line: #8f909024; }
.cm-tafix { display: grid; gap: 14px; align-content: center; min-width: 0; }
.cm-tafix .gh-dl { justify-content: flex-start; margin: 0; }
.community.tx-brand .document-eyebrow { color: var(--txb-accent); }
/* Tafix markası: iki ana eylem aynı boyda; indirme düğmesi deniz yeşili (kehribar ana eylemden ayrı, zeminden belirgin). */
.tx-brand .gh-txr-actions .gh-more, .tx-brand .gh-dl-btn { min-height: 46px; padding: 0 20px; font-size: 14px; border-radius: 999px; }
.tx-brand .gh-dl-btn { gap: 10px; background: #45bfa72e; border: 1px solid #45bfa7b3; color: var(--txb-fg); font-weight: 700; }
.tx-brand .gh-dl-btn:hover { background: #45bfa74d; border-color: #45bfa7; }
.tx-brand .gh-dl-btn .gh-dl-ic { width: 24px; height: 24px; border-radius: 6px; margin-left: -8px; }
/* Tafix sayfası: indirme düğmesi kartla aynı genişlikte; dünya sağ sütunun tam yüksekliğinde (düğmenin üstünden kartın altına). */
.community.tx-brand .cm-apps { align-items: stretch; }
.cm-tafix .gh-dl-btns, .cm-tafix .gh-dl-btn { width: 100%; }
.cm-tafix .gh-dl-btn { justify-content: center; }
.community.tx-brand .cm-globe { min-height: 0; --gh-globe-scale: .495; }
@media (max-width: 760px) { .community.tx-brand .cm-globe { min-height: 300px; --gh-globe-scale: .46; } }
.community.tx-brand .cm-tafix .cm-app-card { min-height: 320px; align-items: center; padding: 40px; gap: 28px; }
.community.tx-brand .cm-tafix .cm-app-card img { width: 104px; height: 104px; border-radius: 24px; }
.community.tx-brand .cm-tafix .cm-app-card b { font-size: 36px; }
.community.tx-brand .cm-tafix .cm-app-card span span { font-size: 17px; line-height: 1.6; }
@media (max-width: 760px) { .community.tx-brand .cm-tafix .cm-app-card { min-height: 0; padding: 22px; gap: 16px; } .community.tx-brand .cm-tafix .cm-app-card img { width: 64px; height: 64px; border-radius: 16px; } .community.tx-brand .cm-tafix .cm-app-card b { font-size: 26px; } }