/* =========================================================================
   Gökalpler Slider – frontend
   Orijinal Revolution Slider modülünün kırılımları:
   responsiveLevels: 1240 / 1024 / 778 / 480
   gridwidth:        1200 / 970  / 750 / 480
   gridheight:       700  / 760  / 500 / 500
   ========================================================================= */

.gks-slider,
.gks-slider * {
	box-sizing: border-box;
}

.gks-slider {
	position: relative;
	width: 100%;
	height: 700px;
	overflow: hidden;
	background-color: #db061f;
}

.gks-slides {
	position: absolute;
	inset: 0;
}

/* ---- Slaytlar (fade geçiş) ---------------------------------------- */
.gks-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease, visibility 0s linear .8s;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 1;
}

.gks-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .8s ease;
	z-index: 2;
}

/* ---- İç ızgara ------------------------------------------------------ */
.gks-grid {
	position: relative;
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

/* ---- Katman animasyonu (maskeli yukarı kayma) ----------------------- */
.gks-layer {
	opacity: 0;
}

.gks-badge,
.gks-title,
.gks-btnwrap {
	overflow: hidden; /* maske */
}

.gks-badge span,
.gks-title span,
.gks-btnwrap .gks-btn {
	display: inline-block;
	transform: translateY(60px);
}

.gks-slide.is-animated .gks-layer {
	opacity: 1;
}

.gks-slide.is-animated .gks-badge span,
.gks-slide.is-animated .gks-title span,
.gks-slide.is-animated .gks-btnwrap .gks-btn {
	transform: translateY(0);
}

.gks-slide.is-animated .gks-badge       { transition: opacity .1s linear 1s; }
.gks-slide.is-animated .gks-badge span  { transition: transform .7s cubic-bezier(.19,1,.22,1) 1s; }

.gks-slide.is-animated .gks-title       { transition: opacity .1s linear 1.5s; }
.gks-slide.is-animated .gks-title span  { transition: transform .7s cubic-bezier(.77,0,.175,1) 1.5s; }

.gks-slide.is-animated .gks-desc        { transition: opacity .7s ease 2.01s; }

.gks-slide.is-animated .gks-image       { transition: opacity .8s ease 2.27s; }

.gks-slide.is-animated .gks-btnwrap          { transition: opacity .1s linear 2.5s; }
.gks-slide.is-animated .gks-btnwrap .gks-btn { transition: transform .7s cubic-bezier(.77,0,.175,1) 2.5s,
                                                          background-color .2s ease, color .2s ease, border-color .2s ease; }

@media (prefers-reduced-motion: reduce) {
	.gks-slide,
	.gks-slide.is-animated .gks-layer,
	.gks-slide.is-animated .gks-badge span,
	.gks-slide.is-animated .gks-title span,
	.gks-slide.is-animated .gks-btnwrap .gks-btn {
		transition: none !important;
		transform: none !important;
	}
	.gks-layer { opacity: 1; }
}

/* ---- Tipografi ------------------------------------------------------- */
.gks-badge {
	position: absolute;
	left: 15px;
	top: 165px;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: 800;
	color: #fff;
	letter-spacing: 0;
}

.gks-title {
	position: absolute;
	left: 13px;
	top: 205px;
	width: 701px;
	margin: 0;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 50px;
	line-height: 60px;
	font-weight: 800;
	color: #fff;
	text-align: left;
}

.gks-desc {
	position: absolute;
	left: 16px;
	top: 340px;
	width: 570px;
	margin: 0;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 20px;
	line-height: 25px;
	font-weight: 400;
	color: #fff;
	text-align: left;
}

.gks-btnwrap {
	position: absolute;
	left: 15px;
	top: 434px;
}

.gks-btn {
	display: inline-block;
	padding: 13px 38px;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 12px;
	line-height: 24px;
	font-weight: 800;
	letter-spacing: 0;
	color: #ff3a2d;
	background-color: #ffffff;
	border: 2px solid #ffffff;
	border-radius: 0;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.gks-btn:hover,
.gks-btn:focus {
	color: #fff;
	background-color: #373737;
	border-color: #000;
	text-decoration: none;
}

.gks-image {
	position: absolute;
	left: 614px;
	top: 173px;
	width: 555px;
}

.gks-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Oklar (masaüstü, sadece hover'da görünür) ----------------------- */
.gks-arrow {
	position: absolute;
	top: 50%;
	margin-top: -40px; /* orijinaldeki v_offset:-20 hissi */
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, .5);
	cursor: pointer;
	z-index: 10;
	opacity: 0;
	transition: opacity .3s ease, background .3s ease;
}

.gks-slider:hover .gks-arrow { opacity: 1; }
.gks-arrow:hover              { background: #000; }

.gks-prev { left: 20px; }
.gks-next { right: 20px; }

.gks-arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

.gks-prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.gks-next::before { transform: translate(-70%, -50%) rotate(225deg); }

/* ---- Noktalar (ares stili – yalnızca 768px altında) ------------------ */
.gks-bullets {
	position: absolute;
	left: 50%;
	bottom: 25px;
	transform: translateX(-50%);
	display: none;
	gap: 10px;
	z-index: 10;
}

.gks-bullet {
	width: 13px;
	height: 13px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #e5e5e5;
	cursor: pointer;
	transition: background .2s ease;
}

.gks-bullet:hover,
.gks-bullet.is-active {
	background: #ffffff;
}

/* =========================================================================
   1024px – 1239px  (grid 970, yükseklik 760, ortalanmış düzen)
   ========================================================================= */
@media (max-width: 1239px) {
	.gks-slider { height: 760px; }

	.gks-grid {
		max-width: 970px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.gks-badge,
	.gks-title,
	.gks-desc,
	.gks-btnwrap,
	.gks-image {
		position: static;
		left: auto;
		top: auto;
		text-align: center;
	}

	.gks-badge  { margin-top: 25px; font-size: 15px; line-height: 50px; }
	.gks-title  { width: auto; max-width: 900px; font-size: 42px; line-height: 50px; }
	.gks-desc   { width: 460px; max-width: 100%; margin-top: 60px; font-size: 16px; line-height: 20px; }
	.gks-image  { width: 390px; max-width: 100%; margin-top: 45px; }
	.gks-btnwrap{ margin-top: 20px; }
}

/* =========================================================================
   778px – 1023px  (grid 750, yükseklik 500)
   ========================================================================= */
@media (max-width: 1023px) {
	.gks-slider { height: 500px; }

	.gks-grid { max-width: 750px; }

	.gks-badge  { margin-top: 25px; font-size: 13px; line-height: 24px; }
	.gks-title  { max-width: 539px; font-size: 40px; line-height: 42px; }
	.gks-desc   { width: 492px; margin-top: 20px; font-size: 14px; line-height: 24px; font-weight: 600; }
	.gks-image  { width: 283px; margin-top: 15px; }
	.gks-btnwrap{ margin-top: 12px; }
	.gks-btn    { padding: 10px 30px; }
}

/* Oklar 767px ve altında gizli (orijinal: hide_under 767) */
@media (max-width: 767px) {
	.gks-arrow   { display: none; }
	.gks-bullets { display: flex; } /* orijinal: bullets hide_over 768 */
}

/* =========================================================================
   <= 777px  (grid 480, yükseklik 500)
   ========================================================================= */
@media (max-width: 777px) {
	.gks-grid { max-width: 480px; }

	.gks-badge  { margin-top: 19px; font-size: 12px; line-height: 20px; }
	.gks-title  { max-width: 403px; font-size: 30px; line-height: 36px; }
	.gks-desc   { width: 314px; margin-top: 20px; font-size: 14px; line-height: 16px; font-weight: 600; }
	.gks-image  { width: 288px; margin-top: 15px; }
	.gks-btnwrap{ margin-top: 14px; }
	.gks-btn    { padding: 6px 18px; font-size: 10px; line-height: 22px; font-weight: 700; }
}