/** Global tokens and non-visual foundations. Components begin in Sprint 01. */
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-ExtraBold.ttf") format("truetype"); font-style: normal; font-weight: 800; font-display: swap; }
/* Değerlerimiz timeline'daki büyük 01-07 numaraları için — XD'nin kendi PDF
dışa aktarımında (pdffonts) bu metin özel olarak "Montserrat-LightItalic"
ile gömülü, projenin geri kalanında kullanılan 400/600/700/800'den farklı,
tek kullanımlık bir ağırlık/stil. Dosya references/assets/fonts/'taki
onaylı asset paketinden (rastgele indirilmedi) tema font sistemine
eklendi — yalnızca bu tek kullanım için, gerçek font-weight:300 + gerçek
italic (sentetik eğim değil). */
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-LightItalic.ttf") format("truetype"); font-style: italic; font-weight: 300; font-display: swap; }
/* Kalite Politikalarımız ve Sertifikalarımız sayfasındaki "Kalite" ve
"Sertifikalarımız" başlıkları için — XD'nin kendi metin objesinde
("Kalite\nPolitikamız", "Sertifikalarımız") özel olarak
"Montserrat-ExtraBoldItalic" gömülü, aynı LightItalic eklemesindeki gibi
references/assets/fonts/'taki onaylı asset paketinden eklendi — gerçek
font-weight:800 + gerçek italic (sentetik eğim değil). */
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-ExtraBoldItalic.ttf") format("truetype"); font-style: italic; font-weight: 800; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("../fonts/Baloo2-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("../fonts/Baloo2-SemiBold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("../fonts/Baloo2-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("../fonts/Baloo2-ExtraBold.ttf") format("truetype"); font-style: normal; font-weight: 800; font-display: swap; }
/* Temporary development-only reference overlay. Remove after Sprint 01 QA. */
.qa-reference-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 999999;
width: 1440px;
height: 900px;
pointer-events: none;
background: url("../qa/reference-1440-normalized.png") no-repeat 0 0 / 1440px 900px;
opacity: .5;
}
.qa-overlay-active *,
.qa-overlay-active *::before,
.qa-overlay-active *::after {
animation: none !important;
transition: none !important;
}
:root {
/* Distinct, slightly darker/muted red used specifically for header/
dropdown/mega-menu active+hover states (XD reference), separate
from the brighter --tada-red used for branding/CTAs elsewhere. */
--tada-red-active: #9e262d;
--tada-red: #b1262d; --tada-red-dark: #8f1f25; --tada-red-soft: #f6e6e7;
--tada-black: #111111; --tada-gray-700: #5f5f5f; --tada-gray-400: #bcbcbc;
--tada-gray-200: #e8e8e8; --tada-gray-100: #f6f6f6; --tada-white: #ffffff;
--tada-bg: #fcfcfc;
--tada-cream: #fff6ec; --tada-yellow: #f5c84b; --tada-container: 1410px;
--tada-gutter: 32px; --tada-radius-sm: 12px; --tada-radius-md: 20px;
--tada-radius-lg: 32px; --tada-shadow-soft: 0 12px 36px rgb(0 0 0 / 8%);
/* Interior page header rhythm — the header→H1→breadcrumb→first-card block that
the product category archive, the product detail page and the corporate
pages all share. Held as tokens (rather than repeated per page file) because
product-archive.css is not loaded on single products, so the two pages
cannot share a selector; only main.css is always present. The H1's 10px
bottom margin and 1.1 line-height stay in the page rules — they are the same
literal in every consumer and never change per breakpoint. */
--tada-page-head-top: 56px;
--tada-page-head-bottom: 40px;
--tada-page-title-size: 38px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.has-locked-scroll { overflow: hidden; }
body { margin: 0; color: var(--tada-black); background: var(--tada-bg); font-family: Montserrat, Arial, sans-serif; }
img, svg, video { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--tada-yellow); outline-offset: 3px; }
@media (max-width: 1023px) { :root { --tada-gutter: 24px; } }
@media (max-width: 767px) { :root { --tada-gutter: 16px; } }
/* Page-header rhythm steps down with the layout. These are the values the
product archive already used below the desktop split; promoting them here is
what lets the product detail page share the exact same rhythm instead of
carrying the desktop head into the tablet band. */
@media (max-width: 1100px) {
:root { --tada-page-head-top: 40px; --tada-page-head-bottom: 28px; --tada-page-title-size: 30px; }
}
@media (max-width: 768px) {
:root { --tada-page-head-top: 28px; --tada-page-head-bottom: 20px; --tada-page-title-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* ==========================================================================
Scroll reveal system (Faz 4 — shared motion language).
Three movement types only, driven by ONE IntersectionObserver in main.js
(see the "Scroll reveal system" block there):
data-animate="fade-up" section titles, copy, single content blocks
data-animate="zoom" large image/panel blocks (soft zoom, never < .95)
data-animate="stagger" grids/lists — the CONTAINER carries the attribute,
its direct children are what reveal, one after
the other
Optional per-element tuning attributes (read by main.js, never by CSS):
data-animate-delay="240" base delay in ms before this element starts
data-animate-step="90" stagger step in ms between children
Everything is expressed with @keyframes rather than transitions on purpose:
a transition declared here would clobber a component's OWN transition (the
sales-map CTA's hover, the recipe card's image zoom, …), because this rule
is more specific than the component rule. An animation only owns the element
while it runs, and `.is-anim-done` (added by main.js on animationend) drops
it entirely, so the component's own hover/focus motion is untouched.
The hidden start state is scoped to `.tada-anim` on , which is added
by a tiny inline bootstrap in wp_head (inc/enqueue.php) and ONLY when
JavaScript runs and prefers-reduced-motion is not "reduce". No JS, a JS
error, or reduced motion => the class never lands => every [data-animate]
element renders in its normal, fully visible state. Nothing on this site
can ever be stuck at opacity 0.
========================================================================== */
:root {
--tada-anim-ease: cubic-bezier(.22, 1, .36, 1);
--tada-anim-fade-duration: 680ms;
--tada-anim-zoom-duration: 780ms;
--tada-anim-stagger-duration: 620ms;
}
.tada-anim [data-animate="fade-up"],
.tada-anim [data-animate="zoom"],
.tada-anim [data-animate="stagger"] > * { opacity: 0; }
.tada-anim [data-animate="fade-up"].is-in-view {
animation: tada-fade-up var(--tada-anim-fade-duration) var(--tada-anim-ease) var(--tada-anim-delay, 0ms) both;
}
.tada-anim [data-animate="zoom"].is-in-view {
animation: tada-soft-zoom var(--tada-anim-zoom-duration) var(--tada-anim-ease) var(--tada-anim-delay, 0ms) both;
}
.tada-anim [data-animate="stagger"].is-in-view > * {
animation: tada-fade-up var(--tada-anim-stagger-duration) var(--tada-anim-ease) var(--tada-anim-delay, 0ms) both;
}
/* will-change is held only for the frames the element is actually animating,
never as a permanent, page-wide promotion. A stagger CONTAINER is never
animated itself (only its children are, and only they ever receive
`.is-anim-done`), so it must not be listed here — it would hold the hint
for the lifetime of the page. */
.tada-anim [data-animate="fade-up"].is-in-view:not(.is-anim-done),
.tada-anim [data-animate="zoom"].is-in-view:not(.is-anim-done),
.tada-anim [data-animate="stagger"].is-in-view > :not(.is-anim-done) { will-change: opacity, transform; }
/* Animation over: hand the element back to its own component rules. */
.tada-anim [data-animate].is-anim-done,
.tada-anim [data-animate="stagger"] > .is-anim-done {
animation: none;
opacity: 1;
will-change: auto;
}
@keyframes tada-fade-up {
from { opacity: 0; transform: translate3d(0, 24px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes tada-soft-zoom {
from { opacity: 0; transform: scale(.95); }
to { opacity: 1; transform: scale(1); }
}
/* Belt and braces: even if `.tada-anim` somehow landed (e.g. the OS setting
was flipped after load and main.js's matchMedia listener has not run yet),
reduced-motion users see finished content, not an empty page. */
@media (prefers-reduced-motion: reduce) {
.tada-anim [data-animate="fade-up"],
.tada-anim [data-animate="zoom"],
.tada-anim [data-animate="stagger"] > * {
opacity: 1;
animation: none;
transform: none;
will-change: auto;
}
}
/* Accessibility utilities. */
.screen-reader-text,
.skip-link:not(:focus) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
position: fixed;
top: 12px;
left: 12px;
z-index: 1000;
padding: 12px 18px;
background: var(--tada-white);
}
/* Header. */
.site-header {
position: relative;
z-index: 20;
width: min(calc(100% - 60px), 1860px);
margin: 30px auto 0;
/* Matches .site-header__inner's own min-height at every breakpoint so
the header never collapses when .site-header__inner is hidden for
the search bar (position:absolute, so it can't contribute height
to this element itself). */
min-height: 94px;
}
.home .site-header {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.site-header__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
/* stretch (not center): every dropdown/mega-menu trigger needs its own
wrapper to span the *full* row height so their `top: 100%` lands on
the row's real bottom edge instead of the trigger's own (much
shorter) line-box — each level below re-centers its own content, so
nothing visually shifts. See .site-header__dropdown-wrapper. */
align-items: stretch;
column-gap: 42px;
min-height: 94px;
padding: 12px 100px;
}
.site-header__column { display: flex; min-width: 0; align-items: stretch; gap: 30px; }
.site-header__column--right { justify-content: flex-end; }
.site-header__search-button,
.site-header__menu-button {
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
}
.site-header__search-button {
display: grid;
place-items: center;
/* .site-header__column is align-items:stretch (needed so the nav's
dropdown wrappers span the full row height for panel positioning)
— a fixed-size flex item like this circular button doesn't stretch,
but it also no longer centers itself by default, so it needs its
own align-self back. */
align-self: center;
width: 50px;
height: 50px;
border: 1px solid currentcolor;
border-radius: 50%;
}
.site-header__search-icon {
position: relative;
width: 16px;
height: 16px;
border: 2px solid currentcolor;
border-radius: 50%;
/* The ::after handle overhangs this box toward the bottom-right, so the
rendered ring+handle glyph sits off the button's true center even
though this box itself is centered. Value below is measured directly
from a real Chromium render (pixel bounding box of the glyph vs. the
button's center) at both 1920 and 1366 breakpoints, not calculated
from CSS box geometry — see task history for the measurement script. */
transform: translate(-1.25px, -1.25px);
}
.site-header__search-icon::after {
position: absolute;
right: -5px;
bottom: -3px;
width: 7px;
height: 2px;
background: currentcolor;
transform: rotate(45deg);
content: "";
}
/* Fixed logo slot: wrapper carries width+height (156:71, the approved logo's
own ratio) so a differently-shaped upload is contained, not stretched, and
never changes header height. */
.site-header__logo { display: grid; place-items: center; justify-self: center; width: 96px; height: 43.69px; }
.site-header__logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.mobile-navigation__menu,
.home-hero__features,
.home-hero__socials {
padding: 0;
margin: 0;
list-style: none;
}
/* Desktop nav (≥1101px only — .site-header__nav is display:none at
≤1100px, see the existing max-width:1100px rule below, so everything
in this block is inherently desktop-only without extra gating).
Fixed links (Satış Noktalarımız/İletişim) and dropdown/mega-menu
triggers (Ürünlerimiz/Markalarımız/Kurumsal/Keşfet) share one
typography + hover language: text stays put, only color animates to
TADA red — no underline, matching the rest of the site's link hover
rules and Section 9 of the header spec. */
.site-header__nav { display: flex; align-items: stretch; gap: clamp(20px, 2vw, 50px); }
.site-header__nav--right { justify-content: flex-end; }
.site-header__nav-link,
.site-header__nav-link:visited,
.site-header__nav-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
background: transparent;
border: 0;
color: var(--tada-black);
font-family: Montserrat, Arial, sans-serif;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: color .25s cubic-bezier(.4, 0, .2, 1);
}
.site-header__nav-link:hover,
.site-header__nav-link:focus-visible,
.site-header__nav-trigger:hover,
.site-header__nav-trigger:focus-visible { color: var(--tada-red-active); }
.site-header__nav-trigger[aria-expanded="true"] { color: var(--tada-red-active); }
.site-header__nav-chevron { flex-shrink: 0; transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.site-header__nav-trigger[aria-expanded="true"] .site-header__nav-chevron { transform: rotate(180deg); }
/* display:flex + align-items:center re-centers the trigger button inside
the wrapper now that the wrapper itself stretches to the full row
height (see .site-header__inner/.site-header__column/.site-header__nav
align-items:stretch above) — this is what makes `top: 100%` on the
dropdown/mega-menu panels land on the row's real bottom edge instead of
the trigger's own short line-box, matching every other trigger's panel
regardless of that trigger's own font-size. */
.site-header__dropdown-wrapper { position: relative; display: flex; align-items: center; }
.site-header__actions { display: flex; align-items: center; gap: 14px; }
.site-header__catalogue {
display: inline-flex;
min-width: 154px;
min-height: 42px;
align-items: center;
justify-content: center;
padding: 8px 20px;
color: var(--tada-white);
font-size: 14px;
font-weight: 700;
text-decoration: none;
background: #9e262d;
border-radius: 999px;
transition: background-color .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}
.site-header__catalogue:hover,
.site-header__catalogue:focus-visible { background: #000; transform: translateY(-1px); }
.site-header__language {
display: grid;
width: 42px;
height: 42px;
place-items: center;
color: inherit;
font-size: 14px;
font-weight: 700;
text-decoration: none;
background: transparent;
border: 1px solid currentcolor;
border-radius: 50%;
transition: background-color .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1), border-color .25s cubic-bezier(.4, 0, .2, 1);
}
.site-header__language:hover,
.site-header__language:focus-visible { background: var(--tada-red-active); color: #fff; border-color: var(--tada-red-active); }
.site-header__language[aria-disabled="true"] {
cursor: default;
}
.site-header__language[aria-disabled="true"]:hover,
.site-header__language[aria-disabled="true"]:focus-visible {
background: transparent;
color: inherit;
border-color: currentcolor;
}
.site-header__menu-button { display: none; width: 44px; padding: 8px; }
.site-header__menu-button > span:not(.screen-reader-text) { display: block; height: 2px; margin: 5px 0; background: currentcolor; }
/* Mobile navigation: one unified accordion menu built from the same data as
the desktop nav. The panel caps its height and scrolls internally so a long
open menu never pushes the page unbounded. */
.mobile-navigation { padding: 8px 16px 16px; background: var(--tada-white); border-radius: var(--tada-radius-md); box-shadow: var(--tada-shadow-soft); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.mobile-navigation[hidden] { display: none; }
.mobile-navigation__menu { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* Every top-level row shares one divider rhythm — no per-menu gap. */
.mobile-navigation__item { border-top: 1px solid var(--tada-gray-200); }
.mobile-navigation__item:first-child { border-top: 0; }
.mobile-navigation__link--top,
.mobile-navigation__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 48px;
margin: 0;
padding: 12px 2px;
background: none;
border: 0;
font-family: Montserrat, Arial, sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
color: var(--tada-black);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.mobile-navigation__link--top[aria-disabled="true"] { color: var(--tada-gray-400); cursor: default; }
.mobile-navigation__chevron { flex-shrink: 0; color: var(--tada-red); transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.mobile-navigation__toggle[aria-expanded="true"] .mobile-navigation__chevron { transform: rotate(180deg); }
.mobile-navigation__toggle:hover .mobile-navigation__label,
.mobile-navigation__toggle:focus-visible .mobile-navigation__label,
.mobile-navigation__link--top:hover,
.mobile-navigation__link--top:focus-visible { color: var(--tada-red); }
.mobile-navigation__submenu { display: flex; flex-direction: column; margin: 0; padding: 0 0 12px; list-style: none; }
.mobile-navigation__submenu[hidden] { display: none; }
.mobile-navigation__submenu a {
display: block;
min-height: 40px;
padding: 9px 0 9px 14px;
font-size: 13.5px;
font-weight: 600;
line-height: 1.4;
color: var(--tada-gray-700);
text-decoration: none;
}
.mobile-navigation__submenu a:hover,
.mobile-navigation__submenu a:focus-visible { color: var(--tada-red); }
/* Katalog İndir (red CTA) + EN sit at the bottom of the panel. */
.mobile-navigation__actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.mobile-navigation__catalogue {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 18px;
border-radius: 999px;
background: var(--tada-red);
color: var(--tada-white);
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: background-color .25s ease;
}
.mobile-navigation__catalogue:hover,
.mobile-navigation__catalogue:focus-visible { background: var(--tada-red-dark); }
.mobile-navigation__language {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
min-width: 52px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid var(--tada-gray-200);
color: var(--tada-black);
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: border-color .25s ease, color .25s ease;
}
.mobile-navigation__language:hover,
.mobile-navigation__language:focus-visible { border-color: var(--tada-red); color: var(--tada-red); }
/* Search bar: replaces the nav row content in place (same header card,
same height) rather than floating a separate card below it, matching
the reference — .site-header__inner is hidden while this is shown. */
.site-header__search-bar[hidden] { display: none; }
.site-header__inner[hidden] { display: none; }
.site-header__search-bar {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 12px 100px;
}
.site-header__search-form {
display: flex;
align-items: center;
width: 100%;
padding: 6px 6px 6px 24px;
background: var(--tada-white);
border: 1px solid var(--tada-gray-200);
border-radius: 999px;
box-shadow: var(--tada-shadow-soft);
transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1);
}
/* :focus-within moves the focus indicator to the whole pill instead of
the bare , so no browser-default rectangular ring can appear
inside the rounded shape — the pill itself gets a soft, brand-tinted
outline instead. */
.site-header__search-form:focus-within {
box-shadow: 0 0 0 3px rgb(177 38 45 / 16%), var(--tada-shadow-soft);
}
.site-header__search-form input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
font-family: Montserrat, Arial, sans-serif;
font-size: 15px;
color: var(--tada-black);
outline: none;
box-shadow: none;
-webkit-focus-ring-color: transparent;
/* input[type=search] carries its own UA chrome (a faint inset "field"
look plus a native cancel button in WebKit) that can read as a
second, nested box inside our pill — neutralize both. */
appearance: none;
-webkit-appearance: none;
}
.site-header__search-form input::placeholder { color: var(--tada-gray-700); }
.site-header__search-form input::-webkit-search-decoration,
.site-header__search-form input::-webkit-search-cancel-button,
.site-header__search-form input::-webkit-search-results-button,
.site-header__search-form input::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
}
.site-header__search-close {
display: grid;
flex-shrink: 0;
place-items: center;
width: 38px;
height: 38px;
padding: 0;
color: var(--tada-black);
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: background-color .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1);
}
.site-header__search-close:hover,
.site-header__search-close:focus-visible { background: var(--tada-gray-100); color: var(--tada-red); }
/* Header dropdowns/mega-menus — desktop only (≥1101px), matching the
existing hamburger-switch breakpoint everywhere else in the header;
below that the trigger buttons live inside `.site-header__nav`, which
is already `display:none`, so gating the panels themselves to the same
breakpoint keeps them structurally unreachable on mobile/tablet
without touching any mobile rule. Both mega-menus (Ürünlerimiz/
Markalarımız) are full-width siblings of `.site-header__inner`,
anchored to the same rounded header card; Kurumsal/Keşfet are narrow
dropdowns anchored to their own trigger via `.site-header__dropdown-
wrapper { position: relative }`. z-index 30 keeps every panel above
the hero (z-index: auto) and its decorative art. */
@media (min-width: 1101px) {
/* Single shared outer-frame padding for all four header panels
(Ürünlerimiz/Markalarımız megamenus + Kurumsal/Keşfet dropdowns).
Measured live (DevTools computed style + getBoundingClientRect) on
2026-07-27: the megamenus' white-frame-to-content gap was a uniform
28px/40px on all four sides — verified as coming directly from this
one `padding` declaration, no other layer (inner wrapper, grid gap,
margin, pseudo-element) contributing — while the dropdowns' own gap
was already a flat, unscaled 14px. 14px was kept as the shared target
(rather than a new number) so Kurumsal/Keşfet needed zero change,
and only the megamenus' outer frame had to shrink. Verified safe for
the Kurumsal dropdown's longest item ("Kalite Politikamız ve
Sertifikalarımız", 221.5px rendered text) at the fixed 310px panel
width — unchanged from before, since this value equals the
dropdown's prior literal padding. */
.site-header { --menu-panel-padding: 14px; }
.site-header__megamenu[hidden],
.site-header__dropdown[hidden] { display: none; }
.site-header__megamenu {
position: absolute;
z-index: 30;
top: calc(100% + 12px);
/* left/right are set per breakpoint below to match
`.site-header__inner`'s own content edges (search button's left
edge, EN button's right edge) exactly — not the full outer
rounded-card width, which is wider than the inner grid. */
align-items: stretch;
padding: var(--menu-panel-padding);
background: var(--tada-white);
border-radius: var(--tada-radius-lg);
box-shadow: var(--tada-shadow-soft);
display: flex;
gap: 24px;
/* No max-height/overflow here on purpose: capping this to a
viewport-relative height and scrolling the overflow clipped the
bottom row of cards and broke the panel's own bottom radius on
shorter windows once the content grew taller than that cap. The
panel now always sizes to its real content instead. */
}
/* Ürünlerimiz: left category tablist + right card grid (one grid per
category, only the active one visible — switched by JS, no reflow
of the trigger row / header height). `align-items: stretch` on the
megamenu (above) makes the right-hand panel match the left column's
full height regardless of which one is taller. */
.site-header__megamenu-categories { display: flex; flex-direction: column; gap: 10px; flex: 0 0 270px; }
.site-header__megamenu-category {
/* Grow to share the column's full (stretched) height so the last
category pill's bottom lines up with the right-hand gray panel's
bottom edge — `align-items: stretch` already equalises the two
COLUMN heights, but without this the pills sit at their natural
height and leave transparent dead space below the last one, making
the left list visually end higher than the right panel. flex-shrink
0 keeps them at natural height when the list itself is the taller
column (narrow widths), so they never compress below content. */
flex: 1 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 22px;
background: var(--tada-gray-100);
color: var(--tada-black);
border: 0;
border-radius: 999px;
font-family: Montserrat, Arial, sans-serif;
font-size: 12px;
font-weight: 700;
text-align: left;
cursor: pointer;
transition: background-color .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1);
}
.site-header__megamenu-category svg { flex-shrink: 0; color: var(--tada-gray-700); transition: color .25s cubic-bezier(.4, 0, .2, 1); }
.site-header__megamenu-category:not(.is-active):hover { background: var(--tada-red-active); color: #fff; }
.site-header__megamenu-category:not(.is-active):hover svg { color: #fff; }
.site-header__megamenu-category.is-active { background: var(--tada-red-active); color: #fff; }
.site-header__megamenu-category.is-active svg { color: #fff; }
/* Right content area: its own light, "broken white" backdrop distinct
from the outer white megamenu panel, so the individual product
cards (white) visibly pop against it instead of blending in. */
.site-header__megamenu-panels { flex: 1; min-width: 0; padding: 22px; background: var(--tada-gray-100); border-radius: var(--tada-radius-md); }
.site-header__megamenu-grid[hidden] { display: none; }
/* min-height comes from main.js (syncGridMinHeight): the tallest
category's natural content height, so a category with only 1-3 cards
(one row) reserves the same vertical space as one with 6 (two rows) —
without it, `.site-header__megamenu`'s `align-items: stretch` sizes
the whole panel (and the left category column) to whichever grid is
currently active, so the panel visibly grew/shrank per category.
align-content/justify-content: start keep a shorter category's single
row pinned to the top-left of that reserved space instead of being
centered in it. */
.site-header__megamenu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
min-height: var(--megamenu-grid-min-height, 0);
align-content: start;
justify-content: start;
}
/* Two-tone card: white image chip (its own radius) on a light-gray
card field, title sitting on that same gray below it — one card,
two visually distinct parts. No card-level hover transform/shadow:
hover only scales the image inside its own wrapper, so the card's
box never moves/resizes and nothing else shifts around it. */
.site-header__product-card,
.site-header__product-card:visited {
display: flex;
flex-direction: column;
background: var(--tada-gray-100);
border-radius: var(--tada-radius-md);
color: var(--tada-black);
text-align: center;
text-decoration: none;
overflow: hidden;
}
.site-header__product-card-media { display: flex; align-items: center; justify-content: center; width: auto; height: 165px; margin: 16px 16px 8px; padding: 12px; background: var(--tada-white); border-radius: var(--tada-radius-sm); }
.site-header__product-card-media img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.site-header__product-card:hover .site-header__product-card-media img { transform: scale(1.06); }
.site-header__product-card-title { width: 100%; padding: 8px 14px 16px; font-size: 12px; font-weight: 700; }
.site-header__product-card:hover .site-header__product-card-title { color: var(--tada-red-active); }
.site-header__product-card--all .site-header__product-card-media { justify-content: center; }
/* Markalarımız: single row of real marka cards. `.site-header__brand-
list > li` (not `.site-header__brand-card` itself) is the actual
flex item here, so equal sizing has to be set on the
— the
anchor then fills it via its own nested flex context. Outer frame
padding comes from `.site-header__megamenu` (shared `--menu-panel-
padding`) since this element always carries both classes — no
separate override needed here. */
/* `.site-header__brand-list` is itself the sole flex item of
`.site-header__megamenu--brands` (also display:flex) — without its
own flex-grow it only sizes to its cards' content width, leaving a
large empty gap on the right instead of filling the panel. */
.site-header__brand-list { display: flex; flex: 1; width: 100%; gap: 20px; margin: 0; padding: 0; list-style: none; }
.site-header__brand-list > li { display: flex; flex: 1; min-width: 0; }
/* No outer "card" surface here on purpose — the gray logo box
(.site-header__brand-card-media) is the only visible surface; this
wrapper is just a flex layout container for centering the logo box
+ name as one item, matching the XD reference (a 3rd white card
layer around the gray box wasn't in the design). */
.site-header__brand-card,
.site-header__brand-card:visited {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 16px;
min-width: 0;
color: var(--tada-black);
text-decoration: none;
transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.site-header__brand-card:hover,
.site-header__brand-card:focus-visible { transform: translateY(-3px); }
.site-header__brand-card-media { display: flex; align-items: center; justify-content: center; width: 100%; height: 180px; overflow: visible; background: var(--tada-gray-100); border-radius: var(--tada-radius-md); }
.site-header__brand-card-media img { max-width: 88%; max-height: 88%; object-fit: contain; transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
/* Sahure Hanım's real logo is a tall, narrow vertical lockup — at the
same shared box size it reads visibly smaller than the other 4
brands' wide logos. Letting only its exceed the shared media
box (media wrapper has overflow:visible, box itself is untouched)
makes it optically match without cropping/squeezing it and without
changing this card's outer height vs its siblings. */
.site-header__brand-card--sahure-hanim .site-header__brand-card-media img { max-height: 118%; }
/* The 3 "tada" wordmark variants (tada/tada outdoor/tada profesyonel)
read a little small next to Sahure Hanım/Unifood at the shared 88%
fill — nudge them up slightly. */
.site-header__brand-card--tada .site-header__brand-card-media img,
.site-header__brand-card--tada-outdoor .site-header__brand-card-media img,
.site-header__brand-card--tada-profesyonel .site-header__brand-card-media img { max-width: 96%; max-height: 96%; }
.site-header__brand-card:hover .site-header__brand-card-media img { transform: scale(1.04); }
.site-header__brand-card-title { font-size: 12px; font-weight: 600; transition: color .25s cubic-bezier(.4, 0, .2, 1); }
.site-header__brand-card:hover .site-header__brand-card-title { color: var(--tada-red-active); }
/* Kurumsal/Keşfet: narrow dropdown anchored to its own trigger. This
wrapper sits inside `.site-header__inner`, so unlike the two
sibling megamenus above, `top: 100%` here already reflects any
transform applied to `.site-header__inner` at the 1101–1600
breakpoint (see that override below) — no extra compensation
needed for these two. */
.site-header__dropdown {
position: absolute;
z-index: 30;
top: calc(100% + 12px);
left: 0;
width: 310px;
padding: var(--menu-panel-padding);
background: var(--tada-white);
border-radius: var(--tada-radius-md);
box-shadow: var(--tada-shadow-soft);
}
.site-header__dropdown--narrow { width: 180px; }
.site-header__dropdown-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.site-header__dropdown-list a,
.site-header__dropdown-list a:visited {
display: block;
padding: 12px 16px;
background: var(--tada-gray-100);
border-radius: 999px;
color: var(--tada-black);
font-size: 12px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background-color .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1);
}
.site-header__dropdown-list a:hover,
.site-header__dropdown-list a:focus-visible { background: var(--tada-red-active); color: #fff; transform: translateX(4px); }
}
@media (min-width: 1601px) {
.site-header__megamenu { gap: 34px; }
.site-header__megamenu-categories { flex-basis: 300px; }
.site-header__megamenu-grid { gap: 22px; }
.site-header__product-card-media { height: 185px; }
.site-header__brand-list { gap: 24px; }
.site-header__brand-card-media { height: 210px; }
.site-header__dropdown { width: 320px; }
.site-header__dropdown--narrow { width: 200px; }
}
/* ============================================================================
* Golden-master composite hero (desktop >= 1101px). Each slide is one approved
* composite PNG (ratio 2048/1123). Only transparent hotspots (CTA, dots) and
* the two SVG overlay groups (video badge, socials) live over the PNG, using
* the golden-master percentages. Layout coords and animation transforms are
* kept on separate wrappers so hover/entrance effects never move the baked-in
* composition. Below 1100px the legacy `.home-hero` layered system is used.
* ==========================================================================*/
.tada-exact-hero {
--hero-top-offset: 30px; /* == margin-top below; the real measured offset */
position: relative;
width: min(calc(100% - 60px), 1860px);
margin: var(--hero-top-offset) auto 0;
/* Host fills the remaining viewport height so the hero bottom (dots, lower
corners) sits at the fold with no scroll. svh avoids mobile-URL-bar jump;
dvh refines it where supported. */
height: calc(100svh - var(--hero-top-offset));
max-height: calc(100svh - var(--hero-top-offset));
overflow: hidden;
isolation: isolate;
background: #eaeaea; /* hero card gray — fills the letterbox band seamlessly */
border-radius: 50px;
display: none; /* desktop-only; enabled at >= 1101px */
place-items: center;
}
@supports (height: 100dvh) {
.tada-exact-hero {
height: calc(100dvh - var(--hero-top-offset));
max-height: calc(100dvh - var(--hero-top-offset));
}
}
.tada-exact-hero:focus-visible { outline: 3px solid var(--tada-yellow); outline-offset: 4px; }
/* The canvas keeps the locked 2048/1123 ratio and is uniform-scaled (never
stretched) to fit inside the full-height host, then centred. All overlays are
%-positioned against THIS box so they stay glued to the composite content. */
.tada-exact-hero__viewport {
position: relative;
aspect-ratio: 2048 / 1123;
width: min(100%, calc((100svh - var(--hero-top-offset)) * 2048 / 1123));
max-height: 100%;
}
@supports (height: 100dvh) {
.tada-exact-hero__viewport { width: min(100%, calc((100dvh - var(--hero-top-offset)) * 2048 / 1123)); }
}
/* Crossfade: opacity + delayed visibility so the outgoing slide stays painted
through the fade, then is fully removed from interaction/AT afterwards. */
.tada-exact-hero__slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 600ms ease-in-out, visibility 0s linear 600ms;
}
.tada-exact-hero__slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
transition: opacity 600ms ease-in-out, visibility 0s linear 0s;
}
.tada-exact-hero__media { position: absolute; inset: 0; }
.tada-exact-hero__media > img {
display: block;
width: 100%;
height: 100%;
object-fit: fill; /* container already carries the exact 2048/1123 ratio */
user-select: none;
-webkit-user-drag: none;
transform: scale(1.01);
transition: transform 600ms ease-in-out;
}
.tada-exact-hero__slide.is-active .tada-exact-hero__media > img { transform: scale(1); }
/* CTA hotspot over the PNG's baked-in button — invisible until hover/focus. */
.tada-exact-hero__cta {
position: absolute;
left: 5.86%;
top: 65.82%;
width: 10.84%;
height: 6.10%;
border-radius: 999px;
z-index: 4;
cursor: pointer;
container-type: size; /* lets the label size track the button height */
}
/* Hover/focus lays a full-size black layer with white "İncele" over the PNG's
own red button (same rounded pill, pixel-aligned). Invisible at rest. The
label is sized off the button's own height (cqh) so it matches the PNG text
exactly — hover only swaps the colour, never the type size. */
.tada-exact-hero__cta::after {
content: attr(data-label);
position: absolute;
inset: 0;
display: grid;
place-items: center;
border-radius: inherit;
background: #000;
color: #fff;
font-family: inherit;
font-weight: 600;
font-size: 31cqh;
line-height: 1;
letter-spacing: .01em;
opacity: 0;
transition: opacity 220ms ease;
pointer-events: none;
}
.tada-exact-hero__cta:hover::after,
.tada-exact-hero__cta:focus-visible::after { opacity: 1; }
.tada-exact-hero__cta:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
/* Slider-dot hotspots over the PNG's baked-in dots (no second visible dots). */
.tada-exact-hero__dot-hotspots {
position: absolute;
left: 45.02%;
top: 92.52%;
width: 10.05%;
height: 3.3%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4%;
z-index: 8;
}
.tada-exact-hero__dot-hotspots button {
appearance: none;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
border-radius: 999px;
}
.tada-exact-hero__dot-hotspots button:focus-visible { outline: 2px solid var(--tada-red); outline-offset: 2px; }
/* Video badge — outer element = golden position/size; inner wrapper = hover
scale; ring image = continuous rotation. Position vs animation kept apart. */
.tada-exact-hero__video {
position: absolute;
left: 7.291667%;
bottom: 8.333333%;
width: 7.284844%;
aspect-ratio: 1 / 1;
z-index: 9;
border-radius: 50%;
}
.tada-exact-hero__video[hidden] { display: none; }
.tada-exact-hero__video-anim {
position: absolute;
inset: 0;
display: grid;
place-items: center;
transform: scale(1);
transition: transform 250ms ease;
}
.tada-exact-hero__video:hover .tada-exact-hero__video-anim,
.tada-exact-hero__video:focus-visible .tada-exact-hero__video-anim { transform: scale(1.06); }
.tada-exact-hero__video-ring {
display: block;
width: 100%;
height: 100%;
animation: tada-hero-ring-spin 18s linear infinite;
}
.tada-exact-hero__video:hover .tada-exact-hero__video-ring,
.tada-exact-hero__video:focus-visible .tada-exact-hero__video-ring { animation-duration: 9s; }
.tada-exact-hero__video-play {
position: absolute;
left: 50%;
top: 50%;
width: 25.738%;
height: 30.057%;
transform: translate(-44%, -50%);
transition: transform 250ms ease;
}
.tada-exact-hero__video:hover .tada-exact-hero__video-play,
.tada-exact-hero__video:focus-visible .tada-exact-hero__video-play { transform: translate(-44%, -50%) scale(1.08); }
.tada-exact-hero__video:focus-visible { outline: 3px solid var(--tada-red); outline-offset: 5px; }
@keyframes tada-hero-ring-spin { to { transform: rotate(360deg); } }
/* Socials — real SVGs (no CSS mask), golden per-icon coords; each icon
animates via its own link, never a group transform. Order fixed in markup:
Facebook -> Instagram -> YouTube -> X. */
.tada-exact-hero__socials {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
}
.tada-exact-hero__social {
position: absolute;
top: 89.62963%;
height: 2.037037%;
display: block;
pointer-events: auto;
}
/* Inline SVGs so colour is CSS-controlled: black at rest, brand red on
hover/focus. Each icon moves on its own link (no group transform). */
.tada-exact-hero__social svg {
display: block;
width: 100%;
height: 100%;
fill: #000;
transition: transform 220ms ease, fill 220ms ease, opacity 220ms ease;
}
.tada-exact-hero__social:hover svg,
.tada-exact-hero__social:focus-visible svg { fill: var(--tada-red); transform: translateY(-2px) scale(1.06); opacity: .9; }
.tada-exact-hero__social--facebook { left: 83.854167%; width: 0.644531%; }
.tada-exact-hero__social--instagram { left: 85.844271%; width: 1.145833%; }
.tada-exact-hero__social--youtube { left: 88.292135%; width: 1.628177%; }
.tada-exact-hero__social--x { left: 91.222396%; width: 1.121198%; }
.tada-exact-hero__social:focus-visible { outline: 2px solid var(--tada-red); outline-offset: 5px; }
@media (min-width: 1101px) {
.tada-exact-hero { display: grid; }
.home-hero--legacy-mobile { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.tada-exact-hero__slide { transition: opacity 1ms linear, visibility 0s; }
.tada-exact-hero__media > img { transition: none; transform: none; }
.tada-exact-hero__video-ring { animation: none; }
.tada-exact-hero__video-anim,
.tada-exact-hero__video-play,
.tada-exact-hero__social svg { transition: fill 220ms ease; }
.tada-exact-hero__video:hover .tada-exact-hero__video-anim,
.tada-exact-hero__video:focus-visible .tada-exact-hero__video-anim { transform: scale(1); }
.tada-exact-hero__video:hover .tada-exact-hero__video-play,
.tada-exact-hero__video:focus-visible .tada-exact-hero__video-play { transform: translate(-44%, -50%); }
.tada-exact-hero__social:hover svg,
.tada-exact-hero__social:focus-visible svg { transform: none; }
}
/* First home hero slide. */
.home-hero {
position: relative;
width: min(calc(100% - 60px), 1860px);
min-height: 1020px;
margin: 30px auto 0;
overflow: hidden;
background: #eaeaea;
border-radius: 50px;
}
.home-hero__content { position: absolute; z-index: 5; top: 350px; left: 110px; width: 430px; }
.home-hero__eyebrow { margin: 0 0 16px; color: #9e262d; font-size: 25px; font-weight: 800; }
.home-hero h1 { max-width: 440px; margin: 0 0 24px; font-size: clamp(48px, 3.5vw, 68px); font-weight: 800; line-height: .94; letter-spacing: -2px; }
.home-hero__features { display: grid; gap: 15px; margin-bottom: 32px; font-size: 21px; font-weight: 700; }
.home-hero__features li::before { display: inline-grid; width: 24px; height: 24px; margin-right: 12px; place-items: center; border: 2px solid; border-radius: 50%; content: "✓"; font-size: 16px; }
.button { display: inline-flex; min-width: 200px; min-height: 60px; align-items: center; justify-content: center; padding: 12px 28px; font-weight: 700; text-decoration: none; border-radius: 999px; }
.button--primary { color: var(--tada-white); background: var(--tada-red); }
.home-hero__video { position: absolute; top: 400px; left: 0; display: grid; width: 150px; height: 150px; place-items: center; }
.home-hero__video img { position: absolute; inset: 0; width: 100%; }
.home-hero__art { position: absolute; z-index: 2; top: 205px; left: 500px; width: 820px; height: 700px; }
.home-hero__product { position: absolute; object-fit: contain; }
.home-hero__product--back-left { top: 165px; left: 80px; width: 365px; transform: rotate(-1deg); }
.home-hero__product--back-right { top: 165px; right: 35px; width: 365px; transform: rotate(1deg); }
.home-hero__product--front { z-index: 2; top: 95px; left: 265px; width: 430px; }
.home-hero__side { position: absolute; z-index: 1; top: 175px; right: -205px; width: 470px; height: 740px; }
.home-hero__cloth { position: absolute; top: 5px; right: 12px; width: 345px; transform: rotate(27deg); }
.home-hero__bowl { position: absolute; z-index: 2; top: 175px; right: -20px; width: 455px; }
.home-hero__decor { position: absolute; z-index: 3; pointer-events: none; }
.home-hero__decor > img { width: 100%; height: auto; filter: drop-shadow(0 12px 16px rgb(43 24 16 / 20%)); }
.home-hero .home-hero__parallax-layer { --parallax-x: 0px; --parallax-y: 0px; transform: translate3d(var(--parallax-x), var(--parallax-y), 0); will-change: transform; }
.home-hero__decor--oats-top { top: 20px; right: 80px; width: 205px; }
.home-hero__decor--oats-bottom { bottom: 65px; left: 135px; width: 135px; transform: rotate(15deg); }
.home-hero__decor--beans-top-secondary { display: none; }
.home-hero__decor--onion-ring { top: 130px; left: 245px; width: 72px; transform: rotate(-20deg); }
.home-hero__decor--tomato-mid { top: 295px; right: 28px; width: 68px; transform: rotate(-25deg); }
.home-hero__decor--meat-top { top: 205px; left: 510px; width: 92px; transform: rotate(8deg); }
.home-hero__decor--meat-bottom { bottom: 75px; left: 365px; width: 105px; transform: rotate(62deg); }
.home-hero__decor--meat-right { top: 565px; right: 380px; width: 75px; transform: rotate(-18deg); }
.home-hero__decor--onion-side { right: 260px; bottom: 75px; width: 100px; transform: rotate(-25deg); }
.home-hero__decor--tomato-side { right: 195px; bottom: 80px; width: 78px; transform: rotate(28deg); }
.home-hero__pagination { position: absolute; z-index: 5; bottom: 55px; left: 50%; transform: translateX(-50%); }
.home-hero__pagination { display: flex; gap: 15px; }
.home-hero__pagination button { display: block; width: 50px; height: 5px; padding: 0; background: #dfc6c8; border: 0; border-radius: 99px; cursor: pointer; }
.home-hero__pagination .is-active { background: #9e262d; }
.home-hero__pagination:empty { display: none; }
/* Static, unpositioned wrapper: .home-hero's absolutely-positioned children
(content/art/side/decor) keep using .home-hero itself as their containing
block, so introducing this per-slide grouping element requires no
coordinate changes at any breakpoint. [hidden] fully removes inactive
slides from layout and paint (matches native `display: none` behavior). */
.home-hero__slide[hidden] { display: none; }
.home-hero__socials { position: absolute; z-index: 5; right: 105px; bottom: 55px; display: flex; gap: 18px; }
.home-hero__socials img { width: 22px; height: 22px; object-fit: contain; }
/* Per-slide composition overrides for Hero Slaytları whose real layout
genuinely differs from slide 1's (a 3-pouch product arrangement) —
`slide_css_class` on the hero-slayti CPT drives which modifier applies.
Values below are measured from the client's own Tada.xd (the actual
Component 140/141 "Vişneli Yaprak Sarma" / "Bademli Kayısılı Biscotti"
mockups in the shared symbols library, not the visible Anasayfa
artboard), fit proportionally into the same .home-hero__art box slide 1
already uses at each breakpoint. Biscotti's own XD mockup only places 2
overlapping packages (no third/front copy), so its --front slot is left
unset rather than invented. */
.hero-slide--sarma .home-hero__product--back-right { top: 200.3px; left: 442.3px; width: 193.4px; height: auto; transform: none; }
.hero-slide--sarma .home-hero__product--back-left { top: 200.3px; left: 171.8px; width: 193.4px; height: auto; transform: none; }
.hero-slide--sarma .home-hero__product--front { top: 177.6px; left: 291px; width: 227.1px; height: auto; transform: none; }
.hero-slide--sarma .home-hero__decor--beans-top { top: 556.7px; left: 0px; width: 106.3px; }
.hero-slide--sarma .home-hero__decor--beans-top-secondary { top: 25.6px; left: 106.3px; width: 83.5px; display: block; }
.hero-slide--sarma .home-hero__decor--onion-ring { top: 361px; left: 690.9px; width: 44.2px; }
.hero-slide--sarma .home-hero__decor--tomato-mid { top: 580.3px; left: 741.3px; width: 71.1px; }
.hero-slide--sarma .home-hero__decor--onion-side { top: 774px; left: 1206.8px; width: 69.7px; right: auto; bottom: auto; }
.hero-slide--sarma .home-hero__decor--tomato-side { top: 473.4px; left: 1112.9px; width: 38.7px; right: auto; bottom: auto; }
.hero-slide--sarma .home-hero__decor--beans-front { top: 427.4px; left: 113.9px; width: 124.2px; }
.hero-slide--sarma .home-hero__decor--oats-top { top: 0px; left: 566.7px; width: 138px; display: block; }
.hero-slide--sarma .home-hero__decor--oats-bottom { top: 143.7px; left: 682px; width: 138px; display: block; transform: rotate(-180deg); }
.hero-slide--sarma .home-hero__decor--meat-top { top: 362.1px; left: 779.4px; width: 51.8px; right: auto; bottom: auto; }
.hero-slide--biscotti .home-hero__product--back-right { top: 54.2px; left: 279.9px; width: 477.8px; height: auto; transform: none; }
.hero-slide--biscotti .home-hero__product--back-left { top: 281.4px; left: 100.9px; width: 477.8px; height: auto; transform: none; }
.hero-slide--biscotti .home-hero__product--front { top: 163.5px; left: 201px; width: 477.8px; height: auto; transform: none; }
.hero-slide--biscotti .home-hero__decor--beans-top { top: 47.5px; left: 19px; width: 112.3px; }
.hero-slide--biscotti .home-hero__decor--beans-top-secondary { top: 552.4px; left: 672.5px; width: 147.5px; display: block; }
.hero-slide--biscotti .home-hero__decor--beans-front { top: 367.5px; left: 604.5px; width: 113.8px; }
.hero-slide--biscotti .home-hero__decor--onion-ring { top: 135px; left: 266.2px; width: 81.9px; }
.hero-slide--biscotti .home-hero__decor--oats-top { top: 0px; left: 594.5px; width: 95.9px; display: block; }
.hero-slide--biscotti .home-hero__decor--oats-bottom { top: 526.9px; left: 0px; width: 197.2px; display: block; }
@media (max-width: 1100px) {
.site-header__inner { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); padding-inline: 55px; column-gap: 26px; }
.site-header__logo { width: 88px; height: 40.05px; }
.site-header__column { gap: 20px; }
.site-header__catalogue { min-width: 134px; min-height: 40px; padding-inline: 16px; font-size: 13px; }
.site-header__language { width: 40px; height: 40px; font-size: 13px; }
.home-hero__content { left: 70px; }
.home-hero__art { left: 390px; transform: scale(.88); transform-origin: center; }
}
@media (min-width: 1101px) and (max-width: 1600px) {
.site-header,
.home-hero { width: calc(100% - 45px); margin-top: 22.5px; }
.site-header { min-height: 53px; }
.site-header__inner { grid-template-columns: minmax(0, 1fr) 117px minmax(0, 1fr); min-height: 53px; padding: 0 82px; column-gap: 34px; transform: translateY(22.5px); }
.site-header__logo { display: grid; height: 53.25px; width: 117px; place-items: center; }
.site-header__column--left { gap: 25px; }
.site-header__column--right { gap: 25px; }
.site-header__nav { gap: 29px; }
.site-header__nav-link, .site-header__nav-trigger { font-size: 13.5px; font-weight: 700; }
.site-header__search-button { width: 38px; height: 38px; }
.site-header__catalogue { min-width: 143px; min-height: 38px; padding-inline: 15px; font-size: 12px; }
.site-header__language { width: 38px; height: 38px; font-size: 12px; }
.site-header__search-bar { padding: 0 82px; transform: translateY(22.5px); }
/* Only the two full-width megamenus need this: they're siblings of
`.site-header__inner` (not descendants), so their `top: 100%` is
measured from `.site-header`'s own (untransformed) box — the
translateY(22.5px) above shifts the header's visible content down
without affecting that box's layout height. Kurumsal/Keşfet's
`.site-header__dropdown` lives inside `.site-header__inner` and so
already inherits the shift correctly with no extra offset. */
.site-header__megamenu { top: calc(100% + 34.5px); left: 82px; right: 82px; }
.home-hero { min-height: calc(100vh - 22.5px); background: radial-gradient(circle at 51% 46%, #fff 0, rgb(255 255 255 / 72%) 23%, rgb(255 255 255 / 20%) 51%, rgb(234 234 234 / 0%) 72%), #eaeaea; border-radius: 50px; }
.home-hero__content { top: 298px; left: 82.5px; width: 350px; transform: none; }
.home-hero__eyebrow { margin-bottom: 10px; font-size: 21px; font-weight: 900; }
.home-hero h1 { max-width: 350px; margin-bottom: 19px; font-size: 40px; font-weight: 900; line-height: .9; letter-spacing: -1px; }
.home-hero__title-first,
.home-hero__title-rest { display: block; }
.home-hero__title-rest { white-space: nowrap; }
.home-hero__features { display: grid; gap: 8px; margin-bottom: 16px; font-size: 15px; }
.home-hero__features li { display: flex; align-items: center; }
.home-hero__features li::before { width: 18px; height: 18px; flex: 0 0 18px; margin-right: 9px; font-size: 0; border: 0; border-radius: 0; background: url("../images/home/feature-check.svg") no-repeat center / contain; box-shadow: none; transform: none; content: ""; }
.home-hero .button { min-width: 150px; min-height: 45px; padding: 8px 18px; font-size: 13.5px; }
.home-hero__video { top: 295.5px; left: 4px; width: 108px; height: 108px; }
.home-hero__art { top: 200px; left: 365.23px; width: 690px; height: 560px; transform: none; }
.home-hero__product--back-left { top: 61.98px; left: 0; width: 372.65px; transform: none; }
.home-hero__product--back-right { top: 61.98px; right: auto; left: 290px; width: 372.65px; transform: none; }
.home-hero__product--front { z-index: 2; top: 27px; left: 116.89px; width: 425.64px; height: 446px; }
.home-hero__decor--oats-top,
.home-hero__decor--oats-bottom { display: none; }
.home-hero__decor--beans-top { top: -132.1px; right: -84.35px; width: 318.25px; transform: none; }
.home-hero__decor--beans-top { width: 350px; }
.home-hero__decor--beans-top-secondary { display: block; top: -88px; right: -6px; width: 233px; transform: none; }
.home-hero__decor--beans-front { z-index: 4; top: 258px; left: -10px; width: 232px; transform: none; }
.home-hero__decor--onion-ring { top: 12px; left: 158px; width: 143px; transform: none; }
.home-hero__decor--tomato-mid { top: 132px; right: 29px; width: 126px; transform: none; }
.home-hero__side { inset: 0; width: auto; height: auto; transform: none; }
.home-hero__cloth { top: 121.74px; right: 0; width: 278px; transform: none; }
.home-hero__bowl { top: 167.75px; right: 0; width: 259px; max-width: none; }
.home-hero__decor--meat-top { top: 120px; left: 356px; width: 165px; transform: none; }
.home-hero__decor--meat-bottom { bottom: 24px; left: 236px; width: 188px; transform: none; }
.home-hero__decor--meat-right { top: 404px; right: 285px; width: 121px; transform: none; }
.home-hero__decor--onion-side { right: 166px; bottom: 25px; width: 225px; transform: none; }
.home-hero__decor--tomato-side { right: 238px; bottom: 15px; width: 160px; transform: none; }
.home-hero__pagination { bottom: 45.5px; gap: 11.75px; }
.home-hero__pagination span { width: 37.5px; height: 5px; }
.home-hero__socials { right: 85.5px; bottom: 46px; gap: 19.67px; }
.home-hero__socials img { width: 16.5px; height: 16.5px; }
.hero-slide--sarma .home-hero__decor--oats-top { top: -35.8px; left: 492.5px; width: 149.1px; display: block; }
.hero-slide--sarma .home-hero__decor--beans-front { top: 48.6px; left: 153.9px; width: 78.3px; }
.hero-slide--sarma .home-hero__decor--onion-ring { top: 332.3px; left: 651.7px; width: 75.8px; }
.hero-slide--sarma .home-hero__decor--tomato-mid { top: 507.3px; left: 588.5px; width: 126.4px; }
.hero-slide--sarma .home-hero__decor--onion-side { top: 580.6px; left: 268.9px; width: 176.9px; right: auto; bottom: auto; }
.hero-slide--sarma .home-hero__decor--tomato-side { top: 743.5px; left: 238.6px; width: 182px; right: auto; bottom: auto; }
.hero-slide--sarma .home-hero__decor--meat-top { top: 167.2px; left: 342.2px; width: 141.5px; right: auto; bottom: auto; }
.hero-slide--sarma .home-hero__product--back-left { top: 151.2px; left: 57.8px; width: 197.1px; height: auto; transform: none; }
.hero-slide--sarma .home-hero__product--front { top: 118px; left: 227.1px; width: 247.7px; height: auto; transform: none; }
.hero-slide--sarma .home-hero__product--back-right { top: 151.2px; left: 338.3px; width: 197.1px; height: auto; transform: none; }
.hero-slide--biscotti .home-hero__decor--oats-top { top: -5.7px; left: 10px; width: 106.1px; display: block; }
.hero-slide--biscotti .home-hero__decor--beans-front { top: 145.2px; left: 234.7px; width: 93.5px; }
.hero-slide--biscotti .home-hero__decor--onion-ring { top: 495.2px; left: 10px; width: 116.2px; }
.hero-slide--biscotti .home-hero__decor--onion-side { top: 707.3px; left: 824.9px; width: 303.3px; right: auto; bottom: auto; }
.hero-slide--biscotti .home-hero__product--back-left { top: 208.6px; left: 15px; width: 194.6px; height: auto; transform: none; }
.hero-slide--biscotti .home-hero__product--front { top: 180.2px; left: 121.1px; width: 813.2px; height: auto; transform: none; }
.hero-slide--biscotti .home-hero__product--back-right { top: 195.3px; left: 917.2px; width: 86.4px; height: auto; transform: none; }
}
/* Original 1920×1080 XD/design-reference geometry. Values come from preview.html element boxes. */
@media (min-width: 1601px) {
/* Cap at the viewport so the 1920-native fixed widths never exceed the
screen between 1601 and 1859px (real-user 1663 sat 99px over). At >=1920
both min()s resolve to the native 1860/1640, so 1920 is unchanged. */
.site-header,
.home-hero { width: min(1860px, calc(100vw - 60px)); margin-top: 30px; }
.site-header { min-height: 70.74px; }
.site-header__inner { grid-template-columns: minmax(0, 1fr) 156px minmax(0, 1fr); width: min(1640px, calc(100vw - 100px)); min-height: 70.74px; padding: 0; margin: 30px auto 0; column-gap: 46px; }
.site-header__logo { width: 155.72px; height: 70.86px; }
.site-header__column--left { gap: 33px; }
.site-header__column--right { gap: 33px; }
.site-header__nav { gap: 39px; }
.site-header__nav-link, .site-header__nav-trigger { font-size: 18px; font-weight: 700; }
.site-header__search-button { width: 50px; height: 50px; }
.site-header__catalogue { min-width: 190px; min-height: 50px; font-size: 16px; }
.site-header__language { width: 50px; height: 50px; font-size: 16px; }
.site-header__search-bar { padding: 0; width: 1640px; margin: 0 auto; }
/* .site-header__inner is 1640px centered inside the 1860px .site-header
box (their shared containing block for the megamenu below) — that's
a 110px inset on each side, with no translateY hack at this
breakpoint so no vertical compensation is needed here. */
.site-header__megamenu { left: 110px; right: 110px; }
.home-hero { min-height: calc(100vh - 30px); background: radial-gradient(circle at 51% 46%, #fff 0, rgb(255 255 255 / 72%) 23%, rgb(255 255 255 / 20%) 51%, rgb(234 234 234 / 0%) 72%), #eaeaea; border-radius: 50px; }
.home-hero__content { top: 396.98px; left: 109.93px; width: 480px; }
.home-hero__eyebrow { margin-bottom: 15px; font-size: 28px; font-weight: 900; }
.home-hero h1 { max-width: 500px; margin-bottom: 20px; font-size: 52px; font-weight: 900; line-height: 48px; letter-spacing: -1px; }
.home-hero__title-first,
.home-hero__title-rest { display: block; }
.home-hero__title-rest { white-space: nowrap; }
.home-hero__features { display: grid; gap: 20px; margin-bottom: 30px; font-size: 20px; }
.home-hero__features li { display: flex; align-items: center; }
.home-hero__features li::before { width: 24px; height: 24px; flex: 0 0 24px; margin-right: 10px; font-size: 0; border: 0; background: url("../images/home/feature-check.svg") no-repeat center / contain; content: ""; }
.home-hero .button { min-width: 200px; min-height: 60px; padding: 12px 24px; font-size: 18px; }
.home-hero__video { top: 420px; left: 0; width: 144px; height: 144px; }
.home-hero__art { top: 133.31px; left: 335.54px; width: 1247.52px; height: 839px; transform: none; }
.home-hero__product--back-left { top: 214.79px; left: 144.55px; width: 500px; height: 500px; object-fit: cover; transform: none; }
.home-hero__product--back-right { top: 214.79px; right: auto; left: 544.55px; width: 500px; height: 500px; object-fit: cover; transform: none; }
.home-hero__product--front { z-index: 2; top: 169.72px; left: 144.55px; width: 900px; height: 600px; object-fit: cover; object-position: top; }
.home-hero__decor--oats-top,
.home-hero__decor--oats-bottom { display: none; }
.home-hero__decor--beans-top { top: 0; right: 24.47px; width: 365.4px; transform: none; }
.home-hero__decor--beans-top-secondary { display: block; top: 92.62px; right: auto; left: 813.98px; width: 283px; transform: none; }
.home-hero__decor--beans-front { z-index: 4; top: 496.68px; left: 168.06px; width: 312.89px; transform: none; }
.home-hero__decor--onion-ring { top: 163.74px; left: 378.34px; width: 278.41px; transform: none; }
.home-hero__decor--tomato-mid { top: 327.68px; right: 125.96px; width: 235.51px; transform: none; }
.home-hero__side { inset: 0; width: auto; height: auto; transform: none; }
.home-hero__cloth { top: 159px; right: 0; width: 370px; transform: none; }
.home-hero__bowl { top: 218px; right: 0; width: 350px; max-width: none; }
.home-hero__decor--meat-top { top: 184.16px; left: 495.32px; width: 286.23px; transform: none; }
.home-hero__decor--meat-bottom { bottom: -102.51px; left: 335.54px; width: 339.1px; transform: none; }
.home-hero__decor--meat-right { top: 553.52px; right: 283.16px; width: 259.73px; transform: none; }
.home-hero__decor--onion-side { right: 126.93px; bottom: -87.41px; width: 367.1px; transform: none; }
.home-hero__decor--tomato-side { right: 212.89px; bottom: -87.41px; width: 284.38px; transform: none; }
.home-hero__pagination { bottom: 61px; gap: 17px; }
.home-hero__pagination span { width: 50px; height: 6px; }
.home-hero__socials { right: 113px; bottom: 60px; gap: 26px; }
.home-hero__socials img { width: 22px; height: 22px; }
.hero-slide--sarma .home-hero__decor--oats-top { top: 57.5px; left: 808.1px; width: 198.8px; display: block; }
.hero-slide--sarma .home-hero__decor--beans-front { top: 155.7px; left: 356.6px; width: 104.5px; }
.hero-slide--sarma .home-hero__decor--onion-ring { top: 485.4px; left: 1020.4px; width: 101.1px; }
.hero-slide--sarma .home-hero__decor--tomato-mid { top: 688.9px; left: 936.1px; width: 168.5px; }
.hero-slide--sarma .home-hero__decor--onion-side { top: 674.9px; left: 358.5px; width: 235.9px; right: auto; bottom: auto; }
.hero-slide--sarma .home-hero__decor--tomato-side { top: 864.3px; left: 318.1px; width: 242.6px; right: auto; bottom: auto; }
.hero-slide--sarma .home-hero__decor--meat-top { top: 194.3px; left: 456.2px; width: 188.7px; right: auto; bottom: auto; }
.hero-slide--sarma .home-hero__product--back-left { top: 275px; left: 228.5px; width: 262.8px; height: auto; transform: none; object-fit: contain; }
.hero-slide--sarma .home-hero__product--front { top: 236.4px; left: 454.3px; width: 330.2px; height: auto; transform: none; object-fit: contain; }
.hero-slide--sarma .home-hero__product--back-right { top: 275px; left: 602.5px; width: 262.8px; height: auto; transform: none; object-fit: contain; }
.hero-slide--biscotti .home-hero__decor--oats-top { top: 92.6px; left: 83.6px; width: 141.5px; display: block; }
.hero-slide--biscotti .home-hero__decor--beans-front { top: 268px; left: 464.4px; width: 124.7px; }
.hero-slide--biscotti .home-hero__decor--onion-ring { top: 674.8px; left: 157.8px; width: 155px; }
.hero-slide--biscotti .home-hero__decor--onion-side { top: 822.2px; left: 1099.8px; width: 404.3px; right: auto; bottom: auto; }
.hero-slide--biscotti .home-hero__product--back-left { top: 341.6px; left: 15px; width: 259.5px; height: auto; transform: none; object-fit: contain; }
.hero-slide--biscotti .home-hero__product--front { top: 308.6px; left: 156.5px; width: 1084.3px; height: auto; transform: none; object-fit: contain; }
.hero-slide--biscotti .home-hero__product--back-right { top: 326.2px; left: 1217.9px; width: 115.2px; height: auto; transform: none; object-fit: contain; }
}
@media (max-width: 1100px) {
.site-header, .home-hero { width: calc(100% - 48px); }
.site-header__inner { grid-template-columns: 44px 1fr 44px; padding-inline: 24px; }
.site-header__nav, .site-header__actions { display: none; }
/* align-self: center for the same reason .site-header__search-button
already carries it — .site-header__inner is align-items: stretch (needed
so the desktop dropdown wrappers span the full row), and an item with a
definite height cannot stretch, so it silently lands at the row's TOP
instead. Measured off-centre here: logo -7.6px and hamburger -4.0px at
390px, -15.0px and -13.0px at 768px, against a search button sitting at
exactly 0. It only became obvious once the logo was sized down to the
reference — a shorter box top-aligned in the same row moves its centre
further up. Desktop measures 0.0 for every item (the logo is the tallest
thing in the row there, so the row is exactly its height) and is
deliberately left out of this fix. */
.site-header__logo { grid-column: 2; align-self: center; }
.site-header__menu-button { display: block; grid-column: 3; align-self: center; }
/* More compact search circle + hamburger relative to the logo, while the
button hit areas stay a full 44x44 touch target. */
.site-header__search-button { width: 44px; height: 44px; }
.site-header__search-icon { width: 14px; height: 14px; }
/* Flex column instead of margins on the bars. The button is display:block
with no padding here, so the bars' own top/bottom margins collapsed
through it and the group sat off-centre inside the 44px hit area — which
only became visible once the hamburger was sized up to the reference at
<=767px below. `gap` is set per band; 4px here reproduces the previous
collapsed spacing exactly, so the 768-1100px tablet header is unchanged. */
.site-header__menu-button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 44px;
height: 44px;
padding: 0;
}
.site-header__menu-button > span:not(.screen-reader-text) { width: 22px; height: 2px; margin: 0; }
.home-hero { min-height: 900px; }
.home-hero__content { top: 180px; left: 50px; }
.home-hero__art { top: 350px; left: 50%; transform: translateX(-50%) scale(.78); transform-origin: center; }
.home-hero__side { opacity: .65; }
.home-hero__video { display: none; }
}
/* ---- Header, tablet only (700–1100px) ----
The hero below this width is the desktop composition scaled down, so the
header has to read at that scale too. At 820px the logo measured 88×40
against two 44px controls: the brand mark was barely twice the width of a
utility button, which is why it read as a phone header sitting on top of a
desktop-language card. Desktop is 117×53 for reference.
`min-height` drops with it, and that is the second half of the fix: the
94px row was carrying ~27px of empty space above and below a 40px logo, and
that padding — not the hero — is what made the gap between the logo row and
the artwork look loose. 76px keeps ~13px of breathing room around the taller
logo. `.site-header` mirrors `.site-header__inner`'s min-height by design
(see the note on `.site-header`), so both move together.
Phones (<=699px) and desktop (>=1101px) keep their own sizes untouched. */
@media (min-width: 700px) and (max-width: 1100px) {
.site-header,
.site-header__inner { min-height: 76px; }
/* 108px keeps the source logo's 96/43.69 aspect exactly (108 / 2.1974). */
.site-header__logo { width: 108px; height: 49.15px; }
/* Trimmed ~7% so the two controls read as secondary to the larger logo,
while staying well above a comfortable touch target. */
.site-header__inner { grid-template-columns: 41px 1fr 41px; }
.site-header__search-button { width: 41px; height: 41px; }
.site-header__menu-button { width: 41px; height: 41px; }
}
@media (max-width: 767px) {
.site-header, .home-hero { width: calc(100% - 24px); margin-top: 12px; }
/* The header floats over the hero card and is read as part of it, so the
card's edge — not the header's own — is the frame everything in here is
measured from. They did not match: the card is calc(100% - 32px)
(16px gutters, see .tada-hero-live) while the header was
calc(100% - 24px), so the header overhung it by 4px a side and pushed
the search button and hamburger that much further inboard than the
reference. Matching the two lets the padding below be a plain
proportion of the card. */
.site-header { width: calc(100% - 32px); }
.site-header { min-height: 76px; }
/* The whole header band sat 0.98% of the card width (~3.5px at 390px) above
the reference's — uniformly, once the per-element centring was fixed.
Closed by redistributing the block padding rather than by moving the
header: the total stays 24px, so `min-height` still governs and the
header's own box (and therefore its bottom edge, which is what the hero
artwork's top band has to clear) does not move at all. Items are centred
in the content box, so a +3.5px top padding shifts them down by exactly
3.5px. */
/* 4.64% is where the reference's search ring sits in from the card edge,
measured as a proportion of the card's own width. Expressed as a
percentage rather than a px value because the header now spans exactly
the card, so one number holds at every phone width instead of needing a
tuned value per band. */
.site-header__inner { min-height: 76px; padding-block: 15.5px 8.5px; padding-inline: 4.64%; }
/* The search ring fills its whole 44px hit area, but the hamburger's bars
are 37px inside the same 44px box — so with both boxes inset equally the
bars read ~3.5px further in than the ring, against a reference where the
two are symmetric. Pulling the box out by exactly that half-difference
lines the INK up on both sides; the 44px touch target is unchanged and
still sits inside the card. */
.site-header__menu-button { margin-inline-end: -3.5px; }
/* Phone header sizing, measured against references/mobile-hero-reference.png
as a proportion of the hero card's own width (the header sits on that
card, so the card is the frame the eye compares against). Ink-to-ink,
the reference logo is 22.55% of the card and the hamburger 10.28%; this
band previously shipped 29.33% and 6.15% — a logo ~30% too wide next to
a hamburger ~40% too small. The search circle measured 12.29% against
the reference's 12.94% and is deliberately left alone: it only read as
oversized because it draws its full 44px hit area as visible ink while
the undersized hamburger drew half of its own. 81px == 22.55% of the
358px card at 390px; height keeps the logo's 2.197 aspect ratio. */
.site-header__logo { width: 81px; height: 36.87px; }
/* 37px == 10.28% of the card; the 44px hit area is untouched. gap 9px puts
the three 2px bars at a 24px overall height (reference: 6.80% of card
== 24.3px here). */
.site-header__menu-button { gap: 9px; }
.site-header__menu-button > span:not(.screen-reader-text) { width: 37px; }
.search-dialog { top: 72px; left: 0; }
.search-dialog__controls { flex-wrap: wrap; }
.home-hero { min-height: 760px; border-radius: 30px; }
.home-hero__content { top: 115px; left: 24px; width: calc(100% - 48px); }
.home-hero__eyebrow { font-size: 18px; }
.home-hero h1 { max-width: 300px; font-size: 44px; letter-spacing: -1px; }
.home-hero__features { gap: 10px; font-size: 16px; }
.button { min-width: 150px; min-height: 50px; }
.home-hero__art { top: 390px; width: 700px; transform: translateX(-50%) scale(.62); }
.home-hero__side { top: 390px; right: -250px; transform: scale(.72); }
.home-hero__decor--meat-top, .home-hero__decor--meat-bottom, .home-hero__decor--meat-right, .home-hero__decor--onion-side, .home-hero__decor--tomato-side { display: none; }
.home-hero__pagination { bottom: 24px; }
.home-hero__socials { right: 24px; bottom: 22px; }
}
/* Very narrow phones (≤340px) only. The mobile-artwork hero's Vişneli slide
(assets/css/hero-v2.css) needs real clearance between the live header's
bottom edge and the first baked product pixel — the artwork itself can't
be transformed or resized (project decision), so the header is the only
thing left that can move. A small, proportional compaction of the whole
header at this one narrow band buys that clearance without touching
layout at 341px+. Logo stays in the same 3-column grid (still true-
centred, just smaller); search/hamburger shrink together to the same
scale so they read as one consistent, slightly smaller header, not a
mismatched mix of sizes. */
@media (max-width: 340px) {
.site-header,
.site-header__inner {
min-height: 60px;
}
/* Same band-position fix as <=767px, retuned for this band: here the
header's height is content-driven (38px buttons + 24px padding = 62px,
above the 60px min-height), so the centre needs +2.2px rather than
+3.5px to land on the reference's 11.53% of card width. Total padding is
again unchanged, so the header box keeps its height. */
.site-header__inner {
padding-block: 14.2px 9.8px;
}
/* Bars are 30px in a 38px box here, so the half-difference is 4px. */
.site-header__menu-button {
margin-inline-end: -4px;
}
/* Same reference proportions as the <=767px band above, against this band's
own card width (288px at 320px viewport): logo 22.55% -> 65px,
hamburger 10.28% -> 30px, bar group 6.80% -> 20px (three 2px bars,
gap 7px). The 38px buttons are this band's existing compaction and stay. */
.site-header__logo {
width: 65px;
height: 29.58px;
}
.site-header__search-button,
.site-header__menu-button {
width: 38px;
height: 38px;
}
.site-header__search-icon {
width: 12px;
height: 12px;
}
.site-header__menu-button {
gap: 7px;
}
.site-header__menu-button > span:not(.screen-reader-text) {
width: 30px;
}
}
/* Sprint 02 (v4): home "Kategorilerimiz" section. Desktop only (min-width: 1101px).
Card colors come from each `urun-kategorisi` term's ACF field via the inline
--category-color custom property, so a 6th+ category needs no CSS change.
Media geometry below is exact per-term for the 5 categories this theme ships
with (slug-keyed modifiers); any other category gets the generic percentage
-based box a few rules down. See Sprint 02 v4 report for full measurements. */
@media (min-width: 1101px) {
.home-categories { padding: 50px 0 90px; }
.home-categories__head { width: calc(100% - 45px); margin: 0 auto; }
.home-categories__title { margin: 0 0 40px; font-family: Montserrat, Arial, sans-serif; font-size: 28.6px; font-weight: 700; text-align: center; color: var(--tada-black); }
/* Three layers: outer container (this rule) > arrow controls > slider viewport/track.
Arrows sit in the gap between the track and the container edge, never over a card. */
.home-categories__layout { display: flex; align-items: center; gap: 20px; width: calc(100% - 45px); max-width: 1395px; margin: 0 auto; }
.home-categories__arrow {
flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; cursor: pointer;
background-color: var(--tada-white); color: var(--tada-gray-400); border: 1px solid var(--tada-gray-200); border-radius: 50%;
transition: background-color .28s ease-out, color .28s ease-out, border-color .28s ease-out, box-shadow .28s ease-out;
}
.home-categories__arrow-icon { width: 100%; height: 100%; fill: currentColor; display: block; }
.home-categories__arrow:hover,
.home-categories__arrow:focus-visible {
background-color: var(--tada-red); color: var(--tada-white); border-color: var(--tada-red); box-shadow: var(--tada-shadow-soft);
}
.home-categories__arrow[aria-disabled="true"] { cursor: default; }
.home-categories__viewport { flex: 1; min-width: 0; overflow: hidden; }
.home-categories__track { display: flex; gap: 30px; padding: 0; margin: 0; list-style: none; transition: transform .35s ease-out; will-change: transform; }
.category-card { flex: 0 0 223px; }
.category-card__link {
position: relative;
display: block;
width: 100%;
height: 376.5px;
overflow: hidden;
text-decoration: none;
color: inherit;
background: transparent;
border: 1px solid #eaeaea;
border-radius: 22.6px;
transition: background-color .3s ease-out, border-color .3s ease-out;
}
.category-card__media { position: absolute; top: 18%; left: 8%; right: 8%; height: 56%; overflow: hidden; transition: transform .3s ease-out .07s; }
.category-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 6%)); transition: filter .3s ease-out .07s; }
.category-card__title {
position: absolute;
top: 293.7px;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 45.2px;
margin: 0;
padding: 0 14px;
font-family: Montserrat, Arial, sans-serif;
font-weight: 800;
font-size: 21.1px;
line-height: 22.6px;
text-align: center;
color: var(--tada-black);
transition: top .3s ease-out .04s, color .3s ease-out .04s;
}
.category-card__cta {
position: absolute;
left: 50%;
bottom: 24.1px;
padding: 8px 20px;
font-size: 10px;
font-weight: 700;
color: #fff;
white-space: nowrap;
background: transparent;
border: 1.5px solid #fff;
border-radius: 999px;
opacity: 0;
transform: translate(-50%, 8px) scale(.92);
transition: opacity .3s ease-out .11s, transform .28s ease-out .11s, background-color .2s ease-out, color .2s ease-out;
}
/* Hover state: color is data-driven (--category-color, set inline from each
term's ACF field), so no per-category CSS rule is needed for new categories.
A small transition-delay stagger (bg → title → media → CTA) makes the
reveal feel sequential; each property keeps its original duration. */
.category-card__link:hover,
.category-card__link:focus-visible { background: var(--category-color, #9e262d); border-color: transparent; }
.category-card__link:hover .category-card__title,
.category-card__link:focus-visible .category-card__title { top: 18px; color: #fff; }
.category-card__link:hover .category-card__media,
.category-card__link:focus-visible .category-card__media { transform: translateY(9px) scale(.88); }
.category-card__link:hover .category-card__media img,
.category-card__link:focus-visible .category-card__media img { filter: drop-shadow(0 14px 18px rgb(0 0 0 / 20%)); }
.category-card__link:hover .category-card__cta,
.category-card__link:focus-visible .category-card__cta { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* CTA's own micro-interaction: mouse directly over the pill while the card is already hovered/focused. */
.category-card__link:hover .category-card__cta:hover,
.category-card__link:focus-visible .category-card__cta:hover {
background: #fff;
color: var(--category-color, #9e262d);
transform: translate(-50%, 0) scale(1.02);
}
.home-categories__pagination { display: flex; justify-content: center; align-items: center; gap: 12.75px; margin-top: 42.5px; padding: 0; }
.home-categories__pagination button { display: block; width: 42.5px; height: 5.1px; padding: 0; background: #000; opacity: .2; border: 0; border-radius: 3px; cursor: pointer; }
.home-categories__pagination button.is-active { opacity: 1; }
.home-categories__pagination:empty { display: none; }
/* Exact per-term geometry (measured from Tada.xd) for the theme's 5 shipped categories. */
.category-card--hazir-yemek .category-card__media { top: 38.4px; left: 5.27px; right: 4.52px; height: 219.2px; }
.category-card--hazir-yemek .category-card__title { top: 293.7px; }
.category-card--glutensiz-urunler .category-card__media { top: 13.55px; left: 7.53px; right: 7.53px; height: 267.3px; }
.category-card--glutensiz-urunler .category-card__title { top: 294.4px; }
.category-card--balik-urunleri .category-card__media { top: 28.99px; left: 20.33px; right: 20.33px; height: 235.3px; }
.category-card--balik-urunleri .category-card__title { top: 294.4px; }
.category-card--konserveler .category-card__media { top: 79.07px; left: 0; right: 0; height: 174.7px; }
.category-card--konserveler .category-card__title { top: 305.7px; }
.category-card--sandvicler .category-card__media { top: 49.86px; left: 20.33px; right: 20.33px; height: 201.9px; }
.category-card--sandvicler .category-card__title { top: 305.7px; }
}
/* Original 1920×1080 XD geometry for the category row (native/measured). */
@media (min-width: 1601px) {
.home-categories__layout { max-width: 1808px; width: min(calc(100% - 60px), 1808px); gap: 24px; }
.home-categories__arrow { width: 54px; height: 54px; }
.home-categories__title { font-size: 38px; }
.category-card { flex-basis: 304px; }
.category-card__link { height: 500px; border-radius: 30px; }
.category-card__title { top: 390px; min-height: 60px; font-size: 28px; line-height: 30px; }
.category-card__cta { bottom: 32px; font-size: 13px; padding: 10px 26px; }
.category-card__link:hover .category-card__title,
.category-card__link:focus-visible .category-card__title { top: 24px; }
.category-card__link:hover .category-card__media,
.category-card__link:focus-visible .category-card__media { transform: translateY(12px) scale(.88); }
.category-card--hazir-yemek .category-card__media { top: 51px; left: 7px; right: 6px; height: 291px; }
.category-card--hazir-yemek .category-card__title { top: 390px; }
.category-card--glutensiz-urunler .category-card__media { top: 18px; left: 10px; right: 10px; height: 355px; }
.category-card--glutensiz-urunler .category-card__title { top: 391px; }
.category-card--balik-urunleri .category-card__media { top: 38.5px; left: 27px; right: 27px; height: 312.5px; }
.category-card--balik-urunleri .category-card__title { top: 391px; }
.category-card--konserveler .category-card__media { top: 105px; left: 0; right: 0; height: 232px; }
.category-card--konserveler .category-card__title { top: 406px; }
.category-card--sandvicler .category-card__media { top: 66.2px; left: 27px; right: 27px; height: 268.05px; }
.category-card--sandvicler .category-card__title { top: 406px; }
.home-categories__pagination { gap: 15px; margin-top: 50px; }
.home-categories__pagination button { width: 50px; height: 6px; }
}
/* Kategorilerimiz — tablet + mobil responsive (<=1100px). The desktop block
above (min-width:1101px) is untouched. Same slider markup + main.js slider
are reused; the JS computes perPage from the live card width, so sizing the
cards 2-up (769-1100) / 1-up (<=768) here makes it page correctly with no JS
change. Card internals are re-declared because the desktop rules are all
min-width scoped. Title + CTA are shown at rest (touch has no hover). */
@media (max-width: 1100px) {
.home-categories { padding: 36px 0 56px; }
.home-categories__head { width: calc(100% - 32px); margin: 0 auto; }
.home-categories__title { margin: 0 0 24px; font-family: Montserrat, Arial, sans-serif; font-size: 24px; font-weight: 700; text-align: center; color: var(--tada-black); }
.home-categories__layout { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 0 auto; }
.home-categories__arrow {
flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
background-color: var(--tada-white); color: var(--tada-gray-400); border: 1px solid var(--tada-gray-200); border-radius: 50%;
}
.home-categories__arrow-icon { width: 100%; height: 100%; fill: currentColor; display: block; }
.home-categories__arrow[aria-disabled="true"] { opacity: .4; }
.home-categories__viewport { flex: 1; min-width: 0; overflow: hidden; touch-action: pan-y; }
.home-categories__track { display: flex; gap: 16px; padding: 0; margin: 0; list-style: none; transition: transform .35s ease-out; }
/* 2 cards per view on tablet; exact halves so JS floor()s perPage to 2. */
.category-card { flex: 0 0 calc((100% - 16px) / 2); }
.category-card__link {
position: relative; display: block; width: 100%; height: 340px; overflow: hidden;
border-radius: 20px; background: var(--tada-gray-100); border: 1px solid var(--tada-gray-200); text-decoration: none;
}
.category-card__media { position: absolute; top: 12%; left: 8%; right: 8%; height: 50%; overflow: hidden; }
.category-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.category-card__title {
position: absolute; top: 65%; left: 0; right: 0; padding: 0 12px; text-align: center;
font-family: 'Baloo 2', Arial, sans-serif; font-size: 19px; font-weight: 700; line-height: 1.05; color: var(--tada-black);
}
.category-card__cta {
position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); opacity: 1;
display: inline-block; padding: 8px 22px; border-radius: 999px; white-space: nowrap;
background: var(--category-color, #9e262d); color: #fff; font-family: Montserrat, Arial, sans-serif; font-size: 12px; font-weight: 700;
}
.home-categories__pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 24px; padding: 0; }
.home-categories__pagination button { display: block; width: 34px; height: 5px; padding: 0; background: #000; opacity: .2; border: 0; border-radius: 3px; cursor: pointer; }
.home-categories__pagination button.is-active { opacity: 1; }
.home-categories__pagination:empty { display: none; }
}
/* ============================================================================
* TABLET BAND (431–1100px) — THE SHARED CONTENT CONTAINER.
*
* Every homepage section's wrapper is sized inside its own
* `@media (max-width: 1100px)` block, and each one was tuned for a PHONE. On a
* tablet those phone caps are what the page actually gets, so at 820px the
* content columns measured: header/hero/footer 772px (24px gutter), categories
* 788/796px, Satış Noktaları and Tarihçe 640px (90px gutter), Kataloglar and
* the fabrika video 560px (130px gutter), the brand logo row 440px (190px
* gutter) and Tada Mutfak a full-bleed 820px (0 gutter). Nine different
* measures on one page — that, not any vertical gap, is what made the tablet
* page read as sparse and unfinished: the vertical rhythm is already clean
* (every section sits flush against the previous one, 22–56px of section
* padding, no reserved dead space anywhere).
*
* So this and the sibling blocks below do ONE structural thing: put every
* section on the same measure as the header, the hero card and the footer —
* `calc(100% - 48px)`, i.e. a 24px gutter — and then, only where the extra
* width actually buys a better composition, upgrade the layout itself
* (2-up → 3-up cards, stacked → two-column panels).
*
* Scoped `min-width: 431px` so the phone layouts are untouched, and capped at
* 1100px so the desktop layouts are untouched. Each block sits next to the
* mobile block it refines rather than in an override pile at the end of the
* file, so the two are read together.
* ==========================================================================*/
@media (min-width: 431px) and (max-width: 1100px) {
.home-categories__head,
.home-categories__layout {
width: calc(100% - 48px);
max-width: none;
}
}
/* 3 category cards once there is genuinely room for them. Below this the cards
get too narrow for the two-line category names and the CTA pill. The slider
needs no JS change: main.js derives perPage from the live card width. */
@media (min-width: 900px) and (max-width: 1100px) {
.category-card { flex: 0 0 calc((100% - 32px) / 3); }
}
/* Mobile: 1 category card per view (<=699px). The product image fills more of
the card (was a small ~50%-height generic panel) — the box stays the same
size, only the image panel grows and the title drops to make room; each
asset keeps its own ratio via object-fit:contain. Per-category cards that
already declare a larger px media panel keep it (higher specificity).
Upper bound 768 → 699: every rule in here is a 1-up phone tuning (taller
card, bigger media panel, single-line name), and at 700–768px there is room
for the 2-up tablet card the block above already defines. Phones are
unaffected — 390px stays in this block exactly as before. */
@media (max-width: 699px) {
.category-card { flex: 0 0 100%; }
.category-card__link { height: 360px; }
/* Product image is larger/more dominant in the card (fills ~66% of the height
with less padding); box/pouch/tin keep their own ratio via contain. */
.category-card__media { top: 5%; left: 4%; right: 4%; height: 66%; }
/* Category name on a single line (was wrapping to 2), with a clamped size so
even the longest name fits without wrapping or spilling the card; a
balanced gap is left above the CTA. */
.category-card__title { top: 74%; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(13px, 4.6vw, 20px); }
/* The XD manual line break (span-separated) collapses to a space on mobile so
the name is one line; desktop keeps its two-line stack. */
.category-card__title-br { display: none; }
.category-card__cta { bottom: 20px; }
}
/* Sprint 03: home "Satış Noktalarımız" section. Desktop only (min-width: 1101px).
The Turkey-map GIF's own frame (1920x1080) has a large transparent margin
around the actual artwork (measured content box: 423,306 - 1531,774, i.e.
1108x468 within the 1920x1080 canvas). To show it at the exact measured
position/size without distorting or trimming the source file, the frame is
displayed at a uniform upscale inside an overflow:hidden window sized to
match the artwork's own aspect ratio (899.66:380, same ratio as the content
box) — the file itself is never cropped, only windowed via CSS. */
@media (min-width: 1101px) {
/* Top padding kept small on purpose: Categories' own frozen bottom padding
(90px, see .home-categories above) already accounts for most of the
measured 100px gap between the pagination dots and this title —
Categories can't be touched, so only this section's own top offset is
tuned to land the combined gap on the measured value. */
.home-sales-map { padding: 10px 0 90px; }
.home-sales-map__head { width: calc(100% - 45px); max-width: 1230px; margin: 0 auto; text-align: center; }
.home-sales-map__title { margin: 0 0 16px; font-family: Montserrat, Arial, sans-serif; font-size: 28.5px; font-weight: 700; color: var(--tada-black); }
.home-sales-map__description { max-width: 721px; margin: 0 auto 32px; font-size: 13.5px; line-height: 19.5px; font-weight: 500; color: var(--tada-gray-700); }
.home-sales-map__panel {
position: relative;
container-type: inline-size;
width: calc(100% - 45px);
max-width: 1230px;
aspect-ratio: 1230 / 345;
margin: 0 auto;
overflow: hidden;
background: var(--sales-map-bg, #9e262d);
border-radius: var(--tada-radius-md);
}
.home-sales-map__decor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Frame scaled ~2.5% down from the raw measured box and recentered within
the panel's left-hand area (left of the channel-logo grid) — the crop
percentages on .home-sales-map__map below are unchanged, so exactly
the same GIF content stays visible, just smaller. */
/* Map windowed a touch wider horizontally (fills more of the panel toward the
inner grid) while keeping its ~2.37 aspect so the GIF isn't distorted, and
staying clear of the channel slider on the right. */
.home-sales-map__map-frame { position: absolute; top: 1.8cqw; left: 5cqw; width: 58cqw; height: 24.49cqw; overflow: hidden; }
.home-sales-map__map {
position: absolute;
width: 173.29%;
height: 230.77%;
max-width: none;
top: -65.39%;
left: -38.18%;
}
/* Wrap = arrow + viewport + arrow, matching the Kategorilerimiz 3-layer
pattern but for a 3x2 grid that pages horizontally, one whole page
(6 badges) at a time — right arrow slides the track left to reveal
the next page, left arrow slides it back right (see the small,
independent slider block in main.js). The viewport clips to exactly
one page's size; the track spans every page side by side and is
translateX'd by one viewport-width per page. */
.home-sales-map__channels-wrap { position: absolute; top: 4.878cqw; left: 66.5447cqw; display: flex; align-items: center; gap: 3.0488cqw; }
/* Real XD-sourced arrow assets, used directly (arrow-prev/next.svg =
default: transparent circle + white ring + white chevron). The hover
look (white circle + red chevron) isn't a separate XD state, so it's
a second real asset (arrow-*-hover.svg — the same file with only its
two fill colors swapped, geometry untouched) stacked on top and
crossfaded via opacity — no CSS-drawn circle/chevron, no currentColor. */
.home-sales-map__channels-arrow {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 2.439cqw;
height: 2.439cqw;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
}
.home-sales-map__channels-arrow-icon {
grid-area: 1 / 1;
width: 100%;
height: 100%;
transition: opacity .28s ease-out;
}
.home-sales-map__channels-arrow-icon--hover { opacity: 0; }
.home-sales-map__channels-arrow:hover .home-sales-map__channels-arrow-icon--default,
.home-sales-map__channels-arrow:focus-visible .home-sales-map__channels-arrow-icon--default { opacity: 0; }
.home-sales-map__channels-arrow:hover .home-sales-map__channels-arrow-icon--hover,
.home-sales-map__channels-arrow:focus-visible .home-sales-map__channels-arrow-icon--hover { opacity: 1; }
.home-sales-map__channels-arrow[aria-disabled="true"] { cursor: default; }
/* The viewport still hard-clips (overflow:hidden) so paging between
pages never shows a partial row, but it's grown by a vertical-only
safe zone (padding) so a hovered badge's scale/lift/shadow isn't cut
off at the top or bottom row. The matching negative margin cancels
that growth back out of the surrounding flex row's own box model, so
the arrows' centering, the wrap's position, and everything below the
grid (CTA, panel height) stay exactly where they were. */
.home-sales-map__channels-viewport { width: 20.7317cqw; height: 15.3659cqw; padding: 0.9756cqw 0; margin: -0.9756cqw 0; overflow: hidden; }
/* Each page is its own flex slide, `flex: 0 0 100%` of the viewport — its
rendered width comes directly from the viewport's own width via
flex-basis, not a second, independently-typed cqw formula that merely
approximates it. That's what makes this driftless: with a single
shared CSS Grid spanning every page (the previous approach), the
viewport's width and the grid's column+gap width were two separate
numbers that were *supposed* to match, and any rounding drift between
them left a sliver of the neighbouring page visible at the edge. Here
there's nothing to drift — main.js translateX's the track by exactly
one page element's own measured offsetLeft. */
.home-sales-map__channels-track {
display: flex;
height: 100%;
transition: transform .35s ease-out;
will-change: transform;
}
.home-sales-map__channels-page {
flex: 0 0 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 1.2195cqw;
margin: 0;
padding: 0;
list-style: none;
}
/* Rounded badge in the logo's own corporate colour (--channel-bg, set
inline per term from its ACF field — group_tada_satis_noktasi/
channel_bg_color) with a thin white ring, matching the approved
first-screen reference exactly; a new channel just needs that one
field filled in from wp-admin, no CSS change. */
.channel-badge {
box-sizing: border-box;
background: var(--channel-bg, #fff);
border: 2px solid #fff;
border-radius: 11px;
transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s cubic-bezier(.22, 1, .36, 1);
}
.channel-badge a, .channel-badge span {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
}
.channel-badge img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 11%; }
.channel-badge:hover,
.channel-badge:focus-within {
transform: translateY(-3px);
box-shadow: 0 8px 18px rgb(0 0 0 / 18%);
}
.channel-badge--getir img { object-fit: scale-down; padding: 25px 9px; }
/* Trendyol's real XD layering is 3 pieces, not one flattened
image: the orange badge background (--channel-bg), a centered black
horizontal band, and the (white, logo-only) wordmark asset on top —
reproduced here with a ::before band since no combined asset exists
in the source. */
.channel-badge--trendyol a, .channel-badge--trendyol span { position: relative; }
.channel-badge--trendyol a::before, .channel-badge--trendyol span::before {
content: "";
position: absolute;
top: 50%;
left: 1.5px;
right: 1.5px;
height: 22.5px;
background: #000;
transform: translateY(-50%);
}
.channel-badge--trendyol img { position: relative; object-fit: scale-down; padding: 31px 9px; }
/* These four kept their real logo-only assets and shared white border,
but each brand's own artwork proportion needs its own visible size —
a single generic padding can't fit a near-square mark (BİM) and a wide
flat wordmark (Migros) equally well. Width is a % of the card, so it
scales with the badge at both breakpoints without a separate override;
the flex-centered parent (`.channel-badge a/span`) keeps each one
centered with its natural aspect ratio (height: auto), no cropping. */
.channel-badge--opet img { width: 78%; height: auto; padding: 0; }
.channel-badge--bim img { width: 76%; height: auto; padding: 0; }
.channel-badge--migros img { width: 82%; height: auto; padding: 0; }
.channel-badge--yemeksepeti img { width: 78%; height: auto; padding: 0; }
.home-sales-map__cta {
position: absolute;
top: 19.5122cqw;
left: 72.0325cqw;
display: grid;
place-items: center;
width: 20.7317cqw;
height: 3.6585cqw;
font-family: Montserrat, Arial, sans-serif;
font-size: 0.8943cqw;
font-weight: 600;
text-decoration: none;
color: var(--sales-map-bg, #9e262d);
background: #fff;
border-radius: 22.5px;
box-shadow: 0 8px 20px rgb(0 0 0 / 0%);
transition: background-color .3s cubic-bezier(.4, 0, .2, 1),
color .3s cubic-bezier(.4, 0, .2, 1),
transform .3s cubic-bezier(.4, 0, .2, 1),
box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}
.home-sales-map__cta:hover,
.home-sales-map__cta:focus-visible {
background: #000;
color: #fff;
transform: translateY(-1px) scale(1.01);
box-shadow: 0 8px 20px rgb(0 0 0 / 25%);
}
}
/* Original 1920×1080 XD/design-reference geometry (native/measured). */
@media (min-width: 1601px) {
.home-sales-map__head { max-width: 1640px; }
.home-sales-map__title { font-size: 38px; }
.home-sales-map__description { max-width: 961px; font-size: 18px; line-height: 26px; }
/* Large screens: the panel's inner layout is a fixed-px composition
calibrated to a 1230px box (map, channel slider, CTA, arrows). Rather than
re-deriving every absolute coordinate for a wider box (which previously
overflowed and clipped the channels), the whole approved composition is
scaled up proportionally so the section stops sitting stuck at 1230px and
reads at the page's large-screen grid scale. zoom scales layout + children
uniformly (unlike transform), so centring and the channel slider's own
measurements stay consistent, and nothing clips. */
.home-sales-map__panel { width: min(1640px, calc(100vw - 100px)); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.channel-badge:hover,
.channel-badge:focus-within { transform: none; }
}
/* Satış Noktalarımız — tablet + mobil (<=1100px). Desktop (>=1101px) untouched.
The panel's absolute desktop composition (map left, 3x2 channel slider right,
CTA) is restacked into a vertical flow: map on top, then the same paged 3x2
channel slider (arrow + clipped viewport + arrow), then the CTA.
Badge visuals are re-declared here (the desktop ones are min-width scoped);
brand logos keep aspect ratio via object-fit:contain + proportional padding. */
@media (max-width: 1100px) {
.home-sales-map { padding: 40px 0 52px; }
.home-sales-map__head { width: calc(100% - 32px); max-width: 640px; margin: 0 auto; text-align: center; }
.home-sales-map__title { margin: 0 0 12px; font-family: Montserrat, Arial, sans-serif; font-size: 24px; font-weight: 700; color: var(--tada-black); }
.home-sales-map__description { max-width: 560px; margin: 0 auto 22px; font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--tada-gray-700); }
.home-sales-map__panel {
position: relative; width: calc(100% - 32px); max-width: 640px; height: auto; margin: 0 auto;
padding: 26px 20px 30px; display: flex; flex-direction: column; align-items: center; gap: 22px;
overflow: hidden; background: var(--sales-map-bg, #9e262d); border-radius: var(--tada-radius-md);
}
.home-sales-map__decor { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.home-sales-map__map-frame {
position: relative; top: auto; left: auto; z-index: 1;
width: 100%; max-width: 460px; height: auto; aspect-ratio: 657.91 / 277.875; overflow: hidden;
}
.home-sales-map__map { position: absolute; width: 173.29%; height: 230.77%; max-width: none; top: -65.39%; left: -38.18%; }
/* Mobile: a compact, paged 3x2 grid driven by the same (horizontal) engine
as desktop — arrow + clipped viewport + arrow. Six items fill one 3x2
page (arrows disabled); more channels page in from the right, one full
page at a time. The arrows sit on the panel's left/right, clear of the
badges and CTA. */
.home-sales-map__channels-wrap { position: relative; top: auto; left: auto; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 340px; }
/* Single, clean control: a small transparent-wrapped white circle with a red
chevron. The two stacked SVG arrow assets (whose default state read as a
light square/rectangle on mobile) are hidden and replaced with a CSS
chevron, so there's no white rectangle block and no doubled icon. */
.home-sales-map__channels-arrow { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; background: #fff; border: 0; border-radius: 50%; opacity: 1; }
/* Unlike the >=1101px version above (which already has `border: 0`), this
mobile-only rule never reset the native