/**
 * Bölüm 19 — Mobil / tablet / responsive son optimizasyon
 *
 * Mobile-first ek düzenlemeler. Temel stiller main.css içindedir.
 *
 * Breakpoint referansı:
 * 600px  — tablet (küçük)
 * 768px  — tablet
 * 1024px — laptop / desktop
 * 1280px — geniş desktop
 * 1440px — ultra-wide içerik sınırı
 *
 * @package Cizgi_Film
 */

/* ==========================================================================
   Safe area (notch / home indicator)
   ========================================================================== */

html {
	background-color: #0b1220;
}

.cft-site-header {
	padding-top: env(safe-area-inset-top, 0);
}

body {
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
	background-color: #0b1220;
}

/* iOS rubber-band / overscroll: beyaz flaş önleme */
@supports (-webkit-touch-callout: none) {
	html,
	body {
		background-color: #0b1220;
	}
}

/* Yatay taşma + alt scrollbar beyaz dikdörtgen */
@media (max-width: 1023px) {
	html,
	body {
		max-width: 100vw;
		overflow-x: clip;
	}

	* {
		scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
	}

	*::-webkit-scrollbar {
		width: 0;
		height: 0;
		background: transparent;
	}

	*::-webkit-scrollbar-track {
		background: transparent;
	}

	*::-webkit-scrollbar-thumb {
		background: transparent;
	}

	/* Yatay kaydırılabilir şeritlerde ince koyu scrollbar */
	.cft-player__sources,
	.cft-season-list,
	.cft-filters__chips,
	[data-cft-scroll] {
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
	}

	.cft-player__sources::-webkit-scrollbar,
	.cft-season-list::-webkit-scrollbar,
	.cft-filters__chips::-webkit-scrollbar {
		height: 4px;
		width: 4px;
	}

	.cft-player__sources::-webkit-scrollbar-thumb,
	.cft-season-list::-webkit-scrollbar-thumb,
	.cft-filters__chips::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, 0.25);
		border-radius: 999px;
	}
}

.cft-ad--mobile {
	padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
	background: #0b1220;
}

/* Sticky alt reklam içeriği kapatmasın */
@media (max-width: 767px) {
	body:has(.cft-ad--mobile:not([hidden])) .cft-site-footer {
		padding-bottom: calc(var(--cft-space-5) + 4.5rem + env(safe-area-inset-bottom, 0px));
	}
}

/* ==========================================================================
   iOS input zoom önleme (font-size >= 16px)
   ========================================================================== */

@media (max-width: 767px) {
	.cft-input,
	.cft-textarea,
	.cft-select,
	.search-form .search-field,
	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form textarea {
		font-size: 16px;
		line-height: 1.4;
	}
}

/* ==========================================================================
   Dokunmatik hedefler + hover bağımsızlığı
   ========================================================================== */

@media (pointer: coarse) {
	.cft-btn,
	.cft-menu--mobile a,
	.cft-season-chip,
	.cft-player__source,
	.cft-footer-links a,
	.cft-social a,
	.cft-nav-toggle,
	.cft-user-nav__link,
	.navigation.pagination .page-numbers {
		min-height: var(--cft-touch-min);
	}
}

@media (hover: none) {
	.cft-btn:hover,
	.cft-genre-card:hover,
	.cft-card:hover {
		transform: none;
	}

	.cft-card:hover .cft-card__media img {
		transform: none;
	}
}

.cft-btn,
.cft-nav-toggle,
.cft-player__play,
.cft-season-chip,
.cft-az__letter {
	touch-action: manipulation;
}

/* ==========================================================================
   Mobil header (≤1023px)
   ========================================================================== */

@media (max-width: 1023px) {
	:root {
		--cft-header-h: 3.75rem;
	}

	.cft-site-header__inner {
		gap: var(--cft-space-3);
		min-height: var(--cft-header-h);
	}

	.cft-brand .custom-logo,
	.cft-brand__logo {
		max-height: 2.15rem;
	}

	.cft-brand__badge {
		width: 2.25rem;
		height: 2.25rem;
		border-radius: 0.8rem;
	}

	.cft-brand__word {
		font-size: 1.05rem;
	}

	.cft-brand__wordmark {
		max-width: 42vw;
		overflow: hidden;
	}

	.cft-brand__title {
		font-size: 1.05rem;
		max-width: 42vw;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Kullanıcı menüsü çekmecede; header'da yer kaplamasın */
	.cft-header-slot {
		display: none;
	}

	.cft-header-actions {
		gap: 0.35rem;
	}
}

@media (max-width: 359px) {
	:root {
		--cft-gutter: 0.85rem;
	}

	.cft-brand__title {
		max-width: 38vw;
	}
}

/* ==========================================================================
   Mobil menü çekmecesi
   ========================================================================== */

@media (max-width: 1023px) {
	.cft-mobile-drawer__panel {
		width: min(22.5rem, 94vw);
		max-height: 100%;
		max-height: 100dvh;
		padding-top: calc(0.95rem + env(safe-area-inset-top, 0px));
		padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
	}

	.cft-mobile-drawer .cft-search-form {
		max-width: none;
	}

	.cft-mobile-drawer .cft-search-form .search-field {
		font-size: 16px;
		min-height: 3rem;
	}

	.cft-mobile-drawer .cft-search-form__submit-text {
		display: none;
	}

	.cft-mobile-drawer .cft-search-form__submit {
		width: 3rem;
		padding-inline: 0;
	}

	.cft-mobile-drawer .cft-live-results {
		max-height: 12rem;
	}
}

@media (max-width: 480px) {
	.cft-search-form__submit-text {
		display: none;
	}

	.cft-search-form__submit {
		width: 3rem;
		min-width: 3rem;
		padding-inline: 0;
	}
}

/* ==========================================================================
   Hero — mobil / tablet
   ========================================================================== */

@media (max-width: 767px) {
	.cft-hero__slide {
		min-height: clamp(17rem, 72vw, 22rem);
		padding-block: 1.25rem 1.75rem;
	}

	.cft-hero__inner {
		justify-items: center;
		text-align: center;
	}

	.cft-hero__poster {
		width: min(52vw, 9.5rem);
		margin-inline: auto;
	}

	.cft-hero__title {
		max-width: none;
		font-size: clamp(1.45rem, 5vw, 1.85rem);
		overflow-wrap: anywhere;
	}

	.cft-hero__desc {
		font-size: var(--cft-fs-body);
		line-height: var(--cft-lh-body);
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.cft-hero__meta {
		justify-content: center;
	}

	.cft-hero__actions {
		justify-content: center;
		flex-wrap: wrap;
	}

	.cft-hero__actions .cft-btn {
		min-width: 8.5rem;
	}
}

/* ==========================================================================
   Detay sayfası — mobil
   ========================================================================== */

@media (max-width: 767px) {
	.cft-detail-hero {
		min-height: auto;
		padding-block: 1rem 1.5rem;
	}

	.cft-detail-hero__inner {
		justify-items: center;
		text-align: center;
	}

	.cft-detail-hero__poster {
		width: min(48vw, 10rem);
		margin-inline: auto;
	}

	.cft-detail-hero__title {
		overflow-wrap: anywhere;
	}

	.cft-detail-hero__desc {
		font-size: var(--cft-fs-body);
		line-height: var(--cft-lh-body);
	}

	.cft-detail-hero__meta {
		justify-content: center;
	}

	.cft-detail-hero__actions {
		justify-content: center;
	}
}

/* ==========================================================================
   Video oynatıcı
   ========================================================================== */

.cft-player,
.cft-player__frame,
.cft-player__frame iframe {
	max-width: 100%;
}

.cft-player__source-error {
	text-align: center;
	padding: 0.5rem 0.75rem;
}

@media (max-width: 767px) {
	.cft-player__source {
		min-height: var(--cft-touch-min);
		padding: 0.65rem 1rem;
	}

	.cft-player__play {
		min-height: var(--cft-touch-min);
		padding: 0.85rem 1.35rem;
	}

	.cft-watch__title {
		overflow-wrap: anywhere;
	}

	.cft-watch__nav-label {
		overflow-wrap: anywhere;
	}

	.cft-watch__share-actions {
		width: 100%;
	}

	.cft-watch__share-social {
		flex: 1 1 calc(50% - 0.35rem);
		justify-content: center;
		text-align: center;
	}

	.cft-watch__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cft-watch__share {
		margin-left: 0;
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Reklamlar — taşma önleme
   ========================================================================== */

.cft-ad,
.cft-ad__inner,
.cft-ad__inner iframe,
.cft-ad__inner ins,
.cft-ad__inner img {
	max-width: 100% !important;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.cft-ad--728x90 .cft-ad__inner,
	.cft-ad--970x90 .cft-ad__inner,
	.cft-ad--336x280 .cft-ad__inner {
		max-width: 100%;
		width: 100%;
	}

	.cft-ad-popup {
		padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
	}

	.cft-ad-popup__dialog {
		width: min(100%, calc(100vw - 2rem));
		max-height: min(75vh, calc(100dvh - 4rem));
	}

	.cft-ad-popup__close {
		width: var(--cft-touch-min);
		height: var(--cft-touch-min);
		top: 0.35rem;
		right: 0.35rem;
	}

	.cft-catalog__sidebar .cft-ad,
	.cft-sidebar .cft-ad {
		overflow: hidden;
	}
}

/* ==========================================================================
   Footer — responsive grid
   ========================================================================== */

@media (min-width: 600px) and (max-width: 767px) {
	.cft-site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--cft-space-5);
	}
}

@media (max-width: 599px) {
	.cft-site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--cft-space-3);
	}

	.cft-menu--footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}

	.cft-footer-links a {
		display: inline-flex;
		align-items: center;
		min-height: var(--cft-touch-min);
		padding-block: 0.15rem;
	}

	.cft-social {
		gap: 0.65rem;
	}

	.cft-social__list {
		gap: 0.75rem;
	}

	.cft-social a,
	.cft-social__link {
		width: 3.15rem;
		height: 3.15rem;
		border-radius: 1.05rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.cft-social__svg {
		width: 1.35rem;
		height: 1.35rem;
	}
}

/* ==========================================================================
   Breadcrumb / A-Z / pagination
   ========================================================================== */

.cft-breadcrumb__item {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.cft-breadcrumb__list {
	row-gap: 0.25rem;
}

.cft-az__scroll {
	scroll-padding-inline: 0;
	mask-image: none;
}

@media (max-width: 767px) {
	.cft-az__scroll {
		gap: 0.25rem;
		justify-content: center;
	}

	.cft-az__letter {
		min-width: 1.75rem;
		min-height: 1.75rem;
		padding: 0.18rem 0.3rem;
		font-size: 0.75rem;
	}
}

@media (max-width: 379px) {
	.cft-az__letter {
		min-width: 1.55rem;
		min-height: 1.55rem;
		padding: 0.15rem 0.22rem;
		font-size: 0.7rem;
	}
}

@media (max-width: 479px) {
	.navigation.pagination .nav-links {
		gap: 0.35rem;
	}

	.navigation.pagination .page-numbers {
		min-width: var(--cft-touch-min);
		min-height: var(--cft-touch-min);
	}
}

/* ==========================================================================
   Auth / profil formları
   ========================================================================== */

@media (max-width: 767px) {
	.cft-auth {
		padding-block: 1.25rem 2rem;
	}

	.cft-auth__card {
		padding: 1.15rem;
	}

	.cft-auth__links {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.cft-auth__links a {
		min-height: var(--cft-touch-min);
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.cft-profile-hero {
		flex-direction: column;
		text-align: center;
	}

	.cft-profile-hero__avatar img,
	.cft-profile-hero__avatar .avatar {
		width: 5.5rem;
		height: 5.5rem;
	}
}

/* ==========================================================================
   Arama / katalog
   ========================================================================== */

@media (max-width: 767px) {
	.cft-search-form--page {
		flex-direction: column;
		align-items: stretch;
		max-width: none;
	}

	.cft-search-form--page .cft-search-form__wrap {
		width: 100%;
	}

	.cft-live-results {
		max-width: 100%;
		overflow-x: hidden;
	}

	.cft-catalog-toolbar {
		flex-wrap: wrap;
		gap: 0.5rem;
	}
}

/* ==========================================================================
   Landscape telefon
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
	.cft-hero__slide {
		min-height: 14rem;
	}

	.cft-detail-hero {
		min-height: auto;
	}

	.cft-mobile-drawer__panel {
		width: min(18rem, 65vw);
	}
}

/* ==========================================================================
   Geniş ekran — içerik genişliği sınırı
   ========================================================================== */

@media (min-width: 1920px) {
	.cft-container {
		width: min(100% - (var(--cft-gutter) * 2), var(--cft-container));
	}

	.cft-watch__article {
		max-width: 1100px;
	}
}

/* ==========================================================================
   Boş durum / empty state
   ========================================================================== */

@media (max-width: 767px) {
	.cft-empty {
		padding: 1.5rem 1rem;
		text-align: center;
	}

	.cft-empty__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cft-empty__actions .cft-btn {
		width: 100%;
	}
}