/* ============================================================
   Giriş ekranı: ikiye bölünmüş bölüm seçimi (Web | FiveM)
   Her taraf kendi rengini --c / --c-rgb ile taşır.
   ============================================================ */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body.hub { height: 100dvh; overflow: hidden; background: #0b0b0d; }
body.hub::after { content: ""; position: fixed; inset: 0; z-index: 50; background: #0b0b0d; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
body.hub.is-leaving::after { opacity: 1; }

/* ---------- Üst çubuk ---------- */
.hub-top { position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 22px clamp(16px, 3vw, 36px); pointer-events: none; transition: opacity .5s ease, transform .5s var(--ease); animation: hubFade .8s .9s both; }
.hub-top > * { pointer-events: auto; }
.hub-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; justify-self: start; }
.hub-logo img { height: 30px; width: auto; }
.hub-logo .logo-mark { width: 30px; height: 30px; }
.hub-pick { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hub-discord { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); transition: background .25s, transform .4s var(--spring); }
.hub-discord:hover { background: rgba(255,255,255,.12); transform: scale(1.05); }
.is-choosing ~ .hub-hint, body.hub:has(.is-choosing) .hub-top { opacity: 0; transform: translateY(-10px); pointer-events: none; }

.hub-hint { position: fixed; bottom: 20px; left: 50%; z-index: 20; transform: translateX(-50%); font-size: 11.5px; color: rgba(255,255,255,.45); pointer-events: none; white-space: nowrap; transition: opacity .4s; animation: hubFade .8s 1.5s both; }
.hub-hint kbd { font: inherit; padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); }
body.hub:has(.is-choosing) .hub-hint { opacity: 0; }

/* ---------- Bölünmüş alan ---------- */
.hub-split { display: flex; height: 100dvh; }
.hub-side {
    --mx: 0; --my: 0;
    position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    padding: 0 24px clamp(48px, 9vh, 96px); text-align: center; outline: none;
    transition: flex-grow .9s var(--ease), opacity .6s ease;
}
.hub-web { animation: hubInL 1.1s var(--ease) both; }
.hub-fivem { animation: hubInR 1.1s var(--ease) both; }
@keyframes hubInL { from { transform: translateX(-60%); opacity: 0; } }
@keyframes hubInR { from { transform: translateX(60%); opacity: 0; } }
@keyframes hubFade { from { opacity: 0; } }

@media (hover: hover) and (min-width: 761px) {
    .hub-split:not(.is-choosing) .hub-side:hover, .hub-split:not(.is-choosing) .hub-side:focus-visible { flex-grow: 1.45; }
    .hub-split:not(.is-choosing):has(.hub-side:hover) .hub-side:not(:hover) .hub-content,
    .hub-split:not(.is-choosing):has(.hub-side:hover) .hub-side:not(:hover) .hub-art { opacity: .4; filter: blur(2px) grayscale(.5); }
}

/* Arka plan katmanları */
.hub-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(70% 55% at 50% 100%, rgba(var(--c-rgb), .38), transparent 70%),
        radial-gradient(60% 50% at 50% 0%, rgba(var(--c-rgb), .12), transparent 70%),
        linear-gradient(180deg, #0e0e11, #0b0b0d); }
.hub-bg::before { content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); mask: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); }
.hub-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(1.15); transform: scale(1.06) translate(calc(var(--mx) * -10px), calc(var(--my) * -8px)); transition: transform .8s var(--ease), filter .8s ease, opacity 1s ease; opacity: 0; }
.hub-video.is-ready { opacity: 1; }
.hub-side:hover .hub-video { filter: brightness(.68) saturate(1.25); }
.hub-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,13,.96) 0%, rgba(11,11,13,.55) 34%, rgba(11,11,13,.1) 65%, rgba(var(--c-rgb), .12) 100%); }
/* Video varken hazır görsel geri planda kalır */
.has-video .hub-art { opacity: .0; }

/* ---------- Hazır görseller ---------- */
.hub-art { position: absolute; left: 50%; top: 44%; width: min(560px, 82%); aspect-ratio: 1.15; translate: -50% -50%;
    transform: translate(calc(var(--mx) * 22px), calc(var(--my) * 16px));
    transition: transform .9s var(--ease), opacity .6s ease, filter .6s ease, scale .9s var(--ease); }
.hub-side:hover .hub-art { scale: 1.05; }

/* Web: tarayıcı pencereleri */
.win { position: absolute; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: rgba(22,22,27,.92); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--c-rgb), .08), 0 20px 60px -30px rgba(var(--c-rgb), .6); }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); }
.win-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.win-bar i:first-child { background: rgba(var(--c-rgb), .9); }
.win-bar b { margin-left: 8px; font: 500 10.5px var(--mono); color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.w1 { left: 4%; top: 6%; width: 64%; height: 70%; rotate: -5deg; animation: hubFloat 7s ease-in-out infinite; z-index: 2; }
.w2 { right: 0; top: 0; width: 46%; height: 42%; rotate: 6deg; animation: hubFloat 8s -2s ease-in-out infinite; z-index: 3; }
.w3 { right: 4%; bottom: 2%; width: 44%; height: 40%; rotate: 3deg; animation: hubFloat 9s -4s ease-in-out infinite; z-index: 1; }
@keyframes hubFloat { 50% { translate: 0 -12px; } }
.sk { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); }
.sk-nav { width: 100%; height: 6px; opacity: .6; margin-bottom: 8px; }
.sk-h1 { height: 14px; width: 82%; background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.25)); }
.sk-h1.short { width: 55%; background: linear-gradient(90deg, rgba(var(--c-rgb), 1), rgba(var(--c-rgb), .5)); }
.sk-p { width: 70%; margin-top: 4px; }
.sk-row { display: flex; gap: 8px; margin-top: 6px; }
.sk-btn { width: 70px; height: 20px; border-radius: 6px; background: rgba(var(--c-rgb), .95); }
.sk-btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.2); }
.sk-cards { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.sk-cards span { border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.code .win-body { gap: 5px; text-align: left; }
.code code { display: block; font: 500 11.5px/1.5 var(--mono); color: rgba(255,255,255,.75); white-space: nowrap; }
.code u { text-decoration: none; color: rgba(var(--c-rgb), 1); }
.code s { text-decoration: none; color: #c4b5fd; }
.code q { quotes: none; color: #86efac; }
.chart { flex-direction: row; align-items: flex-end; gap: 7%; padding: 16px 16px 14px; }
.chart span { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(to top, rgba(var(--c-rgb), .35), rgba(var(--c-rgb), .95)); animation: hubBar 1.2s var(--ease) both; }
.chart span:nth-child(2n) { animation-delay: .1s; }
.chart span:nth-child(3n) { animation-delay: .2s; }
@keyframes hubBar { from { height: 0; } }
.caret { display: inline-block; width: .5em; height: .1em; margin-left: .06em; vertical-align: baseline; background: currentColor; animation: hubBlink 1s steps(1) infinite; }
.code .caret { width: 7px; height: 13px; vertical-align: -2px; background: rgba(var(--c-rgb), 1); }
@keyframes hubBlink { 50% { opacity: 0; } }

/* FiveM: ürün görselleri + logo */
.shot { position: absolute; width: 58%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px -20px rgba(0,0,0,.85), 0 20px 60px -30px rgba(var(--c-rgb), .7); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.s0 { left: 21%; top: 6%; z-index: 2; animation: hubFloat 7s ease-in-out infinite; }
.s1 { left: 0; top: 34%; rotate: -8deg; z-index: 1; filter: brightness(.7); animation: hubFloat 8s -3s ease-in-out infinite; }
.s2 { right: 0; top: 30%; rotate: 8deg; z-index: 1; filter: brightness(.7); animation: hubFloat 9s -5s ease-in-out infinite; }
.hub-emblem { position: absolute; left: 50%; bottom: 4%; z-index: 3; translate: -50% 0; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 26px; background: rgba(18,18,22,.9); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 60px -10px rgba(var(--c-rgb), .7); backdrop-filter: blur(12px); animation: hubFloat 6s -1s ease-in-out infinite; }
.hub-emblem img { width: 60%; height: 60%; object-fit: contain; }
.hub-emblem .logo-mark { width: 56px; height: 56px; border-radius: 16px; }
.hub-emblem .logo-mark svg { width: 32px; height: 32px; }
.hub-ring { position: absolute; inset: -14px; border-radius: 34px; border: 1px dashed rgba(var(--c-rgb), .55); animation: hubSpin 18s linear infinite; }
@keyframes hubSpin { to { rotate: 360deg; } }
/* Görsel yoksa logo ortada büyük durur */
.fivem-art:not(:has(.shot)) .hub-emblem { bottom: auto; top: 50%; translate: -50% -50%; width: 180px; height: 180px; border-radius: 44px; }
.fivem-art:not(:has(.shot)) .hub-emblem .logo-mark { width: 100px; height: 100px; border-radius: 26px; }
.fivem-art:not(:has(.shot)) .hub-emblem .logo-mark svg { width: 56px; height: 56px; }
.fivem-art:not(:has(.shot)) .hub-ring { inset: -22px; border-radius: 60px; }

/* ---------- Yazılar ---------- */
.hub-content { position: relative; display: flex; flex-direction: column; align-items: center; transition: opacity .5s ease, filter .5s ease, transform .9s var(--ease); }
.hub-content > * { animation: hubUp .9s var(--ease) both; }
.hub-kicker { animation-delay: .55s; font-size: 11.5px; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.hub-title { animation-delay: .65s; margin-top: 8px; font-weight: 800; line-height: .9; letter-spacing: -.045em; color: #fff; font-size: clamp(64px, min(11vw, 18vh), 220px);
    text-shadow: 0 8px 50px rgba(var(--c-rgb), .55), 0 2px 0 rgba(0,0,0,.5);
    transition: transform .7s var(--spring), letter-spacing .7s var(--ease); }
.hub-title-web { font-family: var(--mono); font-weight: 700; letter-spacing: -.06em; }
.hub-title-web .caret { color: rgba(var(--c-rgb), 1); }
.hub-meta { animation-delay: .75s; margin-top: 16px; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; font-size: 13px; color: rgba(255,255,255,.75); }
.hub-meta i { font-style: normal; color: rgba(var(--c-rgb), 1); text-shadow: 0 0 12px rgba(var(--c-rgb), .9); }
.hub-badge { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: #fff; background: rgba(var(--c-rgb), .25); border: 1px solid rgba(var(--c-rgb), .55); }
@keyframes hubUp { from { opacity: 0; transform: translateY(26px); } }

/* Buton: cam yüzey + sağda renkli ok kutusu. Aktifken kutu genişleyip tüm butonu doldurur,
   ok kayarak yenisiyle yer değiştirir, üzerinden bir ışık geçer. */
.hub-enter {
    --pad: 5px; --icon: 40px;
    animation-delay: .85s; position: relative; isolation: isolate; overflow: hidden;
    margin-top: 28px; display: inline-flex; align-items: center; gap: 18px;
    padding: var(--pad) var(--pad) var(--pad) 22px; border-radius: 14px;
    font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 12px 32px -14px rgba(0,0,0,.7);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: transform .6s var(--spring), box-shadow .45s ease, border-color .45s ease;
}
.hub-enter::before {
    content: ""; position: absolute; z-index: -1; top: var(--pad); bottom: var(--pad); right: var(--pad); width: var(--icon);
    border-radius: 10px; background: linear-gradient(135deg, rgba(var(--c-rgb), 1), rgba(var(--c-rgb), .72));
    box-shadow: 0 0 22px -4px rgba(var(--c-rgb), .8), inset 0 1px 0 rgba(255,255,255,.25);
    transition: width .65s var(--ease), top .5s var(--ease), bottom .5s var(--ease), right .5s var(--ease), border-radius .5s var(--ease);
    animation: hubBreath 2.8s ease-in-out infinite;
}
@keyframes hubBreath { 50% { box-shadow: 0 0 34px 0 rgba(var(--c-rgb), 1), inset 0 1px 0 rgba(255,255,255,.25); } }
.hub-enter-label { position: relative; white-space: nowrap; }
.hub-enter-icon { position: relative; width: var(--icon); height: calc(var(--icon) - 2px); display: grid; place-items: center; overflow: hidden; }
.hub-enter-icon svg { grid-area: 1 / 1; transition: transform .55s var(--ease); }
.hub-enter-icon svg + svg { transform: translateX(-170%); }
.hub-enter-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translateX(-130%);
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%); }

.hub-side:hover .hub-enter, .hub-side:focus-visible .hub-enter,
a.hub-enter:hover, a.hub-enter:focus-visible {
    transform: scale(1.05); border-color: rgba(var(--c-rgb), .7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 20px 50px -14px rgba(var(--c-rgb), .95);
}
.hub-side:hover .hub-enter::before, .hub-side:focus-visible .hub-enter::before,
a.hub-enter:hover::before, a.hub-enter:focus-visible::before, .hub-enter.is-solid::before {
    top: 0; bottom: 0; right: 0; width: 100%; border-radius: 13px; animation: none;
}
.hub-side:hover .hub-enter-icon svg, a.hub-enter:hover .hub-enter-icon svg { transform: translateX(170%); }
.hub-side:hover .hub-enter-icon svg + svg, a.hub-enter:hover .hub-enter-icon svg + svg { transform: translateX(0); }
.hub-side:hover .hub-enter-shine, a.hub-enter:hover .hub-enter-shine { transform: translateX(130%); transition: transform 1s var(--ease) .15s; }

.hub-side:hover .hub-title, .hub-side:focus-visible .hub-title { transform: scale(1.06); }
.hub-side:focus-visible .hub-title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 10px; text-decoration-color: rgba(var(--c-rgb), .8); }

/* ---------- Orta çizgi ---------- */
.hub-divider { position: relative; z-index: 5; flex: 0 0 0; width: 0; transition: opacity .4s ease; }
.hub-divider i { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
    background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 1) 25%, #ff4fa3 50%, rgba(var(--accent-rgb), 1) 75%, transparent);
    box-shadow: 0 0 18px 2px rgba(var(--accent-rgb), .7), 0 0 50px 6px rgba(255, 79, 163, .25);
    transform-origin: center; animation: hubLine 1.2s .6s var(--ease) both; }
@keyframes hubLine { from { transform: scaleY(0); opacity: 0; } }

/* ---------- Seçim + yükleme ---------- */
.hub-split.is-choosing .hub-divider { opacity: 0; }
.hub-split.is-choosing .hub-side { flex-grow: 0; pointer-events: none; }
.hub-split.is-choosing .hub-side.is-chosen { flex-grow: 1; }
.hub-split.is-choosing .hub-side:not(.is-chosen) .hub-content { opacity: 0; }
.is-chosen .hub-content { transform: translateY(-46px); }
.is-chosen .hub-enter { opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s; }
.is-chosen .hub-title { transform: scale(1.12); }
.is-chosen .hub-art { scale: 1.12; }

.hub-load { position: absolute; left: 50%; bottom: clamp(48px, 9vh, 96px); width: min(360px, 80%); translate: -50% 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 14px; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .6s var(--ease); pointer-events: none; }
.is-chosen .hub-load { opacity: 1; transform: none; transition-delay: .55s; }
.hub-load-text { grid-column: 1 / -1; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.hub-bar { height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.1); }
.hub-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--c-rgb), .6), rgba(var(--c-rgb), 1)); box-shadow: 0 0 14px rgba(var(--c-rgb), .9); }
.hub-pct { min-width: 4ch; text-align: right; font-size: 12px; color: rgba(255,255,255,.85); }

/* ---------- Tek bölüm sayfası (Web: yakında) ---------- */
.hub-static { justify-content: center; padding-bottom: 0; }
.hub-static .hub-bg { background: radial-gradient(60% 55% at 50% 60%, rgba(var(--c-rgb), .3), transparent 70%), radial-gradient(50% 40% at 50% 0%, rgba(var(--c-rgb), .1), transparent 70%), #0b0b0d; }
.hub-static .hub-shade { background: radial-gradient(ellipse at center, rgba(11,11,13,.2), rgba(11,11,13,.85)); }
.hub-soon { animation-delay: .85s; max-width: 520px; margin-top: 22px; color: rgba(255,255,255,.7); font-size: 15.5px; line-height: 1.7; }
.hub-actions { animation-delay: .95s; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hub-actions .hub-enter { animation: none; }
.hub-enter.is-solid { border-color: rgba(var(--c-rgb), .7); }
/* Tek sayfada butonlar kendi üzerine gelinince aktifleşir, bölümün tamamıyla değil */
.hub-static:hover .hub-enter:not(:hover):not(:focus-visible) { transform: none; border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 12px 32px -14px rgba(0,0,0,.7); }
.hub-static:hover .hub-enter:not(:hover):not(:focus-visible):not(.is-solid)::before { top: var(--pad); bottom: var(--pad); right: var(--pad); width: var(--icon); border-radius: 10px; animation: hubBreath 2.8s ease-in-out infinite; }
.hub-static:hover .hub-enter:not(:hover) .hub-enter-icon svg { transform: none; }
.hub-static:hover .hub-enter:not(:hover) .hub-enter-icon svg + svg { transform: translateX(-170%); }
.hub-static:hover .hub-enter:not(:hover) .hub-enter-shine { transform: translateX(-130%); transition: none; }

/* ---------- Telefon: üst/alt bölünme ---------- */
@media (max-width: 760px) {
    .hub-split { flex-direction: column; }
    .hub-side { padding-bottom: 28px; justify-content: flex-end; }
    .hub-web { animation-name: hubInT; padding-top: 70px; }
    .hub-fivem { animation-name: hubInB; }
    @keyframes hubInT { from { transform: translateY(-60%); opacity: 0; } }
    @keyframes hubInB { from { transform: translateY(60%); opacity: 0; } }
    .hub-divider { height: 0; width: auto; }
    .hub-divider i { top: -1px; bottom: auto; left: 0; right: 0; width: auto; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 1) 25%, #ff4fa3 50%, rgba(var(--accent-rgb), 1) 75%, transparent); animation-name: hubLineX; }
    @keyframes hubLineX { from { transform: scaleX(0); opacity: 0; } }
    .hub-art { top: 42%; width: min(330px, 70%); opacity: .75; }
    .hub-title { font-size: clamp(54px, 15vw, 84px); }
    .hub-meta { margin-top: 10px; font-size: 11.5px; }
    .hub-enter { --pad: 4px; --icon: 34px; margin-top: 14px; gap: 14px; padding-left: 18px; font-size: 13px; border-radius: 12px; }
    .hub-enter::before { border-radius: 9px; }
    .hub-pick { display: none; }
    .hub-top { grid-template-columns: 1fr 1fr; padding: 16px; }
    .hub-hint { display: none; }
    .is-chosen .hub-content { transform: translateY(-80px); }
    .hub-load { bottom: 40px; }
}
@media (max-width: 760px) and (max-height: 700px) { .hub-art { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .hub-side, .hub-content > *, .hub-top, .hub-hint, .hub-divider i, .win, .shot, .hub-emblem, .hub-ring, .chart span { animation: none !important; }
    .hub-side { transition-duration: .3s; }
}