@charset "utf-8";
/* ==========================================================================
   DMN CMS - webzen_new theme :: Guide library FX
   The guide module keeps its own light shell (260px category rail).
   This layer gives it the same motion language as the main site without
   forcing the dark body treatment.
   ========================================================================== */

.wz-guides {
	--wzg-accent: #d76440;
	--wzg-accent-2: #ae3b17;
	--wzg-gold: #f0b357;
	--wzg-ink: #2a2f3a;
	--wzg-muted: #8b8f99;
	--wzg-line: rgba(20, 24, 34, .1);
	--wzg-radius: 10px;
	--wzg-ease: cubic-bezier(.22, .61, .36, 1);
	--wzg-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   01. Typography parity with the main site
   -------------------------------------------------------------------------- */
.wz-guides,
.wz-guides div,
.wz-guides p,
.wz-guides li,
.wz-guides h1,
.wz-guides h2,
.wz-guides h3 {
	font-family: 'Geometria', 'Segoe UI', 'Trebuchet MS', Tahoma, sans-serif;
	letter-spacing: .1px
}

/* --------------------------------------------------------------------------
   02. Ambient header wash (dark chrome over the light body)
   -------------------------------------------------------------------------- */
.wz-guides .header {
	position: relative;
	background:
		radial-gradient(60vw 40vw at 12% 0%, rgba(215, 100, 64, .16), transparent 62%),
		linear-gradient(180deg, #10141d, #070a10);
	box-shadow: 0 10px 34px -18px rgba(0, 0, 0, .75)
}

.wz-guides .header::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--wzg-accent), var(--wzg-gold), transparent)
}

.wz-guides .logo__link {
	display: inline-block;
	transition: transform .45s var(--wzg-ease), filter .45s
}

.wz-guides .logo__link:hover {
	transform: scale(1.05);
	filter: drop-shadow(0 0 12px rgba(215, 100, 64, .6))
}

.wz-guides .logo__text {
	color: rgba(255, 255, 255, .82) !important
}

/* --------------------------------------------------------------------------
   03. Category rail
   -------------------------------------------------------------------------- */
.wz-guides .gnb {
	background: #0d1119;
	border-right: 1px solid rgba(255, 255, 255, .06)
}

.wz-guides .nav__link {
	position: relative;
	transition: color .3s, padding-left .3s var(--wzg-ease), background .3s
}

.wz-guides .nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wzg-accent-2), var(--wzg-gold));
	transition: width .35s var(--wzg-ease)
}

.wz-guides .nav__link:hover,
.wz-guides .nav__link.current,
.wz-guides .nav__item:hover > .nav__link {
	color: #fff !important;
	padding-left: 6px
}

.wz-guides .nav__link:hover::after,
.wz-guides .nav__link.current::after {
	width: 100%
}

.wz-guides .sub-nav {
	border-left: 1px solid rgba(255, 255, 255, .08)
}

.wz-guides .sub-nav__link {
	display: block;
	position: relative;
	transition: color .28s, padding-left .28s var(--wzg-ease), background .28s
}

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

.wz-guides .sub-nav__link:hover,
.wz-guides .sub-nav__link.current {
	color: #fff !important;
	background: rgba(215, 100, 64, .12);
	padding-left: 22px
}

.wz-guides .sub-nav__link:hover::before,
.wz-guides .sub-nav__link.current::before {
	opacity: 1;
	transform: scale(1)
}

.wz-guides .direct__link {
	transition: color .3s, transform .3s var(--wzg-ease), box-shadow .3s;
	border-radius: 6px
}

.wz-guides .direct__link:hover,
.wz-guides .direct__link.current {
	color: #fff !important;
	transform: translateX(3px);
	box-shadow: 0 0 0 1px var(--wzg-accent) inset
}

/* --------------------------------------------------------------------------
   04. Bridge nav back into the site
   -------------------------------------------------------------------------- */
.wz-guides__bridge {
	position: fixed;
	left: 0;
	top: 0;
	width: 260px;
	/* nav.gnb 1000 ile ayni yeri paylasiyor; rayin USTUNDE olmali. */
	z-index: 1100;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	padding: 12px 16px;
	background: rgba(7, 10, 16, .97);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.wz-guides__bridge-label {
	width: 100%;
	font-size: 10px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #8b91a1;
	margin-bottom: 4px
}

.wz-guides__bridge a {
	display: inline-block;
	padding: 5px 9px;
	border-radius: 5px;
	font-size: 12px;
	color: rgba(255, 255, 255, .62);
	border: 1px solid transparent;
	transition: color .28s, background .28s, border-color .28s, transform .28s var(--wzg-ease)
}

.wz-guides__bridge a:hover {
	color: #fff;
	background: rgba(215, 100, 64, .16);
	border-color: rgba(215, 100, 64, .45);
	transform: translateY(-1px)
}

.wz-guides__bridge a.is-cta {
	color: var(--wzg-gold);
	border-color: rgba(240, 179, 87, .45)
}

.wz-guides__bridge a.is-cta:hover {
	color: #fff;
	background: rgba(215, 100, 64, .28);
	border-color: var(--wzg-accent)
}

/* Ray icerigini asagi it: bridge 148px + 12px pay. 96px yetersiz
   kaliyordu, ilk kategori satiri bridge altinda gizleniyordu. */
.wz-guides .header {
	margin-top: 160px
}
/* Asil kaynak bu: ui.min.css'teki .gnb__inner 96px ile asagi itiyordu
   (koprunun gercek yuksekligi 148px). Vendor dosyaya dokunmadan
   fx.css'ten gecersiz kiliyoruz. */
.wz-guides .gnb__inner {
	margin-top: 160px;
	height: calc(100vh - 170px)
}

/* --------------------------------------------------------------------------
   05. Content cards
   -------------------------------------------------------------------------- */
.wz-guides .main__cover,
.wz-guides .main-slide__item,
.wz-guides .article,
.wz-guides .view {
	border-radius: var(--wzg-radius);
	overflow: hidden
}

.wz-guides .main-slide__item {
	transition: transform .45s var(--wzg-ease), box-shadow .45s
}

.wz-guides .main-slide__link {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--wzg-radius)
}

.wz-guides .main-slide__img {
	display: block;
	transition: transform .7s var(--wzg-ease-out)
}

.wz-guides .main-slide__link::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .18) 50%, transparent 62%);
	transform: translateX(-110%);
	pointer-events: none
}

.wz-guides .main-slide__item:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 56px -24px rgba(15, 18, 26, .7)
}

.wz-guides .main-slide__item:hover .main-slide__img {
	transform: scale(1.07)
}

.wz-guides .main-slide__item:hover .main-slide__link::after {
	animation: wzg-shine .95s var(--wzg-ease) forwards
}

@keyframes wzg-shine {
	to {
		transform: translateX(110%)
	}
}

.wz-guides .main-slide__text {
	transition: color .3s
}

.wz-guides .main-slide__item:hover .main-slide__text {
	color: var(--wzg-accent) !important
}

.wz-guides .main__title {
	position: relative;
	display: inline-block
}

.wz-guides .main__title::after {
	content: '';
	display: block;
	width: 44px;
	height: 3px;
	margin-top: 10px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--wzg-accent), var(--wzg-gold))
}

.wz-guides .view__category {
	font-size: 30px;
	color: var(--wzg-ink) !important
}

.wz-guides .fr-view {
	line-height: 180%;
	color: #3d434f
}

.wz-guides .fr-view a {
	color: var(--wzg-accent-2);
	transition: color .25s
}

.wz-guides .fr-view a:hover {
	color: var(--wzg-accent)
}

.wz-guides .fr-view h2,
.wz-guides .fr-view h3 {
	margin: 22px 0 10px;
	color: var(--wzg-ink)
}

.wz-guides .fr-view img {
	max-width: 100%;
	height: auto;
	border-radius: 6px
}

.wz-guides .fr-view table {
	width: 100%;
	margin: 14px 0;
	border-collapse: collapse
}

.wz-guides .fr-view table td,
.wz-guides .fr-view table th {
	border: 1px solid var(--wzg-line);
	padding: 8px 10px
}

.wz-guides .view__btn-guide {
	display: inline-block;
	color: var(--wzg-muted) !important;
	border: 1px solid var(--wzg-line);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 13px;
	transition: color .3s, border-color .3s, transform .3s var(--wzg-ease)
}

.wz-guides .view__btn-guide:hover {
	color: var(--wzg-accent) !important;
	border-color: var(--wzg-accent);
	transform: translateY(-2px)
}

/* --------------------------------------------------------------------------
   06. Footer
   -------------------------------------------------------------------------- */
.wz-guides .footer {
	background: #070a10;
	border-top: 1px solid rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .5)
}

.wz-guides .footer::before {
	content: '';
	display: block;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wzg-accent), var(--wzg-gold), transparent)
}

.wz-guides .footer__copyright {
	color: rgba(255, 255, 255, .45) !important
}

/* --------------------------------------------------------------------------
   07. Scroll reveal
   -------------------------------------------------------------------------- */
.wz-fx-ready [data-wz-reveal] {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition: opacity .7s var(--wzg-ease-out), transform .7s var(--wzg-ease-out)
}

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

.wz-guides .main-slide__item[data-wz-reveal="zoom"] {
	transform: scale(.95)
}

.wz-guides .main-slide__item[data-wz-reveal="zoom"].is-in {
	transform: none
}

.wz-guides .footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
	padding: 26px 20px 10px
}

.wz-guides .footer-menu a {
	position: relative;
	font-size: 14px;
	color: rgba(255, 255, 255, .55) !important;
	transition: color .3s
}

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

.wz-guides .footer-menu a:hover {
	color: #fff !important
}

.wz-guides .footer-menu a:hover::after {
	width: 100%
}

.wz-guides__corp {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 18px;
	padding-bottom: 18px
}

.wz-guides__corp a {
	font-size: 12px;
	color: #aeb4c2 !important;
	transition: color .3s
}

.wz-guides__corp a:hover {
	color: var(--wzg-accent) !important
}

.wz-guides .footer__copyright {
	padding-bottom: 26px;
	text-align: center
}

.wz-guides .footer {
	padding-bottom: 0;
	text-align: center
}

/* --------------------------------------------------------------------------
   08. Reduced motion
   -------------------------------------------------------------------------- */
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

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

	.wz-guides .main-slide__link::after {
		display: none
	}
}

/* --------------------------------------------------------------------------
   09. Narrow screens - the rail becomes a horizontal bar
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1000px) {
	.wz-guides #wrap {
		min-width: 0;
		padding-left: 0
	}

	.wz-guides .header,
	.wz-guides .gnb {
		position: static
	}

	.wz-guides__bridge {
		position: static;
		width: 100%
	}

	.wz-guides .header {
		margin-top: 0
	}
}