/* =====================================================================
   MOBİL ALT ÇUBUK — uygulama tarzı gezinme (yalnızca ≤767px)
   Anasayfa · Ürünler · Sepet · Siparişler · WhatsApp
   ===================================================================== */

.uns-ac { display: none; }
.uns-kc { display: none; }

@media (max-width: 767px) {

	/* Tema/Elementor sıfırlaması her yerde border-box değil; yuvarlak sepet
	   düğmesi content-box'ta 52 yerine 58px olup çubuğu uzatıyor ve WhatsApp
	   panelinin çubuğa binmesine yol açıyordu. */
	.uns-ac,
	.uns-ac * { box-sizing: border-box; }

	body.uns-alt-cubuk-var {
		/* Çubuğun gerçek yüksekliği (≈67px, güvenli alan hariç) + pay. */
		--uns-alt-yuk: 68px;
		padding-bottom: calc(var(--uns-alt-yuk) + env(safe-area-inset-bottom, 0px));
	}

	.uns-ac {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		align-items: end;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 940; /* WhatsApp paneli (950) üstte; çekmece/pencereler (≥9999) çok üstte */
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--uns-cizgi, #DCE2EB);
		box-shadow: 0 -6px 22px rgba(12, 26, 46, .08);
	}

	/* Telefonda klavye açıkken çubuk girdi alanının üstüne binmesin. */
	body.uns-klavye .uns-ac { display: none; }

	.uns-ac [hidden] { display: none !important; }

	/* Tema reset.css ve Elementor Kit <button>'lara kendi yazı rengi ve
	   hover zeminini veriyor — bilerek !important (aynı sorun: slider okları,
	   "+" düğmesi). */
	.uns-ac__oge,
	.uns-ac__oge:hover,
	.uns-ac__oge:focus,
	.uns-ac__oge:active {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		gap: 3px;
		min-height: 50px;
		padding: 4px 2px;
		border: 0 !important;
		border-radius: 12px;
		background: transparent !important;
		color: var(--uns-soluk, #64748B) !important;
		font-family: inherit;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.1;
		text-decoration: none !important;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.uns-ac__oge svg { width: 23px; height: 23px; flex-shrink: 0; }

	.uns-ac__oge:active { transform: scale(.94); }

	.uns-ac__oge:focus-visible { outline: 2px solid var(--uns-renk, #1B3A6B); outline-offset: -2px; }

	.uns-ac__oge.is-aktif,
	.uns-ac__oge.is-aktif:hover {
		color: var(--uns-renk, #1B3A6B) !important;
	}

	.uns-ac__oge.is-aktif svg { stroke-width: 2.3; }

	/* Kategori çekmecesi açıkken "Ürünler" sekmesi de vurgulu. */
	body.uns-kc-acik .uns-ac__oge[data-uns-kc-ac] { color: var(--uns-renk, #1B3A6B) !important; }

	/* ---- WhatsApp: yeşil, göze çarpan sekme ----
	   Açık yeşil daire içinde WhatsApp logosu, yeşil etiket; "şu an açık"
	   şube varsa köşede canlı bir nokta. Panel açıkken daire dolu yeşil. */

	.uns-ac__oge--wa,
	.uns-ac__oge--wa:hover,
	.uns-ac__oge--wa:focus,
	.uns-ac__oge--wa.is-aktif,
	.uns-ac__oge--wa.is-aktif:hover {
		color: #12894A !important;
		font-weight: 700;
	}

	/* 32px: sekme yüksekliği ≤ ortadaki Sepet'in (56px) altında kalsın ki
	   çubuk 68px'te kalsın (panel boşluğu ve sayfa alt boşluğu buna göre). */
	.uns-ac__wa-ikon {
		position: relative;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(37, 211, 102, .17);
		color: #12A150;
		transition: background-color .18s ease, color .18s ease;
	}

	.uns-ac__wa-ikon svg { width: 20px; height: 20px; stroke-width: 0; }

	.uns-ac__oge--wa.is-aktif .uns-ac__wa-ikon {
		background: #25D366;
		color: #fff;
	}

	.uns-ac__nokta {
		position: absolute;
		top: -1px;
		right: -1px;
		width: 11px;
		height: 11px;
		border: 2px solid #fff;
		border-radius: 50%;
		background: #25D366;
	}

	.uns-ac__nokta::after {
		content: "";
		position: absolute;
		inset: -4px;
		border-radius: 50%;
		border: 2px solid rgba(37, 211, 102, .55);
		animation: uns-ac-nabiz 2s ease-out infinite;
	}

	@keyframes uns-ac-nabiz {
		0%   { transform: scale(.6); opacity: .9; }
		100% { transform: scale(1.5); opacity: 0; }
	}

	/* ---- Ortadaki Sepet: yükselmiş yuvarlak ---- */

	.uns-ac__oge--sepet { margin-top: -20px; }

	.uns-ac__daire {
		position: relative;
		width: 52px;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 3px solid #fff;
		border-radius: 50%;
		background: var(--uns-renk, #1B3A6B);
		color: #fff;
		box-shadow: 0 6px 16px rgba(27, 58, 107, .35);
	}

	.uns-ac__daire svg { width: 23px; height: 23px; }

	.uns-ac__rozet {
		position: absolute;
		top: -7px;
		right: -7px;
		min-width: 21px;
		height: 21px;
		padding: 0 5px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 2px solid #fff;
		border-radius: 999px;
		background: var(--uns-vurgu, #B8683F);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
	}

	/* ---- Eski yüzen düğmeler: yalnızca çubuk olan sayfalarda ---- */

	body.uns-alt-cubuk-var .uns-sepet-dugme,
	body.uns-alt-cubuk-var .uns-wa__dugme { display: none !important; }

	/* WhatsApp paneli (şube listesi) çubuğun hemen üstünden açılsın.
	   .uns-wa kapsayıcısı panelin atası olduğu için gizlenmiyor, yalnızca
	   düğmesi. Mevcut "body:has(.uns-sepet-dugme…) .uns-wa { bottom: 92px }"
	   kuralından daha güçlü olsun diye !important. */
	body.uns-alt-cubuk-var .uns-wa {
		left: 12px !important;
		right: 12px !important;
		bottom: calc(var(--uns-alt-yuk) + 12px + env(safe-area-inset-bottom, 0px)) !important;
		align-items: stretch;
	}

	/* Panel, site başlığı ile alt çubuk arasına SIĞMALI: eskiden yüksekliği
	   serbestti, uzun şube listesinde üstü (başlık + kapat düğmesi) sabit
	   site başlığının altında kalıyordu. Şimdi sütun düzeni: başlık ve alt
	   not sabit, şube listesi kayıyor. 176px = mobil başlık (logo + teslimat şeridi ≈ 131px) +
	   (giriş yapmış yönetici için) yönetim çubuğu 46px, kenarlardan pay dahil. */
	body.uns-alt-cubuk-var .uns-wa__panel {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: none;
		max-height: calc(100vh - var(--uns-alt-yuk) - 24px - 176px);
		max-height: calc(100dvh - var(--uns-alt-yuk) - 24px - 176px);
		transform-origin: bottom center;
	}

	/* display:flex, taban CSS'teki .uns-wa__panel[hidden]{display:none}
	   kuralını ezer — kapalı panel görünür kalmasın. */
	body.uns-alt-cubuk-var .uns-wa__panel[hidden] { display: none; }

	body.uns-alt-cubuk-var .uns-wa__ust,
	body.uns-alt-cubuk-var .uns-wa__alt { flex-shrink: 0; }

	body.uns-alt-cubuk-var .uns-wa__govde {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* Klavye açıkken (arama kutusuna dokunulduysa) çubuk gizli — panel de
	   aşağı insin, havada boşlukla durmasın. */
	body.uns-klavye.uns-alt-cubuk-var .uns-wa { bottom: 12px !important; }

	/* ================================================================
	   KATEGORİ ÇEKMECESİ — "Ürünler" sekmesi, soldan açılır
	   ================================================================ */

	body.uns-kc-acik { overflow: hidden; }

	.uns-kc {
		display: block;
		position: fixed;
		inset: 0;
		/* Alt çubuk (940) ve WhatsApp (950) üstünde. WordPress yönetim çubuğu
		   (z-index 99999) giriş yapmış yöneticide sayfanın en üstündeyken
		   çekmecenin başlığını/kapat düğmesini kapatıyordu — bu yüzden onun
		   da üstünde (sepet çekmecesi 99998 ile aynı anda açık olmaz). */
		z-index: 100000;
		visibility: hidden;
		pointer-events: none;
		transition: visibility 0s linear .28s;
	}

	.uns-kc.is-acik {
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	.uns-kc__perde {
		position: absolute;
		inset: 0;
		background: rgba(12, 26, 46, .5);
		opacity: 0;
		transition: opacity .28s ease;
	}

	.uns-kc.is-acik .uns-kc__perde { opacity: 1; }

	.uns-kc__panel {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: min(86vw, 340px);
		background: #fff;
		box-shadow: 8px 0 32px rgba(12, 26, 46, .22);
		transform: translateX(-100%);
		transition: transform .28s cubic-bezier(.4, 0, .2, 1);
		padding-top: env(safe-area-inset-top, 0px);
	}

	.uns-kc.is-acik .uns-kc__panel { transform: translateX(0); }

	.uns-kc__ust {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		padding: 16px 16px 14px 20px;
		border-bottom: 1px solid var(--uns-cizgi, #DCE2EB);
	}

	.uns-kc__ust h2 {
		margin: 0;
		font-size: 19px;
		font-weight: 700;
		color: var(--uns-metin, #141A22);
	}

	/* <button> ve <a> için tema/Kit renk ve hover sızıntısına karşı
	   bilerek !important (bkz. alt çubuk düğmeleri). */
	.uns-kc__kapat,
	.uns-kc__kapat:hover,
	.uns-kc__kapat:focus {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0 !important;
		border-radius: 50%;
		background: var(--uns-yumusak, #F4F1ED) !important;
		color: var(--uns-metin, #141A22) !important;
		cursor: pointer;
	}

	.uns-kc__liste {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 10px 12px calc(20px + env(safe-area-inset-bottom, 0px));
	}

	.uns-kc__liste a,
	.uns-kc__liste a:hover,
	.uns-kc__liste a:focus { text-decoration: none !important; }

	.uns-kc__tumu,
	.uns-kc__tumu:hover {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8px;
		padding: 13px 14px;
		border-radius: 12px;
		background: var(--uns-metin, #141A22);
		color: #fff !important;
		font-size: 14.5px;
		font-weight: 700;
	}

	.uns-kc__satir { display: flex; align-items: stretch; }

	.uns-kc__oge,
	.uns-kc__oge:hover,
	.uns-kc__oge:focus {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		align-items: center;
		gap: 12px;
		padding: 9px 8px;
		border-radius: 12px;
		color: var(--uns-metin, #141A22) !important;
	}

	.uns-kc__oge:active { background: var(--uns-yumusak, #F4F1ED); }

	.uns-kc__resim {
		flex-shrink: 0;
		width: 46px;
		height: 46px;
		border-radius: 50%;
		background: var(--uns-yumusak, #F4F1ED) center / cover no-repeat;
		border: 1px solid var(--uns-cizgi, #DCE2EB);
	}

	.uns-kc__ad {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.25;
	}

	.uns-kc__adet {
		flex-shrink: 0;
		min-width: 24px;
		padding: 2px 8px;
		border-radius: 999px;
		background: var(--uns-yumusak, #F4F1ED);
		color: var(--uns-soluk, #64748B);
		font-size: 12px;
		font-weight: 600;
		text-align: center;
	}

	/* Alt kategorileri aç/kapa oku — adın kendisi kategori sayfasına gider. */
	.uns-kc__ac,
	.uns-kc__ac:hover,
	.uns-kc__ac:focus {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 44px;
		padding: 0;
		border: 0 !important;
		border-radius: 12px;
		background: transparent !important;
		color: var(--uns-soluk, #64748B) !important;
		cursor: pointer;
	}

	.uns-kc__ac svg { transition: transform .2s ease; }
	.uns-kc__ac[aria-expanded="true"] svg { transform: rotate(180deg); }
	.uns-kc__ac[aria-expanded="true"] { color: var(--uns-renk, #1B3A6B) !important; }

	.uns-kc__alt {
		margin: 0 0 6px 66px;
		padding-left: 12px;
		border-left: 2px solid var(--uns-cizgi, #DCE2EB);
	}

	.uns-kc__alt[hidden] { display: none; }

	.uns-kc__alt-oge,
	.uns-kc__alt-oge:hover,
	.uns-kc__alt-oge:focus {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 10px 6px;
		color: var(--uns-metin, #141A22) !important;
		font-size: 14px;
		font-weight: 500;
	}

	.uns-kc__alt-oge:active { background: var(--uns-yumusak, #F4F1ED); border-radius: 8px; }

	/* Çerez bildirimi çubuğun altında kalmasın. */
	body.uns-alt-cubuk-var .uns-cerez {
		bottom: calc(var(--uns-alt-yuk) + 12px + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.uns-ac__oge { transition: none; }
	.uns-ac__oge:active { transform: none; }
	.uns-kc, .uns-kc__perde, .uns-kc__panel, .uns-kc__ac svg { transition: none !important; }
	.uns-ac__nokta::after { animation: none; display: none; }
}