/**
 * Pustular — yalnızca ön yüzde yüklenen stiller:
 * yapışkan header, açılış animasyonu, görünme animasyonu ve galeri slider'ı.
 */

html {
	scroll-behavior: smooth;
}

/* Template part'lar ve ana içerik arasındaki boşluk */
body .wp-site-blocks > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

body .wp-site-blocks > footer {
	padding-bottom: var(--wp--preset--spacing--20);
}

/* ------------------------------------------------------------------ */
/* Yapışkan header                                                     */
/* ------------------------------------------------------------------ */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 40;
}

@media (min-width: 601px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}

/* ------------------------------------------------------------------ */
/* Açılış animasyonu                                                   */
/* ------------------------------------------------------------------ */

.pustular-loader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgb(253 253 253 / 0.8);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	animation: pustular-loader-out 1.2s 2.2s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

.pustular-loader__logo path {
	fill: transparent;
	stroke: var(--wp--preset--color--contrast, #000);
	stroke-width: 3;
	stroke-dasharray: 1400;
	stroke-dashoffset: 1400;
	animation: pustular-draw 1.5s ease-in-out forwards, pustular-fill 0.5s 1.5s ease-in-out forwards;
}

@keyframes pustular-draw {
	to { stroke-dashoffset: 0; }
}

@keyframes pustular-fill {
	from { fill: transparent; }
	to { fill: var(--wp--preset--color--contrast, #000); stroke: transparent; }
}

@keyframes pustular-loader-out {
	to {
		transform: translateY(-100%);
		visibility: hidden;
	}
}

/* ------------------------------------------------------------------ */
/* Görünme animasyonu (blok ayarı: "Görünme animasyonu")               */
/* ------------------------------------------------------------------ */

.pustular-js .pustular-fade {
	opacity: 0;
	transform: translateY(4rem) scale(0.98);
	filter: blur(4px);
	transition:
		opacity 1.8s var(--wp--custom--transition),
		transform 1.8s var(--wp--custom--transition),
		filter 1.8s var(--wp--custom--transition);
}

.pustular-js .pustular-fade.is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}

.pustular-delay-100 { transition-delay: 100ms !important; }
.pustular-delay-200 { transition-delay: 200ms !important; }
.pustular-delay-300 { transition-delay: 300ms !important; }
.pustular-delay-400 { transition-delay: 400ms !important; }
.pustular-delay-600 { transition-delay: 600ms !important; }

/* ------------------------------------------------------------------ */
/* Galeri > Geçişli slider                                             */
/* ------------------------------------------------------------------ */

.wp-block-gallery.has-nested-images.is-style-fade-slider {
	position: relative;
	display: block !important;
	min-height: 400px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
}

.wp-block-gallery.has-nested-images.is-style-fade-slider::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgb(0 0 0 / 0.1);
	pointer-events: none;
}

.wp-block-gallery.has-nested-images.is-style-fade-slider > .wp-block-image {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 1s ease;
}

.wp-block-gallery.has-nested-images.is-style-fade-slider > .wp-block-image.is-active,
.wp-block-gallery.has-nested-images.is-style-fade-slider:not(.is-running) > .wp-block-image:first-child {
	opacity: 1;
	z-index: 1;
}

.wp-block-gallery.has-nested-images.is-style-fade-slider > .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.pustular-loader {
		display: none;
	}

	.pustular-js .pustular-fade {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}