/* Kalistack — "Hosting Kali Paketleri" (khp-)
 *
 * Solda isteğe bağlı tanıtım paneli, sağda 2–4 paket sütunu.
 * Sütun sayısı .khp-duzen--sN sınıfıyla gelir; dar ekranda liste
 * kendiliğinden tek sütuna iner ve tanıtım paneli en üste geçer.
 *
 * Tanıtım panelindeki yazıların rengi ve tipografisi Elementor'dan
 * ayarlanır; buradaki değerler yalnızca varsayılan. Panelin efektleri
 * .khp-promo--* sınıflarıyla, kenardan çıkan oklar .khp-info ile gelir.
 */

.khp-kap { background: #F2F4F8; }

.khp {
	--khp-vurgu: #F97316;
	--khp-vurgu-koyu: #EA580C;
	--khp-vurgu-acik: #FFF4EC;
	--khp-ink: #0F1A3C;
	--khp-sus: #6B7280;
	--khp-cizgi: #E7EAF1;
	--khp-yzy: #FFFFFF;
	--khp-koyu: #1E1626;
	max-width: 1240px;
	margin: 0 auto;
}

/* ------------------------------------------------------------- tepe */
.khp-tepe { margin-bottom: 34px; text-align: center; }
.khp-bas {
	margin: 0 0 8px;
	font-size: 27px; line-height: 1.25; font-weight: 800;
	letter-spacing: -.01em; color: var(--khp-ink);
}
.khp-ack { margin: 0; font-size: 15px; line-height: 1.6; color: var(--khp-sus); }

.khp-altnot {
	margin: 26px auto 0; max-width: 820px;
	font-size: 12.5px; line-height: 1.7; color: var(--khp-sus);
	text-align: center;
}

/* ------------------------------------------------------------ düzen */
.khp-duzen { display: grid; gap: 20px; align-items: stretch; }
.khp-duzen--promosol { grid-template-columns: minmax(0, var(--khp-panel-en, 300px)) minmax(0, 1fr); }
.khp-duzen--promosag { grid-template-columns: minmax(0, 1fr) minmax(0, var(--khp-panel-en, 300px)); }
.khp-duzen--promoiki {
	grid-template-columns: minmax(0, var(--khp-panel-en, 260px)) minmax(0, 1fr) minmax(0, var(--khp-panel-en, 260px));
}

.khp-paketler {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	gap: 20px;
}
.khp-duzen--s2 .khp-paketler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.khp-duzen--s3 .khp-paketler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.khp-duzen--s4 .khp-paketler { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------------------------------------------- tanıtım paneli */
.khp-promo {
	--khp-bag-hover: #FFFFFF;
	position: relative;
	display: flex; flex-direction: column;
	overflow: hidden;
	border-radius: 14px;
	background: var(--khp-koyu);
	color: #fff;
	transition: transform .25s ease, box-shadow .25s ease;
}
.khp-promogorsel { position: relative; display: block; }
.khp-promogorsel img {
	display: block; width: 100%; height: auto;
	transition: transform .45s ease;
}
.khp-promoserit {
	display: block; padding: 12px 20px;
	background: var(--khp-vurgu);
	font-size: 13px; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: #fff;
	text-align: center;
}
.khp-promoalt {
	display: flex; flex-direction: column; gap: 10px;
	flex: 1 1 auto;
	padding: 22px 22px 24px;
}
.khp-promobas { font-size: 21px; font-weight: 800; line-height: 1.25; color: #fff; }
.khp-promometin { font-size: 15px; line-height: 1.55; font-weight: 700; color: #E9E4EE; }
.khp-promobag {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13.5px; font-weight: 700; color: var(--khp-vurgu);
	text-decoration: none;
	transition: color .18s ease;
}
.khp-promobag::before {
	content: '';
	width: 13px; height: 13px;
	border: 1.5px solid currentColor; border-radius: 3px;
	border-top-right-radius: 0;
	flex: 0 0 auto;
}
.khp-promobag:hover { color: var(--khp-bag-hover); }

/* ------------------------------------------- panel efektleri */
.khp-promo--yukselt:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(15, 26, 60, .22);
}
.khp-promo--yakinlas .khp-promogorsel { overflow: hidden; }
.khp-promo--yakinlas:hover .khp-promogorsel img { transform: scale(1.07); }

.khp-promo--parlama::after {
	/* Panelin üzerinden geçen ışık şeridi. */
	content: '';
	position: absolute; top: 0; bottom: 0; left: -60%;
	width: 45%;
	background: linear-gradient( 100deg, transparent 0%, rgba(255, 255, 255, .16) 50%, transparent 100% );
	transform: skewX(-14deg);
	pointer-events: none;
	animation: khp-parla 4.2s ease-in-out infinite;
}
@keyframes khp-parla {
	0%   { left: -60%; }
	55%  { left: 120%; }
	100% { left: 120%; }
}

.khp-promo--nefes .khp-promoserit { animation: khp-nefes 2.6s ease-in-out infinite; }
@keyframes khp-nefes {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.16); }
}

/* ------------------------------- kenardan çıkan bilgi etiketleri */
.khp-infolar {
	position: absolute; inset: 0;
	display: block;
	pointer-events: none;
}
.khp-info {
	--khp-ok-en: 26px;
	--khp-ok-sure: 1.4s;
	--khp-ok-renk: #FFFFFF;
	display: flex; align-items: center; gap: 8px;
	max-width: calc(100% - 20px);
}
.khp-infolar .khp-info { position: absolute; }
.khp-infolar .khp-info--sol { left: 10px; }
.khp-infolar .khp-info--sag { right: 10px; flex-direction: row-reverse; }

.khp-ok {
	position: relative; flex: 0 0 auto;
	width: var(--khp-ok-en); height: 2px;
	background: var(--khp-ok-renk);
	border-radius: 2px;
}
.khp-ok::after {
	content: '';
	position: absolute; right: 0; top: 50%;
	width: 8px; height: 8px;
	border-top: 2px solid var(--khp-ok-renk);
	border-right: 2px solid var(--khp-ok-renk);
	transform: translateY(-50%) rotate(45deg);
	transform-origin: center;
}
.khp-info--sag .khp-ok { transform: scaleX(-1); }

.khp-promo--okhareket .khp-info--sol .khp-ok { animation: khp-ok-sag var(--khp-ok-sure) ease-in-out infinite; }
.khp-promo--okhareket .khp-info--sag .khp-ok { animation: khp-ok-sol var(--khp-ok-sure) ease-in-out infinite; }
@keyframes khp-ok-sag {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(6px); }
}
@keyframes khp-ok-sol {
	0%, 100% { transform: scaleX(-1) translateX(0); }
	50%      { transform: scaleX(-1) translateX(6px); }
}

.khp-imetin {
	display: inline-flex; align-items: center; gap: 6px;
	min-width: 0;
	padding: 6px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .95);
	color: #1E1626;
	font-size: 11.5px; font-weight: 700; line-height: 1.35;
	box-shadow: 0 3px 10px rgba(15, 26, 60, .2);
}
.khp-iikon { display: inline-flex; font-size: 11px; color: var(--khp-vurgu); }
.khp-iikon svg { width: 11px; height: 11px; fill: currentColor; }

/* Görsel yokken etiketler panelin içinde düz liste olur. */
.khp-infoliste {
	display: flex; flex-direction: column; gap: 9px;
	margin: 4px 0 2px;
}
.khp-infoliste .khp-info--sag { flex-direction: row; }
.khp-infoliste .khp-imetin { background: rgba(255, 255, 255, .12); color: #F5F1F8; box-shadow: none; }

/* ----------------------------------------------------------- paket */
.khp-paket {
	position: relative;
	display: flex; flex-direction: column;
	min-width: 0;
	border: 1px solid var(--khp-cizgi);
	border-radius: 12px;
	background: var(--khp-yzy);
	overflow: hidden;
}
.khp-paket--one { border-color: var(--khp-vurgu); box-shadow: 0 8px 26px rgba(249, 115, 22, .12); }
.khp-onerozet {
	display: block; padding: 7px 16px;
	background: var(--khp-vurgu);
	font-size: 11px; font-weight: 800; line-height: 1.45;
	letter-spacing: .1em; text-transform: uppercase; color: #fff;
	text-align: center;
	/* Uzun bir etiket iki satıra inip kartı kaydırmasın. */
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Öne çıkarma kullanılan blokta diğer kartlara ayrılan görünmez şerit:
 * aynı kutu, aynı yükseklik, görünmeyen içerik. */
.khp-onerozet--bos { background: transparent; color: transparent; }

.khp-pbas { padding: 22px 22px 18px; }
.khp-pikon {
	display: grid; place-items: center;
	width: 40px; height: 40px; margin-bottom: 16px;
	border-radius: 9px;
	background: var(--khp-vurgu-acik);
	color: var(--khp-vurgu);
	font-size: 17px;
}
.khp-pikon svg { width: 18px; height: 18px; fill: currentColor; }
.khp-pkime { display: block; margin-bottom: 4px; font-size: 14px; color: var(--khp-sus); }
.khp-pad { display: block; font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--khp-ink); }

.khp-pfiyat {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; column-gap: 10px; row-gap: 8px;
	padding: 14px 18px;
	border-top: 1px solid var(--khp-cizgi);
	border-bottom: 1px solid var(--khp-cizgi);
	background: var(--khp-vurgu-acik);
}
.khp-fsol { min-width: 0; }
.khp-eski,
.khp-yeni { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.khp-eski { font-size: 12px; color: #9AA1AE; }
.khp-eski s { text-decoration: line-through; }
.khp-yeni { margin-top: 2px; color: var(--khp-vurgu); }
.khp-yeni strong { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.khp-donem { font-size: 12px; font-weight: 600; }
.khp-indirim {
	flex: 0 0 auto;
	/* 20px, rozetin yüksekliğinde tam hap şekli demek; panelden 0'a kadar
	 * indirilebiliyor. Kaydırıcı bu yüzden 0–40 aralığında. */
	padding: 5px 9px; border-radius: 20px;
	background: var(--khp-yzy);
	/* Çerçeve vurgu rengiyle tam güçte: soluk bir çizgi yerine net bir kenar.
	 * currentColor kullanıldığı için vurgu rengini değiştirince kenar da uyar. */
	border: 1px solid currentColor;
	font-size: 10.5px; font-weight: 800; color: var(--khp-vurgu);
	white-space: nowrap;
}

.khp-ozellikler {
	list-style: none; margin: 0; padding: 20px 22px;
	display: flex; flex-direction: column; gap: 11px;
}
.khp-ozellikler li {
	display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px;
	font-size: 14px; line-height: 1.45; color: var(--khp-sus);
}
.khp-tik {
	flex: 0 0 auto;
	position: relative;
	width: 16px; height: 16px; margin-top: 2px;
	border: 1.5px solid var(--khp-vurgu); border-radius: 50%;
}
.khp-tik::after {
	content: '';
	position: absolute; left: 4px; top: 3px;
	width: 4px; height: 7px;
	border: solid var(--khp-vurgu); border-width: 0 1.5px 1.5px 0;
	transform: rotate(42deg);
}
.khp-oad { color: var(--khp-sus); }
.khp-odeger { font-weight: 700; color: var(--khp-ink); }

.khp-rozetler {
	list-style: none; margin: 0 22px; padding: 0 0 18px;
	display: flex; flex-wrap: wrap; gap: 10px;
}
.khp-rozetler li {
	flex: 1 1 0; min-width: 88px;
	padding: 11px 10px;
	border: 1px solid var(--khp-cizgi); border-radius: 8px;
	font-size: 12.5px; font-weight: 700; font-style: italic;
	color: #A6ADBB; text-align: center;
}

.khp-btn {
	display: block; margin: auto 22px 22px;
	padding: 14px 18px; border-radius: 8px;
	background: var(--khp-vurgu); color: #fff;
	font-size: 14.5px; font-weight: 700; text-align: center; text-decoration: none;
	transition: background-color .16s ease;
}
.khp-btn:hover { background: var(--khp-vurgu-koyu); color: #fff; }

/* --------------------------------------------------------- duyarlı */
@media ( max-width: 1180px ) {
	.khp-duzen--promosol { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
	.khp-duzen--promosag { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); }
	.khp-duzen--promoiki { grid-template-columns: minmax(0, 210px) minmax(0, 1fr) minmax(0, 210px); }
	.khp-duzen--s4 .khp-paketler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media ( max-width: 1024px ) {
	.khp-duzen--promo,
	.khp-duzen--promosol,
	.khp-duzen--promosag,
	.khp-duzen--promoiki { grid-template-columns: minmax(0, 1fr); }
	.khp-promo { flex-direction: row; align-items: stretch; }
	.khp-promogorsel { flex: 0 0 38%; }
	.khp-promogorsel img { height: 100%; object-fit: cover; }
	.khp-promoserit { display: none; }
	.khp-promoalt { flex: 1 1 auto; justify-content: center; }
	.khp-duzen--s3 .khp-paketler,
	.khp-duzen--s4 .khp-paketler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.khp-bas { font-size: 24px; }
}

@media ( max-width: 720px ) {
	.khp-promo { flex-direction: column; }
	.khp-promogorsel { flex: 0 0 auto; }
	.khp-promogorsel img { height: auto; }
	.khp-promoserit { display: block; }
	.khp-duzen--s2 .khp-paketler,
	.khp-duzen--s3 .khp-paketler,
	.khp-duzen--s4 .khp-paketler { grid-template-columns: minmax(0, 1fr); }
	.khp-bas { font-size: 21px; }
	.khp-pad { font-size: 18px; }
	/* Kartlar alt alta indiğinde hizalanacak bir şey kalmıyor;
	 * ayrılan boş şerit yalnızca boşluk yaratır. */
	.khp-onerozet--bos { display: none; }
	.khp-info { --khp-ok-en: 16px; }
	.khp-imetin { font-size: 11px; padding: 5px 10px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.khp-btn,
	.khp-promo,
	.khp-promobag,
	.khp-promogorsel img { transition: none; }
	.khp-promo--yukselt:hover { transform: none; }
	.khp-promo--yakinlas:hover .khp-promogorsel img { transform: none; }
	.khp-promo--parlama::after { animation: none; display: none; }
	.khp-promo--nefes .khp-promoserit { animation: none; }
	.khp-promo--okhareket .khp-info--sol .khp-ok,
	.khp-promo--okhareket .khp-info--sag .khp-ok { animation: none; }
}