/* =========================================================================
   OtoUstan Child - ek stiller
   Tasarim sisteminin buyuk kismi theme.json'da. Burada yalnizca theme.json
   ile ifade edilemeyen kurallar var: kart grid kirilimlari, video seridi
   (scroll-snap), erisilebilirlik ve hareket azaltma.
   ========================================================================= */

/* --- Yatay tasma korumasi --- */
html, body { overflow-x: clip; }
.wp-block-group, .wp-block-columns, .wp-block-column { min-width: 0; }
img, video, iframe { max-width: 100%; height: auto; }

/* --- Header --- */
.ou-header { border-bottom: 1px solid var(--wp--preset--color--border); }
.ou-header .wp-block-navigation { gap: 1.25rem; }

/* Dokunma alani: menu linkleri >= 24px (WCAG 2.5.8) */
.ou-header .wp-block-navigation-item__content {
	padding-block: .55rem;
	display: inline-block;
}
@media (max-width: 781px) {
	.ou-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		padding-block: .75rem;
	}
}

/* "OtoUstanAI'ye Sor" — vurgulu giris (turkuaz hap). Masaustu + mobil overlay.
   Sadece <a> stillenir; yeni oge/JS yok, yatay tasma yapmaz. */
.ou-header .ou-nav-cta .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	padding: .5rem 1.1rem;
	border-radius: 999px;
	font-weight: 700;
}
.ou-header .ou-nav-cta .wp-block-navigation-item__content:hover,
.ou-header .ou-nav-cta .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}
@media (max-width: 781px) {
	.ou-header .wp-block-navigation__responsive-container-content .ou-nav-cta .wp-block-navigation-item__content {
		padding: .6rem 1.2rem;
	}
}

/* --- Breadcrumb (Rank Math) --- */
.rank-math-breadcrumb {
	font-size: .82rem;
	margin-bottom: 1rem;
	color: var(--wp--preset--color--muted);
}
.rank-math-breadcrumb p { margin: 0; }
.rank-math-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.rank-math-breadcrumb a:hover { color: var(--wp--preset--color--accent); }
.rank-math-breadcrumb .separator { margin: 0 .35rem; opacity: .6; }

/* --- Kart grid'leri ---
   Paylasilan grid (yazi/kategori/arama sablonlari): masaustu 3 / mobil 2
   Ana sayfa (ou-card-grid--home): masaustu 4 / tablet 3 / mobilde yatay serit
   !important: cekirdek "columnCount" grid stilini gecmek icin (ayni ozgulluk). */
.ou-card-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.ou-card-grid--home {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1024px) {
	.ou-card-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px) {
	/* Paylaşılan grid (arşiv / arama sayfaları): 2 sütun */
	.ou-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

	/* Ana sayfa "Bilgilendirme Yazıları": yatay kaydırmalı tek sıra şerit
	   (video şeridiyle aynı davranış; kartlar 2 sütunlu halinden geniş) */
	.ou-card-grid--home {
		display: flex !important;
		grid-template-columns: none !important;
		align-items: flex-start;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--border) transparent;
		padding-bottom: .5rem;
	}
	.ou-card-grid--home > li {
		flex: 0 0 clamp(240px, 72vw, 300px);
		scroll-snap-align: start;
	}
	.ou-card-grid--home::-webkit-scrollbar { height: 8px; }
	.ou-card-grid--home::-webkit-scrollbar-thumb {
		background: var(--wp--preset--color--border);
		border-radius: 8px;
	}
}

.ou-card {
	border: 1px solid var(--wp--preset--color--border);
	transition: border-color .15s ease, transform .15s ease;
	height: 100%;
}
.ou-card:hover,
.ou-card:focus-within { border-color: var(--wp--preset--color--accent); }
.ou-card .wp-block-post-title { margin: 0; }
.ou-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.ou-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }

/* Dokunma alani: kart ustundeki kategori linki >= 24px */
.ou-card .wp-block-post-terms a,
.ou-card .wp-block-post-terms {
	display: inline-block;
	padding-block: .3rem;
	line-height: 1.3;
}

/* Kart gorseli: TAM gosterilir, kirpilmaz (infografikler metin gomulu).
   Sabit oran yok -> gorselin dogal orani korunur. */
.ou-card .wp-block-post-featured-image { line-height: 0; }
.ou-card .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* --- "Devamini Oku" / "Icerigi Gor" (read-more) --- */
.wp-block-read-more {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	border: 0;
	padding: .3rem 0;
}
.wp-block-read-more:hover { text-decoration: underline; }

/* Mansette dolu buton gorunumlu read-more */
.ou-hero-actions .ou-btn-solid.wp-block-read-more {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
	padding: .7em 1.5em;
	border-radius: 8px;
}
.ou-hero-actions .ou-btn-solid.wp-block-read-more:hover {
	background: var(--wp--preset--color--accent);
	text-decoration: none;
}
.ou-hero-actions { align-items: center; }

/* --- Mansett: 2 kolon (gorsel + metin), gorsel kirpilmaz --- */
.ou-hero { margin-top: 1.5rem; }
.ou-hero .ou-hero__cols { gap: clamp(1.25rem, 3vw, 2.5rem); }
.ou-hero .ou-hero__img { margin: 0; line-height: 0; }
.ou-hero .ou-hero__img img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}
.ou-hero .wp-block-post-title {
	margin: 0 0 .5rem;
	color: var(--wp--preset--color--contrast);
}
.ou-hero .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.ou-hero .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.ou-hero .wp-block-post-excerpt { margin: 0; }
@media (max-width: 781px) {
	.ou-hero {
		padding: 1.25rem !important;
		margin-top: 1rem;
	}
}

/* --- Etiket rozetleri (#etiket) --- */
.ou-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	font-size: .82rem;
}
.ou-tags a {
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 2px 10px;
	line-height: 1.6;
}
.ou-tags a::before { content: "#"; opacity: .6; }
.ou-tags a:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* --- "Son Videolar" serit sarmalayici (otoustan/son-videolar blogu) --- */
.ou-strip-wrap > .wp-block-heading { margin-bottom: 1rem; }

/* --- Video seridi: DIKEY (9:16, Shorts tarzi) kartlar ---
   Yatay CSS scroll-snap serit, JS yok. OtoUstan agirlikli dikey video uretiyor. */
.ou-video-strip {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	padding-bottom: .5rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--border) transparent;
}
.ou-video-strip::-webkit-scrollbar { height: 8px; }
.ou-video-strip::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--border);
	border-radius: 8px;
}
.ou-video-card {
	flex: 0 0 clamp(150px, 46vw, 220px);
	scroll-snap-align: start;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.ou-video-thumb {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	background-color: var(--wp--preset--color--card);
	background-size: cover;
	background-position: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
}
.ou-dur {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(7, 17, 24, .85);
	color: #fff;
	font-size: .75rem;
	padding: 2px 6px;
	border-radius: 4px;
}
.ou-video-title {
	font-weight: 600;
	line-height: 1.35;
	font-size: .92rem;
}

/* --- Oynatma butonu (ortak) --- */
.ou-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(7, 17, 24, .72);
	border: 2px solid var(--wp--preset--color--contrast);
}
.ou-play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--wp--preset--color--contrast);
	transform: translateX(2px);
}
.ou-video-card:hover .ou-play { background: var(--wp--preset--color--accent-2); }

/* --- Kategori kartlari --- */
.ou-cat-grid { gap: 1rem; }
.ou-cat-card {
	border: 1px solid var(--wp--preset--color--border);
	transition: border-color .15s ease;
}
.ou-cat-card:hover { border-color: var(--wp--preset--color--accent); }
.ou-cat-link { margin: 0; }
.ou-cat-link a {
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.ou-cat-link a:hover { color: var(--wp--preset--color--accent); }

/* --- OtoUstanAI bandi --- */
.ou-ai-cta { border-top: 3px solid var(--wp--preset--color--accent-2); }

/* --- Sosyal ikonlar (is-style-logos-only, currentColor) --- */
.ou-usta .wp-block-social-links,
.ou-footer .wp-block-social-links {
	color: var(--wp--preset--color--contrast);
	gap: .5rem;
}
.ou-usta .wp-block-social-link a:hover,
.ou-footer .wp-block-social-link a:hover { color: var(--wp--preset--color--accent); }

/* --- Footer --- */
.ou-footer-list { list-style: none; margin: 0; padding: 0; }
.ou-footer-list li { margin: .35rem 0; }
.ou-footer-list a {
	text-decoration: none;
	color: var(--wp--preset--color--muted);
}
.ou-footer-list a:hover { color: var(--wp--preset--color--accent); }

/* --- Erisilebilirlik: gorunur odak --- */
:where(a, button, input, .wp-block-button__link, .wp-block-read-more, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ======================================================================
   FAZ 2 — video sayfası, oynatıcı, rozet, ilgili içerik
   ====================================================================== */

/* --- YouTube facade oynatıcı --- */
.ou-yt {
	margin: 1.25rem auto;
	max-width: 100%;
}
.ou-yt--yatay { max-width: 820px; }
.ou-yt--dikey { max-width: 420px; }

.ou-yt__cover,
.ou-yt__frame {
	position: relative;
	display: block;
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--card) center/cover no-repeat;
}
.ou-yt--yatay .ou-yt__cover,
.ou-yt--yatay .ou-yt__frame { aspect-ratio: 16 / 9; }
.ou-yt--dikey .ou-yt__cover,
.ou-yt--dikey .ou-yt__frame { aspect-ratio: 9 / 16; }

.ou-yt__frame { border: 0; }
.ou-yt__cover { cursor: pointer; }
.ou-yt__cover .ou-yt__dur {
	position: absolute;
	right: 10px;
	bottom: 10px;
	background: rgba(7, 17, 24, .85);
	color: #fff;
	font-size: .8rem;
	padding: 2px 7px;
	border-radius: 4px;
}
.ou-yt__cover:hover .ou-yt__play { background: var(--wp--preset--color--accent-2); transform: scale(1.06); }
.ou-yt__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: rgba(7, 17, 24, .72);
	border: 2px solid var(--wp--preset--color--contrast);
	transition: background .15s ease, transform .15s ease;
}
.ou-yt__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 0 14px 22px;
	border-color: transparent transparent transparent var(--wp--preset--color--contrast);
	transform: translateX(3px);
}
.ou-yt__extlink {
	margin: .5rem 0 0;
	font-size: .82rem;
	text-align: right;
}
.ou-yt__extlink a { color: var(--wp--preset--color--muted); }
.ou-yt__extlink a:hover { color: var(--wp--preset--color--accent); }
.ou-yt--empty {
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 1rem;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* --- Araç bilgi şeridi --- */
.ou-arac-bilgi {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	margin: 1rem 0 1.25rem;
	padding: .75rem 1rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	font-size: .9rem;
}
.ou-arac-bilgi__item strong { color: var(--wp--preset--color--muted); font-weight: 600; }

/* --- Tür etiketi (arşiv kartı) --- */
.ou-badge {
	display: inline-block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
}
.ou-badge--video {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	border-color: transparent;
}
.ou-badge--post {
	color: var(--wp--preset--color--muted);
	background: transparent;
}

/* --- Video arşivi (dikey kart grid) --- */
.ou-video-grid { gap: 1.25rem 1rem; }
.ou-vcard { height: 100%; }
.ou-vcard .wp-block-post-featured-image { margin: 0; line-height: 0; }
.ou-vcard .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 12px;
}
.ou-vcard .wp-block-post-title { margin: 0; }
.ou-vcard .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.ou-vcard .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }

/* --- İlgili içerik --- */
.ou-ilgili {
	margin: var(--wp--preset--spacing--40, 2rem) 0 0;
}
.ou-ilgili__baslik { font-size: clamp(1.15rem, 3vw, 1.4rem); }
.ou-ilgili__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
@media (max-width: 680px) {
	.ou-ilgili__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ou-ilgili__item a {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.ou-ilgili__thumb {
	position: relative;
	display: block;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}
.ou-ilgili__thumb img { width: 100%; height: auto; display: block; }
.ou-ilgili__title { font-size: .9rem; font-weight: 600; line-height: 1.35; }
.ou-ilgili__item a:hover .ou-ilgili__title { color: var(--wp--preset--color--accent); }
.ou-play--sm {
	width: 38px;
	height: 38px;
	border-width: 2px;
}
.ou-play--sm::after {
	border-width: 8px 0 8px 13px;
}

/* --- SSS: core "details" + Rank Math FAQ blogu --- */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: .75rem 1rem;
	background: var(--wp--preset--color--surface);
}
.wp-block-details + .wp-block-details { margin-top: .6rem; }
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
}
.wp-block-details[open] summary { margin-bottom: .5rem; }

/* Rank Math FAQ blogu — koyu temaya uyumlandir */
.wp-block-rank-math-faq-block .rank-math-list-item {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: .75rem 1rem;
	background: var(--wp--preset--color--surface);
}
.wp-block-rank-math-faq-block .rank-math-list-item + .rank-math-list-item { margin-top: .6rem; }
.wp-block-rank-math-faq-block .rank-math-question {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.wp-block-rank-math-faq-block .rank-math-answer { color: var(--wp--preset--color--contrast); }
.wp-block-rank-math-faq-block .rank-math-answer > :last-child { margin-bottom: 0; }

/* --- Yorum / soru alanı --- */
.ou-comments { margin-top: var(--wp--preset--spacing--50, 2.5rem); }

/* --- Hareket azaltma tercihi --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}