/* ============================================================
   NexusForge — MMORPG görsel tema katmanı (style.css üstüne)
   Hareket, ışık, sanatsal çerçeveler. prefers-reduced-motion güvenli.
   ============================================================ */

/* ---- animasyonlu arka plan (fx.js enjekte eder) ---- */
.fx-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-blob { position: absolute; border-radius: 50%; filter: blur(95px); opacity: .20; }
.fx-blob-a { width: 620px; height: 620px; background: #6d5ae6; top: -220px; left: -140px; animation: fx-aurora-a 28s ease-in-out infinite; }
.fx-blob-b { width: 540px; height: 540px; background: #2f7fb0; bottom: -240px; right: -160px; animation: fx-aurora-b 34s ease-in-out infinite; }
.fx-blob-c { width: 460px; height: 460px; background: #c9a04c; top: 40%; left: 55%; opacity: .10; animation: fx-aurora-a 40s ease-in-out infinite reverse; }
@keyframes fx-aurora-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(90px,70px) scale(1.16); } }
@keyframes fx-aurora-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-80px,-60px) scale(1.12); } }

.fx-ember {
  position: fixed; bottom: -12px; border-radius: 50%;
  box-shadow: 0 0 8px 1px currentColor; pointer-events: none;
  animation: fx-float linear infinite;
}
@keyframes fx-float {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-108vh) translateX(24px); opacity: 0; }
}

/* ---- scroll ile beliren öğeler ---- */
.fx-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.fx-in { opacity: 1; transform: none; }

/* ---- başlıklar: rün işareti + parlayan alt çizgi ---- */
.section-title { position: relative; display: inline-block; }
.section-title::before {
  content: '◆'; color: var(--accent-hi); font-size: .52em; margin-right: .6rem;
  vertical-align: middle; text-shadow: 0 0 10px rgba(134,114,255,.7);
}
.section-title::after {
  content: ''; display: block; height: 2px; width: 54px; margin-top: .55rem;
  background: linear-gradient(90deg, var(--accent-hi), transparent); border-radius: 2px;
}

/* ---- hero: dönen rün halkası + kayan degrade başlık ---- */
.hero { position: relative; z-index: 0; }
.hero::before {
  content: ''; position: absolute; top: -70px; left: 50%; width: 460px; height: 460px;
  transform: translateX(-50%); z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(6px); opacity: .8;
  background: conic-gradient(from 0deg, transparent, rgba(134,114,255,.14), transparent 32%, rgba(76,201,232,.10), transparent 66%, rgba(201,160,76,.08), transparent);
  animation: fx-spin 44s linear infinite;
}
@keyframes fx-spin { to { transform: translateX(-50%) rotate(360deg); } }
.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent-hi), var(--cyan), var(--accent-hi));
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fx-shimmer 7s linear infinite;
}
@keyframes fx-shimmer { to { background-position: 220% center; } }
.hero .label { position: relative; }
.hero .label::before { content: '⟡ '; color: var(--cyan); }
.hero .label::after { content: ' ⟡'; color: var(--cyan); }
.stats .stat b { text-shadow: 0 0 20px rgba(134,114,255,.28); }

/* ---- hero: oyun adları (yaratıcı, renkli, büyük) ---- */
.hero-games {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .9rem;
  margin-bottom: 1.5rem; font-family: var(--head); font-weight: 700;
  font-size: clamp(1.1rem, 2.6vw, 1.7rem); letter-spacing: .01em; line-height: 1.1;
}
.hero-games span {
  color: var(--g); text-shadow: 0 0 20px color-mix(in srgb, var(--g) 55%, transparent);
  transition: transform .18s ease, text-shadow .18s ease;
}
.hero-games span:hover { transform: translateY(-2px); text-shadow: 0 0 28px color-mix(in srgb, var(--g) 80%, transparent); }
.hero-games i { font-style: normal; font-size: .48em; color: var(--faint); opacity: .65; }
@media (prefers-reduced-motion: reduce) { .hero-games span { transition: none; } }

/* ---- nav: kayan alt çizgi ---- */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: .8rem; right: .8rem; bottom: 5px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-hi), var(--cyan));
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.logo-img { transition: filter .2s; }
.logo:hover .logo-img { filter: drop-shadow(0 0 10px rgba(134,114,255,.6)); }

/* ---- kartlar: fantezi köşe çerçevesi + glow + görsel zoom ---- */
.card { overflow: hidden; transition: transform .2s ease, box-shadow .28s ease, border-color .2s ease; }
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 44px rgba(0,0,0,.45),
              0 0 26px -6px color-mix(in srgb, var(--card-accent, var(--accent)) 60%, transparent);
}
.card::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
  --c: color-mix(in srgb, var(--card-accent, var(--accent)) 75%, transparent);
  background:
    linear-gradient(var(--c),var(--c)) 0 0/16px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/2px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/16px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/2px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/16px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/2px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/16px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/2px 16px no-repeat;
}
.card:hover::after { opacity: 1; }
.card-img { transition: transform .5s ease; }
.card:hover .card-img { transform: scale(1.07); }

/* ---- butonlar: ışık süpürme ---- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transition: left .55s ease;
}
.btn-primary:hover::after { left: 140%; }
.btn-primary { transition: transform .12s, box-shadow .18s, background .14s; }
.btn-primary:hover { box-shadow: 0 6px 26px rgba(109,90,230,.45); }

/* ---- rozetler: hafif nabız ---- */
.card .badge { animation: fx-badge 2.6s ease-in-out infinite; }
@keyframes fx-badge { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 14px -2px color-mix(in srgb, var(--card-accent, var(--accent)) 70%, transparent); } }

/* ---- duyuru & özellik kartları: hover glow ---- */
.announce-card, .feat-cat, .pack { transition: transform .18s ease, border-color .2s ease, box-shadow .25s ease; }
.announce-card:hover, .feat-cat:hover, .pack:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(0,0,0,.4), 0 0 22px -8px color-mix(in srgb, var(--a-accent, var(--p-accent, var(--accent))) 60%, transparent);
}
.feat-hl { transition: transform .2s ease, box-shadow .25s ease; }
.feat-hl:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 30px -8px color-mix(in srgb, var(--p-accent, var(--accent)) 55%, transparent); }

/* ---- ürün sayfası görseli: yavaş Ken Burns ---- */
.product-hero { animation: fx-kenburns 22s ease-in-out infinite alternate; }
@keyframes fx-kenburns { from { background-size: 106%; } to { background-size: 120%; } }

/* ---- indirme banner: canlı kenar ---- */
.dl-cta-strip { position: relative; overflow: hidden; }
.dl-cta-strip::before {
  content: ''; position: absolute; top: -50%; left: -20%; width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(76,201,232,.10), transparent); transform: rotate(12deg);
  animation: fx-banner 9s linear infinite;
}
@keyframes fx-banner { 0% { left: -30%; } 100% { left: 120%; } }

/* ---- özellik listesi maddeleri: kayan vurgu ---- */
.feature-list li { transition: border-color .15s ease, transform .15s ease; }
.feature-list li:hover { transform: translateX(3px); }

/* ============================================================
   Dark-fantasy: announcement ribbon + navbar + yan alanlar
   ============================================================ */

/* ---- üst duyuru barı: banner ribbon ---- */
.topbar {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #14121f, #0c0b13);
  border-top: 1px solid rgba(224,179,76,.20);
  border-bottom: 1px solid rgba(224,179,76,.20);
  box-shadow: inset 0 0 42px rgba(109,90,230,.12);
}
.topbar::before { /* kayan ışık süpürmesi */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.06) 50%, transparent 58%);
  background-size: 220% 100%; animation: topbar-sheen 8s linear infinite;
}
.topbar::after { /* sağ kenar solması + minik gem */
  content: '◈'; position: absolute; right: 0; top: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; padding: 0 .9rem 0 2.4rem;
  color: rgba(224,179,76,.55); font-size: .62rem; text-shadow: 0 0 8px rgba(224,179,76,.6);
  background: linear-gradient(270deg, #0c0b13 55%, transparent);
}
.topbar-track { position: relative; z-index: 2; }
.topbar-gem {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 3; display: flex; align-items: center;
  padding: 0 1.4rem 0 1rem; color: #f2d27a; font-size: .78rem;
  text-shadow: 0 0 10px rgba(224,179,76,.8);
  background: linear-gradient(90deg, #0c0b13 60%, transparent);
  animation: sr-pulse 2.6s ease-in-out infinite;
}
.topbar-msg { color: #d3d0df; }
@keyframes topbar-sheen { from { background-position: 220% 0; } to { background-position: -80% 0; } }

/* ---- navbar: obsidyen + altın hairline + merkez gem ---- */
.nav {
  background: linear-gradient(180deg, rgba(15,13,23,.92), rgba(10,10,14,.86));
  border-bottom: 1px solid transparent;
  box-shadow: 0 6px 22px -12px rgba(0,0,0,.85);
}
.nav::after { /* altın-mor ince alt çizgi */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(224,179,76,.35) 18%, rgba(134,114,255,.5) 50%, rgba(224,179,76,.35) 82%, transparent);
}
.nav::before { /* merkez elmas gem */
  content: ''; position: absolute; left: 50%; bottom: -4px; z-index: 2;
  width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #f2d27a, #8672ff);
  box-shadow: 0 0 10px rgba(134,114,255,.75);
}
/* nav link: altın→mor kayan çizgi + hover gem + metin parıltısı */
.nav-links a::after {
  background: linear-gradient(90deg, rgba(224,179,76,.9), var(--accent-hi), var(--cyan));
  box-shadow: 0 0 8px rgba(134,114,255,.6);
}
.nav-links a::before {
  content: '◆'; position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%);
  font-size: .42rem; color: var(--cyan); opacity: 0; transition: opacity .2s; text-shadow: 0 0 6px var(--cyan);
}
.nav-links a:hover::before, .nav-links a.active::before { opacity: 1; }
.nav-links a:hover, .nav-links a.active { text-shadow: 0 0 12px rgba(134,114,255,.35); }

/* ---- yan alanlar (sol/sağ) — nötr isimlendirme, adblock dostu ---- */
.side-rail { display: none; }
@media (min-width: 1560px) {
  .side-rail {
    display: block; position: fixed; top: 118px; z-index: 40; width: 165px;
  }
  .side-rail--l { left: max(14px, calc((100vw - 1120px) / 2 - 179px)); }
  .side-rail--r { right: max(14px, calc((100vw - 1120px) / 2 - 179px)); }
}
.sr-frame {
  position: relative; height: min(560px, calc(100vh - 200px)); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(21,19,30,.92), rgba(12,11,18,.92));
  border: 1px solid rgba(224,179,76,.22);
  box-shadow: inset 0 0 34px rgba(109,90,230,.10), 0 12px 34px rgba(0,0,0,.5);
}
.sr-frame--empty::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(134,114,255,.07), transparent);
  background-size: 100% 220%; animation: sr-shimmer 4.5s ease-in-out infinite;
}
.sr-corner { position: absolute; width: 14px; height: 14px; z-index: 2; opacity: .55; }
.sr-corner--tl { top: 6px; left: 6px; border-top: 2px solid #e0b34c; border-left: 2px solid #e0b34c; border-top-left-radius: 4px; }
.sr-corner--tr { top: 6px; right: 6px; border-top: 2px solid #e0b34c; border-right: 2px solid #e0b34c; border-top-right-radius: 4px; }
.sr-corner--bl { bottom: 6px; left: 6px; border-bottom: 2px solid #e0b34c; border-left: 2px solid #e0b34c; border-bottom-left-radius: 4px; }
.sr-corner--br { bottom: 6px; right: 6px; border-bottom: 2px solid #e0b34c; border-right: 2px solid #e0b34c; border-bottom-right-radius: 4px; }
.sr-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.sr-media video, .sr-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-gem { color: rgba(224,179,76,.30); font-size: 1.5rem; text-shadow: 0 0 14px rgba(224,179,76,.4); animation: sr-pulse 3.2s ease-in-out infinite; }
@keyframes sr-shimmer { 0%,100% { background-position: 0 -40%; } 50% { background-position: 0 140%; } }
@keyframes sr-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ---- erişilebilirlik: hareket azaltma ---- */
@media (prefers-reduced-motion: reduce) {
  .fx-ember, .fx-blob, .hero::before, .hero h1 .grad, .product-hero, .dl-cta-strip::before, .card .badge { animation: none !important; }
  .fx-reveal { opacity: 1 !important; transform: none !important; }
  .topbar::before, .topbar-gem, .sr-frame--empty::after, .sr-gem { animation: none !important; }
}

/* ============================================================
   Referans arayüz: neon menü, kesik köşeli kontroller ve aksiyonlar
   ============================================================ */
.nav .nav-inner {
  width: min(1720px, calc(100% - 3rem));
  height: 82px;
  gap: 1.5rem;
}
.nav .logo-img { width: 184px; height: 48px; }
.nav-links {
  align-self: stretch;
  align-items: stretch;
  gap: 0;
}
.nav-links a {
  position: relative;
  min-width: 86px;
  padding: .78rem 1rem .58rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .14rem;
  border-radius: 0;
  color: #c8c6d2;
  font-size: .84rem;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
.nav-links a + a { border-left: 1px solid rgba(134,114,255,.12); }
.nav-links a::before { content: none; }
.nav-links a::after {
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-hi), var(--cyan), transparent);
  box-shadow: 0 0 12px rgba(76,201,232,.8);
}
.nav-links a:hover,
.nav-links a.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(76,201,232,.025), rgba(109,90,230,.11));
}
.nav-ic {
  color: #aaa7b5;
  font-size: 1.18rem;
  line-height: 1;
  transition: color .2s, filter .2s, transform .2s;
}
.nav-links a:hover .nav-ic,
.nav-links a.active .nav-ic {
  color: #c9bdff;
  filter: drop-shadow(0 0 7px rgba(134,114,255,.9));
  transform: translateY(-1px);
}
.nav-right { gap: .72rem; flex-shrink: 0; }
.btn-dl,
.lang-switch,
.credit-chip,
.nav-topup,
.nav-register,
.nav-logout {
  min-height: 46px;
  border-radius: 2px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.btn-dl {
  min-width: 174px;
  justify-content: center;
  color: #66d6ff;
  border-color: rgba(49,164,255,.72);
  background: linear-gradient(180deg, rgba(9,48,82,.92), rgba(5,23,45,.94));
  box-shadow: inset 0 0 18px rgba(38,139,255,.18), 0 0 17px rgba(27,130,255,.2);
}
.btn-dl:hover {
  color: #c5f2ff;
  border-color: #4cc9ff;
  background: linear-gradient(180deg, rgba(11,66,108,.96), rgba(6,31,59,.96));
  box-shadow: inset 0 0 22px rgba(38,139,255,.26), 0 0 22px rgba(27,130,255,.38);
}
.btn-dl .dl-ic { font-size: 1.25rem; text-shadow: 0 0 9px #2fa8ff; }
.lang-switch {
  min-width: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .75rem;
  color: #c4c1ce;
  border-color: rgba(119,113,148,.42);
  background: linear-gradient(180deg, rgba(21,20,31,.96), rgba(11,10,18,.96));
}
.credit-chip {
  min-width: 142px;
  min-height: 46px;
  justify-content: center;
  padding-inline: 1.1rem;
  color: #ffd763;
  border-color: rgba(235,173,29,.7);
  background: linear-gradient(180deg, rgba(67,45,8,.86), rgba(31,21,5,.94));
  box-shadow: inset 0 0 18px rgba(255,184,30,.12), 0 0 16px rgba(255,166,0,.12);
}
.nav-topup {
  min-width: 112px;
  border-color: rgba(137,62,255,.82);
  background: linear-gradient(180deg, rgba(85,35,180,.95), rgba(48,19,111,.96));
  box-shadow: inset 0 0 18px rgba(186,112,255,.18), 0 0 20px rgba(122,52,255,.28);
}
.nav-profile {
  min-height: 46px;
  padding: 0 .42rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #cfccd8;
  font-size: .86rem;
  white-space: nowrap;
}
.nav-profile span { color: #aaa4bb; font-size: 1.05rem; }
.nav-profile:hover { color: #fff; text-shadow: 0 0 10px rgba(134,114,255,.55); }
.nav-logout-form { display: inline-flex; }

.btn {
  border-radius: 2px;
  border-color: rgba(78,92,139,.58);
  background: linear-gradient(180deg, rgba(17,23,42,.9), rgba(8,12,25,.94));
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  box-shadow: inset 0 1px rgba(255,255,255,.04), inset 0 0 18px rgba(55,91,190,.08);
}
.btn:hover {
  color: #fff;
  border-color: rgba(63,155,255,.8);
  background: linear-gradient(180deg, rgba(19,40,72,.96), rgba(8,21,43,.96));
  box-shadow: inset 0 0 20px rgba(42,123,255,.14), 0 0 18px rgba(35,118,255,.18);
}
.btn-primary {
  border-color: rgba(139,70,255,.88);
  background: linear-gradient(180deg, #7136d7, #461a9a);
  box-shadow: inset 0 1px rgba(255,255,255,.16), inset 0 0 20px rgba(192,120,255,.12), 0 0 22px rgba(118,52,255,.28);
}
.btn-primary:hover {
  border-color: #a66cff;
  background: linear-gradient(180deg, #8648ef, #5724b7);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 0 28px rgba(128,59,255,.5);
}
.btn-lg { min-height: 62px; padding-inline: 2.2rem; font-weight: 700; }

@media (max-width: 1320px) {
  .nav .nav-inner { width: min(1240px, calc(100% - 2rem)); gap: .75rem; }
  .nav-links a { min-width: 70px; padding-inline: .65rem; }
  .btn-dl { min-width: 146px; padding-inline: .85rem; }
  .nav-profile { display: none; }
}

@media (max-width: 900px) {
  .nav .nav-inner { width: min(100% - 1.5rem, 1120px); height: 66px; }
  .nav-links { align-items: stretch; }
  .nav-links a {
    min-height: 50px;
    min-width: 0;
    flex-direction: row;
    justify-content: flex-start;
    padding: .7rem 1rem;
    border-left: 0 !important;
    border-bottom: 1px solid rgba(134,114,255,.12);
  }
  .nav-links a::after { left: 0; right: auto; bottom: 0; width: 3px; height: 100%; }
  .nav-right { margin-left: auto; }
  .btn-dl { min-width: 46px; width: 46px; padding: 0; font-size: 0; }
  .btn-dl .dl-ic { font-size: 1.25rem; }
  .nav-right .nav-topup,
  .nav-right .nav-register { display: none; }
  .lang-switch { min-width: 46px; width: 46px; }
}