/* Kalistack — Yatay Hosting Secim (ksb-yatay)
 * Solda gorsel, sagda alt alta yatay paket satirlari.
 * Hover golgesi yok; sayfa genelindeki kararla ayni. */

.ksy-kap { background: #F4F7FB; }

.ksy {
	--ksy-vurgu: #f5821f;
	--ksy-oz: 5;
	/* Duragan renkler degisken: "one cikan" satir fareyle tasindiginda
	   isaretli satirin normale donebilmesi icin gerekli. */
	--ksy-satir-kenar: #EDF1F6;
	--ksy-ikon-bg: #F1F5F9;
	--ksy-ikon-renk: #7A8C9C;
	max-width: 1320px; margin: 0 auto;
}

/* ---------------- Tepe ---------------- */
.ksy-tepe { text-align: center; margin-bottom: 26px; }
.ksy-bas { margin: 0 0 8px; font-size: 27px; line-height: 1.28; font-weight: 800; color: #0F2440; }
.ksy-ack { margin: 0 auto; max-width: 760px; font-size: 15px; line-height: 1.6; color: #5A6B7B; }

/* ---------------- Govde ---------------- */
.ksy-govde {
	display: grid;
	grid-template-columns: var(--ksy-kutu-en, 400px) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
.ksy-govde--gorselsiz { grid-template-columns: minmax(0, 1fr); }
.ksy-govde--sagda { direction: rtl; }
.ksy-govde--sagda > * { direction: ltr; }

/* Alttaki kare: gorselin oturdugu kutu. Boyutu gorselden bagimsiz. */
.ksy-medya {
	position: relative;
	align-self: stretch;
	min-height: 300px;
	border-radius: 12px;
	background-color: #12071F;
	overflow: hidden;
}
/* Tasma acikken kutu kirpmayi birakir, gorsel disari cikabilir. */
.ksy-medya--tasma { overflow: visible; z-index: 2; }

/* Gorsel katmani: kutunun uzerinde ayri katman. */
.ksy-gorsel {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	display: block;
	border-radius: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-decoration: none;
	transform: translate(var(--ksy-gx, 0px), var(--ksy-gy, 0px)) scale(var(--ksy-golcek, 1));
}
.ksy-medya--tasma .ksy-gorsel { border-radius: 0; }

/* ---------------- Liste ---------------- */
.ksy-liste { display: flex; flex-direction: column; gap: 12px; }

.ksy-satir {
	position: relative;
	display: grid;
	/* Kimlik | ozellikler | fiyat. Ortadaki sutun genis kalir ki
	   ozellik sutunlari esit bolunsun. */
	grid-template-columns: minmax(118px, 1.05fr) minmax(0, 4fr) minmax(116px, 1fr);
	align-items: center;
	gap: 10px;
	min-height: 76px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--ksy-satir-kenar);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color .18s ease;
}

/* ---------------- Satir kenarinda dolasan cizgi ----------------
   SVG satirla birlikte olceklenir; genislik/yukseklik yuzde verildigi
   icin JS gerekmez. Cizgi yalnizca fare uzerindeyken gorunur. */
.ksy-cizgi {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%; height: 100%;
	overflow: visible;
	pointer-events: none;
	border-radius: inherit;
}
.ksy-cizgi rect {
	fill: none;
	stroke: var(--ksy-vurgu);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 10 8;
	opacity: 0;
	transition: opacity .2s ease;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}
.ksy--desen-nokta .ksy-cizgi rect { stroke-dasharray: 1 7; }
.ksy--desen-uzun  .ksy-cizgi rect { stroke-dasharray: 20 12; }

.ksy-satir:hover .ksy-cizgi rect {
	opacity: 1;
	animation-name: ksy-yuru;
	animation-play-state: running;
}
.ksy--geri .ksy-satir:hover .ksy-cizgi rect { animation-direction: reverse; }

@keyframes ksy-yuru { to { stroke-dashoffset: -72; } }

/* ---------------- One cikan satir ----------------
   Isaretli satir varsayilan olarak one cikar. "Fareyle tasinsin"
   acikken liste uzerine gelindiginde one cikma farenin bulundugu
   satira gecer, isaretli satir sade gorunume doner. */
.ksy-satir--one,
.ksy--one-hover .ksy-liste:hover .ksy-satir:hover {
	border-style: dashed;
	border-color: var(--ksy-vurgu);
}
.ksy-satir--one .ksy-ikon,
.ksy--one-hover .ksy-liste:hover .ksy-satir:hover .ksy-ikon {
	background: var(--ksy-vurgu);
	color: #fff;
}

/* Fare baska bir satirdayken isaretli satir sadelesir. */
.ksy--one-hover .ksy-liste:hover .ksy-satir--one:not(:hover) {
	border-style: solid;
	border-color: var(--ksy-satir-kenar);
}
.ksy--one-hover .ksy-liste:hover .ksy-satir--one:not(:hover) .ksy-ikon {
	background: var(--ksy-ikon-bg);
	color: var(--ksy-ikon-renk);
}

/* Fareyle tasima kapaliyken baglantili satirda yine de ipucu kalsin. */
.ksy:not(.ksy--one-hover) a.ksy-satir:hover { border-color: var(--ksy-vurgu); }

/* Rozet: satirin sag ust kosesinde, kenara oturur */
.ksy-rozet {
	position: absolute;
	top: 0; right: 14px;
	transform: translateY(-50%);
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--ksy-vurgu); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 1.5;
	white-space: nowrap;
}

/* ---------------- Kimlik ---------------- */
.ksy-kimlik { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ksy-ikon {
	flex: 0 0 auto;
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 9px;
	background: var(--ksy-ikon-bg); color: var(--ksy-ikon-renk);
	font-size: 16px;
	transition: background-color .18s ease, color .18s ease;
}
.ksy-ikon svg { width: 16px; height: 16px; fill: currentColor; }
.ksy-ad { font-size: 16px; font-weight: 700; color: #0F2440; }

/* ---------------- Ozellik sutunlari ---------------- */
.ksy-ozellikler {
	display: grid;
	grid-template-columns: repeat(var(--ksy-oz, 5), minmax(0, 1fr));
	align-items: center;
	min-width: 0;
}
.ksy-oz {
	display: flex; flex-direction: column; gap: 2px;
	padding: 2px 12px;
	min-width: 0;
}
/* Ayrac yalnizca sutunlarin arasinda */
.ksy-oz + .ksy-oz { border-left: 1px solid #E6ECF3; }

.ksy-deger { font-size: 14px; font-weight: 700; color: #0F2440; line-height: 1.3; }
.ksy-etiket { font-size: 12px; color: #7A8C9C; line-height: 1.3; }

/* ---------------- Fiyat ---------------- */
.ksy-fiyatlar {
	display: flex; flex-direction: column;
	align-items: flex-end; gap: 1px;
	text-align: right;
	padding-left: 12px;
	border-left: 1px solid #E6ECF3;
}
.ksy-eski {
	font-size: 13px; color: #9AA9B8;
	text-decoration: line-through;
}
.ksy-fiyat {
	font-size: 17px; font-weight: 800; color: var(--ksy-vurgu);
	white-space: nowrap;
}
.ksy-fnot { font-size: 12px; font-weight: 600; margin-left: 2px; }

/* ---------------- Duyarli ---------------- */
@media ( max-width: 1180px ) {
	.ksy-govde { grid-template-columns: minmax(0, 1fr); }
	.ksy-medya { min-height: 220px; }
	/* Dar ekranda tasma yatay kaydirma yaratmasin. */
	.ksy-medya--tasma { overflow: hidden; }
	.ksy-medya--tasma .ksy-gorsel {
		top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
		transform: none !important;
		border-radius: inherit;
	}
}

/* Hareketi azalt tercihi: cizgi gorunur ama donmez. */
@media ( prefers-reduced-motion: reduce ) {
	.ksy-satir:hover .ksy-cizgi rect { animation: none; opacity: 1; }
}

@media ( max-width: 900px ) {
	/* Satir iki kata iner: ustte kimlik + fiyat, altta ozellikler. */
	.ksy-satir {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 12px;
		padding-top: 18px;
	}
	.ksy-ozellikler {
		grid-column: 1 / -1;
		grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
		row-gap: 10px;
		border-top: 1px solid #EDF1F6;
		padding-top: 12px;
	}
	.ksy-oz { padding-left: 0; }
	.ksy-oz + .ksy-oz { border-left: 0; }
	.ksy-fiyatlar { border-left: 0; padding-left: 0; }
}

@media ( max-width: 520px ) {
	.ksy-bas { font-size: 22px; }
	.ksy-satir { grid-template-columns: minmax(0, 1fr); }
	.ksy-fiyatlar { align-items: flex-start; text-align: left; }
	.ksy-rozet { right: auto; left: 18px; }
}