/**
 * KayıpHikayeler Live Show - Responsive Styles
 */

@media (max-width: 1024px) {
	.kh-profile-grid,
	.kh-booking-grid,
	.kh-payment-grid {
		grid-template-columns: 1fr;
	}

	.kh-dashboard-layout {
		grid-template-columns: 1fr;
	}

	.kh-dashboard-sidebar {
		position: static;
	}

	.kh-dashboard-nav {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (max-width: 768px) {
	.kh-ls-wrap {
		padding: 1rem;
	}

	.kh-ls-header__top {
		flex-direction: column;
		align-items: stretch;
	}

	.kh-ls-search {
		flex-direction: column;
	}

	.kh-ls-search .kh-input {
		min-width: 100%;
	}

	.kh-ls-grid {
		grid-template-columns: 1fr;
	}

	.kh-profile-hero__content {
		flex-direction: column;
		text-align: center;
	}

	.kh-profile-meta {
		justify-content: center;
		flex-wrap: wrap;
	}

	.kh-packages__grid {
		grid-template-columns: 1fr;
	}

	.kh-slots-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.kh-booking-steps {
		gap: 1rem;
	}

	.kh-step__label {
		font-size: 0.6875rem;
	}

	.kh-payment-meta {
		flex-direction: column;
		gap: 0.5rem;
		align-items: flex-start;
	}

	.kh-progress-timeline {
		flex-direction: column;
		align-items: flex-start;
	}

	.kh-progress-line {
		width: 2px;
		height: 20px;
		margin: 0 0 0 5px;
	}

	.kh-trust-badges {
		flex-direction: column;
	}

	.kh-booking-card__header {
		flex-wrap: wrap;
	}

	.kh-booking-info {
		flex-direction: column;
		gap: 0.5rem;
	}

	.kh-booking-card__actions {
		flex-direction: column;
	}

	.kh-booking-card__actions .kh-btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.kh-ls-title {
		font-size: 1.5rem;
	}

	.kh-filter-pill {
		font-size: 0.75rem;
		padding: 0.375rem 0.875rem;
	}

	.kh-profile-name {
		font-size: 1.5rem;
	}

	.kh-profile-hero__image img {
		width: 140px;
		height: 180px;
	}

	.kh-slots-grid {
		grid-template-columns: 1fr 1fr;
	}

	.kh-auth-form {
		padding: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}
