/**
 * Hikaye Kısayolları şeridi (KS_VM_Stories, v2.415.0).
 * Loop öğesi sarmalayıcısı `post_class` ile şu sınıfları alır:
 *   .ks-story          her kısayol
 *   .ks-story--ring    "Vurgu halkası" işaretli (renkli çerçeve)
 *   .ks-story--badge   rozet metni dolu
 * Şablondaki kancalar (üreteç ks-make-story-item.php): .ks-story-icon (image
 * widget), .ks-story-badge (heading), .ks-story-title (heading).
 * Ölçü ve renkler operatörün Elementor panelinden değiştireceği şeyler değil,
 * o yüzden düz literal; ana renk Elementor global'inden.
 */

/* Görsel daire + halka. 🚨 Elementor 3.24+ "optimize edilmiş markup"ta widget
   içinde .elementor-widget-container YOK (ölçüldü). Halka görselin DIŞINDA
   (outline): görselin kutusu Elementor'daki genişlik ve Swiper offset'iyle
   birebir kalır; içeri padding verilince fotoğraf 5px içeriden başlıyor ve
   "fazladan boşluk" gibi okunuyordu (operatör, 6 Eyl, offset 10 → fotoğraf 15).
   Outline modern tarayıcılarda border-radius'u izler. */
.ks-story .ks-story-icon img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	box-sizing: border-box;
	padding: 0;
	background: none;
	box-shadow: none;
	outline: 1px solid #d1d1d1;                /* halkasız: ince gri çerçeve, İÇERİDE, yer kaplamaz (operatör: #d1d1d1) */
	outline-offset: -1px;
}
/* Halkalı öğe: halka kutunun İÇİNDE kenarda (dışa taşan outline swiper'ın
   overflow:hidden alanında köşelerden kesiliyordu, operatör 6 Eyl gece).
   Halka = padding alanındaki conic-gradient (4px), beyaz boşluk = inset
   gölge (3px; img'de inset gölge padding alanında görünür, ölçüldü).
   Animasyon (operatör: "daha kalın ve animasyonlu"): gradyanın başlangıç
   açısı @property ile kayıtlı özel değişken, keyframes döndürür (Chrome 85+,
   Safari 16.4+, Firefox 128+; desteklemeyen tarayıcıda halka sabit kalır).
   Hareket azaltma tercihinde animasyon yok. Görünen kenar offset'le birebir. */
@property --ks-ring-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}
@keyframes ks-ring-spin {
	to { --ks-ring-angle: 360deg; }
}
.ks-story.ks-story--ring .ks-story-icon img {
	/* Halka = 3px SAYDAM border alanına düşen gradyan (border-box katmanı);
	   beyaz boşluk = 3px padding alanına düşen düz beyaz (padding-box katmanı).
	   Önceki inset gölge, gradyan üstünde yumuşatılmış kenar bırakıp ince gri
	   bir "iç çizgi" gibi görünüyordu (operatör, 6 Eyl gece); iki katmanlı
	   arka planda kenar keskindir. Kutu ölçüsü değişmez (border-box). */
	padding: 3px;
	border: 3px solid transparent;
	outline: none;
	box-shadow: none;
	background:
		linear-gradient(#fff, #fff) padding-box,
		conic-gradient(
			from var(--ks-ring-angle),
			var(--ks-ring-c1, #F27A1A) 0deg,
			var(--ks-ring-c2, #F9C74F) 90deg,
			var(--ks-ring-c1, #F27A1A) 180deg,
			var(--ks-ring-c3, #E63946) 270deg,
			var(--ks-ring-c1, #F27A1A) 360deg
		) border-box;
	/* Renkler + hız: WP yönetimi → Hikaye Kısayolları → Halka Ayarları
	   (KS_VM_Stories, :root'a --ks-ring-c1/c2/c3/speed basar). */
	animation: ks-ring-spin var(--ks-ring-speed, 3s) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.ks-story.ks-story--ring .ks-story-icon img {
		animation: none;
	}
}
.ks-story .ks-story-icon a {
	display: block;
	line-height: 0;
}
.ks-story .ks-story-iconwrap {
	position: relative;
}

/* Rozet: ikonun sol üstünde küçük kapsül. Metin boşsa widget gizli. */
.ks-story .ks-story-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-115%, -10%);
	z-index: 2;
	pointer-events: none;
}
.ks-story .ks-story-badge .elementor-heading-title {
	display: inline-block;
	background: #e63946;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	padding: 4px 6px;
	border-radius: 999px;
	white-space: nowrap;
}
.ks-story:not(.ks-story--badge) .ks-story-badge {
	display: none;
}

/* Başlık: iki satıra kadar, ortalı; taşan kısayol adları kesilmez. */
.ks-story .ks-story-title .elementor-heading-title {
	font-size: 13px;
	line-height: 1.25;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ks-story .ks-story-title a {
	color: inherit;
	text-decoration: none;
}

/* Oklar şeridin DİKEY ORTASINDA (operatör, 6 Eyl 2026). Elementor okları
   swiper ortasından "caption spacing" (15px) kadar yukarı alır; bu pay altta
   başlık olan slaytlar için düşünülmüş ama burada ok ikon hizasında kalıp
   "üstte" görünüyordu (ölçüldü: ok 231, şerit ortası 246). Hikaye şeridinde pay 0. */
.elementor-widget-loop-carousel:has(.ks-story) {
	--arrow-prev-caption-spacing: 0px;
	--arrow-next-caption-spacing: 0px;
}

/* Oklar şeridin ÜSTÜNDE, yer tutmaz (operatör, 6 Eyl 2026: "ok ile içerik
   arasında boşluk olmasın" + "gizli okun yeri de boş kalmasın"). Elementor
   "outside" konumu şeridi 60px daraltıp okları dışarı alıyordu; flex satırı da
   gizli oka yer ayırıyordu. Şimdi: şerit %100, oklar mutlak konumda şeridin
   kenarına biner (Trendyol düzeni). Görünmez ok (disabled/lock, ks-loop-card.css)
   yer kaplamaz; ilk boyada da yer ayrılmadığı için kayma (CLS) yok.
   ≤1024'te oklar zaten gizli. */
@media (min-width: 1025px) {
	.elementor-widget-loop-carousel.elementor-element:has(.ks-story) {
		position: relative;
	}
	.elementor-widget-loop-carousel.elementor-element:has(.ks-story) .swiper {
		width: 100%;
		margin: 0;
	}
	.elementor-widget-loop-carousel.elementor-element:has(.ks-story) .swiper ~ .elementor-swiper-button {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		margin: 0;
	}
	.elementor-widget-loop-carousel.elementor-element:has(.ks-story) .swiper ~ .elementor-swiper-button-prev {
		left: 0;
		right: auto;
	}
	.elementor-widget-loop-carousel.elementor-element:has(.ks-story) .swiper ~ .elementor-swiper-button-next {
		right: 0;
		left: auto;
	}
}

/* Tablet + mobilde kart içeriği slaydın SOLUNA yaslı (operatör, 6 Eyl 2026:
   "ilk öğe 15px ayarlı ama daha çok boşluk var"). Swiper ilk slaydı 15px'ten
   başlatıyor, ama ikon (84px) slaydın içinde ortalanıyordu: mobilde 101px
   slaytta +8px, tablette 147px slaytta +28px (ölçüldü). Elementor konteyner
   hizasını --align-items değişkeniyle verir; burada sola çekiliyor ve ikon
   sarmalayıcısı içeriğe daralıyor ki rozet de ikona göre kalsın. Masaüstünde
   (tüm öğeler sığıyor) ortalama duruyor. */
/* Özgüllük: Elementor'un kırılım kuralı `.elementor-14 .elementor-element
   .elementor-element-xxx` (3 sınıf); 2 sınıf yenildi (ölçüldü) → 4 sınıf. */
@media (max-width: 1024px) {
	.ks-story .ks-story-card.e-con.e-flex,
	.ks-story .ks-story-iconwrap.e-con.e-flex {
		--align-items: flex-start;
	}
	.ks-story .ks-story-iconwrap.e-con.e-flex {
		--width: auto;
		width: auto;
		max-width: 100%;
	}
}