/**
 * Panel bannerları — ortak tasarım.
 *
 * Tek kaynak: WordPress eklentisindeki assets/panel-banner.css. Aynı dosya
 * WHMCS temasına templates/xhosting/css/ks-banner.css olarak kopyalanır ki
 * WordPress yönetim ekranındaki önizleme ile panelde görünen birebir aynı
 * olsun. Renk, ölçü ve görsel değerleri banner'ın kendi style özniteliğinden
 * gelir; burada yalnızca yerleşim var.
 */

.ksb-ban {
	--ksb-zemin: #111827;
	--ksb-yazi: #FFFFFF;
	--ksb-vurgu: #F59E0B;
	--ksb-dugme-yazi: #111827;
	--ksb-olcek: 1;
	--ksb-karisim: none;
	--ksb-perde-katman: none;
	--ksb-perde-op: 0;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: calc(14px * var(--ksb-olcek));
	background-color: var(--ksb-zemin);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--ksb-yazi);
	font-size: calc(14px * var(--ksb-olcek));
	line-height: 1.5;
}

.ksb-ban * { box-sizing: border-box; }

/* Görseli zemin rengine bağlayan geçiş: yazının olduğu taraf düz renk,
 * görselin olduğu tarafa doğru saydamlaşır. */
.ksb-ban::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ksb-karisim);
	pointer-events: none;
}

/* Karartma / beyazlatma perdesi. Görsel bir yandaysa yalnızca o yana biner. */
.ksb-ban::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ksb-perde-katman);
	opacity: var(--ksb-perde-op);
	pointer-events: none;
}

/* İçerik her iki perdenin de üstünde kalsın. */
.ksb-ban > * { position: relative; z-index: 1; }

.ksb-ban-rozet {
	display: inline-block;
	padding: calc(4px * var(--ksb-olcek)) calc(10px * var(--ksb-olcek));
	border-radius: 999px;
	background: var(--ksb-vurgu);
	color: var(--ksb-dugme-yazi);
	font-size: calc(11px * var(--ksb-olcek));
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
}

.ksb-ban-baslik {
	margin: 0;
	color: var(--ksb-yazi);
	font-size: calc(19px * var(--ksb-olcek));
	font-weight: 700;
	line-height: 1.25;
}

.ksb-ban-metin {
	margin: calc(4px * var(--ksb-olcek)) 0 0;
	color: var(--ksb-yazi);
	font-size: calc(13.5px * var(--ksb-olcek));
	opacity: .82;
}

.ksb-ban-fiyat { display: flex; align-items: baseline; gap: calc(8px * var(--ksb-olcek)); }
.ksb-ban-eski { color: var(--ksb-yazi); font-size: calc(13px * var(--ksb-olcek)); opacity: .55; text-decoration: line-through; }
.ksb-ban-yeni { color: var(--ksb-vurgu); font-size: calc(24px * var(--ksb-olcek)); font-weight: 800; white-space: nowrap; }
.ksb-ban-yeni span { color: var(--ksb-yazi); font-size: calc(12px * var(--ksb-olcek)); font-weight: 500; opacity: .7; }

.ksb-ban-dugme {
	display: inline-block;
	padding: calc(10px * var(--ksb-olcek)) calc(20px * var(--ksb-olcek));
	border: 0;
	border-radius: calc(10px * var(--ksb-olcek));
	background: var(--ksb-vurgu);
	color: var(--ksb-dugme-yazi);
	font-size: calc(14px * var(--ksb-olcek));
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .15s;
}
.ksb-ban-dugme:hover,
.ksb-ban-dugme:focus { color: var(--ksb-dugme-yazi); text-decoration: none; opacity: .87; }

.ksb-ban-ozellikler { margin: calc(12px * var(--ksb-olcek)) 0 0; padding: 0; list-style: none; }
.ksb-ban-ozellikler li {
	position: relative;
	margin-bottom: calc(6px * var(--ksb-olcek));
	padding-left: calc(20px * var(--ksb-olcek));
	color: var(--ksb-yazi);
	font-size: calc(13px * var(--ksb-olcek));
	opacity: .85;
}
.ksb-ban-ozellikler li::before {
	content: "";
	position: absolute;
	top: calc(6px * var(--ksb-olcek));
	left: 0;
	width: calc(11px * var(--ksb-olcek));
	height: calc(6px * var(--ksb-olcek));
	border: solid var(--ksb-vurgu);
	border-width: 0 0 calc(2px * var(--ksb-olcek)) calc(2px * var(--ksb-olcek));
	transform: rotate(-45deg);
}

/* ------------------------------------------------------------- yatay */
.ksb-ban--yatay { display: flex; padding: calc(20px * var(--ksb-olcek)) calc(24px * var(--ksb-olcek)); }
.ksb-ban-icerik {
	display: flex;
	align-items: center;
	gap: calc(24px * var(--ksb-olcek));
	flex-wrap: wrap;
	width: 100%;
}
.ksb-ban--yatay .ksb-ban-sol { display: flex; align-items: center; gap: calc(16px * var(--ksb-olcek)); flex: 1 1 260px; min-width: 0; }
.ksb-ban--yatay .ksb-ban-sag { display: flex; align-items: center; gap: calc(18px * var(--ksb-olcek)); flex: 0 0 auto; margin-left: auto; }

/* Görsel bir yandayken içerik karşı tarafta toplanır, görselin üstüne binmez.
 * Sınır --ksb-icerik-en ile ayarlanır (görsel alanının tamamlayanı). */
.ksb-ban--yatay[data-yan] .ksb-ban-icerik { max-width: var(--ksb-icerik-en, 60%); }
.ksb-ban--yatay[data-yan="sol"] .ksb-ban-icerik { margin-left: auto; }

/* ------------------------------------------------------------- dikey */
.ksb-ban--dikey { padding: calc(20px * var(--ksb-olcek)); }
.ksb-ban--dikey .ksb-ban-rozet { margin-bottom: calc(10px * var(--ksb-olcek)); }
.ksb-ban--dikey .ksb-ban-fiyat { margin-top: calc(14px * var(--ksb-olcek)); }
.ksb-ban--dikey .ksb-ban-dugme { display: block; margin-top: calc(14px * var(--ksb-olcek)); text-align: center; }
.ksb-ban--dikey[data-yan] > * { max-width: var(--ksb-icerik-en, 70%); }
.ksb-ban--dikey[data-yan="sol"] > * { margin-left: auto; }

@media (max-width: 640px) {
	.ksb-ban-icerik { flex-direction: column; align-items: flex-start; }
	.ksb-ban--yatay .ksb-ban-sag { margin-left: 0; width: 100%; justify-content: space-between; }
	/* Dar ekranda yan görsele yer kalmaz; içerik tam genişliğe döner. */
	.ksb-ban--yatay[data-yan] .ksb-ban-icerik,
	.ksb-ban--dikey[data-yan] > * { max-width: 100%; margin-left: 0; }
}