/*
Theme Name: Akçabez
Theme URI: https://akcabez.com
Description: Storefront child theme for Akça Bez — industrial cleaning cloths, B2B. Business/informational site, not a shop. Implements "Akca Bez Magaza.dc.html" (Claude Design 46e7f280). Never edit the Storefront parent; it is overwritten on update.
Author: Yunus Akça
Template: storefront
Version: 0.16.1
Text Domain: akcabez
*/

/* ==========================================================================
   Fonts — self-hosted. Google's CDN saw every visitor's IP (KVKK) and cost two
   extra origins on first paint. These are variable fonts subset to the Turkish
   glyphs this site renders: 2 files, 29 KB, down from ~170 KB over 8 files.

   ! A character outside that subset falls back to system-ui silently. If new
   copy adds one, regenerate — the command is in memory/seo.md item 10.
   ========================================================================== */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700 800;
	font-display: swap;
	src: url('/assets/fonts/manrope-var.woff2') format('woff2');
}
@font-face {
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/assets/fonts/public-sans-var.woff2') format('woff2');
}

/* ==========================================================================
   Tokens — from the design file, not invented here.

   Warm off-white ground, one deep teal for structure, orange reserved for the
   things a buyer clicks. Do not add colours: the product photography is meant
   to be the only other colour on the page.
   ========================================================================== */

:root {
	--ak-bg:          #F6F4EF;  /* page */
	--ak-white:       #FFFFFF;
	--ak-surface:     #F1EEE7;  /* hover fills, wells */
	--ak-surface-2:   #F0ECE3;

	--ak-ink:         #191A17;  /* headings, prices */
	--ak-ink-2:       #3A3A34;  /* nav, body strong */
	--ak-ink-3:       #57544B;  /* body */
	--ak-muted:       #8A867B;  /* labels, meta */
	--ak-muted-2:     #7A776D;

	--ak-line:        #E6E1D7;  /* borders */
	--ak-line-2:      #D9D4C8;  /* input borders */
	--ak-line-3:      #F0ECE3;  /* hairlines */

	--ak-brand:       #0E4C48;  /* structure: header marks, footer, headings */
	--ak-brand-tint:  #E4F0ED;  /* badges */
	--ak-brand-soft:  #B9CFCA;
	--ak-brand-fg:    #EAF3F1;  /* text on brand */
	--ak-brand-icon:  #7FD1C4;  /* icons on brand */

	--ak-accent:      #E4692A;  /* ACTIONS ONLY — cart, buy, quote */
	--ak-accent-dark: #C9551C;

	--ak-wa:          #25D366;
	--ak-wa-dark:     #20BD5A;
	--ak-wa-fg:       #0A3A2A;

	--ak-display: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
	--ak-text:    'Public Sans', system-ui, -apple-system, "Segoe UI", sans-serif;

	--ak-r:    10px;
	--ak-r-sm: 9px;
	--ak-r-lg: 14px;
	--ak-wrap: 1200px;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background-color: var(--ak-bg);
	color: var(--ak-ink);
	font-family: var(--ak-text);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ak-display);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ak-ink);
	text-wrap: balance;
}

a { color: var(--ak-brand); }
a:hover { color: var(--ak-accent); }

input:focus, select:focus, textarea:focus {
	outline: 2px solid var(--ak-brand);
	outline-offset: 1px;
}

/* Keep a focus ring for keyboard users, but drop the one a mouse click leaves
   behind — clicking a button was parking a jarring outline on it. */
:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible,
.button:focus-visible, [type="submit"]:focus-visible {
	outline: 2px solid var(--ak-brand);
	outline-offset: 2px;
}

/* The design centres everything on a 1200px column. Storefront's .col-full is
   1170px and its own width — override rather than fight it per component. */
.ak-wrap,
.col-full {
	max-width: var(--ak-wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* ==========================================================================
   Top bar
   ========================================================================== */

.ak-topbar {
	background-color: var(--ak-brand);
	color: var(--ak-brand-fg);
	font-size: 13px;
}

.ak-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	align-items: center;
	justify-content: space-between;
	padding-top: 9px;
	padding-bottom: 9px;
}

.ak-topbar__claim {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ak-topbar__claim .ak-icon { color: var(--ak-brand-icon); }

.ak-topbar__right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ak-topbar__phone {
	display: flex;
	align-items: center;
	gap: 7px;
	color: inherit;
}

.ak-topbar__phone:hover { color: var(--ak-white); }
.ak-topbar__phone .ak-icon { color: var(--ak-brand-icon); }

.ak-topbar__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--ak-r-sm);
	color: inherit;
}

.ak-topbar__social:hover {
	color: var(--ak-white);
	background-color: rgba(255, 255, 255, .12);
}

.ak-wa {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--ak-wa);
	color: var(--ak-wa-fg);
	font-family: var(--ak-display);
	font-weight: 700;
	font-size: 12.5px;
	padding: 5px 12px;
	border-radius: 999px;
}

.ak-wa:hover {
	background-color: var(--ak-wa-dark);
	color: var(--ak-wa-fg);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: var(--ak-white);
	border-bottom: 1px solid var(--ak-line);
	padding: 0;
	margin: 0;
}

.ak-header__row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 28px;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* Brand */
.ak-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
}

.ak-brand:hover { color: inherit; }

/* The full wordmark (mark + name + tagline as one SVG lockup). Height-driven so
   the aspect ratio holds; the header row's flex-wrap handles narrow viewports. */
.ak-brand__logo {
	display: block;
	height: 56px;
	width: auto;
}
@media (max-width: 480px) {
	.ak-brand__logo { height: 44px; }
}

/* Actions */
.ak-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Hamburger toggle — hidden on desktop, shown at the mobile breakpoint below. */
.ak-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	flex-shrink: 0;
	border: none;
	background: transparent;
	border-radius: var(--ak-r-sm);
}

.ak-menu-toggle:hover { background-color: var(--ak-surface); }

.ak-menu-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--ak-ink-2);
	border-radius: 1px;
	transition: transform .2s ease, opacity .2s ease;
}

.ak-menu-toggle.is-open .ak-menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ak-menu-toggle.is-open .ak-menu-toggle__bar:nth-child(2) { opacity: 0; }
.ak-menu-toggle.is-open .ak-menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Category navigation
   ========================================================================== */

.ak-nav { border-top: 1px solid var(--ak-line-3); }

.ak-nav__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	padding-top: 0;
	padding-bottom: 0;
}

.ak-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ak-nav__list li { margin: 0; }

.ak-nav__list a {
	display: block;
	font-family: var(--ak-display);
	font-weight: 700;
	font-size: 14px;
	color: var(--ak-ink-2);
	padding: 14px;
}

.ak-nav__list a:hover,
.ak-nav__list .current-menu-item > a {
	color: var(--ak-brand);
}

.ak-nav__quote {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--ak-display);
	font-weight: 700;
	font-size: 14px;
	color: var(--ak-accent);
	padding: 14px;
}

.ak-nav__quote:hover { color: var(--ak-accent-dark); }

/* "Ürünler" dropdown: hover/focus on desktop, always-expanded nested list on
   mobile (the drawer already scrolls, and three items don't need a second
   tap to reveal). No JS — :focus-within covers keyboard/touch. */
.ak-nav__list li { position: relative; }

.ak-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	margin-bottom: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.ak-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	min-width: 220px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: var(--ak-white);
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-r-sm);
	box-shadow: 0 16px 30px rgba(25, 26, 23, .12);
}
.ak-nav__list .menu-item-has-children:hover > .sub-menu,
.ak-nav__list .menu-item-has-children:focus-within > .sub-menu { display: block; }
.ak-nav__list .sub-menu a { padding: 10px 12px; border-radius: var(--ak-r-sm); }
.ak-nav__list .sub-menu a:hover { background-color: var(--ak-surface); }

/* ==========================================================================
   Mobile header: top bar dropped, category nav becomes a hamburger drawer.
   ========================================================================== */

@media (max-width: 860px) {
	.ak-topbar { display: none; }

	.ak-menu-toggle { display: flex; }

	/* .site-header is position: sticky, which — like any non-static position —
	   establishes the containing block this drawer positions itself against. */
	.ak-nav { display: none; }
	.ak-nav.is-open {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background-color: var(--ak-white);
		border-top: 1px solid var(--ak-line);
		box-shadow: 0 16px 24px rgba(25, 26, 23, .12);
		z-index: 39;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
	}
	.ak-nav__inner {
		flex-direction: column;
		align-items: stretch;
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.ak-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.ak-nav__list a { padding: 13px 4px; border-bottom: 1px solid var(--ak-line-3); }
	.ak-nav__quote { margin-left: 0; padding: 13px 4px; }

	/* No hover on touch — the dropdown is always expanded, nested and indented. */
	.ak-nav__list .sub-menu {
		display: block;
		position: static;
		margin: 0;
		padding: 0 0 0 16px;
		border: 0;
		box-shadow: none;
		background: none;
	}
	.ak-nav__list .sub-menu a { padding: 11px 4px; font-size: 13px; color: var(--ak-ink-3); }
}

/* ==========================================================================
   Buttons — accent is for actions only
   ========================================================================== */

button, input[type="button"], input[type="submit"], .button {
	background-color: var(--ak-accent);
	color: var(--ak-white);
	font-family: var(--ak-display);
	font-weight: 700;
	border-radius: var(--ak-r-sm);
	text-shadow: none;
	transition: background-color .12s ease-in-out;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover, .button:hover {
	background-color: var(--ak-accent-dark);
	color: var(--ak-white);
}

/* ==========================================================================
   Homepage (template-homepage.php → akcabez_home())

   Storefront wraps content in #content > .col-full (max-width 1200, padded).
   The full-bleed bands below — hero, USP strip — must span the viewport, so
   the wrapper is neutralised here and each section owns its own .ak-wrap.
   ========================================================================== */

.page-template-template-homepage .site-content { padding: 0; margin: 0; }
.page-template-template-homepage #content > .col-full { max-width: none; padding: 0; }

/* Buttons that are actions-in-context, not the global accent button.
   (.ak-btn is a fresh class, so the generic orange button rule never matches.)
   text-decoration needs !important: Storefront's `.hentry .entry-content a`
   underlines links inside post content at higher specificity than a single
   class. The homepage's buttons never sit inside post content so it never
   showed there; the İletişim page's do. */
.ak-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--ak-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	padding: 15px 26px;
	border-radius: 11px;
	cursor: pointer;
	text-decoration: none !important;
}

.ak-btn--brand { background-color: var(--ak-brand); color: var(--ak-white); }
.ak-btn--brand:hover { background-color: #0A3A37; color: var(--ak-white); }

.ak-btn--ghost {
	background-color: var(--ak-white);
	color: var(--ak-brand);
	border: 1.5px solid #C7C0B2;
	padding: 14px 24px;
}
.ak-btn--ghost:hover { border-color: var(--ak-brand); color: var(--ak-brand); }

.ak-btn--wa { background-color: var(--ak-wa); color: var(--ak-wa-fg); }
.ak-btn--wa:hover { background-color: var(--ak-wa-dark); color: var(--ak-wa-fg); }

.ak-badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--ak-brand-tint);
	color: var(--ak-brand);
	font-family: var(--ak-display);
	font-weight: 700;
	font-size: 13px;
	padding: 7px 14px;
	border-radius: 999px;
}

/* Hero */
.ak-hero {
	background: linear-gradient(180deg, var(--ak-white) 0%, var(--ak-bg) 100%);
	border-bottom: 1px solid var(--ak-line);
}

.ak-hero__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 44px;
	align-items: center;
	padding-top: 56px;
	padding-bottom: 60px;
}

.ak-hero__copy { display: flex; flex-direction: column; gap: 22px; }

.ak-hero__title {
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1.05;
	margin: 0;
}

.ak-hero__lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--ak-ink-3);
	margin: 0;
	max-width: 520px;
	text-wrap: pretty;
}
.ak-hero__lead strong { color: var(--ak-ink); }

.ak-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.ak-hero__feats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}
.ak-hero__feats li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ak-ink-3); }
.ak-hero__feats .ak-icon { color: var(--ak-brand); }

.ak-hero__media {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 24px 50px rgba(14, 76, 72, .16);
}

.ak-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* USP strip */
.ak-usps { background-color: var(--ak-white); border-bottom: 1px solid var(--ak-line); }

.ak-usps__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	padding-top: 28px;
	padding-bottom: 28px;
}

.ak-usp { display: flex; gap: 14px; align-items: flex-start; padding: 14px; }

.ak-usp__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background-color: var(--ak-brand-tint);
	color: var(--ak-brand);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ak-usp__text { display: flex; flex-direction: column; gap: 2px; }
.ak-usp__title { font-family: var(--ak-display); font-weight: 700; font-size: 15px; color: var(--ak-ink); }
.ak-usp__sub { font-size: 13px; color: var(--ak-muted-2); }

/* Section scaffolding (usage areas) */
.ak-section { padding-top: 52px; padding-bottom: 20px; }
.ak-section--usage { padding-top: 44px; padding-bottom: 56px; border-top: 1px solid var(--ak-line); }
.ak-section--gallery { padding-top: 44px; padding-bottom: 56px; border-top: 1px solid var(--ak-line); }
.ak-section--products { border-top: 1px solid var(--ak-line); }
.ak-section--map { padding-top: 44px; padding-bottom: 56px; border-top: 1px solid var(--ak-line); }

.ak-section__title { font-size: 28px; margin: 0 0 6px; letter-spacing: -.01em; }
.ak-section__title--sm { font-size: 24px; margin: 0 0 18px; }
.ak-section__sub { margin: 0; color: var(--ak-muted-2); font-size: 15px; }

/* Usage areas */
/* Flex, not grid: a grid's auto-fit leaves a lone wrapped tile stuck on the
   left. justify-content:center centres each row, so an incomplete last row
   (or a single leftover tile) sits centred instead. */
.ak-usage {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.ak-usage__tile {
	flex: 0 1 160px; /* uniform width; may shrink on very narrow screens */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	background-color: var(--ak-white);
	border: 1px solid var(--ak-line);
	border-radius: 18px;
	padding: 26px 16px;
	font-family: var(--ak-display);
	font-weight: 700;
	font-size: 15px;
	color: var(--ak-ink);
	transition: box-shadow .18s ease, transform .18s ease;
}
.ak-usage__tile:hover { box-shadow: 0 14px 30px rgba(14, 76, 72, .1); transform: translateY(-3px); }

.ak-usage__icon {
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background-color: var(--ak-brand-tint);
	color: var(--ak-brand);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ak-usage__text { display: flex; flex-direction: column; gap: 4px; }
.ak-usage__name { font-family: var(--ak-display); font-weight: 700; font-size: 15px; color: var(--ak-ink); }
.ak-usage__sub {
	font-family: var(--ak-text);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ak-muted-2);
}

/* Products: no prices, no cart — each card's action is contacting about that
   one product, not buying it. */
.ak-products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}
.ak-product-card {
	display: flex;
	flex-direction: column;
	background-color: var(--ak-white);
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-r-lg);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}
.ak-product-card:hover { box-shadow: 0 14px 30px rgba(14, 76, 72, .1); transform: translateY(-3px); }
.ak-product-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.ak-product-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px 24px 24px;
	flex: 1;
}
.ak-product-card__title { font-size: 18px; margin: 0; }
.ak-product-card__title a { color: inherit; text-decoration: none !important; }
.ak-product-card__title a:hover { color: var(--ak-brand); }
.ak-product-card__desc { font-size: 14px; line-height: 1.55; color: var(--ak-ink-3); margin: 0; }
.ak-product-card__cta { margin-top: auto; padding-top: 8px; align-self: stretch; justify-content: center; }

/* Gallery: whatever Yunus puts in the Ana Sayfa page's own Gallery/Image
   blocks — this just brings core block markup onto the design's tokens.
   The core Gallery block lays its tiles out with flex-wrap, which stretches
   a lone leftover tile in an incomplete last row to fill the row at its
   native (uncropped) aspect ratio — with 19 photos in 3 columns that made
   the 19th tile balloon to several times the others' height. A plain grid
   with a fixed aspect-ratio per tile sidesteps that regardless of count. */
.ak-gallery__body .wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px !important;
}
/* auto-fill can't fit two 220px tracks under a ~340px content width, so
   mobile fell back to a single column — 19 photos stacked full-width made
   for a very long scroll. Force two columns instead. */
@media (max-width: 640px) {
	.ak-gallery__body .wp-block-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}
.ak-gallery__body .wp-block-gallery .wp-block-image {
	margin: 0;
	width: auto !important;
	height: auto !important;
	flex: none !important;
}
.ak-gallery__body figure { margin: 0; }
.ak-gallery__body img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--ak-r-lg);
	transition: box-shadow .18s ease, transform .18s ease;
}
.ak-gallery__body .wp-block-image:hover img,
.ak-gallery__body .wp-block-gallery figure:hover img {
	box-shadow: 0 14px 30px rgba(14, 76, 72, .16);
	transform: translateY(-3px);
}
.ak-gallery__body figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--ak-muted-2);
	text-align: center;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Storefront wraps the footer in .site-footer > .col-full (max 1200, padded).
   Let the footer span full width and let its own inner .ak-wrap centre the
   content, so the bottom-bar divider reaches the viewport edges. */
.site-footer {
	background-color: #12332F; /* the design's footer teal, darker than --ak-brand */
	color: #B9CFCA;
	padding: 0;
}
.site-footer .col-full { max-width: none; padding: 0; }

.ak-footer__top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	padding-top: 48px;
	padding-bottom: 24px;
}

.ak-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 300px; }
.ak-footer__brand-row { display: flex; align-items: center; gap: 11px; }
/* The light-on-dark wordmark (logo-light.svg) sits directly on the footer teal
   — its off-white lettering and emblem read without needing a panel behind it. */
.ak-footer__logo {
	display: block;
	height: 56px;
	width: auto;
}
.ak-footer__desc { margin: 0; font-size: 14px; line-height: 1.6; color: #8FAAA4; }

.ak-footer__col { display: flex; flex-direction: column; gap: 12px; }
.ak-footer__title {
	font-family: var(--ak-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ak-white);
}

/* Storefront colours and underlines every `.site-footer a` (real links compute
   to #333 + underline through its stack). !important is the clean way to reclaim
   the footer's own link styling without chasing that cascade. */
.site-footer .ak-footer__link {
	font-size: 14px;
	color: #B9CFCA !important;
	text-decoration: none !important;
}
.site-footer a.ak-footer__link:hover { color: var(--ak-white) !important; }
/* A label whose page does not exist yet: present, but plainly not a link. */
.site-footer .ak-footer__link--todo { color: #8FAAA4 !important; cursor: default; }

.ak-footer__addr { font-size: 14px; line-height: 1.6; color: #8FAAA4; }
.site-footer .ak-footer__phone {
	font-family: var(--ak-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--ak-white) !important;
	text-decoration: none !important;
}
.site-footer a.ak-footer__phone:hover { color: var(--ak-white) !important; opacity: .85; }

.ak-footer__bar { border-top: 1px solid rgba(255, 255, 255, .1); }
.ak-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding-top: 18px;
	padding-bottom: 18px;
	font-size: 13px;
	color: #7B958F;
}


/* ==========================================================================
   Info pages: contact form (Contact Form 7) + map (İletişim)
   ========================================================================== */

.wpcf7-form { max-width: 480px; }
.wpcf7-form p { margin: 0 0 16px; }
.wpcf7-form label {
	display: block;
	font-family: var(--ak-display);
	font-weight: 700;
	font-size: 14px;
	color: var(--ak-ink-2);
	margin-bottom: 6px;
}
.wpcf7-form-control {
	width: 100%;
	border: 1.5px solid var(--ak-line-2);
	border-radius: var(--ak-r-sm);
	padding: 12px 14px;
	font-family: var(--ak-text);
	font-size: 15px;
	color: var(--ak-ink);
	background-color: var(--ak-white);
}
.wpcf7-form-control:focus { outline: 2px solid var(--ak-brand); outline-offset: 1px; }
textarea.wpcf7-form-control { min-height: 120px; resize: vertical; }
.wpcf7-form-control.wpcf7-submit { width: auto; border: none; }

.wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: var(--ak-r-sm);
	border: 1px solid var(--ak-line-2);
	font-size: 14px;
}
.wpcf7-mail-sent-ok .wpcf7-response-output { border-color: var(--ak-brand); color: var(--ak-brand); }
.wpcf7-validation-errors .wpcf7-response-output,
.wpcf7-mail-sent-ng .wpcf7-response-output,
.wpcf7-spam-blocked .wpcf7-response-output { border-color: var(--ak-accent); color: var(--ak-accent-dark); }

.ak-map {
	max-width: 100%;
	aspect-ratio: 21 / 9;
	border-radius: var(--ak-r-lg);
	overflow: hidden;
	border: 1px solid var(--ak-line);
}
.ak-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Plain Gutenberg columns block, top-aligned rather than stretched to match
   each other's height — used by any two-column info content. */
.wp-block-columns { align-items: flex-start; gap: 40px; }

.ak-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* İletişim page: lead line under the page title. */
.ak-lead {
	max-width: 640px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--ak-ink-3);
	margin: 4px 0 40px;
}

/* Info card (dark) | "Bize Yazın" card (light). These used to be forced to
   equal heights, which worked while the right column held a contact form.
   The form is gone (it had been failing on every submission — no SMTP), so
   stretching now leaves a tall empty panel; let each card size to content. */
.ak-contact-grid.wp-block-columns { align-items: flex-start; }
.ak-contact-grid > .wp-block-column:first-child { flex: 0 1 340px; }
.ak-contact-grid > .wp-block-column:last-child { flex: 1 1 420px; }

.ak-contact-card {
	background-color: var(--ak-brand);
	border-radius: var(--ak-r-lg);
	padding: 32px 28px;
	height: 100%;
	box-sizing: border-box;
}
.ak-contact-card__title {
	font-family: var(--ak-display);
	font-weight: 800;
	font-size: 20px;
	color: var(--ak-white);
	margin: 0 0 8px;
}
.ak-contact-card__row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; }
.ak-contact-card__row + .ak-contact-card__row { border-top: 1px solid rgba(255, 255, 255, .12); }
.ak-contact-card__icon { flex: none; display: flex; color: var(--ak-brand-icon); margin-top: 2px; }
.ak-contact-card__text { display: flex; flex-direction: column; gap: 3px; }
.ak-contact-card__label {
	font-family: var(--ak-display);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #8FAAA4;
}
/* Same fight as .ak-btn below: `.hentry .entry-content a` (Storefront) sets
   its own color and underline on any link inside post content. */
.ak-contact-card__value,
.ak-contact-card__value a {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ak-white) !important;
	text-decoration: none !important;
}
.ak-contact-card__value a:hover { color: var(--ak-brand-icon) !important; }
.ak-contact-card .ak-contact-actions { margin-top: 22px; }
/* Teal-on-teal would vanish — invert the brand button to white here only. */
.ak-contact-card .ak-btn--brand { background-color: var(--ak-white); color: var(--ak-brand); }
.ak-contact-card .ak-btn--brand:hover { background-color: var(--ak-brand-tint); color: var(--ak-brand); }

.ak-form-card {
	background-color: var(--ak-white);
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-r-lg);
	padding: 32px 28px;
	height: 100%;
	box-sizing: border-box;
}
.ak-form-card > *:first-child { margin-top: 0; }
.ak-form-card .wpcf7-form { max-width: none; }

/* İletişim's section headings are h2 so the outline does not skip a level
   (h1 → h3). They keep the h3 size the design was drawn at. */
.ak-form-card > h2,
.ak-map-section > h2 { font-size: 19px; line-height: 1.3; }

.ak-map-section { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--ak-line); }

/* ==========================================================================
   Hakkımızda: a "spec sheet" register — the page states its facts the way
   the product's own bale label does, rather than reaching for marketing
   imagery it doesn't have.
   ========================================================================== */

.ak-facts-line {
	margin: 0 0 40px;
	font-family: var(--ak-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ak-muted-2);
}

/* Divider lines are the grid's own background showing through a 1px gap —
   holds up under wrapping without :first-child/:last-child bookkeeping. */
.ak-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background-color: var(--ak-line);
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-r-lg);
	overflow: hidden;
	margin: 0 0 40px;
}
.ak-stat { background-color: var(--ak-white); padding: 26px 24px; }
.ak-stat__num {
	display: block;
	font-family: var(--ak-display);
	font-weight: 800;
	font-size: 28px;
	letter-spacing: -.02em;
	color: var(--ak-brand);
}
.ak-stat__label {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ak-muted-2);
}

.ak-values {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	margin: 20px 0 48px;
}
.ak-value-card {
	display: flex;
	gap: 14px;
	padding: 22px;
	background-color: var(--ak-white);
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-r-lg);
}
.ak-value-card__icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: var(--ak-brand-tint);
	color: var(--ak-brand);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ak-value-card__title { font-family: var(--ak-display); font-weight: 700; font-size: 15px; color: var(--ak-ink); margin: 0 0 4px; }
.ak-value-card__desc { font-size: 13.5px; line-height: 1.5; color: var(--ak-ink-3); margin: 0; }

/* Process: a real sequence (talep → kontrol → sevkiyat), so a numbered
   marker carries information here rather than decorating it. */
.ak-process {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	margin: 20px 0 48px;
}
.ak-process-step { display: flex; gap: 16px; }
.ak-process-step__num {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--ak-brand);
	color: var(--ak-white);
	font-family: var(--ak-display);
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ak-process-step__title { font-family: var(--ak-display); font-weight: 700; font-size: 15px; color: var(--ak-ink); margin: 0 0 4px; }
.ak-process-step__desc { font-size: 13.5px; line-height: 1.5; color: var(--ak-ink-3); margin: 0; }

.ak-about-cta { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--ak-line); }
.ak-about-cta__title { margin: 0 0 8px; }

/* ==========================================================================
   Ürün sayfası (template-urun.php): classic product layout — image one
   side, facts and the two actions on the other. No price, no cart.
   ========================================================================== */

.ak-product-page {
	display: grid;
	grid-template-columns: minmax(280px, 440px) 1fr;
	gap: 48px;
	align-items: start;
	padding-top: 48px;
	padding-bottom: 48px;
}

.ak-product-page__media {
	border-radius: var(--ak-r-lg);
	overflow: hidden;
	border: 1px solid var(--ak-line);
}
.ak-product-page__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ak-product-page__info { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ak-product-page__title { font-size: clamp(28px, 4vw, 38px); margin: 0; }
.ak-product-page__desc { font-size: 17px; line-height: 1.6; color: var(--ak-ink-3); margin: 0; max-width: 520px; }
.ak-product-page__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.ak-product-page__specs { display: flex; flex-direction: column; gap: 6px; margin: 0; width: 100%; max-width: 420px; }
.ak-product-page__spec { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ak-line-3); font-size: 14px; }
.ak-product-page__spec dt { flex: 0 0 100px; margin: 0; color: var(--ak-muted); font-weight: 600; }
.ak-product-page__spec dd { flex: 1; margin: 0; color: var(--ak-ink-2); }

.ak-product-page__extra { padding: 0 0 48px; border-top: 1px solid var(--ak-line); margin-top: 8px; padding-top: 40px; }

@media (max-width: 640px) {
	.ak-product-page { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; padding-bottom: 32px; }
}
.ak-about-cta__sub { margin: 0; color: var(--ak-ink-3); font-size: 15px; }