/* ============================================================================
   HeusMt2 — MARKA TEMASI (tam yeniden giydirme, 2026-07-02)
   Sanat: grok-composer-2.5-fast (logo, amblem, hero, 4 sınıf portresi, 3
   imparatorluk arması) — hepsi bu oturumda üretildi, dış kaynak/kesim yok.
   Palet: gerçek üretilen görsellerden çıkarıldı (canlı kızıl-altın, karanlık DEĞİL).
   main/*.php sayfa sözleşmesini (class/id/JS kancaları) korur.
   ========================================================================== */

@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 {
	--void: #120a08;
	--void2: #1a0f0b;
	--panel: rgba(28, 15, 11, .92);
	--panel-hi: rgba(40, 20, 14, .95);
	--crimson: #d21f2f;
	--crimson-dim: #7a0f18;
	--gold: #e8b04a;
	--gold-br: #ffd77a;
	--gold-deep: #a4741d;
	--ember: #ff6a2c;
	--tx: #f2e6d8;
	--tx2: #b8a290;
	--line: rgba(232, 176, 74, .32);
	--line-soft: rgba(232, 176, 74, .14);
	--font-display: 'Cinzel', 'Georgia', serif;
	--font-body: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- İskelet ---------- */
html { height: 100%; }
body {
	min-height: 100%;
	margin: 0;
	background-color: var(--void);
	font: 14px/1.65 var(--font-body);
	color: var(--tx);
	min-width: 360px;
}
img { display: block; border: none; max-width: 100%; }
a { color: var(--gold); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gold-br); }
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0; }
.center { text-align: center; }
.right { text-align: right; }
.nodisplay, .shadow { display: none; }
#warning { color: #ff8a8a; text-align: center; padding: 8px; }

#page {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--void);
	background-image:
		radial-gradient(140% 70% at 50% 0%, rgba(42, 18, 12, .9) 0%, rgba(24, 13, 9, .7) 45%, rgba(18, 10, 8, .5) 80%),
		url(../img/brand/bg-texture.webp);
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 900px, 100% 900px;
	background-position: top center, top center;
}
/* yan ejderha işlemesi — sayfanın gerçek yüksekliğine göre (viewport'a değil) */
#page::before, #page::after {
	content: '';
	position: absolute;
	top: 0;
	height: 100%;
	width: 300px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	opacity: .28;
	pointer-events: none;
	z-index: 0;
}
#page::before { left: 0; background-image: url(../img/brand/dragon-side.webp); }
#page::after  { right: 0; background-image: url(../img/brand/dragon-side.webp); transform: scaleX(-1); }
@media (max-width: 1320px) { #page::before, #page::after { opacity: .16; width: 220px; } }
@media (max-width: 1023px) { #page::before, #page::after { display: none; } }
#page > * { position: relative; z-index: 1; }
.container-wrapper { flex: 1 0 auto; width: 100%; }
.container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 18px 16px 60px;
	display: grid;
	grid-template-columns: 214px minmax(0, 1fr) 258px;
	gap: 20px;
	align-items: start;
}

/* ---------- Üst bar: logo + nav (gerçek HTML, resme gömülü değil) ---------- */
.topbar {
	position: relative;
	z-index: 30;
	background: linear-gradient(180deg, #2a1410 0%, #180c09 100%);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .5);
	overflow: visible;
}
.topbar-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 16px;
	height: 58px;
	display: flex;
	align-items: center;
}
.topbar-spacer { width: 220px; flex-shrink: 0; }
ul.topnav { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; }
.topnav-left { justify-content: flex-start; }
.topnav-right { justify-content: flex-end; }
ul.topnav li a {
	display: block;
	padding: 9px 16px;
	font: 600 13px/1 var(--font-display);
	letter-spacing: .5px;
	color: var(--tx2);
	border-radius: 6px;
	transition: color .15s, background .15s;
}
ul.topnav li a:hover { color: var(--tx); background: rgba(232, 176, 74, .08); }
ul.topnav li.active a, ul.topnav li a.active { color: var(--gold-br); background: rgba(210, 31, 47, .18); }
ul.topnav li a.cta-mini {
	font: 600 12.5px/1 var(--font-body);
	color: #2a0805;
	background: linear-gradient(180deg, var(--gold-br), var(--gold-deep));
	padding: 9px 18px;
	border-radius: 6px;
	box-shadow: 0 0 14px rgba(255, 106, 44, .25);
}
ul.topnav li a.cta-mini:hover { filter: brightness(1.08); color: #2a0805; background: linear-gradient(180deg, var(--gold-br), var(--gold-deep)); }

/* logo plaka — üst barın ortasında, barı kaplayacak şekilde büyük ve taşan */
.brand-plaque {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 32;
	display: block;
	line-height: 0;
	filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .65));
	transition: filter .2s;
}
.brand-plaque img { display: block; height: 112px; width: auto; }
.brand-plaque:hover { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .65)) brightness(1.06); }
@media (max-width: 1023px) {
	.brand-plaque img { height: 84px; }
	.topbar-spacer { width: 150px; }
}
@media (max-width: 720px) {
	ul.topnav li a { padding: 9px 10px; font-size: 12px; }
	.brand-plaque img { height: 68px; }
	.topbar-spacer { width: 110px; }
}

/* ---------- Paneller ---------- */
.col-1, .col-3 { position: relative; z-index: 10; }
.modul-box {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 9px;
	box-shadow: inset 0 0 26px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .45);
	padding: 15px 16px 17px;
	margin-bottom: 16px;
}
.modul-box-bg, .modul-box-bg-bottom { background: none; }
.modul-box::after { display: none; }
.boxes-top, .boxes-middle, .boxes-bottom { height: 0; background: none; }

.modul-box h3 {
	margin: 0 0 12px;
	padding: 0 0 9px;
	border-bottom: 1px solid var(--line);
	font: 600 14px/1.2 var(--font-display);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--gold);
	display: flex;
	align-items: center;
	gap: 9px;
}
.modul-box h3::before { content: '\25C6'; font-size: 10px; color: var(--crimson); }

ul.main-nav { list-style: none; margin: 0; padding: 0; }
ul.main-nav li { margin: 0 0 9px; }
ul.main-nav li a {
	display: block;
	padding: 11px 8px;
	background: linear-gradient(180deg, #2a1512 0%, #190d0a 100%);
	border: 1px solid var(--line);
	border-radius: 6px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
	font: 500 13px/1 var(--font-body);
	letter-spacing: .5px;
	color: var(--tx);
	text-align: center;
	transition: border-color .15s, color .15s, box-shadow .15s;
}
ul.main-nav li a:hover { color: #fff; border-color: var(--gold-br); box-shadow: 0 0 14px rgba(255, 106, 44, .3); }
ul.main-nav li.active a { border-color: var(--crimson); color: var(--gold-br); background: linear-gradient(180deg, #3a1512 0%, #240d0a 100%); }

.modul-box-2 ul.main-nav li a {
	background: linear-gradient(180deg, var(--gold-br), var(--gold-deep));
	border-color: var(--gold-br);
	color: #2a0805;
	font-weight: 600;
}
.modul-box-2 ul.main-nav li a:hover { filter: brightness(1.08); }
a.btn.download-btn, a.btn.itemshop-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 68px;
	margin: 10px 0 2px;
	background: linear-gradient(160deg, #3a1512 0%, #190d0a 100%);
	border: 1px solid var(--line);
	border-radius: 7px;
	transition: border-color .15s, box-shadow .15s;
	padding: 0;
	position: relative;
}
a.btn.download-btn::after { content: 'İndir'; font: 600 14px/1 var(--font-display); letter-spacing: 1px; color: var(--gold-br); text-transform: uppercase; }
a.btn.itemshop-btn::after { content: 'İtem Mağazası'; font: 600 12px/1.3 var(--font-display); letter-spacing: .5px; color: var(--gold-br); text-transform: uppercase; text-align: center; padding: 0 8px; }
a.btn.download-btn:hover, a.btn.itemshop-btn:hover { border-color: var(--gold-br); box-shadow: 0 0 16px rgba(255, 106, 44, .3); }

/* ---------- col-3: giriş formu ---------- */
.form-login { margin: 0; }
.form-login label { display: block; margin: 9px 0 5px; font: 500 12px/1 var(--font-body); color: var(--tx2); letter-spacing: .5px; }
.form-login .input { background: none; }
.form-login .input input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	background: var(--void2);
	border: 1px solid var(--line);
	border-radius: 5px;
	color: var(--tx);
	font: 14px var(--font-body);
	transition: border-color .15s;
}
.form-login .input input:focus { outline: none; border-color: var(--gold-br); }
.btn-login {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 12px;
	padding: 11px 8px;
	background: linear-gradient(180deg, var(--gold-br), var(--gold-deep));
	border: 1px solid var(--gold-br);
	border-radius: 6px;
	font: 600 15px/1 var(--font-display);
	letter-spacing: .8px;
	color: #2a0805;
	cursor: pointer;
	transition: filter .15s;
}
.btn-login:hover { filter: brightness(1.08); }
.agbok { margin: 11px 0 0; font: 12px/1.6 var(--font-body); color: var(--tx2); }
.agbok a strong { color: var(--gold); font-weight: 500; }
a.password { display: block; margin: 9px 0 0; text-align: center; font: 500 12.5px/1 var(--font-body); color: var(--gold); }

.modul-box center { color: var(--tx2); }
.modul-box b { color: var(--tx2); font-weight: 500; }
.modul-box .offset { color: var(--gold-br); font-weight: 600; }

.form-score { margin-top: 2px; }
.highscore-player ul { list-style: none; margin: 0; padding: 0; }
.highscore-player ul li { border-bottom: 1px solid var(--line-soft); }
.highscore-player ul li.light { background: rgba(255, 255, 255, .02); }
.highscore-player ul li div {
	display: block;
	padding: 8px 34px 8px 4px;
	font: 500 13px/1.2 var(--font-body);
	color: var(--tx);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-repeat: no-repeat;
	background-position: right 6px center;
}
.highscore-player ul li div.empire1 { background-image: url(../img/1_s.png); }
.highscore-player ul li div.empire2 { background-image: url(../img/2_s.png); }
.highscore-player ul li div.empire3 { background-image: url(../img/3_s.png); }
.highscore-player strong.offset { color: var(--gold); margin-right: 4px; }

a.btn {
	display: inline-block;
	padding: 10px 22px;
	background: linear-gradient(180deg, #2a1512 0%, #190d0a 100%);
	border: 1px solid var(--line);
	border-radius: 6px;
	font: 500 13px/1 var(--font-body);
	letter-spacing: .5px;
	color: var(--tx) !important;
	transition: border-color .15s, color .15s, box-shadow .15s;
	margin: 12px 0 2px;
}
a.btn:hover { border-color: var(--gold-br); color: #fff !important; box-shadow: 0 0 14px rgba(255, 106, 44, .3); }
a.btn.download-btn, a.btn.itemshop-btn { padding: 0; color: transparent !important; }

/* ---------- Orta kolon + içerik kartları ---------- */
.col-2 { position: relative; z-index: 10; min-width: 0; }
.content, .two-boxes, .gallerybox {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 9px;
	box-shadow: inset 0 0 26px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .45);
	margin-bottom: 16px;
	overflow: hidden;
}
.content-bg, .content-bg-bottom, .two-boxes-top, .two-boxes-bottom { background: none; }
.content-bg-bottom { padding: 4px 18px 18px; }
.content-last { margin-bottom: 4px; }

.content h2, .box h2, .box-right h2 {
	position: relative;
	margin: 0 -18px 14px;
	padding: 14px 18px 12px 42px;
	border-bottom: 1px solid var(--line);
	font: 600 15px/1.3 var(--font-display);
	color: var(--gold);
	letter-spacing: 1px;
	text-transform: uppercase;
}
.content h2::before, .box h2::before, .box-right h2::before {
	content: '\25C6';
	position: absolute;
	left: 18px; top: 50%;
	transform: translateY(-50%);
	font-size: 11px;
	color: var(--crimson);
}

/* home: hero banner (tam genişlik, gerçek HTML başlık) */
.hero-banner {
	position: relative;
	border-radius: 9px;
	overflow: hidden;
	margin-bottom: 16px;
	border: 1px solid var(--line);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.hero-banner img { width: 100%; height: auto; display: block; }
.hero-banner .hb-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(15, 8, 6, .92) 0%, rgba(15, 8, 6, .68) 32%, rgba(15, 8, 6, .1) 60%, transparent 78%);
	display: flex; flex-direction: column; justify-content: center;
	padding: 0 0 0 34px;
}
.hero-banner .hb-kicker { font: 600 11px/1 var(--font-display); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.hero-banner .hb-title { font: 700 30px/1.2 var(--font-display); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); margin: 0 0 12px; max-width: 420px; }
.hero-banner .hb-title em { font-style: normal; color: var(--ember); }
.hero-banner .hb-sub { font: 400 13.5px/1.7 var(--font-body); color: var(--tx2); max-width: 380px; margin: 0 0 18px; }
.hero-banner .hb-cta { display: inline-flex; gap: 10px; }
.hero-banner .btn-hero {
	display: inline-block; padding: 11px 22px; border-radius: 7px;
	font: 600 13.5px/1 var(--font-body);
	background: linear-gradient(180deg, var(--gold-br), var(--gold-deep));
	color: #2a0805; box-shadow: 0 0 16px rgba(255, 106, 44, .3);
}
.hero-banner .btn-hero.ghost { background: rgba(0,0,0,.35); color: var(--tx); border: 1px solid var(--line); box-shadow: none; }
@media (max-width: 720px) { .hero-banner .hb-overlay { padding-left: 18px; } .hero-banner .hb-title { font-size: 22px; } }

/* home: imparatorluk teaser şeridi */
.empire-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.empire-teaser a {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
	padding: 16px 10px; text-align: center;
	transition: border-color .15s, transform .15s;
}
.empire-teaser a:hover { border-color: var(--gold-br); transform: translateY(-2px); }
.empire-teaser img { width: 64px; height: 64px; border-radius: 50%; }
.empire-teaser .et-name { font: 600 13px/1.2 var(--font-display); color: var(--tx); letter-spacing: .5px; }
.empire-teaser .et-sub { font: 12px/1 var(--font-body); color: var(--tx2); }

/* home: iki kutu (fragman + hoşgeldin) */
.two-boxes { background: none; border: none; box-shadow: none; overflow: visible; margin-bottom: 0; }
.two-boxes-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.box {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 9px;
	box-shadow: inset 0 0 26px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .45);
	margin-bottom: 16px;
	overflow: hidden;
	padding: 0 16px 14px;
}
.box h2, .box-right h2 { margin: 0 -16px 12px; }
.box .body p, .box p { margin: 0 0 10px; font-size: 13.5px; color: var(--tx); }
.video { padding-top: 2px; }

.inner-content { margin: 2px 2px 0; }
.inner-content p, .about-inner-content p, .firststeps-inner-content p, .gallery-inner-content p, .download-inner-content p, .administration-inner-content p { font: 14px/1.75 var(--font-body); color: var(--tx); margin: 0 0 12px; }
.inner-content h3, #download h3, .download-inner-content h3 { font: 600 15px/1.3 var(--font-display); color: var(--gold); letter-spacing: .6px; margin: 16px 0 10px; }
.inner-content ul { list-style: none; margin: 8px 0 0; padding: 0; }
.inner-content ul li { position: relative; padding: 0 0 11px 24px; font: 13.5px/1.6 var(--font-body); color: var(--tx); }
.inner-content ul li::before { content: '\25C6'; position: absolute; left: 2px; top: 3px; font-size: 9px; color: var(--crimson); }

/* PvP / kuşatma vurgu kutusu (home) */
.pvp-callout {
	position: relative; border-radius: 9px; overflow: hidden; margin-bottom: 16px;
	border: 1px solid var(--line); padding: 26px 24px; text-align: center;
	background: linear-gradient(160deg, #2e0f0a 0%, #180b08 100%);
}
.pvp-callout h3 { font: 700 20px/1.3 var(--font-display); color: var(--gold-br); margin: 0 0 8px; }
.pvp-callout p { font: 13.5px/1.6 var(--font-body); color: var(--tx2); max-width: 480px; margin: 0 auto 14px; }

ul.screenshots { list-style: none; display: flex; gap: 10px; margin: 8px 0 4px; padding: 0; }
ul.screenshots li { flex: 1; }
ul.screenshots li a { display: block; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: border-color .15s, transform .15s; }
ul.screenshots li a:hover { border-color: var(--gold-br); transform: translateY(-2px); }
ul.screenshots li img { width: 100%; height: auto; }

/* ---------- Sekmeler ---------- */
ul.tabs-nav { list-style: none; display: flex; gap: 8px; margin: 4px 0 16px; padding: 0; }
ul.tabs-nav li { flex: 1; }
ul.tabs-nav li a {
	display: block; padding: 10px 6px;
	background: linear-gradient(180deg, #2a1512, #190d0a);
	border: 1px solid var(--line); border-radius: 6px;
	font: 500 13px/1.2 var(--font-body); color: var(--tx); text-align: center;
	transition: border-color .15s, color .15s;
}
ul.tabs-nav li a:hover { border-color: var(--gold-br); color: #fff; }
ul.tabs-nav li.selected a { background: linear-gradient(180deg, var(--gold-br), var(--gold-deep)); border-color: var(--gold-br); color: #2a0805; font-weight: 600; }

/* ---------- Karakter sınıfları: 4 kart (gerçek portreler) ---------- */
.characterclasses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.class-card {
	position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
	background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.class-card img { width: 100%; height: 280px; object-fit: cover; object-position: 50% 12%; }
.class-card .cc-body { padding: 14px 16px 16px; }
.class-card h4 { font: 600 16px/1.2 var(--font-display); color: var(--gold-br); margin: 0 0 8px; letter-spacing: .5px; }
.class-card p { font: 13px/1.65 var(--font-body); color: var(--tx); margin: 0; }
.class-card p strong { color: var(--gold); }
@media (max-width: 640px) { .characterclasses-grid { grid-template-columns: 1fr; } }

/* ---------- İmparatorluklar: 3 kart (arma) ---------- */
.empires-grid { display: flex; flex-direction: column; gap: 14px; }
.empire-card { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: var(--panel); }
.empire-card img { width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.empire-card h4 { font: 700 18px/1.2 var(--font-display); color: var(--gold-br); margin: 0 0 8px; letter-spacing: .5px; }
.empire-card p { font: 13.5px/1.7 var(--font-body); color: var(--tx); margin: 0 0 8px; }
.empire-card p strong { color: var(--gold); }
.empire-card p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .empire-card { flex-direction: column; align-items: center; text-align: center; } }

.about-inner-content h4, .firststeps-inner-content h4, .gallery-inner-content h4, .administration-inner-content h4 { font: 600 15px/1.3 var(--font-display); color: var(--gold); letter-spacing: .5px; margin: 0 0 8px; }
.firststepsbox-1, .firststepsbox-2, .firststepsbox-3,
.aboutbox-1, .aboutbox-2, .aboutbox-3, .aboutbox-4, .aboutbox-5 { border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; margin-bottom: 14px; background: var(--panel); }
.about-inner-content, .firststeps-inner-content { max-width: 100%; margin: 0 auto; }
.box-foot, .download-box-foot { display: none; }

/* ---------- Rankings tabloları ---------- */
#ranking, #guildHighscore { margin: 6px 0; }
#ranking table, #guildHighscore table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); }
#ranking th, #guildHighscore th {
	background: linear-gradient(180deg, #3a1512, #240d0a);
	color: var(--gold); font: 600 13px/1.2 var(--font-display); letter-spacing: .6px; text-transform: uppercase;
	padding: 11px 8px; border: 1px solid var(--line);
}
#ranking td, #guildHighscore td { padding: 9px 8px; border: 1px solid var(--line-soft); font: 13.5px/1.4 var(--font-body); color: var(--tx); text-align: center; }
#ranking tr:nth-child(even) td, #guildHighscore tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }
#ranking td img, #guildHighscore td img { display: inline-block; vertical-align: middle; }
#ranking font, #guildHighscore font { color: inherit !important; }

/* ---------- Auth / hesap formları ---------- */
.inner-form-border { max-width: 470px; margin: 10px auto 18px; border: 1px solid var(--line); border-radius: 9px; background: rgba(20, 11, 8, .6); padding: 4px; }
.inner-form-box { padding: 18px 22px; }
.inner-form-box h3 { font: 600 16px/1.3 var(--font-display); color: var(--gold); letter-spacing: .6px; margin: 0 0 14px; }
.inner-form-box h3 a { float: right; font: 500 12px/1.6 var(--font-body); color: var(--tx2); }
.inner-form-box h3 a:hover { color: var(--gold); }
.inner-form-box label { display: block; margin: 12px 0 5px; font: 500 13px/1 var(--font-body); color: var(--tx2); }
.inner-form-box input[type=text], .inner-form-box input[type=password], .inner-form-box input[type=email],
#content input[type=text], #content input[type=password] {
	width: 100%; box-sizing: border-box; padding: 10px 12px; background: var(--void2);
	border: 1px solid var(--line); border-radius: 6px; font: 15px var(--font-body); color: var(--tx);
	transition: border-color .15s;
}
.inner-form-box input:focus { outline: none; border-color: var(--gold-br); }
.form-item { margin-bottom: 4px; }
.trenner { height: 1px; margin: 16px 0; background: linear-gradient(90deg, transparent, var(--line), transparent); }
#submitBtn, .btn-big, input.btn-big {
	display: inline-block; margin: 16px 0 4px; padding: 12px 32px;
	background: linear-gradient(180deg, var(--gold-br) 0%, var(--gold-deep) 100%);
	border: 1px solid var(--gold-br); border-radius: 7px;
	font: 600 15px/1 var(--font-display); letter-spacing: .6px; color: #2a0805; cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3); transition: filter .15s; width: auto;
}
#submitBtn:hover, .btn-big:hover { filter: brightness(1.06); }
a.btn-big { text-decoration: none; }
#regLegend { font: 12px/1.6 var(--font-body); color: var(--tx2); margin-top: 10px; }
#regLegend a, #regLegend a strong, .inner-form-box .agbok a strong { color: var(--gold); }
#checkerror { color: #ff8a8a; font-weight: 500; }
#checkerror p { color: var(--tx2); font-weight: 400; }
#checkerror .green, font[color="green"] { color: #6fd88a; }
#subscribe { margin-top: 14px; }
.administration-inner-content .input-data-box, .input-data-box2 {
	border: 1px solid var(--line); border-radius: 8px; background: rgba(20, 11, 8, .55); padding: 14px 18px; margin-bottom: 14px;
}
.administration-inner-content ul { list-style: none; margin: 0; padding: 0; }
.administration-inner-content ul li { padding: 5px 0; font: 14px/1.5 var(--font-body); color: var(--tx); }
.administration-inner-content span.offset, .administration-inner-content strong { color: var(--gold); }
.administration-box { margin: 12px 0; }
.administration-box a.btn { margin-right: 12px; }

/* ---------- Download sayfası ---------- */
a.download-button-1, a.download-button-2 {
	display: inline-block; width: 174px; height: 63px; margin: 12px 18px 12px 0;
	background: url(../img/download-button-1.jpg) no-repeat; background-size: cover;
	border-radius: 6px; border: 1px solid var(--line); overflow: hidden; text-indent: -9999px;
}
a.download-button-1:hover { background-image: url(../img/download-button-1_h.jpg); border-color: var(--gold-br); }
a.download-button-2 { background-image: url(../img/download-button-2.jpg); }
a.download-button-2:hover { background-image: url(../img/download-button-2_h.jpg); border-color: var(--gold-br); }
.download-comingsoon { color: var(--gold); }
#required { display: none; margin: 10px auto; }
#required table { width: 100%; border-collapse: collapse; margin-bottom: 10px; border: 1px solid var(--line); }
#required caption { font: 600 14px/1.4 var(--font-display); color: var(--gold); padding: 6px; }
#required td { padding: 7px 10px; border: 1px solid var(--line-soft); font: 13px/1.4 var(--font-body); color: var(--tx); }
td.left_td { font-weight: 600; color: var(--gold); width: 90px; }
#downloadText { margin: 8px 0; color: var(--tx2); }
a#requirements { font-weight: 600; color: var(--gold); }

/* ---------- Medya / galeri ---------- */
.gallerybox, .gallerybox-small { padding: 12px 16px; }
.gallery-inner-content { margin: 2px 2px 8px; }
#screenshots a, #wallpapers a { float: left; margin: 6px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: border-color .15s, transform .15s; }
#screenshots a:hover, #wallpapers a:hover { border-color: var(--gold-br); transform: translateY(-2px); }
.wallpaper-links { list-style: none; margin: 4px 6px; padding: 0; float: left; width: 104px; }
.wallpaper-links li { font: 12px/1.7 var(--font-body); }
.wallpaper-links a { color: var(--gold); font-weight: 500; }

/* ---------- Tutorial slaytı ---------- */
.tutorialsbox { padding: 14px; }
.tutorialsbox p { color: var(--tx); }
a.tutorial-btn { display: inline-block; margin: 8px 8px 0 0; padding: 10px 20px; background: linear-gradient(180deg, #2a1512, #190d0a); border: 1px solid var(--line); border-radius: 6px; color: var(--tx); font: 500 13px/1 var(--font-body); }
a.tutorial-btn:hover { border-color: var(--gold-br); color: #fff; }
.scrollable { position: relative; overflow: hidden; width: 100%; max-width: 481px; height: auto; margin: 8px auto; }
.scrollable .items { width: 20000em; position: relative; }
.scrollable .items > div { float: left; }
.scrollable img { border: 1px solid var(--line); border-radius: 6px; }
.scrollable .txt { color: var(--tx); font: 13.5px/1.6 var(--font-body); margin: 8px 0; }
.scrollable .pager { color: var(--gold); font-weight: 600; }
a.prevPage, a.nextPage, a.browse { cursor: pointer; }

.simple_overlay { background: var(--void2) !important; border: 1px solid var(--gold) !important; border-radius: 10px; box-shadow: 0 0 60px rgba(0, 0, 0, .85); }
.forward, .back, .info { background-color: var(--gold) !important; border: 1px solid var(--gold-deep) !important; border-radius: 6px; }
#overlay { background: var(--void2); border: 1px solid var(--gold); border-radius: 10px; }
.contentWrap { padding: 12px; }

.error-inner-content ul { margin: 8px 0 8px 20px; }
.error-mini, .error-big { color: var(--gold-br); font-weight: 500; }

/* ---------- Footer ---------- */
.footer-wrapper {
	flex-shrink: 0; margin-top: 40px;
	background: linear-gradient(180deg, rgba(10, 6, 5, 0) 0%, rgba(10, 6, 5, .8) 30%, #0a0605 100%);
	padding: 28px 0 24px; position: relative; border-top: 1px solid var(--line-soft);
}
.statue-corner { display: none; }
#footer { max-width: 1180px; margin: 0 auto; text-align: center; }
#footer .footer-logo { display: block; height: 44px; width: auto; margin: 0 auto 14px; }
#footer ul.footer-links { list-style: none; display: flex; justify-content: center; gap: 24px; margin: 0 0 14px; padding: 0; }
#footer ul.footer-links li a { font: 500 13px/1 var(--font-body); color: var(--tx2); letter-spacing: .4px; }
#footer ul.footer-links li a:hover { color: var(--gold-br); }
#footer ul { list-style: none; margin: 0; padding: 0; }
#footer ul li.first { font: 12px/1.7 var(--font-body); color: #8a7568; }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
	.container { max-width: 990px; grid-template-columns: 196px minmax(0, 1fr) 232px; gap: 16px; }
	.topbar-inner { max-width: 990px; }
}
@media (max-width: 1023px) {
	.container { grid-template-columns: 1fr; }
	.col-1, .col-3 { max-width: 460px; width: 100%; margin: 0 auto; }
	.two-boxes-bottom, .empire-teaser { grid-template-columns: 1fr; }
	ul.screenshots { flex-wrap: wrap; }
	ul.screenshots li { flex: 1 1 40%; }
	ul.topnav { display: none; }
}
@media (max-width: 640px) {
	.col-2 { padding: 0; }
}