/*
 * ÇandName CSS modülü: YouTube tarzı video sayfaları
 * Video arşivi (/type/video/) ve tek video sayfası. Yalnızca bu sayfalarda yüklenir (inc/yt.php).
 * Şablonlar: template-parts/yt-header.php, yt-archive.php, yt-card.php, single-yt.php. Betik: assets/js/video-page.js.
 * Renkler site değişkenlerinden gelir (açık/koyu tema otomatik).
 */

body.is-yt { --yt-adm: 0px; --yt-head: 56px; --yt-guide: 240px; --yt-guide-mini: 72px; background: var(--surface); color: var(--ink); }
body.is-yt .site { background: var(--surface); }

body.admin-bar.is-yt { --yt-adm: 32px; }
@media (max-width: 782px) { body.admin-bar.is-yt { --yt-adm: 46px; } }

/* ---------- Üst şerit ---------- */
.yt-header {
	position: sticky; top: var(--yt-adm); z-index: 70; height: var(--yt-head);
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line-soft);
}
.yt-head-left, .yt-head-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-width: 0; }
.yt-head-right { justify-content: flex-end; }
.yt-icon-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
	border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
}
.yt-icon-btn:hover, .yt-icon-btn:focus-visible { background: var(--line-soft); }
.yt-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); }
.yt-brand:hover { color: var(--ink); }
.yt-play { display: inline-flex; color: var(--red); flex: 0 0 auto; }
.yt-wordmark { font-family: var(--serif); font-weight: 700; font-size: calc(22px * var(--fs, 1)); letter-spacing: -0.02em; white-space: nowrap; }
.yt-wordmark span { color: var(--green); }
.yt-logo { display: inline-flex; }
.yt-logo-img { max-height: 30px; width: auto; }
.yt-logo-img--dark { display: none; }
html[data-theme="dark"] .yt-logo.has-dark-logo .yt-logo-img:not(.yt-logo-img--dark) { display: none; }
html[data-theme="dark"] .yt-logo.has-dark-logo .yt-logo-img--dark { display: block; }
html[data-theme="dark"] .yt-wordmark span { color: var(--link); }

.yt-search { display: flex; align-items: center; flex: 1 1 auto; max-width: 640px; min-width: 0; margin: 0 auto; }
.yt-search-input {
	flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-right: 0;
	border-radius: 999px 0 0 999px; background: var(--surface); color: var(--ink);
	font: inherit; font-size: calc(15px * var(--fs, 1)); -webkit-appearance: none; appearance: none;
}
.yt-search-input:focus { outline: none; border-color: var(--green); }
.yt-search-btn {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 56px; height: 40px;
	border: 1px solid var(--line); border-radius: 0 999px 999px 0; background: var(--line-soft); color: var(--ink); cursor: pointer;
}
.yt-search-btn:hover { background: var(--line); }
.yt-search-back, .yt-search-open { display: none; }
.yt-tools { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Sol kılavuz ---------- */
.yt-guide {
	position: fixed; top: calc(var(--yt-head) + var(--yt-adm)); bottom: 0; left: 0; z-index: 60; width: var(--yt-guide);
	overflow-y: auto; padding: 12px; background: var(--surface); overscroll-behavior: contain;
}
.yt-guide-list { list-style: none; margin: 0; padding: 0; }
.yt-guide-item, .yt-guide-menu a {
	display: flex; align-items: center; gap: 22px; height: 42px; padding: 0 12px; border-radius: 10px;
	color: var(--ink); font-size: calc(14px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yt-guide-item:hover, .yt-guide-menu a:hover { background: var(--line-soft); color: var(--ink); }
.yt-guide-item.is-current, .yt-guide-menu .current-menu-item > a { background: var(--line-soft); font-weight: 700; }
.yt-gi { width: 22px; text-align: center; font-size: calc(18px * var(--fs, 1)); flex: 0 0 auto; }
.yt-guide-sep { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }

/* Arşiv, masaüstü: kılavuz açık (240px) ya da dar (72px, yalnızca simgeler) */
@media (min-width: 961px) {
	body.is-yt-archive .yt-main { margin-left: var(--yt-guide); }
	html.yt-mini body.is-yt-archive .yt-main { margin-left: var(--yt-guide-mini); }
	html.yt-mini body.is-yt-archive .yt-guide { width: var(--yt-guide-mini); padding: 12px 4px; }
	html.yt-mini .yt-guide .yt-guide-item, html.yt-mini .yt-guide .yt-guide-menu a {
		flex-direction: column; justify-content: center; gap: 4px; height: 64px; padding: 6px 0; font-size: calc(10px * var(--fs, 1)); text-align: center;
	}
	html.yt-mini .yt-guide .yt-gl { max-width: 68px; overflow: hidden; text-overflow: ellipsis; }
	html.yt-mini .yt-guide-sep, html.yt-mini .yt-guide-menu { display: none; }
}
/* İzleme sayfası (masaüstü) ve telefon/tablet: kılavuz üstte açılan çekmece */
body.is-yt-watch .yt-guide { transform: translateX(-102%); transition: transform .2s; box-shadow: none; }
@media (max-width: 960px) {
	body.is-yt .yt-guide { top: var(--yt-adm); z-index: 90; width: min(280px, 82vw); transform: translateX(-102%); transition: transform .2s; padding-top: 16px; }
}
html.yt-open body.is-yt .yt-guide { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, 0.35); z-index: 90; top: var(--yt-adm); padding-top: 16px; width: min(280px, 82vw); }
html.yt-open body.is-yt-watch .yt-guide .yt-guide-item, html.yt-open body.is-yt-watch .yt-guide .yt-guide-menu a { flex-direction: row; height: 42px; font-size: calc(14px * var(--fs, 1)); }
.yt-scrim { position: fixed; inset: var(--yt-adm) 0 0 0; z-index: 80; background: rgba(0, 0, 0, 0.5); }
.yt-scrim[hidden] { display: none; }

/* ---------- Filtre çubuğu ---------- */
.yt-main { padding: 0 24px 40px; min-width: 0; }
.yt-chips-bar { position: sticky; top: calc(var(--yt-head) + var(--yt-adm)); z-index: 40; margin: 0 -24px; padding: 12px 24px; background: var(--surface); }
.yt-chips { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.yt-chips::-webkit-scrollbar { display: none; }
.yt-chip {
	flex: 0 0 auto; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 0; border-radius: 9px;
	background: var(--line-soft); color: var(--ink); font: inherit; font-size: calc(14px * var(--fs, 1)); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.yt-chip:hover { background: var(--line); color: var(--ink); }
.yt-chip.is-active, .yt-chip[aria-current="true"] { background: var(--ink); color: var(--surface); }
.yt-page-title { font-size: calc(20px * var(--fs, 1)); margin: 8px 0 16px; }

/* ---------- Video ızgarası ---------- */
.yt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 16px; margin-top: 8px; }
@media (min-width: 600px) { .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .yt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .yt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.yt-card { min-width: 0; }
.yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--ink); }
.yt-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s; }
.yt-thumb-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.yt-card:hover .yt-thumb { border-radius: 4px; }
.yt-card:hover .yt-thumb img { transform: scale(1.02); }
.yt-dur {
	position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px;
	background: rgba(0, 0, 0, 0.8); color: #fff; font-size: calc(12px * var(--fs, 1)); font-weight: 600; letter-spacing: .02em;
}
.yt-info { display: flex; gap: 12px; margin-top: 12px; }
.yt-avatar { flex: 0 0 36px; width: 36px; height: 36px; }
.yt-avatar, .yt-ch-avatar { display: inline-flex; }
.yt-avatar .avatar-initials { width: 36px; height: 36px; font-size: calc(14px * var(--fs, 1)); }
.yt-ch-avatar .avatar-initials { width: 44px; height: 44px; font-size: calc(16px * var(--fs, 1)); }
.yt-avatar img, .yt-avatar .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.yt-text { min-width: 0; }
.yt-title { font-family: var(--sans); font-size: calc(16px * var(--fs, 1)); font-weight: 600; line-height: 1.35; margin: 0; }
.yt-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); }
.yt-title a:hover { color: var(--ink); }
.yt-meta { margin: 4px 0 0; color: var(--muted); font-size: calc(13px * var(--fs, 1)); line-height: 1.4; }
.yt-meta-author::after { content: " · "; }
.yt-meta-author:only-child::after { content: ""; }
.yt-more { display: flex; justify-content: center; margin-top: 32px; }
.yt-more-btn {
	display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 40px; padding: 0 22px;
	border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer;
}
.yt-more-btn:hover, .yt-more-btn:focus-visible { background: var(--line-soft); color: var(--ink); }
.yt-more-btn.is-busy { opacity: .6; pointer-events: none; }
.yt-empty { padding: 60px 0; text-align: center; color: var(--muted); }

/* ---------- İzleme sayfası ---------- */
.yt-main--watch { padding-top: 24px; }
.yt-watch {
	--yt-side-w: 402px;
	display: grid; gap: 0 24px; max-width: 1754px; margin-inline: auto;
	grid-template-columns: minmax(0, 1fr) var(--yt-side-w);
	grid-template-areas: "player side" "info side";
	align-items: start; align-content: start; grid-template-rows: auto 1fr;
}
.yt-player { grid-area: player; min-width: 0; }
.yt-info-col { grid-area: info; min-width: 0; }
.yt-side { grid-area: side; min-width: 0; }
.yt-watch.is-theater { grid-template-areas: "player player" "info side"; }
.yt-watch.is-theater .yt-side { padding-top: 16px; }
.yt-watch.is-theater .yt-player { margin-inline: calc(-24px); }
.yt-watch.is-theater .yt-frame { border-radius: 0; max-height: min(78vh, 900px); height: min(78vh, 900px); aspect-ratio: auto; background: #000; }
.yt-watch.is-theater .yt-frame > img { object-fit: contain; }

.yt-frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; }
.yt-frame iframe, .yt-frame video, .yt-frame embed, .yt-frame object { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; }
.yt-frame > img { width: 100%; height: 100%; object-fit: contain; }
.yt-frame--link > img { opacity: .8; }
.yt-frame--link .play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.yt-frame-label { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #fff; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }

.yt-watch-title { font-family: var(--sans); font-size: calc(20px * var(--fs, 1)); font-weight: 700; line-height: 1.4; margin: 12px 0 0; }
.yt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 12px; }
.yt-channel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.yt-ch-avatar { flex: 0 0 44px; width: 44px; height: 44px; }
.yt-ch-avatar img, .yt-ch-avatar .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.yt-ch-name { font-weight: 700; font-size: calc(16px * var(--fs, 1)); line-height: 1.3; }
.yt-ch-name a { color: var(--ink); }
.yt-channel .follow-btn { height: 36px; margin-left: 12px; flex: 0 0 auto; }
.yt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yt-actions .vote-bar { display: inline-flex; flex-wrap: nowrap; gap: 0; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.yt-actions .vote-btn { height: 36px; border: 0; border-radius: 0; background: transparent; padding: 0 14px; color: var(--ink); }
.yt-actions .vote-btn + .vote-btn { border-left: 1px solid var(--line); }
.yt-actions .vote-btn:hover { background: var(--line); }
.yt-actions .vote-btn.is-active { background: var(--line); color: var(--green); }
html[data-theme="dark"] .yt-actions .vote-btn.is-active { color: var(--link); }
.yt-pill { display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 36px; border-radius: 999px; background: var(--line-soft); border: 0; color: var(--ink); cursor: pointer; }
.yt-pill:hover { background: var(--line); }
.yt-pill .share-toggle, .yt-pill .bm-btn { width: 36px; height: 36px; border: 0; background: transparent; color: var(--ink); }
.yt-pill .share-toggle:hover, .yt-pill .bm-btn:hover { background: transparent; color: var(--ink); }
.yt-share .reader-share { position: relative; }
.yt-share .share-panel { top: calc(100% + 8px); bottom: auto; inset-inline-end: 0; inset-inline-start: auto; }
.yt-theater-btn { padding: 0 8px; }
.yt-theater-btn[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

.yt-desc { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--line-soft); }
.yt-desc-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: calc(14px * var(--fs, 1)); }
.yt-hashtags a { color: var(--green); font-weight: 600; }
html[data-theme="dark"] .yt-hashtags a { color: var(--link); }
.yt-desc-body { margin-top: 8px; font-size: calc(15px * var(--fs, 1)); line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.yt-desc.is-clamp .yt-desc-body { max-height: 5.4em; overflow: hidden; }
.yt-desc-lead { margin: 0 0 8px; }
.yt-desc-body .entry-content > *:first-child { margin-top: 0; }
.yt-desc-body img { height: auto; }
.yt-desc-toggle { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.yt-desc-toggle[hidden] { display: none; }
.yt-comments { margin-top: 24px; }
.yt-comments .comments { max-width: 100%; margin: 0; }

/* ---------- Önerilen videolar (yan sütun) ---------- */
.yt-chips--side { margin: 0 0 12px; }
.yt-side-list { display: flex; flex-direction: column; gap: 10px; }
.yt-card--side { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 8px; }
.yt-card--side .yt-thumb { border-radius: 8px; }
.yt-card--side .yt-info { margin-top: 0; }
.yt-card--side .yt-title { font-size: calc(14px * var(--fs, 1)); }
.yt-card--side .yt-meta { font-size: calc(12px * var(--fs, 1)); }
.yt-card--side[hidden], .yt-chip[hidden] { display: none; }

/* ---------- Alt sekme çubuğu (yalnız telefon, arşiv) ---------- */
.yt-tabbar { display: none; }

/* ---------- Tablet ve telefon ---------- */
@media (max-width: 1200px) {
	.yt-watch { --yt-side-w: 340px; }
}
@media (max-width: 1000px) {
	.yt-watch, .yt-watch.is-theater { grid-template-columns: minmax(0, 1fr); grid-template-areas: "player" "info" "side"; }
	.yt-theater-btn { display: none; }
	.yt-card--side { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.yt-card--side .yt-info { margin-top: 12px; }
	.yt-card--side .yt-thumb { border-radius: 12px; }
	.yt-side-list { gap: 24px; }
}
@media (min-width: 601px) and (max-width: 1000px) {
	.yt-side-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (max-width: 960px) {
	.yt-main { padding-inline: 12px; }
	.yt-chips-bar { margin-inline: -12px; padding-inline: 12px; }
	.yt-chips { gap: 8px; }
	.yt-header { padding: 0 8px; gap: 4px; }
	.yt-search { position: absolute; inset: 0; z-index: 2; max-width: none; margin: 0; padding: 0 8px; background: var(--surface); display: none; }
	.yt-header.is-search .yt-search { display: flex; }
	.yt-search-back, .yt-search-open { display: inline-flex; }
	.yt-search-input { height: 40px; }
	.yt-wordmark { font-size: calc(20px * var(--fs, 1)); }
	.yt-tools .push-toggle, .yt-tools .bm-toggle { display: none; }
	.yt-grid { gap: 20px 0; }
	.yt-card:hover .yt-thumb { border-radius: 12px; }
	/* Arşivde alt sekme çubuğu */
	body.is-yt-archive { padding-bottom: 60px; }
	.yt-tabbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; display: flex; justify-content: space-around;
		padding: 6px 0 8px; background: var(--surface); border-top: 1px solid var(--line-soft);
	}
	.yt-tab {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1 1 0; min-width: 0; min-height: 44px; padding: 2px 4px;
		border: 0; background: none; color: var(--ink); font: inherit; font-size: calc(10px * var(--fs, 1)); cursor: pointer;
	}
	.yt-tab i { font-size: calc(18px * var(--fs, 1)); }
	.yt-tab.is-current { font-weight: 700; }
	.yt-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	/* İzleme sayfası: başlık sayfayla kayar, oynatıcı üstte yapışık kalır */
	body.is-yt-watch .yt-header { position: static; }
	body.is-yt-watch .yt-main { padding-inline: 0; padding-top: 0; }
	.yt-player { position: sticky; top: 0; z-index: 50; background: #000; }
	.yt-frame { border-radius: 0; }
	.yt-info-col, .yt-side { padding-inline: 12px; }
	.yt-watch-title { font-size: calc(18px * var(--fs, 1)); }
	.yt-bar { flex-direction: column; align-items: stretch; }
	.yt-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
	.yt-actions::-webkit-scrollbar { display: none; }
	.yt-actions > * { flex: 0 0 auto; }
	.yt-channel .follow-btn { margin-left: auto; }
	.yt-share .share-panel { inset-inline-start: 0; inset-inline-end: auto; }
}
@media (hover: none) and (pointer: coarse) {
	.yt-icon-btn { width: 44px; height: 44px; }
}
@media print { .yt-header, .yt-guide, .yt-tabbar, .yt-side { display: none; } }