/*
 * SukodCreative – SonayShipping · V2.1
 * Ana sayfa “Hizmetlerimiz” (sukod-services-home) ve “Haberler ve Duyurular” (sonay-news · referans/eşit düzen)
 * Ortak, örnek (instance) kapsamlı slider stili. Tüm değerler Elementor kontrollerinden CSS değişkeniyle ezilebilir.
 * Kırılımlar: ≥1200 masaüstü · 768–1199 tablet · ≤767 mobil.
 */
.skc {
	--skc-navy: #062B59;
	--skc-blue: #087DE1;
	--skc-ice: #EAF6FF;
	--skc-card: #FFFFFF;
	--skc-line: #D7E6F3;
	--skc-text: #3C5470;
	--skc-side: 96px;
	--skc-max: 1728px;
	--skc-info: 420px;
	--skc-col-gap: 32px;
	--skc-gap: 24px;
	--skc-pad-y: 64px;
	--skc-min-h: 620px;
	--skc-card-h: 440px;
	--skc-radius: 20px;
	--skc-card-pad: 24px;
	--skc-shadow: 0 8px 24px rgba(6, 43, 89, .12);
	--skc-img-h: 208px;
	--skc-speed: 500ms;
	--skc-ease: cubic-bezier(.22, .61, .36, 1);
	--skc-title-c: var(--skc-navy);
	--skc-cta-bg: var(--skc-blue);
	--skc-cta-c: #fff;
	position: relative;
	isolation: isolate;
	min-height: var(--skc-min-h);
	padding-block: var(--skc-pad-y);
	overflow: hidden;
	color: var(--skc-text);
	font-family: inherit;
}
.skc *, .skc *::before, .skc *::after { box-sizing: border-box; }
.skc--news { --skc-info: 360px; --skc-min-h: 560px; --skc-card-h: 408px; }

/* Arka plan · katmanlar (görsel / gradient / düz renk; overlay; dalga; dekor) */
.skc__bg { position: absolute; inset: 0; z-index: -3; background-color: var(--skc-ice); background-size: cover; background-position: var(--skc-bg-pos, center); background-repeat: no-repeat; }
.skc--svc .skc__bg { background-image: var(--skc-bg-img, none); }
.skc__ov { position: absolute; inset: 0; z-index: -2; background: var(--skc-ov, linear-gradient(90deg, rgba(234, 246, 255, .97) 0%, rgba(234, 246, 255, .9) 38%, rgba(234, 246, 255, .62) 100%)); pointer-events: none; }
.skc--news .skc__ov { background: var(--skc-ov, linear-gradient(180deg, #EAF6FF 0%, #F5FAFF 100%)); }
.skc__wave { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 120px; background: var(--skc-wave, none) bottom center / 100% 100% no-repeat; opacity: .9; pointer-events: none; }
.skc__deco { position: absolute; z-index: -1; pointer-events: none; opacity: .14; color: var(--skc-navy); }
.skc__deco--helm { right: 2%; top: 8%; width: clamp(120px, 14vw, 240px); aspect-ratio: 1; background: var(--skc-helm, none) center / contain no-repeat; }
.skc__deco--birds { left: 30%; top: 10%; width: 140px; height: 60px; background: var(--skc-birds, none) center / contain no-repeat; opacity: .35; }
.skc.no-wave .skc__wave, .skc.no-deco .skc__deco { display: none; }

/* Yerleşim */
.skc__in { width: min(var(--skc-max), calc(100% - 2 * var(--skc-side))); margin-inline: auto; display: grid; grid-template-columns: var(--skc-info) minmax(0, 1fr); column-gap: var(--skc-col-gap); align-items: center; }
.skc.no-info .skc__in { grid-template-columns: minmax(0, 1fr); }
.skc.no-info .skc__info { display: none; }

/* Bilgi sütunu */
.skc__eyebrow { margin: 0 0 12px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--skc-blue); }
.skc__title { margin: 0 0 16px; font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -.01em; color: var(--skc-title-c); overflow-wrap: anywhere; }
.skc__desc { margin: 0 0 24px; font-size: 16px; line-height: 24px; color: var(--skc-text); }
.skc__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--skc-cta-bg); color: var(--skc-cta-c); font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 18px rgba(8, 125, 225, .28); transition: transform 240ms var(--skc-ease), box-shadow 240ms var(--skc-ease); }
.skc__cta:hover { color: var(--skc-cta-c); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(8, 125, 225, .34); }
.skc__cta .ic { width: 18px; height: 18px; }
.skc__benefits { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.skc__benefits li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--skc-navy); }
.skc__benefits .skc__bic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--skc-line); color: var(--skc-blue); }
.skc__benefits .ic { width: 22px; height: 22px; }

/* Kart alanı (JS yokken yatay kaydırma; JS ile pencere modu) */
.skc__main { position: relative; min-width: 0; }
.skc__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--skc-gap)) / 4); gap: var(--skc-gap); margin: 0; padding: 8px 0 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.skc__track > * { scroll-snap-align: start; }
.skc.is-js .skc__track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(var(--skc-pv, 4), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; touch-action: pan-y; }
.skc.is-js.is-feat .skc__track { grid-template-columns: minmax(0, 500fr) repeat(3, minmax(0, 254.67fr)); }
.skc.is-js .skc__item[hidden] { display: none !important; }
.skc.is-js .skc__track.is-anim-next > .skc__item:not([hidden]) { animation: skc-in-next var(--skc-speed) var(--skc-ease) both; }
.skc.is-js .skc__track.is-anim-prev > .skc__item:not([hidden]) { animation: skc-in-prev var(--skc-speed) var(--skc-ease) both; }
@keyframes skc-in-next { from { opacity: .35; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes skc-in-prev { from { opacity: .35; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

/* Kart: ortak */
.skc__item { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: var(--skc-card-h); border-radius: var(--skc-radius); background: var(--skc-card); border: 1px solid var(--skc-line); box-shadow: var(--skc-shadow); overflow: hidden; transition: transform 240ms var(--skc-ease), box-shadow 240ms var(--skc-ease); }
.skc__item:hover, .skc__item:focus-within { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(6, 43, 89, .16); }
.skc__media { position: relative; flex: none; height: var(--skc-img-h); overflow: hidden; background: #dfeaf5; }
.skc__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--skc-img-pos, center); transition: transform 240ms var(--skc-ease); }
.skc__item:hover .skc__media img, .skc__item:focus-within .skc__media img { transform: scale(1.04); }
.skc__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: var(--skc-card-pad); }
.skc__ttl { margin: 0; font-size: 22px; line-height: 26px; font-weight: 800; color: var(--skc-navy); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.skc__link { color: inherit; text-decoration: none; }
.skc__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.skc__link:focus-visible { outline: none; }
.skc__item:has(.skc__link:focus-visible) { outline: 3px solid var(--skc-blue); outline-offset: 3px; }
.skc__txt { margin: 0; font-size: 16px; line-height: 24px; color: var(--skc-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.skc__go { display: grid; place-items: center; width: 44px; height: 44px; margin-top: auto; margin-left: auto; border-radius: 50%; background: var(--skc-ice); color: var(--skc-blue); transition: background 240ms var(--skc-ease), color 240ms var(--skc-ease); }
.skc__item:hover .skc__go { background: var(--skc-blue); color: #fff; }
.skc__go .ic { width: 18px; height: 18px; }

/* Hizmet kartı */
.skc--svc .skc__media { height: 52%; min-height: 200px; }
.skc--svc .skc__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(0deg, var(--skc-grad, rgba(6, 43, 89, .95)) 0%, rgba(6, 43, 89, 0) 100%); opacity: .55; }
.skc__ic { position: absolute; z-index: 2; left: var(--skc-card-pad); top: calc(52% - 28px); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--skc-ic-bg, var(--skc-blue)); color: var(--skc-ic-c, #fff); box-shadow: 0 8px 18px rgba(8, 125, 225, .3); }
.skc__ic .ic { width: var(--skc-ic-size, 26px); height: var(--skc-ic-size, 26px); }
.skc--svc .skc__body { padding-top: calc(var(--skc-card-pad) + 34px); }

/* Haber kartı */
.skc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: #5A7190; }
.skc__badge { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--skc-navy); font-size: 12px; line-height: 16px; font-weight: 700; }
.skc__src { font-size: 12.5px; color: #5A7190; }
.skc--news .skc__item:not(.is-wide) .skc__ttl { font-size: 20px; line-height: 24px; }
.skc--news .skc__item:not(.is-wide) .skc__body { min-height: 200px; }
/* Öne çıkan geniş kart: görsel kartı tamamen kaplar, alt lacivert gradient metni okunur tutar. */
.skc__item.is-wide { color: #fff; border-color: transparent; }
.skc__item.is-wide .skc__media { position: absolute; inset: 0; height: auto; }
.skc__item.is-wide .skc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 43, 89, .95) 0%, rgba(6, 43, 89, .55) 45%, rgba(6, 43, 89, 0) 75%); }
.skc__item.is-wide .skc__body { position: relative; z-index: 1; justify-content: flex-end; margin-top: auto; }
.skc__item.is-wide .skc__ttl { color: #fff; font-size: 26px; line-height: 32px; }
.skc__item.is-wide .skc__txt, .skc__item.is-wide .skc__meta, .skc__item.is-wide .skc__src { color: rgba(255, 255, 255, .88); }
.skc__item.is-wide .skc__go { margin-top: 8px; }

/* Kontroller */
.skc__ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.skc__ctrl[hidden], .skc__ctrl [hidden] { display: none !important; }
.skc__arw, .skc__pause { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--skc-line); border-radius: 50%; background: #fff; color: var(--skc-navy); cursor: pointer; transition: background 200ms, color 200ms; }
.skc__arw:hover, .skc__pause:hover { background: var(--skc-blue); color: #fff; border-color: var(--skc-blue); }
.skc__arw:focus-visible, .skc__pause:focus-visible, .skc__dot:focus-visible, .skc__cta:focus-visible { outline: 3px solid var(--skc-blue); outline-offset: 3px; }
.skc__arw[disabled] { opacity: .4; cursor: default; }
.skc__arw .ic, .skc__pause .ic { width: 20px; height: 20px; }
.skc__dots { display: flex; align-items: center; gap: 4px; }
.skc__dot { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.skc__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: #B8CDE2; transition: width 240ms var(--skc-ease), background 240ms; }
.skc__dot[aria-current="true"]::before { width: 26px; border-radius: 99px; background: var(--skc-blue); }
/* Masaüstü: kart alanı PDF geometrisini tam kullanır (1276 / 1336 px); oklar ve noktalar kartların altındaki kontrol sırasında, kartı örtmez */
@media (min-width: 1200px) {
	.skc__ctrl { margin-top: 24px; }
}

/* Boş / not durumu */
.skc__empty { margin: 0; padding: 24px; border-radius: var(--skc-radius); background: #fff; border: 1px dashed var(--skc-line); font-size: 15px; color: var(--skc-text); }

/* Tablet 768–1199: bilgi üstte, 2 eşit kart, 20 px aralık, 32 px yan boşluk */
@media (max-width: 1199px) {
	.skc { --skc-side: 32px; --skc-gap: 20px; --skc-pad-y: 56px; min-height: 0; }
	.skc__in { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.skc__title { font-size: 36px; line-height: 40px; }
	.skc__track { grid-auto-columns: calc((100% - var(--skc-gap)) / 2); }
	.skc.is-js.is-feat .skc__track { grid-template-columns: repeat(var(--skc-pv, 2), minmax(0, 1fr)); }
	.skc__item.is-wide { color: inherit; border-color: var(--skc-line); }
	.skc__item.is-wide .skc__media { position: relative; inset: auto; height: var(--skc-img-h); }
	.skc__item.is-wide .skc__media::after { display: none; }
	.skc__item.is-wide .skc__ttl { color: var(--skc-navy); font-size: 20px; line-height: 24px; }
	.skc__item.is-wide .skc__txt, .skc__item.is-wide .skc__meta, .skc__item.is-wide .skc__src { color: inherit; }
	.skc__benefits { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
/* Mobil ≤767: tek sütun, tek kart, 20 px yan boşluk, 16 px aralık, görsel 16:10 */
@media (max-width: 767px) {
	.skc { --skc-side: 20px; --skc-gap: 16px; --skc-pad-y: 44px; --skc-card-h: 0px; }
	.skc__title { font-size: 30px; line-height: 34px; }
	.skc__ttl, .skc--news .skc__item:not(.is-wide) .skc__ttl { font-size: 20px; line-height: 24px; }
	.skc__track { grid-auto-columns: 88%; }
	.skc__media, .skc--svc .skc__media, .skc__item.is-wide .skc__media { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
	.skc__ic { top: auto; margin-top: -28px; position: relative; left: auto; margin-left: var(--skc-card-pad); }
	.skc--svc .skc__body { padding-top: 12px; }
	.skc__ctrl { gap: 8px 16px; flex-wrap: wrap; }
	/* Dar ekranda noktalar ayrı satırda; 24×44 px hedef (WCAG 2.5.8), çok grupta satır kırar, taşma olmaz */
	.skc__dots { order: 3; flex: 0 0 100%; justify-content: center; flex-wrap: wrap; gap: 0; min-width: 0; }
	.skc__dot { width: 24px; }
	.skc__dot[aria-current="true"] { width: 36px; }
	.skc.m-hide-info .skc__info { display: none; }
	.skc.m-hide-cta .skc__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.skc__item, .skc__media img, .skc__cta, .skc__go, .skc__dot::before { transition: none; }
	.skc__item:hover, .skc__item:focus-within { transform: none; }
	.skc__item:hover .skc__media img { transform: none; }
	.skc.is-js .skc__track.is-anim-next > .skc__item, .skc.is-js .skc__track.is-anim-prev > .skc__item { animation: none !important; }
}
/* Elementor editör uyarısı */
.skc-note { padding: 14px 16px; border-radius: 8px; background: #fff8e5; border: 1px solid #f0c33c; color: #5f4a00; font-size: 13px; }