/**
 * Modern Mobile Navigation Styles
 *
 * @package Shopen
 * Model 1: Off-Canvas Drawer + Sticky Header
 */

:root {
	--shopen-primary: #E76144;
	--shopen-primary-dark: #cc4f33;
	--shopen-text: #1e293b;
	--shopen-text-muted: #64748b;
	--shopen-border: #f1f5f9;
	--shopen-bg-light: #f8fafc;
	--shopen-header-height: 60px;
	--shopen-drawer-width: 320px;
}

/* ===================================================
   1. MASAÜSTÜ KONTROLÜ (Masaüstünde Tamamen Gizle)
   =================================================== */
@media screen and (min-width: 768px) {
	.shopen-mobile-header,
	.shopen-mobile-drawer,
	.shopen-mobile-overlay,
	.shopen-quick-search-dropdown {
		display: none !important;
	}
}

/* ===================================================
   2. MOBİL GÖRÜNÜM KONTROLLERİ (< 768px)
   =================================================== */
@media screen and (max-width: 767px) {
	/* Eski hantal masaüstü header'ı ve sidebar menüsünü mobilde gizle */
	.topheader {
		display: none !important;
	}
	.sidebar > .menu {
		display: none !important;
	}

	/* Scroll kilidi */
	body.shopen-drawer-open {
		overflow: hidden !important;
		touch-action: none;
	}

	/* ==============================================
	   MOBIL STICKY HEADER
	   ============================================== */
	.shopen-mobile-header {
		display: block !important;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 9998;
		background: #ffffff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}

	.shopen-mobile-header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--shopen-header-height);
		padding: 0 14px;
		position: relative;
	}

	/* Hamburger Butonu */
	.shopen-hamburger-btn {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		padding: 0;
		cursor: pointer;
		outline: none;
		-webkit-tap-highlight-color: transparent;
	}

	.hamburger-box {
		width: 22px;
		height: 16px;
		position: relative;
		display: inline-block;
	}

	.hamburger-inner,
	.hamburger-inner::before,
	.hamburger-inner::after {
		width: 22px;
		height: 2px;
		background-color: #1e293b;
		border-radius: 2px;
		position: absolute;
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	.hamburger-inner {
		top: 50%;
		transform: translateY(-50%);
	}

	.hamburger-inner::before,
	.hamburger-inner::after {
		content: "";
		left: 0;
	}

	.hamburger-inner::before {
		top: -7px;
	}

	.hamburger-inner::after {
		bottom: -7px;
	}

	/* Hamburger Aktif Hali */
	.shopen-hamburger-btn.is-active .hamburger-inner {
		background-color: transparent;
	}

	.shopen-hamburger-btn.is-active .hamburger-inner::before {
		transform: translateY(7px) rotate(45deg);
	}

	.shopen-hamburger-btn.is-active .hamburger-inner::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Mobil Logo */
	.shopen-mobile-logo {
		flex: 1;
		text-align: center;
		padding: 0 10px;
		overflow: hidden;
	}

	.shopen-mobile-logo img {
		max-height: 38px;
		width: auto;
		display: inline-block;
		vertical-align: middle;
	}

	.shopen-mobile-logo-text {
		font-size: 20px;
		font-weight: 700;
		color: #1e293b;
		text-decoration: none;
		letter-spacing: -0.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
	}

	/* Sağ Aksiyon İkonları */
	.shopen-mobile-actions {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.shopen-mobile-action-btn {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		color: #1e293b;
		cursor: pointer;
		position: relative;
		text-decoration: none;
		border-radius: 8px;
		transition: background-color 0.2s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.shopen-mobile-action-btn:hover,
	.shopen-mobile-action-btn:active {
		background-color: #f1f5f9;
	}

	.shopen-mobile-action-btn .shopen-icon {
		width: 22px;
		height: 22px;
		stroke-width: 2;
	}

	/* Sepet Sayacı */
	.shopen-cart-count {
		position: absolute;
		top: 3px;
		right: 3px;
		background: var(--shopen-primary);
		color: #ffffff;
		font-size: 11px;
		font-weight: 700;
		min-width: 18px;
		height: 18px;
		line-height: 18px;
		padding: 0 4px;
		border-radius: 9px;
		text-align: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	}

	/* Hızlı Arama Dropdown */
	.shopen-quick-search-dropdown {
		display: none;
		background: #ffffff;
		padding: 12px 14px;
		border-top: 1px solid #f1f5f9;
		border-bottom: 1px solid #e2e8f0;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
	}

	.shopen-quick-search-dropdown.is-open {
		display: block;
		animation: shopenSlideDown 0.25s ease-out;
	}

	.shopen-quick-search-form {
		position: relative;
		display: flex;
		align-items: center;
		margin: 0;
	}

	.shopen-quick-search-form input[type="search"] {
		width: 100%;
		height: 42px;
		padding: 8px 44px 8px 14px;
		border: 1px solid #cbd5e1;
		border-radius: 21px;
		background: #f8fafc;
		font-size: 14px;
		color: #1e293b;
		outline: none;
		box-sizing: border-box;
		transition: border-color 0.2s, background-color 0.2s;
	}

	.shopen-quick-search-form input[type="search"]:focus {
		border-color: var(--shopen-primary);
		background: #ffffff;
	}

	.shopen-quick-search-form button {
		position: absolute;
		right: 4px;
		top: 50%;
		transform: translateY(-50%);
		width: 34px;
		height: 34px;
		background: transparent;
		border: none;
		color: #64748b;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	.shopen-quick-search-form button .shopen-icon {
		width: 18px;
		height: 18px;
	}

	/* ==============================================
	   OFF-CANVAS ÇEKMECE MENÜ (Drawer)
	   ============================================== */
	.shopen-mobile-drawer {
		display: flex !important;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: var(--shopen-drawer-width);
		max-width: 86vw;
		height: 100%;
		background: #ffffff;
		z-index: 100000;
		box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
		transform: translate3d(-100%, 0, 0);
		transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
		overflow: hidden;
		box-sizing: border-box;
	}

	.shopen-mobile-drawer.is-open {
		transform: translate3d(0, 0, 0);
	}

	/* Çekmece Başlığı / Kullanıcı Alanı */
	.shopen-drawer-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 16px;
		background: #1e293b;
		color: #ffffff;
		flex-shrink: 0;
	}

	.shopen-drawer-user {
		display: flex;
		align-items: center;
		gap: 12px;
		overflow: hidden;
	}

	.shopen-user-avatar img {
		border-radius: 50%;
		display: block;
		border: 2px solid rgba(255, 255, 255, 0.2);
	}

	.shopen-user-info {
		display: flex;
		flex-direction: column;
		line-height: 1.3;
	}

	.shopen-user-info .user-greeting {
		font-size: 11px;
		color: #94a3b8;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.shopen-user-info .user-name {
		font-size: 15px;
		color: #ffffff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.shopen-user-info .user-link {
		font-size: 12px;
		color: var(--shopen-primary);
		text-decoration: underline;
		margin-top: 2px;
	}

	.shopen-guest-icon {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
	}

	.shopen-guest-icon svg {
		width: 20px;
		height: 20px;
	}

	.shopen-guest-info {
		display: flex;
		flex-direction: column;
	}

	.shopen-guest-info .guest-title {
		font-size: 11px;
		color: #94a3b8;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.shopen-guest-info .guest-login-link {
		font-size: 14px;
		font-weight: 600;
		color: #ffffff;
		text-decoration: none;
	}

	.shopen-guest-info .guest-login-link:hover {
		color: var(--shopen-primary);
	}

	/* Çekmece Kapatma Butonu */
	.shopen-drawer-close {
		width: 36px;
		height: 36px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.1);
		border: none;
		color: #ffffff;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		transition: background-color 0.2s;
	}

	.shopen-drawer-close:hover,
	.shopen-drawer-close:active {
		background: rgba(255, 255, 255, 0.25);
	}

	.shopen-drawer-close svg {
		width: 20px;
		height: 20px;
	}

	/* Çekmece İçi Arama */
	.shopen-drawer-search {
		padding: 12px 16px;
		background: #f8fafc;
		border-bottom: 1px solid #f1f5f9;
		flex-shrink: 0;
	}

	.drawer-search-form {
		position: relative;
		margin: 0;
	}

	.drawer-search-form input[type="search"] {
		width: 100%;
		height: 38px;
		padding: 6px 36px 6px 12px;
		background: #ffffff;
		border: 1px solid #cbd5e1;
		border-radius: 6px;
		font-size: 13px;
		outline: none;
		box-sizing: border-box;
	}

	.drawer-search-form input[type="search"]:focus {
		border-color: var(--shopen-primary);
	}

	.drawer-search-form button {
		position: absolute;
		right: 6px;
		top: 50%;
		transform: translateY(-50%);
		background: transparent;
		border: none;
		color: #64748b;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		width: 26px;
		height: 26px;
	}

	.drawer-search-form button svg {
		width: 16px;
		height: 16px;
	}

	/* Çekmece Tab Butonları */
	.shopen-drawer-tabs {
		display: flex;
		background: #f1f5f9;
		padding: 4px;
		gap: 4px;
		flex-shrink: 0;
	}

	.shopen-drawer-tab-btn {
		flex: 1;
		padding: 9px 8px;
		font-size: 13px;
		font-weight: 600;
		color: #64748b;
		background: transparent;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		text-align: center;
		transition: all 0.2s ease;
	}

	.shopen-drawer-tab-btn.is-active {
		background: #ffffff;
		color: var(--shopen-primary);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	/* Çekmece Gövdesi (Scroll Edilebilir Alan) */
	.shopen-drawer-body {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 20px;
	}

	.shopen-tab-pane {
		display: none;
	}

	.shopen-tab-pane.is-active {
		display: block;
	}

	/* Nav Listesi & Akordiyon Mimarisi */
	.shopen-mobile-nav-list,
	.shopen-mobile-nav-list ul {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.shopen-mobile-nav-list > li {
		border-bottom: 1px solid #f1f5f9;
	}

	.shopen-nav-item-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.shopen-mobile-nav-list a {
		flex: 1;
		display: block;
		padding: 13px 16px;
		font-size: 14.5px;
		font-weight: 500;
		color: #1e293b !important;
		text-decoration: none !important;
		line-height: 1.4;
		transition: color 0.15s, background-color 0.15s;
	}

	.shopen-mobile-nav-list a:hover,
	.shopen-mobile-nav-list a:active {
		color: var(--shopen-primary) !important;
		background-color: #f8fafc;
	}

	.shopen-mobile-nav-list li.current-menu-item > .shopen-nav-item-wrap > a,
	.shopen-mobile-nav-list li.current_page_item > .shopen-nav-item-wrap > a {
		color: var(--shopen-primary) !important;
		font-weight: 700;
		border-left: 3px solid var(--shopen-primary);
		background-color: rgba(231, 97, 68, 0.06);
	}

	/* Alt Menü Açma/Kapama Chevron Butonu */
	.shopen-submenu-toggle {
		width: 46px;
		height: 46px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		color: #64748b;
		cursor: pointer;
		padding: 0;
		outline: none;
		-webkit-tap-highlight-color: transparent;
		flex-shrink: 0;
	}

	.shopen-submenu-toggle svg {
		width: 18px;
		height: 18px;
		stroke-width: 2.2;
		transition: transform 0.25s ease;
	}

	/* Alt menü açıkken ok ters döner */
	.shopen-submenu-toggle.is-active svg {
		transform: rotate(180deg);
		color: var(--shopen-primary);
	}

	/* Alt Menülerin İlk Durumu (Gizli) */
	.shopen-mobile-nav-list ul.sub-menu,
	.shopen-mobile-nav-list ul.children {
		display: none;
		background: #f8fafc;
		border-top: 1px solid #f1f5f9;
	}

	.shopen-mobile-nav-list ul.sub-menu li a,
	.shopen-mobile-nav-list ul.children li a {
		padding-left: 28px;
		font-size: 13.5px;
		font-weight: 400;
		color: #475569 !important;
	}

	.shopen-mobile-nav-list ul.sub-menu ul.sub-menu li a,
	.shopen-mobile-nav-list ul.children ul.children li a {
		padding-left: 42px;
		font-size: 13px;
	}

	/* Çekmece Alt Bölümü (Footer) */
	.shopen-drawer-footer {
		padding: 16px;
		border-top: 1px solid #f1f5f9;
		background: #ffffff;
		flex-shrink: 0;
	}

	.shopen-drawer-contact {
		font-size: 12.5px;
		color: #64748b;
		margin-bottom: 12px;
		line-height: 1.5;
	}

	.shopen-drawer-contact p {
		margin: 0 0 6px 0;
	}

	.shopen-drawer-social ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.shopen-drawer-social ul li a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: #f1f5f9;
		color: #475569;
		font-size: 14px;
		text-decoration: none;
		transition: all 0.2s ease;
	}

	.shopen-drawer-social ul li a:hover {
		background: var(--shopen-primary);
		color: #ffffff;
	}

	/* ==============================================
	   KARARTMA KATMANI (Backdrop Overlay)
	   ============================================== */
	.shopen-mobile-overlay {
		display: block !important;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(15, 23, 42, 0.45);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		z-index: 99999;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	.shopen-mobile-overlay.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* ==============================================
	   MOBIL STICKY BOTTOM BAR (Başparmak Bölgesi)
	   ============================================== */
	body {
		padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
	}

	.shopen-bottom-nav {
		display: flex !important;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: calc(56px + env(safe-area-inset-bottom, 0px));
		padding: 4px 0 env(safe-area-inset-bottom, 0px);
		background: #ffffff;
		border-top: 1px solid #e2e8f0;
		box-shadow: 0 -3px 12px rgba(15, 23, 42, 0.06);
		z-index: 99990;
		align-items: center;
		justify-content: space-around;
		user-select: none;
		-webkit-user-select: none;
	}

	.shopen-bottom-item {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #64748b;
		text-decoration: none;
		background: transparent;
		border: none;
		padding: 2px 4px;
		margin: 0;
		cursor: pointer;
		font-family: inherit;
		transition: color 0.15s ease, transform 0.1s ease;
		min-width: 44px;
		min-height: 44px;
		-webkit-tap-highlight-color: transparent;
	}

	.shopen-bottom-item:active {
		transform: scale(0.92);
	}

	.shopen-bottom-item svg {
		width: 22px;
		height: 22px;
		margin-bottom: 2px;
		stroke-width: 2;
	}

	.shopen-bottom-item span {
		font-size: 10.5px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: -0.2px;
	}

	.shopen-bottom-item.is-active,
	.shopen-bottom-item:hover {
		color: var(--shopen-primary, #3b82f6);
	}

	.shopen-bottom-item .bottom-icon-wrap {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.shopen-bottom-item .bottom-icon-wrap svg {
		margin-bottom: 0;
	}

	.shopen-bottom-item .shopen-cart-count {
		position: absolute;
		top: -5px;
		right: -10px;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		padding: 0 4px;
		background: #ef4444;
		color: #ffffff;
		border-radius: 9px;
		font-size: 10px;
		font-weight: 700;
		text-align: center;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	}
}

/* Masaüstünde Bottom Nav'ı Gizle */
.shopen-bottom-nav {
	display: none !important;
}

/* Animasyonlar */
@keyframes shopenSlideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}