/* Tema: koyu zemin, altin vurgu, katmanli derinlik. */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@400;500;600;700&display=swap");

:root {
    --bg:       #0a0908;
    --bg-2:     #0f0e0b;
    --panel:    #16140f;
    --panel-2:  #1c1913;
    --line:     #2e2921;
    --line-2:   #453d2e;
    --gold:     #d4bd85;
    --gold-2:   #f0e0b8;
    --gold-dim: #8a7a54;
    --text:     #e6e2d8;
    --dim:      #8a8479;
    --ok:       #8ad48a;
    --bad:      #d47e7e;
    --display:  "Cinzel", Georgia, serif;
    --sans:     "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 15px/1.7 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(1200px 600px at 15% -5%,  rgba(212,189,133,.055), transparent 60%),
        radial-gradient(1000px 500px at 85% 105%, rgba(212,189,133,.04),  transparent 60%);
}
body > * { position: relative; z-index: 1; }

a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold-2); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---- ust menu ---- */
header.top {
    position: sticky; top: 0; z-index: 100;
    background: var(--glass);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px) saturate(1.2);
}
.top .wrap { display: flex; align-items: center; gap: 34px; height: 72px; }

.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand b {
    font: 700 17px/1 var(--display); letter-spacing: .18em; color: var(--gold);
    text-transform: uppercase;
}
.brand small { font-size: 9px; letter-spacing: .42em; color: var(--gold-dim); margin-top: 5px; text-transform: uppercase; }

nav.main { display: flex; gap: 4px; margin-left: auto; }
nav.main a {
    position: relative; color: var(--dim); font-size: 12px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; padding: 10px 16px; border-radius: 3px;
}
nav.main a::after {
    content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
nav.main a:hover { color: var(--text); }
nav.main a:hover::after, nav.main a.on::after { transform: scaleX(1); }
nav.main a.on { color: var(--gold); }

/* ---- hero ---- */
.hero {
    position: relative; min-height: 640px; display: flex; align-items: center;
    text-align: center; overflow: hidden; border-bottom: 1px solid var(--line);
}
.hero-bg {
    position: absolute; inset: 0;
    background: url("/assets/img/hero3.jpg") center 28% / cover no-repeat;
    transform: scale(1.06);
    animation: drift 34s ease-in-out infinite alternate;
}
@keyframes drift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}
.hero-veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(10,9,8,.60) 0%, rgba(10,9,8,.80) 48%, var(--bg) 100%),
        radial-gradient(900px 460px at 50% 42%, rgba(212,189,133,.15), transparent 68%);
}
.hero .wrap { position: relative; padding: 96px 24px; width: 100%; }

.hero h1 {
    margin: 0 0 14px; font: 700 clamp(40px, 7vw, 78px)/1.05 var(--display);
    letter-spacing: .06em; text-transform: uppercase;
    background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 55%, var(--gold-dim) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub {
    color: var(--dim); font-size: 13px; letter-spacing: .46em; text-transform: uppercase;
    margin-bottom: 40px; font-weight: 600;
}
.hero .rule {
    width: 210px; height: 1px; margin: 26px auto 34px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.status-pill {
    display: inline-flex; align-items: center; gap: 11px; padding: 9px 20px;
    border: 1px solid var(--line-2); border-radius: 999px;
    background: var(--glass); font-size: 12px; letter-spacing: .1em;
    margin-bottom: 30px; backdrop-filter: blur(6px);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.dot.up { background: var(--ok); box-shadow: 0 0 0 0 rgba(138,212,138,.7); animation: pulse 2.4s infinite; }
@keyframes pulse {
    70%  { box-shadow: 0 0 0 9px rgba(138,212,138,0); }
    100% { box-shadow: 0 0 0 0 rgba(138,212,138,0); }
}

.btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
    position: relative; display: inline-block; padding: 15px 38px; border-radius: 2px;
    border: 1px solid var(--line-2); color: var(--gold); background: rgba(22,20,15,.6);
    font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
    overflow: hidden; transition: color .25s, border-color .25s, transform .2s, box-shadow .25s;
}
.btn::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    transform: translateY(101%); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.btn > span { position: relative; z-index: 1; }
.btn:hover { color: #0f0d09; border-color: var(--gold); transform: translateY(-2px); }
.btn:hover::before { transform: translateY(0); }
.btn.solid { background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: #0f0d09; border-color: var(--gold); }
.btn.solid::before { background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.btn.solid:hover { box-shadow: 0 10px 30px rgba(212,189,133,.3); }

/* ---- bolum basligi ---- */
section { padding: 88px 0; }
section.alt {
    background: linear-gradient(180deg, var(--bg-2), var(--bg));
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

.sec-head { text-align: center; margin-bottom: 50px; }
.sec-head .kicker {
    display: inline-block; font-size: 10px; letter-spacing: .44em; text-transform: uppercase;
    color: var(--gold-dim); margin-bottom: 14px;
}
.sec-head h2 {
    margin: 0 0 14px; font: 700 clamp(26px, 3.4vw, 38px)/1.2 var(--display);
    letter-spacing: .05em; color: var(--text);
}
.sec-head .orn {
    width: 120px; height: 1px; margin: 0 auto 16px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.sec-head p { margin: 0 auto; color: var(--dim); max-width: 640px; font-size: 15px; }

/* ---- kart ---- */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
    position: relative; padding: 32px; border-radius: 4px;
    background: linear-gradient(165deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    transition: border-color .3s, transform .3s, box-shadow .3s;
    overflow: hidden;
}
.card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0; transition: opacity .35s;
}
.card:hover { border-color: var(--line-2); transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.card:hover::before { opacity: 1; }
.card h3 { margin: 0 0 12px; font: 700 16px/1.3 var(--display); letter-spacing: .06em; color: var(--gold); }
.card p { margin: 0; color: var(--dim); font-size: 14.5px; }
.card p + p { margin-top: 12px; }

.card .icn {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-bottom: 18px; border-radius: 3px;
    border: 1px solid var(--line-2); color: var(--gold); font-size: 19px;
    background: rgba(212,189,133,.06);
}

.stat { text-align: center; padding: 36px 20px; }
.stat .val {
    display: block; font: 700 42px/1 var(--display); letter-spacing: .02em;
    background: linear-gradient(180deg, var(--gold-2), var(--gold-dim));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: 10px;
}
.stat .lbl { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--dim); }

/* ---- tablo ---- */
.tbl-wrap {
    overflow-x: auto; border: 1px solid var(--line); border-radius: 4px;
    background: var(--panel); box-shadow: 0 12px 38px rgba(0,0,0,.4);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
    text-align: left; padding: 16px 18px; background: #12100c; color: var(--gold);
    font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
    border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
td { padding: 14px 18px; border-bottom: 1px solid rgba(46,41,33,.55); }
tbody tr { transition: background .18s; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(212,189,133,.05); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.rank { width: 54px; font: 700 14px var(--display); color: var(--gold-dim); }
.rank.top { color: var(--gold); font-size: 17px; }

.badge {
    display: inline-block; padding: 3px 11px; border-radius: 2px; font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--dim);
}
.badge.live { border-color: rgba(138,212,138,.5); color: var(--ok); background: rgba(138,212,138,.07); }
.badge.soon { border-color: var(--gold-dim); color: var(--gold); background: rgba(212,189,133,.07); }

/* ---- sekme ---- */
.tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 34px; flex-wrap: wrap; }
.tabs a {
    padding: 11px 24px; border: 1px solid var(--line); border-radius: 2px;
    font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
    transition: color .22s, border-color .22s, background .22s, box-shadow .22s;
}
.tabs a:hover { color: var(--text); border-color: var(--line-2); }
.tabs a.on {
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    border-color: var(--gold); color: #0f0d09;
    box-shadow: 0 6px 20px rgba(212,189,133,.24);
}

/* ---- video ---- */
.video {
    position: relative; padding-top: 56.25%; background: #000; border: 1px solid var(--line);
    border-radius: 4px; overflow: hidden; box-shadow: 0 20px 56px rgba(0,0,0,.55);
}
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .ph {
    position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px;
    align-items: center; justify-content: center; color: var(--dim);
    font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
    background: linear-gradient(160deg, #14120d, #0b0a07);
}
.video .ph .play {
    width: 70px; height: 70px; border-radius: 50%; border: 1px solid var(--gold-dim);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold); font-size: 22px; padding-left: 5px;
    transition: transform .3s, border-color .3s;
}
.video:hover .ph .play { transform: scale(1.08); border-color: var(--gold); }

/* ---- form ---- */
input[type=text] {
    padding: 12px 18px; background: var(--panel); border: 1px solid var(--line);
    border-radius: 2px; color: var(--text); font: 400 14px var(--sans); outline: none;
    transition: border-color .2s, box-shadow .2s;
}
input[type=text]:focus { border-color: var(--gold-dim); box-shadow: 0 0 0 3px rgba(212,189,133,.08); }
input[type=text]::placeholder { color: #5f5a51; }

/* ---- alt bilgi ---- */
footer {
    border-top: 1px solid var(--line); padding: 50px 0 44px; margin-top: 20px;
    color: var(--dim); font-size: 13px; text-align: center;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.4));
}
footer .ip {
    display: inline-block; margin-top: 8px; padding: 8px 18px; border: 1px solid var(--line-2);
    border-radius: 2px; color: var(--gold); font-family: Consolas, monospace; letter-spacing: .06em;
}
footer .legal { margin-top: 22px; font-size: 11.5px; opacity: .6; max-width: 660px; margin-left: auto; margin-right: auto; }

/* ---- yardimci ---- */
.muted { color: var(--dim); }
.center { text-align: center; }
.mt { margin-top: 30px; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s ease, transform .75s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
    .g4 { grid-template-columns: repeat(2, 1fr); }
    .g3, .g2 { grid-template-columns: 1fr; }
    .hero { min-height: 520px; }
    .hero .wrap { padding: 70px 24px; }
    .top .wrap { height: auto; padding: 14px 24px; flex-wrap: wrap; gap: 14px; }
    nav.main { margin-left: 0; width: 100%; overflow-x: auto; }
    section { padding: 60px 0; }
}

/* ---- alt sayfa basligi: kisa hero ---- */
.hero.sm { min-height: 300px; }
.hero.sm .wrap { padding: 60px 24px; }
.hero.sm h1 { font-size: clamp(30px, 4.6vw, 46px); }
.hero.sm .hero-bg { background-position: center 34%; animation: none; transform: scale(1.03); }

/* =========================================================================
   Hareket ve oyun dokusu
   ========================================================================= */

/* --- baslikta altin parlama gecisi --- */
.hero h1 {
    position: relative;
    background-size: 100% 100%;
}
.hero h1::after {
    content: attr(data-text); position: absolute; inset: 0;
    background: linear-gradient(100deg,
        transparent 20%, rgba(255,248,225,.85) 45%, rgba(255,248,225,.85) 55%, transparent 80%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 5.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes shimmer {
    0%, 62%  { background-position: 200% 0; }
    100%     { background-position: -60% 0; }
}

/* --- kor parcaciklari --- */
.embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ember {
    position: absolute; bottom: -12px; width: 3px; height: 3px; border-radius: 50%;
    background: var(--gold); opacity: 0;
    box-shadow: 0 0 7px 1px rgba(212,189,133,.75);
    animation: rise linear infinite;
}
@keyframes rise {
    0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
    12%  { opacity: .85; }
    75%  { opacity: .5; }
    100% { transform: translate3d(var(--dx, 24px), -680px, 0) scale(1.15); opacity: 0; }
}

/* --- bolum ayraci: elmas motifi --- */
.sec-head .orn {
    position: relative; width: 200px; height: 1px; margin: 0 auto 18px;
    background: linear-gradient(90deg, transparent, var(--gold-dim) 45%, var(--gold-dim) 55%, transparent);
}
.sec-head .orn::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 7px; height: 7px; margin: -4px 0 0 -4px;
    background: var(--gold); transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(212,189,133,.6);
}

/* --- kartlarda kose suslemesi ve imlec parlamasi --- */
.card { --mx: 50%; --my: 50%; }
.card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(340px circle at var(--mx) var(--my), rgba(212,189,133,.09), transparent 62%);
    transition: opacity .35s;
}
.card:hover::after { opacity: 1; }

.card .corner {
    position: absolute; width: 13px; height: 13px; pointer-events: none;
    border-color: var(--gold-dim); opacity: 0; transition: opacity .35s;
}
.card:hover .corner { opacity: .85; }
.card .corner.tl { top: 8px;    left: 8px;    border-top: 1px solid; border-left: 1px solid; }
.card .corner.tr { top: 8px;    right: 8px;   border-top: 1px solid; border-right: 1px solid; }
.card .corner.bl { bottom: 8px; left: 8px;    border-bottom: 1px solid; border-left: 1px solid; }
.card .corner.br { bottom: 8px; right: 8px;   border-bottom: 1px solid; border-right: 1px solid; }

/* --- ikon hafif nefes alir --- */
.card:hover .icn { border-color: var(--gold-dim); background: rgba(212,189,133,.11); transform: translateY(-2px); }
.card .icn { transition: border-color .3s, background .3s, transform .3s; }

/* --- kaydirma ilerleme cizgisi --- */
.progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold-2));
    box-shadow: 0 0 12px rgba(212,189,133,.5);
    transition: width .12s linear;
}

/* --- tabloda sira degisiminde vurgулama --- */
tbody tr:hover .rank { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
    .hero-bg, .hero h1::after, .ember { animation: none !important; }
    .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   Hero yeniden: gorsel kendi basligini tasiyor, metin altta konumlanir.
   ========================================================================= */
.hero {
    min-height: 0;
    height: clamp(460px, 62vw, 760px);
    align-items: flex-end;
}
.hero-bg {
    background-position: center 18%;
    background-size: cover;
    transform: scale(1.02);
    animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift {
    from { transform: scale(1.02); }
    to   { transform: scale(1.07); }
}
.hero-veil {
    background:
        linear-gradient(180deg, rgba(10,9,8,.18) 0%, rgba(10,9,8,.05) 34%,
                        rgba(10,9,8,.72) 74%, var(--bg) 100%);
}
.hero .wrap { padding: 0 24px 54px; }

/* gorselde zaten baslik var; sayfadaki h1 gizlenir, yerine kisa bir slogan */
.hero h1 { display: none; }
.hero .tagline {
    font: 700 clamp(15px, 2vw, 21px)/1.4 var(--display);
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2);
    text-shadow: 0 2px 18px rgba(0,0,0,.9); margin-bottom: 8px;
}
.hero .sub { margin-bottom: 26px; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.hero .rule { margin: 18px auto 24px; }
.status-pill { margin-bottom: 22px; }

.hero.sm { height: clamp(230px, 26vw, 320px); align-items: center; }
.hero.sm .wrap { padding: 40px 24px; }
.hero.sm h1 { display: block; font-size: clamp(28px, 4.4vw, 44px); }
.hero.sm .hero-bg { background-position: center 30%; animation: none; transform: scale(1.04); filter: blur(1px); }
.hero.sm .hero-veil { background: linear-gradient(180deg, rgba(10,9,8,.80), rgba(10,9,8,.88) 60%, var(--bg)); }

/* =========================================================================
   Palet genisletme: gorseldeki mavi-mor buyu tonlari, daha acik yuzeyler
   ========================================================================= */
:root {
    --arcane:   #7b8fd4;
    --arcane-2: #a98fd8;
    --ember:    #e08a4c;
    --panel:    #191712;
    --panel-2:  #221e17;
    --line:     #35301f;
    --line-2:   #524731;
}

/* zemine derinlik: iki renkli isik havuzu */
body::before {
    background:
        radial-gradient(1100px 620px at 12% -6%,  rgba(123,143,212,.075), transparent 62%),
        radial-gradient(1000px 540px at 88% 8%,   rgba(212,189,133,.075), transparent 62%),
        radial-gradient(900px  520px at 50% 108%, rgba(169,143,216,.06),  transparent 62%);
}

/* bolumler arasi ince isik cizgisi */
section + section::before {
    content: ""; display: block; height: 1px; margin: -88px auto 88px; max-width: 1100px;
    background: linear-gradient(90deg, transparent, rgba(212,189,133,.22), rgba(123,143,212,.18), transparent);
}

/* kartlarda ust kenar artik iki renkli */
.card::before { background: linear-gradient(90deg, transparent, var(--gold), var(--arcane), transparent); }

/* ikonlar buyu tonunda parlar */
.card:hover .icn { border-color: var(--arcane); background: rgba(123,143,212,.12); color: var(--arcane-2); }

/* istatistik sayilari daha canli */
.stat .val { background: linear-gradient(160deg, var(--gold-2) 0%, var(--gold) 45%, var(--arcane) 130%); -webkit-background-clip: text; background-clip: text; }

/* sekmelerde aktif olan buyu izi birakir */
.tabs a.on { box-shadow: 0 6px 22px rgba(212,189,133,.22), 0 0 0 1px rgba(123,143,212,.25); }

/* tablo satirlarinda hover mor-altin gecis */
tbody tr:hover td { background: linear-gradient(90deg, rgba(212,189,133,.06), rgba(123,143,212,.05)); }

/* ---- geri sayim ---- */
[data-until] { font-variant-numeric: tabular-nums; color: var(--arcane); letter-spacing: .02em; }
[data-until].urgent { color: var(--ember); animation: blink 1.6s ease-in-out infinite; }
[data-until].done { color: var(--ok); }
@keyframes blink { 50% { opacity: .55; } }

/* =========================================================================
   Enchant simulatoru
   ========================================================================= */
.enc-item {
    position: relative; width: 190px; height: 190px; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-2); border-radius: 6px;
    background: linear-gradient(160deg, #1d1a14, #100e0a);
    transition: border-color .3s, box-shadow .4s;
}
.enc-glow {
    position: absolute; inset: -1px; border-radius: 6px; pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(212,189,133,.16), transparent 66%);
    opacity: 0; transition: opacity .5s;
}
.enc-item.lit .enc-glow { opacity: 1; }
.enc-item.high { border-color: var(--gold); box-shadow: 0 0 34px rgba(212,189,133,.28), inset 0 0 26px rgba(212,189,133,.08); }
.enc-item.mythic { border-color: var(--arcane); box-shadow: 0 0 46px rgba(123,143,212,.4), inset 0 0 30px rgba(123,143,212,.12); }

.enc-blade { font-size: 74px; line-height: 1; filter: drop-shadow(0 4px 14px rgba(0,0,0,.7)); transition: transform .3s, filter .4s; }
.enc-item.high .enc-blade   { filter: drop-shadow(0 0 16px rgba(212,189,133,.65)); }
.enc-item.mythic .enc-blade { filter: drop-shadow(0 0 22px rgba(123,143,212,.8)); }

.enc-level {
    position: absolute; bottom: 12px; right: 16px;
    font: 700 26px/1 var(--display); color: var(--gold);
    text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.enc-item.mythic .enc-level { color: var(--arcane-2); }

@keyframes encWin  { 0%,100% { transform: scale(1); } 40% { transform: scale(1.16) rotate(-4deg); } }
@keyframes encFail { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.enc-blade.win  { animation: encWin .55s ease; }
.enc-blade.fail { animation: encFail .5s ease; }

.enc-odds { font-size: 14px; color: var(--dim); }
.enc-msg { min-height: 26px; margin-top: 16px; font-size: 14px; letter-spacing: .04em; }
.enc-msg.ok   { color: var(--ok); }
.enc-msg.bad  { color: var(--bad); }
.enc-msg.epic { color: var(--arcane-2); font-weight: 600; }

.enc-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; margin-top: 14px; }
.enc-cell {
    padding: 7px 4px; text-align: center; border: 1px solid var(--line);
    border-radius: 2px; font-size: 11px; background: rgba(0,0,0,.25);
    transition: border-color .25s, background .25s;
}
.enc-cell b { display: block; font: 700 13px var(--display); color: var(--gold); }
.enc-cell.now { border-color: var(--gold); background: rgba(212,189,133,.12); }
.enc-cell.safe b { color: var(--ok); }

/* =========================================================================
   Item ikonlari
   ========================================================================= */
.ico {
    display: inline-block; width: 32px; height: 32px; vertical-align: middle;
    margin-right: 10px; border: 1px solid var(--line); border-radius: 3px;
    background: #0d0c09 center / contain no-repeat; image-rendering: -webkit-optimize-contrast;
    flex: 0 0 auto;
}
.ico.miss { background: linear-gradient(135deg, #17150f, #0d0c09); }
.item-cell { display: flex; align-items: center; }

/* --- su an bolumu --- */
.pulse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.pulse {
    position: relative; padding: 26px 24px; border-radius: 4px; overflow: hidden;
    background: linear-gradient(165deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
}
.pulse .lbl { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.pulse .big { font: 700 27px/1.15 var(--display); color: var(--gold); }
.pulse .sm  { font-size: 13px; color: var(--dim); margin-top: 7px; }
.pulse::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, var(--gold), var(--arcane));
    transform: scaleX(0); transform-origin: left; transition: transform .5s;
}
.pulse:hover::after { transform: scaleX(1); }

/* =========================================================================
   Hareket katmani: gecisler, derinlik, imlec isigi
   ========================================================================= */

/* --- sayfa gecisi: acilirken yumusakca belirir, ayrilirken soner --- */
.page-veil {
    position: fixed; inset: 0; z-index: 999; pointer-events: none;
    background: var(--bg); opacity: 1;
    transition: opacity .45s ease;
}
.page-veil.gone { opacity: 0; }
.page-veil.leaving { opacity: 1; pointer-events: all; transition: opacity .28s ease; }

/* --- imleci takip eden yumusak isik --- */
.cursor-glow {
    position: fixed; width: 420px; height: 420px; border-radius: 50%;
    pointer-events: none; z-index: 2; opacity: 0;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(212,189,133,.055), transparent 62%);
    transition: opacity .5s ease;
}
.cursor-glow.on { opacity: 1; }

/* --- baslik kelimeleri alttan yukselir --- */
.rise { display: inline-block; overflow: hidden; vertical-align: bottom; }
.rise > i {
    display: inline-block; font-style: inherit;
    transform: translateY(105%); opacity: 0;
    transition: transform .7s cubic-bezier(.19,1,.22,1), opacity .7s ease;
}
.rise.in > i { transform: none; opacity: 1; }

/* --- kartlarda uc boyutlu egilme --- */
.card.tilt {
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.19,1,.22,1), border-color .3s, box-shadow .3s;
    will-change: transform;
}
.card.tilt .icn, .card.tilt h3 { transform: translateZ(22px); }

/* --- tablo satirlari sirayla belirir --- */
tbody tr.stagger { opacity: 0; transform: translateY(8px); animation: rowIn .5s ease forwards; }
@keyframes rowIn { to { opacity: 1; transform: none; } }

/* --- bolum ayraci kendini cizer --- */
.sec-head .orn { transform: scaleX(0); transform-origin: center; transition: transform .8s cubic-bezier(.19,1,.22,1); }
.sec-head.in .orn { transform: scaleX(1); }
.sec-head .orn::before { opacity: 0; transition: opacity .4s .5s; }
.sec-head.in .orn::before { opacity: 1; }

/* --- butonlarda isik suzulmesi --- */
.btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,248,225,.22), transparent);
    transform: translateX(-160%) skewX(-18deg);
    transition: transform .7s ease;
}
.btn:hover::after { transform: translateX(320%) skewX(-18deg); }

/* --- menu alt cizgisi kayarak gelir --- */
nav.main { position: relative; }

@media (prefers-reduced-motion: reduce) {
    .page-veil, .cursor-glow { display: none; }
    .rise > i { transform: none; opacity: 1; }
    .card.tilt { transform: none !important; }
    tbody tr.stagger { opacity: 1; transform: none; animation: none; }
    .sec-head .orn { transform: scaleX(1); }
}

/* --- sayfa girisi/cikisi: gercek hareket --- */
.page {
    animation: pageIn .5s cubic-bezier(.22, 1, .28, 1) both;
}
@keyframes pageIn {
    from { opacity: 0; transform: translateX(46px); }
    to   { opacity: 1; transform: none; }
}
.page.leaving {
    animation: pageOut .26s ease forwards;
}
@keyframes pageOut {
    to { opacity: 0; transform: translateX(-46px); }
}

/* perde artik yalnizca hafif bir karartma; asil hareket .page uzerinde */
.page-veil { background: var(--bg); opacity: .85; }
.page-veil.gone { opacity: 0; }


/* ---------- Dunya haritasi ---------- */
.wmap {
    position: relative; overflow: hidden; user-select: none;
    aspect-ratio: 5 / 4; max-height: 620px; margin: 0 auto;
    border: 1px solid var(--line-2); border-radius: 3px;
    background: #0c1114; cursor: grab;
    box-shadow: 0 20px 56px rgba(0,0,0,.6), inset 0 0 120px rgba(0,0,0,.7);
}
.wmap.drag { cursor: grabbing; }
.wmap::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
    box-shadow: inset 0 0 90px rgba(0,0,0,.75), inset 0 0 0 1px rgba(212,189,133,.10);
}
.wmap-stage {
    position: absolute; inset: 0; transform-origin: 0 0;
    will-change: transform; --s: 1;
}
.wmap-stage.anim { transition: transform .62s cubic-bezier(.22,.85,.28,1); }
.wmap-img { width: 100%; height: 100%; display: block; object-fit: fill; }

.wmap-dot {
    position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
    border-radius: 50%; z-index: 3;
    transform: scale(calc(1 / var(--s)));
    background: radial-gradient(circle at 50% 50%, #fff3d0 0%, var(--gold) 42%, rgba(212,189,133,0) 72%);
    box-shadow: 0 0 10px 2px rgba(212,189,133,.55);
    animation: wmPulse 2.4s ease-in-out infinite;
}
.wmap-dot::after {
    content: ''; position: absolute; inset: -7px; border-radius: 50%;
    border: 1px solid rgba(212,189,133,.5); opacity: 0;
    animation: wmRing 2.4s ease-out infinite;
}
@keyframes wmPulse { 0%,100% { opacity: .82 } 50% { opacity: 1 } }
@keyframes wmRing  { 0% { transform: scale(.4); opacity: .85 } 70%,100% { transform: scale(1.5); opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
    .wmap-dot, .wmap-dot::after { animation: none }
    .wmap-stage.anim { transition: none }
}

.wmap-focus {
    position: absolute; z-index: 2; pointer-events: none;
    border: 1px solid rgba(212,189,133,.45);
    box-shadow: 0 0 0 9999px rgba(6,8,10,.52);
    transition: opacity .45s;
}
.wmap.zoomed .wmap-focus { opacity: 0; }

.wmap-ui {
    position: absolute; right: 12px; bottom: 12px; z-index: 6;
    display: flex; gap: 6px;
}
.wmap-ui button {
    width: 34px; height: 34px; line-height: 1; cursor: pointer;
    font: 600 15px/1 var(--display); color: var(--gold);
    background: rgba(12,11,9,.82); border: 1px solid var(--line-2); border-radius: 2px;
    backdrop-filter: blur(6px); transition: all .18s;
}
.wmap-ui button.wide { width: auto; padding: 0 13px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.wmap-ui button:hover { color: var(--gold-2); border-color: var(--gold-dim); background: rgba(30,26,18,.92); }

.wmap-tip {
    position: absolute; z-index: 7; pointer-events: none; opacity: 0;
    padding: 7px 11px; max-width: 240px;
    font: 500 12px/1.45 var(--body, inherit); color: var(--gold-2);
    background: rgba(9,8,7,.94); border: 1px solid var(--line-2); border-radius: 2px;
    transform: translate(-50%, -132%); transition: opacity .16s;
    white-space: nowrap;
}
.wmap-tip.on { opacity: 1; }
.wmap-tip b { color: var(--gold); font-weight: 700; }
.wmap-tip span { color: var(--gold-dim); }

.wmap-legend {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px; font-size: 12.5px; color: var(--gold-dim);
}
.wmap-legend i {
    width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
    box-shadow: 0 0 8px rgba(212,189,133,.7); font-style: normal;
}

/* Arama sonucunda mob adi baglantisi */
.mob-link { color: var(--gold); font-weight: 600; }
.mob-link:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }

/* Harita yer adlari */
.wmap-label {
    position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
    transform: translate(-50%, -50%) scale(calc(1 / var(--s)));
    text-shadow: 0 0 4px #000, 0 0 9px rgba(0,0,0,.95), 0 1px 2px #000;
}
.wmap-label.town {
    font: 600 12.5px/1 var(--display); letter-spacing: .13em; text-transform: uppercase;
    color: #f2e6c6;
}
.wmap-label.town::before {
    content: ''; display: block; width: 4px; height: 4px; margin: 0 auto 4px;
    background: var(--gold-2); border-radius: 50%; box-shadow: 0 0 6px rgba(240,224,184,.9);
}
.wmap-label.area {
    font: 500 11px/1 var(--body, inherit); letter-spacing: .05em;
    color: rgba(212,189,133,.86); opacity: 0; transition: opacity .3s;
}
.wmap.zoomed .wmap-label.area { opacity: 1; }
.wmap.deep  .wmap-label.town { color: #fff6dd; }
@media (max-width: 700px) { .wmap-label.town { font-size: 11px; letter-spacing: .08em } }

/* Login acik ama oyun sunucusu kapali: yeniden baslatiliyor */
.dot.warn { background: #d9a441; box-shadow: 0 0 0 0 rgba(217,164,65,.7); animation: pulse 2.4s infinite; }

/* ---------- Mob savas istatistikleri ---------- */
.mstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.mstat {
    padding: 13px 14px; border: 1px solid var(--line); border-radius: 3px;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
}
.mstat b { display: block; font: 700 17px/1.2 var(--display); color: var(--gold-2); letter-spacing: .02em; }
.mstat span { display: block; margin-top: 5px; font-size: 10.5px; letter-spacing: .13em;
              text-transform: uppercase; color: var(--gold-dim); }

.elems { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px; }
@media (max-width: 620px) { .elems { grid-template-columns: repeat(3, 1fr) } }
.elem {
    position: relative; overflow: hidden; text-align: center;
    padding: 12px 6px 11px; border: 1px solid var(--line); border-radius: 3px;
    background: var(--panel);
}
.elem i {
    position: absolute; left: 0; right: 0; top: 0; height: 2px; font-style: normal;
    background: var(--ec);
}
.elem b { display: block; font: 700 16px/1.2 var(--display); color: var(--ec); }
.elem span { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .12em;
             text-transform: uppercase; color: var(--gold-dim); }
.elem.weak { border-color: var(--ec); box-shadow: 0 0 18px -6px var(--ec); }
.elem.weak::after {
    content: 'weak'; position: absolute; right: 5px; top: 5px;
    font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ec); opacity: .85;
}
.elem.fire  { --ec: #e0603c }
.elem.water { --ec: #4f9fd4 }
.elem.wind  { --ec: #6fc48a }
.elem.earth { --ec: #b98c4a }
.elem.holy  { --ec: #e8d98a }
.elem.dark  { --ec: #9b7bd4 }

.atk-elem {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 14px;
    padding: 8px 15px; border: 1px solid var(--line-2); border-radius: 999px;
    background: var(--glass); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gold-dim);
}
.atk-elem b { color: var(--gold-2); font-weight: 700; letter-spacing: .1em; }

/* =========================================================================
   TEMALAR
   Klasik palet yukarida :root icinde durur ve varsayilandir.
   Asagidakiler yalnizca renk degiskenlerini ezer; yerlesim degismez.
   Secim <html data-theme="..."> ile uygulanir, tarayicida saklanir.
   ========================================================================= */
:root { --glass: rgba(10,9,8,.72); }

/* -- Gece Mavisi: soguk arduvaz, yuzeyler daha acik, goz dinleniyor -- */
:root[data-theme="midnight"] {
    --bg:       #10151e;
    --bg-2:     #151c28;
    --panel:    #1b2331;
    --panel-2:  #232d3e;
    --line:     #2e3a4e;
    --line-2:   #435268;
    --gold:     #e3cb90;
    --gold-2:   #f7ebc6;
    --gold-dim: #91a0b8;
    --text:     #e2e8f1;
    --dim:      #97a4b8;
    --glass:    rgba(16,21,30,.74);
    --arcane:   #8aa2e0;
    --arcane-2: #b49ce4;
}

/* -- Zumrut: derin yesil, sicak altin vurgu -- */
:root[data-theme="emerald"] {
    --bg:       #0d1613;
    --bg-2:     #121d18;
    --panel:    #17241d;
    --panel-2:  #1e2f26;
    --line:     #283b31;
    --line-2:   #3c5647;
    --gold:     #dcc78d;
    --gold-2:   #f4e8bf;
    --gold-dim: #85998a;
    --text:     #e1eae3;
    --dim:      #93a69a;
    --glass:    rgba(13,22,19,.74);
    --arcane:   #6fc4a8;
    --arcane-2: #9ad4b4;
}

/* -- Grafit: notr gri, koyu ailenin en aciği, en ferah okuma -- */
:root[data-theme="graphite"] {
    --bg:       #16181a;
    --bg-2:     #1c1f22;
    --panel:    #22262a;
    --panel-2:  #2a2f34;
    --line:     #353b41;
    --line-2:   #4b535b;
    --gold:     #e0cb9b;
    --gold-2:   #f6ebd0;
    --gold-dim: #9aa1a8;
    --text:     #e6e8ea;
    --dim:      #a0a6ac;
    --glass:    rgba(22,24,26,.74);
}

/* Tema secici */
.theme-pick {
    position: fixed; right: 16px; bottom: 16px; z-index: 300;
    display: flex; align-items: center; gap: 7px; padding: 7px 9px;
    border: 1px solid var(--line-2); border-radius: 999px;
    background: var(--glass); backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.theme-pick button {
    width: 20px; height: 20px; padding: 0; cursor: pointer; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22); transition: transform .16s, box-shadow .16s;
}
.theme-pick button:hover { transform: scale(1.18); }
.theme-pick button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold); }
.theme-pick .tp-classic  { background: linear-gradient(135deg, #16140f 50%, #d4bd85 50%); }
.theme-pick .tp-midnight { background: linear-gradient(135deg, #1b2331 50%, #8aa2e0 50%); }
.theme-pick .tp-emerald  { background: linear-gradient(135deg, #17241d 50%, #6fc4a8 50%); }
.theme-pick .tp-graphite { background: linear-gradient(135deg, #22262a 50%, #e0cb9b 50%); }
@media (max-width: 620px) { .theme-pick { right: 10px; bottom: 10px } }

/* Nefes payi: mob sayfasi cok yogun, bolumleri birbirinden ayirir */
.mstats { margin-bottom: 4px; }
.tbl-wrap { margin-bottom: 8px; }
section > .wrap > .sec-head:first-child { margin-top: 8px; }

/* -- Bordo: sarap kirmizisi, sicak ve agir -- */
:root[data-theme="crimson"] {
    --bg:       #16100f;
    --bg-2:     #1d1614;
    --panel:    #241b18;
    --panel-2:  #2f221e;
    --line:     #3c2b27;
    --line-2:   #583d37;
    --gold:     #dfb98a;
    --gold-2:   #f7dfc0;
    --gold-dim: #ac8279;
    --text:     #f0e2db;
    --dim:      #b09992;
    --glass:    rgba(22,16,15,.74);
    --arcane:   #d4707a;
    --arcane-2: #e09a8c;
}

/* -- Ametist: buyu moru, serin -- */
:root[data-theme="amethyst"] {
    --bg:       #14101c;
    --bg-2:     #1a1526;
    --panel:    #201a2e;
    --panel-2:  #2a223b;
    --line:     #352c4a;
    --line-2:   #4d4068;
    --gold:     #e2cba4;
    --gold-2:   #f8e9cc;
    --gold-dim: #9d8dba;
    --text:     #e8e2f2;
    --dim:      #a598bb;
    --glass:    rgba(20,16,28,.74);
    --arcane:   #a98fd8;
    --arcane-2: #c4aeea;
}

/* -- Okyanus: koyu deniz mavisi-yesili -- */
:root[data-theme="ocean"] {
    --bg:       #0e1719;
    --bg-2:     #131f22;
    --panel:    #18272b;
    --panel-2:  #203338;
    --line:     #2a4147;
    --line-2:   #3e5d65;
    --gold:     #dac68f;
    --gold-2:   #f3e6be;
    --gold-dim: #829ba1;
    --text:     #e0ebed;

    --dim:      #94a9ad;
    --glass:    rgba(14,23,25,.74);
    --arcane:   #62b8c4;
    --arcane-2: #8fd0d8;
}

/* -- Parsomen: acik tema. Hero'nun altinda koyu foto durdugu icin
      hero yazilari ve alt bilgi ayrica acik tutulur. -- */
:root[data-theme="parchment"] {
    --bg:       #ece5d8;
    --bg-2:     #e3dbcb;
    --panel:    #fbf7ef;
    --panel-2:  #f3ece0;
    --line:     #d7cebb;
    --line-2:   #b9ab92;
    --gold:     #7a5c22;
    --gold-2:   #6a5220;
    --gold-dim: #6b6047;
    --text:     #2b2721;
    --dim:      #6a6254;
    --glass:    rgba(251,247,239,.86);
    --ok:       #2f7d3f;
    --bad:      #a53a3a;
}
:root[data-theme="parchment"] .hero .sub      { color: #d8cfbe; }
:root[data-theme="parchment"] .hero .tagline  { color: #f3e6c6; }
:root[data-theme="parchment"] .hero h1        { background: linear-gradient(180deg,#f7ecd0 0%,#e2c88f 55%,#b99b5c 100%); }
:root[data-theme="parchment"] .status-pill    { color: #efe7d6; background: rgba(20,16,12,.62); border-color: rgba(255,255,255,.18); }
:root[data-theme="parchment"] footer          { background: linear-gradient(180deg, transparent, rgba(0,0,0,.06)); }
:root[data-theme="parchment"] .card,
:root[data-theme="parchment"] .mstat,
:root[data-theme="parchment"] .elem           { box-shadow: 0 2px 10px rgba(60,50,30,.07); }
:root[data-theme="parchment"] .card:hover     { box-shadow: 0 14px 34px rgba(60,50,30,.16); }
:root[data-theme="parchment"] .wmap           { box-shadow: 0 14px 40px rgba(60,50,30,.22); }
:root[data-theme="parchment"] .theme-pick     { box-shadow: 0 10px 30px rgba(60,50,30,.22); }
:root[data-theme="parchment"] .theme-pick button { border-color: rgba(0,0,0,.20); }

.theme-pick .tp-crimson   { background: linear-gradient(135deg, #241b18 50%, #d4707a 50%); }
.theme-pick .tp-amethyst  { background: linear-gradient(135deg, #201a2e 50%, #a98fd8 50%); }
.theme-pick .tp-ocean     { background: linear-gradient(135deg, #18272b 50%, #62b8c4 50%); }
.theme-pick .tp-parchment { background: linear-gradient(135deg, #fbf7ef 50%, #8a6a2c 50%); }

/* Tema degisirken tum gecisler kapanir. Chrome, gecisli bir ozelligin degeri
   degiskenden geldiginde eski rengi koruyabiliyor; anlik gecis bunu onler. */
html.theme-switching, html.theme-switching *,
html.theme-switching *::before, html.theme-switching *::after {
    transition: none !important;
    animation-duration: 0s !important;
}

/* Ana sayfa hero basligi. Alt sayfalarda .hero.sm h1 zaten aciktir;
   burada yalnizca ana hero'yu geri aciyoruz. Yazi gorselin icine
   gomulmez - boylece mobilde kirpilmaz ve fontla keskin kalir. */
.hero:not(.sm) h1.hero-title {
    display: block;
    margin: 0 0 10px;
    font: 700 clamp(44px, 9vw, 104px)/1 var(--display);
    letter-spacing: .1em;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,.85));
}
.hero:not(.sm) .tagline { margin-top: 4px; }
@media (max-width: 620px) {
    .hero:not(.sm) h1.hero-title { letter-spacing: .05em; }
}

/* ---------- Hero wordmark: metalik oyun logosu gorunumu ----------
   Yazi HTML olarak duruyor; boylece mobilde kirpilmiyor, ceviri ve
   sunucu adi degisiminde otomatik guncelleniyor. Derinlik icin
   background-clip:text uzerine katmanli drop-shadow kullaniliyor -
   text-shadow saydam harflerde gorunmez. */
.hero:not(.sm) h1.hero-title {
    position: relative;
    background: linear-gradient(180deg,
        #fff8e4 0%, #f6e9c4 16%, #dcc68d 38%,
        #a9814a 56%, #f2e3b8 72%, #8d6c30 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter:
        drop-shadow(0 1px 0 rgba(0,0,0,.95))
        drop-shadow(0 2px 1px rgba(0,0,0,.75))
        drop-shadow(0 6px 14px rgba(0,0,0,.85))
        drop-shadow(0 0 30px rgba(212,112,122,.28));
}

/* Baslik altindaki ince cift cizgi ve ortadaki elmas */
.hero:not(.sm) h1.hero-title::after {
    content: '';
    position: absolute; left: 50%; bottom: -14px;
    width: min(62%, 420px); height: 6px;
    transform: translateX(-50%);
    background:
        linear-gradient(90deg, transparent, var(--gold-dim) 18%, var(--gold) 50%, var(--gold-dim) 82%, transparent) center 0/100% 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(212,189,133,.35) 30%, rgba(212,189,133,.35) 70%, transparent) center 5px/100% 1px no-repeat;
    opacity: .9;
}
.hero:not(.sm) .tagline { margin-top: 26px; }

@media (prefers-reduced-motion: no-preference) {
    .hero:not(.sm) h1.hero-title { animation: wmIn 1.1s cubic-bezier(.2,.9,.3,1) both; }
    @keyframes wmIn {
        from { opacity: 0; transform: translateY(14px) scale(.97); letter-spacing: .26em; }
        to   { opacity: 1; transform: none; }
    }
}

/* ---------- Hero logo kilidi: LINEAGE II / VALDOMIR / suslu cizgi ----------
   Tamami HTML. Gorsele gomulmedigi icin mobilde kirpilmiyor, sunucu adi
   degisince otomatik guncelleniyor ve harfler her zaman kusursuz. */
.hero:not(.sm) .hero-eyebrow {
    font: 700 clamp(13px, 1.9vw, 19px)/1 var(--display);
    letter-spacing: .52em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 18px;
    padding-left: .58em;              /* harf araligi ortalamayi kaydirir */
    text-shadow: 0 1px 2px #000, 0 2px 14px rgba(0,0,0,.95), 0 0 34px rgba(0,0,0,.8);
    position: relative;
}
/* Ust satirin iki yanina ince cizgi */
.hero:not(.sm) .hero-eyebrow::before,
.hero:not(.sm) .hero-eyebrow::after {
    content: ''; position: absolute; top: 50%; width: clamp(28px, 7vw, 80px); height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.hero:not(.sm) .hero-eyebrow::before { right: calc(50% + 5.6em); }
.hero:not(.sm) .hero-eyebrow::after  { left:  calc(50% + 5.0em); transform: scaleX(-1); }

/* ---------- Hero logosu (gomulu SVG) ----------
   SVG oldugu icin her ekranda keskin; harfler Cinzel ile ciziliyor.
   Genislik ekrana gore sinirlanir, kucuk ekranda kirpilmaz. */
.hero .wordmark {
    display: block;
    width: min(760px, 88vw);
    margin: 0 auto 18px;
    padding: 0;
}
.hero .wordmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero:not(.sm) .hero-eyebrow { display: none; }   /* artik SVG icinde */
.hero:not(.sm) .tagline { margin-top: 2px; }

@media (prefers-reduced-motion: no-preference) {
    .hero .wordmark { animation: wmIn 1.05s cubic-bezier(.2,.9,.3,1) both; }
}

/* Ust menudeki online sayaci. Menunun sagina, Download'un yanina oturur. */
.nav-status {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: 20px; padding: 7px 14px;
    border: 1px solid var(--line-2); border-radius: 999px;
    background: var(--glass);
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--dim); white-space: nowrap;
}
.nav-status strong { color: var(--gold); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; }
.nav-status .dot { width: 7px; height: 7px; }
@media (max-width: 900px) { .nav-status { margin-left: auto; } }
@media (max-width: 620px) { .nav-status { font-size: 10px; padding: 6px 11px; margin-left: 10px; } }

/* Ana sayfa hero'su: icerik dikeyde ortalanir.
   Onceki tasarimda buyuk baslik yoktu ve blok alta yaslanmisti
   (satir 406: align-items: flex-end); logo eklenince asagi kaymis
   duruyordu. Alt sayfalar (.hero.sm) eski davranisini korur. */
.hero:not(.sm) { align-items: center; }
.hero:not(.sm) .wrap { padding: 0 24px; }