/* Gizlilik ve destek sayfalari: ustte Istanbul'un o anki gun saatiyle
   kucuk bir manzara, icerik bu manzaranin ustune binen bir belge yapragi.
   Gorseller ana sayfanin sahne gorselleri (img/sahne). */

body.belge {
	background: linear-gradient(var(--gok-alt, #d9e7fb), var(--kagit) 520px);
}

:root[data-saat="sabah"] { --gok-alt: #fde5e0; }
:root[data-saat="gunduz"] { --gok-alt: #d9f3fb; }
:root[data-saat="ikindi"] { --gok-alt: #fbe3bd; }
:root[data-saat="gun_batimi"] { --gok-alt: #db4688; }
:root[data-saat="aksam"] { --gok-alt: #b483a8; }
:root[data-saat="gece"] { --gok-alt: #0e1a3d; }

@media (prefers-color-scheme: dark) {
	body.belge {
		background: linear-gradient(#0e1a3d, var(--kagit) 520px);
	}
}

/* ------------------------------------------------------------ manzara bandi */
.belge-sahne {
	--ufuk-oran: 6.99;
	position: relative;
	height: clamp(240px, 38vh, 400px);
	overflow: hidden;
	isolation: isolate;
	background: #9fc4dc;
}

:root[data-saat="sabah"] .belge-sahne { --gok: url(/img/sahne/gok_sabah.webp); --deniz: url(/img/sahne/deniz_sabah.webp); --ufuk-img: url(/img/sahne/ufuk_sabah.webp); --ufuk-oran: 5.07; }
:root[data-saat="gunduz"] .belge-sahne { --gok: url(/img/sahne/gok_gunduz.webp); --deniz: url(/img/sahne/deniz_gunduz.webp); --ufuk-img: url(/img/sahne/ufuk_gunduz.webp); --ufuk-oran: 6.99; }
:root[data-saat="ikindi"] .belge-sahne { --gok: url(/img/sahne/gok_ikindi.webp); --deniz: url(/img/sahne/deniz_ikindi.webp); --ufuk-img: url(/img/sahne/ufuk_ikindi.webp); --ufuk-oran: 8.36; }
:root[data-saat="gun_batimi"] .belge-sahne { --gok: url(/img/sahne/gok_gun_batimi.webp); --deniz: url(/img/sahne/deniz_gun_batimi.webp); --ufuk-img: url(/img/sahne/ufuk_gun_batimi.webp); --ufuk-oran: 9.41; }
:root[data-saat="aksam"] .belge-sahne { --gok: url(/img/sahne/gok_aksam.webp); --deniz: url(/img/sahne/deniz_aksam.webp); --ufuk-img: url(/img/sahne/ufuk_aksam.webp); --ufuk-oran: 10.44; }
:root[data-saat="gece"] .belge-sahne { --gok: url(/img/sahne/gok_gece.webp); --deniz: url(/img/sahne/deniz_gece.webp); --ufuk-img: url(/img/sahne/ufuk_gece.webp); --ufuk-oran: 7.56; }

.belge-sahne > * {
	position: absolute;
}

.bs-gok {
	inset: 0 0 30%;
	background: var(--gok) center bottom / cover no-repeat;
}

.bs-ufuk {
	left: 0;
	right: 0;
	bottom: calc(30% - 2px);
	height: max(96px, calc(100vw / var(--ufuk-oran)));
	background: var(--ufuk-img) center bottom / auto 100% no-repeat;
}

.bs-deniz {
	top: 70%;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--deniz) left top / auto 100% repeat-x;
	animation: bs-su 60s linear infinite;
}

@keyframes bs-su {
	to { background-position-x: -871px; }
}

.bs-bulut {
	top: var(--y);
	left: 0;
	width: var(--en);
	opacity: 0.9;
	animation: bs-bulut var(--sure) linear infinite;
	animation-delay: var(--gecikme);
}

:root[data-saat="gece"] .bs-bulut { opacity: 0.34; }
:root[data-saat="aksam"] .bs-bulut { opacity: 0.7; }

@keyframes bs-bulut {
	from { transform: translateX(-30vw); }
	to { transform: translateX(110vw); }
}

.bs-vapur {
	top: calc(70% + 4px);
	left: 0;
	width: clamp(56px, 6vw, 96px);
	animation: bs-vapur 60s linear infinite;
	animation-delay: -20s;
}

:root[data-saat="aksam"] .bs-vapur { filter: brightness(0.8); }
:root[data-saat="gece"] .bs-vapur { filter: brightness(0.55); }

@keyframes bs-vapur {
	from { transform: translateX(-20vw); }
	to { transform: translateX(105vw); }
}

.bs-ust {
	z-index: 2;
	inset: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1180px;
	margin: 0 auto;
	padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 16px;
}

.belge-sahne .dil {
	background: rgba(16, 28, 46, 0.62);
}

.belge-sahne .dil a {
	color: #fffaf0;
}

.belge-sahne .dil span {
	background: #fffaf0;
	color: #13202f;
}

@media not all /* hareketi azalt: kullanici karariyla yok sayilir */ {
	.bs-deniz,
	.bs-bulut,
	.bs-vapur {
		animation: none;
	}
	.bs-vapur {
		transform: translateX(60vw);
	}
}

/* ------------------------------------------------------------ belge yapragi */
body.belge main {
	position: relative;
	z-index: 3;
	max-width: 880px;
	margin: -84px auto 0;
	padding: 44px clamp(22px, 5vw, 64px) 64px;
	border-radius: 30px;
	background: var(--kagit);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4), 0 40px 80px -50px rgba(15, 26, 38, 0.45);
}

body.belge h1 {
	font-size: clamp(38px, 6vw, 60px);
	letter-spacing: -0.02em;
}

.kunye {
	justify-self: start;
	width: fit-content;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1.5px solid var(--turuncu);
	border-radius: 999px;
	color: var(--turuncu) !important;
}

/* Kisa ozet: vapur bileti gibi, delikli kenar ve tabela basligi */
body.belge .bilet {
	padding: 0;
	overflow: visible;
	border-radius: 20px;
}

body.belge .bilet-baslik {
	margin: 0;
	padding: 14px 24px;
	border-bottom: 2px dashed var(--cizgi);
	border-radius: 20px 20px 0 0;
	background: #10161f;
	color: #ffb347;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

body.belge .bilet dl {
	padding: 18px 24px 20px;
}

body.belge .bilet dd {
	color: var(--murekkep);
}

/* Genis ekranda icindekiler solda sabit durur, okunan bolum isaretlenir */
@media (min-width: 1100px) {
	body.belge.gizlilik main {
		max-width: 1120px;
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		column-gap: 56px;
	}
	body.belge.gizlilik main > * {
		grid-column: 2;
	}
	body.belge.gizlilik .icindekiler {
		grid-column: 1;
		grid-row: 1 / span 30;
		align-self: start;
		position: sticky;
		top: 28px;
		columns: auto;
		margin: 6px 0 0;
		padding: 18px 0 0;
		border-top: 2px solid var(--murekkep);
	}
}

body.belge .icindekiler a {
	display: inline-block;
	padding: 3px 0;
	border-bottom: 0;
	color: var(--murekkep-soluk);
	transition: color 0.2s, translate 0.2s;
}

body.belge .icindekiler a:hover,
body.belge .icindekiler a[aria-current="true"] {
	color: var(--murekkep);
}

body.belge .icindekiler a[aria-current="true"] {
	translate: 6px 0;
	font-weight: 600;
}

body.belge .icindekiler a[aria-current="true"]::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0 8px 0 -15px;
	border-radius: 50%;
	background: var(--turuncu-dolgu);
	vertical-align: 2px;
}

body.belge .bolum {
	scroll-margin-top: 24px;
}

body.belge .bolum > h2 {
	font-size: clamp(24px, 2.6vw, 30px);
}

/* ------------------------------------------------------------ destek */
body.belge .yaz {
	border-radius: 20px;
	border: 2px dashed var(--cizgi);
	background: var(--bilet);
}

body.belge details {
	margin: 0 0 10px;
	padding: 0 22px;
	border: 1px solid var(--cizgi);
	border-radius: 18px;
	background: var(--bilet);
	transition: box-shadow 0.25s, border-color 0.25s;
	interpolate-size: allow-keywords;
}

body.belge details:last-of-type {
	border-bottom: 1px solid var(--cizgi);
}

body.belge details[open] {
	border-color: var(--turuncu-dolgu);
	box-shadow: 0 18px 40px -28px rgba(15, 26, 38, 0.45);
}

body.belge summary {
	padding: 18px 40px 18px 0;
}

body.belge summary::after {
	top: 15px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--kagit-koyu);
	font-size: 20px;
	line-height: 28px;
	text-align: center;
}

/* Cevap yumusakca acilir (destekleyen tarayicilarda) */
body.belge details::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 0.32s allow-discrete;
}

body.belge details[open]::details-content {
	block-size: auto;
}

@media not all /* hareketi azalt: kullanici karariyla yok sayilir */ {
	body.belge details::details-content {
		transition: none;
	}
}

/* ------------------------------------------------------------ gece altbilgisi */
body.belge footer {
	margin-top: 80px;
	border-top: 0;
	background: #0a1530;
	color: #b9c3d8;
}

body.belge footer::before {
	content: "";
	display: block;
	height: clamp(90px, 12vw, 170px);
	margin-top: -1px;
	background: url(/img/sahne/ufuk_gece.webp) center bottom / auto 100% no-repeat, linear-gradient(var(--kagit), #0a1530);
}

body.belge footer a {
	color: #f6efe2;
}

body.belge footer a[aria-current] {
	color: #f5a25a;
}

body.belge details > div {
	padding: 0 0 18px;
}

@media (max-width: 600px) {
	.kunye {
		font-size: 10.5px;
		letter-spacing: 0.06em;
		border-radius: 12px;
	}
}