/*
 * Mobile / tablet responsive overrides.
 * Everything here is wrapped in max-width media queries so the desktop
 * (>960px) experience is byte-for-byte unaffected -- this file only ever
 * ADDS rules that apply below the breakpoints.
 */

/* ===================== Tablet & down (<=960px) ===================== */
@media (max-width: 960px) {

	/* ---- global page wrapper: fixed 943px -> fluid ---- */
	.main{
		width:100% !important;
		max-width:100%;
	}
	body{ min-width:0 !important; }
	#tail-left, #tail-right{ display:none !important; }

	/* the nested nested-corner-radius nested wrapper stack: let it breathe,
	   drop the pixel-fixed side/corner sprite backgrounds so nothing is
	   forced to a fixed width by them */
	.main-left, .main-right, .main-left-top, .main-right-top{
		background:none !important;
	}
	.main-indent{ padding:0 !important; }
	.main-inner{ padding:0 12px !important; }
	.indent1{ padding:0 12px !important; }

	/* ---- header: fixed-height decorative background + absolute logo ---- */
	.header{
		height:auto !important;
		background:#0A3E71 !important;
		display:flex !important;
		flex-direction:column !important;
		padding:14px 0 !important;
	}
	.header .fleft, .header .fright{ width:auto !important; float:none !important; }
	.header .fleft{ order:1; padding:0 16px; }
	.header .fright{ order:2; }
	.header h1, .header #logo{
		position:static !important;
		margin:0 !important;
		display:block !important;
	}
	.header h1 a, .header #logo a{ position:static !important; display:inline-block !important; }
	.header #logo img{ max-height:52px; width:auto; }
	.extra-img{ display:none !important; }

	/* ---- top nav: sprite-icon nav -> simple stacked/wrapped text nav ---- */
	.row-top-menu{ width:100% !important; }
	.row-top-menu ul.menu-nav{
		margin:0 !important;
		padding:0 !important;
		display:flex !important;
		flex-wrap:wrap !important;
		justify-content:center !important;
	}
	.row-top-menu ul.menu-nav li{ float:none !important; }
	.row-top-menu ul.menu-nav li a{ float:none !important; }
	.row-top-menu ul.menu-nav li a span{
		float:none !important;
		display:block !important;
		padding:12px 14px !important;
		font-size:13px !important;
		background:none !important;
	}
	.row-top-menu ul.menu-nav li a:hover span,
	.row-top-menu ul.menu-nav li.active a span{
		background:#0D487E !important;
	}

	/* ---- dealer-logo strip image above the slider: fixed-width raw <img> ---- */
	.flash img{ max-width:100% !important; height:auto !important; }
	/* .flash has a desktop-only fixed height:431px sized for the 280px-tall
	   slider -- on mobile the slider is much shorter (see below), so this
	   left a large empty gap underneath it. */
	.flash{ height:auto !important; }

	/* ---- easySlider: the slide/li pixel size is set dynamically by the
	   inline init script (functions.php) from the real rendered container
	   width at load time, so no width/height override is needed here --
	   only cap the outer box so it can never force a page-wide scrollbar,
	   and keep the image filling whatever size the JS gives its <li>. ---- */
	#slider{ max-width:100% !important; }
	#slider li img{ width:100%; height:100%; object-fit:cover; display:block; }
	/* prevBtn/nextBtn are jQuery-inserted as SIBLINGS right after #slider
	   (easySlider does `$(obj).after(html)`), both children of .moduletable
	   -- so .moduletable (their real common ancestor), not #slider itself,
	   needs position:relative for "bottom:8px" to anchor to the slider box
	   instead of walking all the way up to .main (the whole page). */
	.moduletable{ position:relative !important; }
	#prevBtn, #nextBtn, #slider1prev, #slider1next{
		top:auto !important;
		bottom:8px !important;
	}
	#prevBtn, #slider1prev{ left:8px !important; }
	#nextBtn, #slider1next{ left:auto !important; right:8px !important; }

	/* ---- Ürünler layout: left category sidebar + right content ---- */
	#left{
		float:none !important;
		width:100% !important;
		margin:0 0 20px 0 !important;
	}
	#container{ float:none !important; width:100% !important; }
	.left-indent{ padding:0 !important; }

	/* ---- homepage: Kurumsal intro photo+text ---- */
	.tk-kurumsal-flex{
		flex-direction:column !important;
		gap:20px !important;
	}
	.tk-kurumsal-photo{ flex:none !important; width:100% !important; }

	/* ---- homepage: 3-column category table -> 2 columns ---- */
	.tk-cats-table, .tk-cats-table tbody, .tk-cats-table tr{
		display:block !important;
		width:100% !important;
	}
	.tk-cat-cell{
		display:inline-block !important;
		width:calc(50% - 8px) !important;
		vertical-align:top !important;
		box-sizing:border-box;
		padding:0 4px 12px 4px !important;
	}
	.tk-cat-img{ height:150px !important; }

	/* ---- homepage: 4-column stats strip -> 2x2 ---- */
	.tk-stats-flex{
		flex-wrap:wrap !important;
	}
	.tk-stats-item{
		flex:0 0 50% !important;
		width:50% !important;
		box-sizing:border-box;
		margin-bottom:20px;
	}
	.tk-stats-item:nth-child(3){ border-left:none !important; }

	/* ---- homepage: contact CTA bar ---- */
	.tk-cta-flex{ gap:28px !important; }

	/* ---- footer ---- */
	.footer-row .fleft, .footer-row .fright{
		width:100% !important;
		float:none !important;
		text-align:center !important;
	}
	.footer-row .fleft ul{ padding:12px 0 !important; text-align:center !important; }
	.footer-row .fleft ul li{ float:none !important; display:inline-block !important; }
	.row-bottom-shadow{ background:none !important; height:auto !important; }
	.row-bottom-shadow span, .row-bottom-shadow span span{ background:none !important; padding:0 !important; }
}

/* ===================== Phones (<=600px) ===================== */
@media (max-width: 600px) {

	/* content padding a little tighter on small phones */
	.main-inner, .indent1{ padding:0 10px !important; }

	/* homepage sections: reduce the 920px-target inline padding via the
	   shared .tk-section hook (the wrapper itself is already max-width:100%) */
	.tk-section{ padding-left:0 !important; padding-right:0 !important; }

	/* category grid: 1 per row on real phones */
	.tk-cat-cell{
		width:100% !important;
		display:block !important;
		padding:0 0 14px 0 !important;
	}
	.tk-cat-img{ height:190px !important; }

	/* stats strip: 1 per row, drop hairline dividers (they were left-borders
	   meant for a horizontal row) */
	.tk-stats-item{
		flex:0 0 100% !important;
		width:100% !important;
		border-left:none !important;
		padding:0 !important;
	}

	/* typography: bring the biggest headings down a notch so they don't
	   wrap awkwardly on narrow screens */
	.tk-section h2{ font-size:22px !important; }

	/* article/product page images and framed photos: never overflow */
	.article-text-indent img,
	.article-text-indent table{ max-width:100% !important; height:auto !important; }
	.article-text-indent table{ display:block; overflow-x:auto; }

	/* product page: 2-col variant/spec cards -> single column on real phones */
	.tk-variant-grid{
		grid-template-columns:1fr !important;
	}

	/* İletişim: legacy raw-HTML contact table has one outer row laid out as
	   [address+contact info table] | [Google Maps iframe, rowspan, aligned
	   right] side by side. On mobile that needs to stack -- address info on
	   top, map below -- not just shrink+scroll in place. :has() lets us grab
	   specifically the ROW that contains the iframe (leaving the small
	   inner icon+label rows for address/e-mail/phone/fax alone) and stack
	   its two <td>s vertically. */
	#component-contact tr:has(iframe){
		display:block !important;
	}
	#component-contact tr:has(iframe) > td{
		display:block !important;
		width:100% !important;
		text-align:left !important;
	}
	#component-contact iframe{
		width:100% !important;
		max-width:100% !important;
		height:280px !important;
		margin-top:16px;
	}
	/* fallback for browsers without :has() support: at least keep the
	   component from blowing out the page width. */
	#component-contact{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
	#component-contact > table{ width:100% !important; }
}