@charset "utf-8";
/* ==========================================================================
   DMN CMS - webzen_new theme :: FX layer
   Premium motion / polish layer loaded after style.css + dmncms.css.
   Everything here is additive: it never removes markup, only enhances it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Design tokens
   -------------------------------------------------------------------------- */
:root {
	--wz-accent: #d76440;
	--wz-accent-2: #ae3b17;
	--wz-accent-soft: rgba(215, 100, 64, .18);
	--wz-gold: #f0b357;
	--wz-ice: #5d67b1;
	--wz-ink: #05070b;
	--wz-ink-2: #0b0e15;
	--wz-panel: rgba(16, 19, 28, .82);
	--wz-panel-2: rgba(24, 28, 40, .78);
	--wz-line: rgba(255, 255, 255, .09);
	--wz-line-strong: rgba(255, 255, 255, .18);
	--wz-text: #e8e9ef;
	--wz-muted: #9aa0b0;
	--wz-radius: 4px;
	--wz-radius-lg: 10px;
	--wz-shadow: 0 18px 50px -18px rgba(0, 0, 0, .9);
	--wz-shadow-lg: 0 34px 90px -28px rgba(0, 0, 0, .95);
	--wz-glow: 0 0 24px rgba(215, 100, 64, .35);
	--wz-ease: cubic-bezier(.22, .61, .36, 1);
	--wz-ease-out: cubic-bezier(.16, 1, .3, 1);
	--wz-nav-h: 80px;
}

/* --------------------------------------------------------------------------
   02. Typography - brand fonts shipped with the theme
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Geometria';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/Geometria/geometria.ttf') format('truetype')
}

@font-face {
	font-family: 'Geometria';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/Geometria/geometria-medium.ttf') format('truetype')
}

@font-face {
	font-family: 'Geometria';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/Geometria/geometria-bold.ttf') format('truetype')
}

body.wz,
.wz-container,
.global-header {
	font-family: 'Geometria', 'Segoe UI', 'Trebuchet MS', Tahoma, sans-serif;
	letter-spacing: .1px
}

/* Numerals stay tabular so timers/rankings never jitter */
.wz-footer-time,
.footer .time span,
.footer .time strong,
.ranking-list .ranking__num,
.main-promotion .slider__counter {
	font-variant-numeric: tabular-nums
}

/* --------------------------------------------------------------------------
   03. Ambient stage - aurora, grain, vignette
   -------------------------------------------------------------------------- */
html.wz-fx {
	scroll-behavior: smooth
}

body.wz {
	position: relative;
	background: var(--wz-ink);
	color: var(--wz-text);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

body.wz::before,
body.wz::after {
	content: '';
	position: fixed;
	inset: -20%;
	pointer-events: none;
	z-index: 0
}

/* Slow drifting aurora */
body.wz::before {
	background:
		radial-gradient(48vw 42vw at 18% 8%, rgba(215, 100, 64, .16), transparent 62%),
		radial-gradient(42vw 40vw at 84% 22%, rgba(93, 103, 177, .18), transparent 64%),
		radial-gradient(56vw 44vw at 50% 96%, rgba(174, 59, 23, .14), transparent 66%);
	filter: blur(28px);
	animation: wz-aurora 34s ease-in-out infinite alternate
}

/* Film grain + vignette to kill banding on large gradients */
body.wz::after {
	background-image:
		radial-gradient(120% 90% at 50% 0%, transparent 42%, rgba(0, 0, 0, .55) 100%),
		url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
	opacity: .9;
	animation: wz-grain 8s steps(6) infinite
}

@keyframes wz-aurora {
	0% {
		transform: translate3d(0, 0, 0) scale(1)
	}

	50% {
		transform: translate3d(2.5%, -2%, 0) scale(1.08)
	}

	100% {
		transform: translate3d(-2.5%, 2.5%, 0) scale(1.04)
	}
}

@keyframes wz-grain {
	0% {
		transform: translate(0, 0)
	}

	20% {
		transform: translate(-3%, 2%)
	}

	40% {
		transform: translate(2%, -3%)
	}

	60% {
		transform: translate(-2%, -2%)
	}

	80% {
		transform: translate(3%, 1%)
	}

	100% {
		transform: translate(0, 0)
	}
}

/* Everything that is real content must sit above the ambient layer */
.global-header-container,
.wz-container,
.side-promotion,
footer#footer,
#overlay,
#select_server,
#loading,
#exception {
	position: relative;
	z-index: 1
}

#overlay,
#select_server,
#loading {
	z-index: 900
}

/* --------------------------------------------------------------------------
   04. Scroll progress + back to top
   -------------------------------------------------------------------------- */
.wz-fx-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	z-index: 9998;
	background: linear-gradient(90deg, var(--wz-accent-2), var(--wz-accent) 55%, var(--wz-gold));
	box-shadow: 0 0 14px rgba(215, 100, 64, .8);
	transition: width .12s linear
}

.wz-fx-progress::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
	transform: translateX(-100%);
	animation: wz-progress-sheen 2.4s ease-in-out infinite
}

@keyframes wz-progress-sheen {
	to {
		transform: translateX(100%)
	}
}

.wz-fx-totop {
	position: fixed;
	right: 26px;
	bottom: 26px;
	width: 46px;
	height: 46px;
	z-index: 950;
	display: grid;
	place-items: center;
	border: 1px solid var(--wz-line-strong);
	border-radius: 50%;
	background: rgba(12, 15, 22, .82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--wz-accent);
	font-size: 17px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px) scale(.9);
	transition: opacity .35s var(--wz-ease), transform .35s var(--wz-ease), visibility .35s, box-shadow .3s, color .3s
}

.wz-fx-totop.is-on {
	opacity: 1;
	visibility: visible;
	transform: none
}

.wz-fx-totop:hover {
	color: #fff;
	box-shadow: var(--wz-glow), 0 0 0 1px var(--wz-accent) inset
}

.wz-fx-totop svg {
	width: 16px;
	height: 16px;
	fill: currentColor
}

/* --------------------------------------------------------------------------
   05. Global header (WEBZEN bar)
   -------------------------------------------------------------------------- */
.global-header-container {
	background: linear-gradient(180deg, rgba(4, 6, 10, .96), rgba(4, 6, 10, .82));
	border-bottom: 1px solid rgba(255, 255, 255, .05);
	box-shadow: 0 1px 0 rgba(215, 100, 64, .1)
}

.global-header h1 a {
	transition: transform .4s var(--wz-ease), filter .4s
}

.global-header h1 a:hover {
	transform: scale(1.06);
	filter: drop-shadow(0 0 10px rgba(215, 100, 64, .55))
}

.global-header article .log,
.global-header article .register {
	transition: color .3s, background .3s, box-shadow .3s, transform .3s var(--wz-ease)
}

.global-header article .log:hover {
	color: #fff;
	transform: translateY(-1px)
}

.global-header article .register:hover {
	box-shadow: 0 0 18px rgba(237, 28, 36, .55)
}

/* Account dropdown */
.global-header article .my .my-contents {
	overflow: hidden;
	border-radius: 6px;
	border: 1px solid var(--wz-line);
	background: rgba(18, 21, 30, .97);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: var(--wz-shadow-lg)
}

.global-header article .my .list li {
	border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.global-header article .my .list li:last-child {
	border-bottom: 0
}

.global-header article .my .list li a {
	position: relative;
	padding-left: 30px;
	transition: color .25s, background .25s, padding-left .25s var(--wz-ease)
}

.global-header article .my .list li a i {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wz-accent);
	transition: transform .25s var(--wz-ease)
}

.global-header article .my .list li a:hover {
	padding-left: 36px;
	background: rgba(255, 255, 255, .04)
}

.global-header article .my .list li a:hover i {
	transform: translateY(-50%) translateX(3px)
}

.global-header .acp-coins {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.global-header .acp-coins .coins-title {
	font-size: 12px;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--wz-muted)
}

.global-header .acp-coins .coins {
	font-size: 14px;
	font-weight: 700;
	color: var(--wz-gold);
	font-variant-numeric: tabular-nums
}

/* --------------------------------------------------------------------------
   06. Main navigation - glass, glow underline, staggered dropdown
   -------------------------------------------------------------------------- */
.wz-nav {
	background-image: linear-gradient(180deg, rgba(8, 10, 16, .92), rgba(8, 10, 16, .74));
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .95)
}

.wz-nav::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(215, 100, 64, .55), transparent)
}

.wz-nav--fixed {
	animation: wz-nav-drop .45s var(--wz-ease-out) both
}

@keyframes wz-nav-drop {
	from {
		transform: translateY(-100%)
	}

	to {
		transform: translateY(0)
	}
}

.wz-nav:after {
	background: rgba(6, 8, 13, .97);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-top: 1px solid rgba(255, 255, 255, .05);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s var(--wz-ease), visibility .35s
}

.wz-nav.wz-nav--open:after,
.wz-nav:hover:after {
	opacity: 1;
	visibility: visible
}

/* Sweeping highlight behind the bar */
.wz-nav-content::before {
	content: '';
	position: absolute;
	inset: 0 -40px;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .05) 48%, transparent 62%);
	transform: translateX(-100%);
	pointer-events: none;
	animation: wz-nav-sweep 9s ease-in-out infinite
}

@keyframes wz-nav-sweep {
	0%,
	62% {
		transform: translateX(-100%)
	}

	100% {
		transform: translateX(100%)
	}
}

.wz-nav--main {
	overflow: hidden;
	border-radius: 2px;
	transition: transform .4s var(--wz-ease), filter .4s
}

.wz-nav--main:hover {
	transform: scale(1.04);
	filter: drop-shadow(0 0 12px rgba(215, 100, 64, .5))
}

.wz-gnb__item > .wz-gnb__link {
	font-weight: 500;
	letter-spacing: .2px
}

/* Animated underline + halo */
.wz-gnb__item > .wz-gnb__link::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 4px;
	border-radius: 4px 4px 0 0;
	background: linear-gradient(90deg, var(--wz-accent-2), var(--wz-accent) 50%, var(--wz-gold));
	transform: translateX(-50%);
	transition: width .4s var(--wz-ease-out);
	box-shadow: 0 0 14px rgba(215, 100, 64, .6)
}

.wz-gnb__item:hover > .wz-gnb__link,
.wz-gnb__item:focus-within > .wz-gnb__link,
.wz-gnb__item.is-current > .wz-gnb__link {
	color: #fff;
	text-shadow: 0 0 18px rgba(215, 100, 64, .55)
}

.wz-gnb__item:hover > .wz-gnb__link::before,
.wz-gnb__item:focus-within > .wz-gnb__link::before,
.wz-gnb__item.is-current > .wz-gnb__link::before {
	width: 64%
}

.wz-gnb__item > .wz-gnb__link::after {
	display: none
}

.wz-gnb__item.is-current > .wz-gnb__link {
	color: var(--wz-accent)
}

/* Dropdown panel */
.wz-lnb__list {
	position: relative;
	max-width: 210px;
	padding: 26px 14px 34px;
	text-align: left
}

.wz-lnb__list::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 1px;
	height: 18px;
	background: linear-gradient(180deg, var(--wz-accent), transparent)
}

.wz-lnb__item {
	position: relative
}

.wz-lnb__item + .wz-lnb__item {
	margin-top: 2px
}

.wz-lnb__link {
	position: relative;
	display: block;
	width: 100%;
	padding: 8px 14px 8px 22px;
	border-radius: var(--wz-radius);
	font-size: 14px;
	color: var(--wz-muted);
	text-align: left;
	transition: color .28s, background .28s, padding-left .28s var(--wz-ease), transform .28s var(--wz-ease)
}

.wz-lnb__link::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--wz-accent);
	opacity: 0;
	transform: scale(.3);
	transition: opacity .28s, transform .28s var(--wz-ease)
}

.wz-lnb__link:hover,
.wz-lnb__link:focus-visible,
.wz-lnb__link.current {
	color: #fff;
	background: linear-gradient(90deg, rgba(215, 100, 64, .22), rgba(215, 100, 64, 0));
	padding-left: 28px
}

.wz-lnb__link:hover::before,
.wz-lnb__link:focus-visible::before,
.wz-lnb__link.current::before {
	opacity: 1;
	transform: scale(1)
}

.wz-nav:hover .wz-lnb__item {
	animation: wz-drop-in .45s var(--wz-ease-out) both
}

.wz-nav:hover .wz-lnb__item:nth-child(1) {
	animation-delay: .04s
}

.wz-nav:hover .wz-lnb__item:nth-child(2) {
	animation-delay: .1s
}

.wz-nav:hover .wz-lnb__item:nth-child(3) {
	animation-delay: .16s
}

.wz-nav:hover .wz-lnb__item:nth-child(4) {
	animation-delay: .22s
}

@keyframes wz-drop-in {
	from {
		opacity: 0;
		transform: translateY(-10px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

/* Download CTA */
.wz-nav--download {
	position: relative;
	display: flex;
	align-items: center;
	font-weight: 700;
	letter-spacing: 1.2px;
	color: var(--wz-gold)
}

.wz-nav--download::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 22px;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--wz-gold), transparent);
	transform: scaleX(0);
	transition: transform .4s var(--wz-ease)
}

.wz-nav--download:hover {
	color: #fff;
	transform: scale(1.08)
}

.wz-nav--download:hover::after {
	transform: scaleX(1)
}

/* ------------------------------------------------------------------
   06b. GNB typography & rhythm
   ------------------------------------------------------------------
   style.css'ten gelen ve menüyü bozan kurallarin duzeltmesi:
     - .wz-gnb__text { word-break: break-all }  -> "Leader Boa/rd",
       "Communi/ty" gibi ortadan kirilmalar
     - .wz-gnb__link { padding: 0 40px } + .wz-gnb__list { max-width: 960px }
       -> 6 grup 960px'e sigmayinca sarma ve tasma
     - .wz-nav--download dar kutu -> "DOWNLOA/D"
     - .wz-lnb__list { padding: 26px 14px 34px } -> dropdown cok bos
     - dropdown paneli blok cocuk oldugu icin her menu ogesini kendi
       244px genisligine esyiriyordu (6 x 244 = 1464px > 1280px nav).
       Panel artik mutlak konumlu; nav yuksekligini effects.js yaziyor.
   ------------------------------------------------------------------ */

/* --- Ust seviye: esnek, esit bosluk, asla iki satira bolunmez --- */
.wz-gnb__list {
	max-width: none;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 22px;
	gap: 2px;
	justify-content: space-between
}

.wz-gnb__item {
	/* yalnizca ust etiketi olceklendirir; panel genisligi akisa katmaz */
	flex: 0 0 auto;
	width: max-content;
	min-width: 0
}

.wz-gnb__item > .wz-gnb__link {
	padding: 0 18px;
	font-size: 17px;
	white-space: nowrap;
	word-break: normal;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center
}

.wz-gnb__text {
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
	max-width: none
}

/* --- Logo ile menu arasi nefes payi --- */
.wz-nav--main {
	flex: 0 0 auto;
	margin-right: 6px
}

/* --- Indir CTA: sabit genislik, asla bolunmez --- */
.wz-nav--download {
	flex: 0 0 auto;
	white-space: nowrap;
	word-break: normal;
	margin-left: 18px;
	padding-left: 22px;
	border-left: 1px solid rgba(255, 255, 255, .1)
}

.wz-nav--download .wz-text {
	white-space: nowrap;
	word-break: normal;
	display: inline-block
}

/* --- Acilir menu paneli: sabit genislik, ogenin altinda ortalanmis --- */
.wz-lnb__list {
	position: absolute;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	width: 244px;
	max-width: 244px;
	margin: 0;
	padding: 20px 12px 24px;
	text-align: left;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95)
}

/* Kenetarda tasmasin: ilk oge sola, son oge saga yaslanir */
.wz-gnb__item:first-child .wz-lnb__list {
	left: -16px;
	transform: none
}

.wz-gnb__item:last-child .wz-lnb__list {
	left: auto;
	right: -20px;
	transform: none
}

.wz-lnb__list::before {
	left: 26px
}

.wz-lnb__link {
	display: block;
	width: 100%;
	padding: 9px 12px 9px 26px;
	font-size: 14px;
	line-height: 1.35;
	word-break: normal;
	overflow-wrap: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.wz-lnb__link::before {
	left: 14px
}

.wz-lnb__text {
	white-space: nowrap;
	word-break: normal
}

/* --- Dis baglanti isareti (muonline.webzen.com vb.) --- */
.wz-lnb__link[target="_blank"] .wz-lnb__text::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 7px;
	vertical-align: 1px;
	border: 1px solid currentColor;
	border-radius: 1px;
	opacity: .5
}


/* --- Slider küçük görsel başlıkları ---
   style.css'te `word-break: break-all` + `pre-wrap` var; 120px'lik
   kutuya sığan uzun başlıklar kelime ortasından 3 satıra bölünüyordu
   ("Mastery & My / stery Event with Jewel"). */
.main-promotion .slider__paging__title {
	word-break: normal;
	overflow-wrap: break-word;
	white-space: normal;
	hyphens: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: 2.6em;
	line-height: 1.3
}
/* --------------------------------------------------------------------------
   07. Ember canvas
   -------------------------------------------------------------------------- */
.wz-fx-embers {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	opacity: .85
}

/* --------------------------------------------------------------------------
   08. Main promotion slider
   -------------------------------------------------------------------------- */
.main-promotion {
	position: relative;
	background-color: #05070b
}

.main-promotion::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(5, 7, 11, .92) 0%, rgba(5, 7, 11, .55) 38%, transparent 62%),
		linear-gradient(0deg, rgba(5, 7, 11, .95) 0%, transparent 34%);
	z-index: 2
}

.main-promotion .slider__link {
	display: block
}

.main-promotion .slider__banner,
.main-promotion .main-promotion__banner {
	transform-origin: center center;
	transition: transform 9s linear, filter 1.2s var(--wz-ease)
}

/* Ken Burns on the visible slide only */
.main-promotion .slider__item.selected .main-promotion__banner {
	transform: scale(1.09)
}

.main-promotion .slider__item.selected .main-promotion__link {
	animation: wz-slide-fade 1.1s var(--wz-ease-out) both
}

@keyframes wz-slide-fade {
	from {
		opacity: 0;
		transform: scale(1.04)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.main-promotion__info {
	padding: 0 60px;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .85)
}

.main-promotion__title {
	text-shadow: 0 0 34px rgba(215, 100, 64, .35)
}

.main-promotion .selected .main-promotion__title,
.main-promotion .selected .main-promotion__date,
.main-promotion .selected .main-promotion__desc {
	animation: wz-copy-up .8s var(--wz-ease-out) both
}

.main-promotion .selected .main-promotion__date {
	animation-delay: .08s
}

.main-promotion .selected .main-promotion__desc {
	animation-delay: .16s
}

@keyframes wz-copy-up {
	from {
		opacity: 0;
		transform: translate3d(-26px, 0, 0)
	}

	to {
		opacity: 1;
		transform: none
	}
}

/* Autoplay progress bar injected by effects.js */
.wz-fx-slider-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 0;
	z-index: 6;
	background: linear-gradient(90deg, var(--wz-accent-2), var(--wz-accent), var(--wz-gold));
	box-shadow: 0 0 16px rgba(215, 100, 64, .75)
}

/* Thumbnails */
.main-promotion .slider__paging__item {
	transition: transform .35s var(--wz-ease)
}

.main-promotion .slider__paging__item:hover {
	transform: translateY(-4px)
}

.main-promotion .slider__paging__item.selected .slider__paging__thumb,
.main-promotion .slider__paging__item:hover .slider__paging__thumb {
	box-shadow: 0 0 0 2px var(--wz-accent), 0 10px 30px -10px rgba(215, 100, 64, .9)
}

/* Arrows */
.main-promotion .slider__controls__button {
	transition: transform .3s var(--wz-ease), background .3s, box-shadow .3s, color .3s
}

.main-promotion .slider__controls__button:hover {
	color: #fff;
	box-shadow: 0 0 22px rgba(215, 100, 64, .55)
}

.main-promotion .slider__controls--prev:hover {
	transform: translateX(-4px)
}

.main-promotion .slider__controls--next:hover {
	transform: translateX(4px)
}

/* Counter */
.main-promotion .slider__counter--current {
	color: var(--wz-accent);
	font-weight: 700
}

/* --------------------------------------------------------------------------
   09. Section chrome - latest / info / intro
   -------------------------------------------------------------------------- */
.latest-title {
	position: relative;
	display: inline-block
}

.latest-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 46px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--wz-accent), var(--wz-gold));
	box-shadow: 0 0 12px rgba(215, 100, 64, .55)
}

.latest-more {
	position: relative;
	transition: color .3s, letter-spacing .3s
}

.latest-more:hover {
	color: #fff;
	letter-spacing: .6px
}

/* News list */
.main__latest .board-list__item {
	border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.main__latest .board-list__link {
	position: relative;
	display: block;
	padding: 12px 0 12px 14px;
	transition: background .3s, padding-left .35s var(--wz-ease)
}

.main__latest .board-list__link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 0;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--wz-accent), var(--wz-gold));
	transform: translateY(-50%);
	transition: height .35s var(--wz-ease)
}

.main__latest .board-list__link::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(215, 100, 64, .16), transparent 70%);
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none
}

.main__latest .board-list__link:hover {
	padding-left: 22px
}

.main__latest .board-list__link:hover::before {
	height: 62%
}

.main__latest .board-list__link:hover::after {
	opacity: 1
}

.main__latest .board-list .title {
	transition: color .3s
}

.main__latest .board-list__link:hover .title {
	color: var(--wz-gold)
}

.main__latest .board-list .category {
	display: inline-block;
	padding: 1px 8px;
	margin-right: 8px;
	border: 1px solid rgba(215, 100, 64, .45);
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--wz-accent)
}

/* Ranking panels */
.main__info-ranking,
.main__info-guide {
	border-radius: var(--wz-radius-lg);
	transition: transform .4s var(--wz-ease), box-shadow .4s
}

.main__info-ranking:hover {
	transform: translateY(-4px);
	box-shadow: var(--wz-shadow)
}

.ranking-list li,
.ranking__table tbody tr {
	position: relative;
	transition: background .3s, transform .3s var(--wz-ease)
}

.ranking-list li:hover,
.ranking__table tbody tr:hover {
	background: rgba(215, 100, 64, .1);
	transform: translateX(4px)
}

/* Shine sweep on ranking rows */
.ranking-list li::after,
.ranking__table tbody tr::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
	transform: translateX(-100%);
	pointer-events: none
}

.ranking-list li:hover::after,
.ranking__table tbody tr:hover::after {
	animation: wz-shine .8s var(--wz-ease) forwards
}

@keyframes wz-shine {
	to {
		transform: translateX(100%)
	}
}

/* Guide cards - 3D tilt host */
.main__info .guide__item {
	border-radius: var(--wz-radius-lg);
	overflow: hidden;
	transform-style: preserve-3d;
	transition: transform .5s var(--wz-ease), box-shadow .5s
}

.main__info .guide__item:hover {
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(215, 100, 64, .35) inset
}

.main__info .guide__link {
	position: relative;
	overflow: hidden
}

.main__info .guide__link::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%);
	transform: translateX(-110%);
	pointer-events: none
}

.main__info .guide__item:hover .guide__link::after {
	animation: wz-shine .95s var(--wz-ease) forwards
}

.main__info .guide--more {
	transition: transform .35s var(--wz-ease), background .35s, color .35s
}

.main__info .guide__item:hover .guide--more {
	transform: translateX(5px)
}

/* Event timers */
.event-timers li,
.event-timers .event-timer {
	border-radius: var(--wz-radius);
	transition: background .3s, transform .3s var(--wz-ease)
}

.event-timers li:hover {
	background: rgba(255, 255, 255, .04);
	transform: translateX(4px)
}

/* Intro */
.main__intro--title {
	animation: wz-fade-up 1s var(--wz-ease-out) both
}

.main__intro--desc {
	animation: wz-fade-up 1s .18s var(--wz-ease-out) both
}

@keyframes wz-fade-up {
	from {
		opacity: 0;
		transform: translateY(28px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

/* Live dot */
.blink_dot {
	animation: wz-pulse 1.6s ease-in-out infinite
}

@keyframes wz-pulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(215, 100, 64, .6);
		opacity: 1
	}

	50% {
		box-shadow: 0 0 0 7px rgba(215, 100, 64, 0);
		opacity: .55
	}
}

/* --------------------------------------------------------------------------
   10. Side promotion
   -------------------------------------------------------------------------- */
.side-promotion .slider__link {
	display: block;
	border-radius: var(--wz-radius-lg);
	overflow: hidden;
	transition: transform .45s var(--wz-ease), box-shadow .45s
}

.side-promotion .slider__link:hover {
	transform: translateY(-5px);
	box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(215, 100, 64, .4) inset
}

.side-promotion .slider__paging__item {
	border-radius: 999px;
	transition: width .35s var(--wz-ease), background .35s
}

.side-promotion .wz-nav__quick [class*='wz-nav__quick--'] {
	border: 1px solid var(--wz-line);
	transition: transform .4s var(--wz-ease), box-shadow .4s, border-color .4s
}

.side-promotion .wz-nav__quick [class*='wz-nav__quick--']:hover {
	transform: translateY(-4px) scale(1.06);
	border-color: var(--wz-accent);
	box-shadow: var(--wz-glow)
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
footer#footer {
	border-top: 1px solid rgba(255, 255, 255, .06)
}

footer#footer::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(215, 100, 64, .8), rgba(240, 179, 87, .5), transparent)
}

.footer-content {
	position: relative
}

.footer-menu .link {
	position: relative;
	transition: color .3s, padding-left .3s var(--wz-ease)
}

.footer-menu .link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1px;
	background: var(--wz-accent);
	transition: width .35s var(--wz-ease)
}

.footer-menu .link:hover {
	color: var(--wz-gold);
	padding-left: 4px
}

.footer-menu .link:hover::after {
	width: calc(100% - 20px)
}

.footer .copyright .ci {
	transition: transform .4s var(--wz-ease), filter .4s
}

.footer .copyright .ci:hover {
	transform: scale(1.08);
	filter: drop-shadow(0 0 10px rgba(215, 100, 64, .6))
}

.footer .language .selected {
	transition: color .3s
}

.footer .language .list li a {
	transition: color .25s, padding-left .25s var(--wz-ease)
}

.footer .language .list li a:hover,
.footer .language .list li a.active {
	padding-left: 14px
}

.wz-fx-corporate {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	padding: 22px 0 4px;
	border-top: 1px solid rgba(255, 255, 255, .05)
}

.wz-fx-corporate a {
	font-size: 13px;
	color: var(--wz-muted);
	transition: color .3s
}

.wz-fx-corporate a:hover {
	color: var(--wz-accent)
}

/* --------------------------------------------------------------------------
   12. Inner pages - DMN CMS (light content surface, accent #d76440)
   -------------------------------------------------------------------------- */
.dmn-content,
.dmn-page-box {
	position: relative
}

.dmn-page-box {
	border-radius: 10px;
	border: 1px solid rgba(20, 24, 34, .07);
	background: #fff;
	box-shadow: 0 18px 46px -22px rgba(15, 18, 26, .45)
}

.dmn-page-box::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	border-radius: 10px 10px 0 0;
	background: linear-gradient(90deg, #d76440, #f0b357 55%, transparent)
}

.dmn-page-title h1 {
	display: inline-block;
	position: relative;
	color: #2a2f3a
}

.dmn-page-title h1::after {
	content: '';
	display: block;
	width: 54px;
	height: 3px;
	margin-top: 10px;
	border-radius: 3px;
	background: linear-gradient(90deg, #d76440, #f0b357)
}

.dmn-page-content p {
	line-height: 180%;
	color: #42464e
}

/* Accent hover that stays readable on the white card */
.dmn-page-content a,
.login_form a,
.registration_form a,
.additional-links a,
.dmn-sidebar-box-items a {
	transition: color .25s
}

.dmn-page-content a:hover,
.login_form a:hover,
.registration_form a:hover,
.additional-links a:hover,
.dmn-sidebar-box-items a:hover {
	color: #ae3b17
}

.dmn-page-box .table,
.dmn-account-table,
.dmn-rankings-table {
	border-radius: var(--wz-radius);
	overflow: hidden
}

.dmn-rankings-table thead th,
.dmn-account-table thead th {
	letter-spacing: .6px;
	text-transform: uppercase
}

.dmn-rankings-table tbody tr {
	transition: background .3s, transform .3s var(--wz-ease)
}

.dmn-rankings-table tbody tr:hover {
	background: rgba(215, 100, 64, .1) !important
}

.dmn-account-table th,
.dmn-account-table td {
	transition: background .3s
}

.dmn-account-table tr:hover td {
	background: rgba(215, 100, 64, .06)
}

/* Buttons */
.btn,
.btn-primary,
.btn-default,
.btn-danger,
.btn-success {
	position: relative;
	overflow: hidden;
	border-radius: var(--wz-radius);
	transition: transform .3s var(--wz-ease), box-shadow .3s, background .3s, border-color .3s, color .3s
}

.btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .3) 50%, transparent 62%);
	transform: translateX(-110%);
	transition: transform .7s var(--wz-ease)
}

.btn:hover::after {
	transform: translateX(110%)
}

.btn:hover,
.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -14px rgba(215, 100, 64, .85)
}

.btn:active {
	transform: translateY(0)
}

/* Forms - kept light so they match the white card */
.form-control {
	border-radius: var(--wz-radius);
	border: 1px solid rgba(20, 24, 34, .16);
	transition: border-color .3s, box-shadow .3s
}

.form-control:focus {
	border-color: #d76440;
	box-shadow: 0 0 0 3px rgba(215, 100, 64, .18)
}

label {
	letter-spacing: .3px
}

/* Vault / item grids (dark surface) */
.dmn-grid-item-modern,
.dmn-vault-grid-modern > * {
	border-radius: 10px;
	overflow: hidden;
	transition: transform .4s var(--wz-ease), box-shadow .4s
}

.dmn-grid-item-modern:hover,
.dmn-vault-grid-modern > *:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .9)
}

.dmn-sidebar-box {
	border-radius: 10px;
	transition: box-shadow .4s, transform .4s var(--wz-ease)
}

.dmn-sidebar-box:hover {
	box-shadow: 0 22px 50px -26px rgba(15, 18, 26, .5)
}

.dmn-sidebar-box-items a {
	transition: color .25s, padding-left .3s var(--wz-ease)
}

.dmn-sidebar-box-items a:hover {
	padding-left: 26px
}

/* Pagination */
.pagination li a,
.pagination li span {
	border-radius: var(--wz-radius);
	transition: background .3s, color .3s, transform .3s var(--wz-ease), border-color .3s
}

.pagination li a:hover {
	transform: translateY(-2px)
}

/* --------------------------------------------------------------------------
   13. Scroll reveal
   -------------------------------------------------------------------------- */
/* Gated on .wz-fx-ready so a blocked or failed JS can never hide content. */
.wz-fx-ready [data-wz-reveal] {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity .75s var(--wz-ease-out), transform .75s var(--wz-ease-out);
	will-change: opacity, transform
}

.wz-fx-ready [data-wz-reveal="left"] {
	transform: translate3d(-32px, 0, 0)
}

.wz-fx-ready [data-wz-reveal="right"] {
	transform: translate3d(32px, 0, 0)
}

.wz-fx-ready [data-wz-reveal="zoom"] {
	transform: scale(.94)
}

.wz-fx-ready [data-wz-reveal].is-in {
	opacity: 1;
	transform: none
}

/* --------------------------------------------------------------------------
   14. Loading shimmer
   -------------------------------------------------------------------------- */
.wz-fx-skeleton {
	position: relative;
	overflow: hidden;
	background: rgba(255, 255, 255, .05);
	border-radius: var(--wz-radius)
}

.wz-fx-skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent);
	transform: translateX(-100%);
	animation: wz-shimmer 1.4s infinite
}

@keyframes wz-shimmer {
	to {
		transform: translateX(100%)
	}
}

/* --------------------------------------------------------------------------
   15. Accessibility - honour reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html.wz-fx {
		scroll-behavior: auto
	}

	body.wz::before,
	body.wz::after,
	.wz-nav-content::before,
	.wz-fx-progress::after,
	.main-promotion .slider__item.selected .main-promotion__banner {
		animation: none !important;
		transition: none !important
	}

	.wz-fx-ready [data-wz-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important
	}

	.main-promotion .selected .main-promotion__title,
	.main-promotion .selected .main-promotion__date,
	.main-promotion .selected .main-promotion__desc,
	.main__intro--title,
	.main__intro--desc {
		animation: none !important
	}

	.wz-fx-embers {
		display: none
	}
}

@media (prefers-contrast: more) {

	.wz-fx-ready [data-wz-reveal] {
		opacity: 1;
		transform: none
	}
}

/* --------------------------------------------------------------------------
   16. Responsive safety net (the base theme is a 1280px fixed layout)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1279px) {
	.wz-container {
		min-width: 0
	}

	.wz-nav-content {
		width: 96%;
		max-width: 1200px
	}

	.wz-gnb__link {
		padding: 0 16px;
		font-size: 16px
	}

	.wz-lnb__list {
		max-width: 100%
	}

	.main__latest {
		width: 92%
	}

	.main__info__box,
	.footer-content {
		width: 92%
	}
}

@media only screen and (max-width: 900px) {
	.main__latest-news,
	.main__latest-shop {
		float: none;
		width: 100%;
		margin: 0 0 40px
	}

	.main__info {
		height: auto;
		padding-bottom: 50px;
		background-size: cover
	}

	.main__info-ranking {
		float: none;
		width: auto;
		margin: 50px 0 0
	}

	.main__info-guide {
		float: none;
		width: auto;
		margin: 30px 0 0
	}

	.side-promotion {
		display: none
	}

	.wz-fx-totop {
		right: 14px;
		bottom: 14px
	}
}
/* --------------------------------------------------------------------------
   08b. Promotion cursor spotlight (driven by effects.js CSS vars)
   -------------------------------------------------------------------------- */
.main-promotion.is-lit {
	background-image:
		radial-gradient(420px 320px at var(--wz-mx, 50%) var(--wz-my, 50%), rgba(215, 100, 64, .16), transparent 70%);
	transition: background-image .2s linear
}

.main-promotion.is-lit .main-promotion__title {
	color: #fff
}

/* ==========================================================================
   13. Haber detay sayfasi (home/view.read_news)
   --------------------------------------------------------------------------
   Acik tema (dmn-page-content) uzerine kurulu; Webzen koyu tipografisi
   yerine kartin icinde koyu bir "okuma alani" kuruyoruz.
   ========================================================================== */

.ax-news {
	--ax-accent: #d76440;
	--ax-line: rgba(19, 26, 38, .1)
}

.ax-news__article {
	background: #fff;
	border: 1px solid var(--ax-line);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 18px 48px -28px rgba(11, 18, 32, .45)
}

.ax-news__banner {
	margin: 0;
	aspect-ratio: 1920 / 760;
	overflow: hidden;
	background: #0d1220
}

.ax-news__banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.ax-news__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 18px 28px;
	border-bottom: 1px solid var(--ax-line);
	background: linear-gradient(180deg, #fbfcfe, #f4f6fa)
}

.ax-news__badge {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(19, 26, 38, .07);
	color: #1a2436;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase
}

.ax-news__badge--2 {
	background: rgba(227, 38, 53, .12);
	color: #c2182a
}

.ax-news__badge--3 {
	background: rgba(215, 100, 64, .14);
	color: #b04a26
}

.ax-news__badge--4 {
	background: rgba(255, 212, 59, .2);
	color: #8a6a00
}

.ax-news__label {
	color: #46536b;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em
}

.ax-news__author {
	margin-left: auto;
	color: #7c879b;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px
}

.ax-news__author::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--ax-accent);
	vertical-align: 1px
}

.ax-news__body {
	padding: 30px 28px 10px;
	color: #2b3546;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 1.85
}

.ax-news__body > *:first-child {
	margin-top: 0
}

.ax-news__body h1,
.ax-news__body h2,
.ax-news__body h3,
.ax-news__body h4 {
	margin: 32px 0 12px;
	color: #101724;
	font-family: 'Open Sans', sans-serif;
	font-weight: 800;
	letter-spacing: -.01em
}

.ax-news__body h1 {
	font-size: 28px
}

.ax-news__body h2 {
	font-size: 22px
}

.ax-news__body h3 {
	font-size: 17px
}

.ax-news__body p {
	margin: 0 0 16px
}

.ax-news__body ul,
.ax-news__body ol {
	margin: 0 0 18px;
	padding-left: 22px
}

.ax-news__body li {
	margin-bottom: 8px
}

.ax-news__body a {
	color: var(--ax-accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(215, 100, 64, .35)
}

.ax-news__body a:hover {
	border-bottom-color: var(--ax-accent)
}

.ax-news__body img {
	max-width: 100%;
	height: auto;
	border-radius: 3px
}

.ax-news__body strong {
	color: #101724
}

.ax-news__body blockquote {
	margin: 20px 0;
	padding: 14px 20px;
	border-left: 3px solid var(--ax-accent);
	background: rgba(215, 100, 64, .05);
	color: #4a5568
}

.ax-news__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
	padding: 18px 28px;
	border-top: 1px solid var(--ax-line);
	background: #fafbfd
}

.ax-news__posted {
	color: #7c879b;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px
}

.ax-news__back-link {
	margin-left: auto;
	color: var(--ax-accent);
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none
}

.ax-news__back-link::after {
	content: ' →'
}

.ax-news__back-link:hover {
	text-decoration: underline
}

.ax-news__back {
	margin-top: 18px
}

@media (max-width: 768px) {
	.ax-news__meta,
	.ax-news__body,
	.ax-news__footer {
		padding-left: 18px;
		padding-right: 18px
	}

	.ax-news__author {
		margin-left: 0;
		width: 100%
	}

	.ax-news__banner {
		aspect-ratio: 16 / 9
	}
}

@media (prefers-reduced-motion: reduce) {
	.ax-news__article {
		box-shadow: none
	}
}

/* ==========================================================================
   14. Haber listesi (lnews/view.type + view.index)
   ========================================================================== */

.ax-nl {
	--ax-nl-c: #d76440
}

.ax-nl__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(19, 26, 38, .1)
}

.ax-nl__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 16px;
	border-radius: 999px;
	background: rgba(19, 26, 38, .05);
	color: #46536b;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .18s ease, color .18s ease
}

.ax-nl__tab:hover {
	background: rgba(19, 26, 38, .09);
	color: #101724
}

.ax-nl__tab.is-active {
	background: var(--ax-nl-c);
	color: #fff
}

.ax-nl__empty {
	padding: 60px 20px;
	text-align: center;
	color: #7c879b;
	font-family: 'Open Sans', sans-serif
}

.ax-nl__list {
	display: flex;
	flex-direction: column;
	gap: 14px
}

.ax-nl__item {
	display: flex;
	gap: 20px;
	padding: 18px;
	background: #fff;
	border: 1px solid rgba(19, 26, 38, .1);
	border-radius: 4px;
	transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease, border-color .22s ease
}

.ax-nl__item:hover {
	transform: translateY(-2px);
	border-color: rgba(19, 26, 38, .18);
	box-shadow: 0 16px 40px -26px rgba(11, 18, 32, .5)
}

.ax-nl__thumb {
	flex: 0 0 190px;
	aspect-ratio: 190 / 100;
	overflow: hidden;
	border-radius: 3px;
	background: #0d1220
}

.ax-nl__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1)
}

.ax-nl__item:hover .ax-nl__thumb img {
	transform: scale(1.05)
}

.ax-nl__body {
	flex: 1 1 auto;
	min-width: 0
}

.ax-nl__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 7px
}

.ax-nl__badge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(19, 26, 38, .07);
	color: #1a2436;
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase
}

.ax-nl__badge--2 {
	background: rgba(227, 38, 53, .12);
	color: #c2182a
}

.ax-nl__badge--3 {
	background: rgba(215, 100, 64, .14);
	color: #b04a26
}

.ax-nl__badge--4 {
	background: rgba(224, 168, 0, .16);
	color: #8a6a00
}

.ax-nl__date {
	color: #7c879b;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px
}

.ax-nl__title {
	margin: 0 0 6px;
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4
}

.ax-nl__title a {
	color: #101724;
	text-decoration: none;
	transition: color .18s ease
}

.ax-nl__title a:hover {
	color: var(--ax-nl-c)
}

.ax-nl__excerpt {
	margin: 0 0 10px;
	color: #55617a;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height: 1.7
}

.ax-nl__more a {
	color: var(--ax-nl-c);
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none
}

.ax-nl__more a::after {
	content: ' →'
}

.ax-nl__more a:hover {
	text-decoration: underline
}

.ax-nl__pagination {
	margin-top: 26px;
	text-align: center
}

@media (max-width: 768px) {
	.ax-nl__item {
		flex-direction: column;
		gap: 14px
	}

	.ax-nl__thumb {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 16 / 9
	}
}

@media (prefers-reduced-motion: reduce) {
	.ax-nl__item,
	.ax-nl__thumb img,
	.ax-nl__tab {
		transition: none
	}

	.ax-nl__item:hover,
	.ax-nl__item:hover .ax-nl__thumb img {
		transform: none
	}
}

/* ==========================================================================
   15. Hesap paneli dropdown duzeltmesi
   --------------------------------------------------------------------------
   Tarayicida tespit edilen hata:
   style.css icindeki `.my-contents { display: none }` kurali (spesifite
   0,1,0) bootstrap.min.css'in `.dropdown-menu.show { display: block }`
   kuralini (0,2,0) eziyor. Bootstrap JS'i `.show` sinifini dogru ekliyor
   ama panel hic acilmIYOR - "My Account" tiklaninca panel belirmiyor.

   Cozum: ayni paneli daha yuksek spesifikiteyle acik duruma zorluyoruz.
   Aciklik yine bootstrap'in `.show` sinifine bagli kalir; sadece temanin
   `display:none` kurali yenmiy olur.
   ========================================================================== */

.global-header article .my .dropdown-menu.show,
.global-header article .my ul.my-contents.show {
	display: block
}

/* Panelin konumu: tema `top:23px` veriyor ama bootstrap Popper inline
   `top:0; transform:translate3d(...)` yaziyor. Ikinin uyusmamasi panelin
   dugmenin altindan kaymasina yol aciyor; hizalamayi sabitliyoruz. */
.global-header article .my .dropdown-menu.show {
	top: 26px;
	transform: none !important;
	left: auto;
	right: 0
}

/* Panel icerigi: coin satirlari + liste. Kontrast ve ayiraclar. */
.global-header article .my .my-contents .acp-coins {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 18px;
	color: #9aa4b8;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px
}

.global-header article .my .my-contents .acp-coins .coins-title {
	letter-spacing: .04em
}

.global-header article .my .my-contents .acp-coins .coins {
	color: #ffd24a;
	font-weight: 700
}

.global-header article .my .my-contents .list {
	margin: 0;
	padding: 0
}

.global-header article .my .my-contents .list .dropdown-item {
	display: block;
	padding: 10px 18px;
	color: #b9c1d1;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	white-space: nowrap
}

.global-header article .my .my-contents .list .dropdown-item:hover {
	background: rgba(255, 255, 255, .06);
	color: #fff
}

.global-header article .my .my-contents .list .dropdown-item i {
	margin-right: 6px;
	color: var(--wz-accent, #d76440)
}

/* Tema `.my` icine 20px alt bosluk birakip paneli 23px'te gosteriyordu;
   panelin ust kenarindaki boslukta fare panelden cikarsa hover kayboluyor.
   Boslugu kaldirip paneli dugmeye yapisik yapiyoruz. */
.global-header article .my {
	padding-bottom: 0
}

.global-header article .my .dropdown-toggle.nickname {
	cursor: pointer
}

/* --------------------------------------------------------------------------
   15b. style.css !important kuralari icin gecerli kilma
   --------------------------------------------------------------------------
   style.css su kurallari !important ile sabitliyor ve yukaridaki temiz
   panel gorunumunu eziyor:
     .global-header-container .dropdown-menu { border-radius: 0 !important;
                                               background: #2d2d2d !important }
     .my-contents                          { width: 198px !important }
     .global-header article .my .list li a { color: #949494 }
   Bootstrap 4.6'nin `.dropdown-item` taban stili de (color/padding) ayni
   sekilde eziliyor. Burada ayni alanlari daha yuksek oncelikle ve
   !important ile yeniden tanimliyoruz; panelin cam/gradyan gorunumu ve
   kontrastli link renkleri geri geliyor.
   -------------------------------------------------------------------------- */
.global-header article .my .dropdown-menu.show,
.global-header article .my ul.my-contents.show {
	width: 248px !important;
	border-radius: 8px !important;
	background: rgba(18, 21, 30, .97) !important;
	box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06) inset
}

.global-header article .my .my-contents .list li a,.global-header article .my .my-contents ul.list li a,
.global-header article .my .list li a,
.global-header article .my .list li a.dropdown-item {
	width: auto !important;
	padding: 10px 18px !important;
	color: #b9c1d1 !important;
	font-family: 'Open Sans', sans-serif !important;
	font-size: 13px;
	line-height: 20px
}

.global-header article .my .my-contents .list li a:hover,
.global-header article .my .list li a.dropdown-item:hover {
	background: rgba(255, 255, 255, .07) !important;
	color: #fff !important
}

.global-header article .my .my-contents .acp-coins {
	width: auto !important;
	padding: 9px 18px !important;
	color: #9aa4b8 !important
}

.global-header article .my .my-contents .acp-coins .coins {
	color: #ffd24a !important
}

/* --------------------------------------------------------------------------
   15c. padding-left !important catismasi
   --------------------------------------------------------------------------
   style.css icinde genel bir kural var:
     .list li a { padding-left: 15px !important }
   Bu kural .global-header article .my .list li a'dan DAHA DUSUK
   spesifikiteye sahip oldugu icin, ne kadar yuksek oncelikli bir kural
   yazsak da padding-left degerini her zaman geri aliyor. Bu yuzden
   padding'i dort kenar icin !important ile tam olarak sabitliyoruz.
   -------------------------------------------------------------------------- */
.global-header article .my .my-contents ul.list li a,
.global-header article .my .my-contents .list li a,
.global-header article .my .list li a {
	padding: 10px 18px !important
}

/* Hover'da tema 6px kayma + koyu arka plan uyguluyor. Panelin
   tasmasina izin vermeyip sadece renk/ikon hareketiyle geri bildirim
   veriyoruz - daha sakin ve okunabilir. */
.global-header article .my .my-contents ul.list li a:hover,
.global-header article .my .my-contents .list li a:hover,
.global-header article .my .list li a:hover {
	padding: 10px 18px !important;
	background: rgba(255, 255, 255, .07) !important;
	color: #fff !important
}

/* ==========================================================================
   16. Footer dil secici duzeltmesi
   --------------------------------------------------------------------------
   Tarayicida tespit edilen hata:
   .footer .language .list { position:absolute; bottom:25px }
   yani dil listesi YUKARI aciliyor (listenin alt kenarini dugmeye
   yapistirarak). Ancak .footer-content { overflow: hidden } oldugu icin
   footer sinirlari disina tasan liste kirpilIYOR - kullanici listenin
   ust yarisini goremiyor, dugme "ezilmis" gibi duruyor.

   Cozum:
     1) .footer-content uzerindeki overflow kaldirilir (icerik tasmasi
        icin gerek yok, tek kirpma kaynagi bu kuraldi)
     2) Liste yine yukari acar ama max-height + kaydirma ile
        uzun dil listelerinde tasmaz
     3) Panelin gorunumu temaya uyacak sekilde cam + vurgu
   ========================================================================== */

.footer-content {
	overflow: visible
}

.footer .language .list {
	width: 220px;
	right: 0;
	bottom: 34px;
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 8px;
	background: rgba(18, 21, 30, .98);
	box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .85);
	scrollbar-width: thin;
	scrollbar-color: rgba(215, 100, 64, .5) transparent
}

.footer .language .list::-webkit-scrollbar {
	width: 6px
}

.footer .language .list::-webkit-scrollbar-track {
	background: transparent
}

.footer .language .list::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: rgba(215, 100, 64, .5)
}

/* Liste ogeleri: kucuk ve okunabilir, dolgu kirpma yapmasin */
.footer .language .list a {
	display: flex;
	align-items: center;
	height: 34px;
	padding: 0 16px;
	color: #b9c1d1;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	transition: background .16s ease, color .16s ease
}

.footer .language .list li + li a {
	border-top: 1px solid rgba(255, 255, 255, .05)
}

.footer .language .list a:hover {
	background: rgba(255, 255, 255, .07);
	color: #fff
}

.footer .language .list a.unabailable,
.footer .language .list a.unabailable:hover {
	color: #4a5261;
	background: none
}

/* Secili dil isaretlenmis olsun */
.footer .language .list a.is-current {
	color: var(--wz-accent, #d76440);
	font-weight: 700
}

/* Dugmenin kendisi: 40px kutuya 40px metin, kirpma yok */
.footer .language .selected {
	display: flex;
	align-items: center;
	height: 40px;
	line-height: 1;
	white-space: nowrap
}

.footer .language .selected span {
	display: flex;
	align-items: center;
	height: 40px;
	line-height: 1
}

@media (prefers-reduced-motion: reduce) {
	.footer .language .list a {
		transition: none
	}
}

/* --------------------------------------------------------------------------
   16b. Dil secici: duzeltme (olcu sonrasi)
   --------------------------------------------------------------------------
   Tarayici olculeri uclu sorun gosterdi:
     1) Tema `.footer .language .list li a` (0,3,1) kullanıyor; bizim
        `.footer .language .list a` (0,2,1) daha DUSUK oldugu icin
        renk uygulanmiyordu. Seciciyi `li a` ile esitliyoruz.
     2) Dugme 20px yuvarlak (pill), liste ise 8px -> gorsel uyumsuz.
        Listenin ust koseleri dugmeyle birebir eslestyor.
     3) Liste `bottom:34px` idi ama dugme 40px -> 5px cakisma.
        Tam ustune oturacak sekilde 40px.
   -------------------------------------------------------------------------- */
.footer .language .list li a,
.footer .language .list li a:hover,
.footer .language .list li a.active {
	height: 34px;
	padding: 0 16px;
	color: #b9c1d1;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height: 1;
	text-transform: none;
	white-space: nowrap
}

.footer .language .list li a:hover,
.footer .language .list li a.active {
	padding-left: 16px;
	color: #fff;
	background: rgba(255, 255, 255, .07)
}

.footer .language .list li a.is-current,
.footer .language .list li a.is-current:hover {
	color: var(--wz-accent, #d76440);
	background: rgba(215, 100, 64, .1);
	font-weight: 700
}

.footer .language .list li a.unabailable,
.footer .language .list li a.unabailable:hover {
	color: #4a5261;
	background: none
}

/* Liste, dugmenin tam ustune otursun ve pill bicimiyle uyus */
.footer .language .list {
	bottom: 40px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px
}

/* Panel acildiginda dugmenin alt koseleri yuvarlak kalsin */
.footer .language.opened {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0
}

/* --------------------------------------------------------------------------
   16c. Panel acildiginda bicim
   --------------------------------------------------------------------------
   Dil listesi dugmenin USTUNDE aciliyor. Bu yuzden birlestirme
   noktasi: listenin alt kenari <-> dugmenin ust kenari.
     - listenin ALT koseleri dik (0)   : dugmeye yapisir
     - listenin UST koseleri yuvarlak : disa dogru yumusatir
     - dugmenin UST koseleri dik      : listeye yapisir
     - dugmenin ALT koseleri yuvarlak : disa dogru yumusatir
   Onceki kural alt koseleri de 0 yapiyordu; dugme kare dikdortgene
   donusuyordu.
   -------------------------------------------------------------------------- */
.footer .language .list {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0
}

.footer .language.opened {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px
}

/* ==========================================================================
   17. Footer duyarli (responsive) duzeltme
   --------------------------------------------------------------------------
   Tarayicida tespit edilen hata:
   style.css icindeki mobil media blogu (max-width:979px) taban sinifi
   olarak `.global-footer` kullaniyor, ama markup'ta sinif `.footer`:
       <footer id="footer" class="footer">
   Bu yuzden o blogun hicbir kurali UYGULANMIYOR. Sonuc:
     - .footer .language  { position:absolute; right:50%;
                            margin-right:-550px }  -> 1200px icinde
       sabit konumlanir, dar ekranda ekran disinda kalir
     - .footer .time      { position:absolute; margin-right:-450px }
       ayni sebepten tasar
   Asagida bu iki blogu dar ekranda akisa ceviriyoruz.
   ========================================================================== */

@media only screen and (max-width: 979px) {
	.footer-content {
		width: 100%;
		padding: 0 16px;
		box-sizing: border-box
	}

	/* --- dil secici --- */
	.footer .language {
		position: static;
		right: auto;
		top: auto;
		bottom: auto;
		margin: 0 auto;
		display: block;
		width: 100%;
		min-width: 0;
		text-align: center;
		padding: 10px 0
	}

	.footer .language .selected {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		min-width: 200px;
		height: 40px;
		line-height: 1
	}

	.footer .language .selected span {
		display: inline-flex;
		align-items: center;
		height: 40px;
		line-height: 1
	}

	/* Panel mobilde de YUKARI acilir; genisligi dugmeyle ayni tut */
	.footer .language .list {
		width: 100%;
		left: 0;
		right: 0;
		bottom: 46px;
		max-height: 60vh;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px
	}

	/* --- saat blogu --- */
	.footer .time {
		position: static;
		right: auto;
		bottom: auto;
		margin: 18px auto 0;
		width: 100%;
		text-align: center
	}

	.footer .time p {
		margin: 4px 0
	}

	/* --- menu ve kurumsal satir --- */
	.footer .footer-menu {
		width: 100%;
		padding: 14px 0;
		border-top: 1px solid rgba(255, 255, 255, .06)
	}

	.wz-fx-corporate {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 16px;
		padding: 14px 0;
		border-top: 1px solid rgba(255, 255, 255, .06)
	}

	.footer .copyright {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 16px 0
	}
}

@media only screen and (max-width: 600px) {
	.footer .language .list li a {
		height: 40px;   /* dokunma hedefi buyutuldu */
		font-size: 14px
	}
}