/* =====================================================================
   Misali2 Modern Tema
   - index.php iskeleti + app/pages'teki ESKI class adlarina kopru stiller
   - Sayfa PHP dosyalarina dokunmadan tum siteyi modernlestirir
   ===================================================================== */

:root {
	--bg-0: #0e0908;
	--bg-1: #150e0d;
	--surface-1: #1e1412;
	--surface-2: #281a16;
	--line: rgba(240, 168, 80, .10);
	--line-strong: rgba(240, 168, 80, .24);
	--gold: #f0a832;
	--gold-2: #c97e18;
	--gold-soft: #e8bc6a;
	--red: #a8232e;
	--text-1: #f2e8dc;
	--text-2: #c9b9a8;
	--text-3: #978672;
	--ok: #46b06a;   --ok-bg: rgba(70, 176, 106, .12);
	--err: #d24a56;  --err-bg: rgba(210, 74, 86, .12);
	--info: #4a9ad2; --info-bg: rgba(74, 154, 210, .12);
	--warn: #d2a44a; --warn-bg: rgba(210, 164, 74, .12);
	--radius: 12px;
	--shadow: 0 12px 32px rgba(0, 0, 0, .5);
	--font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------ temel ------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-2);
	background:
		radial-gradient(1200px 500px at 50% -100px, rgba(168, 35, 46, .16), transparent 70%),
		var(--bg-1);
	min-height: 100vh;
}

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

img { max-width: 100%; }

h1, h2, h3, h4, h5 { color: var(--text-1); line-height: 1.3; }

::selection { background: rgba(240, 168, 80, .3); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: #3a2a22; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #4d382c; }

/* ------------------------------ ust nav ------------------------------ */
.site-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(14, 9, 8, .88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}

.nav-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	height: 62px;
	display: flex;
	align-items: center;
	gap: 22px;
}

.nav-logo img { height: 40px; width: auto; display: block; }

.nav-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.nav-menu::-webkit-scrollbar { display: none; }

.nav-menu > li { position: relative; flex-shrink: 0; }

.nav-menu > li > a {
	display: block;
	padding: 10px 13px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-2);
	border-radius: 8px;
}
.nav-menu > li > a:hover { color: var(--gold); background: rgba(240, 168, 80, .07); }

/* acilir alt menu (Siralama) */
.nav-menu li ul {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 190px;
	list-style: none;
	background: var(--surface-1);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: var(--shadow);
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all .18s ease;
}
.nav-menu li:hover ul { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu li ul a {
	display: block;
	padding: 9px 12px;
	font-size: 13px;
	color: var(--text-2);
	border-radius: 7px;
}
.nav-menu li ul a:hover { background: rgba(240, 168, 80, .08); color: var(--gold); }

.nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }

.online-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	font-size: 13px;
	color: var(--text-2);
	background: rgba(240, 168, 80, .06);
	border: 1px solid var(--line);
	border-radius: 999px;
	white-space: nowrap;
}
.online-badge .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ok);
	box-shadow: 0 0 0 0 rgba(70, 176, 106, .6);
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0%   { box-shadow: 0 0 0 0 rgba(70, 176, 106, .5); }
	70%  { box-shadow: 0 0 0 7px rgba(70, 176, 106, 0); }
	100% { box-shadow: 0 0 0 0 rgba(70, 176, 106, 0); }
}
.online-badge b { color: var(--gold-soft); font-weight: 700; }

/* ------------------------------ butonlar ------------------------------ */
.btn, .btn-giris, .btn-cta, .submit-bnt button, button[type="submit"], .button {
	display: inline-block;
	padding: 10px 20px;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #241304;
	background: linear-gradient(180deg, #f2b23e, #c97e18);
	border: none;
	border-radius: 9px;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 4px 14px rgba(240, 168, 80, .22);
	text-align: center;
}
.btn:hover, .btn-giris:hover, .btn-cta:hover, .submit-bnt button:hover, button[type="submit"]:hover, .button:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(240, 168, 80, .32);
	color: #241304;
}
.btn:active, .btn-giris:active, .submit-bnt button:active, button[type="submit"]:active { transform: translateY(0); }

.btn-block { display: block; width: 100%; }

.btn-ghost {
	display: inline-block;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--gold-soft);
	background: rgba(240, 168, 80, .06);
	border: 1px solid var(--line-strong);
	border-radius: 9px;
	cursor: pointer;
	transition: all .15s ease;
	text-align: center;
}
.btn-ghost:hover { background: rgba(240, 168, 80, .13); color: var(--gold); transform: translateY(-1px); }

/* ------------------------------ hero ------------------------------ */
.hero {
	position: relative;
	background:
		linear-gradient(180deg, rgba(14, 9, 8, .18) 0%, rgba(21, 14, 13, .55) 62%, var(--bg-1) 96%),
		url("../fancy/assets/images/headerBG2.jpg") center -40px / cover no-repeat;
	padding: 54px 20px 46px;
	text-align: center;
}

.hero-logo img {
	width: min(460px, 82vw);
	height: auto;
	filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .65));
	animation: heroIn .7s ease both;
}
@keyframes heroIn {
	from { opacity: 0; transform: translateY(14px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

.hero-actions {
	margin-top: 26px;
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.hero-actions .btn-cta, .hero-actions .btn-ghost { padding: 13px 30px; font-size: 14px; }

/* ------------------------------ sayfa duzeni ------------------------------ */
.site-main {
	max-width: 1280px;
	margin: 26px auto 46px;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr) 300px;
	gap: 20px;
	align-items: start;
}

.left-sidebar, .right-sidebar { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.content { min-width: 0; }

/* ------------------------------ kart ------------------------------ */
.card, .panel {
	background: linear-gradient(180deg, var(--surface-2), var(--surface-1) 55%);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.card-head, .panel-heading {
	padding: 13px 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gold-soft);
	background: rgba(240, 168, 80, .045);
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 9px;
}
/* sagdaki ikincil ogeler (sidebar "+ Tum liste" linki, Support "Yeni Talep" butonu) saga */
.card-head a { font-size: 11px; color: var(--text-3); letter-spacing: .04em; margin-left: auto; }
.card-head a:hover { color: var(--gold); }

/* baslik ikonu (gap zaten bosluk veriyor) */
.panel-heading > i:first-child { color: var(--gold); }
.panel-heading .pull-right,
.panel-heading .btn { float: none; margin-left: auto; font-size: 12px; padding: 7px 14px; }

.card-body, .panel-body { padding: 16px; overflow-x: auto; }

.panel { margin-bottom: 20px; }
.panel-buyuk { width: 100%; }

/* ------------------------------ formlar ------------------------------ */
.form-group { margin-bottom: 14px; }

.control-label, label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--text-2);
}

.form-control,
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="tel"], select, textarea {
	width: 100%;
	padding: 11px 13px;
	font-family: var(--font);
	font-size: 14px;
	color: var(--text-1);
	background: #140d0b;
	border: 1px solid rgba(240, 168, 80, .16);
	border-radius: 9px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(240, 168, 80, .14);
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #6d5f51; }

select option { background: var(--surface-1); color: var(--text-1); }

input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--gold); }

/* eski bootstrap grid koprusu */
.form-horizontal .form-group { display: block; }
.col-sm-12, .col-sm-8, .col-sm-10, .col-sm-6, .col-sm-4 { width: 100%; }
.col-sm-offset-2 { margin-left: 0; }
.pull-right { float: right; }
.pull-left { float: left; }
.text-center { text-align: center; }
.row::after { content: ""; display: table; clear: both; }

/* ------------------------------ uyarilar ------------------------------ */
.alert {
	padding: 12px 15px;
	margin-bottom: 14px;
	font-size: 14px;
	border-radius: 10px;
	border: 1px solid;
}
.alert a { font-weight: 600; }
.alert-danger  { color: #f0a9b0; background: var(--err-bg);  border-color: rgba(210, 74, 86, .35); }
.alert-success { color: #a9e2bd; background: var(--ok-bg);   border-color: rgba(70, 176, 106, .35); }
.alert-info    { color: #a9cfe9; background: var(--info-bg); border-color: rgba(74, 154, 210, .35); }
.alert-warning { color: #ecd6a4; background: var(--warn-bg); border-color: rgba(210, 164, 74, .35); }

.label {
	display: inline-block;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	background: rgba(240, 168, 80, .12);
	color: var(--gold-soft);
	margin-bottom: 0;
}
.label-default { background: rgba(255, 255, 255, .08); color: var(--text-2); }

/* ------------------------------ liste menu (CP / sidebar) ------------------------------ */
.list-group { list-style: none; }

.list-group-item {
	display: block;
	padding: 12px 15px;
	font-size: 14px;
	color: var(--text-2);
	border-bottom: 1px solid var(--line);
	position: relative;
	transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.list-group-item:last-child { border-bottom: none; }
.list-group-item::after {
	content: "\203A";
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-3);
	font-size: 16px;
	transition: color .15s ease, right .15s ease;
}
.list-group-item:hover {
	background: rgba(240, 168, 80, .06);
	color: var(--gold-soft);
	padding-left: 19px;
}
.list-group-item:hover::after { color: var(--gold); right: 12px; }
.list-group-item i { margin-right: 8px; color: var(--gold-2); width: 17px; text-align: center; }

/* ------------------------------ tablolar ------------------------------ */
.table, table.ranking-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.table th, .ranking-table th {
	padding: 10px 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-3);
	text-align: left;
	border-bottom: 1px solid var(--line-strong);
	white-space: nowrap;
}
.table td, .ranking-table td {
	padding: 10px 12px;
	color: var(--text-2);
	border-bottom: 1px solid var(--line);
}
.table tbody tr, .ranking-table tbody tr { transition: background .12s ease; }
.table tbody tr:hover td, .ranking-table tbody tr:hover td { background: rgba(240, 168, 80, .05); }
.table-striped tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .017); }
.table-striped tbody tr:nth-child(even):hover td { background: rgba(240, 168, 80, .05); }

.table-full-ranking { overflow-x: auto; }

/* ------------------------------ Ranking + GuildRanking modern siralama ------------------------------ */
.table-full-ranking td { vertical-align: middle; }
.table-full-ranking td a { color: var(--text-1); font-weight: 600; }
.table-full-ranking td a:hover { color: var(--gold); }

/* lonca puani + K/K/B renkleri (GuildRanking) */
.point-badge { color: var(--gold-soft); font-weight: 700; }
.wlb-w { color: var(--ok); font-weight: 600; }
.wlb-l { color: var(--err); font-weight: 600; }
.wlb-d { color: var(--text-3); }

/* ------------------------------ Support / Ticket (destek sistemi) ------------------------------ */
/* durum rozetleri */
.label-success { background: var(--ok-bg); color: #a9e2bd; }
.label-info { background: var(--info-bg); color: #a9cfe9; }

/* Support listesi: goruntule ikon butonu */
.btn-xs { padding: 6px 10px; font-size: 12px; }
.btn-view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: rgba(240, 168, 80, .1);
	border: 1px solid var(--line-strong);
	color: var(--gold-soft);
	box-shadow: none;
}
.btn-view:hover { background: rgba(240, 168, 80, .2); color: var(--gold); box-shadow: none; transform: translateY(-1px); }

/* Ticket mesaj balonlari */
.support-message {
	background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
	border: 1px solid var(--line);
	border-left: 3px solid var(--gold-2);
	border-radius: 10px;
	margin-bottom: 12px;
	overflow: hidden;
}
.support-message.admin { border-left-color: var(--red); }
.support-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, .02);
	border-bottom: 1px solid var(--line);
	font-size: 13px;
}
.support-message.admin .support-title { background: rgba(168, 35, 46, .1); }
.sm-who { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-1); }
.sm-who::before {
	content: "\f007";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--gold-2);
	font-size: 12px;
}
.support-message.admin .sm-who::before { content: "\f132"; color: var(--red); }
.sm-date { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.support-messages { padding: 13px 14px; color: var(--text-2); line-height: 1.6; word-break: break-word; }

/* Ticket cevap alani */
.TicketMessage { resize: vertical; min-height: 110px; }

/* NewTicket: kategori aciklama kutusu */
.KategoriAciklama {
	margin-top: 10px;
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.55;
	color: #a9cfe9;
	background: var(--info-bg);
	border: 1px solid rgba(74, 154, 210, .3);
	border-radius: 9px;
}
.KategoriAciklama p { margin: 0; }
#Ticket { resize: vertical; min-height: 120px; }

/* ------------------------------ cok adimli akis gostergesi (LostPassword) ------------------------------ */
.steps-flow {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 480px;
	margin: 0 auto 20px;
}
.step-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-3);
	white-space: nowrap;
}
.step-item .step-dot {
	width: 27px;
	height: 27px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-3);
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--line);
	border-radius: 50%;
}
.step-item.active { color: var(--gold-soft); }
.step-item.active .step-dot { background: linear-gradient(180deg, #f2b23e, #c97e18); color: #241304; border-color: transparent; }
.step-item.done { color: var(--text-2); }
.step-item.done .step-dot { background: rgba(70, 176, 106, .15); color: var(--ok); border-color: rgba(70, 176, 106, .3); }
.step-line { flex: 1; height: 1px; background: var(--line-strong); }

/* ------------------------------ sozlesme goruntuleyici (Sozlesme.php) ------------------------------ */
.sozlesme-metin {
	color: var(--text-2);
	font-size: 14px;
	line-height: 1.75;
	max-width: 900px;
}
.sozlesme-metin p { margin-bottom: 12px; }
.sozlesme-metin strong { color: var(--text-1); font-weight: 700; }
.sozlesme-metin a { color: var(--gold-soft); word-break: break-word; }
.sozlesme-metin a:hover { color: var(--gold); }
.sozlesme-metin ul, .sozlesme-metin ol { margin: 0 0 12px 22px; }
.sozlesme-metin li { margin-bottom: 5px; }
.sozlesme-metin table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.sozlesme-metin td, .sozlesme-metin th { border: 1px solid var(--line); padding: 8px 10px; }

/* sira rozeti + ilk uc madalya */
.rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-2);
	background: rgba(255, 255, 255, .05);
	border-radius: 8px;
}
.rank-badge.rank-1 { background: linear-gradient(180deg, #f2b23e, #c97e18); color: #241304; box-shadow: 0 3px 10px rgba(240, 168, 80, .3); }
.rank-badge.rank-2 { background: linear-gradient(180deg, #dcdcdc, #9a9a9a); color: #1c1c1c; }
.rank-badge.rank-3 { background: linear-gradient(180deg, #d98d4f, #9c5a28); color: #221105; }

/* seviye rozeti */
.lvl-badge {
	display: inline-block;
	padding: 3px 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--gold-soft);
	background: rgba(240, 168, 80, .1);
	border-radius: 999px;
}

/* krallik bayragi + lonca etiketi */
.empire-flag { border-radius: 4px; vertical-align: middle; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.guild-tag { color: var(--text-2); }
.guild-none { color: var(--text-3); }

/* yayinci satirlari (eski inline gradient yerine) */
#RankingTable tr.rank-youtuber { background: linear-gradient(90deg, rgba(204, 24, 30, .30), rgba(204, 24, 30, .03)); }
#RankingTable tr.rank-twitcher { background: linear-gradient(90deg, rgba(130, 70, 200, .32), rgba(130, 70, 200, .04)); }
#RankingTable tr.rank-youtuber td,
#RankingTable tr.rank-twitcher td { background: transparent; }
#RankingTable tr.rank-youtuber img,
#RankingTable tr.rank-twitcher img { height: 22px; vertical-align: middle; }

/* ------------------------------ index: giris kutusu ------------------------------ */
.register-form { padding: 16px; }
.register-form .form-control { margin-bottom: 12px; }

.check-btn { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.check-box p { margin: 3px 0; font-size: 12.5px; }
.check-box a { color: var(--text-3); }
.check-box a:hover { color: var(--gold); }

.user-panel-welcome {
	padding: 4px 0 12px;
	font-size: 14px;
	color: var(--text-2);
}
.user-panel-welcome b { color: var(--gold-soft); }

/* ------------------------------ index: mini siralamalar ------------------------------ */
.rankings, .top-guilds { padding: 6px 0; }

.rankings-title, .rankings-title-block, .guilds {
	display: grid;
	grid-template-columns: 40px 1fr 62px;
	align-items: center;
	padding: 8px 14px;
	font-size: 13.5px;
}
.rankings-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--text-3);
	border-bottom: 1px solid var(--line);
}
.rankings-title-block, .guilds { border-bottom: 1px solid rgba(240, 168, 80, .05); transition: background .12s ease; }
.rankings-title-block:last-child, .guilds:last-child { border-bottom: none; }
.rankings-title-block:hover, .guilds:hover { background: rgba(240, 168, 80, .05); }

.rank-number {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-3);
	background: rgba(255, 255, 255, .04);
	border-radius: 7px;
}
/* ilk uc siraya madalya rengi (baslik satiri 1. cocuk oldugu icin 2-3-4) */
.rankings-title-block:nth-child(2) .rank-number,
.guilds:nth-child(2) .rank-number { background: linear-gradient(180deg, #f2b23e, #c97e18); color: #241304; }
.rankings-title-block:nth-child(3) .rank-number,
.guilds:nth-child(3) .rank-number { background: linear-gradient(180deg, #cfcfcf, #8f8f8f); color: #1c1c1c; }
.rankings-title-block:nth-child(4) .rank-number,
.guilds:nth-child(4) .rank-number { background: linear-gradient(180deg, #d98d4f, #9c5a28); color: #221105; }

.rank-name, .clan-team { color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.clan-team-name { color: var(--text-1); }
.clan-team-name:hover { color: var(--gold); }
.rank-lvl, .points { text-align: right; color: var(--gold-soft); font-weight: 600; }

/* ------------------------------ sag sidebar kartlari ------------------------------ */
.cta-card {
	display: block;
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cta-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }

.cta-card.download {
	background:
		linear-gradient(180deg, rgba(14, 9, 8, .2), rgba(14, 9, 8, .78)),
		url("../fancy/assets/images/download-button.jpg") center / cover no-repeat;
	padding: 34px 18px 18px;
	text-align: center;
}
.cta-card.download .big {
	display: block;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #ffd98a;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.cta-card.download .small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-2); }

.promo-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
}
.promo-card .promo-ico {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--gold);
	background: rgba(240, 168, 80, .09);
	border: 1px solid var(--line);
	border-radius: 11px;
}
.promo-card .promo-txt span {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-1);
}
.promo-card .promo-txt small { font-size: 12.5px; color: var(--text-3); line-height: 1.4; display: block; margin-top: 2px; }

/* ------------------------------ haberler (Home.php) ------------------------------ */
.news-tab-area { min-width: 0; }

/* sayfa iceriklerindeki sabit genislikli gomulu ogeler (orn. Facebook iframe)
   mobilde tasmasin */
.content iframe, .content img, .content video { max-width: 100%; }

.tbas-title-warp { margin-bottom: 14px; }
.tabs-title h4 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gold-soft);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
	position: relative;
}
.tabs-title h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 64px;
	height: 2px;
	background: linear-gradient(90deg, var(--gold), transparent);
}

.sngle-news-itm {
	background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	margin-bottom: 14px;
	transition: border-color .15s ease, transform .15s ease;
}
.sngle-news-itm:hover { border-color: var(--line-strong); transform: translateY(-1px); }

.news-itm-title .t-txt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.news-itm-title h4 { font-size: 16px; color: var(--text-1); }
.news-itm-title p small { color: var(--text-3); font-size: 12px; }

.news-warp-txt { display: flex; gap: 14px; margin-top: 10px; }
.news-left { flex-shrink: 0; width: 150px; }
.news-left img { border-radius: 9px; display: block; }
.news-right p { font-size: 13.5px; color: var(--text-2); }

/* ------------------------------ anasayfa karsilama + adimlar ------------------------------ */
.welcome-text { font-size: 14.5px; color: var(--text-2); margin-bottom: 18px; }

.steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.step-card {
	display: block;
	position: relative;
	padding: 20px 16px 16px;
	background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.step-card:hover {
	border-color: var(--line-strong);
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}
.step-card .step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 800;
	color: #241304;
	background: linear-gradient(180deg, #f2b23e, #c97e18);
	border-radius: 9px;
	box-shadow: 0 4px 12px rgba(240, 168, 80, .25);
}
.step-card h4 {
	font-size: 15px;
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.step-card p { font-size: 13px; color: var(--text-3); line-height: 1.5; }

@media (max-width: 860px) {
	.steps-grid { grid-template-columns: 1fr; }
}

/* ------------------------------ download sayfasi (AddDragonCoins da kullanir) ------------------------------ */
.Download-games { display: block; }
.download-item-warp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.single-download {
	background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	transition: border-color .15s ease, transform .15s ease;
}
.single-download:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.single-download-item { display: flex; flex-direction: column; gap: 6px; }
.single-download h4 { font-size: 15px; color: var(--text-1); }
.single-download p { font-size: 13px; color: var(--text-3); }

/* Download.php modern indirme kartlari */
.download-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}
.download-card {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 15px;
	background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
	border: 1px solid var(--line);
	border-radius: 11px;
	transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.download-card:hover {
	border-color: var(--line-strong);
	transform: translateY(-2px);
	background: linear-gradient(180deg, #2f1f19, var(--surface-2));
}
.download-card .dl-ico {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	color: var(--gold);
	background: rgba(240, 168, 80, .09);
	border: 1px solid var(--line);
	border-radius: 11px;
	transition: background .15s ease, color .15s ease;
}
.download-card:hover .dl-ico { background: rgba(240, 168, 80, .17); color: var(--gold-soft); }
.download-card .dl-txt { flex: 1; min-width: 0; }
.download-card .dl-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.download-card .dl-type {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 600;
	color: var(--gold-soft);
	background: rgba(240, 168, 80, .1);
	border-radius: 999px;
}
.download-card .dl-arrow { flex-shrink: 0; color: var(--text-3); transition: color .15s ease, transform .15s ease; }
.download-card:hover .dl-arrow { color: var(--gold); transform: translateX(3px); }

/* Android APK indirme karti (Android yesili vurgu) */
.android-download {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 16px 18px;
	background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
	border: 1px solid rgba(61, 220, 132, .18);
	border-radius: var(--radius);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.android-download:hover {
	border-color: rgba(61, 220, 132, .42);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}
.android-download .ad-ico {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 27px;
	color: #3ddc84;
	background: rgba(61, 220, 132, .1);
	border: 1px solid rgba(61, 220, 132, .25);
	border-radius: 13px;
}
.android-download .ad-txt { flex: 1; min-width: 0; }
.android-download .ad-name { display: block; font-size: 16px; font-weight: 700; color: var(--text-1); }
.android-download .ad-desc { display: block; margin-top: 3px; font-size: 13px; color: var(--text-3); }
.android-download .ad-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 20px;
	font-size: 13px;
	font-weight: 700;
	color: #062412;
	background: linear-gradient(180deg, #3ddc84, #2ba55f);
	border-radius: 9px;
	transition: filter .15s ease;
}
.android-download:hover .ad-btn { filter: brightness(1.08); }

@media (max-width: 560px) {
	.android-download { flex-wrap: wrap; }
	.android-download .ad-btn { width: 100%; justify-content: center; margin-top: 4px; }
}

/* sistem gereksinimleri listesi */
.sysreq-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 26px;
}
.sysreq-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 2px;
	border-bottom: 1px solid var(--line);
	font-size: 13.5px;
}
.sysreq-row .k { display: flex; align-items: center; gap: 10px; color: var(--text-3); }
.sysreq-row .k i { color: var(--gold-2); width: 17px; text-align: center; font-size: 15px; }
.sysreq-row .v { color: var(--text-1); font-weight: 600; text-align: right; }

@media (max-width: 620px) {
	.sysreq-list { grid-template-columns: 1fr; }
}

/* ------------------------------ form sayfalari (reg-form) ------------------------------ */
/* islem/form sayfalarinda formu ferah ve merkezli goster (CP disi hesap islemleri) */
.panel-body > .reg-form,
.panel-body > form.form-horizontal {
	max-width: 480px;
	margin: 4px auto 0;
}
.reg-form .form-group { margin-bottom: 15px; }
.reg-form .control-label {
	font-size: 13px;
	color: var(--text-2);
	margin-bottom: 7px;
}
/* reCAPTCHA ve <center>-sarmali ogeleri ortala */
.reg-form .g-recaptcha { display: inline-block; }
.reg-form center { display: block; text-align: center; }
.reg-form center .g-recaptcha { text-align: left; }
.reg-form .btn-block { margin-top: 6px; }
/* bilgilendirme kutulari (kayit/uyari) form ustunde ferah dursun */
.panel-body > .alert { max-width: 480px; margin-left: auto; margin-right: auto; }

/* ------------------------------ metin sayfalari (sozlesme/ceza) ------------------------------ */
/* form/tablo icermeyen bilgi sayfalarinda okunur tipografi */
.panel-body { color: var(--text-2); line-height: 1.7; }
.panel-body h4 {
	margin: 20px 0 4px;
	font-size: 16px;
	color: var(--gold-soft);
	letter-spacing: .02em;
}
.panel-body h5 {
	margin: 0 0 6px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text-3);
}
.panel-body b { color: var(--text-1); }

/* ------------------------------ kontrol paneli (CP.php) ------------------------------ */
.cp-summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px;
	background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 16px;
}
.cp-avatar {
	width: 58px;
	height: 58px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: #241304;
	background: linear-gradient(180deg, #f2b23e, #c97e18);
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(240, 168, 80, .28);
}
.cp-summary .who small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cp-summary .who h3 { font-size: 20px; color: var(--text-1); margin-top: 2px; }

/* EP / MP istatistik kutulari */
.cp-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 16px;
}
.stat-tile {
	position: relative;
	padding: 16px 18px;
	background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.stat-tile::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: linear-gradient(180deg, var(--gold), var(--gold-2));
}
.stat-tile .stat-ico {
	position: absolute;
	right: 14px;
	top: 14px;
	font-size: 22px;
	color: rgba(240, 168, 80, .22);
}
.stat-tile .stat-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.stat-tile .stat-value {
	margin-top: 6px;
	font-size: 26px;
	font-weight: 800;
	color: var(--text-1);
	line-height: 1;
}
.stat-tile .stat-value sup { font-size: 12px; font-weight: 700; color: var(--gold-soft); margin-left: 3px; }

/* hesap bilgileri listesi */
.cp-info-list { display: flex; flex-direction: column; }
.cp-info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 2px;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}
.cp-info-row:last-child { border-bottom: none; }
.cp-info-row .k { color: var(--text-3); display: flex; align-items: center; gap: 9px; }
.cp-info-row .k i { color: var(--gold-2); width: 16px; text-align: center; }
.cp-info-row .v { color: var(--text-1); font-weight: 600; text-align: right; word-break: break-word; }

/* islem kartlari grid */
.cp-actions {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}
.action-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
	border: 1px solid var(--line);
	border-radius: 11px;
	transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.action-card:hover {
	border-color: var(--line-strong);
	transform: translateY(-2px);
	background: linear-gradient(180deg, #2f1f19, var(--surface-2));
}
.action-card .ac-ico {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	color: var(--gold);
	background: rgba(240, 168, 80, .09);
	border: 1px solid var(--line);
	border-radius: 10px;
	transition: background .15s ease, color .15s ease;
}
.action-card:hover .ac-ico { background: rgba(240, 168, 80, .16); color: var(--gold-soft); }
.action-card .ac-txt { font-size: 13.5px; font-weight: 600; color: var(--text-1); line-height: 1.3; }

@media (max-width: 520px) {
	.cp-stats { grid-template-columns: 1fr; }
	.cp-actions { grid-template-columns: 1fr; }
}

/* ------------------------------ crate-title (sayfa baslik bloklari) ------------------------------ */
.crate-title {
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}
.crate-title h2 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--gold-soft);
}

/* ------------------------------ ikon kopruleri ------------------------------ */
/* glyphicon (bootstrap3) adlarini FontAwesome 6'ya esle */
.glyphicon {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-style: normal;
	display: inline-block;
	margin-right: 6px;
	color: var(--gold-2);
}
.glyphicon-folder-close::before { content: "\f07b"; }
.glyphicon-lock::before { content: "\f023"; }
.glyphicon-envelope::before { content: "\f0e0"; }

/* ------------------------------ footer ------------------------------ */
.footer {
	margin-top: 20px;
	background:
		linear-gradient(180deg, rgba(14, 9, 8, .93), rgba(14, 9, 8, .98)),
		url("../fancy/assets/images/footerBG.jpg") center / cover no-repeat;
	border-top: 1px solid var(--line);
	padding: 34px 20px 26px;
	text-align: center;
}

.footer-menu ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 22px;
	list-style: none;
	margin-bottom: 18px;
}
.footer-menu a { font-size: 13px; color: var(--text-3); }
.footer-menu a:hover { color: var(--gold); }

.footer-text p { font-size: 12.5px; color: #6d5f51; line-height: 1.7; }

/* ------------------------------ discord & yardimci ------------------------------ */
.discord-widget {
	width: 300px;
	position: fixed;
	bottom: 20px;
	left: -340px;
	z-index: 10;
	transition: left 1.2s ease;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--shadow);
}
.discord-widget.active { left: 20px; }
.discord-widget img { display: block; }

.checkbox { margin: 10px 0; }
.checkbox label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }

.dogru-mesaji { color: var(--ok); font-size: 13px; }

.g-recaptcha { margin: 10px 0; }

.progress-bar-bg { display: none; }

/* CP ozel eski siniflar */
.main-tr td { padding: 10px 12px; }
.entry b { color: var(--text-1); }
.kayip-buttonlar2-cp { display: inline-block; margin: 4px 2px; }

/* ------------------------------ responsive ------------------------------ */
@media (max-width: 1150px) {
	.site-main { grid-template-columns: 280px minmax(0, 1fr); }
	.right-sidebar {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		align-items: stretch;
	}
}

@media (max-width: 860px) {
	.site-main { grid-template-columns: 1fr; margin-top: 18px; }
	.left-sidebar { order: 2; }
	.content { order: 1; }
	.right-sidebar { order: 3; grid-template-columns: 1fr; }
	.hero { padding: 38px 16px 32px; }
	.nav-inner { height: 56px; gap: 12px; }
	.online-badge { display: none; }
	.download-item-warp { grid-template-columns: 1fr; }
	.news-warp-txt { flex-direction: column; }
	.news-left { width: 100%; }
	.news-left img { width: 100%; object-fit: cover; max-height: 170px; }
}