/*
 * lovespell: Maxima Therapy'den esinlenen tasarım dili.
 * Düz renkli kesme kâğıt çizimler, her günün kendi renk dünyası, yuvarlak hatlı kalın başlıklar.
 * Önce telefon (375px), sonra tablet ve masaüstü.
 */

:root {
	--page: #f3efe0;          /* Günün zemini (gün sayfalarında günün paletinden gelir). */
	--card: #fd4401;          /* Tarih kartı ve vurgu. */
	--her: #e2391f;
	--his: #2668fd;
	--ink: #2c2f31;
	--ink-soft: #5e6266;
	--paper: #fffdf7;
	--cream: #fff6e2;
	--radius: 28px;
	--shadow: 0 2px 0 rgba(44, 47, 49, .06), 0 14px 34px rgba(44, 47, 49, .12);
	--display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
	--body: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--spring: cubic-bezier(.34, 1.18, .64, 1); /* sadece hafif yaylanma */
	--smooth: cubic-bezier(.4, 0, .2, 1);
	--gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--page);
	color: var(--ink);
	font: 17px/1.55 var(--body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a { color: inherit; }
img, svg { max-width: 100%; }

.page {
	flex: 1;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 20px var(--gutter) 48px;
}

.has-scene .page { max-width: none; padding: 0 0 48px; }

.wrap {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.title {
	margin: 0 0 16px;
	font: 900 clamp(30px, 8vw, 48px)/.95 var(--display);
	letter-spacing: -.01em;
	text-transform: uppercase;
}

/* ---------- Üst menü ---------- */

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	padding-top: env(safe-area-inset-top);
	background: color-mix(in srgb, var(--page) 92%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Gün sayfalarında menü sahnenin üstünde süzülür. */
.has-scene .topbar {
	position: absolute;
	left: 0;
	right: 0;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.topbar__nav {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px var(--gutter);
}

.topbar__home {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow);
	transition: transform .3s var(--spring);
}

.topbar__home:active { transform: scale(.92); }
.topbar__home img { display: block; width: 34px; height: 34px; }

.topbar__brand {
	display: none;
	font: 900 22px/1 var(--display);
	letter-spacing: -.02em;
	text-decoration: none;
	color: var(--ink);
}

.has-scene .topbar__brand { color: var(--paper); }

.topbar__links {
	display: flex;
	gap: 6px;
	margin-left: auto;
}

.pill {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font: 700 15px var(--body);
	text-decoration: none;
	box-shadow: var(--shadow);
	transition: transform .3s var(--spring), background .2s;
}

.pill:active { transform: scale(.95); }
.pill.is-active { background: var(--ink); color: var(--paper); }
.pill--accent { background: var(--card); color: #fff; }

@media (min-width: 640px) {
	.topbar__brand { display: block; }
}

.icon { display: block; }

/* ---------- Zarf: sahneyi V şeklinde açan kesik ---------- */

.envelope {
	--v: 64%; /* yan kenarların bittiği yükseklik */
	position: relative;
	padding-bottom: 14px;
	background: var(--card);
	clip-path: polygon(0 0, 100% 0, 100% var(--v), 50% 100%, 0 var(--v));
	view-transition-name: scene;
}

.scene {
	clip-path: polygon(0 0, 100% 0, 100% var(--v), 50% 100%, 0 var(--v));
	aspect-ratio: 375 / 330;
	overflow: hidden;
	background: var(--page);
}

.art {
	display: block;
	width: 100%;
	height: 100%;
}

@media (min-width: 640px) {
	.envelope { --v: 58%; }
	.scene { aspect-ratio: 16 / 9; }
}

@media (min-width: 1024px) {
	.envelope { --v: 52%; }
	.scene { aspect-ratio: auto; height: min(56vw, 600px); }
}

/* Kart içindeki zarf (Hakkında). */
.envelope--card {
	--v: 78%;
	border-radius: var(--radius) var(--radius) 0 0;
}

.envelope--card .scene { aspect-ratio: 1 / 1; }

/* Çizimdeki küçük hareketler. */
@media (prefers-reduced-motion: no-preference) {
	.art-cloud { animation: ls-drift 24s ease-in-out infinite alternate; }
	.art-heart { animation: ls-float 3.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
	.art-star { animation: ls-twinkle 3s ease-in-out infinite alternate; }
}

@keyframes ls-drift { to { transform: translateX(46px); } }
@keyframes ls-float { from { transform: translateY(6px) scale(.96); } to { transform: translateY(-8px) scale(1.04); } }
@keyframes ls-twinkle { to { opacity: .25; } }

/* ---------- Hareketli arka plan (gün sayfaları) ---------- */

.backdrop {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.has-scene .page,
.has-scene .footer { position: relative; z-index: 1; }

/* Kartlardan sonra alttaki manzara görünsün. */
.has-scene .page { padding-bottom: min(30vh, 300px); }

.has-scene .footer p {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--paper);
	box-shadow: var(--shadow);
}

.bd-band {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: min(38vh, 420px);
	animation: bd-band-in 1s var(--spring) both;
}

.bd-p {
	position: absolute;
	top: 0;
	width: var(--s, 24px);
	height: var(--s, 24px);
	will-change: transform;
}

.bd-p svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bd-soft { opacity: .7; }
.bd-drop { height: calc(var(--s) * 6); opacity: .45; }
.backdrop--balloons .bd-p { height: calc(var(--s) * 1.7); }
.backdrop--letters .bd-p { height: calc(var(--s) * .7); }

@media (prefers-reduced-motion: no-preference) {
	.bd-fall { animation: bd-fall linear infinite; }
	.bd-rise { animation: bd-rise linear infinite; }
	.bd-fly { animation: bd-fly linear infinite; }
	.bd-twinkle { animation: bd-twinkle ease-in-out infinite alternate; }
	.bd-burst { animation: bd-burst ease-out infinite; }
	.bd-wave { animation: bd-wave linear infinite; }
	.bd-flower { animation: bd-sway 3.2s ease-in-out infinite alternate; }
	.bd-window { animation: bd-blink steps(1) infinite; }
	.bd-sun { animation: bd-sunrise 2.2s var(--spring) both; }
	.bd-rays { animation: bd-spin 40s linear infinite; transform-origin: 600px 430px; }
	.bd-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bd-draw 1.6s var(--smooth) forwards; }
}

/* Hareket kapalıysa parçalar ekranda görünür kalsın. */
@media (prefers-reduced-motion: reduce) {
	.bd-fall, .bd-rise, .bd-twinkle, .bd-burst { top: 40%; }
	.bd-fly { left: 10%; }
}

@keyframes bd-band-in { from { transform: translateY(40%); } }
@keyframes bd-fall {
	from { transform: translate3d(0, -12vh, 0) rotate(0); }
	to { transform: translate3d(var(--sway), 112vh, 0) rotate(var(--rot)); }
}
@keyframes bd-rise {
	from { transform: translate3d(0, 110vh, 0) rotate(-4deg); }
	50% { transform: translate3d(var(--sway), 50vh, 0) rotate(4deg); }
	to { transform: translate3d(0, -25vh, 0) rotate(-4deg); }
}
@keyframes bd-fly {
	from { transform: translate3d(-20vw, 0, 0) rotate(var(--rot)); }
	25% { transform: translate3d(15vw, -30px, 0) rotate(calc(var(--rot) * -1)); }
	50% { transform: translate3d(50vw, 10px, 0) rotate(var(--rot)); }
	75% { transform: translate3d(85vw, -30px, 0) rotate(calc(var(--rot) * -1)); }
	to { transform: translate3d(125vw, 0, 0) rotate(var(--rot)); }
}
@keyframes bd-twinkle { from { transform: scale(.4) rotate(0); opacity: .3; } to { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@keyframes bd-burst {
	0% { transform: scale(.1); opacity: 0; }
	12% { opacity: 1; }
	55% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.12); opacity: 0; }
}
@keyframes bd-wave { to { transform: translateX(-200px); } }
@keyframes bd-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes bd-blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .25; } }
@keyframes bd-sunrise { from { transform: translateY(70%); } }
@keyframes bd-spin { to { transform: rotate(360deg); } }
@keyframes bd-draw { to { stroke-dashoffset: 0; } }

/* ---------- Tarih kartı ve oklar ---------- */

.dayhead {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) 52px;
	align-items: center;
	gap: 10px;
	max-width: 560px;
	margin: -40px auto 0;
	padding: 0 var(--gutter);
}

.datecard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 16px 14px 14px;
	border-radius: 24px;
	background: var(--card);
	color: var(--cream);
	text-align: center;
	box-shadow: var(--shadow);
	view-transition-name: datecard;
}

.datecard time {
	font: 900 clamp(24px, 7.4vw, 40px)/.92 var(--display);
	letter-spacing: -.01em;
	text-transform: uppercase;
}

.datecard__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.tag {
	padding: 3px 10px;
	border: 2px solid currentColor;
	border-radius: 999px;
	font: 800 11px/1.3 var(--body);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow);
	transition: transform .3s var(--spring);
}

.arrow .icon { width: 26px; height: 26px; stroke-width: 2.4; }
.arrow:hover { transform: scale(1.06); }
.arrow:active { transform: scale(.9); }
.arrow:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.arrow.is-disabled {
	background: transparent;
	box-shadow: none;
	border: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent);
	color: color-mix(in srgb, var(--ink) 30%, transparent);
}

.jump {
	display: flex;
	justify-content: center;
	gap: 18px;
	min-height: 20px;
	margin: 12px 0 20px;
	font: 700 13px var(--body);
}

.jump a { color: var(--ink-soft); text-underline-offset: 3px; }

@media (min-width: 640px) {
	.dayhead { grid-template-columns: 60px minmax(0, 1fr) 60px; gap: 18px; margin-top: -52px; }
	.arrow { width: 60px; height: 60px; }
}

/* ---------- Mektuplar ---------- */

.cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	view-transition-name: cards;
}

@media (min-width: 768px) {
	.cards { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.letter {
	display: flex;
	flex-direction: column;
	min-height: 200px;
	padding: 20px 20px 24px;
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: var(--shadow);
	overflow-wrap: anywhere;
}

.letter__label {
	align-self: flex-start;
	margin: 0 0 14px;
	padding: 5px 12px;
	border-radius: 999px;
	color: #fff;
	font: 800 12px/1.2 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.letter--her .letter__label { background: var(--her); }
.letter--his .letter__label { background: var(--his); }

.letter__body { font: 500 19px/1.6 var(--body); }
.letter__body p { margin: 0 0 .8em; }
.letter__body p:last-child { margin-bottom: 0; }

.letter--missing {
	background: transparent;
	box-shadow: none;
	border: 3px dashed color-mix(in srgb, var(--ink) 22%, transparent);
}

.letter--missing .letter__body { flex: 1; display: flex; align-items: center; justify-content: center; }

.letter__missing {
	margin: 0;
	font: 900 clamp(24px, 7vw, 34px)/1 var(--display);
	text-transform: uppercase;
	text-align: center;
	color: var(--ink-soft);
}

@media (min-width: 768px) {
	.letter { padding: 26px 28px 30px; min-height: 260px; }
	.letter__body { font-size: 20px; }
}

/* ---------- Sayfa geçişleri ---------- */

@view-transition { navigation: auto; }

::view-transition-group(*) {
	animation-duration: .5s;
	animation-timing-function: var(--spring);
}

html:active-view-transition-type(next)::view-transition-old(scene),
html:active-view-transition-type(next)::view-transition-old(cards) { animation: ls-out-left .32s var(--smooth) both; }
html:active-view-transition-type(next)::view-transition-new(scene),
html:active-view-transition-type(next)::view-transition-new(cards) { animation: ls-in-right .55s var(--spring) both; }
html:active-view-transition-type(prev)::view-transition-old(scene),
html:active-view-transition-type(prev)::view-transition-old(cards) { animation: ls-out-right .32s var(--smooth) both; }
html:active-view-transition-type(prev)::view-transition-new(scene),
html:active-view-transition-type(prev)::view-transition-new(cards) { animation: ls-in-left .55s var(--spring) both; }

html:active-view-transition-type(next)::view-transition-new(cards),
html:active-view-transition-type(prev)::view-transition-new(cards) { animation-delay: .06s; }

@keyframes ls-out-left { to { transform: translateX(-18%); opacity: 0; } }
@keyframes ls-out-right { to { transform: translateX(18%); opacity: 0; } }
@keyframes ls-in-right { from { transform: translateX(18%); opacity: 0; } }
@keyframes ls-in-left { from { transform: translateX(-18%); opacity: 0; } }

/* Geçişi desteklemeyen tarayıcılarda açılış animasyonu. */
@supports not (view-transition-name: none) {
	@media (prefers-reduced-motion: no-preference) {
		.envelope { animation: ls-drop .6s var(--spring) both; }
		.datecard { animation: ls-pop .5s var(--spring) .1s both; }
		.letter { animation: ls-rise .55s var(--spring) both; }
		.letter + .letter { animation-delay: .08s; }
	}
}

@keyframes ls-drop { from { transform: translateY(-14px); opacity: 0; } }
@keyframes ls-pop { from { transform: scale(.9); opacity: 0; } }
@keyframes ls-rise { from { transform: translateY(16px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	*, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
		animation: none !important;
		transition: none !important;
	}
}