/*
 * Bileşen stilleri (hero, ürün kartları, teklif formu, kampanyalar, vb.)
 * template-parts/ dosyaları oluşturuldukça buraya eklenecek.
 */

/* ==========================================================================
   Anlaşmalı Şirket Tekil Sayfası
   ========================================================================== */
.kanokta-partner-single {
	padding: 48px 0 80px;
}

.kanokta-partner-single__inner {
	max-width: 760px;
}

.kanokta-partner-single__media {
	width: 100%;
	max-width: 320px;
	height: 160px;
	margin: 0 auto 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--kanokta-white);
	border: 1px solid var(--kanokta-border);
	border-radius: var(--kanokta-radius);
	padding: 20px;
}

.kanokta-partner-single__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kanokta-partner-single__website {
	text-align: center;
	margin-bottom: 40px;
}

.kanokta-partner-single__content {
	color: var(--kanokta-text);
	line-height: 1.7;
}

.kanokta-partner-single__content p {
	margin-bottom: 1.2em;
}

/* ==========================================================================
   Blog Kartı (ön sayfa şeridi + tam blog arşivi tarafından paylaşılır)
   ========================================================================== */
.kanokta-blog-card {
	display: flex;
	flex-direction: column;
	background-color: var(--kanokta-white);
	border: 1px solid var(--kanokta-border);
	border-radius: var(--kanokta-radius);
	overflow: hidden;
	color: var(--kanokta-text);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.kanokta-blog-card:hover,
.kanokta-blog-card:focus {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--kanokta-primary-dark) 12%, transparent);
	border-color: var(--kanokta-primary-light);
	color: var(--kanokta-text);
}

/* Sigorta Rehberi'ndeki kategori rafı + grid kartları ("--full", bkz.
   kanokta_render_blog_card()): sade, gölgesiz, hafif bej zemin. Ön
   sayfadaki mini blog önizlemesi (template-parts/blog-liste.php) --full
   almadığı için yukarıdaki varsayılan (beyaz zemin + kenarlık) korunur. */
.kanokta-blog-card--full {
	background-color: #F5F4F0;
	border: none;
}

.kanokta-blog-card--full:hover,
.kanokta-blog-card--full:focus {
	box-shadow: none;
	border-color: transparent;
}

.kanokta-blog-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--kanokta-accent-lighter);
}

.kanokta-blog-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kanokta-blog-card__fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kanokta-primary);
}

.kanokta-blog-card__title {
	font-size: .98rem;
	font-weight: 600;
	margin: 0;
	padding: 14px 16px;
}

/* ==========================================================================
   Blog Listesi (ön sayfa şeridi) — yatay kaydırma: masaüstünde ~6,
   mobilde ~2 kart aynı anda görünür.
   ========================================================================== */
.kanokta-blog-list__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	margin-top: 40px;
	padding-bottom: 8px;
}

.kanokta-blog-list__track .kanokta-blog-card {
	flex: 0 0 calc((100% - 20px) / 2);
	scroll-snap-align: start;
	text-align: left;
}

@media (min-width: 640px) {
	.kanokta-blog-list__track .kanokta-blog-card {
		flex: 0 0 calc((100% - 2 * 20px) / 3);
	}
}

@media (min-width: 1024px) {
	.kanokta-blog-list__track .kanokta-blog-card {
		flex: 0 0 calc((100% - 5 * 20px) / 6);
	}
}

.kanokta-blog-list__all {
	margin-top: 32px;
	text-align: center;
}

/* ==========================================================================
   Blog Kartı - kategori/tarih satırı (kanokta_render_blog_card())
   Kategori solda (marka rengi, vurgulu), tarih sağda (gri) - aralarında
   ayraç yok, uçlara yaslanmış tek satır.
   ========================================================================== */
.kanokta-blog-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.kanokta-blog-card__category {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--kanokta-primary);
}

.kanokta-blog-card__date {
	font-size: .74rem;
	color: var(--kanokta-text-muted);
}

/* ==========================================================================
   Carousel (öne çıkan yazılar vitrini + kategori rafları) - ortak bileşen
   Ok tıklamasıyla veya elle (touch/trackpad) native scroll ile ilerler
   (bkz. assets/js/blog-carousel.js).
   ========================================================================== */
.kanokta-carousel {
	position: relative;
	margin-top: 18px;
}

.kanokta-carousel__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
}

.kanokta-carousel__track > * {
	scroll-snap-align: start;
}

/* Kategori/video rafları: kompakt çok kartlı düzen (mobilde 1, tablette 2,
   masaüstünde 3 kart). Öne çıkan yazılar vitrini kendi (tek slaytlık)
   genişliğini aşağıda ayrıca tanımlar. */
.kanokta-carousel--shelf .kanokta-carousel__track > * {
	flex: 0 0 85%;
}

@media (min-width: 640px) {
	.kanokta-carousel--shelf .kanokta-carousel__track > * {
		flex: 0 0 calc((100% - 16px) / 2);
	}
}

@media (min-width: 960px) {
	.kanokta-carousel--shelf .kanokta-carousel__track > * {
		flex: 0 0 calc((100% - 2 * 16px) / 3);
	}
}

.kanokta-carousel--featured .kanokta-carousel__track > * {
	flex: 0 0 100%;
}

.kanokta-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--kanokta-border);
	background-color: var(--kanokta-white);
	color: var(--kanokta-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
	cursor: pointer;
	z-index: 2;
}

.kanokta-carousel__arrow--prev {
	left: 8px;
}

.kanokta-carousel__arrow--next {
	right: 8px;
}

/* Öne çıkan yazılar vitrininde, ince/sade ok butonları: dairesel border
   yerine yarı saydam bir zemin - hem görsel hem metin bloğu üzerinde
   okunaklı kalır. */
.kanokta-carousel--featured .kanokta-carousel__arrow {
	width: 34px;
	height: 34px;
	border: none;
	background-color: rgba(255, 255, 255, .85);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1;
}

.kanokta-carousel--featured .kanokta-carousel__arrow:hover {
	background-color: var(--kanokta-white);
}

/* Öne çıkan yazılar vitrininin altındaki, aktif slaytı gösteren ince
   ilerleme çubuğu - klasik yuvarlak nokta göstergeleri yerine (bkz.
   assets/js/blog-carousel.js, segmentler JS ile oluşturulur). */
.kanokta-carousel__progress {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	padding: 0 8px;
}

.kanokta-carousel__progress-segment {
	flex: 1;
	height: 4px;
	padding: 0;
	border: none;
	border-radius: 3px;
	background-color: var(--kanokta-border);
	cursor: pointer;
	transition: background-color .3s ease, height .3s ease;
}

.kanokta-carousel__progress-segment.is-active {
	height: 5px;
	background-color: var(--kanokta-primary);
}

/* ==========================================================================
   Öne Çıkan Yazılar - Slayt (kanokta_render_featured_slide())
   Görsel üzerine yazı bindirmek yerine iki ayrı blok: solda açık renkli
   metin bloğu, sağda görseli tam kaplayan medya bloğu. Dar ekranlarda
   (bkz. medya sorgusu altta) görsel üstte, metin altta olacak şekilde
   dikeye döner.
   ========================================================================== */
.kanokta-featured-slide {
	display: flex;
	min-height: 260px;
	border-radius: var(--kanokta-radius);
	overflow: hidden;
	color: var(--kanokta-text);
}

.kanokta-featured-slide:hover,
.kanokta-featured-slide:focus {
	color: var(--kanokta-text);
}

.kanokta-featured-slide__text {
	flex: 0 0 42%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 28px 32px;
	background-color: #F5F4F0;
}

.kanokta-featured-slide__meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kanokta-featured-slide__category {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--kanokta-primary);
}

.kanokta-featured-slide__date {
	font-size: .78rem;
	color: var(--kanokta-text-muted);
}

/* Başlık, metin bloğundaki hiyerarşinin en belirgin öğesi: daha büyük,
   daha kalın (800) ve hafif sıkılaştırılmış harf aralığıyla. */
.kanokta-featured-slide__title {
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.01em;
	margin: 0;
}

.kanokta-featured-slide__excerpt {
	color: var(--kanokta-text-muted);
	font-size: .92rem;
	line-height: 1.7;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kanokta-featured-slide__media {
	flex: 1;
	overflow: hidden;
	background-color: var(--kanokta-accent-lighter);
}

/* Hafif "Ken Burns" efekti: bir slayt aktif olduğunda (bkz.
   assets/js/blog-carousel.js, .is-active track'teki güncel karta eklenir)
   görsel birkaç saniye boyunca yavaşça büyür; slayt değiştiğinde bir
   sonraki görüntülemede baştan başlaması için normal boyutuna döner. */
.kanokta-featured-slide__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 6s ease-out;
}

.kanokta-featured-slide.is-active .kanokta-featured-slide__image {
	transform: scale(1.08);
}

.kanokta-featured-slide__fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kanokta-primary);
}

@media (max-width: 720px) {
	.kanokta-featured-slide {
		flex-direction: column;
		min-height: 0;
	}

	.kanokta-featured-slide__text {
		flex: 0 0 auto;
		padding: 20px;
	}

	.kanokta-featured-slide__media {
		aspect-ratio: 16 / 9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kanokta-featured-slide__image {
		transition: none;
	}

	.kanokta-featured-slide.is-active .kanokta-featured-slide__image {
		transform: none;
	}
}

/* ==========================================================================
   Video Lightbox (bkz. template-parts/blog-video-listesi.php - sağ sütun,
   assets/js/video-lightbox.js). Video kartının kendisi artık kompakt
   sidebar listesi olarak gösteriliyor (bkz. .kanokta-blog-sidebar-video);
   burada yalnızca modal/lightbox kalır.
   ========================================================================== */
.kanokta-video-modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.kanokta-video-modal[hidden] {
	display: none;
}

.kanokta-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--kanokta-primary-dark) 80%, transparent);
}

.kanokta-video-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 960px;
}

.kanokta-video-modal__close {
	position: absolute;
	top: -40px;
	right: 0;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background-color: var(--kanokta-white);
	color: var(--kanokta-primary-dark);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.kanokta-video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: #000;
}

.kanokta-video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   Blog Kategori Filtre + Arama Çubuğu (bkz. template-parts/blog-filtre.php)
   home.php, category.php, archive.php ve search.php'nin hepsinde, başlığın
   hemen altında gösterilir. Kategori linkleri gerçek sayfa geçişleridir
   (get_category_link()) - ayrı bir JS filtreleme katmanı yok.
   ========================================================================== */
.kanokta-blog-filter {
	background-color: var(--kanokta-white);
	border-bottom: 1px solid var(--kanokta-border);
	padding: 14px 0;
}

.kanokta-blog-filter__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.kanokta-blog-filter__categories {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.kanokta-blog-filter__link {
	display: inline-flex;
	padding: 7px 14px;
	border-radius: 999px;
	background-color: var(--kanokta-accent-lighter);
	color: var(--kanokta-primary-dark);
	font-size: .85rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.kanokta-blog-filter__link:hover,
.kanokta-blog-filter__link:focus {
	background-color: var(--kanokta-accent-light);
	color: var(--kanokta-primary-dark);
}

.kanokta-blog-filter__link.is-active {
	background-color: var(--kanokta-primary);
	color: var(--kanokta-white);
}

.kanokta-blog-filter__search {
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.kanokta-blog-filter__search-input {
	width: 220px;
	max-width: 100%;
	padding: 8px 40px 8px 14px;
	border: none;
	border-radius: 999px;
	background-color: var(--kanokta-accent-lighter);
	color: var(--kanokta-text);
	font-size: .85rem;
}

.kanokta-blog-filter__search-input::placeholder {
	color: var(--kanokta-text-muted);
}

.kanokta-blog-filter__search-input:focus {
	outline: 2px solid var(--kanokta-primary);
	outline-offset: 1px;
}

.kanokta-blog-filter__search-submit {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--kanokta-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.kanokta-blog-filter__search-submit:hover {
	background-color: var(--kanokta-accent-light);
}

@media (max-width: 640px) {
	.kanokta-blog-filter__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.kanokta-blog-filter__categories {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
	}

	.kanokta-blog-filter__search-input {
		width: 100%;
	}
}

/* "Öne Çıkan Yazılar" başlığı, sitedeki diğer .kanokta-baslik
   kullanımlarından (Neden Biz, Teklif Formu, Ürünler vb.) bağımsız olarak
   burada küçültülür - kompakt bir sayfa hissi için, .kanokta-quote-form'daki
   aynı scoping yaklaşımıyla (bkz. .kanokta-quote-form .kanokta-baslik). */
.kanokta-featured-posts .kanokta-baslik {
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	padding: 8px 22px;
	margin-bottom: 10px;
}

.kanokta-blog-archive {
	padding: 28px 0 56px;
}

/* Mobil: 1 sütun (aşağıdaki temel kural), tablet: 2, masaüstü: 3. */
.kanokta-blog-archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 22px;
}

@media (min-width: 640px) {
	.kanokta-blog-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.kanokta-blog-archive__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.kanokta-blog-card--full .kanokta-blog-card__body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Başlığın yanındaki ok ikonu (↗) "Devamını Oku" metninin yerini alır -
   kartın tamamı zaten tıklanabilir bir link (bkz. kanokta_render_blog_card()). */
.kanokta-blog-card--full .kanokta-blog-card__title {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	padding: 0;
	font-size: 1.02rem;
	font-weight: 700;
	margin-bottom: 6px;
}

.kanokta-blog-card__title-arrow {
	flex-shrink: 0;
	font-size: .85em;
	color: var(--kanokta-primary);
	transition: transform .15s ease;
}

.kanokta-blog-card--full:hover .kanokta-blog-card__title-arrow,
.kanokta-blog-card--full:focus .kanokta-blog-card__title-arrow {
	transform: translate(2px, -2px);
}

/* İki satırla sınırlı özet (bkz. -webkit-line-clamp) - kart yüksekliğini
   içerik uzunluğundan bağımsız, tutarlı tutar. */
.kanokta-blog-card__excerpt {
	color: var(--kanokta-text-muted);
	font-size: .85rem;
	line-height: 1.5;
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kanokta-blog-archive .navigation.pagination {
	margin-top: 32px;
	display: flex;
	justify-content: center;
	gap: 12px;
}

.kanokta-blog-archive .page-numbers {
	color: var(--kanokta-primary-dark);
	font-weight: 600;
}

.kanokta-blog-archive .page-numbers.current {
	color: var(--kanokta-primary);
	text-decoration: underline;
}

/* ==========================================================================
   Blog Sayfası - İki Sütunlu Düzen (bkz. home.php)
   Sol sütun: öne çıkan vitrin + sayfalanmış grid. Sağ sütun (yalnızca
   içeriği varsa basılır - bkz. .kanokta-blog-layout--no-sidebar): teklif
   kutusu + video listesi, masaüstünde sticky. .kanokta-hesaplama-layout
   ile aynı desen (align-items:start + sticky + sabit sütun genişliği),
   hesaplama sayfalarındaki sütun davranışıyla tutarlı olsun diye.
   ========================================================================== */
.kanokta-blog-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
	padding-top: 28px;
}

@media (min-width: 960px) {
	.kanokta-blog-layout:not(.kanokta-blog-layout--no-sidebar) {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

.kanokta-blog-layout__main {
	min-width: 0;
}

@media (min-width: 960px) {
	.kanokta-blog-layout__sidebar {
		position: sticky;
		top: 108px;
	}
}

/* ==========================================================================
   Blog Sağ Sütunu - Ortak Kutu Kabuğu (teklif widget'ı + video listesi)
   Blog kartlarıyla/öne çıkanlar metin bloğuyla aynı bej zemin - hesaplama
   sayfalarındaki beyaz/gölgeli kutudan bilinçli olarak farklı, sayfanın
   geri kalanıyla kopuk durmasın diye.
   ========================================================================== */
.kanokta-blog-sidebar-widget {
	padding: 24px;
	background-color: #F5F4F0;
	border-radius: var(--kanokta-radius);
}

.kanokta-blog-sidebar-widget + .kanokta-blog-sidebar-widget {
	margin-top: 24px;
}

.kanokta-blog-sidebar-widget__title {
	font-size: 1.1rem;
	margin-bottom: 10px;
}

.kanokta-blog-sidebar-widget__intro {
	margin: 0 0 18px;
	color: var(--kanokta-text-muted);
	font-size: .88rem;
	line-height: 1.6;
}

.kanokta-blog-sidebar-widget__intro strong {
	color: var(--kanokta-primary-dark);
}

.kanokta-blog-sidebar-widget__liste {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kanokta-blog-sidebar-widget__urun {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 12px;
	padding: 12px;
	background-color: var(--kanokta-white);
	border: none;
	border-radius: 12px;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--kanokta-primary-dark) 6%, transparent);
	text-align: left;
	color: var(--kanokta-text);
	font-family: inherit;
	cursor: pointer;
	transition: box-shadow .2s ease, transform .2s ease;
}

.kanokta-blog-sidebar-widget__urun:hover,
.kanokta-blog-sidebar-widget__urun:focus {
	box-shadow: 0 6px 16px color-mix(in srgb, var(--kanokta-primary-dark) 12%, transparent);
	transform: translateY(-2px);
	color: var(--kanokta-text);
}

.kanokta-blog-sidebar-widget__urun-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--kanokta-primary) 14%, var(--kanokta-white));
	color: var(--kanokta-primary);
	flex-shrink: 0;
	overflow: hidden;
}

.kanokta-blog-sidebar-widget__urun-ikon img {
	width: 60%;
	height: 60%;
	object-fit: contain;
}

.kanokta-blog-sidebar-widget__urun-metin {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.kanokta-blog-sidebar-widget__urun-ad {
	font-weight: 700;
	font-size: .9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kanokta-blog-sidebar-widget__urun-cta {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--kanokta-primary);
	font-weight: 600;
	font-size: .8rem;
}

/* ==========================================================================
   Blog Sağ Sütunu - Video Listesi (bkz. template-parts/blog-video-listesi.php,
   inc/video-post-type.php > kanokta_render_video_sidebar_item())
   ========================================================================== */
.kanokta-blog-sidebar-video-liste {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kanokta-blog-sidebar-video {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	background-color: var(--kanokta-white);
	border-radius: 12px;
	cursor: pointer;
	transition: box-shadow .2s ease, transform .2s ease;
}

.kanokta-blog-sidebar-video:hover,
.kanokta-blog-sidebar-video:focus {
	box-shadow: 0 6px 16px color-mix(in srgb, var(--kanokta-primary-dark) 12%, transparent);
	transform: translateY(-2px);
}

.kanokta-blog-sidebar-video:focus {
	outline: 2px solid var(--kanokta-primary);
	outline-offset: 2px;
}

.kanokta-blog-sidebar-video__thumb {
	position: relative;
	flex-shrink: 0;
	width: 84px;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--kanokta-accent-lighter);
}

.kanokta-blog-sidebar-video__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kanokta-blog-sidebar-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--kanokta-primary-dark) 75%, transparent);
	color: var(--kanokta-white);
}

.kanokta-blog-sidebar-video__title {
	font-size: .86rem;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   Tekil Blog Yazısı (bkz. single.php) - Meta Satırı + Öne Çıkan Görsel
   Başlık üstteki ortak şerittedir (template-parts/page-header.php). İçerik
   sütununun başında yazar/kategori/okuma süresi satırı, altında (varsa)
   16:9 öne çıkan görsel (bkz. 'kanokta-featured' boyutu, functions.php).
   ========================================================================== */
.kanokta-blog-single__medya {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--kanokta-radius);
	overflow: hidden;
	margin-bottom: 32px;
	background-color: var(--kanokta-accent-lighter);
}

.kanokta-blog-single__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kanokta-blog-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-bottom: 16px;
}

.kanokta-blog-single__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--kanokta-text-muted);
	font-size: .82rem;
	font-weight: 500;
	text-decoration: none;
}

a.kanokta-blog-single__meta-item:hover,
a.kanokta-blog-single__meta-item:focus {
	color: var(--kanokta-primary);
}

.kanokta-blog-single__meta-item svg {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
}

.kanokta-single-post__back {
	margin-top: 24px;
}

.kanokta-single-post__back a {
	font-weight: 600;
}

/* ==========================================================================
   Genel Sayfa Şablonu (Hakkımızda, Ekibimiz, İletişim, Yasal)
   ========================================================================== */
.kanokta-page {
	padding: 48px 0 80px;
}

.kanokta-page__inner {
	max-width: 860px;
}

.kanokta-page__media {
	margin-bottom: 32px;
	border-radius: var(--kanokta-radius);
	overflow: hidden;
}

.kanokta-page__image {
	width: 100%;
	height: auto;
}

.kanokta-page__content {
	color: var(--kanokta-text);
	line-height: 1.7;
	margin-bottom: 40px;
}

.kanokta-page__content p {
	margin-bottom: 1.2em;
}

.kanokta-page__content--narrow {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.kanokta-page__team-cta {
	margin-top: 48px;
	padding: 32px;
	background-color: var(--kanokta-accent-lighter);
	border-radius: var(--kanokta-radius);
	text-align: center;
}

.kanokta-page__team-cta p {
	margin-bottom: 16px;
	color: var(--kanokta-primary-dark);
	font-weight: 600;
}

/* ==========================================================================
   İletişim
   ========================================================================== */
.kanokta-contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 760px) {
	.kanokta-contact__grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.kanokta-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.kanokta-contact__list li {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.kanokta-contact__list strong {
	color: var(--kanokta-primary-dark);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.kanokta-contact__map {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--kanokta-radius);
	overflow: hidden;
	border: 1px solid var(--kanokta-border);
}

/* ==========================================================================
   "Ekibimizle Tanışın" Bandı (ön sayfa)
   ========================================================================== */
.kanokta-team-band {
	position: relative;
	background-color: var(--kanokta-accent-lighter);
	/* Düz solid renk yerine çok hafif noktalı doku - .kanokta-why-us'taki
	   AYNI teknik, "düz blok blok" hissini kırmak için (bkz. görev
	   talebi). */
	background-image: radial-gradient(circle, color-mix(in srgb, var(--kanokta-primary) 12%, transparent) 1.5px, transparent 1.5px);
	background-size: 26px 26px;
}

.kanokta-team-band__inner {
	display: flex;
	align-items: center;
	gap: 32px;
}

.kanokta-team-band__mascot {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kanokta-team-band__mascot-image {
	width: 100%;
	max-width: 130px;
	height: auto;
	/* Hero/teklif formu maskotlarındaki gibi, boyut kaydırıcısı layout'u
	   etkilememesi için width yerine transform: scale() ile uygulanır. */
	transform: scale(var(--kanokta-team-mascot-scale, 1));
}

.kanokta-team-band__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	flex: 1;
	text-align: left;
}

.kanokta-team-band__text p {
	color: var(--kanokta-text-muted);
	margin: 0;
}

@media (max-width: 640px) {
	.kanokta-team-band__inner {
		flex-direction: column;
	}

	.kanokta-team-band__mascot-image {
		max-width: 90px;
	}

	.kanokta-team-band__content {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   Sektörden Haberler Şeridi
   Tek seferde bir haber gösteren, birkaç saniyede bir yumuşakça solup
   yerini bir sonrakine bırakan (crossfade) bir slider. Geçiş mantığı
   assets/js/news-ticker.js içindedir: yalnızca .is-active sınıfını (ve
   erişilebilirlik özniteliklerini) taşır, görsel geçişi tamamen bu CSS
   üstlenir. prefers-reduced-motion tercih edilmişse geçiş süresi sıfırlanır
   ve otomatik döngü hiç başlamaz (bkz. news-ticker.js) - nokta göstergeleri
   yine de manuel gezinme için çalışır durumda kalır.
   ========================================================================== */
.kanokta-news-ticker {
	background: linear-gradient(135deg, var(--kanokta-primary-dark) 0%, color-mix(in srgb, var(--kanokta-primary-dark) 82%, black) 100%);
	color: var(--kanokta-white);
	overflow: hidden;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .08),
		0 2px 10px -4px rgba(0, 0, 0, .4);
}

.kanokta-news-ticker__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 20px;
}

.kanokta-news-ticker__label {
	flex-shrink: 0;
	font-family: var(--kanokta-font-heading);
	font-weight: 600;
	text-transform: uppercase;
	font-size: .68rem;
	letter-spacing: .08em;
	padding: 6px 14px;
	background: linear-gradient(135deg, var(--kanokta-primary), color-mix(in srgb, var(--kanokta-primary) 80%, black));
	border-radius: 999px;
	white-space: nowrap;
}

.kanokta-news-ticker__viewport {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 1.6em;
	font-size: .92rem;
	overflow: hidden;
}

.kanokta-news-ticker__slides {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kanokta-news-ticker__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: opacity .6s ease;
}

.kanokta-news-ticker__slide.is-active {
	opacity: 1;
}

.kanokta-news-ticker__slide a {
	display: block;
	max-width: 100%;
	overflow: hidden;
	color: var(--kanokta-white);
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--kanokta-font-body);
	font-weight: 500;
	opacity: .92;
}

.kanokta-news-ticker__slide a:hover,
.kanokta-news-ticker__slide a:focus {
	opacity: 1;
	color: var(--kanokta-white);
	text-decoration: underline;
}

.kanokta-news-ticker__dots {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
}

.kanokta-news-ticker__dot {
	width: 6px;
	height: 6px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .35);
	cursor: pointer;
	transition: background-color .3s ease, transform .3s ease;
}

.kanokta-news-ticker__dot:hover,
.kanokta-news-ticker__dot:focus-visible {
	background-color: rgba(255, 255, 255, .7);
}

.kanokta-news-ticker__dot.is-active {
	background-color: var(--kanokta-white);
	transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
	.kanokta-news-ticker__slide {
		transition: none;
	}
}

@media (max-width: 600px) {
	.kanokta-news-ticker__label {
		font-size: .62rem;
		padding: 5px 11px;
	}

	.kanokta-news-ticker__viewport {
		font-size: .85rem;
	}
}

@media (max-width: 480px) {
	.kanokta-news-ticker__inner {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	.kanokta-news-ticker__dots {
		margin-left: auto;
	}

	.kanokta-news-ticker__viewport {
		flex-basis: 100%;
		order: 3;
	}
}

/* ==========================================================================
   Ürün Tekil Sayfası (bkz. .kanokta-detay-layout main.css, single-kanokta_urun.php)
   ========================================================================== */
/* Ürün/blog/kampanya tekil sayfalarının PAYLAŞILAN <main> dolgusu - .kanokta-detay-layout'u
   (main.css'te ayrıca aranır) saran ortak kabuk, üç şablonda da (single-kanokta_urun.php,
   single.php, single-kanokta_kampanya.php) kullanılır. */
.kanokta-detay-sayfa {
	padding: 32px 0 64px;
}

.kanokta-urun-single__content {
	text-align: left;
	color: var(--kanokta-text);
	line-height: 1.7;
}

.kanokta-urun-single__content p {
	margin-bottom: 1.2em;
}

/* ==========================================================================
   İçerik Detay Sayfaları - Önceki/Sonraki Gezinmesi (Ürün + Blog Yazısı)
   (bkz. template-parts/urun-navigasyon.php, template-parts/blog-navigasyon.php)
   PAYLAŞILAN kabuk - .kanokta-detay-nav__ad'daki text-overflow:ellipsis +
   white-space:nowrap sayesinde başlık uzun ya da kısa olsun sayfa
   BOZULMAZ, her zaman tek satıra kırpılır.
   ========================================================================== */
.kanokta-detay-nav {
	border-top: 1px solid var(--kanokta-border);
	margin-top: 24px;
	padding: 28px 0;
}

.kanokta-detay-nav__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.kanokta-detay-nav__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background-color: var(--kanokta-accent-lighter);
	border-radius: var(--kanokta-radius);
	color: var(--kanokta-text);
	transition: box-shadow .2s ease, transform .2s ease;
}

.kanokta-detay-nav__link:hover,
.kanokta-detay-nav__link:focus {
	box-shadow: 0 6px 16px color-mix(in srgb, var(--kanokta-primary-dark) 12%, transparent);
	transform: translateY(-2px);
	color: var(--kanokta-text);
}

.kanokta-detay-nav__link--sonraki {
	justify-content: flex-end;
	text-align: right;
}

.kanokta-detay-nav__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--kanokta-white);
	color: var(--kanokta-primary);
	overflow: hidden;
}

.kanokta-detay-nav__icon img,
.kanokta-detay-nav__icon svg {
	width: 60%;
	height: 60%;
	object-fit: contain;
}

.kanokta-detay-nav__metin {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.kanokta-detay-nav__yon {
	font-size: .78rem;
	font-weight: 600;
	color: var(--kanokta-primary-dark);
	text-transform: uppercase;
	letter-spacing: .03em;
}

.kanokta-detay-nav__ad {
	font-weight: 700;
	font-size: .95rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 639.98px) {
	.kanokta-detay-nav__inner {
		grid-template-columns: 1fr;
	}

	.kanokta-detay-nav__link--sonraki {
		justify-content: flex-start;
		text-align: left;
	}
}

/* ==========================================================================
   "Tüm Ürünler" Arşivi
   ========================================================================== */
.kanokta-urun-archive {
	padding: 48px 0 80px;
}

.kanokta-urun-archive__subtitle {
	max-width: 640px;
	margin: 0 auto 40px;
	text-align: center;
	color: var(--kanokta-text-muted);
	font-weight: 400;
	font-size: 1.05rem;
	line-height: 1.65;
}

.kanokta-urun-archive .navigation.pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	gap: 12px;
}

.kanokta-urun-archive .page-numbers {
	color: var(--kanokta-primary-dark);
	font-weight: 600;
}

.kanokta-urun-archive .page-numbers.current {
	color: var(--kanokta-primary);
	text-decoration: underline;
}

/* Kart girişleri kademeli (staggered) belirir; taban .kanokta-reveal
   davranışı (opacity/transform/transition) main.css'te tek yerden
   tanımlıdır, bkz. "Scroll Reveal" bloğu. */
@media (prefers-reduced-motion: no-preference) {
	.kanokta-urun-archive .kanokta-product-card:nth-child(1) {
		transition-delay: 0s;
	}

	.kanokta-urun-archive .kanokta-product-card:nth-child(2) {
		transition-delay: .06s;
	}

	.kanokta-urun-archive .kanokta-product-card:nth-child(3) {
		transition-delay: .12s;
	}

	.kanokta-urun-archive .kanokta-product-card:nth-child(4) {
		transition-delay: .18s;
	}

	.kanokta-urun-archive .kanokta-product-card:nth-child(5) {
		transition-delay: .24s;
	}

	.kanokta-urun-archive .kanokta-product-card:nth-child(6) {
		transition-delay: .3s;
	}
}

/* ==========================================================================
   Finansal İşlemler (Hesaplama Araçları) - page-finansal-islemler.php
   Beyaz zeminde hesaplama araçları grid'i -> the_content (SSS, bkz.
   .kanokta-hesaplama-icerik). Araç kartları .kanokta-product-card'ın
   (yukarıda) BİREBİR aynısıdır - ayrı bir kart bileşeni tanımlanmadı, tema
   tasarım diliyle tutarlı kalması ve bakımı kolaylaştırması için.
   ========================================================================== */
.kanokta-hesaplama-hub__title {
	text-align: center;
	margin: 4px 0 12px;
}

.kanokta-hesaplama-hub__intro {
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
	color: var(--kanokta-text-muted);
	font-weight: 400;
	font-size: 1.05rem;
	line-height: 1.65;
}

.kanokta-hesaplama-hub__araclar {
	padding: 56px 0 40px;
	background-color: var(--kanokta-white);
}

.kanokta-hesaplama-hub__grid-title {
	text-align: center;
	margin-bottom: 8px;
}

.kanokta-hesaplama-hub__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 40px;
	text-align: left;
}

@media (min-width: 560px) {
	.kanokta-hesaplama-hub__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.kanokta-hesaplama-hub__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}

/* ==========================================================================
   Referanslar
   ========================================================================== */
.kanokta-references {
	/* Ekip Bandı (accent-lighter) -> Referanslar (beyaz) arasındaki GERÇEK
	   renk sınırını yumuşatan SVG dalga (bkz. .kanokta-bolum-gecis,
	   referanslar.php) için position:relative gerekli - dalga bu bölümün
	   üst kenarına yapışır. */
	position: relative;
}

.kanokta-references__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 20px;
	margin-top: 40px;
}

@media (min-width: 640px) {
	.kanokta-references__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 960px) {
	.kanokta-references__grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.kanokta-references__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.kanokta-references__box {
	width: 100%;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--kanokta-white);
	border: 1px solid var(--kanokta-border);
	border-radius: var(--kanokta-radius);
	padding: 10px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.kanokta-references__item:hover .kanokta-references__box,
.kanokta-references__item:focus-visible .kanokta-references__box {
	transform: translateY(-4px);
	box-shadow: 0 10px 20px color-mix(in srgb, var(--kanokta-primary-dark) 12%, transparent);
	border-color: var(--kanokta-primary-light);
}

.kanokta-references__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kanokta-references__fallback {
	font-weight: 600;
	font-size: .8rem;
	color: var(--kanokta-primary-dark);
	text-align: center;
}

.kanokta-references__hint {
	font-size: .78rem;
	font-weight: 600;
	color: var(--kanokta-primary);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .2s ease, transform .2s ease;
}

.kanokta-references__item:hover .kanokta-references__hint,
.kanokta-references__item:focus-visible .kanokta-references__hint {
	opacity: 1;
	transform: translateY(0);
}

.kanokta-references__item--static .kanokta-references__box {
	cursor: default;
}

/* ==========================================================================
   Kampanya Tekil Sayfası
   ========================================================================== */
.kanokta-campaign {
	padding: 48px 0 80px;
}

.kanokta-campaign__inner {
	max-width: 760px;
}

.kanokta-campaign__media {
	margin-bottom: 32px;
	border-radius: var(--kanokta-radius);
	overflow: hidden;
}

.kanokta-campaign__image {
	width: 100%;
	height: auto;
}

.kanokta-campaign__ended-notice {
	background-color: #FFF4E5;
	color: #8A5A00;
	border: 1px solid #F5D9A8;
	border-radius: var(--kanokta-radius);
	padding: 14px 20px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 32px;
}

.kanokta-campaign__content {
	color: var(--kanokta-text);
	line-height: 1.7;
	margin-bottom: 48px;
}

.kanokta-campaign__content p {
	margin-bottom: 1.2em;
}

.kanokta-campaign-join {
	background-color: var(--kanokta-accent-lighter);
	border-radius: var(--kanokta-radius);
	padding: 32px;
}

.kanokta-campaign-join__form {
	max-width: 420px;
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ==========================================================================
   Kampanyalar (ön sayfa listesi)
   ========================================================================== */
.kanokta-campaigns {
	background: linear-gradient(180deg, var(--kanokta-white) 0%, var(--kanokta-accent-lighter) 100%);
}

.kanokta-campaigns__title {
	display: inline-block;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	color: var(--kanokta-primary-dark);
}

/* background-clip:text desteklenmiyorsa yukarıdaki düz renk kalır. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.kanokta-campaigns__title {
		background: linear-gradient(
			90deg,
			var(--kanokta-primary-dark),
			var(--kanokta-primary),
			var(--kanokta-primary-light),
			var(--kanokta-primary-dark)
		);
		background-size: 250% auto;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (background-clip: text) or (-webkit-background-clip: text) {
		.kanokta-campaigns__title {
			animation: kanokta-shimmer 5s linear infinite;
		}
	}
}

@keyframes kanokta-shimmer {
	to {
		background-position: -250% center;
	}
}

/* Mobilde gradyan/parıltı animasyonu TAMAMEN kapatılır - .kanokta-baslik'in
   mobil düzeltmesiyle (bkz. main.css o bölüm) AYNI teknik, burada da AÇIKÇA
   tekrarlanır (bu öğe .kanokta-baslik sınıfını DA taşır ama kendi ayrı
   gradyan/shimmer kuralına güvenmek yerine, örtük bir kaskad sırasına
   dayanmadan doğrudan ve kesin olması için). */
@media (max-width: 640px) {
	.kanokta-campaigns__title {
		background: none;
		-webkit-background-clip: initial;
		background-clip: initial;
		-webkit-text-fill-color: var(--kanokta-primary-dark);
		color: var(--kanokta-primary-dark);
		animation: none;
	}
}

.kanokta-campaigns__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 40px;
	text-align: left;
}

@media (min-width: 860px) {
	.kanokta-campaigns__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.kanokta-campaign-card {
	display: flex;
	flex-direction: column;
	background-color: var(--kanokta-white);
	border: 1px solid var(--kanokta-border);
	border-radius: var(--kanokta-radius);
	overflow: hidden;
	color: var(--kanokta-text);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.kanokta-campaign-card:hover,
.kanokta-campaign-card:focus {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--kanokta-primary-dark) 12%, transparent);
	border-color: var(--kanokta-primary-light);
	color: var(--kanokta-text);
}

.kanokta-campaign-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--kanokta-accent-lighter);
	flex-shrink: 0;
}

.kanokta-campaign-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kanokta-campaign-card__media-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kanokta-primary-light);
}

.kanokta-campaign-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.kanokta-campaign-card__title {
	font-size: 1.1rem;
	margin-bottom: 8px;
}

.kanokta-campaign-card__excerpt {
	font-size: .92rem;
	color: var(--kanokta-text-muted);
	flex: 1;
	margin-bottom: 16px;
}

.kanokta-campaign-card__cta {
	font-weight: 600;
	color: var(--kanokta-primary);
}

.kanokta-campaigns__all {
	margin-top: 40px;
	text-align: center;
}

/* ==========================================================================
   Kampanyalar (arşiv sayfası: devam eden / süresi dolan ayrımı)
   ========================================================================== */
.kanokta-kampanya-archive {
	padding: 48px 0 80px;
}

.kanokta-kampanya-archive__expired-title {
	margin-top: 56px;
}

.kanokta-campaign-card--expired {
	opacity: .55;
	filter: grayscale(.4);
}

.kanokta-campaign-card--expired:hover,
.kanokta-campaign-card--expired:focus {
	opacity: .8;
}

.kanokta-campaign-card__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	background-color: var(--kanokta-primary-dark);
	color: var(--kanokta-white);
	font-size: .75rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
}

.kanokta-kampanya-archive .navigation.pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	gap: 12px;
}

.kanokta-kampanya-archive .page-numbers.current {
	color: var(--kanokta-primary);
	text-decoration: underline;
}

/* ==========================================================================
   Hero
   ========================================================================== */
/*
 * Header + Hero + Ürün kartları arka planı tek bir kaynaktan yönetilir:
 * .kanokta-hero-wrapper (header.php'de is_front_page() ise açılır,
 * front-page.php'de ürün kartlarından hemen sonra kapatılır). Header kendi
 * beyaz "hap" paneliyle bunun üstünde durur; hero ve ürün kartları
 * bölümlerinin kendi arka planı yoktur (transparent).
 *
 * İki katmanlı background: alttaki katman toplam yüksekliğe göre ölçeklenen
 * düz bir açık-mavi-tonu gradient'i (header+hero+ürünler boyunca hep
 * "mavi" kalsın diye yüzdelik değil, sadece iki açık tonu arasında);
 * üstteki katman ise yalnızca EN ALTTA sabit ~120px'lik bir beyaza
 * yumuşak geçiş şeridi (background-size ile yüksekliğe bağlı kalmaz,
 * böylece toplam içerik uzadıkça beyaza geçiş erken başlamaz).
 */
.kanokta-hero-wrapper {
	background:
		linear-gradient(to top, var(--kanokta-white), transparent) bottom / 100% 120px no-repeat,
		linear-gradient(180deg, var(--kanokta-accent-light), var(--kanokta-accent-lighter));
}

.kanokta-hero {
	background: transparent;
	padding: 72px 0 48px;
	overflow: hidden;
}

.kanokta-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
}

.kanokta-hero__content {
	max-width: 560px;
}

.kanokta-hero__title {
	/* Fallback: gradient metni desteklemeyen tarayıcılarda düz koyu mavi
	   olarak görünür. Gradient'i destekleyenlerde -webkit-text-fill-color
	   bunun üzerine geçer ve iki tonlu (primary-dark -> primary) bir
	   dolgu oluşturur. */
	color: var(--kanokta-primary-dark);
	background: linear-gradient(135deg, var(--kanokta-primary-dark), var(--kanokta-primary));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -.01em;
	margin-bottom: 20px;
}

/* Customizer'dan girilen <span style="color:..."> ile özelleştirilen
   kısımlar: -webkit-text-fill-color:transparent üstteki kuraldan miras
   kalıp inline color'ı görünmez kılardı (gradient'in kendisi görünürdü,
   kullanıcının seçtiği renk değil). Inline renk verilmiş span'lerde
   dolgu rengini span'in kendi (currentColor) rengine sabitleyip
   gradient'i kapatıyoruz, böylece girilen renk gerçekten uygulanır. */
.kanokta-hero__title span[style*="color"] {
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: currentColor;
}

/* Mobilde gradyan/klip TAMAMEN kapatılır - .kanokta-baslik'teki AYNI
   düzeltme (bkz. main.css o bölüm), burada AYRICA gerekiyor çünkü
   .kanokta-hero__title .kanokta-baslik sınıfını KULLANMAZ, kendi
   bağımsız gradyan kuralını taşır. -webkit-text-fill-color:transparent
   üstteki temel kuralda KOŞULSUZ tanımlı olduğu için (bkz. yukarısı) bu
   düzeltme olmadan mobilde metin görünmez kalabiliyordu. */
@media (max-width: 640px) {
	.kanokta-hero__title {
		background: none;
		-webkit-background-clip: initial;
		background-clip: initial;
		-webkit-text-fill-color: var(--kanokta-primary-dark);
		color: var(--kanokta-primary-dark);
	}
}

.kanokta-hero__subtitle {
	font-size: 1.1rem;
	color: var(--kanokta-text-muted);
	margin-bottom: 28px;
}

.kanokta-hero__checklist {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kanokta-hero__checklist li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: var(--kanokta-primary-dark);
}

.kanokta-hero__checklist-icon {
	flex-shrink: 0;
	display: inline-flex;
	color: #1DA851;
}

/* Customizer'dan yüklenen özel avantaj ikonu: orijinal görsel hangi
   oranda olursa olsun sabit bir kutuya sığdırılır, düzeni bozmaz. */
.kanokta-hero__checklist-icon-img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	display: block;
}

.kanokta-hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.kanokta-hero__mascot {
	display: flex;
	align-items: center;
	justify-content: center;
}

.kanokta-hero__mascot-image {
	width: 100%;
	max-width: 560px;
	max-height: 70vh;
	height: auto;
	/* Boyut kaydırıcısı kasıtlı olarak width/max-width yerine transform:
	   scale() ile uygulanır. width tabanlı bir yaklaşımda max-width, %100'ü
	   aşan değerlerde kutunun kendi genişliğini eziyor ve büyütme etkisini
	   iptal ediyordu (yalnızca küçültme çalışıyordu). transform, kutunun
	   layout boyutunu değiştirmediği için grid/flex yerleşimini bozmadan
	   hem büyütme hem küçültme gerçek şekilde çalışır. */
	transform: translate(var(--kanokta-mascot-x, 0px), var(--kanokta-mascot-y, 0px)) scale(var(--kanokta-mascot-scale, 1));
}

.kanokta-hero__stats {
	margin-top: 48px;
	background-color: var(--kanokta-white);
	border-radius: var(--kanokta-radius);
	box-shadow: 0 12px 30px color-mix(in srgb, var(--kanokta-primary-dark) 8%, transparent);
	padding: 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.kanokta-hero__stat {
	display: flex;
	align-items: center;
	gap: 14px;
}

.kanokta-hero__stat-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--kanokta-accent-lighter);
	color: var(--kanokta-primary);
}

/* Customizer'dan yüklenen özel istatistik ikonu: orijinal görsel hangi
   oranda olursa olsun sabit bir kutuya sığdırılır, düzeni bozmaz. */
.kanokta-hero__stat-icon-img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	display: block;
}

.kanokta-hero__stat-text {
	font-weight: 600;
	color: var(--kanokta-primary-dark);
	font-size: .95rem;
}

@media (max-width: 860px) {
	.kanokta-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.kanokta-hero__content {
		max-width: none;
		margin-inline: auto;
	}

	.kanokta-hero__checklist li {
		justify-content: center;
	}

	.kanokta-hero__actions {
		justify-content: center;
	}

	.kanokta-hero__mascot {
		order: -1;
		margin-bottom: 24px;
	}

	.kanokta-hero__mascot-image {
		max-width: 300px;
		max-height: 45vh;
		margin-inline: auto;
	}

	.kanokta-hero__stats {
		grid-template-columns: repeat(2, 1fr);
		text-align: left;
	}
}

/* ==========================================================================
   Genel bölüm stili
   ========================================================================== */
.kanokta-section {
	padding: 64px 0;
	text-align: center;
	/* Hero'nun renkli gradient arka planından sonra temiz, kasıtlı bir
	   geçiş için beyaz; rastgele (nth-of-type'a bağlı) alternatif renk
	   yerine, tonu farklı olması gereken bölümler (ör. .kanokta-partners,
	   .kanokta-awards) kendi arka planını kendi sınıfında tanımlar. */
	background-color: var(--kanokta-white);
}

.kanokta-section p {
	max-width: 640px;
	margin: 0 auto;
	color: var(--kanokta-text-muted);
}

/* ==========================================================================
   Breadcrumb (template-parts/breadcrumb.php)
   Genel amaçlı; ortak sayfa başlığı şeridinin (template-parts/page-header.php)
   en üstünde, tüm sayfalarda kullanılır.
   ========================================================================== */
.kanokta-breadcrumb {
	margin-bottom: 20px;
}

.kanokta-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 6px;
	font-size: .85rem;
	color: var(--kanokta-text-muted);
}

.kanokta-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.kanokta-breadcrumb__item:not(:last-child)::after {
	content: "/";
	color: var(--kanokta-border);
}

.kanokta-breadcrumb__item a {
	color: var(--kanokta-text-muted);
	text-decoration: none;
}

.kanokta-breadcrumb__item a:hover,
.kanokta-breadcrumb__item a:focus {
	color: var(--kanokta-primary);
	text-decoration: underline;
}

.kanokta-breadcrumb__item [aria-current="page"] {
	color: var(--kanokta-text);
	font-weight: 600;
}

/* ==========================================================================
   Ortak Sayfa Başlığı (.kanokta-sayfa-baslik, bkz. template-parts/page-header.php)
   Sabit sayfalar, arşivler ve detay sayfalarında TEK tip, kompakt şerit.
   Kutu/gölge/çerçeve yok: header'ın hemen altında tam genişlikte, marka
   renginin ~%5 tonundan beyaza çok hafif bir geçiş ve içerikten ayıran
   1px alt çizgi. Yukarıdan aşağıya: breadcrumb -> sola yaslı H1 -> kısa
   gradient vurgu çizgisi -> (varsa) alt başlık. Ürüne özel maskot varsa
   sağda, mutlak konumlu olduğu için şerit yüksekliğini büyütmez.
   ========================================================================== */
.kanokta-sayfa-baslik {
	--kanokta-sayfa-baslik-dolgu: 14px;
	position: relative;
	overflow: hidden;
	padding-block: var(--kanokta-sayfa-baslik-dolgu);
	background: linear-gradient(180deg, color-mix(in srgb, var(--kanokta-primary) 5%, var(--kanokta-white)) 0%, var(--kanokta-white) 100%);
	border-bottom: 1px solid var(--kanokta-border);
}

.kanokta-sayfa-baslik__ic {
	position: relative;
}

.kanokta-sayfa-baslik .kanokta-breadcrumb {
	margin-bottom: 6px;
}

.kanokta-sayfa-baslik .kanokta-breadcrumb__list {
	font-size: .78rem;
}

.kanokta-sayfa-baslik .kanokta-breadcrumb__item [aria-current="page"] {
	color: var(--kanokta-text-muted);
	font-weight: 500;
}

.kanokta-sayfa-baslik__baslik {
	margin: 0;
	font-family: var(--kanokta-font-display);
	font-weight: 800;
	font-size: 1.3125rem;
	line-height: 1.25;
	letter-spacing: -.005em;
	color: var(--kanokta-primary-dark);
	text-align: left;
}

/* Vurgu çizgisi: H1'in hemen altında marka renginde kısa gradient. */
.kanokta-sayfa-baslik__baslik::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 10px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--kanokta-primary-dark), var(--kanokta-primary));
}

.kanokta-sayfa-baslik__aciklama {
	max-width: 720px;
	margin-top: 10px;
	color: var(--kanokta-text-muted);
	font-size: .8125rem;
	line-height: 1.55;
}

/* Uzun alt başlıklarda "Devamını oku" (yerel <details>, JS gerekmez). */
.kanokta-sayfa-baslik__devami {
	display: inline;
}

.kanokta-sayfa-baslik__devami summary {
	display: inline;
	margin-left: 4px;
	color: var(--kanokta-primary);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.kanokta-sayfa-baslik__devami summary::-webkit-details-marker {
	display: none;
}

.kanokta-sayfa-baslik__devami[open] summary {
	display: none;
}

.kanokta-sayfa-baslik__maskot {
	display: none;
}

@media (min-width: 768px) {
	.kanokta-sayfa-baslik {
		--kanokta-sayfa-baslik-dolgu: 20px;
	}

	.kanokta-sayfa-baslik__baslik {
		font-size: 1.6875rem;
	}

	.kanokta-sayfa-baslik__aciklama {
		font-size: .90625rem;
	}

	.kanokta-sayfa-baslik--maskotlu .kanokta-sayfa-baslik__metin {
		padding-right: 180px;
	}

	/* Maskot şeridin tam yüksekliğini kaplar ama akıştan çıkarıldığı için
	   şeridi büyütmez; taşan kısım .kanokta-sayfa-baslik overflow ile kırpılır. */
	.kanokta-sayfa-baslik__maskot {
		display: block;
		position: absolute;
		right: 20px;
		top: calc(-1 * var(--kanokta-sayfa-baslik-dolgu));
		bottom: calc(-1 * var(--kanokta-sayfa-baslik-dolgu));
		width: 160px;
	}

	.kanokta-sayfa-baslik__maskot img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: bottom center;
	}
}

/* Şerit ile içerik arası en fazla 24px: şeridi izleyen <main>'in üst
   boşluğu her şablonda tek kuralla sabitlenir; main'in ilk bölümü kendi
   üst dolgusunu taşıyorsa (hesaplama araçları listesi) o da sıfırlanır. */
.kanokta-sayfa-baslik + main {
	padding-top: 24px;
}

.kanokta-sayfa-baslik + main > .kanokta-hesaplama-hub__araclar:first-child {
	padding-top: 0;
}

/* ==========================================================================
   İçerik Detay Sayfaları - Ortak "İçerik + Sidebar" Düzeni
   (bkz. template-parts/detay-yan-panel.php, blog-detay-yan-panel.php) - ürün
   ve blog yazısı tekil sayfalarında (single-kanokta_urun.php, single.php)
   PAYLAŞILAN grid. Blog yazısında başlık bu düzenin DIŞINDA, üstteki ortak
   şerittedir; ürün sayfası ise başlık kutusunu ve maskotu sol sütunda
   taşır (bkz. .kanokta-detay-layout--baslikli aşağıda).
   DOM sırası BİLEREK ana içerik -> yan sırasıyladır (mobilde sidebar
   içeriğin altına düşer); masaüstünde grid-template-areas ile sidebar sol,
   içerik sağ sütunda durur.
   ========================================================================== */
.kanokta-detay-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}

.kanokta-detay-layout__ana {
	min-width: 0;
}

@media (min-width: 960px) {
	.kanokta-detay-layout {
		grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
		grid-template-areas: "yan icerik";
		gap: 40px;
	}

	.kanokta-detay-layout__yan {
		grid-area: yan;
		position: sticky;
		top: 108px;
	}

	.kanokta-detay-layout__ana {
		grid-area: icerik;
	}

	/* Ürün detay sayfası (single-kanokta_urun.php): başlık kutusu
	   (template-parts/detay-baslik-kutu.php) sol sütunun en üstünde,
	   altında sidebar; ürüne maskot yüklenmişse (detay-maskot.php) ikisinin
	   arasına ek bir satır girer. Maskot yoksa boş satır kalmasın diye
	   3 satırlı düzen yalnızca --maskotlu ile devreye girer. */
	.kanokta-detay-layout--baslikli {
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"baslik icerik"
			"yan    icerik";
	}

	.kanokta-detay-layout--baslikli.kanokta-detay-layout--maskotlu {
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"baslik icerik"
			"maskot icerik"
			"yan    icerik";
	}

	.kanokta-detay-layout__baslik {
		grid-area: baslik;
	}

	.kanokta-detay-layout__maskot {
		grid-area: maskot;
	}
}

/* Ana içerik masaüstünde kompakt, SAĞA yaslı bir okuma sütunu gibi davranır
   (ortalı değil) - sidebar'a doğru değil, sayfanın sağ kenarına yaslanır.
   Mobilde tam genişlik, normal (sola yaslı) akışa döner. */
@media (min-width: 960px) {
	.kanokta-detay-layout__ana-icerik {
		max-width: 680px;
		margin-left: auto;
	}
}

/* ==========================================================================
   İçerik Detay Sayfaları - Ortak Başlık Kutusu
   (bkz. template-parts/detay-baslik-kutu.php) - YALNIZCA ürün detay
   sayfasında (single-kanokta_urun.php). Breadcrumb KUTUNUN DIŞINDA/
   ÜSTÜNDE (sayfanın en üstünde kalsın diye), H1 + alt açıklama beyaz/
   yuvarlak köşeli/gölgeli bir "gömülü kutu" içinde. H1 kendi pill zeminini
   (::before) KAPATIR (bkz. .kanokta-baslik--kompakt::before altta) - aksi
   hâlde iç içe iki kutu görünürdü.
   ========================================================================== */
.kanokta-detay-layout__baslik .kanokta-breadcrumb {
	margin-bottom: 16px;
}

.kanokta-detay-sidebar__baslik-kutu {
	padding: 24px 22px;
	background-color: var(--kanokta-white);
	border-radius: 20px;
	box-shadow: 0 12px 32px color-mix(in srgb, var(--kanokta-primary-dark) 8%, transparent);
	text-align: center;
}

/* Alt açıklama: BİLEREK "ince" (300 ağırlık, bkz. functions.php Google
   Fonts - Poppins:wght@300;600) - SEO için buraya girilen metin bazen
   uzun olur, kalın/normal ağırlıkta kalabalık/kaba dururdu. Belli bir
   karakter sınırından sonra kırpılıp <details>/<summary> ile genişletilir
   (bkz. template-parts/detay-baslik-kutu.php, .kanokta-mtv-page ... details
   ile AYNI yerel açılır/kapanır deseni - main.css içinde ayrıca arayın).
   Sola yaslı - kutu (.kanokta-detay-sidebar__baslik-kutu) ortalı olsa da,
   gövde metni + "Devamını oku" bağlantısı ortalı kalınca okunması zor/
   garip duruyordu; H1 (ayrıca ortalı) ile bu paragraf arasındaki hizalama
   FARKI BİLİNÇLİDİR. */
.kanokta-detay-sidebar__aciklama {
	margin-top: 10px;
	text-align: left;
	font-family: var(--kanokta-font-subheading);
	font-weight: 300;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--kanokta-text-muted);
}

.kanokta-detay-sidebar__devami {
	display: inline;
}

.kanokta-detay-sidebar__devami summary {
	display: inline-block;
	margin-left: 4px;
	color: var(--kanokta-primary);
	font-weight: 600;
	font-size: .88rem;
	cursor: pointer;
	list-style: none;
}

.kanokta-detay-sidebar__devami summary::-webkit-details-marker {
	display: none;
}

.kanokta-detay-sidebar__devami[open] summary {
	display: block;
	margin: 8px 0 4px;
	text-align: left;
}

/* ==========================================================================
   İçerik Detay Sayfaları - Ortak Sidebar Kabuğu (.kanokta-detay-sidebar,
   bkz. template-parts/detay-yan-panel.php)
   ========================================================================== */
.kanokta-detay-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.kanokta-detay-sidebar__mascot {
	display: flex;
	justify-content: center;
}

.kanokta-detay-sidebar__mascot img {
	max-width: 78%;
	height: auto;
}

.kanokta-detay-sidebar__cta {
	width: 100%;
	justify-content: center;
	padding: 16px 24px;
	font-size: 1.02rem;
}

.kanokta-detay-sidebar__box {
	padding: 22px;
	background-color: #F5F4F0;
	border-radius: var(--kanokta-radius);
}

.kanokta-detay-sidebar__box-title {
	font-size: 1.02rem;
	margin-bottom: 14px;
}

.kanokta-detay-sidebar__kampanyalar {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kanokta-detay-sidebar__kampanya {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	background-color: var(--kanokta-white);
	border-radius: 12px;
	color: var(--kanokta-text);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--kanokta-primary-dark) 6%, transparent);
	transition: box-shadow .2s ease, transform .2s ease;
}

.kanokta-detay-sidebar__kampanya:hover,
.kanokta-detay-sidebar__kampanya:focus {
	box-shadow: 0 6px 16px color-mix(in srgb, var(--kanokta-primary-dark) 12%, transparent);
	transform: translateY(-2px);
	color: var(--kanokta-text);
}

.kanokta-detay-sidebar__kampanya-medya {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: color-mix(in srgb, var(--kanokta-primary) 14%, var(--kanokta-white));
	color: var(--kanokta-primary);
}

.kanokta-detay-sidebar__kampanya-medya img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kanokta-detay-sidebar__kampanya-baslik {
	font-weight: 700;
	font-size: .88rem;
	line-height: 1.35;
}

.kanokta-detay-sidebar__tumunu-gor {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-top: 12px;
	color: var(--kanokta-primary);
	font-weight: 600;
	font-size: .85rem;
}

/* ==========================================================================
   İçerik Detay Sayfaları - Anlaşmalı Şirketler Şeridi
   (bkz. template-parts/detay-partner-seridi.php) - ana içeriğin ALTINDA,
   kendiliğinden sürekli kayan (marquee) tek satırlık bir logo şeridi. Her
   logo kendi genişliğince yer kaplar - dar bir mini gride sıkışıp okunaksız
   kalmaz. Liste İKİ KEZ basılır (asıl + görsel klon) - track %50 kayınca
   (tam olarak asıl listenin genişliği) baştan başlıyormuş gibi görünür,
   dikişsiz bir döngü oluşur.
   ========================================================================== */
.kanokta-detay-partner-seridi {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--kanokta-border);
}

.kanokta-detay-partner-seridi__baslik {
	font-size: 1rem;
	margin-bottom: 16px;
}

.kanokta-detay-partner-seridi__viewport {
	overflow: hidden;
	/* Kenarlardaki logoların aniden kesilmesi yerine yumuşak solma. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.kanokta-detay-partner-seridi__track {
	display: flex;
	width: max-content;
}

.kanokta-detay-partner-seridi__liste {
	list-style: none;
	margin: 0;
	padding: 6px 7px;
	display: flex;
	gap: 14px;
	flex-shrink: 0;
}

.kanokta-detay-partner-seridi__liste li {
	flex: 0 0 auto;
}

/* .kanokta-partners__item (template-parts/anlasmali-sirketler.php) ile AYNI
   "beyaz kutu + ince kenarlık" tekniği - kenarlık BİLEREK var: beyaz/açık
   renkli, şeffaf zeminli logolar (birçok sigorta şirketi logosu böyledir)
   kenarlık OLMADAN beyaz zeminde görünmez hâle gelirdi. */
.kanokta-detay-partner-seridi__liste li a,
.kanokta-detay-partner-seridi__liste li[aria-hidden] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 64px;
	padding: 10px;
	background-color: var(--kanokta-white);
	border: 1px solid var(--kanokta-border);
	border-radius: 10px;
}

/* HTML width/height özniteliği YOK (bkz. kanokta_render_partner_seridi_ogesi()
   - inc/post-types.php) - ölçülendirme TAMAMEN burada, CSS'te: her logo,
   orijinal en-boy oranı KORUNARAK kutuya sığdırılır, hiçbir kısmı kesilmez. */
.kanokta-detay-partner-seridi__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.kanokta-detay-partner-seridi__fallback {
	font-size: .72rem;
	font-weight: 600;
	text-align: center;
	color: var(--kanokta-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.kanokta-detay-partner-seridi__track {
		animation: kanokta-partner-kaydir 32s linear infinite;
	}

	.kanokta-detay-partner-seridi__viewport:hover .kanokta-detay-partner-seridi__track,
	.kanokta-detay-partner-seridi__viewport:focus-within .kanokta-detay-partner-seridi__track {
		animation-play-state: paused;
	}
}

@keyframes kanokta-partner-kaydir {
	from {
		transform: translateX(0);
	}

	to {
		/* İki özdeş liste yan yana - %50 tam olarak birincinin genişliği,
		   bu yüzden döngü dikişsiz görünür. */
		transform: translateX(-50%);
	}
}

/* Hareket azaltma tercihi VARSA: animasyon tamamen kapanır, görsel klon
   (ikinci liste) gizlenir, şerit yatayda ELLE kaydırılabilir tek bir
   listeye döner - içerik hâlâ tamamen erişilebilir kalır. */
@media (prefers-reduced-motion: reduce) {
	.kanokta-detay-partner-seridi__viewport {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.kanokta-detay-partner-seridi__liste--klon {
		display: none;
	}
}

/* ==========================================================================
   Neden Biz — 4 kartlık sade grid
   Masaüstünde 2 sütun (>=640px), geniş masaüstünde 4 sütun (>=1200px);
   mobilde tek sütun. Giriş animasyonu zaten var olan .kanokta-reveal
   (IntersectionObserver, main.js) mekanizmasıdır — tek seferlik fade-in,
   scroll-driven bir efekt değil. Bu bölümde maskot YOK (bilinçli olarak
   kaldırıldı; maskot yalnızca hero ve teklif formunda kullanılıyor).
   ========================================================================== */
.kanokta-why-us {
	position: relative;
	/* Düz beyaz yerine, marka renginden çok açık, noktalı bir doku. */
	background-image: radial-gradient(circle, var(--kanokta-border) 1.5px, transparent 1.5px);
	background-size: 28px 28px;
}

.kanokta-why-us__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 40px;
	text-align: left;
}

@media (min-width: 640px) {
	.kanokta-why-us__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.kanokta-why-us__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.kanokta-why-us__card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	min-height: 260px;
	padding: 30px 26px;
	border-radius: 20px;
}

.kanokta-why-us__card-number {
	position: absolute;
	top: -10px;
	right: 14px;
	z-index: 0;
	font-family: var(--kanokta-font-heading);
	font-size: 5rem;
	font-weight: 800;
	line-height: 1;
	opacity: .16;
	pointer-events: none;
	user-select: none;
}

/* Her kart, marka paletinden color-mix() ile üretilmiş farklı bir tonda —
   aralarında net bir renk çeşitliliği olsun diye dört ton da birbirinden
   belirgin şekilde ayrışıyor. */
.kanokta-why-us__card--dark {
	background-color: color-mix(in srgb, var(--kanokta-primary-dark) 94%, black 6%);
	color: var(--kanokta-white);
}

.kanokta-why-us__card--primary {
	background-color: var(--kanokta-primary);
	color: var(--kanokta-white);
}

.kanokta-why-us__card--light {
	background-color: color-mix(in srgb, var(--kanokta-accent-light) 55%, var(--kanokta-white));
	color: var(--kanokta-primary-dark);
}

.kanokta-why-us__card--blend {
	background-color: color-mix(in srgb, var(--kanokta-primary) 35%, var(--kanokta-accent-light) 65%);
	color: var(--kanokta-primary-dark);
}

.kanokta-why-us__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	margin-bottom: 20px;
}

.kanokta-why-us__card--dark .kanokta-why-us__icon,
.kanokta-why-us__card--primary .kanokta-why-us__icon {
	background-color: color-mix(in srgb, var(--kanokta-white) 22%, transparent);
	color: var(--kanokta-white);
}

.kanokta-why-us__card--light .kanokta-why-us__icon,
.kanokta-why-us__card--blend .kanokta-why-us__icon {
	background-color: var(--kanokta-primary-dark);
	color: var(--kanokta-white);
}

.kanokta-why-us__title {
	position: relative;
	z-index: 1;
	font-size: 1.15rem;
	margin-bottom: 8px;
	color: inherit;
}

.kanokta-why-us__desc {
	position: relative;
	z-index: 1;
	font-size: .92rem;
	line-height: 1.6;
}

/* color:inherit + opacity yerine bilinçli olarak açık renk değerleri:
   opacity, aynı zamanda arkadaki dev numarayla (z-index:0) da karışıp
   koyu kartlarda kontrastı öngörülemez şekilde düşürüyordu. */
.kanokta-why-us__card--dark .kanokta-why-us__desc,
.kanokta-why-us__card--primary .kanokta-why-us__desc {
	color: rgba(255, 255, 255, .85);
}

.kanokta-why-us__card--light .kanokta-why-us__desc,
.kanokta-why-us__card--blend .kanokta-why-us__desc {
	color: var(--kanokta-primary-dark);
}

@media (prefers-reduced-motion: no-preference) {
	.kanokta-why-us__card {
		transition: transform .2s ease, box-shadow .2s ease;
	}

	.kanokta-why-us__card:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 32px color-mix(in srgb, var(--kanokta-primary-dark) 16%, transparent);
	}
}

/* ==========================================================================
   Scroll Reveal (Intersection Observer ile main.js tarafından tetiklenir)
   Yalnızca hareket tercihi kısıtlanmamışsa etkindir; aksi halde ve JS
   çalışmazsa öğeler varsayılan olarak zaten görünür kalır.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.kanokta-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .6s ease, transform .6s ease;
	}

	.kanokta-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	.kanokta-why-us__card:nth-child(1) {
		transition-delay: 0s;
	}

	.kanokta-why-us__card:nth-child(2) {
		transition-delay: .12s;
	}

	.kanokta-why-us__card:nth-child(3) {
		transition-delay: .24s;
	}

	.kanokta-why-us__card:nth-child(4) {
		transition-delay: .36s;
	}
}

/* ==========================================================================
   Bölüm Başlığı 2.0 - Hareketli, Karakterli Başlık Sistemi (.kanokta-baslik)
   Sitedeki TÜM ana bölüm başlıklarında (H2 - "Sigorta Ürünlerimiz",
   "Neden Biz?", "Size Özel Sigorta Teklifi Alın", "Ödüllerimiz ve
   Sertifikalarımız", "Ekibimizle Tanışın", "Güvenilir İş Ortaklarımız"
   vb.) kullanılan, TEK bir yerden yönetilen tasarım sistemi. Sayfa H1'leri
   bunu KULLANMAZ - onlar ortak sayfa başlığı şeridindedir (bkz.
   .kanokta-sayfa-baslik, template-parts/page-header.php).
   ------------------------------------------------------------------------
   - Tipografi: --kanokta-font-display (Montserrat, bkz. style.css :root) -
     yalnızca burada, gövde metninde KULLANILMAZ (okunabilirlik).
     text-transform:uppercase BİLİNÇLİ OLARAK kullanılmaz - CSS'in büyük
     harfe çevirme mantığı Türkçe "i/İ - ı/I" çiftini güvenilir biçimde
     ayırt etmez (ör. "Sigorta Ürünlerimiz" yanlış büyütülebilir).
   - Renk: marka renklerinden (--kanokta-primary-dark -> --kanokta-primary)
     bir gradyan, background-clip:text ile - admin Customizer'dan marka
     rengini değiştirirse gradyan da otomatik güncellenir (sabit hex YOK).
     Masaüstünde fare üzerine gelince (bkz. @media hover:hover) gradyan
     background-position ile kayar, "parlayan" bir vurgu hissi verir.
   - Sahne açılışı gibi ÜÇ KATMANLI, sıralı bir giriş koreografisi: main.js
     yalnızca TEK bir "is-visible" sınıfı ekler (IntersectionObserver ile,
     bkz. main.js), HER KATMAN o TEK sınıfın üstüne kendi transition-delay'iyle
     sıraya girer - JS'te ayrı ayrı zamanlanan adımlar YOKTUR, sıralama
     tamamen CSS'te çözülür:
       1) Pill zemin (::before) önce yatayda sıkışmış halden açılır.
       2) Metin KELİME KELİME (main.js tarafından her kelime kendi
          <span>'ine, sıra numarası da --i CSS değişkenine yazılır) aşağıdan
          yukarı + fade-in ile, artan bir gecikmeyle belirir.
       3) Dekoratif yıldız+nokta (::after, TEK bir CSS mask - saf CSS,
          ekstra görsel isteği YOK) döndürülmüş/küçültülmüş/kaymış bir
          başlangıç noktasından "toplanarak" son pozisyonuna gelir; oraya
          vardıktan HEMEN SONRA sürekli ama düşük genlikli bir süzülme
          animasyonuna (bkz. @keyframes kanokta-baslik-dekor-suzulme)
          SORUNSUZ devreder - süzülme animasyonunun 0%/100% karesi,
          giriş geçişinin bıraktığı son transform değeriyle BİREBİR AYNIDIR,
          bu yüzden devir anında görünür bir "sıçrama" olmaz.
     Erişilebilirlik/dayanıklılık: yalnızca @media (prefers-reduced-motion:
     no-preference) İÇİNDE tanımlanır - kısıtlıysa veya JS hiç çalışmazsa
     (main.js kelime bölme adımını atlar) metin ASLA bölünmez/gizlenmez,
     doğrudan tam/düz haliyle görünür kalır.
   ========================================================================== */
.kanokta-baslik {
	position: relative;
	/* display:inline-block YERİNE bilerek block + width:fit-content +
	   margin-inline:auto: böylece ortalanma bu bileşenin KENDİ içinde
	   çözülür, üst elemanın text-align:center taşımasına bağımlı KALMAZ
	   (.kanokta-page__inner gibi ortalanmamış bir üst eleman içinde
	   inline-block başlığı sola yaslardı). */
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 20px;
	margin-inline: auto;
	padding: 16px 40px;
	font-family: var(--kanokta-font-display);
	font-weight: 800;
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.25;
	letter-spacing: -.005em;
	/* Düz renk GERÇEK varsayılan - background-clip:text desteklemeyen bir
	   tarayıcıda metin gradyansız ama HER ZAMAN okunur kalır. Gradyan,
	   yalnızca destekleniyorsa @supports ile üstüne eklenir (aşağıda). */
	color: var(--kanokta-primary-dark);
	/* --kelime-sayisi: main.js, kelimelere böldüğü GERÇEK kelime sayısını
	   buraya yazar (bkz. main.js) - JS çalışmazsa (yalnızca reduced-motion
	   durumunda veya IntersectionObserver yoksa, o zaman zaten hiçbir
	   animasyon tetiklenmez) makul bir varsayılana düşer. Dekoratif şeklin
	   (::after) giriş gecikmesi, kelime sayısına göre HESAPLANIR - böylece
	   "Blog" gibi tek kelimelik bir başlıkta gereksiz yere geç, "Size Özel
	   Sigorta Teklifi Alın" gibi 5 kelimelik bir başlıkta erken/kelimelerin
	   üstüne binerek gelmez; her başlıkta kelimeler tam yerleşince gelir.
	   Mobilde @media max-width:640px içinde kendi çarpanıyla yeniden
	   hesaplanır (bkz. altta). */
	--kelime-sayisi: 3;
	--kanokta-baslik-dekor-gecikme: calc(.32s + (var(--kelime-sayisi) - 1) * .07s + .3s);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.kanokta-baslik {
		color: transparent;
		/* Mobil Safari/WebKit'te yalnızca color:transparent bazen YETERSİZ
		   kalıyor - gradyan metne KLİPLENMİYOR, metin düz (çoğunlukla
		   beyaza yakın/boş) görünüyor. -webkit-text-fill-color EXPLICIT
		   olarak da transparent yapılınca WebKit klipleme HER ZAMAN
		   uygulanıyor - bu, background-clip:text kullanan siteler için
		   bilinen/standart bir düzeltmedir. */
		-webkit-text-fill-color: transparent;
		background-image: linear-gradient(100deg, var(--kanokta-primary-dark) 15%, var(--kanokta-primary) 85%);
		background-size: 220% 100%;
		background-position: 0% 50%;
		-webkit-background-clip: text;
		background-clip: text;
	}

	@media (hover: hover) {
		.kanokta-baslik {
			transition: background-position .6s ease;
		}

		.kanokta-baslik:hover {
			background-position: 100% 50%;
		}
	}
}

/* Ürün detay sayfasının başlık kutusu (bkz. template-parts/detay-baslik-kutu.php,
   .kanokta-detay-sidebar__baslik-kutu) için küçültülmüş ölçek - dar sol sütuna (bkz.
   .kanokta-detay-layout main.css) sığması gerekir. Gradyanlı metin ve
   dekoratif yıldız (::after) KORUNUR; pill zemini (::before) ise KAPATILIR
   (aşağıda) - başlık zaten kendi beyaz kutusunun İÇİNDE durduğu için. */
.kanokta-baslik--kompakt {
	padding: 10px 26px;
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	margin-bottom: 14px;
}

.kanokta-baslik--kompakt::after {
	width: 20px;
	height: 20px;
	top: -4px;
	right: 2px;
}

/* Kompakt başlık artık kendi "gömülü kutusu" (.kanokta-detay-sidebar__baslik-kutu)
   içinde durur - kendi pill zemini (::before) İÇ İÇE İKİ KUTU görünümü
   yaratmasın diye kapatılır, dekoratif yıldız (::after) ve gradyanlı metin
   KORUNUR. */
.kanokta-baslik--kompakt::before {
	display: none;
}

/* Kelime sarmalayıcı/span'leri main.js tarafından eklenir - gerçek/okunabilir
   metin başlığın KENDİSİNİN aria-label'ındadır, bu içerik tamamen görsel
   (aria-hidden="true", bkz. main.js). JS hiç çalışmazsa bu span'ler HİÇ
   OLUŞMAZ, düz metin normal şekilde görünür kalır. */
.kanokta-baslik__kelimeler {
	display: inline;
}

.kanokta-baslik__kelime {
	display: inline-block;
}

.kanokta-baslik::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--kanokta-accent-light) 55%, transparent);
}

.kanokta-baslik::after {
	content: "";
	position: absolute;
	top: -6px;
	right: 4px;
	width: 30px;
	height: 30px;
	background-color: var(--kanokta-primary);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20 4l2.2 7.3L29 14l-6.8 2.7L20 24l-2.2-7.3L11 14l6.8-2.7z'/%3E%3Ccircle cx='6' cy='25' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20 4l2.2 7.3L29 14l-6.8 2.7L20 24l-2.2-7.3L11 14l6.8-2.7z'/%3E%3Ccircle cx='6' cy='25' r='3'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Sürekli mikro-hareket: 0%/100% karesi, aşağıdaki giriş geçişinin BIRAKTIĞI
   son değerle (translate(0,0) rotate(0) scale(1)) BİREBİR AYNI - geçişten
   animasyona geçişte görünür bir sıçrama OLMAZ. */
@keyframes kanokta-baslik-dekor-suzulme {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}

	50% {
		transform: translate(0, -3px) rotate(6deg) scale(1);
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* --- Katman 1: pill zemin, ilk açılan (sahne perdesi gibi) --- */
	.kanokta-baslik::before {
		transform: scaleX(.25);
		opacity: 0;
		transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
	}

	.kanokta-baslik.is-visible::before {
		transform: scaleX(1);
		opacity: 1;
	}

	/* --- Katman 2: kelimeler, pill'in hemen ardından sırayla belirir --- */
	.kanokta-baslik__kelime {
		opacity: 0;
		transform: translateY(60%);
		transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
		transition-delay: calc(.32s + var(--i, 0) * .07s);
	}

	.kanokta-baslik.is-visible .kanokta-baslik__kelime {
		opacity: 1;
		transform: translateY(0);
	}

	/* --- Katman 3: dekoratif şekil, kelimelerden sonra "toplanarak" gelir,
	   yerine oturur oturmaz sürekli süzülme animasyonuna devreder --- */
	.kanokta-baslik::after {
		opacity: 0;
		transform: translate(16px, -14px) rotate(-35deg) scale(.35);
		transition:
			opacity .45s ease var(--kanokta-baslik-dekor-gecikme),
			transform .55s cubic-bezier(.16, 1, .3, 1) var(--kanokta-baslik-dekor-gecikme);
	}

	.kanokta-baslik.is-visible::after {
		opacity: .9;
		transform: translate(0, 0) rotate(0deg) scale(1);
		animation: kanokta-baslik-dekor-suzulme 5s ease-in-out infinite;
		animation-delay: calc(var(--kanokta-baslik-dekor-gecikme) + .55s);
	}
}

@media (max-width: 640px) {
	.kanokta-baslik {
		padding: 10px 22px;
		/* Mobilde tüm zamanlamalar sıkılaştırılır (kelime gecikme çarpanı
		   .07s -> .035s) - performans ve daha hızlı bir "yerine oturma"
		   hissi için; dekoratif gecikme AYNI kelime sayısı formülüyle,
		   yalnızca bu daha kısa çarpanla yeniden hesaplanır. */
		--kanokta-baslik-dekor-gecikme: calc(.16s + (var(--kelime-sayisi) - 1) * .035s + .2s);
		/* Gradyanlı/klipli metin (bkz. yukarıdaki @supports bloğu) bazı
		   mobil tarayıcılarda -webkit-text-fill-color düzeltmesine rağmen
		   okunaksız kalabiliyor - mobilde GÜVENLİ TARAF seçilir: gradyan
		   TAMAMEN kapatılır, düz/okunaklı koyu renge dönülür. Bu kural
		   @supports bloğundan SONRA geldiği için (aynı özgüllük, kaynak
		   sırası) otomatik olarak kazanır, !important gerekmez. */
		color: var(--kanokta-primary-dark);
		-webkit-text-fill-color: var(--kanokta-primary-dark);
		background-image: none;
		-webkit-background-clip: initial;
		background-clip: initial;
	}

	.kanokta-baslik__kelime {
		transition-delay: calc(.16s + var(--i, 0) * .035s);
	}

	/* Mobilde dekoratif öğe küçülür ve sürekli süzülme animasyonu
	   TAMAMEN kaldırılır (performans) - giriş geçişiyle yerine oturur,
	   sonra sabit kalır. */
	.kanokta-baslik::after {
		width: 22px;
		height: 22px;
	}

	.kanokta-baslik.is-visible::after {
		animation: none;
	}
}

/* Alt başlıklar (H3) ve bölüm başlıklarının hemen altındaki tanıtım
   paragrafları - --kanokta-font-subheading (Poppins 600, bkz. style.css
   :root). H3, style.css'teki genel h1-h6 kuralını (Plus Jakarta Sans)
   BİLEREK ezer - main.css o kuraldan SONRA yüklendiği için ayrıca bir
   özgüllük artırma/ID gerekmez. ".kanokta-baslik + p" seçici sayesinde
   HİÇBİR template dosyasına dokunmadan, yalnızca CSS ile TÜM bölüm
   başlıklarının hemen altındaki tanıtım paragrafı otomatik olarak bu
   fontu alır (bkz. urun-kartlari.php, neden-biz.php, oduller.php vb. -
   hepsinde <h2 class="kanokta-baslik"> hemen ardından bir <p> gelir). */
h3 {
	font-family: var(--kanokta-font-subheading);
	font-weight: 600;
}

.kanokta-baslik + p {
	position: relative;
	margin-top: 26px;
	font-family: var(--kanokta-font-subheading);
	font-weight: 500;
}

/* Başlık/alt başlık ayracı: kısa, marka renginde, ortalanmış bir çizgi +
   ortasında küçük bir "boncuk" (iki katmanlı background-image - JS/ekstra
   görsel YOK). ".kanokta-baslik + p::before" sayesinde HİÇBİR template
   dosyasına dokunmadan, .kanokta-baslik'i bir <p> takip eden HER yerde
   otomatik görünür (bkz. yukarıdaki aynı seçici gerekçesi). Yalnızca bir
   ALT başlık/tanıtım paragrafı VARSA görünür - .kanokta-baslik TEK
   BAŞINA (ör. "Blog" gibi paragrafsız kullanımlarda) hiçbir ayraç
   basmaz, boşluk bırakmaz. */
.kanokta-baslik + p::before {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	margin: 0 auto 18px;
	background-image:
		radial-gradient(circle, var(--kanokta-primary-dark) 0 4px, transparent 4px),
		linear-gradient(90deg, var(--kanokta-primary-dark), var(--kanokta-primary));
	background-repeat: no-repeat;
	background-position: center, center;
	background-size: 8px 8px, 100% 2px;
}

/* Çizilme efekti: soldan sağa genişleyerek belirir - başlık kelimeleri
   yerleştikten HEMEN SONRA (bkz. sabit gecikme aşağıda; .kanokta-baslik'in
   kendi --kanokta-baslik-dekor-gecikme'si dinamik olsa da, o KARDEŞ bir
   elemana - bu <p>'ye - CSS'te miras KALMAZ, bu yüzden burada makul/sabit
   bir gecikme kullanılır). Tetikleyici main.js'te AYRICA bir kod
   GEREKTİRMEZ - .kanokta-baslik.is-visible olduğu AN, bitişik kardeş
   seçici (+) ile bu <p>'nin ::before'u da tetiklenir. */
@media (prefers-reduced-motion: no-preference) {
	.kanokta-baslik + p::before {
		transform: scaleX(0);
		transform-origin: left;
		opacity: 0;
		transition: transform .5s cubic-bezier(.16, 1, .3, 1) 1s, opacity .3s ease 1s;
	}

	.kanokta-baslik.is-visible + p::before {
		transform: scaleX(1);
		opacity: 1;
	}

	@media (max-width: 640px) {
		/* Mobilde başlık kelimeleri de daha hızlı yerleşiyor (bkz. yukarıdaki
		   .kanokta-baslik mobil kuralları) - ayracın gecikmesi de aynı
		   ölçüde kısaltılır. */
		.kanokta-baslik + p::before {
			transition-delay: .55s, .55s;
		}
	}
}

@media (max-width: 640px) {
	.kanokta-baslik + p::before {
		width: 56px;
	}
}

/* Blog yazı içeriği (post body) - YALNIZCA tekil bir blog yazısı
   görüntülenirken (bkz. single.php), sitenin genel gövde fontunu (Inter)
   DEĞİŞTİRMEZ. ".type-post" WordPress'in post_class()'ının otomatik
   eklediği bir sınıftır (post_type='post' için) - bu yüzden Sayfalarda
   (page-*.php, post_type='page') veya özel içerik türlerinde (kanokta_odul
   vb.) YANLIŞLIKLA eşleşmez, herhangi bir template dosyasını değiştirmeye
   gerek kalmaz. */
.type-post .kanokta-page__content {
	font-family: var(--kanokta-font-blog-body);
	font-weight: 400;
}

.type-post .kanokta-page__content strong,
.type-post .kanokta-page__content b {
	font-weight: 500;
}

/* ==========================================================================
   Bölüm Geçiş Şekli (.kanokta-bolum-gecis, bkz. template-parts/bolum-gecis.php)
   Ardışık iki bölüm arasındaki GERÇEK bir renk değişimini (bkz. o
   template-part'ın docblock'u - yalnızca üç sınırda kullanılır: Teklif
   Formu->Anlaşmalı Şirketler, Anlaşmalı Şirketler->Ödüller, Ekip
   Bandı->Referanslar) düz bir çizgi yerine yumuşak bir SVG dalgayla
   yumuşatır. Bu template-part'ı KULLANAN bölümün kendisi (.kanokta-partners,
   .kanokta-awards, .kanokta-references) position:relative TAŞIMALIDIR -
   aşağıda tanımlanır. Mobilde dalga daha kısa/sade (bkz. @media
   max-width:640px) - performans için, ama görsel kimlik kaybolmaz.
   ========================================================================== */
.kanokta-bolum-gecis {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 70px;
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
	z-index: 1;
}

.kanokta-bolum-gecis__svg {
	display: block;
	width: 100%;
	height: 100%;
}

.kanokta-bolum-gecis__yol {
	fill: var(--kanokta-gecis-renk, var(--kanokta-white));
}

@media (min-width: 960px) {
	.kanokta-bolum-gecis {
		height: 90px;
	}
}

@media (max-width: 640px) {
	.kanokta-bolum-gecis {
		height: 36px;
	}
}

/* ==========================================================================
   Teklif Formu
   ========================================================================== */
/* Bölümün arkasında, gerçek bir görsel olmadan da derinlik hissi veren,
   marka tonlarından çok hafif bir radyal parlama; formun beyaz kartı
   bunun üzerinde belirginleşir. */
.kanokta-quote-form {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--kanokta-accent-light) 60%, transparent) 0%, transparent 55%),
		radial-gradient(circle at 6% 100%, color-mix(in srgb, var(--kanokta-accent-light) 35%, transparent) 0%, transparent 45%),
		var(--kanokta-white);
}

/* "Kurumsal form" hissi yerine daha davetkar/ince bir görünüm: başlık
   sitedeki diğer .kanokta-baslik kullanımlarından (varsayılan Unbounded
   800) biraz daha ince (700 - bkz. functions.php'deki iki ağırlık
   yüklemesi), giriş metni de standart gövde metninden hafifçe küçük/soluk. */
.kanokta-quote-form .kanokta-baslik {
	font-weight: 700;
}

.kanokta-quote-form > .kanokta-container > p {
	color: var(--kanokta-text-muted);
	font-size: .98rem;
}

.kanokta-form-notice {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 640px;
	margin: 0 auto 24px;
	padding: 14px 20px;
	border-radius: var(--kanokta-radius);
	font-weight: 600;
	text-align: center;
}

.kanokta-form-notice svg {
	flex-shrink: 0;
}

.kanokta-form-notice--success {
	background-color: #E4F7EC;
	color: #1E7A43;
	border: 1px solid #B7E8CB;
}

.kanokta-form-notice--error {
	background-color: #FCEAEA;
	color: #B3261E;
	border: 1px solid #F3BEBE;
}

/* Form + maskot yerleşimi. Maskot yoksa (--no-mascot) form tek başına,
   ortalanmış kalır. align-items: start (center DEĞİL) bilinçli: form
   içeriği seçilen ürüne göre boy değiştirir (ör. Sağlık Sigortası
   Formu'nun çok alanlı yapısı diğerlerinden belirgin şekilde uzundur) -
   dikey ortalama olsaydı satır yüksekliği büyüdükçe maskot da aşağı
   kayar/orantısız görünürdü. Üste sabitlenip position:sticky ile de
   ekranda sabit kalması, maskotun form boyundan tamamen bağımsız,
   tutarlı bir konumda durmasını sağlar. */
.kanokta-quote-form__layout {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: 32px;
	max-width: 960px;
	margin: 24px auto 0;
}

.kanokta-quote-form__layout--no-mascot {
	grid-template-columns: 1fr;
	max-width: 560px;
}

.kanokta-quote-form__mascot {
	position: sticky;
	top: 24px;
	align-self: start;
}

.kanokta-quote-form__mascot-image {
	display: block;
	max-width: 280px;
	height: auto;
	margin: 0 auto;
	/* Hero maskotundaki gibi, boyut kaydırıcısı layout'u etkilememesi için
	   width yerine transform: scale() ile uygulanır (bkz. .kanokta-hero__mascot-image). */
	transform: scale(var(--kanokta-quote-mascot-scale, 1));
	transform-origin: top center;
}

.kanokta-quote-form__form {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	text-align: left;
	background-color: var(--kanokta-white);
	border: 1px solid var(--kanokta-border);
	border-radius: 28px;
	box-shadow: 0 20px 50px color-mix(in srgb, var(--kanokta-primary-dark) 10%, transparent);
	padding: 28px 32px;
}

.kanokta-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* [hidden] burada display:flex'i ezmezse (author CSS, tarayıcının
   varsayılan [hidden]{display:none} kuralından önceliklidir), alan
   "gizli" olsa bile görünür kalır — main.js'in plaka alanı için
   hidden özniteliğini kullandığı yerde bu kritik. */
.kanokta-form-field[hidden] {
	display: none;
}

.kanokta-form-field--full {
	grid-column: 1 / -1;
}

/* Her alan AYNI dikey yapıyı (statik label + input/select) paylaşır -
   bkz. template-parts/teklif-form-alanlari.php dosya başı yorumu. Bu,
   2 sütunlu bir grid satırında farklı alan tiplerinin (select/date/
   number bir yanda, metin girişi diğer yanda) input kutularının aynı
   yükseklikten başlamasını garanti eder; önceki "floating label"
   deseni yalnızca metin girişlerinde çalıştığından bu garantiyi
   veremiyordu ve Sağlık/Yangın formlarında hizasızlığa yol açıyordu. */
.kanokta-form-field label {
	font-weight: 500;
	color: var(--kanokta-primary-dark);
	font-size: .84rem;
	line-height: 1.3;
}

.kanokta-form-field input,
.kanokta-form-field select {
	padding: 11px 14px;
	border: 1px solid var(--kanokta-border);
	border-radius: 10px;
	background-color: var(--kanokta-white);
	color: var(--kanokta-text);
	font-weight: 400;
	font-size: .95rem;
	width: 100%;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--kanokta-primary-dark) 4%, transparent);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.kanokta-form-field input::placeholder {
	color: var(--kanokta-text-muted);
	opacity: .65;
}

/* Teklif formuna özel: belirgin şekilde yuvarlatılmış inputlar.
   kanokta-campaign-join__form da aynı .kanokta-form-field sınıfını
   kullandığından bilinçli olarak .kanokta-quote-form altında kapsanır,
   kampanya formunu etkilemez. */
.kanokta-quote-form .kanokta-form-field input,
.kanokta-quote-form .kanokta-form-field select {
	border-radius: 16px;
}

.kanokta-form-field input:hover:not(:focus),
.kanokta-form-field select:hover:not(:focus) {
	border-color: var(--kanokta-primary-light);
}

.kanokta-form-field input:focus,
.kanokta-form-field select:focus {
	outline: none;
	border-color: var(--kanokta-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kanokta-primary) 18%, transparent);
}

/* Kırmızı kenarlık: sunucu tarafı doğrulama başarısız olan alan
   (bkz. kanokta_field_invalid_class() / ?neden= parametresi). */
.kanokta-form-field--invalid input,
.kanokta-form-field--invalid select {
	border-color: #B3261E;
}

.kanokta-form-field--invalid label {
	color: #B3261E;
}

/* Prefix kutulu alanlar (Telefon "+90", Plaka "TR"): kutu + input aynı
   satırda, tek bir yuvarlatılmış çerçeve içinde bitişik görünür; etiket
   diğer alanlarla aynı şekilde .control'ün ÜSTÜNDE, ayrı bir satırdadır. */
.kanokta-form-field__control {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--kanokta-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--kanokta-primary-dark) 4%, transparent);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.kanokta-form-field__control:hover {
	border-color: var(--kanokta-primary-light);
}

.kanokta-form-field__control:focus-within {
	border-color: var(--kanokta-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kanokta-primary) 18%, transparent);
}

.kanokta-form-field--invalid .kanokta-form-field__control {
	border-color: #B3261E;
}

.kanokta-form-field__prefix {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	padding: 0 12px;
	background: var(--kanokta-primary);
	color: var(--kanokta-white);
	font-weight: 600;
	font-size: .95rem;
	white-space: nowrap;
}

.kanokta-form-field__control input {
	border: none;
	border-radius: 0;
	box-shadow: none;
	flex: 1;
	min-width: 0;
}

.kanokta-form-field__control input:focus {
	outline: none;
	box-shadow: none;
}

/* Araç formu: "Belge Seri Numarası" alanı + yanındaki "Nereden bakılır?"
   yardım linkini aynı satırda tutar. */
.kanokta-form-field__yardim-satiri {
	display: flex;
	align-items: center;
	gap: 12px;
}

.kanokta-form-field__yardim-satiri input {
	flex: 1;
	min-width: 0;
}

/* Araç formu: "Ruhsat Belgesi Yükle" (opsiyonel). Native input[type=file]
   görsel olarak gizlenir ama odaklanabilir kalır (bkz. __input, "visually
   hidden" tekniği - display:none KULLANMAZ, aksi halde Tab/klavye ile
   erişilemez hale gelirdi); tıklama/açma tamamen __alan <label>'ının
   native for= ilişkisiyle çalışır, JS GEREKMEZ. JS yalnızca seçilen
   dosyanın önizlemesini + "X" ile kaldırmayı ve sürükle-bırak vurgusunu
   ekler (bkz. assets/js/teklif-formu.js). */
.kanokta-dosya-yukleme {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kanokta-dosya-yukleme__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kanokta-dosya-yukleme__alan {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	padding: 22px 16px;
	border: 1.5px dashed var(--kanokta-border);
	border-radius: 16px;
	background-color: color-mix(in srgb, var(--kanokta-primary) 3%, var(--kanokta-white));
	color: var(--kanokta-text-muted);
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.kanokta-dosya-yukleme__alan:hover,
.kanokta-dosya-yukleme__alan.is-suruklemede {
	border-color: var(--kanokta-primary);
	background-color: color-mix(in srgb, var(--kanokta-primary) 7%, var(--kanokta-white));
}

.kanokta-dosya-yukleme__alan:has(+ .kanokta-dosya-yukleme__input:focus-visible) {
	outline: none;
	border-color: var(--kanokta-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kanokta-primary) 18%, transparent);
}

.kanokta-dosya-yukleme__ikon {
	color: var(--kanokta-primary);
}

.kanokta-dosya-yukleme__metin {
	font-weight: 500;
	font-size: .88rem;
	color: var(--kanokta-primary-dark);
}

.kanokta-dosya-yukleme__ipucu {
	font-size: .76rem;
}

.kanokta-dosya-yukleme__onizleme {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--kanokta-border);
	border-radius: 12px;
	background-color: var(--kanokta-white);
}

.kanokta-dosya-yukleme__gorsel {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.kanokta-dosya-yukleme__dosya-ikon {
	flex-shrink: 0;
	color: var(--kanokta-primary);
}

.kanokta-dosya-yukleme__ad {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .86rem;
	color: var(--kanokta-text);
}

.kanokta-dosya-yukleme__kaldir {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background-color: color-mix(in srgb, #B3261E 10%, transparent);
	color: #B3261E;
	cursor: pointer;
	transition: background-color .2s ease;
}

.kanokta-dosya-yukleme__kaldir:hover,
.kanokta-dosya-yukleme__kaldir:focus-visible {
	background-color: color-mix(in srgb, #B3261E 18%, transparent);
}

.kanokta-dosya-yukleme__hata {
	margin: 0;
	font-size: .8rem;
	font-weight: 500;
	color: #B3261E;
}

/* Form-tipi grubu (arac/saglik/yangin/iletisim): assets/js/teklif-formu.js
   seçilen ürüne göre yalnızca birini gösterir, [hidden] burada da
   (.kanokta-form-field[hidden] ile aynı gerekçeyle) author-CSS'in
   kazanması için ayrıca belirtilir. 2 sütunlu: Sağlık Sigortası Formu
   gibi çok alanlı tiplerde dikey uzunluğu belirgin şekilde azaltır. */
.kanokta-form-grup {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 16px;
}

@media (max-width: 600px) {
	.kanokta-form-grup {
		grid-template-columns: 1fr;
	}
}

.kanokta-form-grup[hidden] {
	display: none;
}

/* Popup içindeki dialog artık (bkz. .kanokta-modal__dialog, 560px) 2
 * sütunlu alan gruplarını rahatça sığdıracak kadar geniş; inline formla
 * aynı 2 sütunlu düzeni paylaşır - dikey yüksekliği belirgin şekilde
 * azaltan asıl etken bu (bkz. bug: standart 17" ekranlarda taşma).
 * Mobilde (≤600px) yukarıdaki genel kural zaten tek sütuna döner. */

/* Alan grubu başlığı: form başlığı (h2) ile alan label'ları (.85rem/500)
   arasında ayrı, tutarlı bir hiyerarşi kademesi. Dört form tipi de HER
   ZAMAN bir başlıkla açılır (Araç/Sağlık/Yangın/İletişim Bilgileri) -
   bazı bölümlerin başlıklı bazılarının başlıksız olması gibi bir durum
   yoktur, bu da grid hizasının tüm form tiplerinde tutarlı kalmasına
   da yardımcı olur. */
.kanokta-form-grup__baslik {
	grid-column: 1 / -1;
	margin: 0;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--kanokta-border);
	color: var(--kanokta-primary-dark);
	font-size: .98rem;
	font-weight: 600;
}

.kanokta-form-grup__not {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--kanokta-text-muted);
	font-size: .95rem;
}

/* Ad Soyad / Telefon ve Sağlık formundaki Kilo / Boy yan yana, ebeveynin
   kendi sütununda tam genişlik kaplayan tek bir satır olarak (kendi iç
   2 sütunuyla) gösterilir. */
.kanokta-form-field-ikili {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 520px) {
	.kanokta-form-field-ikili {
		grid-template-columns: 1fr;
	}
}

/* Araç formu: "Nereden bakılır?" link-buton (örnek belge popup'ını açar) */
.kanokta-form-field__yardim {
	flex-shrink: 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--kanokta-primary);
	font-weight: 600;
	font-size: .82rem;
	white-space: nowrap;
	text-decoration: underline;
	cursor: pointer;
}

.kanokta-form-field__yardim:hover,
.kanokta-form-field__yardim:focus {
	color: var(--kanokta-primary-dark);
}

/* KVKK / Gizlilik onay kutuları: tüm form tiplerinde ortak, zorunlu. */
.kanokta-form-consent {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	background-color: var(--kanokta-accent-lighter);
	border-radius: 16px;
}

.kanokta-form-consent__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 3px;
	border-radius: 8px;
	font-size: .86rem;
	color: var(--kanokta-text);
	cursor: pointer;
	transition: background-color .15s ease;
}

.kanokta-form-consent__item:hover {
	background-color: color-mix(in srgb, var(--kanokta-white) 60%, transparent);
}

.kanokta-form-consent__item input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: var(--kanokta-primary);
}

.kanokta-form-consent__item a {
	color: var(--kanokta-primary);
	font-weight: 600;
	text-decoration: underline;
}

.kanokta-form-consent__item--invalid {
	color: #B3261E;
}

.kanokta-quote-form__submit {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 4px;
	padding: 14px 32px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--kanokta-primary), var(--kanokta-primary-dark));
	color: var(--kanokta-white);
	font-weight: 700;
	font-size: 1.1rem;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.kanokta-quote-form__submit:hover,
.kanokta-quote-form__submit:focus {
	background: linear-gradient(135deg, var(--kanokta-primary-dark), var(--kanokta-primary));
	box-shadow: 0 10px 24px color-mix(in srgb, var(--kanokta-primary-dark) 18%, transparent);
}

@media (max-width: 760px) {
	.kanokta-quote-form__layout {
		grid-template-columns: 1fr;
		max-width: 560px;
	}

	.kanokta-quote-form__mascot {
		position: static;
		order: -1;
	}

	.kanokta-quote-form__mascot-image {
		max-width: 255px;
	}

	.kanokta-quote-form__form {
		padding: 28px 22px;
	}

	/* Masaüstü/laptop sıkılaştırması (bkz. yukarıdaki .kanokta-form-field
	   input/select) burada biraz geri alınır: dokunma hedefi en az ~44px
	   kalsın diye mobilde inputlara birkaç piksel daha dikey boşluk verilir. */
	.kanokta-form-field input,
	.kanokta-form-field select {
		padding: 13px 14px;
	}
}

/* ==========================================================================
   Sigorta Ürünleri Kartları
   ========================================================================== */
.kanokta-products {
	/* .kanokta-section'ın aksine kendi arka planı yok (transparent) ve
	   üstte ekstra boşluk bırakmaz; hero'nun bittiği yerden doğrudan devam
	   ederek .kanokta-hero-wrapper'ın gradient'i üzerinde durur. */
	padding: 8px 0 64px;
	text-align: center;
}

.kanokta-products p {
	max-width: 640px;
	margin: 0 auto;
	color: var(--kanokta-text-muted);
}

.kanokta-products__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 40px;
	text-align: left;
}

@media (min-width: 860px) {
	.kanokta-products__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}

/* Anasayfa: en fazla 6 ürün (bkz. kanokta_get_insurance_products()),
   geniş ekranlarda tek satırda; arşiv sayfasının .kanokta-products__grid'i
   (daha zengin kartlar, değişken ürün sayısı) etkilenmez. */
@media (min-width: 640px) {
	.kanokta-products__grid--home {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	/* 6'dan az ürün işaretlenmişse repeat(6,1fr) boş sütunlar bırakıp
	   satırı sola yasladığı için, burada flex + justify-content:center'a
	   geçiliyor: kartlar sabit genişlikte, grup her zaman ortalanıyor. */
	.kanokta-products__grid--home {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}

	.kanokta-products__grid--home .kanokta-product-card--compact {
		flex: 0 1 170px;
	}
}

.kanokta-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--kanokta-white);
	border: 1px solid var(--kanokta-border);
	border-radius: 18px;
	padding: 32px 26px;
	color: var(--kanokta-text);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Ürün rozeti: serbest metin (bkz. inc/post-types.php >
   kanokta_get_urun_rozet() - ör. "%20 İndirim", "Kampanyalı", "Yeni").
   position: absolute olduğu için kartın flex akışını etkilemez, üstüne
   biner. Header CTA butonuyla aynı marka gradyanını kullanır, böylece
   yeni bir renk tanımlamaya gerek kalmaz. */
.kanokta-product-card__badge {
	position: absolute;
	top: -10px;
	right: 16px;
	z-index: 1;
	padding: 5px 14px;
	background: linear-gradient(135deg, var(--kanokta-primary), var(--kanokta-primary-dark));
	color: var(--kanokta-white);
	font-size: .72rem;
	font-weight: 700;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-radius: 999px;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--kanokta-primary-dark) 30%, transparent);
	animation: kanokta-badge-pulse 2.4s ease-in-out infinite;
}

@keyframes kanokta-badge-pulse {
	0%, 100% {
		box-shadow: 0 6px 16px color-mix(in srgb, var(--kanokta-primary-dark) 30%, transparent), 0 0 0 0 color-mix(in srgb, var(--kanokta-primary) 45%, transparent);
	}
	50% {
		box-shadow: 0 6px 16px color-mix(in srgb, var(--kanokta-primary-dark) 30%, transparent), 0 0 0 6px color-mix(in srgb, var(--kanokta-primary) 0%, transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kanokta-product-card__badge {
		animation: none;
	}
}

.kanokta-product-card:hover,
.kanokta-product-card:focus {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px color-mix(in srgb, var(--kanokta-primary-dark) 16%, transparent);
	border-color: var(--kanokta-primary-light);
	color: var(--kanokta-text);
}

.kanokta-product-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--kanokta-primary) 14%, var(--kanokta-white));
	color: var(--kanokta-primary);
	margin-bottom: 16px;
	overflow: hidden;
}

.kanokta-product-card__icon img {
	width: 60%;
	height: 60%;
	object-fit: contain;
}

.kanokta-products__all {
	margin-top: 40px;
	text-align: center;
}

/* Anasayfa kartları: ortalı, kare, sadece ikon + ad (açıklama/link yok).
   "Tüm Ürünler" arşivindeki .kanokta-product-card daha zengin haliyle
   (açıklama + "Detayları İncele" linki) değişmeden kalır. */
.kanokta-product-card--compact {
	align-items: center;
	justify-content: center;
	text-align: center;
	aspect-ratio: 4 / 5;
	padding: 24px;
}

.kanokta-product-card--compact .kanokta-product-card__icon {
	width: 84px;
	height: 84px;
	margin-bottom: 20px;
}

.kanokta-product-card__title {
	font-family: var(--kanokta-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0;
	margin-bottom: 8px;
}

.kanokta-product-card--compact .kanokta-product-card__title {
	font-size: 1.1rem;
	margin-bottom: 0;
}

.kanokta-product-card__desc {
	font-size: .92rem;
	color: var(--kanokta-text-muted);
	flex: 1;
	margin-bottom: 16px;
}

.kanokta-product-card__cta {
	font-weight: 600;
	color: var(--kanokta-primary);
}

/* ==========================================================================
   Ödüller / Sertifikalar
   Ana sayfa özeti: solda kompakt kart grid'i (2 sütun mobil, 3 sütun
   masaüstü) + sağda (>=860px) isteğe bağlı maskot, yan yana. "Tüm
   Ödüllerimizi Gör" linki, aynı .kanokta-awards__card tasarımını
   (bkz. altta) tam açıklama/tarihle kullanan archive-kanokta_odul.php'ye
   gider - kart stilleri bilinçli olarak TEK yerden (bu blok) tanımlanır.
   ========================================================================== */
.kanokta-awards {
	/* Anlaşmalı Şirketler (accent-lighter) -> Ödüller (beyaz) arasındaki
	   GERÇEK renk sınırını yumuşatan SVG dalga (bkz. .kanokta-bolum-gecis,
	   oduller.php) için position:relative gerekli - dalga bu bölümün üst
	   kenarına yapışır. */
	position: relative;
}

.kanokta-awards__layout {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 32px;
	margin-top: 40px;
}

@media (min-width: 860px) {
	.kanokta-awards__layout {
		/* auto: maskot sütunu yalnızca kendi görselinin genişliği kadar yer
		   kaplar, kalan tüm alan grid sütununa (minmax(0, 1fr)) gider. */
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 40px;
	}
}

.kanokta-awards__content {
	min-width: 0;
}

/* Kompakt kart grid'i - hem ana sayfa özetinde hem "Tüm Ödüllerimiz"
   arşivinde (archive-kanokta_odul.php) aynı .kanokta-awards__grid/__card
   kullanılır. İkisi de sağında sabit genişlikte bir sütun (maskot/"Teklif
   Al" kutusu) taşıdığı için masaüstünde bilinçli olarak 3 sütunda
   sabitlenir - 2 sütun mobilde, 3 sütun 480px ve üzerinde. */
.kanokta-awards__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (min-width: 480px) {
	.kanokta-awards__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.kanokta-awards__grid {
		gap: 16px;
	}
}

.kanokta-awards__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	background-color: var(--kanokta-white);
	border: 1px solid var(--kanokta-border);
	border-radius: var(--kanokta-radius);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--kanokta-primary-dark) 6%, transparent);
	padding: 14px 10px;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.kanokta-awards__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--kanokta-primary-dark) 12%, transparent);
	border-color: var(--kanokta-primary-light);
}

.kanokta-awards__card-media {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kanokta-primary);
}

.kanokta-awards__card-media img,
.kanokta-awards__card-media svg {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media (min-width: 640px) {
	.kanokta-awards__card-media {
		width: 52px;
		height: 52px;
	}
}

.kanokta-awards__card-title {
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.kanokta-awards__card-desc {
	font-size: .85rem;
	color: var(--kanokta-text-muted);
	line-height: 1.55;
	margin: 0;
}

.kanokta-awards__card-date {
	font-size: .78rem;
	font-weight: 600;
	color: var(--kanokta-primary);
	margin: 0;
}

.kanokta-awards__all {
	margin-top: 28px;
	text-align: center;
}

/* Maskot artık daha büyük VE arkasında yumuşak bir "spot ışığı" gradyanı
   (::before, saf CSS - ekstra görsel YOK) taşıyor, bölümde gözden
   kaçmasın diye - kartların hemen yanında zaten duruyordu, burada asıl
   sorun boyut/görsel ağırlıktı. */
.kanokta-awards__mascot {
	position: relative;
	display: flex;
	justify-content: center;
}

.kanokta-awards__mascot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: 220px;
	height: 220px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, var(--kanokta-accent-light) 0%, transparent 70%);
	opacity: .7;
}

.kanokta-awards__mascot-image {
	position: relative;
	z-index: 1;
	display: block;
	max-width: 200px;
	width: 100%;
	height: auto;
	transform: scale(var(--kanokta-awards-mascot-scale, 1));
	transform-origin: center bottom;
}

@media (min-width: 640px) {
	.kanokta-awards__mascot::before {
		width: 280px;
		height: 280px;
	}

	.kanokta-awards__mascot-image {
		max-width: 260px;
	}
}

@media (min-width: 860px) {
	.kanokta-awards__mascot {
		justify-self: end;
	}

	.kanokta-awards__mascot::before {
		width: 320px;
		height: 320px;
	}

	.kanokta-awards__mascot-image {
		max-width: 300px;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */
.kanokta-header {
	position: sticky;
	top: 16px;
	z-index: 100;
	width: calc(100% - 32px);
	max-width: 1160px;
	/* Üstte boşluk margin yerine body { padding-top: 16px } ile
	   sağlanır (bkz. style.css) — margin burada olsaydı ilk çocuk
	   olduğu için ebeveyniyle (body veya .kanokta-hero-wrapper)
	   çakışıp (margin collapse) o boşlukta yanlış bir arka plan
	   (ör. html'in varsayılan beyazı) görünmesine yol açardı. */
	margin: 0 auto;
	background-color: var(--kanokta-header-bg, var(--kanokta-white));
	border-radius: 999px;
	box-shadow: 0 10px 30px color-mix(in srgb, var(--kanokta-primary-dark) 12%, transparent);
}

/* Customizer'dan "Header Kaydırıldıkça Sabit Kalsın" kapatılırsa (bkz.
   kanokta_get_header_sticky(), header.php) - position:static'e döner,
   header yalnızca sayfanın en üstünde durur. */
.kanokta-header--sabit-degil {
	position: static;
}

.kanokta-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 64px;
	padding: 8px 10px 8px 26px;
}

.kanokta-header__brand {
	flex-shrink: 0;
}

.kanokta-header__logo img {
	max-height: 44px;
	width: auto;
}

.kanokta-header__business-name {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--kanokta-primary-dark);
}

.kanokta-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.kanokta-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kanokta-menu a {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid transparent;
	color: var(--kanokta-text);
	font-weight: 500;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.kanokta-menu a:hover,
.kanokta-menu a:focus {
	color: var(--kanokta-primary);
}

/* Aktif sayfa: gerçek bir menü atandığında WordPress otomatik olarak
   current-menu-item/current_page_item sınıflarını ekler; henüz menü
   atanmamışsa kanokta_fallback_menu() is_front_page() ile aynı efekti
   kanokta-menu-item--active sınıfıyla üretir. */
.kanokta-menu li.current-menu-item > a,
.kanokta-menu li.current_page_item > a,
.kanokta-menu li.current-menu-ancestor > a,
.kanokta-menu li.kanokta-menu-item--active > a {
	background-color: var(--kanokta-accent-lighter);
	border-color: var(--kanokta-accent-light);
	color: var(--kanokta-primary-dark);
}

/* Açılır alt menü ("Hesaplamalar" > "MTV Hesaplama" vb.): WordPress,
   Görünüm > Menüler'de bir öğe başka bir öğenin altına sürüklenince
   üst <li>'ye otomatik olarak "menu-item-has-children" sınıfını ve
   içine bir <ul class="sub-menu"> ekler; kanokta_fallback_menu() de
   (henüz gerçek bir menü atanmamışsa) aynı sınıfları elle üretir. */
.kanokta-menu li {
	position: relative;
}

.kanokta-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.kanokta-menu .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 100;
	min-width: 210px;
	margin: 0;
	padding: 8px;
	list-style: none;
	text-align: left;
	background-color: var(--kanokta-white);
	border: 1px solid var(--kanokta-border);
	border-radius: 16px;
	box-shadow: 0 16px 32px color-mix(in srgb, var(--kanokta-primary-dark) 16%, transparent);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.kanokta-menu .menu-item-has-children:hover > .sub-menu,
.kanokta-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.kanokta-menu .sub-menu a {
	display: block;
	width: 100%;
	border-radius: 10px;
	white-space: nowrap;
}

.kanokta-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
}

.kanokta-menu-toggle__bar {
	width: 24px;
	height: 2px;
	background-color: var(--kanokta-primary-dark);
}

.kanokta-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.kanokta-header__phone {
	font-weight: 600;
	color: var(--kanokta-primary-dark);
	white-space: nowrap;
}

.kanokta-header__cta {
	background: linear-gradient(135deg, var(--kanokta-primary), var(--kanokta-primary-dark));
	color: var(--kanokta-white);
	border-radius: 999px;
	padding: 10px 22px;
}

.kanokta-header__cta:hover,
.kanokta-header__cta:focus {
	background: linear-gradient(135deg, var(--kanokta-primary-dark), var(--kanokta-primary));
	color: var(--kanokta-white);
}

@media (max-width: 860px) {
	.kanokta-header__inner {
		padding-left: 18px;
	}

	.kanokta-menu-toggle {
		display: inline-flex;
	}

	.kanokta-header__nav {
		justify-content: flex-end;
	}

	.kanokta-menu {
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		background-color: var(--kanokta-white);
		border-radius: 20px;
		box-shadow: 0 10px 30px color-mix(in srgb, var(--kanokta-primary-dark) 12%, transparent);
		padding: 12px;
		display: none;
	}

	.kanokta-menu a {
		width: 100%;
	}

	.kanokta-menu.is-open {
		display: flex;
	}

	/* Mobilde hover mümkün olmadığından alt menü ayrı bir dokunuşla
	   açılmaz; panel zaten açıkken alt öğeler girintili şekilde hep
	   görünür durumdadır. */
	.kanokta-menu .menu-item-has-children > a::after {
		display: none;
	}

	.kanokta-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		margin: 2px 0 4px;
		padding: 0 0 0 16px;
		border: none;
		box-shadow: none;
		background: none;
	}

	.kanokta-header__phone {
		display: none;
	}
}

/* ==========================================================================
   Anlaşmalı Şirketler (logo şeridi)
   ========================================================================== */
.kanokta-partners {
	position: relative;
	padding: 56px 0;
	background-color: var(--kanokta-accent-lighter);
	/* Düz solid renk yerine çok hafif, geometrik bir doku - "düz blok
	   blok" hissini kırmak için (bkz. .kanokta-why-us'taki AYNI teknik,
	   yalnızca burada beyaz noktalar/koyu zemin yerine ince çizgiler). */
	background-image:
		linear-gradient(color-mix(in srgb, var(--kanokta-primary) 6%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--kanokta-primary) 6%, transparent) 1px, transparent 1px);
	background-size: 32px 32px;
	/* .kanokta-baslik display:inline-block; ortalanması için üst
	   elemanın text-align:center olması gerekir (kendi text-align'i
	   yalnızca kendi iç satırlarını etkiler, kendi konumunu değil). */
	text-align: center;
}

.kanokta-partners__title {
	text-align: center;
	margin-bottom: 12px;
}

.kanokta-partners__subtitle {
	max-width: 560px;
	margin: 0 auto 32px;
	color: var(--kanokta-text-muted);
}

/* Mobilde 2, geniş telefon/küçük tablette 3, tablette 4 sütunluk grid;
   masaüstünde (>=960px) önceki sabit boyutlu, ortalanmış flex şeride
   döner - .kanokta-partners__item'daki genişlik/yükseklik de aynı
   kırılma noktalarında buna eşlik eder. */
.kanokta-partners__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

@media (min-width: 420px) {
	.kanokta-partners__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 640px) {
	.kanokta-partners__list {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
}

@media (min-width: 960px) {
	.kanokta-partners__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 24px;
	}
}

.kanokta-partners__item {
	width: 100%;
	height: 76px;
	background-color: var(--kanokta-white);
	border: 1px solid var(--kanokta-border);
	border-radius: var(--kanokta-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	transition: transform .3s ease, box-shadow .3s ease;
}

.kanokta-partners__item:hover,
.kanokta-partners__item:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--kanokta-primary-dark) 12%, transparent);
}

@media (min-width: 640px) {
	.kanokta-partners__item {
		height: 88px;
		padding: 10px;
	}
}

@media (min-width: 960px) {
	.kanokta-partners__item {
		width: 190px;
		height: 95px;
		padding: 12px;
	}
}

.kanokta-partners__item a {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kanokta-partners__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kanokta-partners__fallback {
	font-weight: 600;
	color: var(--kanokta-primary-dark);
	text-align: center;
	font-size: .85rem;
}

/* ==========================================================================
   Footer
   4 sütun (marka+maskot / iletişim / ürünler / sosyal medya) + tam
   genişlikte yasal bağlantılar + kayıt bilgisi kutuları + ayrışan renkli
   telif hakkı bandı. Tüm içerik Customizer'dan gelir (bkz. footer.php).
   ========================================================================== */
.kanokta-footer {
	background-color: var(--kanokta-primary-dark);
	color: var(--kanokta-accent-lighter);
	padding-top: 64px;
	text-align: left;
	font-size: .93rem;
	font-weight: 400;
}

.kanokta-footer a {
	color: var(--kanokta-white);
}

.kanokta-footer a:hover,
.kanokta-footer a:focus {
	color: var(--kanokta-accent-light);
}

/* Masaüstünde 4 sütun, tablette 2x2, mobilde tek sütun. Varsayılan grid
   davranışı (align-items: stretch) tüm sütunları aynı satır yüksekliğine
   getirir - böylece marka sütunu diğerleriyle dengeli görünür. */
.kanokta-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-bottom: 48px;
}

@media (min-width: 640px) {
	.kanokta-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.kanokta-footer__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.kanokta-footer__col {
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Dikey ayraçlar: yalnızca masaüstünde (grid gerçekten 4 sütun yan yana
   olduğunda) sütunlar arasındaki boşluğun (gap) tam ortasına yerleşir.
   Tablet/mobilde sütunlar alt alta indiği için gösterilmez. */
@media (min-width: 960px) {
	.kanokta-footer__col:not(:first-child)::before {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 4px;
		left: -20px;
		width: 1px;
		background-color: rgba(255, 255, 255, .18);
	}
}

/* align-items: flex-start burada bilinçli: logo ve maskot ikisi de kolonun
   sol kenarına hizalı, aralarında sabit ve makul bir boşluk (gap) olacak
   şekilde alt alta durur - önceki gelişigüzel/ortalanmış görünümün yerine. */
.kanokta-footer__col--brand {
	gap: 18px;
	align-items: flex-start;
}

.kanokta-footer__logo {
	display: inline-flex;
	align-self: flex-start;
}

.kanokta-footer__logo-image {
	max-height: 200px;
	width: auto;
}

.kanokta-footer__logo-text {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--kanokta-white);
}

.kanokta-footer__mascot-image {
	display: block;
	align-self: flex-start;
	margin: 0;
	max-width: 192px;
	max-height: 192px;
	width: auto;
	height: auto;
	/* Diğer maskotlarla aynı teknik: kutunun layout boyutu sabit kalır,
	   ölçek kaydırıcısı yalnızca transform ile büyütüp küçültür. Ölçek
	   Görünüm > Özelleştir > Footer > "Footer Maskot Boyutu" ile ayarlanır. */
	transform: scale(var(--kanokta-footer-mascot-scale, 1));
	transform-origin: left top;
}

.kanokta-footer__col-title {
	color: var(--kanokta-white);
	font-size: .98rem;
	font-weight: 600;
	margin-bottom: 14px;
}

.kanokta-footer__contact {
	font-style: normal;
}

.kanokta-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	line-height: 1.35;
}

/* İletişim listesindeki her satırın başında ikon (bkz. footer.php).
   İkonsuz "Ürünler" listesi bu kuraldan etkilenmez. */
.kanokta-footer__contact .kanokta-footer__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.kanokta-footer__contact-icon {
	flex-shrink: 0;
	display: inline-flex;
	margin-top: 2px;
	color: var(--kanokta-accent-light);
}

.kanokta-footer__contact-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Ürünler listesindeki her satırın başında küçük bir ikon: ürünün kendi
   öne çıkan görseli varsa o, yoksa temaya gömülü genel sigorta ikonu
   (bkz. footer.php -> kanokta_get_default_product_icon_svg()). Aynı
   ikon, template-parts/urun-kartlari.php'deki ürün kartlarında da
   kullanılır - burada yalnızca boyutu footer'a uygun küçültülür. */
.kanokta-footer__list--urunler a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kanokta-footer__urun-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--kanokta-accent-light);
}

.kanokta-footer__urun-icon svg,
.kanokta-footer__urun-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.kanokta-footer__hint {
	margin: 0;
	font-size: .85rem;
	opacity: .75;
	max-width: 220px;
}

.kanokta-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.kanokta-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .1);
	color: var(--kanokta-white);
	transition: background-color .2s ease, transform .15s ease;
}

.kanokta-footer__social a svg {
	width: 18px;
	height: 18px;
}

.kanokta-footer__social a:hover,
.kanokta-footer__social a:focus {
	background-color: var(--kanokta-primary);
	color: var(--kanokta-white);
	transform: translateY(-2px);
}

/* Yasal bağlantılar satırı */
.kanokta-footer__legal-nav {
	border-top: 1px solid rgba(255, 255, 255, .15);
	padding-block: 20px;
}

.kanokta-footer__legal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 0;
	font-size: .88rem;
}

.kanokta-footer__legal-list li {
	padding-inline: 20px;
}

/* Dikey ayraç: ilk öğe hariç her linkin solunda. flex-wrap ile satır
   değiştiren öğeler için de sorunsuz çalışır. */
.kanokta-footer__legal-list li:not(:first-child) {
	border-left: 1px solid rgba(255, 255, 255, .25);
}

/* Kayıt bilgisi kutuları: sabit genişlikte (220px), taşma durumunda alt
   satıra sarar. */
.kanokta-footer__kayit {
	border-top: 1px solid rgba(255, 255, 255, .15);
	padding-block: 24px;
}

.kanokta-footer__kayit-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.kanokta-footer__kayit-kutu {
	flex: 0 0 220px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 18px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 12px;
	text-align: center;
}

.kanokta-footer__kayit-etiket {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity: .7;
}

.kanokta-footer__kayit-deger {
	font-weight: 600;
	color: var(--kanokta-white);
}

/* Telif hakkı satırı: diğer (koyu) footer alanlarından bilinçli olarak
   beyaz bir bantla ayrışır; bu yüzden metin/link renkleri de burada
   ayrıca (koyu) tanımlanır - üstteki genel ".kanokta-footer a" kuralı
   (beyaz) burada geçersiz kılınır. */
.kanokta-footer__copyright {
	background-color: var(--kanokta-white);
	padding-block: 18px;
}

.kanokta-footer__copyright-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 16px;
}

.kanokta-footer__copy {
	margin: 0;
	text-align: center;
	font-size: .85rem;
	color: var(--kanokta-text-muted);
}

.kanokta-footer__copyright a,
.kanokta-footer__copyright-link {
	color: var(--kanokta-primary);
	font-size: .85rem;
	font-weight: 500;
}

.kanokta-footer__copyright a:hover,
.kanokta-footer__copyright a:focus {
	color: var(--kanokta-primary-dark);
}

/* Mobilde (grid'in tek sütuna indiği eşik ile aynı, bkz. .kanokta-footer__grid)
   4 sütun da (marka+maskot / iletişim / ürünler / sosyal medya) ortalanır;
   sola yaslı masaüstü düzeni yerini simetrik/ortalı bir görünüme bırakır. */
@media (max-width: 639px) {
	.kanokta-footer__col {
		align-items: center;
		text-align: center;
	}

	.kanokta-footer__col--brand,
	.kanokta-footer__logo,
	.kanokta-footer__mascot-image {
		align-items: center;
		align-self: center;
	}

	.kanokta-footer__contact .kanokta-footer__list li,
	.kanokta-footer__list--urunler a {
		justify-content: center;
	}

	.kanokta-footer__social {
		justify-content: center;
	}
}

/* ==========================================================================
   Sabit WhatsApp Butonu
   ========================================================================== */
.kanokta-whatsapp-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 200;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: #25D366;
	color: var(--kanokta-white);
	padding: 12px 18px;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
	font-weight: 600;
	transition: transform .15s ease, background-color .2s ease;
}

.kanokta-whatsapp-float:hover,
.kanokta-whatsapp-float:focus {
	background-color: #1DA851;
	color: var(--kanokta-white);
	transform: translateY(-2px);
}

.kanokta-whatsapp-float__icon {
	display: flex;
}

@media (max-width: 600px) {
	.kanokta-whatsapp-float__label {
		display: none;
	}

	.kanokta-whatsapp-float {
		padding: 14px;
	}
}

/* ==========================================================================
   Hesaplama Sayfaları (Ortak Şablon)

   MTV Hesaplama ve ileride eklenecek benzer hesap makinesi sayfalarının
   (kasko-deger-hesaplama, yakit-hesaplama vb.) hepsinde aynı şekilde
   kullanılan iskelet: 2 sütunlu layout, sayfa başlığı bloğu, beyaz
   hesaplama kartı ve sağ sütundaki teklif kutusu. Bu sınıflar sayfaya
   özel değildir; page-mtv-hesaplama.php gibi yeni bir page-{slug}.php
   dosyası aynı template-part'ları (hesaplama-baslik, hesaplama-teklif-widget)
   ve bu sınıfları değiştirmeden yeniden kullanabilir.
   ========================================================================== */
.kanokta-hesaplama-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

@media (min-width: 960px) {
	.kanokta-hesaplama-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

.kanokta-hesaplama-main {
	min-width: 0;
}

@media (min-width: 960px) {
	/* Header sticky olduğu için (bkz. .kanokta-header) sidebar'ın da
	   aynı üst boşlukla yapışması gerekir, aksi halde header'ın altına
	   girer. */
	.kanokta-hesaplama-sidebar {
		position: sticky;
		top: 108px;
	}
}

/* ---------------------------------------------------------------
 * Başlık Bloğu (template-parts/hesaplama-baslik.php)
 * ------------------------------------------------------------- */
.kanokta-hesaplama-baslik {
	margin-bottom: 28px;
}

.kanokta-hesaplama-baslik__title {
	font-size: clamp(1.6rem, 3.4vw, 2.1rem);
	line-height: 1.28;
	margin-bottom: 20px;
}

.kanokta-hesaplama-baslik__yazar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.kanokta-hesaplama-baslik__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--kanokta-border);
	color: var(--kanokta-text-muted);
	overflow: hidden;
	flex-shrink: 0;
}

.kanokta-hesaplama-baslik__avatar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kanokta-hesaplama-baslik__yazar-metin {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	font-size: .92rem;
}

.kanokta-hesaplama-baslik__yazar-metin strong {
	color: var(--kanokta-primary-dark);
}

.kanokta-hesaplama-baslik__unvan {
	color: var(--kanokta-text-muted);
}

.kanokta-hesaplama-baslik__ayrac {
	border: none;
	border-top: 1px solid var(--kanokta-border);
	margin: 0 0 16px;
}

.kanokta-hesaplama-baslik__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.kanokta-hesaplama-baslik__tarih {
	margin: 0;
	color: var(--kanokta-text-muted);
	font-size: .85rem;
}

.kanokta-hesaplama-baslik__paylas {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border: 1px solid var(--kanokta-border);
	border-radius: 999px;
	background-color: var(--kanokta-white);
	color: var(--kanokta-text);
	font-weight: 600;
	font-size: .88rem;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.kanokta-hesaplama-baslik__paylas:hover,
.kanokta-hesaplama-baslik__paylas:focus {
	border-color: var(--kanokta-primary);
	color: var(--kanokta-primary);
}

/* ---------------------------------------------------------------
 * Hesaplama Kartı (beyaz kart: başlık + alan grid'i + Hesapla + sonuç)
 * ------------------------------------------------------------- */
.kanokta-hesaplama-card {
	margin-bottom: 10px;
	padding: 28px;
	background-color: var(--kanokta-white);
	border-radius: 20px;
	box-shadow: 0 16px 40px color-mix(in srgb, var(--kanokta-primary-dark) 8%, transparent);
	text-align: left;
}

.kanokta-hesaplama-card__title {
	margin-bottom: 22px;
	font-size: 1.3rem;
}

.kanokta-hesaplama-card__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-bottom: 22px;
}

@media (min-width: 560px) {
	.kanokta-hesaplama-card__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.kanokta-hesaplama-card__grid label {
	font-size: .85rem;
}

/* Select'ler: reference tasarımdaki gibi kenarlıksız, açık gri, özel
   ok ikonlu "pill" görünüm. Diğer .kanokta-form-field kullanan formları
   (teklif formu vb.) etkilememesi için burada #kanokta-hesaplama-card__grid
   ile kapsamlandırılır. */
.kanokta-hesaplama-card__grid select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	padding: 14px 40px 14px 16px;
	border: 1px solid transparent;
	border-radius: 12px;
	background-color: #F3F4F6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	color: #374151;
	font-weight: 500;
}

.kanokta-hesaplama-card__grid select:focus {
	outline: none;
	border-color: var(--kanokta-primary);
	background-color: var(--kanokta-white);
}

/* Sayı/metin girişleri de select'lerle AYNI "pill" görünümü paylaşsın diye
   (yakit-hesaplama.js gibi giriş alanı ihtiyaç duyan hesaplama sayfaları
   için) - MTV yalnızca select kullandığından bu kural o zaman gerekmiyordu. */
.kanokta-hesaplama-card__grid input[type="number"],
.kanokta-hesaplama-card__grid input[type="text"] {
	padding: 14px 16px;
	border: 1px solid transparent;
	border-radius: 12px;
	background-color: #F3F4F6;
	color: #374151;
	font-weight: 500;
	width: 100%;
}

.kanokta-hesaplama-card__grid input[type="number"]:focus,
.kanokta-hesaplama-card__grid input[type="text"]:focus {
	outline: none;
	border-color: var(--kanokta-primary);
	background-color: var(--kanokta-white);
}

/* ---------------------------------------------------------------
 * Sekmeler (ör. Yakıt Hesaplama'nın "Maliyet Tahmini" / "Tüketim Hesapla"
 * sekmeleri) - ARIA tabs deseni. Birden fazla hesap makinesi barındıran
 * herhangi bir hesaplama kartında yeniden kullanılabilir.
 * ------------------------------------------------------------- */
.kanokta-hesaplama-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 22px;
	padding: 6px;
	background-color: #F3F4F6;
	border-radius: 14px;
}

.kanokta-hesaplama-tabs__tab {
	flex: 1;
	min-height: 44px;
	padding: 12px 14px;
	border: none;
	border-radius: 10px;
	background-color: transparent;
	color: #4B5563;
	font-weight: 600;
	font-size: .92rem;
	font-family: inherit;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.kanokta-hesaplama-tabs__tab:hover {
	color: var(--kanokta-primary-dark);
}

.kanokta-hesaplama-tabs__tab.is-active {
	background-color: var(--kanokta-white);
	color: var(--kanokta-primary);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--kanokta-primary-dark) 10%, transparent);
}

.kanokta-hesaplama-tabs__tab:focus-visible {
	outline: 2px solid var(--kanokta-primary);
	outline-offset: 2px;
}

/* Panel her görünür olduğunda (hidden kaldırıldığında) yumuşak bir fade +
   hafif yukarı kayma ile belirir - transition değil animation kullanılır,
   çünkü [hidden] açık/kapalı arası bir transition tetiklemez. */
.kanokta-hesaplama-tabs__panel {
	animation: kanokta-tab-fade .25s ease;
}

@keyframes kanokta-tab-fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kanokta-hesaplama-tabs__panel {
		animation: none;
	}
}

@media (max-width: 480px) {
	.kanokta-hesaplama-tabs__tab {
		font-size: .84rem;
		padding: 12px 8px;
	}
}

/* ---------------------------------------------------------------
 * (i) Bilgi İkonu Tooltip'i (ör. "Tüketim Hesapla" sekmesindeki alanlar)
 * Masaüstünde :hover/:focus ile, dokunmatik cihazlarda tıklayarak
 * aç/kapat (.is-open sınıfı, bkz. assets/js/hesaplama-ortak.js) ile çalışır.
 * ------------------------------------------------------------- */
.kanokta-form-field__label-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.kanokta-form-field__info {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--kanokta-border);
	color: var(--kanokta-text-muted);
	font-size: .68rem;
	font-weight: 700;
	font-style: italic;
	cursor: help;
}

.kanokta-form-field__info-tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	width: 220px;
	padding: 10px 12px;
	background-color: var(--kanokta-primary-dark);
	color: var(--kanokta-white);
	font-size: .78rem;
	font-weight: 400;
	line-height: 1.5;
	border-radius: 8px;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 5;
}

.kanokta-form-field__info-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--kanokta-primary-dark);
}

.kanokta-form-field__info:hover .kanokta-form-field__info-tooltip,
.kanokta-form-field__info:focus .kanokta-form-field__info-tooltip,
.kanokta-form-field__info.is-open .kanokta-form-field__info-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.kanokta-hesaplama-card__checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: var(--kanokta-primary-dark);
	cursor: pointer;
}

.kanokta-hesaplama-card__checkbox-label input {
	width: 18px;
	height: 18px;
	accent-color: var(--kanokta-primary);
}

.kanokta-hesaplama-card__checkbox-hint {
	margin: 6px 0 0;
	color: var(--kanokta-text-muted);
	font-size: .88rem;
}

.kanokta-hesaplama-card__submit {
	display: block;
	width: 100%;
	padding: 16px;
	border: none;
	border-radius: 14px;
	background-color: var(--kanokta-primary);
	color: var(--kanokta-white);
	font-weight: 700;
	font-size: 1.05rem;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease, transform .15s ease;
}

.kanokta-hesaplama-card__submit:hover,
.kanokta-hesaplama-card__submit:focus {
	background-color: var(--kanokta-primary-dark);
}

.kanokta-hesaplama-card__submit:active {
	transform: translateY(1px);
}

.kanokta-hesaplama-card__bos {
	margin: 20px 0 0;
	color: var(--kanokta-text-muted);
	text-align: center;
}

.kanokta-hesaplama-card__sonuc {
	margin-top: 20px;
	padding: 24px;
	background-color: var(--kanokta-accent-lighter);
	border-radius: 16px;
	text-align: center;
}

.kanokta-hesaplama-card__sonuc-etiket {
	display: block;
	font-weight: 600;
	color: var(--kanokta-primary-dark);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .82rem;
}

.kanokta-hesaplama-card__sonuc-tutar {
	display: block;
	margin-top: 8px;
	font-family: var(--kanokta-font-heading);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	color: var(--kanokta-primary);
}

.kanokta-hesaplama-card__sonuc-taksit {
	margin: 10px 0 0;
	color: var(--kanokta-text-muted);
}

.kanokta-hesaplama-card__not {
	margin: 16px 4px 0;
	color: var(--kanokta-text-muted);
	font-size: .85rem;
}

/* ---------------------------------------------------------------
 * Sağ Sütun: Maskot + "İnternetten Teklif Al!" Kutusu
 * (template-parts/hesaplama-teklif-widget.php)
 * ------------------------------------------------------------- */
.kanokta-hesaplama-widget__mascot {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}

.kanokta-hesaplama-widget__mascot-image {
	width: 100%;
	max-width: 200px;
	max-height: 240px;
	height: auto;
	/* Diğer maskotlarla aynı teknik (bkz. .kanokta-hero__mascot-image):
	   kutunun layout genişliği width/max-width ile sabit kalır, ölçek
	   kaydırıcısı yalnızca görseli transform ile büyütüp küçültür - farklı
	   en-boy oranındaki bir görsel yüklense bile sidebar genişliği kaymaz. */
	transform: scale(var(--kanokta-hesaplama-mascot-scale, 1));
}

.kanokta-hesaplama-widget {
	padding: 28px 24px;
	background-color: var(--kanokta-white);
	border-radius: 20px;
	box-shadow: 0 16px 40px color-mix(in srgb, var(--kanokta-primary-dark) 8%, transparent);
	text-align: center;
}

.kanokta-hesaplama-widget__title {
	font-size: 1.15rem;
	margin-bottom: 12px;
}

.kanokta-hesaplama-widget__intro {
	margin: 0 0 22px;
	color: var(--kanokta-text);
	line-height: 1.6;
}

.kanokta-hesaplama-widget__intro strong {
	color: var(--kanokta-primary-dark);
}

.kanokta-hesaplama-widget__liste {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kanokta-hesaplama-widget__urun {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 14px;
	padding: 14px;
	background-color: var(--kanokta-white);
	border: 1px solid var(--kanokta-border);
	border-radius: 14px;
	text-align: left;
	color: var(--kanokta-text);
	font-family: inherit;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.kanokta-hesaplama-widget__urun:hover,
.kanokta-hesaplama-widget__urun:focus {
	border-color: var(--kanokta-primary-light);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--kanokta-primary-dark) 10%, transparent);
	color: var(--kanokta-text);
}

.kanokta-hesaplama-widget__urun-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--kanokta-primary) 14%, var(--kanokta-white));
	color: var(--kanokta-primary);
	flex-shrink: 0;
	overflow: hidden;
}

.kanokta-hesaplama-widget__urun-ikon img {
	width: 60%;
	height: 60%;
	object-fit: contain;
}

.kanokta-hesaplama-widget__urun-metin {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.kanokta-hesaplama-widget__urun-ad {
	font-weight: 700;
	font-size: .95rem;
}

.kanokta-hesaplama-widget__urun-cta {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--kanokta-primary);
	font-weight: 600;
	font-size: .88rem;
}

/* ---------------------------------------------------------------
 * Teklif Formu Modalı (template-parts/teklif-modal.php)
 * Sağ sütundaki ürün kartlarına tıklandığında açılır (bkz.
 * assets/js/hesaplama-ortak.js). Sayfa başına tek modal, hangi ürün
 * için açıldığı JS ile doldurulur.
 * ------------------------------------------------------------- */
.kanokta-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.kanokta-modal[hidden] {
	display: none;
}

.kanokta-modal__overlay {
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--kanokta-primary-dark) 55%, transparent);
	opacity: 0;
	transition: opacity .2s ease;
}

.kanokta-modal.is-open .kanokta-modal__overlay {
	opacity: 1;
}

.kanokta-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 460px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background-color: var(--kanokta-white);
	border-radius: 24px;
	padding: 28px 28px;
	box-shadow: 0 30px 70px color-mix(in srgb, var(--kanokta-primary-dark) 30%, transparent);
	text-align: left;
	transform: translateY(16px) scale(.98);
	opacity: 0;
	transition: transform .2s ease, opacity .2s ease;
}

/* Teklif formu popup'ı: alan gruplarının 2 sütunda (bkz. .kanokta-form-grup)
   rahat sığması için diğer modallardan (teşekkür, belge örneği) daha geniş -
   standart 17" laptop çözünürlüklerinde (1366x768 vb.) formun tamamının
   kaydırmadan/az kaydırmayla sığması buna bağlı (bkz. bug raporu). */
.kanokta-modal__dialog--teklif {
	max-width: 560px;
}

.kanokta-modal.is-open .kanokta-modal__dialog {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.kanokta-modal__kapat {
	position: absolute;
	top: 18px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background-color: var(--kanokta-accent-lighter);
	color: var(--kanokta-primary-dark);
	cursor: pointer;
	transition: background-color .2s ease;
}

.kanokta-modal__kapat:hover,
.kanokta-modal__kapat:focus {
	background-color: var(--kanokta-accent-light);
}

.kanokta-modal__title {
	margin: 0 32px 8px 0;
	font-size: 1.25rem;
	font-weight: 600;
}

.kanokta-modal__intro {
	margin: 0 0 14px;
	color: var(--kanokta-text-muted);
	font-size: .92rem;
}

.kanokta-modal__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	text-align: left;
}

/* Teklif formu bölümündeki (.kanokta-quote-form) daha yuvarlak input
   görünümünü burada da tekrarlar - modal o sınıfın içinde olmadığı için
   miras almaz. */
.kanokta-modal__form .kanokta-form-field input,
.kanokta-modal__form .kanokta-form-field select {
	border-radius: 16px;
}

body.kanokta-modal-acik {
	overflow: hidden;
}

/* Örnek belge (ruhsat) popup'ı: aynı .kanokta-modal kabuğunu kullanır,
   yalnızca bir görsel gösterdiği için biraz daha geniş bir dialog alır. */
.kanokta-modal__dialog--belge {
	max-width: 640px;
}

.kanokta-belge-modal__image {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 8px;
	border-radius: 12px;
}

/* Teşekkür popup'ı: başlık/mesaj ortalanır, üstte büyük bir onay ikonu. */
.kanokta-tesekkur-modal__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background-color: #E4F7EC;
	color: #1E7A43;
}

#kanokta-tesekkur-modal .kanokta-modal__title,
#kanokta-tesekkur-modal .kanokta-modal__intro {
	margin-left: 0;
	margin-right: 0;
	text-align: center;
}

.kanokta-tesekkur-modal__aksiyon {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

/* ---------------------------------------------------------------
 * Hesaplama sayfalarının alt kısmındaki tam genişlikte içerik bölümü
 * (the_content ile editörden girilir - ör. MTV tarife tabloları, SSS).
 * ------------------------------------------------------------- */
.kanokta-hesaplama-icerik {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--kanokta-border);
}

.kanokta-page__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: .92rem;
}

.kanokta-page__content th,
.kanokta-page__content td {
	padding: 10px 14px;
	border: 1px solid var(--kanokta-border);
	text-align: left;
}

.kanokta-page__content th {
	background-color: var(--kanokta-accent-lighter);
	color: var(--kanokta-primary-dark);
	font-weight: 700;
}

.kanokta-page__content tbody tr:nth-child(even) {
	background-color: color-mix(in srgb, var(--kanokta-accent-lighter) 35%, var(--kanokta-white));
}

/* Geniş tabloların mobilde sayfayı yatay taşırmasını önler; sarmalayıcı
   div assets/js/main.js tarafından JS ile eklenir (ham <table> editörden
   sarmalayıcısız gelir). */
.kanokta-table-scroll {
	overflow-x: auto;
	margin: 20px 0;
}

.kanokta-table-scroll table {
	margin: 0;
}

/* Bilgilendirme metinleri (MTV Nedir, Ne Zaman Ödenir vb.) editörden
   the_content ile girildiği için başlıklar arasında okunabilir bir ritim
   olması adına burada ek boşluk tanımlanır. */
.kanokta-mtv-page .kanokta-page__content h2 {
	margin-top: 44px;
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.kanokta-mtv-page .kanokta-page__content h2:first-child {
	margin-top: 0;
}

.kanokta-mtv-page .kanokta-page__content h3 {
	margin-top: 28px;
	font-size: 1.15rem;
}

/* SSS akordiyonu: editörden <details><summary> ile girilen doğal HTML,
   ek bir JS'e ihtiyaç duymadan aç/kapa davranışını tarayıcıdan alır. */
.kanokta-mtv-page .kanokta-page__content details {
	margin-bottom: 12px;
	padding: 4px 20px;
	background-color: var(--kanokta-white);
	border: 1px solid var(--kanokta-border);
	border-radius: var(--kanokta-radius);
}

.kanokta-mtv-page .kanokta-page__content details[open] {
	background-color: var(--kanokta-accent-lighter);
}

.kanokta-mtv-page .kanokta-page__content summary {
	padding: 16px 0;
	font-weight: 600;
	color: var(--kanokta-primary-dark);
	cursor: pointer;
	list-style: none;
}

.kanokta-mtv-page .kanokta-page__content summary::-webkit-details-marker {
	display: none;
}

.kanokta-mtv-page .kanokta-page__content summary::after {
	content: "+";
	float: right;
	font-size: 1.3rem;
	color: var(--kanokta-primary);
}

.kanokta-mtv-page .kanokta-page__content details[open] summary::after {
	content: "\2212";
}

.kanokta-mtv-page .kanokta-page__content details p {
	max-width: none;
	margin: 0 0 16px;
	color: var(--kanokta-text);
}

.kanokta-mtv-guncelleme {
	margin-top: 32px;
	text-align: center;
	color: var(--kanokta-text-muted);
	font-size: .85rem;
}

/* MTV'ye özel isimlendirilmiş .kanokta-mtv-guncelleme ile aynı stil, ancak
   MTV dışındaki hesaplama sayfaları (yakit-hesaplama vb.) için genel bir
   isimle - bkz. page-yakit-hesaplama.php. */
.kanokta-hesaplama-guncelleme {
	margin-top: 32px;
	text-align: center;
	color: var(--kanokta-text-muted);
	font-size: .85rem;
}

/* ==========================================================================
   404 - Sayfa Bulunamadı (404.php)
   Hafif renkli zeminde iki sütun (içerik + varsa hero maskotu), altında
   beyaz zeminde ürün kartları. Ürün kartları anasayfadaki
   .kanokta-products__grid--home + .kanokta-product-card--compact ikilisini
   birebir yeniden kullanır.
   ========================================================================== */
.kanokta-404__hero {
	position: relative;
	overflow: hidden;
	padding: 56px 0 72px;
	background:
		radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--kanokta-accent-light) 55%, transparent) 0, transparent 45%),
		linear-gradient(180deg, var(--kanokta-accent-lighter) 0%, var(--kanokta-white) 100%);
}

.kanokta-404__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

.kanokta-404__icerik {
	text-align: center;
}

@media (min-width: 900px) {
	.kanokta-404__layout {
		grid-template-columns: 1.4fr 1fr;
		gap: 48px;
	}

	.kanokta-404__layout--no-mascot {
		grid-template-columns: 1fr;
		max-width: 760px;
	}

	.kanokta-404__layout:not(.kanokta-404__layout--no-mascot) .kanokta-404__icerik {
		text-align: left;
	}
}

.kanokta-404__kod {
	display: inline-flex;
	align-items: center;
	gap: .08em;
	margin: 0 0 8px;
	font-family: var(--kanokta-font-display);
	font-weight: 900;
	font-size: clamp(5.5rem, 18vw, 9.5rem);
	line-height: 1;
	letter-spacing: -.02em;
	background: linear-gradient(135deg, var(--kanokta-primary) 0%, var(--kanokta-primary-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.kanokta-404__kalkan {
	display: inline-flex;
	color: var(--kanokta-primary);
}

.kanokta-404__kalkan svg {
	width: .72em;
	height: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.kanokta-404__kalkan svg {
		animation: kanokta-404-suzul 3.2s ease-in-out infinite;
		transform-origin: 50% 100%;
	}
}

@keyframes kanokta-404-suzul {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25%      { transform: translateY(-6px) rotate(-6deg); }
	75%      { transform: translateY(-6px) rotate(6deg); }
}

.kanokta-404__baslik {
	margin: 0 0 12px;
	font-family: var(--kanokta-font-display);
	font-weight: 800;
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	line-height: 1.2;
	color: var(--kanokta-primary-dark);
}

.kanokta-404__aciklama {
	max-width: 560px;
	margin: 0 auto 28px;
	color: var(--kanokta-text-muted);
	font-size: 1.05rem;
	line-height: 1.65;
}

@media (min-width: 900px) {
	.kanokta-404__layout:not(.kanokta-404__layout--no-mascot) .kanokta-404__aciklama {
		margin-left: 0;
	}
}

.kanokta-404__butonlar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 28px;
}

.kanokta-404__butonlar .kanokta-btn {
	text-decoration: none;
}

.kanokta-404__butonlar svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.kanokta-404__arama {
	position: relative;
	max-width: 460px;
	margin: 0 auto;
}

.kanokta-404__arama input[type="search"] {
	width: 100%;
	padding: 14px 52px 14px 20px;
	border: 1px solid var(--kanokta-border);
	border-radius: 999px;
	background-color: var(--kanokta-white);
	color: var(--kanokta-text);
	font-size: .95rem;
	box-shadow: 0 6px 20px color-mix(in srgb, var(--kanokta-primary-dark) 8%, transparent);
}

.kanokta-404__arama input[type="search"]::placeholder {
	color: var(--kanokta-text-muted);
}

.kanokta-404__arama input[type="search"]:focus {
	outline: 2px solid var(--kanokta-primary);
	outline-offset: 2px;
}

.kanokta-404__arama button {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background-color: var(--kanokta-primary);
	color: var(--kanokta-white);
	cursor: pointer;
	transition: background-color .2s ease;
}

.kanokta-404__arama button:hover,
.kanokta-404__arama button:focus {
	background-color: var(--kanokta-primary-dark);
}

@media (min-width: 900px) {
	.kanokta-404__layout:not(.kanokta-404__layout--no-mascot) .kanokta-404__butonlar {
		justify-content: flex-start;
	}

	.kanokta-404__layout:not(.kanokta-404__layout--no-mascot) .kanokta-404__arama {
		margin-left: 0;
	}
}

.kanokta-404__telefon {
	margin: 20px 0 0;
	color: var(--kanokta-text-muted);
	font-size: .95rem;
}

.kanokta-404__telefon a {
	font-weight: 700;
	color: var(--kanokta-primary-dark);
	white-space: nowrap;
}

.kanokta-404__maskot {
	display: flex;
	justify-content: center;
}

.kanokta-404__maskot-gorsel {
	width: 100%;
	max-width: 360px;
	height: auto;
}

@media (max-width: 899px) {
	.kanokta-404__maskot {
		order: -1;
	}

	.kanokta-404__maskot-gorsel {
		max-width: 200px;
	}
}

.kanokta-404__urunler {
	padding: 56px 0 72px;
	background-color: var(--kanokta-white);
}

.kanokta-404__urunler-baslik {
	margin: 0;
	text-align: center;
	font-family: var(--kanokta-font-display);
	font-weight: 800;
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	color: var(--kanokta-primary-dark);
}