/*
 * Çetinkaya – Scroll-Effekte. Wird nur geladen, wenn eine Variante (a, b, c) aktiv ist.
 * Klassen setzt assets/efekt.js: ck-r (einblenden), ck-r-img (Bild aufdecken), ck-kelime (Wort für Wort), ck-gor (sichtbar).
 */

/* ---------- Gemeinsam ---------- */
.ck-header { transition: padding .35s ease, box-shadow .35s ease, background-color .45s ease, border-color .45s ease; }
.ck-logo img { transition: height .35s ease, filter .45s ease; }
body.ck-kaydir .ck-header { padding-top: .5rem !important; padding-bottom: .5rem !important; box-shadow: 0 6px 24px rgba(28, 22, 80, .10); }
body.ck-kaydir .ck-logo img { height: 44px; }

.ck-hero, .ck-sayfa-hero { overflow: hidden; }

/* Einblenden von unten */
.ck-r { opacity: 0; transform: translate3d(var(--ck-x, 0), 26px, 0); }
.ck-r.ck-gor {
	opacity: 1;
	transform: none;
	transition: opacity .9s cubic-bezier(.2, .65, .25, 1) var(--ck-d, 0ms), transform 1s cubic-bezier(.2, .65, .25, 1) var(--ck-d, 0ms);
}

@media (prefers-reduced-motion: no-preference) {
	/* Startbild-Texte beim Laden */
	.ck-js .ck-hero .ck-hero__icerik > *,
	.ck-js .ck-sayfa-hero .wp-block-cover__inner-container > .wp-block-group > * {
		animation: ck-yuksel 1s cubic-bezier(.2, .65, .25, 1) both;
	}
	.ck-js .ck-hero .ck-hero__icerik > :nth-child(2), .ck-js .ck-sayfa-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(2) { animation-delay: .12s; }
	.ck-js .ck-hero .ck-hero__icerik > :nth-child(3) { animation-delay: .26s; }
	.ck-js .ck-hero .ck-hero__icerik > :nth-child(4) { animation-delay: .4s; }
}
@keyframes ck-yuksel { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Vorschau-Umschalter */
.ck-efekt-sec {
	position: fixed; left: 16px; bottom: 16px; z-index: 75;
	display: flex; align-items: center; gap: .25rem; padding: .3rem;
	background: rgba(28, 22, 80, .92); border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
	font: 600 .78rem/1 Manrope, sans-serif;
}
.ck-efekt-sec span { color: #D9C6A0; padding: 0 .5rem 0 .6rem; letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; }
.ck-efekt-sec a { color: #fff; text-decoration: none; padding: .45rem .7rem; border-radius: 999px; }
.ck-efekt-sec a:hover { background: rgba(255, 255, 255, .12); }
.ck-efekt-sec a[aria-current] { background: #fff; color: var(--ck-gece); }
@media (max-width: 782px) { .ck-efekt-sec { bottom: 70px; left: 8px; right: 8px; justify-content: center; } }

/* ---------- B und C: Tiefe ---------- */
@media (prefers-reduced-motion: no-preference) {
	.ck-js .ck-efekt-b .ck-hero .wp-block-cover__image-background,
	.ck-js .ck-efekt-c .ck-hero .wp-block-cover__image-background,
	.ck-js .ck-efekt-b .ck-sayfa-hero .wp-block-cover__image-background,
	.ck-js .ck-efekt-c .ck-sayfa-hero .wp-block-cover__image-background {
		animation: ck-yakinlas 2.8s cubic-bezier(.2, .6, .2, 1) both;
		will-change: translate;
	}
}
@keyframes ck-yakinlas { from { scale: 1.12; } to { scale: 1; } }

/* Bilder wie hinter einem Vorhang aufdecken. Verdeckt wird nur das Bild, nicht der Rahmen:
   ein vollständig verdeckter Rahmen gilt für Chrome nie als sichtbar und würde nie erscheinen. */
.ck-r-img img { clip-path: inset(0 0 100% 0); scale: 1.12; }
.ck-efekt-c .ck-r-img img { clip-path: inset(0 100% 0 0); }
.ck-r-img.ck-gor img {
	clip-path: inset(-40px);
	scale: 1;
	transition: clip-path 1.25s cubic-bezier(.75, 0, .2, 1) var(--ck-d, 0ms), scale 1.8s cubic-bezier(.2, .6, .2, 1) var(--ck-d, 0ms);
}

/* Projektkarten: Bild zoomt beim Erscheinen leicht heraus */
.ck-efekt-b .ck-kart.ck-r img, .ck-efekt-c .ck-kart.ck-r img { scale: 1.1; }
.ck-efekt-b .ck-kart.ck-gor img, .ck-efekt-c .ck-kart.ck-gor img { scale: 1; transition: scale 1.6s cubic-bezier(.2, .6, .2, 1) var(--ck-d, 0ms), transform .6s ease; }

/* ---------- C: lebendig ---------- */

/* Kopf transparent über dem Startbild, weiß beim Scrollen */
.ck-efekt-c.home header.ck-ust { margin-bottom: calc(-1 * var(--ck-hh, 82px)); }
.ck-efekt-c.home:not(.ck-kaydir) .ck-header {
	background-color: transparent !important;
	border-bottom-color: transparent;
	box-shadow: none;
}
.ck-efekt-c.home:not(.ck-kaydir) .ck-header .wp-block-navigation__responsive-container:not(.is-menu-open) a,
.ck-efekt-c.home:not(.ck-kaydir) .ck-header .wp-block-navigation__responsive-container-open { color: #fff; text-shadow: 0 1px 10px rgba(20, 16, 60, .55); }
.ck-efekt-c.home:not(.ck-kaydir) .ck-header .ck-logo img { filter: brightness(0) invert(1); }
.ck-efekt-c.home .ck-hero { padding-top: calc(var(--ck-hh, 82px) + 2rem) !important; }
/* Dunkler Verlauf oben, damit das weiße Menü auch vor hellem Himmel lesbar bleibt */
.ck-efekt-c.home .ck-hero::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--ck-hh, 82px) + 120px);
	background: linear-gradient(180deg, rgba(28, 22, 80, .72) 0%, rgba(28, 22, 80, .35) 55%, rgba(28, 22, 80, 0) 100%);
	z-index: 1; pointer-events: none;
}

/* Überschriften Wort für Wort */
.ck-k { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.ck-k > span { display: inline-block; transform: translateY(112%); }
.ck-kelime.ck-gor .ck-k > span {
	transform: none;
	transition: transform .95s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--ck-d, 0ms) + var(--i, 0) * 60ms);
}
@media (prefers-reduced-motion: no-preference) {
	.ck-js .ck-efekt-c .ck-hero h1:not(.ck-bolundu),
	.ck-js .ck-efekt-c .ck-sayfa-hero h1:not(.ck-bolundu) { opacity: 0; animation: ck-goster 0s 1.2s forwards; }
	.ck-js .ck-efekt-c .ck-hero .ck-hero__icerik > h1,
	.ck-js .ck-efekt-c .ck-sayfa-hero h1 { animation: none; }
}
@keyframes ck-goster { to { opacity: 1; } }

/* Kleine Überschriften: Linie zeichnet sich */
.ck-efekt-c .ck-ust-baslik.ck-r::before { transform: scaleX(0); transform-origin: left; }
.ck-efekt-c .ck-ust-baslik.ck-gor::before { transform: scaleX(1); transition: transform .8s cubic-bezier(.2, .7, .2, 1) calc(var(--ck-d, 0ms) + .25s); }

/* Ablauf-Schritte: bronzene Linie läuft über die graue */
.ck-efekt-c .ck-adim { position: relative; }
.ck-efekt-c .ck-adim::before {
	content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
	background: var(--ck-bronz); transform-origin: left; transform: scaleX(1);
}
.ck-efekt-c .ck-adim.ck-r::before { transform: scaleX(0); }
.ck-efekt-c .ck-adim.ck-gor::before { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.65, 0, .2, 1) calc(var(--ck-d, 0ms) + .2s); }

/* Lesefortschritt oben */
.ck-ilerleme {
	position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
	background: linear-gradient(90deg, var(--ck-bronz), var(--ck-kirmizi));
	transform: scaleX(0); transform-origin: left; pointer-events: none;
}
body.admin-bar .ck-ilerleme { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ck-ilerleme { top: 46px; } }