/*
 * ÇandName CSS modülü: Mobil alt menü
 * Telefon ve tablette ekranın altına sabitlenen menü (inc/mobile-nav.php).
 * Bu dosya diğer CSS dosyalarından bağımsızdır; hata yalnızca bu alanı etkiler.
 * Yükleme sırası: inc/assets.php
 */

.mobile-nav { display: none; }

@media (max-width: 959px) {
	.mobile-nav {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
		background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
		/* No env(safe-area-inset-bottom) padding on purpose: the viewport has no viewport-fit=cover, so iOS reports 0 anyway, but Android Firefox/Chrome (edge-to-edge) report the system navigation bar height and it showed up as an empty strip under the icons once the browser toolbar changed while scrolling up. */
		-webkit-transform: translateZ(0); transform: translateZ(0);
	}
	/* While the browser toolbar slides in/out the bar can lift a little; this paints the bar's own colour below it so no gap shows. */
	.mobile-nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 240px; background: inherit; pointer-events: none; }
	.mobile-nav .menu { display: flex; margin: 0; padding: 0; list-style: none; }
	.mobile-nav li { flex: 1 1 0; min-width: 0; }
	.mobile-nav a, .mobile-nav button {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		width: 100%; min-height: 56px; padding: 6px 4px; color: var(--body); background: none; border: 0; font-family: inherit; cursor: pointer;
		font-size: calc(11px * var(--fs, 1)); font-weight: 500; line-height: 1.2; text-align: center;
	}
	.mobile-nav a:hover, .mobile-nav a:focus-visible, .mobile-nav button:hover, .mobile-nav button:focus-visible,
	.mobile-nav .current-menu-item > a, .mobile-nav a[aria-current="page"] { color: var(--green); }
	/* Every item: same icon box, same size, text underneath; items share the width equally. */
	.mobile-nav .menu-icon, .mobile-nav .nav-ico, .mobile-nav i, .mobile-nav svg { display: block; flex: none; margin: 0; width: auto; height: 20px; line-height: 20px; text-align: center; font-size: calc(19px * var(--fs, 1)); }
	.mobile-nav svg { width: 20px; }
	.mobile-nav .menu-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	body.has-mobile-nav { padding-bottom: 57px; }
}

/* Right-side drawer: the primary menu on phones/tablets (the green desktop bar is hidden there). */
.mobile-drawer, .mobile-drawer-backdrop { display: none; }
@media (max-width: 959px) {
	body.has-mobile-nav .nav-bar { display: none; }
	.mobile-drawer-backdrop { display: block; position: fixed; top: var(--drawer-top, 0px); left: 0; right: 0; bottom: var(--drawer-bottom, 56px); z-index: 150; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity .25s; }
	.mobile-drawer-backdrop.is-visible { opacity: 1; }
	.mobile-drawer-backdrop[hidden] { display: none; }
	.mobile-drawer {
		display: flex; flex-direction: column; position: fixed; top: var(--drawer-top, 0px); right: 0; bottom: var(--drawer-bottom, 56px); z-index: 160;
		width: min(86vw, 340px); background: var(--surface); color: var(--ink); box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
		transform: translateX(100%); visibility: hidden; transition: transform .28s ease, visibility .28s;
	}
	.mobile-drawer.is-open { transform: none; visibility: visible; }
	.mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 20px; background: var(--green); color: #fff; }
	.mobile-drawer-title { font-weight: 600; }
	.mobile-drawer-close { width: 48px; height: 48px; border: 0; background: transparent; color: #fff; font-size: calc(34px * var(--fs, 1)); line-height: 1; cursor: pointer; }
	.mobile-drawer-body { flex: 1; overflow-y: auto; padding: 8px 0 24px; overscroll-behavior: contain; }
	.mobile-drawer .menu, .mobile-drawer ul { list-style: none; margin: 0; padding: 0; }
	.mobile-drawer .menu > li > a, .drawer-sections summary { display: block; padding: 14px 20px; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); }
	.mobile-drawer .sub-menu { display: block; background: var(--mint); }
	.mobile-drawer .sub-menu .sub-menu a { padding-left: 52px; }
	.mobile-drawer .sub-menu a, .drawer-sections .children a { display: block; padding: 11px 20px 11px 36px; color: var(--body); font-size: calc(13px * var(--fs, 1)); }
	.mobile-drawer .current-menu-item > a, .mobile-drawer .current-cat > a { color: var(--green); }
	.drawer-sections summary { cursor: pointer; list-style: none; }
	.drawer-sections summary::-webkit-details-marker { display: none; }
	.drawer-sections summary::after { content: " \25BE"; float: right; }
	.drawer-sections[open] summary::after { content: " \25B4"; }
	.drawer-sections > ul > li > a { display: block; padding: 11px 20px; color: var(--ink); border-bottom: 1px solid var(--line); }
	.drawer-sections .children { background: var(--mint); }
	.mobile-drawer .drawer-cta { display: flex; justify-content: center; margin: 20px; }
	.mobile-drawer .drawer-quick { border-bottom: 6px solid var(--mint); margin-bottom: 4px; }
	.mobile-drawer .drawer-quick a { display: flex; align-items: center; gap: 12px; padding: 14px 20px; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); }
	.mobile-drawer .drawer-quick li:last-child a { border-bottom: 0; }
	.mobile-drawer .drawer-quick svg, .mobile-drawer .drawer-quick i { flex: none; width: 20px; text-align: center; color: var(--green); }
	.mobile-drawer .drawer-quick .current-menu-item > a { color: var(--green); }
	html.drawer-open, html.drawer-open body { overflow: hidden; }
}

/* Full-screen search overlay: translucent, blurred backdrop (the site shows through faintly); the box itself is opaque. */
.search-overlay[hidden] { display: none; }
.search-overlay {
	position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
	background: rgba(14, 28, 20, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.search-overlay-body { flex: 1; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; padding: 12vh var(--gutter, 16px) 24px; }
.search-overlay-panel { width: 100%; max-width: 640px; }
.search-overlay-close {
	align-self: flex-end; margin: 8px 8px 0 0; width: 48px; height: 48px; border: 0; background: transparent;
	font-size: calc(36px * var(--fs, 1)); line-height: 1; color: #fff; cursor: pointer;
}
.search-overlay .search { width: 100%; max-width: none; background: var(--surface); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); }
.search-suggest { margin-top: 10px; background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); }
.search-suggest[hidden] { display: none; }
.search-suggest-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px 6px; font-size: calc(12px * var(--fs, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.search-suggest-head button { border: 0; background: none; padding: 4px 0; font: inherit; text-transform: none; letter-spacing: 0; color: var(--green); cursor: pointer; }
.search-suggest ul { list-style: none; margin: 0; padding: 0 0 6px; }
.search-suggest a { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 11px 18px; color: var(--ink); }
.search-suggest a:hover, .search-suggest a:focus-visible, .search-suggest a.is-selected { background: var(--mint); color: var(--ink); outline: 0; }
.search-suggest .s-cat { flex: none; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.search-suggest .s-none { padding: 14px 18px; color: var(--body); }
html.search-open, html.search-open body { overflow: hidden; }

@media print {
	.search-overlay { display: none; }
	.mobile-nav { display: none; }
}