/* ==========================================================================
   İskelet: intro, arka plan, sidebar, topbar + sekmeler, footer, modallar
   ========================================================================== */

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 22px; background: radial-gradient(60% 50% at 50% 50%, #0b1633 0%, var(--bg-0) 70%); transition: opacity .6s var(--ease), visibility .6s; }
.intro.is-done { opacity: 0; visibility: hidden; }
.no-intro .intro { display: none; }
.intro__mark { position: relative; display: grid; place-items: center; width: 132px; height: 132px; }
.intro__mark .brand__mark { animation: intro-pop .8s var(--ease-spring) both; }
.intro__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--cyan); border-right-color: var(--accent); animation: spin .9s linear infinite; }
.intro__word { display: flex; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .32em; }
.intro__word span { opacity: 0; animation: intro-letter .5s var(--ease) forwards; animation-delay: calc(.25s + var(--i) * 45ms); }
.intro__word span:nth-child(n+6) { color: var(--accent-hi); font-weight: 600; }
@keyframes intro-pop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
@keyframes intro-letter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; } }

/* ---------- arka plan (blur yok: yumuşak gradyan daireler) ---------- */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop__aurora { position: absolute; border-radius: 50%; animation: aurora 26s ease-in-out infinite alternate; will-change: transform; }
.backdrop__aurora--a { width: 70vw; height: 70vw; left: -25vw; top: -35vw; background: radial-gradient(circle, rgba(var(--aurora-a), .38) 0%, rgba(var(--aurora-a), .12) 35%, transparent 65%); }
.backdrop__aurora--b { width: 55vw; height: 55vw; right: -20vw; top: 5vh; background: radial-gradient(circle, rgba(var(--aurora-b), .26) 0%, rgba(var(--aurora-b), .08) 35%, transparent 65%); animation-delay: -9s; }
.backdrop__aurora--c { width: 60vw; height: 60vw; left: 20vw; bottom: -40vw; background: radial-gradient(circle, rgba(var(--aurora-c), .26) 0%, rgba(var(--aurora-c), .08) 35%, transparent 65%); animation-delay: -16s; }
.backdrop__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(120, 150, 220, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 150, 220, .045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%); }
.backdrop__particles { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes aurora { 50% { transform: translate(6vw, 4vh) scale(1.08); } 100% { transform: translate(-4vw, 8vh) scale(.95); } }

/* ---------- uygulama ---------- */
.main { display: flex; flex-direction: column; min-height: 100vh; margin-left: var(--sidebar-w); transition: margin-left .35s var(--ease); }
.sidebar-mini .main { margin-left: var(--sidebar-w-mini); }
.page { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 22px var(--gutter) 60px; }
.view.is-entering { animation: view-in .5s var(--ease) both; }
.view.is-loading { min-height: 60vh; opacity: .6; }
@keyframes view-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- marka ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand__mark { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-grad); color: #fff; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 22px -4px rgba(var(--accent-rgb), .9); }
.brand__mark::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); transform: translateX(-120%); animation: mark-shine 4.5s ease-in-out infinite; }
.brand__mark .ico { width: 21px; height: 21px; stroke-width: 2.1; }
.brand__mark--xl { width: 80px; height: 80px; border-radius: 22px; }
.brand__mark--xl .ico { width: 42px; height: 42px; }
.brand__mark--lg { width: 64px; height: 64px; border-radius: 18px; }
.brand__mark--lg .ico { width: 34px; height: 34px; }
.brand__word { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: .04em; line-height: 1; }
.brand__word em { margin-left: 3px; font-style: normal; font-weight: 600; font-size: .7em; letter-spacing: .24em; color: var(--accent-hi); }
@keyframes mark-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------- sidebar ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; display: flex; flex-direction: column; width: var(--sidebar-w); background: rgba(8, 13, 26, .96); border-right: 1px solid var(--line); transition: width .35s var(--ease), transform .35s var(--ease); }
.sidebar__head { display: flex; align-items: center; gap: 8px; height: var(--topbar-h); padding: 0 14px; border-bottom: 1px solid var(--line); }
.sidebar__close { display: none; margin-left: auto; }

.mode-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; flex: 1; padding: 4px; border-radius: 12px; background: var(--bg-0); border: 1px solid var(--line); }
.mode-switch__item { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 9px; font-size: 13px; font-weight: 800; color: #fff; transition: color .25s; }
.mode-switch__item .ico { width: 16px; height: 16px; }
.mode-switch:not(.is-sports) .mode-switch__item:last-of-type,
.mode-switch.is-sports .mode-switch__item:first-of-type { color: var(--text-dim); }
.mode-switch__glider { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: 34px; border-radius: 9px; background: var(--accent-grad); box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb), .9); transition: transform .45s var(--ease-spring); }
.mode-switch.is-sports .mode-switch__glider { transform: translateX(100%); }

.sidebar__scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 12px 20px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-dim); white-space: nowrap; text-align: left; transition: background-color .2s, color .2s; }
.nav-link .ico { width: 19px; height: 19px; transition: transform .3s var(--ease-spring), color .2s; }
.nav-link:hover { background: var(--bg-2); color: var(--text); }
.nav-link:hover .ico { transform: scale(1.14); color: var(--accent-hi); }
.nav-link.is-active { background: linear-gradient(90deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .02)); color: var(--text); }
.nav-link.is-active::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.nav-link.is-active .ico { color: var(--accent-hi); }
.nav-link__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-link--home { margin-bottom: 6px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-hi); box-shadow: 0 0 10px var(--green-hi); }

.nav-acc { margin-top: 6px; border-radius: 12px; transition: background-color .25s; }
.nav-acc.is-open { background: rgba(120, 150, 220, .035); }
.nav-acc__head { display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 800; text-align: left; }
.nav-acc__head:hover { background: var(--bg-2); }
.nav-acc__head > .ico:first-child { color: var(--accent-hi); }
.nav-acc__head span { flex: 1; }
.nav-acc__caret { width: 16px; height: 16px; color: var(--text-mute); transition: transform .3s var(--ease); }
.nav-acc.is-open .nav-acc__caret { transform: rotate(180deg); }
.nav-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.nav-acc.is-open .nav-acc__body { grid-template-rows: 1fr; }
.nav-acc__body > ul { min-height: 0; overflow: hidden; padding: 0 4px; }
.nav-acc.is-open .nav-acc__body > ul { padding-bottom: 6px; }
.nav-acc .nav-link { height: 38px; font-size: 13.5px; }

/* menünün altındaki "Uygulamamızı indirin" bloğu: app-install.css */
.sidebar__foot { padding: 10px 12px 14px; border-top: 1px solid var(--line); }

@media (min-width: 1100px) {
  .sidebar-mini .sidebar { width: var(--sidebar-w-mini); }
  .sidebar-mini .mode-switch, .sidebar-mini .nav-link__label, .sidebar-mini .nav-link .pill, .sidebar-mini .online-dot,
  .sidebar-mini .side-app, .sidebar-mini .nav-acc__head { display: none; }
  .sidebar-mini .sidebar__head { justify-content: center; padding: 0; }
  .sidebar-mini .nav-link { justify-content: center; padding: 0; }
  .sidebar-mini .nav-acc { background: none; }
  .sidebar-mini .nav-acc__body { grid-template-rows: 1fr; }
  .sidebar-mini .nav-acc + .nav-acc { border-top: 1px solid var(--line); padding-top: 6px; }
  .sidebar-mini .sidebar__scroll { overflow: visible; }
  .sidebar-mini .nav-link::after { content: attr(data-tip); position: absolute; left: calc(100% + 14px); top: 50%; padding: 7px 11px; border-radius: 8px; background: var(--bg-4); color: var(--text); font-size: 12.5px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-6px, -50%); transition: opacity .15s, transform .2s var(--ease); }
  .sidebar-mini .nav-link:hover::after { opacity: 1; transform: translate(0, -50%); }
}
.sidebar-backdrop { position: fixed; inset: 0; z-index: 85; background: rgba(2, 4, 12, .5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }

/* ---------- topbar ---------- */
/* backdrop-filter yok: altında hareket eden arka plan her karede yeniden bulanıklaştırılırdı */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(6, 10, 20, .95); border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.topbar.is-scrolled { box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .8); }
.topbar__row { display: flex; align-items: center; gap: 14px; height: var(--topbar-h); max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.topbar__burger, .topbar__search { display: none; }
.topbar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.topbar__burger, .topbar .brand { flex-shrink: 0; }
.guest-actions, .user-actions { display: flex; align-items: center; gap: 8px; }
[data-auth="1"] .guest-actions, [data-auth="0"] .user-actions { display: none; }

/* min-width: 0 — dar ekranda arama kutusu küçülsün, giriş/kayıt butonlarını dışarı itmesin */
.search-trigger { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; max-width: 400px; height: 42px; margin-left: 18px; padding: 0 10px 0 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-mute); font-size: 14px; text-align: left; transition: border-color .2s, color .2s; }
.search-trigger span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-trigger:hover { border-color: rgba(var(--accent-hi-rgb), .35); color: var(--text-dim); }
.search-trigger kbd, .search__field kbd { padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line-strong); font: 700 11px var(--font); color: var(--text-mute); white-space: nowrap; }

.wallet-pill { display: flex; align-items: center; gap: 4px; padding: 3px 3px 3px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-strong); }
.wallet-pill__amount { margin-right: 6px; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.umenu { position: relative; }
.umenu__btn { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 22px; color: var(--text-dim); }
.umenu__caret { width: 16px; height: 16px; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-grad); font-size: 13px; font-weight: 800; color: #fff; }
.avatar--lg { width: 60px; height: 60px; font-size: 20px; box-shadow: 0 0 30px -6px rgba(var(--accent-rgb), .9); }

.lang { position: relative; }
.lang__btn { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.lang__btn:hover { background: var(--bg-3); }
.lang__caret { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.lang.is-open .lang__caret { transform: rotate(180deg); }
.flag { display: inline-block; flex-shrink: 0; border-radius: 3px; object-fit: cover; }
.flag--none { width: 16px; height: 12px; background: var(--bg-4); }

.dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; min-width: 200px; padding: 6px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .18s, transform .22s var(--ease), visibility .18s; }
.is-open > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a, .dropdown button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-dim); text-align: left; }
.dropdown a:hover, .dropdown button:hover { background: var(--bg-3); color: var(--text); }
.dropdown .ico { width: 17px; height: 17px; }
.dropdown__head { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.dropdown__head b { display: block; }
.dropdown__head small { color: var(--text-mute); }

/* ---------- sekme çubuğu ---------- */
.tabnav { border-top: 1px solid var(--line); }
.tabnav__track { position: relative; display: flex; align-items: center; gap: 4px; height: var(--tabnav-h); max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.tabnav__track::-webkit-scrollbar { display: none; }
.tabnav__item { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 36px; padding: 0 15px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--text-dim); white-space: nowrap; transition: color .25s; }
.tabnav__item .ico { width: 18px; height: 18px; transition: transform .35s var(--ease-spring); }
.tabnav__item:hover { color: var(--text); }
.tabnav__item:hover .ico { transform: translateY(-2px) scale(1.1); }
.tabnav__item.is-active { color: #fff; }
.tabnav__item.is-active .ico { color: var(--accent-hi); }
.tabnav__live { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: blink 1.4s infinite; }
.tabnav__new { padding: 1px 6px; border-radius: 5px; background: linear-gradient(90deg, #ec4899, #8b5cf6); color: #fff; font-size: 10px; font-weight: 800; }
.tabnav__indicator { position: absolute; left: 0; top: 7px; width: var(--w, 0); height: 36px; border-radius: 10px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .08)); box-shadow: inset 0 0 0 1px rgba(var(--accent-hi-rgb), .28); transform: translateX(var(--x, 0)); transition: transform .45s var(--ease-spring), width .45s var(--ease-spring); }
.tabnav__indicator::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -7px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--accent), var(--cyan)); box-shadow: 0 0 14px var(--accent); }

/* ---------- footer ---------- */
.footer { margin-top: auto; padding: 48px var(--gutter) 28px; background: linear-gradient(180deg, rgba(8, 13, 26, .6), var(--bg-1) 30%); border-top: 1px solid var(--line); }
.footer > * { max-width: var(--content-max); margin-left: auto; margin-right: auto; }
.footer__top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.footer__brand p { margin: 14px 0 18px; max-width: 300px; font-size: 13.5px; color: var(--text-dim); }
.footer__social { display: flex; gap: 8px; }
.social { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-dim); transition: background-color .2s, color .2s, transform .3s var(--ease-spring); }
.social:hover { color: #fff; background: var(--accent); transform: translateY(-3px); }
.social .ico { width: 18px; height: 18px; }
.footer__title { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 12px; font-family: var(--font-display); font-size: 15px; font-weight: 700; cursor: default; }
.footer__title .ico { display: none; width: 18px; height: 18px; transition: transform .3s var(--ease); }
.footer__col ul { display: grid; gap: 9px; }
.footer__col a { font-size: 13.5px; color: var(--text-dim); transition: color .2s, padding .2s; }
.footer__col a:hover { color: var(--accent-hi); padding-left: 4px; }
.footer__payments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pay-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--text-mute); }
.pay-chip img { width: 18px; height: 18px; padding: 2px; border-radius: 4px; background: #fff; object-fit: contain; }
.footer__bottom { display: grid; gap: 10px; padding-top: 22px; text-align: center; }
.footer__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.age-badge { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--red); color: var(--red); font-weight: 800; font-size: 13px; }
.trust { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 20px; background: var(--bg-2); font-size: 12px; font-weight: 700; color: var(--text-dim); }
.trust .ico { width: 16px; height: 16px; color: var(--green-hi); }
.trust--dmca { padding: 0 10px; transition: transform .2s ease, box-shadow .2s ease; }
.trust--dmca img { display: block; width: 100px; height: 20px; border-radius: 3px; }
.trust--dmca:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
/* lisans mühürleri (panel › Tasarım › Lisanslar); DMCA rozeti de bu sıranın sağında durur.
   Doğrulama bağlantısı girilmemiş mühür <span>: tıklanmaz, üstüne gelince kıpırdamaz */
.footer__seals { --seal-h: 96px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 4px 0; }
.seal { display: grid; place-items: center; flex-shrink: 0; border-radius: 5px; }
.seal img { display: block; }
.seal--plain img { width: var(--seal-h); height: var(--seal-h); }
.seal--frame { height: var(--seal-h); padding: 0 calc(var(--seal-h) / 6); background: #fff; border: 1px solid #1d2840; }
.seal--frame img { width: calc(var(--seal-h) * 1.46); height: auto; }
.seal--official img { width: auto; max-width: 220px; height: auto; max-height: var(--seal-h); }
span.seal { cursor: default; }
a.seal { transition: transform .2s ease, box-shadow .2s ease; }
a.seal:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.footer__seals .trust--dmca { height: 38px; }
.footer__legal { max-width: 720px; margin: 0 auto; font-size: 12px; color: var(--text-mute); }
.footer__copy { font-size: 12px; color: var(--text-mute); }

.bottom-nav { display: none; }

/* ---------- misafir çubuğu ---------- */
.guest-bar { position: fixed; left: calc(var(--sidebar-w) + 24px); right: 24px; bottom: 20px; z-index: 65; display: flex; align-items: center; gap: 14px; max-width: 880px; margin: 0 auto; padding: 10px 10px 10px 18px; border-radius: 16px; background: rgba(12, 20, 38, .97); border: 1px solid rgba(var(--accent-hi-rgb), .25); box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .8), 0 0 30px -10px rgba(var(--accent-rgb), .6); transform: translateY(160%); transition: transform .6s var(--ease-spring), left .35s var(--ease); }
.guest-bar.is-visible { transform: none; }
[data-auth="1"] .guest-bar, .slip-open .guest-bar { transform: translateY(160%); }
.sidebar-mini .guest-bar { left: calc(var(--sidebar-w-mini) + 24px); }
.guest-bar__text { display: flex; align-items: center; gap: 10px; flex: 1; font-size: 13.5px; color: var(--text-dim); }
.guest-bar__text b { color: var(--text); }
.guest-bar__text .ico { flex-shrink: 0; color: var(--cyan); }
.guest-bar__actions { display: flex; gap: 8px; }
.guest-bar__close { width: 32px; height: 32px; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
/* Kapalı modal content-visibility ile atlanır: içeriği işlenmez ama stili ve yerleşimi
   saklanır, açınca yalnızca değişen birkaç öğe yeniden hesaplanır. (visibility ile
   gizlemek her açılışta ~180 öğenin stilini miras yoluyla baştan hesaplatıyordu.)
   clip-path kapalıyken tıklamayı yakalamasın diye. .is-warm: sayfa boşa çıkınca
   bir kez hazırlanır (app.js) — ilk açılış da hızlı ve animasyonlu olsun. */
.modal:not(.is-open) { content-visibility: hidden; clip-path: inset(50%); }
.modal.is-warm { content-visibility: visible; }
@supports not (content-visibility: hidden) {
  .modal:not(.is-open) { visibility: hidden; }
}

/* Modal açıkken arkadaki sayfa perdenin ardından görünür kalır, yalnızca
   animasyonları durur (app.js freezePage). Sayfanın çizimi sadece ekranı tamamen
   örten modallarda (data-cover — oyun oynatıcısı) askıya alınır: görünmeyen
   sayfayı boyamaya gerek yok. Eskiden her modalda yapılıyordu, giriş penceresinin
   arkası simsiyah kalıyordu. Son yükseklik hatırlandığı için kaydırma kaybolmaz. */
.app { contain-intrinsic-height: auto 100vh; }
.page-covered .app { content-visibility: hidden; }
.modal--top { place-items: start center; padding-top: 12vh; }
/* ortası açık, kenarları koyu: pencere öne çıkar, site arkada seçilir */
.modal__backdrop { position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 45%, rgba(4, 10, 28, .38), rgba(2, 4, 12, .68)); opacity: 0; transition: opacity .3s; }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__box { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow: auto; padding: 26px; border-radius: var(--radius-xl); background: var(--bg-1); border: 1px solid var(--line-strong); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .9); opacity: 0; transform: translateY(20px) scale(.96); transition: opacity .3s var(--ease), transform .45s var(--ease); }
.modal.is-open .modal__box { opacity: 1; transform: none; }
.modal__x { position: absolute; top: 12px; right: 12px; z-index: 2; }
[role="dialog"]:focus { outline: none; }

/* ---------- giriş / kayıt ---------- */
.modal--auth .modal__box { transition: opacity .3s var(--ease), transform .55s var(--ease-spring); }
.auth { display: grid; grid-template-columns: 340px minmax(0, 1fr); max-width: 860px; max-height: none; padding: 0; overflow: hidden; }
.auth__handle { display: none; }

/* sol panel: marka, yörüngeler, moda göre değişen amblem ve metin */
.auth__visual { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 18px; padding: 26px 28px 28px; overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(120% 80% at 0% 0%, rgba(var(--accent-rgb), .45), transparent 60%), radial-gradient(100% 70% at 100% 100%, rgba(var(--cyan-rgb), .28), transparent 60%), linear-gradient(160deg, #0b1a44, #060b18); }
.auth__visual::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(120, 150, 220, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 150, 220, .07) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 90% 60% at 50% 38%, #000 10%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 38%, #000 10%, transparent 72%); }
.auth__beam { position: absolute; z-index: -1; top: -30%; left: -70%; width: 55%; height: 160%; background: linear-gradient(90deg, transparent, rgba(var(--accent-hi-rgb), .13), transparent); rotate: 18deg; animation: auth-beam 8s ease-in-out infinite; }
.auth__brand .brand__mark { width: 34px; height: 34px; border-radius: 10px; }
.auth__brand .brand__mark .ico { width: 19px; height: 19px; }
.auth__brand .brand__word { font-size: 17px; }

.auth__art { position: relative; display: grid; place-items: center; flex: 1; min-height: 170px; }
.auth__art::before { content: ''; position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .45), transparent 65%); animation: auth-pulse 3.6s ease-in-out infinite; }
.auth__orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(var(--accent-hi-rgb), .32); translate: -50% -50%; animation: spin 24s linear infinite; }
.auth__orbit--a { width: 196px; height: 196px; }
.auth__orbit--b { width: 132px; height: 132px; border: 1px solid rgba(var(--cyan-rgb), .18); animation-duration: 14s; animation-direction: reverse; }
.auth__orbit i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.auth__orbit--b i { top: -4px; width: 8px; height: 8px; margin-left: -4px; background: var(--accent-hi); box-shadow: 0 0 12px var(--accent); }
.auth__emblem { position: relative; grid-area: 1 / 1; opacity: 0; transform: scale(.5) rotate(-30deg); transition: opacity .3s var(--ease), transform .6s var(--ease-spring); }
.auth__emblem.is-shown { opacity: 1; transform: none; }
.auth__emblem .brand__mark { animation: float-y 4s ease-in-out infinite; }
.auth__emblem--ok .brand__mark { background: linear-gradient(135deg, #15973f, #22c55e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 26px -4px rgba(34, 197, 94, .9); }

.auth__pitch { display: grid; }
.auth__slide { grid-area: 1 / 1; display: grid; gap: 8px; align-content: end; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s var(--ease), transform .5s var(--ease), visibility .3s; }
.auth__slide.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: .08s; }
.auth__slide .eyebrow { font-size: 11px; }
.auth__slide h4 { font-size: 27px; }
.auth__slide h4 .text-accent { white-space: nowrap; }
.auth__slide p { font-size: 13.5px; color: var(--text-dim); }

.auth__perks { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(120, 150, 220, .14); }
.auth__perks li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.auth__perks .ico { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: rgba(var(--accent-rgb), .16); color: var(--accent-hi); }

.modal--auth.is-open .auth__brand,
.modal--auth.is-open .auth__art,
.modal--auth.is-open .auth__pitch { animation: fade-up .6s var(--ease) backwards; }
.modal--auth.is-open .auth__art { animation-delay: .08s; }
.modal--auth.is-open .auth__pitch { animation-delay: .16s; }
.modal--auth.is-open .auth__perks li { animation: fade-up .5s var(--ease) backwards; animation-delay: calc(.24s + var(--i) * 70ms); }

/* sağ panel */
.auth__body { position: relative; display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); padding: 28px 32px 24px; overflow-y: auto; overscroll-behavior: contain; }
.auth__main { position: relative; margin: 0 -6px; padding: 0 6px; }
.auth__main.is-switching { overflow: hidden; }
.auth__head { margin: 0 44px 16px 0; }
.auth__head h3 { font-size: 24px; }
.auth__head p { margin-top: 5px; font-size: 13.5px; color: var(--text-dim); }
.auth__tabs { margin-bottom: 20px; }
.auth[data-mode="done"] .auth__head,
.auth[data-mode="done"] .auth__tabs { display: none; }
.auth[data-mode="done"] .auth__main { margin-block: auto; }

/* Paneller aynı ızgara hücresinde üst üste durur; geçişte konum türü değişmez
   (absolute ↔ static geçişi panelin kutu ağacını baştan kurduruyordu). */
.auth__stage { display: grid; }
.auth__stage > .auth__panel { grid-area: 1 / 1; min-width: 0; }
.auth__panel.is-leaving { pointer-events: none; }
/* Etkin olmayan panel görünmez, yükseklik tutmaz (content-visibility boyutu
   sıfırlar), tıklanmaz ve odaklanmaz; ama aynı genişlikte hazır bekler —
   sekme değişince form baştan kurulmaz. */
.auth__panel.is-parked { content-visibility: hidden; clip-path: inset(50%); }
.modal.is-warm .auth__panel.is-parked { content-visibility: visible; }
@supports not (content-visibility: hidden) {
  .auth__panel.is-parked { display: none; }
}
.auth__panel.is-entering > * { animation: auth-in .5s var(--ease) backwards; animation-delay: calc(.05s + var(--i, 0) * 45ms); }
.field--check { gap: 4px; }

.auth__promo-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-dim); transition: color .2s; }
.auth__promo-toggle:hover { color: var(--text); }
.auth__promo-toggle .ico { width: 17px; height: 17px; color: var(--cyan); }
.auth__promo-toggle .ico:last-child { width: 15px; height: 15px; color: var(--text-mute); transition: transform .3s var(--ease); }
.auth__promo.is-open .auth__promo-toggle .ico:last-child { transform: rotate(180deg); }
.auth__promo-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s var(--ease), visibility .35s; }
.auth__promo.is-open .auth__promo-body { grid-template-rows: 1fr; visibility: visible; }
.auth__promo-inner { min-height: 0; overflow: hidden; margin: 0 -5px; padding: 0 5px; }
.auth__promo-inner .field { padding: 10px 0 5px; }

.auth__alt { margin-top: auto; padding-top: 18px; text-align: center; font-size: 13.5px; color: var(--text-mute); }
.auth__alt:not(.is-shown) { display: none; }
.auth__alt.is-shown { animation: fade-up .4s var(--ease); }
.auth__alt button { font-weight: 700; color: var(--accent-hi); }
.auth__alt button:hover { text-decoration: underline; }

/* kayıt sonrası karşılama */
.auth__done { display: grid; justify-items: center; gap: 12px; padding: 6px 0 4px; text-align: center; }
.auth__done h3 { font-size: 24px; }
.auth__done p { max-width: 340px; font-size: 14px; color: var(--text-dim); }
.auth__done .btn--primary { margin-top: 8px; }
.auth__badge { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 4px; }
.auth__burst { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(74, 222, 128, .6); opacity: 0; }
.auth__check { width: 84px; height: 84px; }
.auth__check circle { --len: 151; fill: rgba(34, 197, 94, .12); stroke: var(--green-hi); stroke-width: 2; stroke-dasharray: 151; transform: rotate(-90deg); transform-origin: 26px 26px; }
.auth__check path { --len: 32; fill: none; stroke: var(--green-hi); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; }
.auth__done.is-entering > .auth__badge { animation: auth-pop .6s var(--ease-spring) backwards; }
.auth__done.is-entering .auth__check circle { animation: draw-in .6s var(--ease) .15s backwards; }
.auth__done.is-entering .auth__check path { animation: draw-in .4s var(--ease) .6s backwards; }
.auth__done.is-entering .auth__burst { animation: auth-burst .9s var(--ease) .55s; }

/* ---------- kayıt: kimlikli (3 adım) ve gizli üyelik (assets/js/register.js · profile.css) ---------- */
.reg { gap: 16px; }
.reg--full { gap: 14px; }
.reg__mono { font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* adım göstergesi: üç düğüm, arkalarında soldan dolan çizgi (--p: 0 · .5 · 1) */
.reg-steps { --p: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.reg-steps::before, .reg-steps::after { content: ''; position: absolute; top: 17px; left: calc(100% / 6); right: calc(100% / 6); height: 2px; border-radius: 2px; background: var(--bg-3); }
.reg-steps::after { background: linear-gradient(90deg, var(--accent), var(--cyan)); box-shadow: 0 0 10px rgba(var(--cyan-rgb), .5); transform: scaleX(var(--p)); transform-origin: left; transition: transform .55s var(--ease); }
.reg-steps__item { position: relative; z-index: 1; display: grid; justify-items: center; }
.reg-steps__item button { display: grid; justify-items: center; gap: 6px; padding: 0 4px; font-size: 12px; font-weight: 700; color: var(--text-mute); transition: color .25s; }
.reg-steps__item button:disabled { cursor: default; }
.reg-steps__dot { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-2); border: 1.5px solid var(--line-strong); transition: background-color .3s, border-color .3s, box-shadow .3s, transform .45s var(--ease-spring); }
.reg-steps__dot .ico { grid-area: 1 / 1; width: 17px; height: 17px; transition: opacity .25s, transform .45s var(--ease-spring); }
.reg-steps__dot .ico:last-child { opacity: 0; transform: scale(.3) rotate(-45deg); stroke-width: 3; }
.reg-steps__item.is-active button { color: var(--text); }
.reg-steps__item.is-active .reg-steps__dot { border-color: transparent; background: var(--accent-grad); color: #fff; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18), 0 6px 16px -6px rgba(var(--accent-rgb), .9); transform: scale(1.08); }
.reg-steps__item.is-active .reg-steps__dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(var(--accent-hi-rgb), .55); animation: step-ring 2.4s var(--ease) infinite; }
.reg-steps__item.is-done button { color: var(--text-dim); }
.reg-steps__item.is-done .reg-steps__dot { border-color: rgba(74, 222, 128, .5); background: rgba(34, 197, 94, .14); color: var(--green-hi); }
.reg-steps__item.is-done .reg-steps__dot .ico:first-child { opacity: 0; transform: scale(.3); }
.reg-steps__item.is-done .reg-steps__dot .ico:last-child { opacity: 1; transform: none; }
.reg-steps__item button:not(:disabled):hover .reg-steps__dot { transform: scale(1.1); }
@keyframes step-ring { 0% { opacity: .9; transform: scale(.85); } 70%, 100% { opacity: 0; transform: scale(1.3); } }

/* adım sayfaları aynı hücrede üst üste; geçişte yükseklik yumuşak değişir (register.js) */
.reg-pages { display: grid; margin: 0 -6px; padding: 2px 6px; }
.reg-pages.is-moving { overflow: hidden; }
.reg-page { grid-area: 1 / 1; display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.reg-page.is-leaving { pointer-events: none; }
.reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reg-row .field { min-width: 0; }

.reg-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--accent-rgb), .07); border: 1px solid rgba(var(--accent-hi-rgb), .14); font-size: 12px; line-height: 1.5; color: var(--text-mute); }
.reg-note .ico { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; color: var(--green-hi); }

/* son adımda önceki iki adımın özeti; kalemle geri dönülür */
.reg-recap { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 14px; background: linear-gradient(120deg, rgba(var(--accent-rgb), .14), rgba(var(--cyan-rgb), .05)); border: 1px solid rgba(var(--accent-hi-rgb), .2); }
.reg-recap:empty { display: none; }
.reg-recap__av { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-grad); color: #fff; font: 800 15px/1 var(--font-display); letter-spacing: .02em; box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb), .9); }
.reg-recap__txt { display: grid; flex: 1; gap: 2px; min-width: 0; }
.reg-recap__txt b, .reg-recap__txt small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reg-recap__txt b { font-size: 14px; }
.reg-recap__txt small { font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.reg-recap__edit { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--accent-rgb), .12); color: var(--accent-hi); transition: background-color .2s, color .2s, transform .3s var(--ease-spring); }
.reg-recap__edit:hover { background: rgba(var(--accent-rgb), .24); color: #fff; transform: rotate(-8deg); }
.reg-recap__edit .ico { width: 16px; height: 16px; }

/* e-posta yazım hatası önerisi: "gmial.com" → gmail.com */
.reg__typo { justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-dim); animation: err-in .3s var(--ease); }
.reg__typo b { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 2px; }
.reg__typo .ico { width: 14px; height: 14px; color: var(--gold); }

/* operatör etiketi (telefon) */
.reg__chip[data-tone="turkcell"] { background: rgba(255, 201, 0, .14); color: #ffd23f; }
.reg__chip[data-tone="vodafone"] { background: rgba(230, 0, 0, .16); color: #ff7575; }
.reg__chip[data-tone="turktelekom"] { background: rgba(0, 169, 224, .15); color: #4cc9f0; }

.reg-nav { display: flex; gap: 10px; }
.reg-nav .btn--state { flex: 1; }
.reg-nav__back { flex-shrink: 0; padding: 0 16px; animation: fade-up .35s var(--ease); }
.reg-nav__back .ico { width: 18px; height: 18px; }
.field--check .check { line-height: 1.5; }

/* gizli üyelik bağlantısı: kayıt ekranının en altında, küçük */
.auth__alt--reg { display: grid; justify-items: center; gap: 10px; }
.auth__alt .auth__ghost { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 20px; border: 1px dashed rgba(var(--accent-hi-rgb), .22); background: rgba(255, 255, 255, .02); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--text-mute); transition: color .2s, border-color .2s, background-color .2s; }
.auth__alt .auth__ghost:hover { border-color: rgba(var(--accent-hi-rgb), .5); background: rgba(var(--accent-rgb), .1); color: var(--text); text-decoration: none; }
.auth__ghost .ico { width: 14px; height: 14px; animation: ghost-float 3s ease-in-out infinite; }
.auth__alt--quick button .ico { width: 14px; height: 14px; margin-right: 2px; vertical-align: -2px; }
.auth__emblem--ghost .brand__mark { background: linear-gradient(135deg, #1c2748, #4b5f96); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 26px -4px rgba(120, 150, 230, .8); }
@keyframes ghost-float { 0%, 100% { opacity: .7; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

@media (max-width: 400px) {
  .reg-steps__item button { font-size: 11px; }
}
@media (max-width: 340px) {
  .reg-row { grid-template-columns: 1fr; }
}

/* sağdaki küçük durum etiketi: uygun / alınmış / Türkçe harf */
.reg__chip { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 7px; background: var(--bg-3); color: var(--text-dim); font-size: 11.5px; font-weight: 800; white-space: nowrap; animation: err-in .3s var(--ease); }
.reg__chip[data-tone="ok"] { background: rgba(34, 197, 94, .14); color: var(--green-hi); }
.reg__chip[data-tone="bad"] { background: rgba(255, 77, 109, .13); color: #ff8aa0; }
.reg__chip[data-tone="wait"] { color: var(--text-mute); }

/* +90 önekli telefon alanı (Hesabım › Profil) */
.reg__phone .reg__cc { position: absolute; left: 1px; top: 1px; bottom: 1px; display: grid; place-items: center; width: 52px; border-right: 1px solid var(--line-strong); border-radius: 11px 0 0 11px; background: var(--bg-2); font-size: 14px; font-weight: 800; color: var(--text-dim); pointer-events: none; }
.reg__phone input { padding-left: 64px !important; }

.reg__rules { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 2px; }
.reg__rules li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-mute); transition: color .25s; }
.reg__rules .ico { flex-shrink: 0; width: 13px; height: 13px; padding: 2px; border-radius: 50%; background: var(--bg-3); stroke-width: 3; color: transparent; transition: background-color .25s, color .25s, transform .35s var(--ease-spring); }
.reg__rules li.is-ok { color: var(--text-dim); }
.reg__rules li.is-ok .ico { background: rgba(34, 197, 94, .2); color: var(--green-hi); transform: scale(1.1); }
.field.has-error .reg__rules { display: none; }
@media (max-width: 400px) {
  .reg__rules { grid-template-columns: 1fr; }
}

@keyframes auth-beam { 0%, 35% { translate: 0 0; } 100% { translate: 480% 0; } }
@keyframes auth-pulse { 50% { transform: scale(1.18); opacity: .65; } }
@keyframes auth-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes auth-pop { from { opacity: 0; transform: scale(.5); } }
@keyframes auth-burst { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(1.6); } }
@keyframes draw-in { from { stroke-dashoffset: var(--len); } }

/* kısa masaüstü ekranları */
@media (min-width: 960px) and (max-height: 760px) {
  .auth__art { min-height: 130px; }
  .auth__orbit--a { width: 156px; height: 156px; }
  .auth__perks { gap: 8px; padding-top: 14px; }
}
@media (min-width: 960px) and (max-height: 640px) {
  .auth__perks { display: none; }
}

/* cüzdan (yatırım / çekim) stilleri: assets/css/wallet.css */

.search { max-width: 600px; padding: 10px; }
.search__field { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 14px; border-radius: 14px; background: var(--bg-0); border: 1px solid rgba(var(--accent-rgb), .45); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .1); color: var(--accent-hi); }
.search__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--text); }
.search__results { display: grid; gap: 2px; max-height: 55vh; overflow-y: auto; padding-top: 8px; }
.search__hint { padding: 20px; text-align: center; color: var(--text-mute); font-size: 13.5px; }
/* yazı yokken: sağlayıcı kısayolları, favoriler, popüler oyunlar */
.search__label { display: flex; align-items: center; gap: 6px; padding: 10px 8px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.search__label .ico { width: 14px; height: 14px; color: var(--accent-hi); }
.search__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 6px; }
.search__chips .chip { height: 32px; padding: 0 12px; font-size: 12.5px; animation: fade-up .3s var(--ease) both; }
.search-item .tag { margin-left: auto; }
.search-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 10px; text-align: left; animation: fade-up .25s var(--ease) both; }
.search-item:hover { background: var(--bg-3); }
.search-item__thumb { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; overflow: hidden; }
.search-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-item b { display: block; font-size: 14px; }
.search-item small { font-size: 12px; color: var(--text-mute); }

/* hikâye görüntüleyici */
.modal--story .story-view { position: relative; display: flex; flex-direction: column; width: min(400px, 100%); height: min(700px, calc(100vh - 40px)); border-radius: var(--radius-xl); background: radial-gradient(90% 60% at 50% 30%, var(--c1, #2f7bff), transparent 70%), linear-gradient(180deg, var(--c2, #0b1633), #05070d 80%); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .9); overflow: hidden; opacity: 0; transform: scale(.9); transition: opacity .3s, transform .4s var(--ease-spring); }
.modal--story.is-open .story-view { opacity: 1; transform: none; }
.story-view__bars { position: relative; z-index: 3; display: flex; gap: 4px; padding: 12px 12px 0; }
.story-view__bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.story-view__bars i { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.story-view__bars .is-done i { transform: none; }
.story-view__bars .is-active i { animation: bar 5s linear forwards; }
@keyframes bar { to { transform: none; } }
.story-view__head { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 8px 0 14px; }
.story-view__head small { font-size: 12px; color: rgba(255, 255, 255, .6); }
.story-view__head .icon-btn { margin-left: auto; color: #fff; }
.story-view__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 0 2px #fff; }
.story-view__avatar .ico { width: 18px; height: 18px; color: #fff; }
.story-view__art { position: relative; flex: 1; display: grid; place-items: center; }
.story-view__art::before { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .12) 0 8deg, transparent 8deg 22deg); mask-image: radial-gradient(circle, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); animation: spin 20s linear infinite; }
.story-view__art .ico { position: relative; width: 120px; height: 120px; color: #fff; stroke-width: 1.3; animation: story-pop .6s var(--ease-spring) both; }
@keyframes story-pop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
.story-view__body { position: relative; z-index: 3; display: grid; gap: 10px; padding: 22px; text-align: center; }
.story-view__body h3 { font-size: 26px; }
.story-view__body p { color: rgba(255, 255, 255, .78); }
.story-view__nav { position: absolute; top: 70px; bottom: 170px; z-index: 2; width: 40%; }
.story-view__nav--prev { left: 0; }
.story-view__nav--next { right: 0; }

/* ---------- toast ---------- */
.toasts { position: fixed; top: calc(var(--header-h) + 12px); right: 20px; z-index: 120; display: grid; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; max-width: 380px; padding: 12px 16px; border-radius: var(--radius); background: rgba(18, 29, 54, .98); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); box-shadow: var(--shadow); font-size: 13.5px; font-weight: 600; pointer-events: auto; animation: toast-in .45s var(--ease-spring); }
.toast--ok { border-left-color: var(--green-hi); }
.toast--err { border-left-color: var(--red); }
.toast.is-out { animation: toast-out .3s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1280px) {
  .footer__top { grid-template-columns: repeat(4, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 1099.98px) {
  .main, .sidebar-mini .main { margin-left: 0; }
  .sidebar { z-index: 90; width: min(300px, 86vw); transform: translateX(-102%); }
  .sidebar-open .sidebar { transform: none; }
  .sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }
  /* kapalı çekmecedeki animasyonlar ekran dışında GPU'ya geçemiyor, her karede sayfayı yoruyordu */
  body:not(.sidebar-open) .sidebar *, body:not(.sidebar-open) .sidebar *::before, body:not(.sidebar-open) .sidebar *::after { animation-play-state: paused !important; }
  .sidebar__collapse { display: none; }
  .sidebar__close { display: inline-grid; }
  .topbar__burger { display: inline-grid; margin-left: -8px; }
  .search-trigger kbd { display: none; }
  .guest-bar, .sidebar-mini .guest-bar { left: 24px; }
}
@media (max-width: 959.98px) {
  /* tek sütun: sol panel üstte ince bir şerit olur */
  .auth { display: flex; flex-direction: column; max-width: 480px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); }
  .auth__visual { flex-direction: row; align-items: center; flex-shrink: 0; gap: 14px; padding: 18px 22px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth__brand, .auth__perks, .auth__slide p, .auth__orbit, .auth__art::before { display: none; }
  .auth__art { flex: none; min-height: 0; }
  .auth__emblem .brand__mark { width: 48px; height: 48px; border-radius: 14px; animation: none; }
  .auth__emblem .brand__mark .ico { width: 26px; height: 26px; }
  .auth__pitch { flex: 1; min-width: 0; }
  .auth__slide { gap: 3px; }
  .auth__slide h4 { font-size: 19px; }
  .auth__body { flex: 1 1 auto; min-height: 0; max-height: none; padding: 24px 24px 22px; }
}
@media (max-width: 767.98px) {
  :root { --topbar-h: 58px; --tabnav-h: 48px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .topbar__burger, .search-trigger, .lang__code, .lang__caret { display: none; }
  .topbar__row { gap: 8px; }
  .topbar__search { display: inline-grid; }
  .topbar__actions .btn { --h: 36px; padding: 0 12px; font-size: 13px; }
  .wallet-pill { padding-left: 10px; }
  .wallet-pill .btn span { display: none; }
  .wallet-pill .btn { padding: 0 9px; }
  .tabnav__item { padding: 0 13px; font-size: 13px; }

  .footer__top { grid-template-columns: 1fr; gap: 0; }
  .footer__brand { margin-bottom: 20px; }
  .footer__col { border-top: 1px solid var(--line); }
  .footer__title { margin: 0; padding: 14px 0; cursor: pointer; }
  .footer__title .ico { display: block; }
  .footer__col ul { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease), padding .4s var(--ease); }
  .footer__col.is-open ul { max-height: 320px; padding-bottom: 16px; }
  .footer__col.is-open .footer__title .ico { transform: rotate(180deg); }
  .footer__seals { --seal-h: 80px; gap: 10px; }

  .bottom-nav { position: fixed; inset: auto 0 0 0; z-index: 70; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(8, 13, 26, .98); border-top: 1px solid var(--line); }
  .bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--text-mute); }
  .bottom-nav__item.is-active { color: var(--accent-hi); }
  .bottom-nav__item .ico { width: 22px; height: 22px; }
  .bottom-nav__bubble { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: var(--accent-grad); color: #fff; box-shadow: 0 0 0 5px var(--bg-0), 0 8px 24px -4px rgba(var(--accent-rgb), .9); }
  .bottom-nav__bubble .count { position: absolute; top: -4px; right: -4px; }
  .guest-bar { display: none; }

  .modal { align-items: end; padding: 0; }
  .modal--top { place-items: start center; padding: 10px; }
  /* Alttan açılan panel ekran genişliğinde olmalı ama onu AŞMAMALI. Burada eskiden
     max-width:none vardı: panel bir esnek öğe ve esnek öğenin varsayılan min-width:auto
     değeri onu içeriğinin en dar hâlinin altına indirmiyor — cüzdanın ödeme adımında
     panel 375 px ekranda 425 px oluyor, sayaç/kopyala düğmeleri ve metinler ekranın
     dışında kalıyordu. max-width:100% + min-width:0 ikisi birlikte gerekli. */
  .modal__box { max-width: 100%; min-width: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: translateY(100%); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .modal--top .modal__box { border-radius: var(--radius-lg); transform: translateY(-20px); }
  /* alttan açılan panel; tutamaçtan veya üst şeritten aşağı sürüklenince kapanır */
  .modal--auth .modal__box { transition: opacity .25s, transform .5s cubic-bezier(.32, .72, 0, 1); }
  .auth { max-width: none; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); padding: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .auth__handle { position: absolute; top: 8px; left: 50%; z-index: 3; display: block; width: 44px; height: 5px; margin-left: -22px; border-radius: 5px; background: rgba(255, 255, 255, .25); }
  .auth [data-sheet-drag] { touch-action: none; }
  .auth__visual { padding: 26px 20px 16px; }
  .auth__body { padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
  .auth__head h3 { font-size: 21px; }
  /* iOS 16px altındaki alanlarda sayfayı yakınlaştırıyor */
  .field input { font-size: 16px; }
  .modal--story { padding: 0; }
  .modal--story .story-view { width: 100%; height: 100%; border-radius: 0; }
  .toasts { left: 16px; right: 16px; }
  .toast { max-width: none; }
}
@media (max-width: 480px) {
  .topbar .lang { display: none; }
  .topbar .brand__word { display: grid; font-size: 16px; }
  .topbar .brand__word em { margin: 3px 0 0; font-size: 8.5px; letter-spacing: .4em; }
  .topbar .brand__mark { width: 34px; height: 34px; }
  .topbar__actions { gap: 6px; }
  .topbar__actions .btn { padding: 0 11px; font-size: 12.5px; }
}