/*
 * Kenar çubuğu araç önerisi kutusu.
 *
 * DÜZEN: görsel kutunun arka planı, metin onun ÜSTÜNDE — ana sayfadaki
 * araç kartlarının (.advws-ak) dili. Oradaki kart yatay olduğu için perde
 * soldan sağa açılıyor; kenar çubuğu dar (~277px) olduğundan burada aynı
 * fikrin dikey hâli var: perde aşağıdan yukarı açılıyor, metin altta.
 * (Görsel üstte + metin altta şeklindeki ara sürüm denendi, ana sayfayla
 * dili tutmadığı için bırakıldı.)
 *
 * Perde KOYU: sitenin kendi kartları beyaz perde + lacivert metin
 * kullanıyor ama onlar açık zeminli bir ızgarada duruyor. Kenar çubuğunda
 * beyaz perde, beyaz çubuğun içinde kaybolup çağrı gücünü yitiriyor.
 * Beyaz perde istenirse: --kn-perde ve metin renklerini çevirmek yeter.
 */

.adv-kn {
	--kn-turuncu: var(--adv-o, #E5732A);
	--kn-zemin: #16181c;
	--kn-metin: #fff;
	--kn-metin-soluk: #d8d8d8;
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: 290px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-top: 3px solid var(--kn-turuncu);
	border-radius: 8px;
	overflow: hidden;
	background: var(--kn-zemin);
}

.adv-kn__zemin {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.adv-kn .adv-kn__img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	margin: 0;
	border-radius: 0;
	transition: transform .4s ease;
}

.adv-kn:hover .adv-kn__img {
	transform: scale(1.05);
}

/* PERDE — metnin okunması buna bağlı.
   Aşağıdan yukarı: alt uç neredeyse tam opak, üst uç şeffaf. Böylece yazı
   her fotoğrafta okunur kalıyor, fotoğrafın konusu üstte görünmeye devam
   ediyor. */
.adv-kn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( to top,
		rgba(14, 16, 19, .97) 0%,
		rgba(14, 16, 19, .93) 34%,
		rgba(14, 16, 19, .62) 60%,
		rgba(14, 16, 19, .18) 82%,
		rgba(14, 16, 19, 0) 100% );
}

/* Görselsiz düşerse perde gereksiz — düz koyu zemin zaten var. */
.adv-kn--gorselsiz::before {
	display: none;
}

.adv-kn--gorselsiz {
	min-height: 0;
}

.adv-kn__ic {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 16px 16px 18px;
}

.adv-kn__ustluk {
	margin: 0 0 6px;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kn-turuncu);
	font-weight: 600;
	line-height: 1.3;
}

/* text-transform ve color AÇIKÇA yazılı: CheerUp `.widget h3`'ü büyük harfe
   çeviriyor ve kendi rengini basıyor, araç adı "BİSİKLET VİTES HESAPLAYICI"
   diye çıkıyordu. Tema kuralını yenmek için gerekli. */
.adv-kn .adv-kn__ad {
	margin: 0 0 8px;
	font-size: 19px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--kn-metin);
	text-transform: none;
	letter-spacing: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.adv-kn__ozet {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--kn-metin-soluk);
}

.adv-kn .adv-kn__btn,
.adv-kn .adv-kn__btn:visited {
	display: block;
	text-align: center;
	padding: 11px 12px;
	border-radius: 6px;
	background: var(--kn-turuncu);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
	text-transform: none;
	transition: filter .15s ease;
}

.adv-kn .adv-kn__btn:hover,
.adv-kn .adv-kn__btn:focus {
	filter: brightness(.92);
	color: #fff;
	text-decoration: none;
}

/* Widget başlığı kutunun kendi üstlüğüyle tekrar etmesin. */
.adv-kn-widget > .widget-title,
.adv-kn-widget > h2,
.adv-kn-widget > h3 {
	display: none;
}