/* =========================================================================
   RivaCraft — "Riva" tasarım dili (FiveM sitesinden uyarlandı)
   Koyu mor-siyah zemin, metalik pembe vurgu. Tüm renkler --hue'dan türer:
   tek değişkeni değiştirerek sitenin rengini değiştirebilirsin.
   ========================================================================= */
:root {
  --hue: 340;
  --background: oklch(0.14 0.025 calc(var(--hue) - 5));
  --foreground: oklch(0.96 0.015 var(--hue));
  --card: oklch(0.19 0.035 calc(var(--hue) - 5));
  --popover: oklch(0.19 0.035 calc(var(--hue) - 5));
  --primary: oklch(0.76 0.15 var(--hue));
  --primary-fg: oklch(0.16 0.04 calc(var(--hue) - 5));
  --secondary: oklch(0.26 0.05 calc(var(--hue) - 5));
  --muted: oklch(0.24 0.04 calc(var(--hue) - 5));
  --muted-fg: oklch(0.72 0.06 var(--hue));
  --accent: oklch(0.32 0.09 calc(var(--hue) - 2));
  --border: oklch(0.85 0.12 var(--hue) / 16%);
  --input: oklch(0.85 0.12 var(--hue) / 22%);
  --destructive: oklch(0.704 0.191 22.216);
  --success: oklch(0.78 0.16 155);
  --warning: oklch(0.82 0.15 80);
  --w03: rgba(255, 255, 255, .03);
  --w05: rgba(255, 255, 255, .05);
  --w08: rgba(255, 255, 255, .08);
  --w10: rgba(255, 255, 255, .10);
  --w12: rgba(255, 255, 255, .12);
  --w20: rgba(255, 255, 255, .20);
  --p07: color-mix(in oklab, var(--primary) 7%, transparent);
  --p10: color-mix(in oklab, var(--primary) 10%, transparent);
  --p15: color-mix(in oklab, var(--primary) 15%, transparent);
  --p25: color-mix(in oklab, var(--primary) 25%, transparent);
  --p35: color-mix(in oklab, var(--primary) 35%, transparent);
  --radius: 24px;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Sora', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --glow: 0 20px 60px -25px var(--primary);
  --r: oklch(0.75 0.02 260);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); background: var(--background); color: var(--foreground); font-size: 15px; line-height: 1.6; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--foreground); }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .4em; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--p35); }
.container { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 16px; }
.container.narrow { max-width: 768px; }
.muted { color: var(--muted-fg); }
.center { text-align: center; }
.right { text-align: right; }
.mono { font-family: var(--font-mono); }
.empty { color: var(--muted-fg); text-align: center; padding: 22px 0; margin: 0; }
.pos { color: var(--success); font-weight: 600; }
.neg { color: var(--destructive); font-weight: 600; }
.text-primary { color: var(--primary); }
.pixel, .px-ico { image-rendering: pixelated; }
.px-ico { width: 16px; height: 16px; vertical-align: -3px; }
.px-ico.lg { width: 22px; height: 22px; vertical-align: -5px; }
.px-ico.xl { width: 40px; height: 40px; }
.px-ico.xxl { width: 60px; height: 60px; }
.discord-c { color: #98a1f8; }

/* ---------- HUD yardımcıları ---------- */
.hud-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-fg); font-weight: 500; }
.notch { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.notch-sm { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.grid-field { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--p10) 1px, transparent 1px), linear-gradient(to bottom, var(--p10) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%); }
.scanlines { position: relative; }
.scanlines::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient(to bottom, transparent 0 2px, color-mix(in oklab, var(--primary) 5%, transparent) 2px 3px); mix-blend-mode: overlay; }
.holo-sweep { position: relative; overflow: hidden; }
.holo-sweep::before { content: ''; position: absolute; inset: 0; translate: -110% 0; background: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--primary) 18%, transparent) 50%, transparent 70%); transition: translate .7s ease; pointer-events: none; }
.holo-sweep:hover::before { translate: 110% 0; }
.text-glow { text-shadow: 0 0 24px color-mix(in oklab, var(--primary) 45%, transparent); }
.animate-flicker { animation: flicker 6s steps(1) infinite; }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .35; } 94% { opacity: 1; } 96% { opacity: .5; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float { animation: float 4s ease-in-out infinite; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Butonlar (hap biçimli) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 999px; padding: 10px 20px; font: 600 14px var(--font-sans); cursor: pointer; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s, color .2s; text-decoration: none; white-space: nowrap; color: var(--foreground); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary, .btn-play { background: var(--primary); color: var(--primary-fg); box-shadow: 0 10px 50px -12px var(--primary); }
.btn-primary:hover, .btn-play:hover { color: var(--primary-fg); transform: scale(1.03); box-shadow: 0 14px 60px -10px var(--primary); }
.btn-green { background: var(--success); color: oklch(0.2 0.05 155); box-shadow: 0 10px 40px -14px var(--success); }
.btn-green:hover { color: oklch(0.2 0.05 155); transform: scale(1.03); }
.btn-glass, .btn-ghost { background: var(--w05); border-color: var(--w12); backdrop-filter: blur(16px); color: var(--foreground); }
.btn-glass:hover, .btn-ghost:hover { background: var(--w10); border-color: var(--w20); color: var(--foreground); }
.btn-light { background: var(--w05); border-color: var(--w10); color: var(--foreground); }
.btn-light:hover { border-color: var(--p35); color: var(--primary); }
.btn-white { background: #fff; color: #1a0d17; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-row.center { justify-content: center; }
.icon-btn { background: var(--w05); border: 1px solid var(--w10); width: 34px; height: 34px; border-radius: 999px; cursor: pointer; color: var(--foreground); display: inline-flex; align-items: center; justify-content: center; transition: .2s; }
.icon-btn:hover { border-color: var(--p35); color: var(--primary); }
.icon-btn.red { color: var(--destructive); }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); font-weight: 600; cursor: pointer; font-family: var(--font-mono); font-size: .92em; }
.more-link { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--w12); border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: var(--foreground); transition: .2s; }
.more-link:hover { border-color: var(--p35); color: var(--primary); }
.more-link i { font-size: 12px; transition: transform .2s; }
.more-link:hover i { transform: translateX(3px); }

/* ---------- Üst çubuk ---------- */
.topbar { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--w08); background: color-mix(in oklab, var(--background) 70%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; color: var(--foreground); flex-shrink: 0; }
.brand:hover { color: var(--foreground); }
.brand img { height: 40px; }
.brand-text { font-family: var(--font-heading); font-weight: 800; font-size: 18px; letter-spacing: -.02em; text-transform: uppercase; }
.brand-text span { color: var(--primary); }
.main-nav { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid var(--w08); background: var(--w03); }
.main-nav > a, .nav-more-btn { display: flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; font: 500 14px var(--font-sans); color: var(--muted-fg); white-space: nowrap; transition: .15s; background: none; border: 0; cursor: pointer; }
.main-nav > a i { display: none; }
.main-nav > a:hover, .nav-more-btn:hover { background: var(--w05); color: var(--foreground); }
.main-nav > a.active, .nav-more-btn.active { background: var(--p15); color: var(--primary); }
.main-nav > a.nav-admin { color: var(--primary); }
.nav-more { position: relative; }
.nav-more-btn i { font-size: 10px; transition: transform .2s; }
.nav-more:hover .nav-more-btn i, .nav-more:focus-within .nav-more-btn i { transform: rotate(180deg); }
.nav-more-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); min-width: 220px; background: var(--popover); border: 1px solid var(--border); border-radius: 18px; padding: 6px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7); opacity: 0; visibility: hidden; transition: .18s; z-index: 60; }
.nav-more::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.nav-more:hover .nav-more-menu, .nav-more:focus-within .nav-more-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-more-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; color: var(--foreground); font-size: 14px; }
.nav-more-menu a i { width: 18px; color: var(--muted-fg); font-size: 13px; }
.nav-more-menu a:hover, .nav-more-menu a.active { background: var(--p10); color: var(--primary); }
.nav-more-menu a:hover i, .nav-more-menu a.active i { color: var(--primary); }
.nav-user { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--w10); background: none; color: var(--muted-fg); cursor: pointer; }
.nav-toggle:hover { color: var(--primary); border-color: var(--p35); }
.btn-login { padding: 9px 18px; }
.pill-cart { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--p15); color: var(--primary); font-size: 14px; font-weight: 600; }
.pill-cart:hover { background: var(--p25); color: var(--primary); }
.dropdown { position: relative; }
.user-btn { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--w08); background: var(--w03); color: var(--foreground); cursor: pointer; font: 500 13px var(--font-sans); position: relative; transition: .15s; }
.user-btn:hover { border-color: var(--w20); background: var(--w08); }
.user-btn img { width: 28px; height: 28px; border-radius: 999px; }
.user-btn .dot { position: absolute; top: 2px; left: 24px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); border: 2px solid var(--background); }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 250px; background: var(--popover); border: 1px solid var(--border); border-radius: 18px; padding: 6px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .18s; z-index: 60; }
.dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.dm-head { display: flex; gap: 10px; align-items: center; padding: 8px 10px; }
.dm-head img { width: 38px; height: 38px; border-radius: 12px; }
.dm-head div { display: flex; flex-direction: column; line-height: 1.35; }
.dm-balance { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 4px 6px; padding: 10px 12px; border-radius: 14px; background: var(--p07); border: 1px solid var(--p15); }
.dm-balance > span { display: flex; flex-direction: column; line-height: 1.3; }
.dm-balance b { font-size: 14px; }
.dropdown-menu > a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; color: var(--foreground); font-size: 14px; }
.dropdown-menu > a i { width: 16px; color: var(--muted-fg); font-size: 13px; }
.dropdown-menu > a:hover { background: var(--w05); }
.dropdown-menu em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 11px; background: var(--primary); color: var(--primary-fg); padding: 0 7px; border-radius: 999px; }
.dm-sep { height: 1px; background: var(--w08); margin: 6px 4px; }
.dropdown-menu .logout, .dropdown-menu .logout i { color: var(--destructive); }

/* ---------- Sayfa iskeleti ---------- */
.page { position: relative; padding: 0 0 80px; min-height: 50vh; }
.page:not(.is-home) { padding-top: 40px; }
.page-glow { position: absolute; left: 0; right: 0; top: 0; height: 420px; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 0%, var(--primary), transparent 70%); opacity: .08; }
.page > .container { position: relative; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.crumb a { color: var(--muted-fg); }
.crumb a:hover { color: var(--primary); }
.crumb .sep { opacity: .4; }
.crumb .cur { color: var(--primary); }
.kicker { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--p25); background: var(--p10); color: var(--primary); font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.kicker i { font-size: 11px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.page-head h1 { font-size: clamp(34px, 5vw, 48px); font-weight: 700; margin: 16px 0 0; }
.page-head p { font-size: 18px; color: var(--muted-fg); margin: 12px 0 0; max-width: 640px; }
.page-head.center { flex-direction: column; align-items: center; text-align: center; }
.page-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; margin: 0 0 24px; }

.card, .widget { background: var(--w03); border: 1px solid var(--w10); border-radius: var(--radius); padding: 24px; }
.container > .card + .card, .container > .card + .grid-2, .container > .tabs + .card, .container > .grid-4 + .card, .container > .grid-3 + .card { margin-top: 20px; }
.card.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.card-title { font-size: 20px; font-weight: 600; }
.card-title.big { font-size: 32px; font-weight: 700; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.w-title { font-size: 16px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.layout.left { grid-template-columns: 260px minmax(0, 1fr); }
.content > * + * { margin-top: 20px; }
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.intro { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.intro > i { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--p15); color: var(--primary); font-size: 22px; flex-shrink: 0; }
.intro > div:nth-child(2) { flex: 1; min-width: 220px; }
.intro h2 { font-size: 22px; margin-bottom: 4px; }
.intro p { margin: 0; color: var(--muted-fg); }
.intro-balance { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.intro-balance small { color: var(--muted-fg); }
.intro-balance b { font-size: 20px; }

/* ---------- Ana sayfa: kahraman ---------- */
.hero { position: relative; height: 88vh; min-height: 560px; overflow: hidden; background: var(--background); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 42% 34% at 50% 46%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 72%); }
.helix { position: absolute; inset: 0; cursor: crosshair; }
.helix canvas { position: absolute; inset: 0; display: block; }
.hero-center { position: relative; z-index: 6; text-align: center; pointer-events: none; margin-top: -9vh; display: flex; flex-direction: column; align-items: center; }
.hero-title { font-family: var(--font-mono); font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; line-height: .9; margin: 14px 0 0; font-size: clamp(64px, 13vw, 140px); background: linear-gradient(to bottom, oklch(0.93 0.05 var(--hue)), oklch(0.8 0.13 var(--hue)) 50%, oklch(0.55 0.16 calc(var(--hue) - 15))); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 35px color-mix(in oklab, var(--primary) 35%, transparent)); }
.hero-sub { font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; color: var(--primary); letter-spacing: .42em; text-indent: .42em; font-size: clamp(16px, 2.2vw, 24px); margin: 18px 0 0; text-shadow: 0 2px 14px rgba(0, 0, 0, .65); }
.hero-logo { max-height: 220px; filter: drop-shadow(0 0 35px color-mix(in oklab, var(--primary) 35%, transparent)); margin-top: 14px; }
.hero-hud { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0 16px; }
.status-pill { display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 16px; border-radius: 999px; border: 1px solid var(--w10); background: rgba(0, 0, 0, .4); backdrop-filter: blur(24px); font-size: 14px; font-weight: 500; flex-wrap: wrap; justify-content: center; }
.status-pill b { color: var(--foreground); }
.status-pill .fa-users { color: var(--primary); font-size: 12px; }
.vsep { width: 1px; height: 16px; background: var(--w20); }
.ping { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--destructive); flex-shrink: 0; }
.ping.on { background: var(--success); }
.ping.on::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--success); animation: ping 1.4s cubic-bezier(0, 0, .2, 1) infinite; }
.ip-inline { background: none; border: 0; color: var(--muted-fg); cursor: pointer; font-size: 13px; display: flex; gap: 6px; align-items: center; padding: 0; }
.ip-inline:hover { color: var(--primary); }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 128px; background: linear-gradient(to top, var(--background), transparent); pointer-events: none; z-index: 4; }

/* Kayan veri şeridi */
.ticker { position: relative; overflow: hidden; border-top: 1px solid var(--w08); border-bottom: 1px solid var(--w08); background: var(--w03); padding: 12px 0; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 22px; width: max-content; animation: marquee 38s linear infinite; }
.ticker:hover .marquee-track { animation-play-state: paused; }
.tick { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-fg); white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.tick i { color: var(--primary); }
a.tick:hover { color: var(--foreground); }
.tick-dot { color: var(--primary); opacity: .5; font-size: 8px; }

/* Bölümler */
.section { position: relative; padding: 0 0 96px; }
.ticker + .section { padding-top: 72px; }
.glow-top::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 420px; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 0%, var(--primary), transparent 70%); opacity: .09; }
.glow-mid::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 400px; transform: translateY(-50%); pointer-events: none; background: radial-gradient(ellipse 45% 60% at 50% 50%, var(--primary), transparent 70%); opacity: .07; }
.section > .container { position: relative; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.section-head > div { max-width: 600px; }
.section-head h2 { font-size: clamp(32px, 4.6vw, 48px); font-weight: 700; margin: 16px 0 0; }
.section-head p { font-size: 18px; color: var(--muted-fg); margin: 12px 0 0; }
.section-head.center { justify-content: center; text-align: center; }
.section-head.center > div { display: flex; flex-direction: column; align-items: center; }

/* Adımlar */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.steps-line { position: absolute; top: 22px; left: 32px; right: 32px; height: 1px; background: linear-gradient(to right, color-mix(in oklab, var(--primary) 40%, transparent), var(--p25), transparent); }
.step { position: relative; }
.step-no { position: relative; display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); background: var(--background); font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--primary); margin-bottom: 20px; }
.step h3 { font-size: 18px; }
.step p { font-size: 14px; color: var(--muted-fg); margin: 8px 0 0; line-height: 1.65; }

/* Özellikler */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature { border-radius: var(--radius); border: 1px solid var(--w10); background: linear-gradient(to bottom, var(--w05), rgba(255, 255, 255, .01)); padding: 24px; transition: border-color .2s; }
.feature:hover { border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.f-icon { display: flex; width: 44px; height: 44px; border-radius: 16px; align-items: center; justify-content: center; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); margin-bottom: 20px; font-size: 18px; }
.feature h3 { font-size: 18px; }
.feature p { font-size: 14px; color: var(--muted-fg); margin: 8px 0 0; line-height: 1.65; }

/* Bento vitrin */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(200px, auto)); gap: 12px; }
.tile { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--w10); min-height: 200px; color: var(--foreground); isolation: isolate; transition: border-color .3s; }
.tile:hover { color: var(--foreground); border-color: var(--p35); }
.tile.large { grid-column: span 2; grid-row: span 2; min-height: 440px; }
.tile.wide { grid-column: span 2; }
.tile-media { position: absolute; inset: 0; background: center 70% / cover no-repeat; image-rendering: pixelated; transition: transform .7s; z-index: -3; }
.tile:hover .tile-media { transform: scale(1.05); }
.tile-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(to top, var(--background), color-mix(in oklab, var(--background) 40%, transparent), transparent); }
.tile-shade::after { content: ''; position: absolute; inset: 0; background: var(--p10); mix-blend-mode: overlay; }
.tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; }
.tile-icon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .3); color: var(--primary); backdrop-filter: blur(4px); margin-bottom: 12px; font-size: 14px; }
.tile h3 { font-size: 20px; margin: 0; }
.tile.large h3 { font-size: 32px; }
.tile p { font-size: 14px; color: var(--muted-fg); margin: 4px 0 0; }
.tile.large p { font-size: 16px; max-width: 420px; }

/* SSS */
.faq-list { display: grid; gap: 12px; }
.faq { border-radius: 18px; border: 1px solid var(--w10); background: var(--w03); padding: 0 20px; transition: .2s; }
.faq:hover { border-color: var(--w20); }
.faq[open] { border-color: var(--p25); background: color-mix(in oklab, var(--primary) 4%, transparent); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--primary); font-size: 13px; transition: transform .2s; }
.faq[open] summary i { transform: rotate(180deg); }
.faq .prose { padding: 0 0 16px; color: var(--muted-fg); font-size: 14px; }
.faq .prose p { margin: 0 0 8px; }
.faq-vote { padding: 0 0 16px; color: var(--muted-fg); font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.faq-more { margin-top: 24px; font-size: 14px; }

/* Kapanış bandı */
.band { position: relative; overflow: hidden; }
.band-media { position: absolute; inset: 0; background: url('/img/scenes/night.svg') center 70% / cover; image-rendering: pixelated; opacity: .35; }
.band::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--background), transparent, var(--background)); z-index: 1; }
.band-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 384px; z-index: 1; background: radial-gradient(ellipse 55% 100% at 50% 100%, var(--primary), transparent 70%); opacity: .14; }
.band-inner { position: relative; z-index: 2; max-width: 768px; text-align: center; padding: 80px 16px 96px; }
.band-line { width: 160px; height: 1px; margin: 0 auto 40px; background: linear-gradient(to right, transparent, color-mix(in oklab, var(--primary) 50%, transparent), transparent); }
.band h2 { font-size: clamp(36px, 6vw, 60px); font-weight: 700; }
.band p { font-size: 18px; color: var(--muted-fg); max-width: 520px; margin: 20px auto 36px; }
.page.is-home { padding-bottom: 0; }

/* ---------- Haber kartları ---------- */
.news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.news-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.news-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--w10); background: var(--w03); color: var(--foreground); transition: transform .25s, border-color .25s, box-shadow .25s; }
.news-card:hover { transform: translateY(-4px); border-color: var(--p35); box-shadow: var(--glow); color: var(--foreground); }
.nc-media { position: relative; height: 160px; background: center 75% / cover no-repeat; image-rendering: pixelated; }
.nc-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--background) 70%, transparent), transparent 60%), var(--p07); }
.tag { position: absolute; top: 12px; right: 12px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: var(--primary); color: var(--primary-fg); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.tag.static { position: static; display: inline-block; margin-bottom: 12px; }
.nc-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.nc-body h3 { font-size: 18px; margin: 0; transition: color .2s; }
.news-card:hover h3 { color: var(--primary); }
.nc-body p { font-size: 14px; color: var(--muted-fg); margin: 8px 0 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nc-meta { display: flex; gap: 14px; align-items: center; margin-top: 18px; font-size: 12px; color: var(--muted-fg); }
.nc-meta .hud-label { margin-right: auto; }
.pagination { display: flex; gap: 6px; justify-content: center; margin: 32px auto 0; }
.pagination a { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--w10); color: var(--foreground); font-family: var(--font-mono); font-size: 14px; }
.pagination a:hover { border-color: var(--p35); color: var(--primary); }
.pagination a.active { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.pagination a.disabled { pointer-events: none; opacity: .3; }

.article { padding: 0; overflow: hidden; }
.article-img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.article-head, .article .prose, .article-foot { padding-left: 32px; padding-right: 32px; }
.article-head { padding-top: 32px; }
.article-head h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }
.author { display: flex; gap: 12px; align-items: center; margin: 18px 0 24px; }
.author img { width: 40px; height: 40px; border-radius: 12px; }
.author div { display: flex; flex-direction: column; line-height: 1.35; }
.author small { color: var(--muted-fg); font-size: 13px; }
.prose { line-height: 1.8; overflow-wrap: anywhere; }
.prose img { border-radius: 14px; }
.article-foot { display: flex; gap: 16px; align-items: center; border-top: 1px solid var(--w08); margin-top: 28px; padding-top: 18px; padding-bottom: 24px; color: var(--muted-fg); }
.like-btn { background: var(--p10); color: var(--primary); border: 1px solid var(--p25); padding: 7px 16px; border-radius: 999px; cursor: pointer; font: 600 14px var(--font-sans); transition: .2s; }
.like-btn.liked { background: var(--primary); color: var(--primary-fg); }
.comment { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--w08); }
.comment img { width: 42px; height: 42px; border-radius: 12px; }
.comment p { margin: 4px 0 0; color: var(--muted-fg); }
.comment b a { color: var(--foreground); }

/* ---------- Kenar bileşenleri ---------- */
.w-hero { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--p07); border: 1px solid var(--p15); margin-bottom: 12px; }
.w-hero img { width: 44px; height: 44px; border-radius: 12px; }
.w-hero div { display: flex; flex-direction: column; line-height: 1.3; }
.w-hero small { color: var(--muted-fg); font-size: 12px; }
.w-hero b a { color: var(--foreground); }
.w-hero-tag { margin-left: auto; color: var(--primary); font-weight: 600; font-size: 13px; text-align: right; }
.search-box { display: flex; gap: 8px; }
.search-box input { flex: 1; min-width: 0; }
.search-box button { flex-shrink: 0; width: 46px; border-radius: 999px; border: 0; background: var(--primary); color: var(--primary-fg); cursor: pointer; }
.search-box.sm input { padding: 8px 14px; }
.discord-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, #5865f2, #7983f5); color: #fff; }
.dc-logo { font-weight: 800; letter-spacing: .06em; }
.dc-count { display: flex; flex-direction: column; text-align: right; line-height: 1.2; }
.dc-count b { font-size: 22px; }
.discord-card .btn { grid-column: 1 / -1; justify-self: start; }
.side-menu { display: flex; flex-direction: column; gap: 2px; }
.side-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; color: var(--muted-fg); font-size: 14px; transition: .15s; }
.side-menu a i { width: 16px; font-size: 13px; }
.side-menu a em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 12px; opacity: .7; }
.side-menu a:hover { background: var(--w05); color: var(--foreground); }
.side-menu a.active { background: var(--p15); color: var(--primary); font-weight: 500; }
.balance { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(160deg, var(--p15), var(--w03)); border-color: var(--p25); }
.balance small { color: var(--muted-fg); }
.balance b { font-size: 20px; font-family: var(--font-heading); }
.cta-card { background: linear-gradient(160deg, var(--p10), var(--w03)); }
.cta-card p { color: var(--muted-fg); font-size: 14px; }
.mini-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; color: var(--foreground); border-bottom: 1px solid var(--w08); }
.mini-row:last-child { border: 0; }
.mini-row:hover { color: var(--primary); }
.mini-row img { width: 32px; height: 32px; border-radius: 10px; }
.mini-row span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mini-row b { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-row small { color: var(--muted-fg); font-size: 12px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; flex-wrap: wrap; }
.reward i { color: var(--primary); }

/* ---------- Tablolar ---------- */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--w10); white-space: nowrap; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--w08); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl.compact th, .tbl.compact td { padding: 8px 6px; font-size: 13px; }
.tbl tr.clickable { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--w03); }
.av { width: 24px; height: 24px; border-radius: 8px; vertical-align: middle; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--p15); color: var(--primary); white-space: nowrap; }
.badge.green, .badge.st-approved, .badge.st-answered { background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); }
.badge.red, .badge.st-rejected { background: color-mix(in oklab, var(--destructive) 15%, transparent); color: var(--destructive); }
.badge.orange, .badge.st-open, .badge.st-pending { background: color-mix(in oklab, var(--warning) 15%, transparent); color: var(--warning); }
.badge.gray, .badge.st-closed { background: var(--w08); color: var(--muted-fg); }

/* ---------- Formlar ---------- */
input, select, textarea { width: 100%; font: 15px var(--font-sans); padding: 11px 16px; border: 1px solid var(--input); border-radius: 14px; background: var(--w03); color: var(--foreground); transition: .15s; }
select option { background: var(--card); }
input::placeholder, textarea::placeholder { color: color-mix(in oklab, var(--muted-fg) 70%, transparent); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent); }
textarea { resize: vertical; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted-fg); }
.form.inline { flex-direction: row; }
.form .btn { align-self: flex-start; }
.form .btn-block { align-self: stretch; }
label.check { flex-direction: row !important; align-items: center; gap: 10px; cursor: pointer; font-weight: 400; color: var(--foreground) !important; }
label.check input { width: 18px; height: 18px; accent-color: var(--primary); }
.notice { margin: 16px 0 0; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--p25); background: var(--p07); color: var(--foreground); font-size: 14px; }
.notice.warn { border-color: color-mix(in oklab, var(--warning) 35%, transparent); background: color-mix(in oklab, var(--warning) 8%, transparent); margin: 0 0 20px; }
.input-icon { position: relative; }
.input-icon i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted-fg); font-size: 13px; }
.input-icon input { padding-left: 42px; }
.code-input { text-align: center; font-family: var(--font-mono); font-size: 20px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.qty-form input { width: 76px; padding: 6px 10px; }

/* ---------- Giriş / kayıt ---------- */
.auth { display: grid; grid-template-columns: 1fr 1fr; max-width: 980px; margin: 20px auto 0; border-radius: 28px; overflow: hidden; border: 1px solid var(--w10); background: var(--w03); }
.auth.single { grid-template-columns: 1fr; max-width: 480px; }
.auth-side { position: relative; padding: 48px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 30% 20%, var(--p25), transparent 70%), var(--w03); border-right: 1px solid var(--w08); }
.auth-side::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--p10) 1px, transparent 1px), linear-gradient(to bottom, var(--p10) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 70% 70% at 40% 40%, #000, transparent); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 40% 40%, #000, transparent); }
.auth-side > * { position: relative; }
.auth-side h2 { font-family: var(--font-mono); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; font-size: 46px; margin: 0; background: linear-gradient(to bottom, oklch(0.93 0.05 var(--hue)), oklch(0.76 0.15 var(--hue))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-side p { color: var(--muted-fg); }
.auth-side ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.auth-side li i { width: 26px; color: var(--primary); }
.auth-form { padding: 48px; display: flex; flex-direction: column; gap: 16px; }
.auth-form h1 { font-size: 32px; font-weight: 700; margin: 0; }
.auth-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted-fg); }
.auth-form .muted { font-size: 14px; }

/* ---------- Mağaza ---------- */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.modes.big { margin-bottom: 24px; }
.mode-card { position: relative; height: 230px; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--w10); color: var(--foreground); isolation: isolate; transition: transform .25s, border-color .25s, box-shadow .25s; }
.modes.big .mode-card { height: 240px; }
.mode-card:hover { transform: translateY(-4px); border-color: var(--p35); box-shadow: var(--glow); color: var(--foreground); }
.mode-bg { position: absolute; inset: 0; background: center 70% / cover no-repeat; image-rendering: pixelated; z-index: -2; transition: transform .7s; }
.mode-card:hover .mode-bg { transform: scale(1.05); }
.mode-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--background), color-mix(in oklab, var(--background) 70%, transparent) 45%, color-mix(in oklab, var(--background) 20%, transparent)); }
.mode-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; }
.mode-body h3 { font-size: 24px; font-weight: 700; margin: 0; transition: color .2s; }
.mode-card:hover h3 { color: var(--primary); }
.mode-body p { font-size: 14px; color: var(--muted-fg); margin: 4px 0 0; }
.mode-body small { display: block; color: var(--muted-fg); font-size: 13px; margin-top: 2px; }
.mode-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--primary); }
.mode-go i { font-size: 12px; transition: transform .2s; }
.mode-card:hover .mode-go i { transform: translateX(4px); }
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trust div { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; padding: 16px; border-radius: 18px; border: 1px solid var(--w10); background: var(--w03); }
.trust i { grid-row: span 2; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); }
.trust b { font-size: 14px; font-weight: 600; }
.trust small { color: var(--muted-fg); font-size: 12px; }
.server-banner { position: relative; overflow: hidden; height: 190px; border-radius: var(--radius); border: 1px solid var(--w10); background: center 60% / cover; image-rendering: pixelated; margin-bottom: 18px; display: flex; align-items: flex-end; }
.server-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--background) 10%, color-mix(in oklab, var(--background) 50%, transparent) 60%, transparent), var(--p07); }
.server-banner > div { position: relative; z-index: 1; padding: 28px; }
.server-banner h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; margin: 0; }
.server-banner p { margin: 6px 0 0; color: var(--muted-fg); }
.server-tabs { display: flex; gap: 4px; margin-bottom: 24px; overflow-x: auto; padding: 4px; border-radius: 999px; border: 1px solid var(--w08); background: var(--w03); width: fit-content; max-width: 100%; }
.server-tabs a { display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; color: var(--muted-fg); line-height: 1.25; flex-shrink: 0; transition: .15s; }
.server-tabs a span:last-child { display: flex; flex-direction: column; }
.server-tabs a b { font-weight: 500; font-size: 14px; }
.server-tabs a small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.server-tabs a:hover { background: var(--w05); color: var(--foreground); }
.server-tabs a.active { background: var(--p15); color: var(--primary); }
.st-thumb { width: 36px; height: 36px; border-radius: 999px; background: center / cover; image-rendering: pixelated; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.product { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--w10); background: var(--w03); transition: transform .25s, border-color .25s, box-shadow .25s; }
.product:hover { transform: translateY(-4px); border-color: var(--p35); box-shadow: var(--glow); }
.r-common { --r: oklch(0.75 0.02 260); }
.r-rare { --r: oklch(0.72 0.14 240); }
.r-epic { --r: oklch(0.7 0.18 300); }
.r-legendary { --r: oklch(0.82 0.15 75); }
.rarity { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 3px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--r); background: color-mix(in oklab, var(--r) 14%, rgba(0, 0, 0, .4)); border: 1px solid color-mix(in oklab, var(--r) 35%, transparent); backdrop-filter: blur(8px); }
.rarity.static { position: static; }
.ribbon { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 3px 10px; border-radius: 999px; background: var(--primary); color: var(--primary-fg); font-size: 12px; font-weight: 700; }
.p-img { position: relative; height: 170px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 60%, color-mix(in oklab, var(--r) 22%, transparent), transparent 62%), linear-gradient(to bottom right, color-mix(in oklab, var(--primary) 18%, transparent), color-mix(in oklab, var(--primary) 5%, transparent), transparent); }
.p-img::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--w05) 1px, transparent 1px), linear-gradient(to bottom, var(--w05) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(circle at 50% 55%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 10%, transparent 70%); }
.p-img img { position: relative; width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); transition: transform .5s; }
.product:hover .p-img img { transform: translateY(-6px) scale(1.06); }
.p-body { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 20px; }
.p-body > small { font-size: 12px; }
.p-body h3 { font-size: 18px; margin: 2px 0 0; }
.p-body h3 a { color: var(--foreground); }
.product:hover .p-body h3 a { color: var(--primary); }
.price { display: flex; align-items: center; gap: 6px; margin: 10px 0 14px; }
.price b { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--foreground); }
.price s { color: var(--muted-fg); font-size: 13px; }
.price.big b { font-size: 36px; }
.p-actions { display: flex; gap: 8px; margin-top: auto; }
.p-actions form:first-child { flex: 1; }
.p-actions form:first-child .btn { width: 100%; }
.p-actions .btn-light { width: 40px; padding: 0; height: 100%; min-height: 36px; }
.low-stock { color: var(--warning); font-size: 12px; margin-top: 8px; font-weight: 500; }
.rarity-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.rarity-legend .w-title { width: 100%; }
.rl { padding: 3px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--r); background: color-mix(in oklab, var(--r) 14%, transparent); border: 1px solid color-mix(in oklab, var(--r) 30%, transparent); }
.product-detail { display: grid; grid-template-columns: 380px 1fr; gap: 32px; }
.pd-img { position: relative; min-height: 340px; border-radius: 20px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 55%, color-mix(in oklab, var(--r) 28%, transparent), transparent 62%), linear-gradient(to bottom right, var(--p15), transparent); border: 1px solid var(--w08); }
.pd-img img { width: 170px; height: 170px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .5)); animation: float 4s ease-in-out infinite; }
.pd-info h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 700; margin-top: 12px; }
.pd-info .p-actions { margin: 20px 0; max-width: 460px; }
.pd-info .p-actions .btn-light { width: auto; padding: 14px 22px; }
.perks { list-style: none; padding: 16px 18px; margin: 0; border-radius: 18px; background: var(--w03); border: 1px solid var(--w08); display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted-fg); }
.perks i { color: var(--primary); width: 20px; }
.perks b { color: var(--foreground); }
.summary .btn { margin-top: 14px; }

/* Sekmeler (hap grubu) */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin-bottom: 24px; padding: 4px; border-radius: 999px; border: 1px solid var(--w08); background: var(--w03); width: fit-content; max-width: 100%; }
.tabs a { display: flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; color: var(--muted-fg); font-size: 14px; font-weight: 500; transition: .15s; }
.tabs a i { font-size: 12px; }
.tabs a:hover { color: var(--foreground); background: var(--w05); }
.tabs a.active { background: var(--p15); color: var(--primary); }
.tabs .tabs-right { margin-left: 8px; padding: 0 14px; font-size: 14px; color: var(--muted-fg); }
.tabs a.tabs-right { background: var(--primary); color: var(--primary-fg); padding: 7px 16px; }

.chest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; }
.chest-item { display: flex; flex-direction: column; gap: 4px; text-align: center; padding: 14px; border-radius: 20px; border: 1px solid var(--w10); background: var(--w03); transition: .2s; }
.chest-item:hover { border-color: var(--p35); transform: translateY(-3px); }
.ci-img { height: 100px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 8px; background: radial-gradient(circle, var(--p15), transparent 70%); }
.ci-img img { width: 60px; height: 60px; object-fit: contain; }
.chest-item form { margin-top: 10px; }

.package { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; transition: transform .25s, border-color .25s, box-shadow .25s; }
.package:hover { transform: translateY(-4px); border-color: var(--p35); box-shadow: var(--glow); }
.package::before { content: ''; position: absolute; top: -60px; left: 50%; width: 200px; height: 200px; transform: translateX(-50%); background: radial-gradient(circle, var(--p25), transparent 70%); pointer-events: none; }
.package > * { position: relative; }
.pk-coins { height: 60px; display: flex; justify-content: center; align-items: flex-end; margin-bottom: 8px; }
.pk-coins img { width: 38px; height: 38px; margin: 0 -7px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.pk-coins img:nth-child(2) { transform: translateY(-12px); }
.pk-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-fg); }
.pk-credit { font-family: var(--font-heading); font-size: 36px; font-weight: 700; line-height: 1.1; }
.pk-price { font-size: 16px; font-weight: 600; color: var(--primary); margin: 10px 0 14px; }
.big-icon { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; margin: 0 auto 14px; background: var(--p15); color: var(--primary); font-size: 30px; }

/* Kart oyunu */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; perspective: 1000px; }
.game-card { aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; }
.gc-inner { position: relative; width: 100%; height: 100%; transition: transform .7s; transform-style: preserve-3d; }
.game-card.flipped .gc-inner { transform: rotateY(180deg); }
.gc-front, .gc-back { position: absolute; inset: 0; border-radius: 20px; display: grid; place-items: center; backface-visibility: hidden; padding: 10px; text-align: center; font-weight: 700; }
.gc-front { border: 1px solid var(--p25); background: url('/img/items/chest.svg') center / 40% no-repeat, linear-gradient(to bottom right, var(--p25), var(--p07)), var(--card); image-rendering: pixelated; transition: transform .25s, box-shadow .25s; }
.gc-front i { display: none; }
.game-card:hover:not(.flipped) .gc-front { transform: translateY(-6px); box-shadow: var(--glow); }
.gc-back { transform: rotateY(180deg); background: var(--primary); color: var(--primary-fg); font-family: var(--font-heading); }
.game-card.lose .gc-back { background: var(--muted); color: var(--muted-fg); }
.cards.playing .game-card { pointer-events: none; }

/* ---------- Forum ---------- */
.forum-sec { padding: 0; overflow: hidden; }
.fs-head { display: grid; grid-template-columns: 1fr 90px 90px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--w10); background: var(--p07); }
.fs-head h3 { margin: 0; font-size: 16px; }
.fs-head span { text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); }
.fs-row { display: grid; grid-template-columns: 48px 1fr 90px 90px; gap: 12px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--w08); color: var(--foreground); transition: background .15s; }
.fs-row:last-child { border: 0; }
.fs-row:hover { background: var(--w03); color: var(--foreground); }
.fs-row:hover b { color: var(--primary); }
.fs-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); }
.fs-info { display: flex; flex-direction: column; line-height: 1.35; }
.fs-info b { font-weight: 600; transition: color .15s; }
.fs-info small { color: var(--muted-fg); }
.fs-num { text-align: center; font-family: var(--font-mono); font-weight: 700; }
.topic-row { display: flex; gap: 14px; align-items: center; padding: 14px 8px; border-bottom: 1px solid var(--w08); color: var(--foreground); border-radius: 14px; }
.topic-row:last-child { border-bottom: 0; }
.topic-row:hover { background: var(--w03); color: var(--foreground); }
.topic-row.unread { background: var(--p07); }
.topic-row img { width: 40px; height: 40px; border-radius: 12px; }
.tr-info { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.tr-info small { color: var(--muted-fg); }
.tr-info i { color: var(--primary); font-size: 12px; }
.tr-stat { display: flex; flex-direction: column; align-items: center; min-width: 80px; line-height: 1.3; font-family: var(--font-mono); }
.tr-stat small { font-family: var(--font-sans); color: var(--muted-fg); font-size: 11px; }
.post { display: grid; grid-template-columns: 160px 1fr; padding: 0; overflow: hidden; margin-bottom: 14px; }
.post-user { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; text-align: center; background: var(--w03); border-right: 1px solid var(--w08); }
.post-user img { height: 100px; }
.post-user a { color: var(--foreground); }
.post-body { position: relative; padding: 20px 24px; }
.post-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted-fg); padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--w08); }
.post-content { overflow-wrap: anywhere; }
.post-body form.right { position: absolute; bottom: 14px; right: 14px; }
.list-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--w08); color: var(--foreground); }

/* ---------- Profil ---------- */
.profile-head { display: flex; gap: 28px; align-items: center; background: radial-gradient(ellipse 60% 100% at 0% 50%, var(--p15), transparent 70%), var(--w03); }
.body-skin { height: 200px; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .5)); }
.profile-head h1 { font-size: 34px; font-weight: 700; }
.stats { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.stats div { display: flex; flex-direction: column; line-height: 1.3; min-width: 100px; padding: 10px 18px; border-radius: 16px; border: 1px solid var(--w10); background: var(--w03); }
.stats b { font-family: var(--font-heading); font-size: 20px; }
.stats small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-fg); }

/* Ayın bağışçıları (podyum) */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; text-align: center; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.pod b { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod small { color: var(--muted-fg); font-size: 11px; }
.pod-base { width: 100%; margin-top: 6px; border-radius: 12px 12px 4px 4px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 800; color: var(--primary-fg); }
.pod-1 .pod-base { height: 60px; background: var(--primary); }
.pod-2 .pod-base { height: 46px; background: color-mix(in oklab, var(--primary) 60%, var(--muted)); }
.pod-3 .pod-base { height: 34px; background: color-mix(in oklab, var(--primary) 35%, var(--muted)); }
.pod-empty { width: 40px; height: 52px; display: grid; place-items: center; border-radius: 10px; background: var(--w05); color: var(--muted-fg); }

/* ---------- Yardım ---------- */
.help-hero { position: relative; overflow: hidden; text-align: center; padding: 48px 24px; margin-bottom: 24px; background: radial-gradient(ellipse 60% 100% at 50% 0%, var(--p25), transparent 70%), var(--w03); }
.help-hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }
.help-hero .search-box { max-width: 560px; margin: 18px auto 0; }

/* ---------- Destek sohbeti ---------- */
.chat { display: flex; flex-direction: column; gap: 16px; margin: 12px 0 22px; }
.msg { display: flex; gap: 12px; max-width: 80%; }
.msg img { width: 38px; height: 38px; border-radius: 12px; }
.bubble { padding: 12px 16px; border-radius: 6px 18px 18px 18px; background: var(--w05); border: 1px solid var(--w08); }
.bubble p { margin: 4px 0; overflow-wrap: anywhere; }
.bubble small { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-fg); }
.msg.staff { align-self: flex-end; flex-direction: row-reverse; }
.msg.staff .bubble { border-radius: 18px 6px 18px 18px; background: var(--p10); border-color: var(--p25); }
.app-card, .vote-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--foreground); transition: transform .25s, border-color .25s, box-shadow .25s; }
.app-card:hover, .vote-card:hover { transform: translateY(-4px); border-color: var(--p35); box-shadow: var(--glow); color: var(--foreground); }
.vote-card img { max-height: 60px; }
.vote-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--p15); color: var(--primary); font-size: 22px; }
.error-page { padding: 64px 24px; }
.error-page h1 { font-family: var(--font-mono); font-size: clamp(72px, 14vw, 140px); font-weight: 800; margin: 0; background: linear-gradient(to bottom, oklch(0.93 0.05 var(--hue)), var(--primary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-page p { color: var(--muted-fg); max-width: 480px; margin: 12px auto 24px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--w08); padding: 56px 0 28px; background: linear-gradient(to bottom, transparent, var(--w03)); }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; }
.footer-cols > div > .hud-label { display: block; margin-bottom: 14px; }
.footer-cols > div > a { display: block; padding: 4px 0; color: var(--muted-fg); font-size: 14px; }
.footer-cols > div > a:hover { color: var(--primary); }
.f-brand p { color: var(--muted-fg); font-size: 14px; margin: 12px 0 16px; max-width: 320px; }
.ip-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--w12); background: var(--w03); color: var(--foreground); cursor: pointer; font-size: 13px; transition: .2s; }
.ip-chip:hover { border-color: var(--p35); color: var(--primary); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--w08); font-size: 13px; color: var(--muted-fg); }
.f-social { display: flex; gap: 8px; }
.f-social a { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--w10); color: var(--muted-fg); transition: .2s; }
.f-social a:hover { border-color: var(--p35); color: var(--primary); }
.footer-note { margin-top: 16px; opacity: .6; font-size: 9.5px; }

/* Sabit butonlar ve bildirimler */
.connect-float { position: fixed; left: 18px; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 0; background: var(--primary); color: var(--primary-fg); font: 600 14px var(--font-sans); cursor: pointer; box-shadow: 0 10px 50px -12px var(--primary); transition: transform .2s; }
.connect-float:hover { transform: scale(1.04); }
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--w12); background: color-mix(in oklab, var(--background) 70%, transparent); backdrop-filter: blur(16px); color: var(--foreground); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .25s; }
.to-top:hover { border-color: var(--p35); color: var(--primary); }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.live-toast { position: fixed; left: 18px; bottom: 78px; z-index: 45; display: flex; gap: 12px; align-items: center; max-width: 340px; padding: 10px 16px 10px 10px; border-radius: 18px; border: 1px solid var(--border); background: color-mix(in oklab, var(--popover) 90%, transparent); backdrop-filter: blur(16px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7); transform: translateY(20px); opacity: 0; transition: .4s; }
.live-toast.show { transform: none; opacity: 1; }
.live-toast[hidden] { display: none; }
.live-toast img { width: 38px; height: 38px; border-radius: 12px; }
.live-toast div { display: flex; flex-direction: column; line-height: 1.4; font-size: 13px; }
.live-toast b { color: var(--primary); font-weight: 600; }
.live-toast small { color: var(--muted-fg); font-size: 11.5px; }
.cookie { position: fixed; right: 18px; bottom: 76px; z-index: 70; max-width: 380px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; background: var(--popover); border: 1px solid var(--border); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7); }
.cookie[hidden] { display: none; }
.cookie p { margin: 0; font-size: 13px; color: var(--muted-fg); }
.maint { min-height: 100vh; display: grid; place-items: center; text-align: center; background: var(--background); color: var(--foreground); }
.maint .logo-text { font-family: var(--font-mono); font-size: 64px; font-weight: 800; color: var(--primary); }

/* SweetAlert2 — sitenin koyu temasına uyarlandı */
.swal2-popup { background: var(--popover) !important; color: var(--foreground) !important; border: 1px solid var(--border); border-radius: 24px !important; font-family: var(--font-sans) !important; }
.swal2-title { font-family: var(--font-heading) !important; color: var(--foreground) !important; }
.swal2-html-container { color: var(--muted-fg) !important; }
.swal2-styled.swal2-confirm { background: var(--primary) !important; color: var(--primary-fg) !important; border-radius: 999px !important; font-weight: 600 !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel { background: var(--w08) !important; color: var(--foreground) !important; border-radius: 999px !important; }
.swal2-toast { border-radius: 16px !important; }

/* ---------- Hareketi azalt ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .animate-flicker, .float, .pd-img img, .ping.on::before { animation: none !important; }
  .holo-sweep::before { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Duyarlı (responsive) ---------- */
@media (max-width: 1024px) {
  .main-nav { display: none; position: absolute; top: 64px; left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; border-radius: 22px; background: var(--popover); border: 1px solid var(--border); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7); }
  .nav-open .main-nav { display: flex; }
  .main-nav > a { padding: 10px 16px; }
  .main-nav > a i { display: inline-block; width: 18px; font-size: 13px; }
  .nav-more-btn { display: none; }
  .nav-more::after { display: none; }
  .nav-more-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; background: none; padding: 0; min-width: 0; }
  .nav-more-menu a { padding: 10px 16px; border-radius: 999px; color: var(--muted-fg); }
  .nav-toggle { display: inline-grid; place-items: center; }
  .layout, .layout.left { grid-template-columns: 1fr; }
  .grid-4, .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid, .news-grid.three, .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-line { display: none; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 14px; }
  .hide-sm { display: none !important; }
  .u-name { display: none; }
  .user-btn { padding: 4px; }
  .btn-login { padding: 8px 14px; font-size: 13px; }
  .hero { height: 82vh; }
  .hero-hud { bottom: 88px; }
  .hero-hud .btn-lg { padding: 12px 20px; font-size: 14px; }
  .news-grid, .news-grid.three, .grid-2, .grid-3, .grid-4, .product-grid, .modes, .steps, .features, .trust { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .tile.large, .tile.wide { grid-column: auto; grid-row: auto; min-height: 260px; }
  .section { padding-bottom: 72px; }
  .section-head p, .page-head p { font-size: 16px; }
  .auth { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-form { padding: 28px 22px; }
  .product-detail { grid-template-columns: 1fr; }
  .pd-img { min-height: 220px; }
  .pd-img img { width: 120px; height: 120px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .profile-head { flex-direction: column; text-align: center; }
  .profile-head .stats, .profile-head .btn-row { justify-content: center; }
  .post { grid-template-columns: 1fr; }
  .post-user { flex-direction: row; justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--w08); }
  .post-user img { height: 50px; }
  .fs-row { grid-template-columns: 44px 1fr 50px; padding: 14px 16px; }
  .fs-row .fs-num:last-child, .fs-head span:last-child { display: none; }
  .fs-head { grid-template-columns: 1fr 50px; }
  .tr-stat:last-child { display: none; }
  .msg { max-width: 100%; }
  .form.inline { flex-direction: column; }
  .article-head, .article .prose, .article-foot { padding-left: 20px; padding-right: 20px; }
  .card, .widget { padding: 18px; }
  .connect-float span { display: none; }
  .connect-float { padding: 14px; }
  .live-toast { left: 12px; right: 12px; max-width: none; }
  .cookie { left: 12px; right: 12px; max-width: none; }
  .footer-cols { grid-template-columns: 1fr; }
  .tabs { border-radius: 22px; }
}

/* =========================================================================
   v2 — Yazı stilleri ve HUD hatları
   Başlıklar: Chakra Petch (teknik, köşeli). Logo ile uyumlu metalik yazı.
   ========================================================================= */
:root {
  --font-display: 'Chakra Petch', 'Sora', sans-serif;
  --metal: linear-gradient(175deg, #ffffff 0%, #eceef2 22%, #9da2aa 48%, #f4f5f7 62%, #7b8089 100%);
}
.stat b, .kpi b, .price b, .pk-credit, .fs-num, .tr-stat, .nc-meta, .stats b { font-variant-numeric: tabular-nums; }

/* Başlıklar */
.section-head h2, .page-head h1, .band h2, .server-banner h1, .pd-info h1, .auth-form h1, .help-hero h1, .card-title.big, .article-head h1, .profile-head h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; }
.section-head h2 { line-height: 1.04; }
.section-head h2 em, .page-head h1 em, .band h2 .text-primary { font-style: normal; background: linear-gradient(100deg, var(--primary), oklch(0.88 0.08 var(--hue)) 55%, var(--primary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-title, .w-title, .feature h3, .step h3, .nc-body h3, .p-body h3, .mode-body h3, .tile h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }

/* Kicker → numaralı HUD etiketi:  01 ——— BAŞLANGIÇ */
.kicker { border: 0; background: none; padding: 0; border-radius: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; gap: 10px; }
.kicker::before { content: ''; width: 30px; height: 1px; background: linear-gradient(to right, transparent, var(--primary)); }
.is-home { counter-reset: sec; }
.is-home .section-head .kicker::after { counter-increment: sec; content: counter(sec, decimal-leading-zero); order: -1; color: var(--muted-fg); }

/* Bölümler arası ayırıcı hat + ortada elmas */
.is-home .section > .container::before { content: ''; display: block; height: 1px; margin: 0 0 64px; background: linear-gradient(to right, transparent, var(--w12) 18%, var(--p35) 50%, var(--w12) 82%, transparent); }
.is-home .section > .container::after { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); border: 1px solid var(--primary); background: var(--background); box-shadow: 0 0 10px var(--primary); }
.is-home .ticker + .section > .container::before, .is-home .ticker + .section > .container::after { display: none; }

/* Kart köşe braketleri (HUD hatları) */
.feature::after, .product::after, .news-card::after, .step::after, .tile::after { content: ''; position: absolute; inset: 10px; pointer-events: none; z-index: 3;
  background:
    linear-gradient(var(--primary), var(--primary)) top left / 14px 1px no-repeat,
    linear-gradient(var(--primary), var(--primary)) top left / 1px 14px no-repeat,
    linear-gradient(var(--primary), var(--primary)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--primary), var(--primary)) bottom right / 1px 14px no-repeat;
  opacity: .28; transition: opacity .3s, inset .3s; }
.news-card, .step { position: relative; }
.step::after { inset: -12px -8px; opacity: 0; }
.feature:hover::after, .product:hover::after, .news-card:hover::after, .step:hover::after, .tile:hover::after { opacity: 1; inset: 6px; }
.step:hover::after { inset: -14px -10px; }
.card, .widget, .feature, .product, .news-card, .tile, .mode-card, .faq, .stat, .trust div, .chest-item { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.f-icon, .fs-icon, .vote-icon, .trust i { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); border-radius: 0; }

/* Marka (logo + yazı) */
.brand { gap: 10px; }
.brand img.brand-logo { height: 34px; width: auto; filter: drop-shadow(0 0 10px color-mix(in oklab, var(--primary) 35%, transparent)); transition: transform .3s; }
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.06); }
.brand-text { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: .05em; }
.brand-text span { background: linear-gradient(to right, var(--primary), oklch(0.86 0.09 var(--hue))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-brand .brand-logo { height: 40px; }

/* Kahraman: logo, metalik başlık, HUD çerçevesi */
.hero-center { margin-top: -12vh; }
.hero-logo { width: clamp(110px, 15vw, 180px); height: auto; max-height: none; margin: 0 0 4px; filter: drop-shadow(0 0 30px color-mix(in oklab, var(--primary) 45%, transparent)) drop-shadow(0 14px 24px rgba(0, 0, 0, .65)); animation: float 5s ease-in-out infinite; }
.hero-kicker { margin-top: 6px; }
.hero-title { display: flex; flex-wrap: wrap; justify-content: center; gap: .16em; font-family: var(--font-display); font-weight: 700; letter-spacing: .03em; font-size: clamp(46px, 8.6vw, 108px); line-height: .95; margin-top: 10px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; filter: none; }
.hero-title .metal { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(255, 255, 255, .12)); }
.hero-title .accent { background: linear-gradient(to bottom, oklch(0.92 0.07 var(--hue)), var(--primary) 55%, oklch(0.56 0.16 calc(var(--hue) - 15))); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px color-mix(in oklab, var(--primary) 45%, transparent)); }
.hud-frame { position: absolute; inset: 28px; z-index: 6; pointer-events: none; }
.hud-frame i { position: absolute; width: 36px; height: 36px; border: 0 solid color-mix(in oklab, var(--primary) 55%, transparent); }
.hud-frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hud-frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hud-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hud-frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.hud-side { position: absolute; top: 50%; z-index: 6; writing-mode: vertical-rl; opacity: .65; pointer-events: none; }
.hud-side.left { left: 38px; transform: translateY(-50%) rotate(180deg); }
.hud-side.right { right: 38px; transform: translateY(-50%); }
.scan-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 5; pointer-events: none; background: linear-gradient(to right, transparent, color-mix(in oklab, var(--primary) 70%, transparent), transparent); box-shadow: 0 0 12px var(--primary); animation: scan 7s ease-in-out infinite; }
@keyframes scan { 0%, 100% { transform: translateY(10vh); opacity: 0; } 10%, 90% { opacity: .55; } 50% { transform: translateY(72vh); } }

/* Üst menü: aktif sekmede ince alt hat */
.main-nav > a.active { position: relative; }
.main-nav > a.active::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 18px; height: 2px; border-radius: 2px; transform: translateX(-50%); background: var(--primary); box-shadow: 0 0 8px var(--primary); }

@media (prefers-reduced-motion: reduce) { .scan-line { display: none; } .hero-logo { animation: none; } }
@media (max-width: 680px) {
  .hud-side, .hud-frame { display: none; }
  .hero-logo { width: 96px; }
  .hero-center { margin-top: -14vh; }
  .brand-text { font-size: 17px; }
  .is-home .section > .container::before { margin-bottom: 48px; }
  .main-nav > a.active::after { display: none; }
}