/* mobile.css — Komple mobil düzeni */

/*------------------------------
 MOBILE MENU (Mevcut kodlarınız)
 ------------------------------*/
.stelina-menu-clone-wrap {
	position: fixed;
	top: 0;
	left: -320px;
	width: 320px;
	height: 100vh;
	background-color: #fff;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	z-index: 100000;
	-webkit-box-shadow: 3px 5px 14px -3px rgba(0, 0, 0, 0.11);
	-moz-box-shadow: 3px 5px 14px -3px rgba(0, 0, 0, 0.11);
	box-shadow: 3px 5px 14px -3px rgba(0, 0, 0, 0.11);
	color: #000;
}

	.stelina-menu-clone-wrap.open {
		left: 0;
	}

.stelina-menu-panels-actions-wrap {
	border-bottom: 1px solid #eee;
	height: 50px;
	position: relative;
}

	.stelina-menu-panels-actions-wrap .stelina-menu-close-btn,
	.stelina-menu-panels-actions-wrap .stelina-menu-prev-panel {
		width: 50px;
		height: 50px;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10;
		border-left: 1px solid #eee;
		text-align: center;
		line-height: 50px;
		color: #000;
	}

		.stelina-menu-panels-actions-wrap .stelina-menu-close-btn:hover,
		.stelina-menu-panels-actions-wrap .stelina-menu-prev-panel:hover {
			color: #000;
		}

	.stelina-menu-panels-actions-wrap .stelina-menu-prev-panel {
		right: inherit;
		left: 0;
		border: none;
		border-right: 1px solid #eee;
	}

	.stelina-menu-panels-actions-wrap .stelina-menu-current-panel-title {
		display: block;
		text-align: center;
		line-height: 50px;
		padding: 0 50px;
		text-transform: uppercase;
	}

	.stelina-menu-panels-actions-wrap .stelina-menu-prev-panel:before {
		content: "\f104";
		font-family: FontAwesome;
	}

.stelina-menu-panel > ul {
	padding: 0;
	margin: 0;
}

.stelina-menu-panel li {
	list-style: none;
	position: relative;
}

.stelina-menu-panel > ul > li {
	padding: 0 20px;
	border-bottom: 1px solid #eee;
}

	.stelina-menu-panel > ul > li > a {
		display: block;
		line-height: 50px;
		color: #000;
		text-transform: uppercase;
	}

	.stelina-menu-panel > ul > li:hover > a,
	.stelina-menu-panel > ul > li.active > a {
		color: #000;
	}

.stelina-menu-next-panel {
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
}

	.stelina-menu-next-panel:before {
		content: "\f105";
		font-family: FontAwesome;
	}

.stelina-menu-clone-wrap .toggle-submenu {
	display: none !important;
}

.stelina-menu-clone-wrap .stelina-menu-panels {
	background: inherit;
	border-color: inherit;
	z-index: 0;
	box-sizing: border-box;
	overflow: hidden;
	height: calc(100% - 50px);
	position: relative;
}

.stelina-menu-clone-wrap .stelina-menu-panel {
	background-color: #fff;
}

	.stelina-menu-clone-wrap .stelina-menu-panel.stelina-menu-sub-panel {
		border-color: #fff;
		bottom: 0;
		box-sizing: border-box;
		display: block;
		left: 0;
		margin: 0;
		overflow-x: hidden;
		overflow-y: auto;
		position: absolute;
		right: 0;
		top: 0;
		transform: translateX(100%);
		transition: all 0.2s ease 0s;
		z-index: 0;
	}

	.stelina-menu-clone-wrap .stelina-menu-panel.stelina-menu-panel-opened {
		transform: translateX(0);
		z-index: 999;
	}

.stelina-menu-clone-wrap .stelina-menu-sub-opened {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
}

.stelina-menu-clone-wrap .stelina-menu-hidden {
	display: block !important;
	opacity: 0;
	visibility: hidden;
}

.stelina-menu-clone-wrap .submenu.mega-menu {
	padding: 20px;
	max-width: 100% !important;
	width: 100% !important;
}

.stelina-menu li > a > .icon {
	margin-right: 10px;
}

.stelina-menu-panel-main {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.stelina-menu-panel.stelina-menu-panel-opened .submenu {
	opacity: 1;
	visibility: visible;
}

.stelina-menu-panel > .mega-menu .widget-custom-menu {
	width: 100%;
}

.stelina-menu-panels .menu-item-has-children > a::after {
	display: none;
}

.stelina-menu-panel.stelina-menu-panel-opened .menu-page {
	background-image: none;
}

.stelina-menu-panel .main-menu > li > a, .stelina-menu-panel .stelina-demolink .title,
.stelina-menu-panel .mega-menu .stelina-custommenu .widgettitle {
	color: #222222 !important;
}

.stelina-menu-panel .mega-menu .stelina-custommenu ul li {
	color: #555;
}

/*------------------------------
 MOBİL HEADER ANIMASYON
 ------------------------------*/
@keyframes tbSlide {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

/*------------------------------
 MOBİL DÜZEN (≤768px)
 ------------------------------*/
@media (max-width: 768px) {

	/* ==== HEADER DÜZENLEMELERİ ==== */

	/* Temanın varsayılan mobil header'ını kapat */
	.header-device-mobile {
		display: none !important;
	}

	/* Ana header'ı zorla görünür yap */
	header.header.style2,
	header.header.style2 .top-bar,
	header.header.style2 .main-header,
	header.header.style2 .header-nav-container {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Header arka plan temiz */
	header.header.style2 {
		background: transparent !important;
	}

	/* ==== ÜST SIYAH BAR ==== */
	.top-bar {
		background: #000 !important;
		color: #fff !important;
	}

		.top-bar .container {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 6px 12px;
		}

	.top-bar-left {
		flex: 1 1 auto;
		min-width: 0;
	}

	.header-message {
		flex: 1 1 auto;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
	}

		.header-message > span {
			display: inline-block;
			padding-left: 100%;
			animation: tbSlide 14s linear infinite;
			color: #fff;
			font-size: 12px;
			line-height: 26px;
		}

	.top-bar-right {
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.auth-btn {
		padding: 4px 10px;
		font-size: 12px;
		border-radius: 12px;
		background: #fff;
		color: #111;
		white-space: nowrap;
	}

	/* ==== ANA HEADER (BEYAZ) ==== */
	header.header.style2 > .container,
	.main-header {
		background: #fff !important;
	}

	/* Alt border */
	header.header.style2 > .container {
		border-bottom: 1px solid #e5e7eb;
	}

	/* ==== HEADER LAYOUTu ==== */
	.main-header .row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		padding: 8px 12px;
		margin: 0 !important;
		max-width: 100% !important;
	}

		/* LOGO (üstte, tam genişlik) */
		.main-header .row > div:nth-child(2) {
			order: 1;
			width: 100%;
			text-align: center;
		}

	.logo img {
		max-height: 40px;
		width: auto;
	}

	/* ARAMA (sol, %60) */
	.main-header .row > div:nth-child(1) {
		order: 2;
		width: 60%;
		max-width: 60%;
	}

	.block-search-block .form-search .inner {
		width: 100%;
		max-width: 100%;
	}

	.block-search-block .form-search .input {
		width: 100%;
		height: 40px;
		border-radius: 24px;
		padding: 0 14px;
		box-sizing: border-box;
	}

	.btn-search {
		width: 44px;
		height: 40px;
		border-radius: 24px;
	}

	/* SEPET (sağ, %40) */
	.main-header .row > div:nth-child(3) {
		order: 3;
		width: 40%;
		max-width: 40%;
	}

	.header-control {
		display: flex !important;
		justify-content: flex-end;
		align-items: center;
		gap: 12px;
	}

	.cart-btn {
		background: #fff;
		border-radius: 14px;
		padding: 8px 12px;
		position: relative;
		top: -10px;
		margin-top: 0 !important;
		white-space: nowrap;
	}

	.cart-count {
		font-size: 12px;
	}

	/* Çift hamburger menü gösterme */
	.header-control .menu-toggle {
		display: none !important;
	}

	/* NAV container (tema JS'i varsa çalışır) */
	.header-nav-wapper {
		display: none;
	}

	.header-nav-container.is-open .header-nav-wapper {
		display: block;
	}

	/* ==== OVERFLOW VE GENIŞLIK KONTROLÜ ==== */

	/* Body/HTML genel overflow kontrolü */
	html, body {
		overflow-x: hidden !important;
		max-width: 100vw !important;
	}

	/* Container'lar */
	.container {
		max-width: 100% !important;
		overflow-x: hidden !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
		box-sizing: border-box !important;
	}

	/* Ana içerik alanları */
	.home-slider,
	.banner-video-wrapp,
	.stelina-product {
		overflow: hidden !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Row'lar */
	.row {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

		.row > [class*="col-"] {
			padding-left: 8px !important;
			padding-right: 8px !important;
			max-width: 100% !important;
			box-sizing: border-box !important;
		}

	/* ==== SLIDER DÜZELTMELERİ ==== */

	/* Slick slider container'ları */
	.slick-slider {
		max-width: 100% !important;
		overflow: hidden !important;
		width: 100% !important;
	}

	/* Slick track */
	.slick-track {
		max-width: 100% !important;
		width: auto !important;
		display: flex !important;
	}

	/* Slick slide'lar */
	.slick-slide {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Slider transform override (kayma önleme) */
	.slick-track[style*="transform"] {
		max-width: 100% !important;
	}

	/* ==== ÜRÜN LİSTESİ ==== */
	.list-products {
		max-width: 100% !important;
		overflow: hidden !important;
		width: 100% !important;
	}

		.list-products > li {
			max-width: 100% !important;
			box-sizing: border-box !important;
			margin-bottom: 15px !important;
		}

	/* ==== GENEL GÜVENLİK ==== */
	* {
		box-sizing: border-box !important;
	}

	/* Tüm elementlerde maksimum genişlik kontrolü */
	div, section, article, aside, main, header, footer {
		max-width: 100% !important;
	}
}

/*------------------------------
 EK GÜVENLİK (Tüm ekranlar)
 ------------------------------*/

/* Slick slider genel güvenlik */
.slick-slider {
	overflow: hidden;
}

.slick-track {
	display: flex;
}

/* Mobilde ekstra kontrol */
@media (max-width: 768px) {
	.slick-slider .slick-track {
		width: auto !important;
		max-width: 100% !important;
		flex-wrap: nowrap !important;
	}

	.slick-slide {
		flex-shrink: 0 !important;
	}
}
/* Mobile.css dosyanıza ekleyin - Kullanıcı menüsü düzeltmesi */

@media (max-width: 768px) {

	/* ==== KULLANICI MENÜSÜ MOBIL DÜZELTMELERİ ==== */

	/* Top bar'daki kullanıcı alanı */
	.top-bar-right {
		margin-left: auto;
		display: flex;
		align-items: center;
		gap: 8px;
		max-width: 50%; /* Genişlik sınırı */
		overflow: visible; /* Dropdown için */
	}

	/* Kullanıcı butonu/dropdown */
	.user-menu,
	.account-menu,
	.header-user-menu {
		position: relative;
		display: flex;
		align-items: center;
	}

	/* Kullanıcı adı/buton */
	.user-name,
	.account-btn,
	.user-account-btn {
		padding: 4px 10px;
		font-size: 12px;
		border-radius: 12px;
		background: #fff;
		color: #111;
		white-space: nowrap;
		border: none;
		cursor: pointer;
		max-width: 120px; /* Maksimum genişlik */
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Dropdown menü */
	.user-dropdown,
	.account-dropdown,
	.submenu {
		position: absolute !important;
		top: 100% !important;
		right: 0 !important;
		left: auto !important;
		background: #fff !important;
		border: 1px solid #e5e7eb !important;
		border-radius: 12px !important;
		box-shadow: 0 10px 30px rgba(0,0,0,.15) !important;
		z-index: 10000 !important;
		min-width: 200px !important;
		max-width: 250px !important;
		padding: 8px 0 !important;
		margin-top: 4px !important;
		/* Başlangıçta gizli */
		opacity: 0 !important;
		visibility: hidden !important;
		transform: translateY(-10px) !important;
		transition: all 0.2s ease !important;
	}

		/* Dropdown açık durumu */
		.user-menu.open .user-dropdown,
		.account-menu.open .account-dropdown,
		.show .submenu,
		.user-dropdown.show,
		.account-dropdown.show {
			opacity: 1 !important;
			visibility: visible !important;
			transform: translateY(0) !important;
		}

		/* Dropdown menü linkleri */
		.user-dropdown a,
		.account-dropdown a,
		.submenu a {
			display: block !important;
			padding: 12px 16px !important;
			color: #374151 !important;
			text-decoration: none !important;
			font-size: 14px !important;
			font-weight: 500 !important;
			border-bottom: none !important;
			transition: background 0.15s ease !important;
		}

			.user-dropdown a:hover,
			.account-dropdown a:hover,
			.submenu a:hover {
				background: #f3f4f6 !important;
				color: #111827 !important;
			}

			/* Son elemanda border yok */
			.user-dropdown a:last-child,
			.account-dropdown a:last-child,
			.submenu a:last-child {
				border-bottom: none !important;
			}

	/* Dropdown ok işareti */
	.user-name::after,
	.account-btn::after,
	.user-account-btn::after {
		content: ' ▼';
		font-size: 10px;
		margin-left: 4px;
		transition: transform 0.2s ease;
	}

	.user-menu.open .user-name::after,
	.account-menu.open .account-btn::after,
	.show .user-account-btn::after {
		transform: rotate(180deg);
	}

	/* Mobilde kaydırma önleme */
	.top-bar .container {
		overflow: visible !important;
	}

	.header-message {
		flex: 1 1 auto;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		max-width: 50%; /* Kullanıcı menüsü için yer bırak */
	}

	/* ==== ALTERNATİF: Eğer dropdown yatay kaydırılıyorsa ==== */

	/* Yatay scroll olan kullanıcı menüsü */
	.user-menu-horizontal,
	.account-links-horizontal {
		display: flex !important;
		flex-direction: row !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		padding: 8px 0 !important;
		gap: 8px !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE/Edge */
	}

		.user-menu-horizontal::-webkit-scrollbar,
		.account-links-horizontal::-webkit-scrollbar {
			display: none; /* Chrome/Safari */
		}

		.user-menu-horizontal a,
		.account-links-horizontal a {
			flex-shrink: 0 !important;
			padding: 6px 12px !important;
			background: #f8f9fa !important;
			border: 1px solid #e9ecef !important;
			border-radius: 16px !important;
			font-size: 12px !important;
			font-weight: 500 !important;
			color: #495057 !important;
			text-decoration: none !important;
			white-space: nowrap !important;
		}

			.user-menu-horizontal a:hover,
			.account-links-horizontal a:hover {
				background: #e9ecef !important;
				color: #212529 !important;
			}

	/* ==== GENEL DÜZELTMELER ==== */

	/* Top bar yüksekliği */
	.top-bar {
		min-height: 44px; /* Dropdown için yeterli alan */
		position: relative;
		z-index: 1000;
	}

		/* Container overflow kontrolü */
		.top-bar .container {
			position: relative;
			z-index: 1001;
		}

	/* Body scroll önleme (dropdown açıkken) */
	body.dropdown-open {
		overflow: hidden;
	}

	/* Overlay (dropdown dışına tıklama) */
	.dropdown-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: transparent;
		z-index: 9999;
		display: none;
	}

		.dropdown-overlay.show {
			display: block;
		}
}

/* ==== JAVASCRIPT DESTEĞİ ==== */
/* Bu CSS class'ları JavaScript ile toggle edilebilir */

@media (max-width: 768px) {
	/* Dropdown toggle için class'lar */
	.user-menu-toggle {
		position: relative;
	}

		.user-menu-toggle.active .user-dropdown {
			display: block !important;
			opacity: 1 !important;
			visibility: visible !important;
		}

	/* Click dışında kapatma */
	.dropdown-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9998;
		background: transparent;
	}
}