@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Marcellus&family=Spectral:wght@300;400;500;600&display=swap');

/* =====================================================================
   VIGOR M2 — "TAHT" (v3)
   AAA lansman sitesi: tam ekran sanat, eritilmiş altın kenarlıklar,
   filigran başlıklar, kart galerileri. Renkler admin temasından türetilir.
===================================================================== */
:root{
    --bg: #1b0d0a;
    --card: #1b0d0a;
    --card2: #482319;
    --accent: #d4670a;
    --accent2: #ffa51f;
    --bbody: #2c150f;
    --btext: #ffa51f;
    --bborder: #ff8c2a;
    --alert-bg: #ca620a;
    --alert-tx: #ffffff;
    --btn2: #ffcc8e;
    --glow: #d4670a;
    --glow-22: #d4670a22;
    --glow-40: #d4670a40;
    --glow-73: #d4670a73;
    --night: #070508;
    --ink: rgba(255,255,255,.055);
    --ink-2: rgba(255,255,255,.12);
    /* eritilmiş altın (arka plan sanatıyla aynı dil) */
    --gold-hi: #f9e9b8;
    --gold: #ffa51f;
    --gold-deep: #d4670a;
    --gold-dark: #5a2c08;
    --gold-grad: linear-gradient(165deg, var(--gold-hi) 0%, var(--gold) 24%, var(--gold-deep) 52%, var(--gold-dark) 78%, var(--gold) 100%);
    --metal-text: linear-gradient(180deg, #fff8e3 8%, var(--gold-hi) 26%, var(--gold) 52%, var(--gold-deep) 78%, #7a3d08 96%);
    --panel-bg: linear-gradient(180deg, #140c06e6, #0b0603f2 70%);
}

*{ box-sizing: border-box; }
html{ background-color: var(--night); scroll-behavior: smooth; }
body{
    font-family: 'Spectral', serif;
    color: var(--btext);
    background-color: transparent;
    margin: 0; position: relative; overflow-x: hidden;
    font-size: 15.5px; line-height: 1.7;
}
img{ max-width: 100% !important; height: auto !important; }
::selection{ background: var(--gold-deep); color: var(--night); }
h1,h2,h3,h4,h5{ margin: 0; }
a{ text-decoration: none; }
a:hover{ text-decoration: none; }

body::-webkit-scrollbar{ width: 11px; }
body::-webkit-scrollbar-track{ background: #0a0604; }
body::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, var(--gold), var(--gold-dark)); border: 2px solid #0a0604; border-radius: 8px; }

/* =====================================================================
   SABİT KATMANLAR
===================================================================== */
.realm-bg{
    position: fixed; inset: 0; z-index: -6; pointer-events: none;
    background: url(https://vigorm2.com/app/templates/client/ascent/images/realm-bg.jpg) center 18% / cover no-repeat;
    filter: saturate(1.22) brightness(1.02);
    transform: scale(1.02);
}
/* içerik alanına inildikçe koyulaşan perde */
.realm-veil{
    position: fixed; inset: 0; z-index: -5; pointer-events: none;
    background: linear-gradient(180deg, transparent 42%, #0705082e 68%, #07050861);
}

.embers{ position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.ember{
    position: absolute; bottom: -14px; border-radius: 50%;
    background: radial-gradient(circle, #fff9, var(--gold) 38%, transparent 75%);
    box-shadow: 0 0 14px var(--glow), 0 0 5px var(--gold);
    opacity: 0; animation: emberRise linear infinite;
}
@keyframes emberRise{
    0%{ transform: translateY(0) translateX(0) scale(1); opacity: 0 }
    10%{ opacity: .85 }
    55%{ transform: translateY(-55vh) translateX(28px) scale(.82); opacity: .5 }
    100%{ transform: translateY(-112vh) translateX(-20px) scale(.25); opacity: 0 }
}
@keyframes shimmer{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes gemPulse{ 0%{box-shadow:0 0 0 0 rgba(58,208,122,.65)} 70%{box-shadow:0 0 0 9px rgba(58,208,122,0)} 100%{box-shadow:0 0 0 0 rgba(58,208,122,0)} }
@keyframes riseUp{ from{opacity:0; transform: translateY(34px)} to{opacity:1; transform:none} }

.wrap{ width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* =====================================================================
   KAYDIRMA İLERLEMESİ
===================================================================== */
.quest-progress{ position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100001; background: rgba(255,255,255,.05); }
.quest-progress span{
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--gold), var(--gold-deep));
    box-shadow: 0 0 14px var(--glow-73);
}

/* =====================================================================
   ORTALANMIŞ SÜSLÜ NAVİGASYON
===================================================================== */
.ornav{
    position: fixed; top: 3px; left: 0; right: 0; z-index: 99992;
    background: linear-gradient(180deg, #070508b8, #07050847 70%, transparent);
    transition: background .35s ease, box-shadow .35s ease;
}
.ornav.scrolled{
    background: #070508f0; box-shadow: 0 16px 44px rgba(0,0,0,.6);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.ornav-in{
    max-width: 1280px; margin: 0 auto; padding: 8px 24px;
    display: flex; align-items: center; justify-content: center; gap: 34px;
}
.nwing{ display: flex; align-items: center; gap: 8px; flex: 1; }
.nwing-l{ justify-content: flex-end; }
.nwing-r{ justify-content: flex-start; }
.nlink{
    position: relative; padding: 12px 16px;
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 13.5px; letter-spacing: 2.6px; text-transform: uppercase;
    color: #e8d5b0cc; transition: color .25s ease, text-shadow .25s ease;
}
.nlink::after{
    content:"◆"; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%) scale(0);
    color: var(--gold); font-size: 7px; transition: transform .28s cubic-bezier(.2,.7,.2,1);
    text-shadow: 0 0 8px var(--glow-73);
}
.nlink:hover{ color: #fff; }
.nlink:hover::after, .nlink.active::after{ transform: translateX(-50%) scale(1); }
.nlink.active{ color: var(--gold); text-shadow: 0 0 20px var(--glow-73); }
.nbrand{ flex-shrink: 0; }
.nbrand img{ width: 92px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.75)); transition: transform .3s ease, filter .3s ease; }
.nbrand:hover img{ transform: scale(1.07); filter: drop-shadow(0 0 26px var(--glow-73)); }
.ornav-edge{
    height: 1px; margin: 0 auto; max-width: 1100px;
    background: linear-gradient(90deg, transparent, var(--glow-73) 30%, var(--gold) 50%, var(--glow-73) 70%, transparent);
    opacity: .55;
}

/* =====================================================================
   TAM EKRAN SANAT SAHNESİ
===================================================================== */
.throne{
    position: relative; min-height: 100vh;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 110px 18px 40px;
}
/* alt geçiş: sanattan içeriğe yumuşak iniş */
.throne::after{
    content:""; position: absolute; left: 0; right: 0; bottom: -1px; height: 220px; pointer-events: none;
    background: linear-gradient(180deg, transparent, #070508cc 70%, #070508);
    z-index: 0;
}
.throne-bottom{
    position: relative; z-index: 2; width: 100%; max-width: 1120px;
    display: flex; flex-direction: column; align-items: center; gap: 26px;
    padding-bottom: 16px;
}

/* şerit: sunucu durumu */
.banner-strip{
    display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center;
    padding: 10px 26px; border-radius: 3px;
    border: 1px solid transparent;
    background: linear-gradient(#0c0704e8,#0c0704e8) padding-box, var(--gold-grad-strip, var(--gold-grad)) border-box;
    box-shadow: 0 12px 34px rgba(0,0,0,.55), inset 0 0 22px rgba(0,0,0,.35);
    animation: riseUp .9s ease both;
}
.bs-item{
    display: inline-flex; align-items: center; gap: 9px;
    font-family: 'Marcellus', serif; font-size: 12.5px; letter-spacing: 3.4px; text-transform: uppercase;
    color: var(--gold-hi);
}
.bs-gem{ color: var(--gold-deep); font-size: 10px; opacity: .85; }
.pulse-gem{ width: 9px; height: 9px; border-radius: 50%; background: #3ad07a; animation: gemPulse 1.9s infinite; }

/* ===== ALTIN CTA BUTONLARI ===== */
.cta-row{ display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; animation: riseUp 1s ease both .14s; }
.gbtn{
    position: relative; display: inline-flex; align-items: center; gap: 16px;
    min-width: 275px; padding: 16px 26px; border-radius: 3px;
    border: 2px solid transparent;
    background: linear-gradient(180deg,#170d06f2,#0b0502f7) padding-box, var(--gold-grad) border-box;
    box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 28px var(--glow-22), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 30px rgba(0,0,0,.4);
    overflow: hidden; transition: .3s cubic-bezier(.2,.7,.2,1);
}
.gbtn::after{
    content:""; position: absolute; top: 0; left: -150%; width: 55%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,238,190,.28), transparent);
    transform: skewX(-20deg); transition: left .7s ease;
}
.gbtn-ico{
    width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: 19px; color: var(--gold-hi);
    border: 1px solid transparent; border-radius: 3px;
    background: radial-gradient(circle at 32% 24%, var(--glow-40), #0d0603) padding-box, var(--gold-grad) border-box;
    transform: rotate(45deg);
    box-shadow: 0 0 20px var(--glow-22);
}
.gbtn-ico i{ transform: rotate(-45deg); }
.gbtn-tx{ display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.gbtn-tx strong{
    font-family: 'Cinzel', serif; font-weight: 800; font-size: 16.5px; letter-spacing: 2px; text-transform: uppercase;
    background: var(--metal-text);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.9));
}
.gbtn-tx small{ font-size: 11.5px; color: #d9b98cbb; letter-spacing: .5px; margin-top: 3px; font-family: 'Spectral', serif; }
.gbtn:hover{
    transform: translateY(-7px);
    box-shadow: 0 28px 60px rgba(0,0,0,.65), 0 0 46px var(--glow-40), inset 0 1px 0 rgba(255,255,255,.12);
}
.gbtn:hover::after{ left: 170%; }
.gbtn:hover .gbtn-ico{ box-shadow: 0 0 30px var(--glow-73); }

.descend{
    display: inline-flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4px;
    color: var(--gold-hi); font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px; letter-spacing: 5px;
    animation: riseUp 1s ease both .3s; transition: .25s ease; text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.descend:hover{ color: #fff; }
.descend-gem{
    width: 11px; height: 11px; background: var(--gold-grad); transform: rotate(45deg);
    box-shadow: 0 0 16px var(--glow-73); animation: descendMove 1.8s ease-in-out infinite;
}
@keyframes descendMove{ 0%,100%{ transform: rotate(45deg) translate(0,0); opacity:1 } 50%{ transform: rotate(45deg) translate(7px,7px); opacity:.4 } }

/* =====================================================================
   İÇERİK ALANI
===================================================================== */
.realm{ position: relative; z-index: 1; padding: 10px 0 130px; background: linear-gradient(180deg, #070508f5, #0c07049e 16%, #0b060385 55%, #070508bf); }
.reveal{ opacity: 0; transform: translateY(50px); transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity: 1; transform: none; }
.saga{ margin-top: 110px; }
#s-banner{ margin-top: 0; transform: translateY(-60px); }
#s-banner.in{ transform: translateY(-60px); }

/* ===== FİLİGRAN BAŞLIK ===== */
.fili-head{ text-align: center; margin-bottom: 40px; }
.fili{ width: min(560px, 88%); height: 34px; display: block; margin: 0 auto 6px; }
.fili .fp{ fill: none; stroke: var(--gold-deep); stroke-width: 1.1; opacity: .8; }
.fili .fg{ fill: var(--gold); filter: drop-shadow(0 0 6px var(--glow)); }
.fili .fd{ fill: var(--gold-deep); }
.saga-title{
    font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(26px, 3.8vw, 42px);
    letter-spacing: 4px; text-transform: uppercase;
    background: var(--metal-text);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,.95)) drop-shadow(0 8px 26px var(--glow-40));
}
.saga-sub{
    margin: 10px 0 0; font-family: 'Spectral', serif; font-style: italic; font-weight: 300;
    color: #d9bd93a6; font-size: 15px; letter-spacing: 1px;
}

/* ===== ALTIN ÇERÇEVE (banner / büyük görseller) ===== */
.gframe{
    position: relative; padding: 8px; border-radius: 4px;
    border: 2px solid transparent;
    background: linear-gradient(#0d0704,#0d0704) padding-box, var(--gold-grad) border-box;
    box-shadow: 0 40px 100px rgba(0,0,0,.75), 0 0 60px var(--glow-22), inset 0 0 40px rgba(0,0,0,.5);
    transition: box-shadow .4s ease;
}
.gframe:hover{ box-shadow: 0 44px 110px rgba(0,0,0,.8), 0 0 80px var(--glow-40), inset 0 0 40px rgba(0,0,0,.5); }
.gframe img{ display: block; width: 100%; border-radius: 2px; cursor: zoom-in; }
.gf-gem{
    position: absolute; left: 50%; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg);
    background: var(--gold-grad); box-shadow: 0 0 14px var(--glow-73); z-index: 2;
}
.gf-t{ top: -8px; } .gf-b{ bottom: -8px; }

/* ===== VİDEO SİNEMASI ===== */
.cinema{ max-width: 940px; margin: 0 auto; }
.video-wrap{
    position: relative; width: 100%; padding-bottom: 56.25%; height: 0;
    border: 2px solid transparent; border-radius: 4px;
    background: linear-gradient(#000,#000) padding-box, var(--gold-grad) border-box;
    box-shadow: 0 34px 80px rgba(0,0,0,.7), 0 0 60px var(--glow-22);
}
.video-wrap iframe{ position: absolute; inset: 8px; width: calc(100% - 16px) !important; height: calc(100% - 16px) !important; border: 0; border-radius: 2px; }

/* ===== ÖZELLİK NİŞANLARI ===== */
.emblem-grid{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); }
.emblem{
    position: relative; display: flex; align-items: center; gap: 14px; padding: 17px 19px; border-radius: 3px;
    border: 1px solid transparent;
    background: linear-gradient(120deg,#150d07e8,#0c0603f0) padding-box, var(--gold-grad-soft, var(--gold-grad)) border-box;
    box-shadow: 0 14px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
    transition: .28s cubic-bezier(.2,.7,.2,1);
}
.emblem-gem{
    width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    color: var(--gold-hi); font-size: 13px;
    background: radial-gradient(circle at 32% 24%, var(--glow-40), #0d0603) padding-box, var(--gold-grad) border-box;
    border: 1px solid transparent; transform: rotate(45deg); border-radius: 2px;
}
.emblem-gem i{ transform: rotate(-45deg); }
.emblem .item{ display: inline; background: none; border: 0; padding: 0; margin: 0; font-weight: 600; color: #ecd9b4; font-size: 15px; font-family: 'Spectral', serif; }
.emblem:hover{ transform: translateY(-5px); box-shadow: 0 22px 44px rgba(0,0,0,.55), 0 0 26px var(--glow-22); }

/* ===== PANEL ===== */
.panel{
    position: relative; padding: 40px 44px 44px; border-radius: 4px;
    border: 1px solid transparent;
    background: var(--panel-bg) padding-box, linear-gradient(180deg, var(--glow-73), #ffffff14 40%, var(--glow-40)) border-box;
    box-shadow: 0 34px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 70px rgba(0,0,0,.3);
}
.panel::before{
    content:""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7;
}
.gallery-panel{ padding-top: 32px; }

/* ===== BİYOLOG ===== */
.bio-grid{ display: grid; gap: 15px; grid-template-columns: repeat(auto-fill, minmax(330px,1fr)); }
.bio{
    display: flex; gap: 16px; align-items: center; padding: 15px; border-radius: 3px;
    background: linear-gradient(120deg, var(--ink), rgba(255,255,255,0));
    border: 1px solid var(--ink-2); border-left: 3px solid var(--glow-73);
    cursor: pointer; transition: .26s cubic-bezier(.2,.7,.2,1);
}
.bio:hover{ transform: translateY(-5px); border-color: var(--glow-73); box-shadow: 0 16px 34px rgba(0,0,0,.5), 0 0 22px var(--glow-22); }
.bio-thumb{
    width: 66px; height: 66px; flex-shrink: 0; padding: 7px; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 30% 22%, var(--glow-22), rgba(0,0,0,.55)) padding-box, var(--gold-grad) border-box;
    border: 1px solid transparent; border-radius: 3px;
}
.bio-thumb img{ max-height: 50px; width: auto; }
.bio-body h5{ font-family: 'Cinzel', serif; font-size: 15px; margin: 0 0 4px; color: var(--gold-hi); font-weight: 700; letter-spacing: 1px; }
.bio-body{ font-size: 13.5px; color: #ffa51f; }

/* ===== TABLO — KADİM DEFTER ===== */
.table-trailer{
    color: #ffa51f; background-color: #2c150f66;
    overflow: hidden; border: 1px solid var(--ink-2); border-radius: 4px;
}
.table-trailer thead td{
    font-family: 'Cinzel', serif; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; font-size: 13.5px;
    background-image: linear-gradient(110deg, #1d1108, #33200f 50%, #1d1108);
    color: var(--gold-hi); text-shadow: 0 1px 4px rgba(0,0,0,.7);
    border-color: transparent; border-bottom: 1px solid var(--glow-40);
}
.table-trailer td{ border-color: #ff8c2a22; vertical-align: middle; }
.table-trailer.table-striped tbody tr:nth-of-type(odd){ background-color: rgb(0 0 0 / 30%); }
.table-trailer.table-hover tbody tr{ cursor: pointer; transition: background-color .2s ease; }
.table-trailer.table-hover tbody tr:hover{ background-color: var(--glow-22); color: #ffa51f; }
.table-trailer.table-hover tbody tr td:hover{ color: #ffa51f; filter: brightness(1.25); }
.table-bordered{ border: 1px solid var(--ink-2); }

/* ===== ALERT / PLAKA ===== */
.alert-green-style{
    color: var(--alert-tx); background-color: var(--alert-bg);
    background-image: linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,0));
    border: 1px solid var(--ink-2); border-left: 3px solid var(--gold);
    border-radius: 3px; box-shadow: inset 0 0 26px rgba(0,0,0,.18);
}
.head-green-style{
    color: var(--gold-hi);
    background-image: linear-gradient(110deg, #1d1108, #33200f 50%, #1d1108);
    border: 1px solid var(--glow-40); border-radius: 3px; text-align: center;
    font-family: 'Cinzel', serif; font-size: 17px; font-weight: 800; letter-spacing: 2.6px;
    text-shadow: 0 2px 8px rgba(0,0,0,.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ===== NPC / BOSS GALERİSİ ===== */
#owl-npc .item{
    background: transparent; margin-left: 2px; text-align: center; margin-bottom: 5px;
    cursor: pointer; transition: transform .25s ease, box-shadow .25s ease;
}
.owl-item{
    cursor: pointer; padding: 8px; margin: 5px; border-radius: 3px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.3));
    border: 1px solid var(--ink-2);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.owl-item:hover{
    transform: translateY(-8px) scale(1.04); border-color: var(--gold-deep);
    background: linear-gradient(180deg, var(--glow-22), rgba(0,0,0,.3));
    box-shadow: 0 22px 44px rgba(0,0,0,.6), 0 0 28px var(--glow-22);
}
.owl-item img{ margin: 0 auto; display: block; min-height: 200px; }
.npc, .boss{
    background: linear-gradient(180deg, #17100966, #0d0704) padding-box, linear-gradient(180deg, var(--glow-73), #ffffff10) border-box;
    padding: 30px; margin-top: 12px; border: 1px solid transparent; border-radius: 4px;
    box-shadow: inset 0 0 46px rgba(0,0,0,.3);
}
.npc .head-green-style, .boss .head-green-style{ margin-bottom: 18px; }
.transformation-item{ margin: 0 auto; display: block; }

/* ===== GÖRSELLER ===== */
.ss{
    border: 1px solid var(--glow-73); border-radius: 3px;
    box-shadow: 0 26px 56px rgba(0,0,0,.65);
    cursor: zoom-in;
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.ss:hover{ transform: scale(1.012); border-color: var(--gold); box-shadow: 0 32px 68px rgba(0,0,0,.7), 0 0 38px var(--glow-22); }
.ss-items{
    border: 1px solid var(--glow-73); border-radius: 3px; padding: 10px; background: rgb(0 0 0 / 25%);
    box-shadow: 0 16px 34px rgba(0,0,0,.5);
    transition: transform .3s ease, border-color .3s ease;
}
.ss-items:hover{ transform: translateY(-4px) scale(1.03); border-color: var(--gold); }

/* ===== OYUN SİSTEMLERİ — KART GALERİSİ ===== */
.sys-grid{ display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.sys-card{
    position: relative; border-radius: 4px; overflow: hidden;
    border: 1px solid transparent;
    background: var(--panel-bg) padding-box, linear-gradient(180deg, var(--glow-73), #ffffff12 45%, var(--glow-40)) border-box;
    box-shadow: 0 20px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease;
    display: flex; flex-direction: column;
}
.sys-card:hover{ transform: translateY(-7px); box-shadow: 0 30px 60px rgba(0,0,0,.65), 0 0 34px var(--glow-22); }
.sys-media{ position: relative; overflow: hidden; background: #000; }
.sys-media::after{
    content:""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 62%, #0b0603e8);
}
.sys-media img{
    display: block; width: 100%; height: 190px !important; object-fit: cover; cursor: zoom-in;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.sys-card:hover .sys-media img{ transform: scale(1.07); filter: brightness(1.1) saturate(1.1); }
.sys-body{ padding: 18px 20px 20px; flex: 1; }
.sys-body h3{
    font-family: 'Cinzel', serif; font-weight: 800; font-size: 16px; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--gold-hi); text-shadow: 0 2px 8px rgba(0,0,0,.8); margin-bottom: 8px;
    position: relative; padding-bottom: 10px;
}
.sys-body h3::after{
    content:""; position: absolute; left: 0; bottom: 0; width: 44px; height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
}
.sys-desc{ font-size: 13.5px; color: #d8c3a0b8; line-height: 1.65; }

/* ===== ZİNDAN GALERİSİ ===== */
.dg-grid{ display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.dg-card{
    position: relative; margin: 0; border-radius: 4px; overflow: hidden;
    border: 1px solid transparent;
    background: linear-gradient(#000,#000) padding-box, linear-gradient(180deg, var(--glow-73), #ffffff12 45%, var(--glow-40)) border-box;
    box-shadow: 0 20px 44px rgba(0,0,0,.5);
    transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease;
}
.dg-card:hover{ transform: translateY(-7px); box-shadow: 0 30px 60px rgba(0,0,0,.68), 0 0 34px var(--glow-22); }
.dg-card img{
    display: block; width: 100%; height: 210px !important; object-fit: cover; cursor: zoom-in;
    transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease;
}
.dg-card:hover img{ transform: scale(1.08); filter: brightness(1.12) saturate(1.12); }
.dg-card figcaption{
    position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 13px; text-align: center;
    background: linear-gradient(180deg, transparent, #070406e6 55%);
    font-family: 'Cinzel', serif; font-weight: 800; font-size: 14.5px; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--gold-hi); text-shadow: 0 2px 8px rgba(0,0,0,.95);
    pointer-events: none;
}

/* =====================================================================
   BİLDİRİM (alt bar)
===================================================================== */
#notification-alt{
    position: fixed; z-index: 999999; bottom: 0; left: 0; right: 0; margin: 0 auto;
    text-align: center; width: 100%; min-height: 76px; padding: 10px 0; text-shadow: 1px 1px 0 #000;
    border-top: 2px solid transparent;
    border-image: var(--gold-grad) 1;
    background-image: linear-gradient(110deg, #070508f5, #2a180adf, #070508f5);
    background-size: 200% 100%; animation: shimmer 9s linear infinite;
    box-shadow: 0 -16px 48px rgba(0,0,0,.7); backdrop-filter: blur(7px); overflow: hidden;
}
#notification-alt a{ color: #f7d9c0; font-weight: 800; font-size: 35px; display: block; margin-top: 0; position: relative; z-index: 1; font-family: 'Cinzel', serif; text-decoration: none; letter-spacing: 1.6px; }
#notification-alt span{ font-size: 14px; font-weight: 400; color: #f7d9c0; text-transform: uppercase; display: block; letter-spacing: 1.6px; font-family: 'Marcellus', serif; }

/* =====================================================================
   FOOTER — KALE
===================================================================== */
.keep{ position: relative; z-index: 1; padding: 30px 0 130px; text-align: center; background: linear-gradient(180deg, #070508bf, #070508f0); }
.keep-fili{ margin-bottom: 30px; }
.keep-logo img{ width: 96px; filter: drop-shadow(0 10px 28px rgba(0,0,0,.7)); transition: transform .3s ease, filter .3s ease; }
.keep-logo:hover img{ transform: scale(1.07); filter: drop-shadow(0 0 30px var(--glow-73)); }
.keep-slogan{
    margin: 18px 0 24px; font-family: 'Marcellus', serif; letter-spacing: 5px; text-transform: uppercase;
    color: var(--gold); font-size: 13px;
}
.keep-links{ display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 34px; margin-bottom: 26px; }
.keep-links a{
    color: #e2cba2cc; font-family: 'Cinzel', serif; font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    transition: .22s ease;
}
.keep-links a:hover{ color: var(--gold-hi); text-shadow: 0 0 16px var(--glow-73); }
.keep-copy{ color: #b6905fa8; font-size: 13px; line-height: 1.9; font-family: 'Spectral', serif; }
.keep-copy a{ color: var(--gold); font-weight: 700; }
.keep-copy a:hover{ filter: brightness(1.3); text-decoration: underline; }

/* =====================================================================
   LIGHTBOX
===================================================================== */
.lightbox{
    position: fixed; inset: 0; z-index: 1000000; display: none;
    align-items: center; justify-content: center; padding: 36px;
    background: #070508f0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    cursor: zoom-out;
}
.lightbox.open{ display: flex; animation: lbIn .25s ease; }
@keyframes lbIn{ from{ opacity: 0 } to{ opacity: 1 } }
.lightbox img{
    max-width: 94vw; max-height: 90vh; width: auto !important; height: auto !important;
    border: 2px solid transparent; border-radius: 4px;
    background: linear-gradient(#000,#000) padding-box, var(--gold-grad) border-box;
    box-shadow: 0 50px 140px rgba(0,0,0,.9), 0 0 80px var(--glow-22);
}
.lb-close{
    position: absolute; top: 18px; right: 30px; font-size: 44px; line-height: 1;
    color: var(--gold-hi); cursor: pointer; text-shadow: 0 2px 12px rgba(0,0,0,.9);
    transition: .2s ease;
}
.lb-close:hover{ color: #fff; transform: scale(1.12); }

/* =====================================================================
   DISCORD / FACEBOOK WIDGET (işlev korundu)
===================================================================== */
.discord-widget{ position: fixed; bottom: 0; z-index: 999999; margin-bottom: 20px; }
.discord-widget.active{ right: 20px; }
.discord-open-button{ display: block; width: 50px !important; margin-left: 30px; }
.discord-close-button{ display: none; width: 25px !important; margin-left: 233px; margin-bottom: 103px; }
.discord-widget-button{ width: 250px; display: none; }
.facebook-like{ position: relative; width: 549px; height: 325px; border: none; margin-top: 10%; }
.fbBoard{ line-height: 0px; position: fixed; text-align: center; z-index: 999999; }
.fbBoard2{ top: 0; left: 0; width: 100%; height: 100%; background: transparent url(https://vigorm2.com/data/system/facebook/black-transparent.png) repeat top left; }

/* =====================================================================
   RESPONSIVE
===================================================================== */
@media (max-width: 1100px){
    .sys-grid{ grid-template-columns: repeat(2, 1fr); }
    .dg-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1015px){
    .ornav{ background: #070508f0; backdrop-filter: blur(12px); }
    .ornav-in{ flex-wrap: wrap; gap: 4px; padding: 8px 10px; }
    .nbrand{ order: -1; width: 100%; text-align: center; }
    .nbrand img{ width: 58px; }
    .nwing{ flex: 0 1 auto; }
    .nlink{ padding: 7px 9px; font-size: 11.5px; letter-spacing: 1.6px; }
    .throne{ min-height: 92vh; padding-top: 130px; }
    .saga{ margin-top: 80px; }
    #s-banner{ transform: translateY(-20px); }
    #s-banner.in{ transform: translateY(-20px); }
}
@media (max-width: 760px){
    .gbtn{ width: 100%; min-width: 0; }
    .banner-strip{ gap: 10px; padding: 9px 16px; }
    .bs-item{ font-size: 10.5px; letter-spacing: 2px; }
    .sys-grid{ grid-template-columns: 1fr; }
    .dg-grid{ grid-template-columns: 1fr; }
    .panel{ padding: 24px 16px 28px; }
    .saga-title{ letter-spacing: 2px; }
    .keep-orn span{ width: 90px; }
    .keep{ padding-bottom: 160px; }
    .lightbox{ padding: 12px; }
}