/* =============================================================================
   Felsefemiz / Our Philosophy (pages tip=9) — FEAT-13
   Tam ekran arkaplan videosu + videonun zaman koduna bağlı 8 bölüm başlığı.
   Tasarım kaynağı: docs/philosophy/B&T_OUR_PHILOSOPHY.fig
     masaüstü 1920/1440 kareleri -> beyaz metin, altta "SCROLL TO EXPLORE" + 8 parçalı çizelge
     mobil 375 kareleri          -> üstte video (375x430), altta renk geçişli panel, "SWIPE" + 01/08
   Şablon: templates/template/pages_philosophy.tpl · davranış: assets/js/philosophy.js
   Fontlar: ph_semibold / ph_medium / ph_light = Space Grotesk v1.103 OTF (aşağıda, yalnız bu sayfa),
   light = Proto Grotesk Light (app.css).
   ========================================================================== */

/* Space Grotesk — tasarımcının Figma'da kullandığı set: v1.103 OTF (SpaceGrotesk-*.otf, 2026-10-13).
   app.css'teki sg_semibold / sg_medium v2.000 alt kümesidir ve "y" harfi orada kıvrık kuyruklu
   (v2 varsayılanı; düz "y" veren ss03 stil seti alt kümeden çıkarılmış). Figma'daki "y" düz kuyruklu =
   v1.103 varsayılanı. Site geneli app.css adlarına bağlı olduğundan burada sayfaya özel ph_* adları
   tanımlandı; app.css'e dokunulmadı. Dikey metrikler (hhea 984/-216) v2'den (984/-292) farklı; satır
   yükseklikleri açık verildiği için kutular yerinde kalır; mürekkep başlıkta 2-3px, metinde ≤1px aşağı
   kayar (ölçüldü, FEAT-13 üçüncü tur). */
@font-face {
	font-family: 'ph_semibold';
	src: url("../fonts/SpaceGrotesk-SemiBold.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'ph_medium';
	src: url("../fonts/SpaceGrotesk-Medium.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'ph_light';
	src: url("../fonts/SpaceGrotesk-Light.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Satır sonları: Figma'daki kırılımlar şablonda <br> ile sabit; masaüstü (ph-br-d) ve mobil (ph-br-m) ayrı */
.ph-br-m {
	display: none;
}

/* ---------- sahne (masaüstü varsayılan) ---------- */
.ph-stage {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 560px;
	overflow: hidden;
	background: #e5e6e7; /* filmin ilk karesinin tonu: video gelene kadar boşluk görünmesin */
	color: #fff;
	font-family: 'ph_medium', 'Space Grotesk', sans-serif;
}

.ph-media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.ph-video {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	background: #e5e6e7;
}

.ph-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none; /* tıklamalar videoya/çizelgeye gitsin; etkileşimli öğeler aşağıda geri açılır */
}

.ph-panel .ph-timeline,
.ph-panel .ph-nav__counter {
	pointer-events: auto;
}

/* ---------- bölüm metinleri ---------- */
.ph-chapters {
	position: absolute;
	top: 44.2%;
	right: 5vw;
	left: 5vw;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ph-chapter {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	/* Metin hareketi (docs/philosophy/our-philosophy-text-motion.html, 2026-10-13): başlık + alt metin
	   tek blok; bölüm içi ilerlemeye bağlı bulanık→net→bulanık, kayma yok. Belgedeki ölçek
	   (.965→1→.945) harfleri yatay kaydırdığı için uygulanmadı (müşteri: konum sabit kalsın).
	   opacity / filter her karede JS'ten (philosophy.js setTextProgress) satır içi gelir;
	   CSS transition yok. Burada yalnız gizleme. */
}

.ph-chapter.is-active {
	opacity: 1;
	visibility: visible;
	will-change: filter, opacity;
}

.ph-chapter__title {
	margin: 0 0 .404em; /* Figma 1440: alt metin kutusu başlık kutusunun 56px altında = 31.76 (lh) + 24.24 */
	font-family: 'ph_semibold', 'Space Grotesk', sans-serif;
	font-weight: normal;
	font-size: 60px;
	font-size: clamp(40px, 4.167vw, 84px); /* Figma 1440: 60px = 4.167vw; 1920'de 80px (1920 karesi 78) */
	line-height: .53em; /* Figma: 31.76px @60px — satır kutusu küçük, harfler simetrik taşar (Figma ile aynı) */
	letter-spacing: .01em;
	color: inherit;
	text-shadow: 0 2px 28px rgba(0, 0, 0, .22); /* 8. bölüm gibi çok açık karelerde okunurluk */
}

.ph-chapter__text {
	margin: 0;
	max-width: 40em;
	font-family: 'ph_medium', 'Space Grotesk', sans-serif;
	font-size: 16px;
	font-size: clamp(13px, 1.111vw, 22px); /* Figma 1440: 16px = 1.111vw; 1920'de 21.3px (1920 karesi 20) */
	line-height: 1.25; /* Figma: 20px @16px */
	letter-spacing: .06em; /* Figma 1440: %6 (1920 karesinde %2) */
	color: inherit;
	text-shadow: 0 1px 18px rgba(0, 0, 0, .22);
}

/* ---------- alt şerit: ipucu + zaman çizelgesi ---------- */
.ph-nav {
	position: absolute;
	right: 4.6vw;
	bottom: 40px;
	bottom: calc(6.2vh - 12px); /* satır 25px; çizgi merkezi alttan 6.2vh (Figma 1440: 51px/810, 1920: 60px/1080) */
	left: 5vw;
	display: flex;
	align-items: center;
	gap: 16px;
}

.ph-nav__hint {
	flex: none;
	margin: 0;
	font-family: 'ph_semibold', 'Space Grotesk', sans-serif;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: .02em;
	white-space: nowrap;
	color: inherit;
}

.ph-nav__hint--mobile {
	display: none;
}

.ph-timeline {
	flex: 1 1 auto;
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0; /* giriş (bölümsüz) anında çizelge yok; ilk bölümle belirir */
	transition: opacity .6s ease;
}

.ph-stage.has-chapter .ph-timeline {
	opacity: 1;
}

.ph-timeline li {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.ph-timeline__btn {
	display: block;
	width: 100%;
	height: 25px; /* 5px çizgi + dokunma payı */
	margin: 0;
	padding: 10px 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ph-timeline__btn:focus-visible .ph-timeline__bar {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.ph-timeline__bar {
	display: block;
	position: relative;
	height: 5px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(255, 255, 255, .4);
}

.ph-timeline__fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	background: #fff;
	transform-origin: 0 50%;
	transform: scaleX(0);
	transition: transform .15s linear;
}

.ph-nav__counter {
	display: none;
}

/* ---------- oynatma engellendiyse (düşük güç modu vb.) ---------- */
.ph-play {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, .85);
	border-radius: 50%;
	background: rgba(0, 0, 0, .18);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ph-play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -11px 0 0 -7px;
	border-style: solid;
	border-width: 11px 0 11px 20px;
	border-color: transparent transparent transparent #fff;
}

.ph-stage.is-paused .ph-play {
	display: block;
}

/* ---------- erişilebilirlik ---------- */
.ph-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ph-chapter,
	.ph-timeline,
	.ph-timeline__fill,
	.ph-panel {
		transition: none;
	}

	.ph-chapter.is-active {
		/* aktif bölümün metni net, sabit, görünür (JS de aynı dalı uygular) */
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}
}

/* =============================================================================
   Masaüstü header: video üstünde beyaz logo/menü (ana sayfadaki .page-home-grid
   kalıbı). Kaydırınca (.sticky-header) ve menü açılınca (.menu-animate/.menu-ready)
   site genelindeki beyaz zemin + koyu yazı davranışına döner.
   ========================================================================== */
@media screen and (min-width: 1025px) {
	.page-type-9 .header-logo img.white {
		opacity: 1;
	}

	.page-type-9 .header-logo img.dark {
		opacity: 0;
	}

	.page-type-9 .main-menu ul.lvl-1>li>a,
	.page-type-9 .mini-lang-info>span,
	.page-type-9 .languages a,
	.page-type-9 .change_language,
	.page-type-9 .icon-search,
	.page-type-9 .icon-search:before,
	.page-type-9 .icon-download,
	.page-type-9 .download-link .icon-download:before,
	.page-type-9 .icon-profil:before,
	.page-type-9 .history-btn a {
		color: #fff;
	}

	.page-type-9 .sticky-header .header-logo img.white,
	.page-type-9 .menu-animate .header-logo img.white,
	.page-type-9 .menu-ready .header-logo img.white {
		opacity: 0;
	}

	.page-type-9 .sticky-header .header-logo img.dark,
	.page-type-9 .menu-animate .header-logo img.dark,
	.page-type-9 .menu-ready .header-logo img.dark {
		opacity: 1;
	}

	.page-type-9 .sticky-header .main-menu ul.lvl-1>li>a,
	.page-type-9 .sticky-header .mini-lang-info>span,
	.page-type-9 .sticky-header .languages a,
	.page-type-9 .sticky-header .change_language,
	.page-type-9 .sticky-header .icon-search,
	.page-type-9 .sticky-header .icon-search:before,
	.page-type-9 .sticky-header .icon-download,
	.page-type-9 .sticky-header .download-link .icon-download:before,
	.page-type-9 .sticky-header .icon-profil:before,
	.page-type-9 .sticky-header .history-btn a,
	.page-type-9 .menu-animate .main-menu ul.lvl-1>li>a,
	.page-type-9 .menu-animate .mini-lang-info>span,
	.page-type-9 .menu-animate .languages a,
	.page-type-9 .menu-animate .change_language,
	.page-type-9 .menu-animate .icon-search,
	.page-type-9 .menu-animate .icon-search:before,
	.page-type-9 .menu-animate .icon-download,
	.page-type-9 .menu-animate .download-link .icon-download:before,
	.page-type-9 .menu-animate .icon-profil:before,
	.page-type-9 .menu-ready .main-menu ul.lvl-1>li>a,
	.page-type-9 .menu-ready .mini-lang-info>span,
	.page-type-9 .menu-ready .languages a,
	.page-type-9 .menu-ready .change_language,
	.page-type-9 .menu-ready .icon-search,
	.page-type-9 .menu-ready .icon-search:before,
	.page-type-9 .menu-ready .icon-download,
	.page-type-9 .menu-ready .download-link .icon-download:before,
	.page-type-9 .menu-ready .icon-profil:before {
		color: #000;
	}
}

/* =============================================================================
   Mobil (<=1024): header sitenin kendi sabit beyaz başlığı; altında video kutusu,
   onun altında bölüme göre renk alan panel. Swipe ile bölüm değişir, sayfa dikeyde
   normal kayar (footer'a ulaşılır).
   ========================================================================== */
@media (max-width: 1024px) {
	.ph-stage {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: calc(100vh - 60px);
		min-height: calc(100svh - 60px); /* 60px: mobil header (app.css .site-header min-height) */
		overflow: visible;
		background: #fff;
		color: #555;
		touch-action: pan-y; /* JS: adım atılabiliyorsa 'none' yapar (dikey kaydırma bölüm değiştirir) */
	}

	.ph-br-d {
		display: none;
	}

	.ph-br-m {
		display: inline;
	}

	.ph-media {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		flex: none;
		width: 100%;
		height: 0;
		padding-top: 114.67%; /* 375x430 oranı (Figma) */
		padding-top: min(114.67%, 100vh - 300px); /* 300 = header 60 + panel en az 240: ipucu satırı katlamanın altında kalmasın */
		padding-top: min(114.67%, 100svh - 300px);
		overflow: hidden;
		background: #e5e6e7;
	}

	.ph-panel {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		min-height: 240px; /* Figma 309; kalan yükseklik flex ile dolar (390x844'te 337px) */
		padding: 32px 24px 64px; /* alt 64 (Figma 24): sol alttaki sabit çerez-ayar düğmesi (.btcc-fab, 48px, alttan 14px) ipucu satırına binmesin */
		pointer-events: auto;
		background-color: #d0d2d4;
		background-color: var(--ph-tint, #d0d2d4);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
		transition: background-color .7s ease;
	}

	.ph-chapters {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		flex: 1 1 auto;
		min-height: 104px;
	}

	.ph-chapter__title {
		margin: 0 0 24px; /* Figma: alt metin kutusu başlık kutusunun 48px altında = 24 (lh) + 24 */
		font-family: 'ph_medium', 'Space Grotesk', sans-serif;
		font-size: 32px;
		line-height: 24px; /* Figma */
		letter-spacing: 0;
		color: #555;
		text-shadow: none;
	}

	.ph-chapter__text {
		max-width: 280px; /* Figma kutusu 260px; kırılımlar <br class="ph-br-m"> ile sabit, pay ikinci kırılımı önler */
		font-family: 'ph_light', 'Space Grotesk', sans-serif;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: .06em;
		color: #555;
		text-shadow: none;
	}

	.ph-nav {
		position: relative;
		right: auto;
		bottom: auto;
		left: auto;
		justify-content: space-between;
		margin-top: 24px;
	}

	.ph-nav__hint {
		font-family: 'light', 'Proto Grotesk', sans-serif;
		font-size: 12px;
		line-height: 16px;
		letter-spacing: .1em;
		color: #555;
	}

	.ph-nav__hint--desktop {
		display: none;
	}

	.ph-nav__hint--mobile {
		display: block;
	}

	.ph-timeline {
		display: none;
	}

	.ph-nav__counter {
		display: block;
		min-width: 3.5em;
		font-family: 'light', 'Proto Grotesk', sans-serif;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: .02em;
		text-align: right;
		color: #555;
	}

	.ph-play {
		width: 56px;
		height: 56px;
		margin: -28px 0 0 -28px;
	}
}