/* Atolyeman commerce header (inc/header.php) — replaces the Blocksy header.
   All color from tokens.css so the header morphs per audience segment. */

/* The hand-coded header supersedes Blocksy's. */
#header,
.ct-header {
	display: none !important;
}

.at-header {
	background: var(--at-surface);
	border-bottom: 1px solid var(--at-border);
}

/* ---- Row 1: brand | search | actions ---- */
.at-header__main {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--at-space-8);
	padding-block: var(--at-space-4);
}
.at-header__brand { display: inline-flex; align-items: center; text-decoration: none; }
.at-header__logo { max-height: 56px; width: auto; display: block; }
.at-header__brand-text {
	font-family: var(--at-font-display);
	font-size: var(--at-fs-500);
	color: var(--at-text);
}

/* Rectangular search with a square dark button (Flying Tiger reference). */
.at-header__search {
	display: flex;
	align-items: stretch;
	max-width: 640px;
	width: 100%;
	justify-self: center;
	background: var(--at-surface);
	border: 1px solid var(--at-text);
	border-radius: var(--at-radius-sm);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.at-header__search:focus-within {
	border-color: var(--at-accent);
	box-shadow: 0 0 0 1px var(--at-accent);
}
.at-header__search input[type="search"] {
	flex: 1;
	border: 0;
	background: transparent;
	padding: var(--at-space-3) var(--at-space-4);
	font-size: var(--at-fs-200);
	color: var(--at-text);
	outline: none;
	min-width: 0;
}
.at-header__search input[type="search"]::placeholder { color: var(--at-text-muted); }
.at-header__search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	border: 0;
	border-radius: 0;
	background: var(--at-text);
	color: var(--at-bg);
	cursor: pointer;
	flex: none;
	transition: background .18s ease;
}
.at-header__search button:hover { background: var(--at-accent); color: var(--at-on-accent); }
.at-header__search button svg { width: 18px; height: 18px; flex: none; }
.at-header__action svg { width: 22px; height: 22px; flex: none; }

.at-header__actions {
	display: flex;
	align-items: center;
	gap: var(--at-space-6);
}
.at-header__action {
	display: inline-flex;
	align-items: center;
	gap: var(--at-space-2);
	color: var(--at-text);
	text-decoration: none;
	font-size: var(--at-fs-200);
	font-weight: 600;
	transition: color .18s ease;
}
.at-header__action:hover { color: var(--at-accent); }
.at-header__cart-icon { position: relative; display: inline-flex; }
.at-header__cart-count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--at-accent);
	color: var(--at-on-accent);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* ---- Language selector ---- */
.at-header__lang { position: relative; }
.at-header__lang-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--at-space-1);
	background: transparent;
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-sm);
	padding: var(--at-space-2) var(--at-space-3);
	font-size: var(--at-fs-100);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--at-text);
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}
.at-header__lang-btn:hover { border-color: var(--at-accent); color: var(--at-accent); }
.at-header__lang-code { font-weight: 600; font-size: 13px; letter-spacing: .03em; }
.at-header__lang-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--at-surface);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-sm);
	box-shadow: var(--at-shadow);
	padding: var(--at-space-2);
	z-index: 60;
}
.at-header__lang-item {
	display: block;
	padding: var(--at-space-2) var(--at-space-3);
	border-radius: var(--at-radius-sm);
	font-size: var(--at-fs-100);
	white-space: nowrap;
}
.at-header__lang-item.is-active { font-weight: 700; background: var(--at-surface-2); }
.at-header__lang-item.is-soon { color: var(--at-text-muted); cursor: not-allowed; user-select: none; pointer-events: none; }
.at-header__lang-item em { font-style: normal; font-size: 11px; }
.at-header__lang-flag {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #e30a17; /* Turkish flag red — intentionally NOT segment-morphed */
	position: relative;
	display: inline-block;
	overflow: hidden;
	flex: none;
}
.at-header__lang-flag::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	box-shadow: -2px 0 0 0 #fff;
}

/* ---- Row 2: category nav band ---- */
.at-header__nav {
	border-top: 1px solid var(--at-border);
	background: var(--at-surface);
}
.at-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--at-space-8);
	overflow-x: auto;
	scrollbar-width: none;
}
.at-header__menu::-webkit-scrollbar { display: none; }
/* Sentence-case, larger items (Flying Tiger reference — not small caps). */
.at-header__menu a {
	display: inline-block;
	padding-block: var(--at-space-3);
	color: var(--at-text);
	text-decoration: none;
	font-size: var(--at-fs-300);
	font-weight: 600;
	white-space: nowrap;
	position: relative;
	transition: color .18s ease;
}
/* Accent the last nav item (FT's "İlham kaynağı" pattern). */
.at-header__menu li:last-child a { color: var(--at-accent); }
.at-header__menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--at-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}
.at-header__menu a:hover { color: var(--at-accent); }
.at-header__menu a:hover::after,
.at-header__menu .current-menu-item a::after { transform: scaleX(1); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.at-header__main {
		grid-template-columns: auto auto;
		grid-template-areas: "brand actions" "search search";
	}
	.at-header__brand { grid-area: brand; }
	.at-header__actions { grid-area: actions; justify-self: end; }
	.at-header__search { grid-area: search; max-width: none; }
	.at-header__main { gap: var(--at-space-4); }
	/* The category band scrolls horizontally here; fade its trailing edge so a
	   clipped item reads as "there is more", not as a layout bug. */
	.at-header__menu {
		-webkit-mask-image: linear-gradient(to right, #000 86%, transparent);
		mask-image: linear-gradient(to right, #000 86%, transparent);
	}
}
@media (max-width: 560px) {
	.at-header__action-label { display: none; }
	.at-header__logo { max-height: 44px; }
	/* D6.2: label-less actions collapse to a bare 22px <svg>. Pad them out to a
	   44px touch target rather than leaving a pinpoint hit area. */
	.at-header__action {
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}
	.at-header__actions { gap: var(--at-space-2); }
	/* Header + topbar + nav band ate ~226px before any content on a phone. */
	.at-header__main { padding-block: var(--at-space-3); }
	.at-header__menu { gap: var(--at-space-6); }
}