/* ============================================================================
   HeusMt2 theme-v3 — "Şafak Vadisi" (2026-07-04, [0.58.0])
   Eski Metin2 login-ekranı ruhu × modern premium dil. Logo aynen korunur.
   NOT: itemshop theme.css kullanmaya devam eder — bu dosya YALNIZ ana site.
   Eski şablon sınıfları (.content/.content-bg/...) bilinçli olarak burada
   yeniden stillenir; alt sayfalar HTML değişmeden yeni görünüme geçer.
   ========================================================================== */
@font-face{font-family:'Cinzel';src:url('fonts/Cinzel-var.woff2') format('woff2-variations'),url('fonts/Cinzel-var.ttf') format('truetype');font-weight:400 900;font-display:swap}
:root{
  --bg:#0a0705; --bg2:#100a07; --card:#151009; --card2:#1c130c;
  --line:rgba(206,168,96,.25); --line-br:rgba(232,176,74,.65);
  --crimson:#d21f2f; --crimson-dk:#8c1520;
  --gold:#c9a24b; --gold-br:#e8b04a; --gold-hi:#ffd77a;
  --ink:#f0e6d4; --dim:#a8977d; --ok:#4fd66b;
  --serif:'Cinzel',Georgia,serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  /* --- akışkan tipografi ölçeği (clamp: mobil→desktop; alt sınırlar eski değerlere denk) --- */
  --fs-hero:clamp(1.85rem,1.05rem+3.9vw,3.9rem);   /* hero H1 — anıtsal */
  --fs-h1:clamp(1.7rem,1.15rem+2.3vw,2.9rem);
  --fs-h2:clamp(1.55rem,1.15rem+1.75vw,2.3rem);    /* bölüm başlığı (eski 33px) */
  --fs-h3:clamp(1.12rem,1rem+.55vw,1.35rem);
  --fs-lead:clamp(1rem,.95rem+.4vw,1.2rem);
  --fs-body:clamp(.92rem,.88rem+.2vw,1rem);
  --fs-over:clamp(.68rem,.66rem+.08vw,.76rem);
  /* --- ritim / boşluk --- */
  --sec-pad:clamp(52px,6.2vw,96px);
  --gut:clamp(16px,4vw,24px);
  --stack:clamp(28px,4vw,44px);
  --header-h:clamp(58px,5.4vw,78px);
  /* --- form / kutu --- */
  --r-sm:8px; --r-md:10px; --r-lg:12px; --r-pill:999px;
  --sh-card:0 14px 40px rgba(0,0,0,.6);
  --sh-lift:0 24px 60px rgba(0,0,0,.82),0 0 34px rgba(210,31,47,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.65;font-size:var(--fs-body);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:var(--gold-br);text-decoration:none}
a:hover{color:var(--gold-hi)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.clearfloat{clear:both}

/* ---------- oyun-penceresi çerçeve dili ---------- */
.gframe{position:relative;background:linear-gradient(180deg,rgba(24,16,10,.97),rgba(12,8,5,.98));border:1px solid #000;border-radius:10px;
  box-shadow:0 0 0 1px rgba(232,176,74,.55),0 0 0 3px #0a0705,0 0 0 4px rgba(201,162,75,.32),0 26px 70px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,215,122,.16),inset 0 0 44px rgba(0,0,0,.5)}
.gframe::before,.gframe::after,.gframe>.cnr::before,.gframe>.cnr::after{content:'';position:absolute;width:16px;height:16px;border:2px solid var(--gold-br);pointer-events:none}
.gframe::before{top:4px;left:4px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.gframe::after{top:4px;right:4px;border-left:0;border-bottom:0;border-top-right-radius:8px}
.gframe>.cnr::before{bottom:4px;left:4px;border-right:0;border-top:0;border-bottom-left-radius:8px}
.gframe>.cnr::after{bottom:4px;right:4px;border-left:0;border-top:0;border-bottom-right-radius:8px}

/* ---------- BETA duyuru barı ---------- */
.beta-bar{background:linear-gradient(90deg,var(--crimson-dk),var(--crimson) 50%,var(--crimson-dk));border-bottom:1px solid rgba(255,215,122,.4)}
.beta-bar .bb-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 24px;font-size:13.5px;flex-wrap:wrap}
.beta-bar b{font-family:var(--serif);letter-spacing:.14em;font-size:12px;background:#fff;color:var(--crimson-dk);padding:3px 10px;border-radius:4px;white-space:nowrap}
.beta-bar a{color:#ffe9b3;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- SÜSLÜ NAV ---------- */
.site-header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,#17100a 0%,#0d0805 100%);border-bottom:1px solid rgba(232,176,74,.5);box-shadow:0 10px 34px rgba(0,0,0,.7),inset 0 -8px 22px rgba(0,0,0,.5)}
.site-header::before{content:'';display:block;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 12%,var(--gold-hi) 50%,var(--gold) 88%,transparent)}
.nav{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:0 24px;height:78px}
.nav .logo{position:relative;padding:6px 16px 6px 4px;margin-right:4px;display:flex;align-items:center}
.nav .logo::after{content:'';position:absolute;right:0;top:14px;bottom:14px;width:1px;background:linear-gradient(180deg,transparent,var(--line-br),transparent)}
.nav .logo img{height:56px;width:auto;filter:drop-shadow(0 2px 12px rgba(210,31,47,.5))}
.nav ul{display:flex;align-items:center;list-style:none;margin:0;padding:0;height:100%}
.nav ul li{display:flex;align-items:center;height:100%}
.nav ul li+li::before{content:'◆';font-size:6px;color:rgba(232,176,74,.5);margin:0 3px}
.nav ul a{position:relative;font-family:var(--serif);font-weight:700;font-size:12.5px;letter-spacing:.14em;color:var(--dim);padding:10px 11px;transition:.22s;white-space:nowrap}
.nav ul a::after{content:'';position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);opacity:0;transition:.22s}
.nav ul li.active a,.nav ul a:hover{color:var(--gold-hi);text-shadow:0 0 14px rgba(255,215,122,.45)}
.nav ul li.active a::after,.nav ul a:hover::after{opacity:1}
/* nav panel (drawer-yetenekli): masaüstü yatay · ≤1024 off-canvas çekmece */
.nav-panel{display:flex;flex:1;align-items:center;gap:12px;min-width:0}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;padding:0;background:rgba(10,7,5,.4);border:1px solid var(--line-br);border-radius:var(--r-sm);cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;margin:0 auto;background:var(--gold-hi);border-radius:2px;transition:.25s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;z-index:55;background:rgba(4,3,2,.62);backdrop-filter:blur(2px);opacity:0;transition:opacity .3s;pointer-events:none}
.nav-scrim.is-open{opacity:1;pointer-events:auto}
html.nav-open{overflow:hidden}
.online-pill{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#bdf0c6;border:1px solid rgba(79,214,107,.35);background:linear-gradient(180deg,rgba(30,60,30,.35),rgba(15,30,15,.3));padding:8px 13px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);white-space:nowrap}
.online-pill i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:hpulse 2s infinite}
@keyframes hpulse{50%{opacity:.35}}
.online-pill b{color:#e7ffe9}
.online-pill.off{color:#c9b696;border-color:var(--line)}
.online-pill.off i{background:#8a7a5c;box-shadow:none;animation:none}

/* ---------- BUTONLAR ---------- */
.btn,.btn-big,.btn-hero{display:inline-block;font-weight:700;letter-spacing:.08em;border-radius:10px;transition:.22s;text-align:center;cursor:pointer;text-decoration:none}
.btn-gold,.btn-big,.btn-hero:not(.ghost){font-family:var(--serif);color:#1d1005 !important;background:linear-gradient(180deg,var(--gold-hi),var(--gold-br) 60%,#b98a2e);border:1px solid #ffe2a0;box-shadow:0 0 0 1px #4a3410,0 6px 18px rgba(232,176,74,.35),inset 0 1px 0 rgba(255,255,255,.55);padding:13px 26px;font-size:14px;letter-spacing:.1em}
.btn-gold:hover,.btn-big:hover,.btn-hero:not(.ghost):hover{transform:translateY(-1px);box-shadow:0 0 0 1px #4a3410,0 10px 26px rgba(232,176,74,.55),inset 0 1px 0 rgba(255,255,255,.55);color:#1d1005}
.btn-hero.ghost,.btn-ghost{font-family:var(--serif);color:var(--ink);border:1px solid var(--line-br);background:rgba(10,7,5,.55);padding:13px 26px;font-size:14px}
.btn-hero.ghost:hover,.btn-ghost:hover{color:var(--gold-hi);border-color:var(--gold-hi)}
.btn-fb{font-family:var(--serif);font-weight:800;color:#eaf1ff !important;background:linear-gradient(180deg,#2d64c8,#1b4a9e);border:1px solid #5b8bdb;box-shadow:0 0 0 1px #122,0 6px 20px rgba(45,100,200,.35),inset 0 1px 0 rgba(255,255,255,.25);padding:13px 26px;font-size:14px;letter-spacing:.1em;border-radius:10px;display:inline-block;transition:.22s}
.btn-fb:hover{transform:translateY(-1px);color:#fff}
.btn-discord{font-family:var(--serif);font-weight:800;color:#fff !important;background:linear-gradient(180deg,#5865F2,#4752c4);border:1px solid #7983f5;box-shadow:0 0 0 1px #1a1c3a,0 6px 20px rgba(88,101,242,.35),inset 0 1px 0 rgba(255,255,255,.25);padding:13px 22px;font-size:14px;letter-spacing:.08em;border-radius:10px;display:inline-flex;align-items:center;gap:8px;transition:.22s;text-decoration:none;white-space:nowrap}
.btn-discord:hover{transform:translateY(-1px);color:#fff;box-shadow:0 0 0 1px #1a1c3a,0 10px 26px rgba(88,101,242,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-discord svg{width:18px;height:18px;flex:0 0 auto;fill:currentColor}
.hb-cta{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0}

/* nav içi kompakt buton */
.nav .btn-gold{padding:11px 20px;font-size:12.5px}
.nav .btn-ghost{padding:11px 18px;font-size:12.5px}
.nav .btn-discord{padding:10px 15px;font-size:12.5px}

/* ---------- ANA İÇERİK KOLONU ---------- */
.page-main{max-width:1080px;margin:0 auto;padding:42px 24px 72px;min-height:40vh}
.page-main.pm-wide{max-width:1240px}
.page-main.pm-home{max-width:none;padding:0}

/* ---------- ESKİ ŞABLON SINIFLARININ YENİ DİLE HARİTASI ---------- */
.content{margin:0 0 26px}
.content-bg{position:relative;background:linear-gradient(180deg,rgba(24,16,10,.96),rgba(12,8,5,.97));border:1px solid #000;border-radius:10px;
  box-shadow:0 0 0 1px rgba(232,176,74,.5),0 0 0 3px #0a0705,0 0 0 4px rgba(201,162,75,.28),0 22px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,215,122,.14),inset 0 0 40px rgba(0,0,0,.45)}
.content-bg-bottom{padding:30px 34px 30px}
.content h2,.content-bg-bottom>h2{font-family:var(--serif);font-weight:900;font-size:26px;color:#faf1de;margin:0 0 16px;letter-spacing:.02em}
.content h3,.inner-content h3{font-family:var(--serif);font-weight:800;font-size:19px;color:var(--gold-hi);margin:26px 0 8px}
.content h4,.inner-content h4{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--gold-br);margin:16px 0 6px}
.inner-content p,.content-bg-bottom p{color:var(--ink)}
.inner-content a{text-decoration:underline;text-underline-offset:3px}
.shadow{height:22px}
.trenner{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-br),transparent);margin:22px 0}
.box-foot{display:none}
table{border-collapse:collapse}
.content table,.inner-content table{width:100%;margin:12px 0 18px}
.content td,.content th,.inner-content td,.inner-content th{padding:8px 12px;border:1px solid var(--line);font-size:14px}
.content caption,.inner-content caption{font-family:var(--serif);font-weight:800;color:var(--gold-hi);padding:8px 0;letter-spacing:.06em}
td.left_td{color:var(--gold-br);font-weight:700;width:34%}
.pager{display:flex;gap:8px;justify-content:center;margin:16px 0}
.pager a,.pager span{padding:7px 13px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.pager a:hover{border-color:var(--gold-hi)}
.txt{color:var(--ink)}

/* sekmeler (thegame/howto) */
.tabs-nav{display:flex;gap:6px;list-style:none;margin:0 0 22px;padding:0;flex-wrap:wrap}
.tabs-nav li{margin:0}
.tabs-nav a{display:block;font-family:var(--serif);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:10px 16px;transition:.2s}
.tabs-nav li.selected a,.tabs-nav a:hover{color:var(--gold-hi);border-color:var(--line-br);background:rgba(232,176,74,.08)}

/* formlar (login/register/pwlost) */
.inner-form-box{max-width:520px;margin:0 auto}
.inner-form-border{border:1px solid var(--line);border-radius:12px;padding:26px 28px;background:rgba(21,16,9,.7);box-shadow:inset 0 1px 0 rgba(255,215,122,.08)}
.form-item{margin:0 0 16px}
.form-item label{display:block;font-size:12.5px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin-bottom:6px}
input[type=text],input[type=password],input[type=email],input[type=tel],select,textarea{width:100%;background:#0d0805;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:12px 14px;font-size:14.5px;font-family:var(--sans);outline:none;transition:.2s}
input:focus,select:focus,textarea:focus{border-color:var(--gold-br);box-shadow:0 0 0 3px rgba(232,176,74,.15)}
input[type=checkbox]{width:auto}
input[type=submit],button[type=submit]{font-family:var(--serif);font-weight:800;letter-spacing:.1em;font-size:14px;color:#1d1005;background:linear-gradient(180deg,var(--gold-hi),var(--gold-br) 60%,#b98a2e);border:1px solid #ffe2a0;border-radius:10px;padding:13px 30px;cursor:pointer;box-shadow:0 0 0 1px #4a3410,0 6px 18px rgba(232,176,74,.3),inset 0 1px 0 rgba(255,255,255,.55);transition:.22s}
input[type=submit]:hover,button[type=submit]:hover{transform:translateY(-1px)}
.error,.form-error{color:#ff9d8a}
.success{color:#9fdc9f}

/* sınıf/imparatorluk kartları (characterclasses/empires sayfaları) */
.class-card,.empire-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#241812 0%,#120b07 58%,#0b0705 100%);transition:.3s}
.class-card:hover,.empire-card:hover{transform:translateY(-5px);border-color:var(--line-br);box-shadow:0 20px 50px rgba(0,0,0,.75)}
.cc-body{padding:14px 16px}
.et-name{font-family:var(--serif);font-weight:900;letter-spacing:.16em;color:var(--gold-hi)}
.et-sub{font-size:12px;color:var(--dim)}

/* medya/galeri */
.wallpaper-links{list-style:none;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.wallpaper-links li a{border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13px;display:inline-block}
.wallpaper-links li a:hover{border-color:var(--gold-hi)}
.tutorial-btn{display:inline-block;font-family:var(--serif);font-weight:800;letter-spacing:.08em;color:#1d1005;background:linear-gradient(180deg,var(--gold-hi),var(--gold-br));border-radius:10px;padding:14px 26px;margin:8px 10px 8px 0}
.screenshots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.screenshots li{margin:0}
.screenshots img{width:100%;border-radius:10px;border:1px solid var(--line);transition:.3s}
.screenshots a:hover img{border-color:var(--line-br);transform:scale(1.03)}

/* sıralama tabloları */
.highscore,.rankings-table{width:100%}
.highscore th{font-family:var(--serif);color:var(--gold-br);letter-spacing:.08em}
.highscore tr:nth-child(even) td{background:rgba(232,176,74,.04)}
.highscore-player ul{list-style:none;margin:0;padding:0}

/* ---------- BÖLÜM BAŞLIĞI ---------- */
.sec{padding:var(--sec-pad) 0;position:relative}
.head{text-align:center;margin-bottom:var(--stack)}
.head .over{display:inline-block;font-family:var(--serif);font-size:var(--fs-over);font-weight:700;letter-spacing:.34em;color:var(--gold-br);text-transform:uppercase}
.head h2{position:relative;font-family:var(--serif);font-weight:900;font-size:var(--fs-h2);color:#faf1de;margin:10px 0 0;letter-spacing:.01em;line-height:1.1}
.head h2::after{content:'';display:block;width:60px;height:2px;margin:16px auto 0;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent)}
.head p{color:var(--dim);max-width:62ch;margin:16px auto 0;font-size:var(--fs-lead)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;background:#060403}
.hero .bgart{position:absolute;inset:0;background:url('../img/v3/hero-cine.jpg') center 32%/cover no-repeat;animation:slowzoom 44s ease-in-out infinite alternate;z-index:0}
@keyframes slowzoom{from{transform:scale(1.02)}to{transform:scale(1.09)}}
/* sinematik video katmanı — src BOŞ; hero.js koşul (masaüstü+hareket-OK+save-data-yok) sağlarsa doldurur */
.hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0;opacity:0;transition:opacity 1s var(--ease)}
.hero .hero-video.is-playing{opacity:1}
/* kor-parçacık canvas — hero.js yalnız masaüstü+hareket-OK koşulunda çizer (mobil/reduced-motion=boş) */
.hero .hero-embers{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.75}
.hero .shade{position:absolute;inset:0;z-index:1;background:
  radial-gradient(130% 96% at 50% 46%,rgba(6,4,3,.28),rgba(6,4,3,.66) 72%),
  linear-gradient(180deg,rgba(6,4,3,.78) 0%,rgba(6,4,3,.32) 26%,rgba(6,4,3,.42) 58%,rgba(6,4,3,.9) 90%,var(--bg) 100%)}
.hero .mist{position:absolute;left:0;right:0;bottom:-4%;height:52%;z-index:2;background:url('../img/v3/mist.webp') repeat-x bottom/1600px auto;opacity:.45;mix-blend-mode:screen;animation:drift 70s linear infinite}
.hero .mist.m2{height:64%;opacity:.25;animation-duration:110s;animation-direction:reverse;bottom:-10%}
@keyframes drift{from{background-position-x:0}to{background-position-x:1600px}}
.hero .inner{position:relative;z-index:4;width:100%;max-width:960px;padding:calc(var(--header-h) + 22px) var(--gut) clamp(40px,7vh,84px);display:flex;flex-direction:column;align-items:center}
.chip-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.chip{font-size:var(--fs-over);font-weight:700;letter-spacing:.16em;color:var(--gold-hi);border:1px solid var(--line-br);background:rgba(10,7,5,.5);padding:7px 14px;border-radius:var(--r-pill);backdrop-filter:blur(4px);text-transform:uppercase}
.chip.red{color:#ffd0c4;border-color:rgba(210,31,47,.6);background:rgba(90,10,16,.5)}
.hero .logo-big img{height:clamp(94px,12.5vw,166px);width:auto;margin:0 auto 4px;filter:drop-shadow(0 8px 34px rgba(210,31,47,.55)) drop-shadow(0 2px 8px rgba(0,0,0,.8))}
.hero h1{font-family:var(--serif);font-weight:900;font-size:var(--fs-hero);letter-spacing:.08em;line-height:1.03;color:#f8eed9;text-transform:uppercase;text-shadow:0 2px 24px rgba(0,0,0,.92),0 0 64px rgba(210,31,47,.28);margin:0}
.hero .sub{margin:18px auto 0;font-size:var(--fs-lead);color:#e9dcbf;max-width:52ch;line-height:1.62;text-shadow:0 1px 12px rgba(0,0,0,.95)}
/* hero CTA kümesi (fold-içi; birincil altın = Kayıt Ol) */
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hero-cta>*{padding:15px 30px;font-size:14.5px}
.hero-cta .btn-discord{padding:15px 26px}
/* hero slim durum şeridi (online · seviye · beta) */
.hero-stats{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:26px;border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(8,5,4,.5);backdrop-filter:blur(5px);padding:3px 5px}
.hero-stats .hs{display:flex;align-items:center;gap:9px;padding:9px 20px;font-size:12px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.hero-stats .hs+.hs{border-left:1px solid var(--line)}
.hero-stats .hs b{font-family:var(--serif);color:var(--gold-hi);font-size:15px;letter-spacing:.05em;text-transform:none}
.hero-stats .hs.on i{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:hpulse 2s infinite}
.hero-stats .hs.on b{color:#e7ffe9}
.hero-stats .hs.on.off i{background:#8a7a5c;box-shadow:none;animation:none}
.hero-stats .hs.on.off b{color:#c9b696}
/* scroll ipucu */
.hero-scroll{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;color:var(--gold-br);opacity:.72;font-size:22px;line-height:1;animation:hbob 2.4s ease-in-out infinite;pointer-events:none}
@keyframes hbob{50%{transform:translate(-50%,7px)}}

/* ---------- GÜVEN ŞERİDİ ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg2),var(--bg))}
.trust .t-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:32px 24px}
.t-card{text-align:center;padding:22px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(21,16,9,.7);box-shadow:inset 0 1px 0 rgba(255,215,122,.08);transition:transform .28s var(--ease),border-color .28s,box-shadow .28s}
.t-card:hover{transform:translateY(-4px);border-color:var(--line-br);box-shadow:inset 0 1px 0 rgba(255,215,122,.12),0 16px 40px rgba(0,0,0,.5)}
.t-card b{display:block;font-family:var(--serif);font-weight:900;font-size:clamp(1.5rem,1.2rem+1vw,1.75rem);color:var(--gold-hi)}
.t-card span{font-size:12px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}

/* ---------- SINIF KARTLARI (gerçek model) ---------- */
.classes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cls{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(120% 90% at 50% 0%,#241812 0%,#120b07 58%,#0b0705 100%);transition:.3s;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.cls img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:top;transition:.5s;display:block}
.cls:hover{transform:translateY(-6px);border-color:var(--line-br);box-shadow:0 24px 60px rgba(0,0,0,.8),0 0 34px rgba(210,31,47,.25)}
.cls:hover img{transform:scale(1.05)}
.cls .plate{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;background:linear-gradient(180deg,transparent,rgba(8,5,4,.97) 62%);text-align:center}
.cls .plate b{font-family:var(--serif);font-weight:900;font-size:18px;letter-spacing:.18em;color:var(--gold-hi)}
.cls .plate span{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.rozet{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.12em;color:#ffe9b3;background:rgba(10,7,5,.85);border:1px solid var(--line-br);padding:5px 9px;border-radius:6px}

/* ---------- GERÇEK KÖY PARALLAX ---------- */
.valley{position:relative;min-height:460px;display:flex;align-items:center;background:url('../img/v3/village.jpg') center 55%/cover no-repeat fixed}
.valley::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,5,4,.95) 0%,rgba(8,5,4,.8) 42%,rgba(8,5,4,.45) 100%)}
.valley .v-in{position:relative;max-width:1240px;margin:0 auto;padding:76px 24px;width:100%}
.valley .over{font-family:var(--serif);font-size:12px;font-weight:700;letter-spacing:.32em;color:#ff8d7a;text-transform:uppercase}
.valley h2{font-family:var(--serif);font-weight:900;font-size:30px;color:#faf1de;max-width:24ch;margin:8px 0 0}
.valley p{color:#d8c9ab;max-width:52ch;margin-top:14px}
.valley p b{color:var(--gold-br)}
.valley .not{margin-top:10px;font-size:12.5px;color:#b7a686}
.valley .tl-row{display:flex;gap:28px;margin-top:24px;flex-wrap:wrap}
.valley .tl b{font-family:var(--serif);font-size:20px;color:var(--gold-hi)}
.valley .tl span{display:block;font-size:12.5px;color:#c4b394}

/* ---------- OYUN İÇİ SS ---------- */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shots a{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);transition:.3s;display:block}
.shots img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:.45s;display:block}
.shots a:hover{border-color:var(--line-br)}
.shots a:hover img{transform:scale(1.07)}
.cap{text-align:center;margin-top:18px;font-size:13px;color:var(--dim)}
.cap b{color:var(--gold-br)}

/* ---------- EFSANELER (gerçek model kartları) ---------- */
.bosses{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1050px;margin:0 auto}
.bossc{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(130% 100% at 50% 8%,#26170f 0%,#130c08 55%,#0b0705 100%);box-shadow:0 14px 40px rgba(0,0,0,.6);transition:.3s;padding:26px 16px 0}
.bossc .art{height:250px;display:flex;align-items:flex-end;justify-content:center}
.bossc .art img{max-height:100%;width:auto;filter:drop-shadow(0 22px 30px rgba(0,0,0,.75));transition:.45s}
.bossc:hover{transform:translateY(-6px);border-color:var(--line-br);box-shadow:0 24px 60px rgba(0,0,0,.8),0 0 34px rgba(210,31,47,.25)}
.bossc:hover .art img{transform:scale(1.06)}
.bossc .plate{padding:16px 8px 18px;text-align:center}
.bossc .plate b{font-family:var(--serif);font-weight:900;font-size:17px;letter-spacing:.16em;color:var(--gold-hi)}
.bossc .plate span{display:block;font-size:12px;color:var(--dim);margin-top:2px}

/* ---------- YOL HARİTASI + FB ---------- */
.roadgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:stretch}
.panel-inner{padding:32px 34px 28px}
.panel-inner h3{font-family:var(--serif);font-weight:900;font-size:21px;color:#faf1de;margin:0 0 6px}
.panel-inner .mini{font-size:13px;color:var(--dim)}
.steps{margin-top:24px}
.step{display:flex;gap:16px;position:relative;padding-bottom:20px}
.step::before{content:'';position:absolute;left:13px;top:30px;bottom:0;width:2px;background:linear-gradient(180deg,var(--line-br),var(--line))}
.step:last-child::before{display:none}
.dot{flex:0 0 28px;height:28px;border-radius:50%;border:2px solid var(--line-br);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--gold-hi);font-weight:800}
.step.now .dot{background:var(--crimson);border-color:#ff8d7a;box-shadow:0 0 16px rgba(210,31,47,.6);color:#fff}
.step b{display:block;font-family:var(--serif);letter-spacing:.08em;color:#f2e7d0;font-size:15px}
.step.now b{color:#ffb3a3}
.step span{font-size:13.5px;color:var(--dim)}
.now-tag{display:inline-block;margin-left:8px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#fff;background:var(--crimson);padding:2px 8px;border-radius:4px;vertical-align:2px}

/* ---------- SECTION ATMOSFER BANTLARI ---------- */
.sec-band{position:relative;overflow:hidden}
.sec-band::before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;opacity:.14;pointer-events:none}
.sec-band::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),transparent 20%,transparent 80%,var(--bg));pointer-events:none}
.sec-band>.wrap{position:relative;z-index:1}
.band-dungeon::before{background-image:url('../img/v3/band-dungeon.webp')}
.band-stone::before{background-image:url('../img/v3/band-stone.webp')}

/* ---------- "KATIL" PANELİ (yol haritası companion) ---------- */
.join-panel{display:flex;flex-direction:column;justify-content:center}
.join-panel .panel-inner{text-align:center;padding:34px 32px}
.jp-over{display:inline-block;font-family:var(--serif);font-size:var(--fs-over);font-weight:700;letter-spacing:.3em;color:var(--crimson);text-transform:uppercase;margin-bottom:8px}
.join-panel h3{font-family:var(--serif);font-weight:900;font-size:clamp(1.35rem,1.1rem+1vw,1.7rem);color:#faf1de;margin:0}
.join-panel .mini{margin:12px auto 0;max-width:40ch}
.join-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:22px 0 0}
.join-fb{margin-top:16px;font-size:13px;color:var(--dim)}

/* ---------- FOOTER ---------- */
.site-footer{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg2),#070402);margin-top:40px}
.site-footer::before{content:'';display:block;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--gold-hi) 50%,var(--gold) 85%,transparent);opacity:.6}
.site-footer .f-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;padding:52px 24px 38px}
.site-footer h4{font-family:var(--serif);letter-spacing:.2em;font-size:12.5px;color:var(--gold-br);margin:0 0 13px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:7px 0}
.site-footer li a{color:var(--dim);font-size:14px}
.site-footer li a:hover{color:var(--gold-hi)}
.site-footer .flogo img{height:56px;width:auto;filter:drop-shadow(0 2px 12px rgba(210,31,47,.4))}
.site-footer .fnote{margin-top:12px;font-size:13px;color:var(--dim);max-width:36ch}
.copy{text-align:center;color:#6b5f4e;font-size:12.5px;padding:16px;border-top:1px solid rgba(206,168,96,.12)}
.copy b{color:#ff9d8a}

/* ---------- KÜNYE / SEO PANELİ (ana sayfa alt) ---------- */
.kunye-sec .content-bg-bottom{padding:34px 38px}

/* ---------- YASAL SAYFALAR (gizlilik / kvkk / çerez / kullanım) ---------- */
.legal{max-width:74ch}
.legal p,.legal li{color:var(--ink);font-size:14.5px;line-height:1.75}
.legal ul{margin:6px 0 14px;padding-left:22px}
.legal li{margin-bottom:6px}
.legal h3{margin-top:24px}
.legal code{background:rgba(232,176,74,.10);border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:13px;color:var(--gold-hi)}
.legal-updated{font-size:12.5px;color:var(--dim);border-left:3px solid var(--gold-br);padding-left:12px;margin:0 0 20px}
.legal-disclaimer{margin-top:22px;padding:12px 16px;background:rgba(210,31,47,.08);border:1px solid rgba(210,31,47,.28);border-radius:8px;font-size:13px;color:var(--dim)}

/* ---------- FOOTER YASAL BARI ---------- */
.f-legal{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;padding:0 24px 6px}
.f-legal a{color:var(--dim);font-size:12.5px;letter-spacing:.02em}
.f-legal a:hover{color:var(--gold-hi)}

/* ---------- ERİŞİLEBİLİRLİK (a11y) ---------- */
/* Skip-link: klavye/ekran-okuyucu için "ana içeriğe atla" — yalnız focus'ta görünür. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--gold-br);color:#1d1005;font-family:var(--serif);font-weight:800;letter-spacing:.06em;padding:11px 20px;border-radius:0 0 10px 0;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.skip-link:focus{left:0}
/* Klavye odağı görünürlüğü (fare tıklamasında çıkmaz, yalnız klavye/AT'de). */
a:focus-visible,button:focus-visible,.btn:focus-visible,.btn-hero:focus-visible,.btn-gold:focus-visible,.btn-ghost:focus-visible,input[type=submit]:focus-visible,button[type=submit]:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px;border-radius:6px}
/* Hareket duyarlılığı: animasyon/geçişleri kısar (vestibüler rahatsızlık, WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- HABERLER (article/time) ---------- */
.news-item + .news-item{border-top:1px solid var(--line);padding-top:14px;margin-top:16px}
.news-date{font-size:12px;font-weight:400;opacity:.72;letter-spacing:.02em;white-space:nowrap}

/* ---------- ÇEREZ BİLDİRİMİ (ince, engellemeyen) ---------- */
.cookie-notice{position:fixed;left:16px;right:auto;bottom:16px;z-index:9000;max-width:390px;width:calc(100% - 32px);display:flex;gap:14px;align-items:center;justify-content:space-between;background:rgba(18,10,8,.97);border:1px solid var(--line-br);border-radius:var(--r-lg);padding:13px 16px;box-shadow:0 12px 36px rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.cookie-notice p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink)}
.cookie-notice .cookie-ok{flex:0 0 auto;padding:9px 20px;font-size:13px}
@media (max-width:640px){.cookie-notice{left:0;right:0;bottom:0;transform:none;max-width:none;width:100%;border-radius:0;border-left:0;border-right:0;border-bottom:0;padding:10px 14px;gap:10px}
  .cookie-notice p{font-size:11.5px}
  .cookie-notice .cookie-ok{padding:8px 16px;font-size:12px}}

/* ---------- passwordlost beta notu ---------- */
.pw-beta-note{max-width:620px;margin:0 0 18px;padding:11px 15px;font-size:13.5px;line-height:1.6;color:var(--ink);background:rgba(232,176,74,.08);border:1px solid var(--line-br);border-radius:8px}

/* ---------- 404 hizli linkler ---------- */
.e404-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:18px 0}
.e404-links a{display:block;text-align:center;padding:12px 14px;border:1px solid var(--line-br);border-radius:10px;background:rgba(10,7,5,.5);color:var(--ink);font-weight:600;text-decoration:none}
.e404-links a:hover{border-color:var(--gold-hi);color:var(--gold-hi)}

/* ---------- RESPONSIVE (4 kademe: >1200 / 1025-1200 / 641-1024 / ≤640) ---------- */
/* ≤1200: sıkıştır — ◆ ayraç + online-pill gizle, link padding küçült (taşma yok) */
@media (max-width:1200px){
  .nav ul a{padding:10px 8px;font-size:11.5px}
  .nav ul li+li::before{display:none}
  .nav-actions .online-pill{display:none}
}
/* ≤1080: içerik gridleri daralır */
@media (max-width:1080px){
  .classes{grid-template-columns:repeat(2,1fr)}
  .bosses{grid-template-columns:1fr}
  .trust .t-grid{grid-template-columns:repeat(2,1fr)}
  .roadgrid{grid-template-columns:1fr}
  .shots,.screenshots{grid-template-columns:repeat(2,1fr)}
  .site-footer .f-grid{grid-template-columns:1fr 1fr}
}
/* ≤1024: HAMBURGER DRAWER — nav taşması burada kesin çözülür */
@media (max-width:1024px){
  .nav{position:relative}
  .nav-toggle{display:flex;position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);margin:0;z-index:57}
  .nav-panel{position:fixed;top:0;right:0;z-index:56;height:100dvh;width:min(360px,86vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:calc(var(--header-h) + 14px) 22px 28px;
    background:linear-gradient(180deg,#17100a,#0c0805);border-left:1px solid var(--line-br);
    box-shadow:-24px 0 60px rgba(0,0,0,.7);transform:translateX(100%);
    transition:transform .32s var(--ease);overflow-y:auto;overscroll-behavior:contain;visibility:hidden}
  .nav-panel.is-open{transform:translateX(0);visibility:visible}
  .nav-panel ul{flex-direction:column;align-items:stretch;height:auto;width:100%}
  .nav-panel ul li{height:auto}
  .nav-panel ul li+li::before{display:none}
  .nav-panel ul a{display:block;padding:14px 4px;font-size:14px;letter-spacing:.1em;border-bottom:1px solid var(--line);color:var(--ink)}
  .nav-panel ul a::after{display:none}
  .nav-panel ul li.active a,.nav-panel ul a:hover{color:var(--gold-hi);background:rgba(232,176,74,.06)}
  .nav-actions{flex-direction:column;align-items:stretch;gap:12px;margin:22px 0 0}
  .nav-actions .online-pill{display:flex;justify-content:center}
  .nav-actions .btn-gold,.nav-actions .btn-ghost,.nav-actions .btn-discord{width:100%;justify-content:center;text-align:center}
}
/* ≤900: büyük-mobil/küçük-tablet — amaca-özel DİKEY hero görseli (mobilde video inmez) */
@media (max-width:900px){
  .hero .bgart{background-image:url('../img/v3/hero-portrait.webp');background-position:center 46%}
  .hero{min-height:auto}
  .hero .inner{padding-bottom:clamp(48px,9vh,88px)}
}
/* ≤640: mobil — tek kolon, hero CTA/stat tam genişlik */
@media (max-width:640px){
  .hero .inner{padding-top:calc(var(--header-h) + 16px)}
  .hero-cta{width:100%}
  .hero-cta>*{flex:1 1 100%}
  .hero-stats{width:100%}
  .hero-stats .hs{flex:1 1 auto;justify-content:center;padding:9px 12px}
  .classes,.shots,.screenshots,.trust .t-grid{grid-template-columns:1fr}
  .content-bg-bottom{padding:22px 18px}
  .site-footer .f-grid{grid-template-columns:1fr;gap:24px}
}

/* ---- küçük yamalar (canlı doğrulama sonrası) ---- */
#topwLost,#toLogin{float:right;font-size:13px;font-weight:400;letter-spacing:0;margin-top:4px}
.empire1,.empire2,.empire3{display:inline-block;width:24px;height:24px;background-size:contain;background-repeat:no-repeat;background-position:center}
.empire1{background-image:url(../img/1_s.png)}
.empire2{background-image:url(../img/2_s.png)}
.empire3{background-image:url(../img/3_s.png)}