/* ==========================================================================
   KARŞILAMA SLAYTI (ana sayfa)
   Her slaytta: renkli zemin + tek renge çevrilmiş fotoğraf + kalemle çizilen çizim.
   --------------------------------------------------------------------------
   Özelleştirme (her <article> üzerindeki style özniteliğinden):
   • --bg-a / --bg-b ...... zemin rengi (orta / kenar)
   • --foto-o ............. fotoğrafın görünürlüğü (0–1)
   • --foto-p ............. fotoğrafın parlaklığı (0–1; açık renkli fotoğraflarda düşürün)
   • Otomatik geçiş süresi  .hs { --hs-duration }
   ========================================================================== */

.hs {
	--hs-paper: #efe8da;
	--hs-paper-2: rgba(239, 232, 218, .78);
	--hs-paper-3: rgba(239, 232, 218, .5);
	--hs-rule: rgba(239, 232, 218, .22);
	--hs-seal: #a8313a;
	--hs-serif: var(--ec-serif);
	--hs-ease: cubic-bezier(.77, 0, .175, 1);
	--hs-ease-out: cubic-bezier(.16, 1, .3, 1);
	--hs-duration: 8s;
	--pad-x: max(var(--ec-pad), calc((100vw - var(--ec-kap)) / 2));
	--svh: 1vh;

	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 620px;
	max-height: 1100px;
	overflow: hidden;
	isolation: isolate;
	background: #16233f;
	color: var(--hs-paper);
	font-family: var(--hs-serif);
	font-optical-sizing: auto;
	touch-action: pan-y pinch-zoom;
}
@supports (height: 1svh) { .hs { --svh: 1svh; } }
.hs, .hs *, .hs *::before, .hs *::after { box-sizing: border-box; }
.hs ::selection { background: var(--hs-paper); color: #16233f; }
.hs :focus-visible { outline: 1px solid var(--hs-paper); outline-offset: 5px; }

/* kâğıt dokusu */
.hs::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 7;
	pointer-events: none;
	opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Slaytlar ---------- */
.hs__track { position: absolute; inset: 0; }
.hs__slide {
	--bg-a: #29447a;
	--bg-b: #16233f;
	--foto-o: .45;
	--foto-p: .85;
	--lead: .8s;
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: calc(var(--ec-baslik-h) + 40px) var(--pad-x) 168px;
	overflow: hidden;
	visibility: hidden;
}
.hs__slide.is-active, .hs__slide.is-leaving { visibility: visible; }
.hs__slide.is-active { z-index: 3; }
.hs__slide.is-leaving { z-index: 2; }
.hs:not(.is-ready) .hs__slide { visibility: hidden; }
/* Betik gelmeden de ilk slaytın zemini ve fotoğrafı hemen boyanır (LCP) */
.hs:not(.is-ready) .hs__slide.is-active .hs__zemin { visibility: visible; }
.hs__slide.is-resetting, .hs__slide.is-resetting * { transition: none !important; animation: none !important; }

.hs__zemin { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.hs__bg { position: absolute; inset: 0; background: radial-gradient(75% 95% at 74% 44%, var(--bg-a) 0%, var(--bg-b) 78%); }
.hs__foto { position: absolute; inset: 0; overflow: hidden; }
.hs__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--foto-o);
	filter: grayscale(1) brightness(var(--foto-p)) contrast(1.08);
	mix-blend-mode: luminosity;
	transform: scale(1.1);
}
.hs__slide.is-shown .hs__foto img { animation: hs-kb calc(var(--hs-duration) + 4s) cubic-bezier(.2, .6, .35, 1) both; }
.hs__golge {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--bg-b) 0%, color-mix(in srgb, var(--bg-b) 72%, transparent) 36%, transparent 68%),
		linear-gradient(0deg, color-mix(in srgb, var(--bg-b) 85%, transparent) 0%, transparent 32%);
}

/* ---------- Çizim ---------- */
.hs__media {
	position: absolute;
	z-index: 1;
	right: calc(var(--pad-x) * .8);
	top: 50%;
	width: min(40vw, 620px, 64 * var(--svh));
	aspect-ratio: 1;
	translate: 0 -50%;
	pointer-events: none;
}
.hs__svg { --k: 1; display: block; width: 100%; height: 100%; overflow: visible; }
.hs__svg .draw {
	fill: none;
	stroke: var(--hs-paper);
	stroke-width: calc(1.7px * var(--k));
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1 1.02;
	stroke-dashoffset: 1.01;
	opacity: 0;
	transition:
		stroke-dashoffset 1.5s var(--hs-ease) calc(var(--lead) + var(--d, 0) * 1s),
		opacity 0s linear calc(var(--lead) + var(--d, 0) * 1s);
}
.hs__svg .soft { stroke-opacity: .55; }
.hs__svg .thin { stroke-width: calc(1.15px * var(--k)); }
.hs__svg .bold { stroke-width: calc(3px * var(--k)); }
.hs__slide.is-shown .draw { stroke-dashoffset: 0; opacity: 1; }

.hs__svg .inscr { font: 500 9.5px var(--hs-serif); letter-spacing: 2.4px; fill: var(--hs-paper); opacity: 0; transition: opacity 1.4s ease calc(var(--lead) + 1.8s); }
.hs__slide.is-shown .inscr { opacity: .85; }

/* terazi */
.hs__svg .beam  { transform-origin: 250px 160px; transform: rotate(-2.5deg); }
.hs__svg .pan--l { transform-origin: 108px 160px; transform: rotate(2.5deg); }
.hs__svg .pan--r { transform-origin: 392px 160px; transform: rotate(2.5deg); }
.hs__slide.is-shown .beam { animation: hs-sway 4.2s ease-in-out calc(var(--lead) + 2.6s) infinite alternate; }
.hs__slide.is-shown .pan  { animation: hs-sway-back 4.2s ease-in-out calc(var(--lead) + 2.6s) infinite alternate; }

/* sözleşme: imza + kaşe */
.hs__svg .draw.sig { stroke-width: calc(2px * var(--k)); transition-duration: 1.5s, 0s; transition-timing-function: cubic-bezier(.45, .05, .55, .95), linear; }
.hs__svg .draw.sig-tail { stroke-width: calc(1.8px * var(--k)); transition-duration: .6s, 0s; transition-timing-function: cubic-bezier(.3, 0, .2, 1), linear; }
.hs__svg .pop {
	opacity: 0;
	transform: rotate(-30deg) scale(1.8);
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity .18s ease calc(var(--lead) + var(--d, 0) * 1s), transform .7s cubic-bezier(.3, 1.45, .55, 1) calc(var(--lead) + var(--d, 0) * 1s);
}
.hs__slide.is-shown .pop { opacity: 1; transform: rotate(-12deg) scale(1); }
.hs__svg .seal-disc { fill: var(--hs-seal); stroke: var(--hs-paper); stroke-width: 1.4; }
.hs__svg .seal-ring { fill: none; stroke: var(--hs-paper); stroke-width: .8; stroke-opacity: .7; }
.hs__svg .seal-text { font: 600 6px var(--ec-sans); letter-spacing: 1.2px; fill: var(--hs-paper); }
.hs__svg .seal-mono { fill: var(--hs-paper); }
.hs__svg .stamp-ring { fill: none; stroke: var(--hs-paper); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hs__slide.is-shown .stamp-ring { animation: hs-stamp 1s var(--hs-ease-out) calc(var(--lead) + .3s + var(--d, 0) * 1s) both; }

/* ev: ışıklar ve baca */
.hs__svg .glow { fill: var(--hs-paper); opacity: 0; }
.hs__slide.is-shown .glow { animation: hs-glow-in 1.2s ease calc(var(--lead) + 2.2s) both, hs-glow 3s ease-in-out calc(var(--lead) + 3.4s) infinite alternate; }
.hs__slide.is-shown .glow + .glow { animation-delay: calc(var(--lead) + 2.5s), calc(var(--lead) + 4s); }
.hs__svg .smoke { fill: none; stroke: var(--hs-paper); stroke-width: calc(1.5px * var(--k)); stroke-linecap: round; stroke-dasharray: .24 1; stroke-dashoffset: .24; opacity: 0; }
.hs__slide.is-shown .smoke { animation: hs-smoke 3.6s linear calc(var(--lead) + 2.4s) infinite; }
.hs__slide.is-shown .smoke + .smoke { animation-delay: calc(var(--lead) + 4.2s); }

/* ---------- Metin ---------- */
.hs__content { position: relative; z-index: 3; width: min(760px, 50vw); }
.hs__label { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(14px, 2.4 * var(--svh), 24px); font-size: 17px; font-style: italic; color: var(--hs-paper-2); }
.hs__label-line { flex: none; width: 40px; height: 1px; background: #d5b48a; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--hs-ease-out) var(--lead); }
.hs__slide.is-shown .hs__label-line { transform: none; }
.hs__title {
	max-width: 17ch;
	margin: 0;
	font-size: clamp(2.5rem, min(5.2vw, 8.4 * var(--svh)), 5.4rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.022em;
	text-wrap: balance;
	color: var(--hs-paper);
}
.hs__label-text, .hs__title .w { display: inline-block; clip-path: inset(-30% 100% -40% 0); transition: clip-path .6s cubic-bezier(.45, 0, .2, 1) var(--wd, 0s); }
.hs__label-text { --wd: calc(var(--lead) + .15s); }
.hs__title .w { --wd: calc(var(--lead) + .25s + var(--i, 0) * .075s); }
.hs__slide.is-shown .hs__label-text, .hs__slide.is-shown .hs__title .w { clip-path: inset(-30% -5% -40% -5%); }
.hs__desc {
	max-width: 46ch;
	margin: clamp(18px, 3 * var(--svh), 28px) 0 0;
	font: 400 clamp(16px, 1.15vw, 18.5px)/1.7 var(--ec-sans);
	color: var(--hs-paper-2);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .9s ease calc(var(--lead) + .75s), transform 1.2s var(--hs-ease-out) calc(var(--lead) + .75s);
}
.hs__slide.is-shown .hs__desc { opacity: 1; transform: none; }
.hs__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(24px, 4.4 * var(--svh), 44px); }
.hs-btn, .hs-link { opacity: 0; transform: translateY(12px); transition: opacity .9s ease var(--rd), transform 1.2s var(--hs-ease-out) var(--rd), background-color .3s ease, color .3s ease; }
.hs-btn  { --rd: calc(var(--lead) + .9s); }
.hs-link { --rd: calc(var(--lead) + 1s); }
.hs__slide.is-shown .hs-btn, .hs__slide.is-shown .hs-link { opacity: 1; transform: none; }
.hs-btn {
	display: inline-flex;
	align-items: center;
	height: 54px;
	padding: 0 28px;
	border-radius: 2px;
	background: var(--hs-paper);
	color: var(--bg-b);
	font: 600 15px/1 var(--ec-sans);
	letter-spacing: .02em;
	text-decoration: none;
}
.hs-btn:hover { background: #fff; }
.hs-uline { position: relative; text-decoration: none; }
.hs-uline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--hs-ease-out); }
.hs-uline:hover::after, .hs-uline:focus-visible::after { transform: none; }
.hs-link { padding: 8px 0; color: var(--hs-paper); font: 500 15.5px/1.2 var(--ec-sans); }
.hs-link::before { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; opacity: .35; }

.hs__slide.is-leaving .hs__content { opacity: 0; transform: translateY(-10px); transition: opacity .45s ease, transform .6s cubic-bezier(.7, 0, .84, 0); }

/* ---------- Kalem çizgisi (geçiş) ---------- */
.hs__wipe { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; }
.hs__wipe i { position: absolute; top: 0; bottom: 0; left: -.75px; width: 1.5px; background: var(--hs-paper); box-shadow: 0 0 14px rgba(239, 232, 218, .35); transform-origin: 50% 0; }

/* ---------- Alt bar: sekmeler + kontroller ---------- */
.hs__bottom {
	position: absolute;
	z-index: 10;
	left: var(--pad-x);
	right: var(--pad-x);
	bottom: max(clamp(22px, 4.6 * var(--svh), 44px), env(safe-area-inset-bottom));
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 1s ease 1.1s, transform 1.2s var(--hs-ease-out) 1.1s;
}
.hs.is-ready .hs__bottom { opacity: 1; transform: none; }
.hs__tabs { flex: 1; max-width: 760px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2vw, 28px); }
.hs__tab { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 0 2px; border: 0; background: none; color: var(--hs-paper-3); font: 500 14.5px/1.2 var(--ec-sans); text-align: left; cursor: pointer; transition: color .3s ease; }
.hs__tab:hover, .hs__tab.is-active { color: var(--hs-paper); }
.hs__tab-bar { position: relative; display: block; height: 1px; background: var(--hs-rule); }
.hs__tab-bar i { position: absolute; left: 0; right: 0; top: -.5px; height: 2px; background: #d5b48a; transform: scaleX(0); transform-origin: left; }
.hs__tab-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hs.is-ready .hs__tab.is-active .hs__tab-bar i { animation: hs-progress var(--hs-duration) linear forwards; }
.hs:is(.is-paused, .is-hover, .is-hidden, .is-offscreen) .hs__tab.is-active .hs__tab-bar i { animation-play-state: paused; }
.hs:has(:focus-visible) .hs__tab.is-active .hs__tab-bar i { animation-play-state: paused; }
.hs:is(.is-paused, .is-hidden, .is-offscreen) .hs__svg * { animation-play-state: paused; }

.hs__controls { display: flex; gap: 10px; }
.hs__ctrl {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(239, 232, 218, .28);
	border-radius: 50%;
	background: none;
	color: var(--hs-paper);
	cursor: pointer;
	transition: border-color .3s ease, background-color .3s ease;
}
.hs__ctrl:hover { border-color: var(--hs-paper); background: rgba(239, 232, 218, .08); }
.hs__ctrl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hs__ctrl--pause svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.hs__ctrl--pause .i-play, .hs.is-paused .hs__ctrl--pause .i-pause { display: none; }
.hs.is-paused .hs__ctrl--pause .i-play { display: block; }

/* ---------- Anahtar kareler ---------- */
@keyframes hs-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hs-kb { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes hs-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes hs-sway-back { from { transform: rotate(2.5deg); } to { transform: rotate(-2.5deg); } }
@keyframes hs-stamp { 0% { opacity: 0; transform: scale(1); } 6% { opacity: .7; } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes hs-glow-in { from { opacity: 0; } to { opacity: .2; } }
@keyframes hs-glow { from { opacity: .2; } to { opacity: .07; } }
@keyframes hs-smoke { 0% { stroke-dashoffset: .24; opacity: 0; } 15% { opacity: .7; } 75% { opacity: .45; } 100% { stroke-dashoffset: -1; opacity: 0; } }

/* ---------- Duyarlı düzen ---------- */
/* Tablet ve telefon: çizim üstte kalan boşluğu doldurur, metin altta */
@media (max-width: 900px) {
	.hs__slide { flex-direction: column; align-items: stretch; justify-content: flex-end; padding: calc(var(--ec-baslik-h) + 8px) var(--pad-x) clamp(96px, 13 * var(--svh), 124px); }
	.hs__bg { background: radial-gradient(130% 72% at 72% 28%, var(--bg-a) 0%, var(--bg-b) 74%); }
	.hs__golge { background: linear-gradient(0deg, var(--bg-b) 0%, color-mix(in srgb, var(--bg-b) 80%, transparent) 42%, transparent 72%); }
	.hs__media { position: relative; top: auto; right: auto; translate: none; flex: 1 1 0; width: auto; min-height: 0; max-height: min(44 * var(--svh), 440px); aspect-ratio: auto; margin: 0 calc(var(--pad-x) * -.5) clamp(4px, 1.5 * var(--svh), 16px) 0; }
	.hs__svg { --k: 1.2; }
	.hs__content { width: auto; }
	.hs__title { max-width: 16ch; font-size: clamp(2.2rem, min(10vw, 6.4 * var(--svh)), 3.6rem); }
	.hs__bottom { gap: 18px; }
	.hs__ctrl { width: 42px; height: 42px; }
}
@media (max-width: 900px) and (max-height: 780px) { .hs__desc { display: none; } }
@media (max-width: 640px) {
	.hs__svg { --k: 2; }
	.hs__tab { padding: 20px 0; }
	.hs__tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.hs-btn { height: 48px; padding: 0 20px; font-size: 14.5px; }
	.hs-link { font-size: 14.5px; }
}
@media (max-height: 700px) and (min-width: 901px) { .hs__slide { padding-top: calc(var(--ec-baslik-h) + 10px); padding-bottom: 140px; } }
@media (orientation: landscape) and (max-height: 500px) {
	.hs { min-height: 360px; }
	.hs__slide { flex-direction: row; align-items: center; justify-content: flex-start; padding: calc(var(--ec-baslik-h) - 10px) var(--pad-x) 72px; }
	.hs__media { position: absolute; top: 50%; right: calc(var(--pad-x) * .6); flex: none; width: min(34vw, 60 * var(--svh)); max-height: none; aspect-ratio: 1; margin: 0; translate: 0 -50%; }
	.hs__svg { --k: 1.6; }
	.hs__content { width: min(560px, 56vw); }
	.hs__title { max-width: none; font-size: clamp(1.6rem, 8.4 * var(--svh), 2.6rem); }
	.hs__desc { display: none; }
	.hs__bottom { bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
	.hs__bottom, .hs__slide, .hs__slide * { transition-duration: 1ms !important; transition-delay: 0s !important; animation: none !important; }
	.hs__foto img { transform: none; }
}