/* ==========================================================================
Süha Yapı — public stylesheet
Single layer. Desktop-first. Every component is defined exactly once.
Breakpoints live at the END of this file:
1. max-width: 1000px (tablet / mobile)
2. max-width: 640px (small mobile)
3. prefers-reduced-motion: reduce
Theme custom properties are injected by the server as an inline style on
; every one of them is consumed at least once below.
========================================================================== */
/* --------------------------------------------------------------------------
1. Design tokens
-------------------------------------------------------------------------- */
:root {
/* Legacy short names kept alive as aliases of the injected --color-* set,
so BOTH spellings resolve even when the inline style is absent. */
--primary: var(--color-primary, #5a331e);
--secondary: var(--color-secondary, #efe3d0);
--accent: var(--color-accent, #c79b4b);
--bg: var(--color-bg, #faf6ee);
--text: var(--color-text, #201915);
/* Shared hairline colour: follows the themed border colour. */
--line: var(--color-border, #d8d4c9);
/* Corporate type system: Manrope carries EVERYTHING structural — headings included.
Cormorant Garamond (--font-display) is now reserved for a single decorative accent
(the testimonial quote mark). Both fonts are still the local WOFF2 files; no new
external request is introduced. */
--font-heading: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
--font-body: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--fs-xs: .75rem;
--fs-sm: .875rem;
--fs-base: 1.0rem;
--fs-lg: 1.075rem;
--fs-xl: 1.2rem;
/* Heading scale — one token per level, clamp-based so mobile needs no overrides. */
--fs-h1-hero: clamp(2.35rem, 4.8vw, 4.6rem);
--fs-h1: clamp(2rem, 4vw, 3.75rem);
--fs-h2: clamp(1.75rem, 3vw, 2.75rem);
--fs-h3: clamp(1.05rem, 1.3vw, 1.3rem);
/* Kept as aliases so any legacy reference still resolves. */
--fs-2xl: var(--fs-h2);
--fs-hero: var(--fs-h1);
--lh-tight: 1.04;
--lh-normal: 1.54;
--lh-relaxed: 1.72;
--tracking-soft: .02em;
--tracking-button: .055em;
--space-2xs: .28rem;
--space-xs: .45rem;
--space-sm: .72rem;
--space-md: 1rem;
--space-lg: 1.55rem;
--space-xl: 2.35rem;
--section-y: clamp(2.9rem, 6vw, 4.9rem);
--section-padding: var(--section-y);
--section-x: clamp(1rem, 3.8vw, 3.2rem);
--container-max: 1180px;
--radius-sm: 5px;
--radius-md: 7px;
--radius-lg: 8px;
--shadow-soft: 0 10px 30px rgba(47, 29, 16, .07);
--shadow-card: 0 16px 44px rgba(47, 29, 16, .105);
--shadow-premium: 0 24px 62px rgba(47, 29, 16, .16);
/* Motion budget. The `animation-*` body classes below re-point these,
which is how the theme editor's animation intensity is implemented. */
--motion-fast: .18s;
--motion-med: .24s;
--motion-slow: .5s;
--motion-reveal: .48s;
--motion-hero-fade: .85s;
--motion-hero-zoom: 4.2s;
--reveal-shift: 16px;
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-normal);
letter-spacing: 0;
text-rendering: optimizeLegibility;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
main {
overflow: hidden;
}
p {
margin: 0 0 var(--space-md);
color: var(--color-muted, #625348);
}
h1,
h2,
h3 {
margin: 0 0 var(--space-sm);
font-family: var(--font-heading);
font-weight: 800;
line-height: 1.12;
/* Slight negative tracking tightens large Manrope headings into a corporate look. */
letter-spacing: -0.015em;
color: inherit;
}
h1 {
font-size: var(--fs-h1);
line-height: 1.05;
letter-spacing: -0.02em;
}
h2 {
font-size: var(--fs-h2);
}
h3 {
font-size: var(--fs-h3);
font-weight: 700;
letter-spacing: -0.005em;
}
.eyebrow {
display: inline-block;
margin-bottom: .5rem;
/* Not the raw brand accent: a contrast-checked variant for the surface this text sits on.
The layout derives one per surface, because small uppercase text needs 4.5:1 and the
stored accent clears that on some palettes only. */
color: var(--accent-on-bg, var(--accent));
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
/* Each of these surfaces has its own background, so each gets its own contrast-checked
accent rather than inheriting the page-level one. */
.section.alt .eyebrow {
color: var(--accent-on-section-light, var(--accent-on-bg, var(--accent)));
}
.project-card .eyebrow {
color: var(--accent-on-surface, var(--accent-on-bg, var(--accent)));
}
/* A standalone call to action ("Tüm projeler"), not a link inside a sentence, so it
carries a real target rather than text height. */
.text-link {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
color: var(--primary);
font-weight: 800;
}
.text-link:hover {
color: var(--accent);
}
.public-site {
background: var(--color-bg, #fbfaf6);
color: var(--color-text, #201915);
}
/* --------------------------------------------------------------------------
3. Skip link
-------------------------------------------------------------------------- */
/* Available to assistive technology, removed from the visual layout. Used where a heading
is needed to keep the document outline unbroken but would be visual noise on screen. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
z-index: 200;
top: 0;
left: 0;
display: inline-flex;
align-items: center;
min-height: 2.75rem;
padding: .7rem 1.15rem;
border-radius: 0 0 var(--radius-md) 0;
background: #111512;
color: #fff;
font-size: var(--fs-sm);
font-weight: 800;
letter-spacing: var(--tracking-button);
transform: translateY(-130%);
transition: transform var(--motion-fast) ease;
}
.skip-link:focus,
.skip-link:focus-visible {
transform: none;
}
/* --------------------------------------------------------------------------
4. Header shell
-------------------------------------------------------------------------- */
.site-header {
position: fixed;
z-index: 50;
inset: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.premium-header {
min-height: var(--nav-min-height, 72px);
padding: var(--nav-desktop-py, .62rem) var(--nav-desktop-px, 2.7rem);
background: var(--nav-bg, #17120f);
background: color-mix(in srgb, var(--nav-bg, #17120f) calc(var(--nav-bg-opacity, .9) * 100%), transparent);
border-bottom: var(--nav-border-width, 1px) solid var(--nav-border, #3a3028);
box-shadow: 0 18px 46px var(--nav-shadow, #0a0705);
box-shadow: 0 18px 46px color-mix(in srgb, var(--nav-shadow, #0a0705) calc(var(--nav-shadow-opacity, 12) * 1%), transparent);
backdrop-filter: blur(var(--nav-blur, 16px));
color: var(--nav-text, #fff);
}
.header-inner {
width: 100%;
max-width: 1440px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.brand {
display: flex;
align-items: center;
gap: .78rem;
font-size: .78rem;
font-weight: 800;
letter-spacing: .04em;
}
.brand-logo {
display: grid;
place-items: center;
flex: 0 0 auto;
width: var(--nav-logo-size, 3.6rem);
height: var(--nav-logo-size, 3.6rem);
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--nav-text, #fff) 14%, transparent);
border-radius: 14px;
background: linear-gradient(135deg, color-mix(in srgb, var(--nav-text, #fff) 10%, transparent), color-mix(in srgb, var(--nav-text, #fff) 3%, transparent));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #c79b4b) 18%, transparent), 0 10px 30px color-mix(in srgb, var(--nav-shadow, #000) 20%, transparent);
}
.brand-logo img {
width: 100%;
height: 100%;
padding: .18rem;
object-fit: contain;
}
.brand-logo > span {
color: var(--accent);
font-weight: 900;
letter-spacing: .08em;
}
.brand-copy {
display: grid;
gap: .12rem;
line-height: 1.05;
}
.brand-copy strong {
font-size: var(--nav-brand-font-size, 1rem);
letter-spacing: .11em;
text-transform: uppercase;
}
.brand-copy small {
color: var(--nav-text-muted, #c9beb4);
font-size: .62rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.menu-toggle {
display: none;
/* 44px: the minimum comfortable touch target. The bars inside stay the same size. */
width: 2.75rem;
height: 2.75rem;
border: 0;
background: none;
}
.menu-toggle span {
display: block;
height: 2px;
margin: .42rem;
background: currentColor;
}
/* --------------------------------------------------------------------------
5. Primary navigation
-------------------------------------------------------------------------- */
.site-nav {
display: flex;
align-items: center;
gap: var(--nav-gap, .38rem);
padding: .28rem;
border: 1px solid var(--nav-border, #3a3028);
border-radius: var(--nav-radius, 999px);
/* Derived from the theme's nav ink — never a hardcoded colour. */
background: color-mix(in srgb, var(--nav-text, #fff) 5%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nav-text, #fff) 6%, transparent);
font-size: .8rem;
font-weight: 700;
}
.site-nav a {
opacity: .88;
transition: color var(--motion-fast) ease, opacity var(--motion-fast) ease, background var(--motion-fast) ease;
}
/* Covers every link in the nav, including the ones inside the mega panel. */
.site-nav a:hover {
color: var(--nav-hover-text, #c79b4b);
opacity: 1;
}
.site-nav > a,
.site-nav .nav-link-main {
min-height: 2.35rem;
padding: var(--nav-link-py, .58rem) var(--nav-link-px, .84rem);
border-radius: var(--nav-radius, 999px);
color: var(--nav-text, #fff);
font-size: var(--nav-link-font-size, .8rem);
font-weight: var(--nav-link-font-weight, 700);
}
.site-nav > a:hover,
.site-nav .nav-link-main:hover,
.mega-toggle:hover {
background: var(--nav-hover-bg, #241c17);
color: var(--nav-hover-text, #c79b4b);
opacity: 1;
}
/* Active / current page link. Theme is the single owner of these tokens. */
.site-nav a.active,
.site-nav a[aria-current="page"] {
background: var(--nav-active-bg, #2e241d);
color: var(--nav-active-text, #efe3d0);
opacity: 1;
}
.site-nav a:focus-visible,
.mega-toggle:focus-visible,
.nav-cta:focus-visible {
outline: 2px solid var(--nav-hover-text, #c79b4b);
outline-offset: 2px;
}
.site-nav .nav-item {
position: relative;
display: flex;
align-items: center;
gap: .18rem;
}
.site-nav .nav-link-main {
padding-top: .62rem;
padding-bottom: .62rem;
}
.nav-cta {
min-height: 2.35rem;
padding: .58rem .95rem;
border-radius: var(--nav-radius, 999px);
background: var(--nav-cta-bg, #8a542f);
color: var(--nav-cta-text, #fff);
border-color: color-mix(in srgb, var(--nav-cta-bg, #8a542f) 70%, var(--nav-cta-text, #fff));
box-shadow: 0 9px 22px color-mix(in srgb, var(--nav-shadow, #0a0705) 22%, transparent);
font-size: var(--nav-link-font-size, .8rem);
font-weight: var(--nav-link-font-weight, 800);
}
.mega-toggle {
position: relative;
display: inline-grid;
place-items: center;
width: 1.65rem;
height: 1.65rem;
margin-right: .26rem;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--nav-text-muted, #c9beb4);
cursor: pointer;
transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.has-mega.open .mega-toggle,
/* The chevron stays visually small so the nav row keeps its proportions, but the
pressable area is extended to 44px with an overlay that takes no layout space. */
.mega-toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2.75rem;
height: 2.75rem;
transform: translate(-50%, -50%);
}
.has-mega.pinned .mega-toggle {
background: var(--nav-hover-bg, #241c17);
color: var(--nav-hover-text, #c79b4b);
transform: translateY(-1px);
}
.has-mega.pinned .mega-toggle i {
transform: rotate(180deg);
}
/* --------------------------------------------------------------------------
6. Mega menu
-------------------------------------------------------------------------- */
.mega-menu {
position: absolute;
top: calc(100% + 1.1rem);
left: 50%;
width: min(var(--nav-mega-width, 930px), calc(100vw - 2rem));
display: grid;
grid-template-columns: 285px 1fr;
gap: 1rem;
padding: var(--nav-mega-padding, 1.08rem);
border: 1px solid var(--nav-dropdown-border, #d8bc8f);
border-radius: var(--nav-mega-radius, 16px);
background: var(--nav-dropdown-bg, #fffdf8);
color: var(--nav-dropdown-text, #201915);
box-shadow: 0 30px 90px color-mix(in srgb, var(--nav-shadow, #111210) 28%, transparent), 0 0 0 1px color-mix(in srgb, var(--nav-dropdown-bg, #fff) 60%, transparent);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-50%) translateY(10px);
transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease, visibility var(--motion-fast) ease;
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu,
.has-mega.open .mega-menu,
.has-mega.pinned .mega-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.mega-menu:before {
content: "";
position: absolute;
top: -.55rem;
left: 50%;
width: 1rem;
height: 1rem;
background: var(--nav-dropdown-bg, #fffdf8);
border-left: 1px solid var(--nav-dropdown-border, #d8bc8f);
border-top: 1px solid var(--nav-dropdown-border, #d8bc8f);
transform: translateX(-50%) rotate(45deg);
}
.mega-intro {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
padding: 1rem;
border: 1px solid var(--nav-border, #3a3028);
border-radius: 10px;
background: var(--nav-bg, #202822);
background:
radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 35%),
linear-gradient(145deg, var(--nav-bg, #202822), var(--nav-shadow, #111512));
box-shadow: inset 0 0 45px color-mix(in srgb, var(--nav-shadow, #000) 30%, transparent);
color: var(--nav-text, #fff);
}
.mega-intro h2 {
font-size: 1.75rem;
line-height: 1;
}
.mega-intro p {
color: var(--nav-text-muted, #c9beb4);
font-size: var(--fs-sm);
line-height: 1.55;
}
.mega-all {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: .8rem;
padding: .55rem .8rem;
border: 1px solid var(--nav-border, #3a3028);
border-radius: var(--radius-md);
background: var(--nav-hover-bg, #241c17);
color: var(--nav-text, #fff);
font-weight: 900;
}
.mega-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .72rem;
}
.mega-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: .25rem;
min-height: 126px;
padding: .78rem;
overflow: hidden;
border: 1px solid var(--nav-dropdown-border, #d2c5b2);
border-radius: 12px;
background: var(--nav-card-bg, #fff);
color: var(--nav-card-text, #2d231d);
box-shadow: 0 12px 26px color-mix(in srgb, var(--nav-shadow, #2f1d10) 10%, transparent);
transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.mega-card:hover {
transform: translateY(-3px);
border-color: var(--accent);
background: var(--nav-card-hover-bg, #f7f0e4);
box-shadow: 0 18px 38px color-mix(in srgb, var(--nav-shadow, #000) 18%, transparent);
}
.mega-card span {
color: var(--nav-dropdown-muted, #6a5c50);
font-size: .66rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.mega-card strong {
font: 700 1.1rem var(--font-heading);
line-height: 1.05;
}
.mega-card small {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--card-muted, #6f6259);
font-size: .72rem;
line-height: 1.35;
}
.mega-mobile-all {
display: none;
}
.mega-card.category img {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .18;
filter: saturate(.82);
}
.mega-card.category span,
.mega-card.category strong,
.mega-card.category small {
position: relative;
z-index: 1;
}
.mega-card.product {
position: relative;
min-height: 126px;
background: #111;
color: #fff;
}
.mega-card.product img {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--motion-slow) ease;
}
.mega-card.product:before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .78));
}
.mega-card.product:hover img {
transform: scale(1.04);
}
.mega-card.product span,
.mega-card.product strong {
position: relative;
z-index: 2;
color: #fff;
}
.mega-card.product span {
color: var(--accent);
}
/* Shared "proof pill" rows used in the mega menu, footer, page hero and hero. */
.mega-proof,
.footer-mini-proof,
.page-hero-cues,
.hero-trust-row {
display: flex;
flex-wrap: wrap;
gap: .42rem;
}
.mega-proof span,
.footer-mini-proof span,
.page-hero-cues span,
.hero-trust-row span {
display: inline-flex;
align-items: center;
gap: .34rem;
min-height: 1.8rem;
padding: .36rem .58rem;
border: 1px solid rgba(199, 155, 75, .24);
border-radius: 999px;
background: rgba(255, 255, 255, .08);
font-size: .68rem;
font-weight: 900;
letter-spacing: .05em;
}
/* --------------------------------------------------------------------------
7. Buttons
-------------------------------------------------------------------------- */
.btn,
.nav-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
/* 44px. Every button is a primary touch target; the label size is unchanged. */
min-height: 2.75rem;
padding: .55rem .86rem;
border: 1px solid #d5bd99;
border: 1px solid color-mix(in srgb, var(--accent) 66%, #fff);
border-radius: var(--radius-md);
font-size: .8rem;
font-weight: 800;
letter-spacing: var(--tracking-button);
transition: transform var(--motion-fast) ease, background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.btn:hover,
.nav-cta:hover {
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(90, 51, 30, .18);
}
.btn.primary {
background: var(--btn-primary-bg, #8a542f);
color: var(--btn-primary-text, #fff);
border-color: var(--btn-primary-bg, #8a542f);
box-shadow: 0 9px 22px rgba(90, 51, 30, .16);
}
.btn.primary:hover {
background: var(--btn-primary-hover, #5a331e);
}
.btn.secondary {
background: var(--btn-secondary-bg, #fff);
color: var(--btn-secondary-text, #5a331e);
border-color: var(--btn-secondary-text, #5a331e);
}
.btn.secondary:hover {
background: var(--btn-secondary-hover, #f7f0e4);
}
.detail-info .btn.secondary {
color: var(--primary);
border-color: var(--primary);
}
/* --------------------------------------------------------------------------
8. Hero slider
-------------------------------------------------------------------------- */
.hero-slider {
position: relative;
isolation: isolate;
/* Full-screen hero. Ordered fallbacks: 100vh for engines without the new units; 100svh (small
viewport) as an intermediate; 100dvh (dynamic viewport) wins where supported, so the hero
fills the CURRENT visible area and grows to the full screen as the mobile browser toolbars
collapse — svh alone stayed at the small height and left empty space once the toolbar hid.
min-height is the safe floor so short / landscape screens never clip the content; the old
min(86vh, 760px) cap is gone. The fixed header stays overlaid on top — the hero is NOT pushed
below it. No later media query may override this height or set a different min-height. */
height: 100vh;
height: 100svh;
height: 100dvh;
min-height: 560px;
background: #120e0c;
color: #fff;
touch-action: pan-y;
}
.hero-slider.is-dragging,
.gallery-lightbox.is-dragging {
cursor: grabbing;
}
/* Every slide is stacked at inset:0. Without these two rules the LAST slide in the DOM
stays hit-testable at opacity:0 and swallows every click meant for the active slide's
CTA buttons, and its links stay reachable by Tab while invisible. Visibility is switched
only after the fade has finished, so the transition itself is unchanged. */
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.028);
pointer-events: none;
visibility: hidden;
transition:
opacity var(--motion-hero-fade) ease,
transform var(--motion-hero-zoom) ease,
visibility 0s linear var(--motion-hero-fade);
}
.hero-slide.is-active {
opacity: 1;
transform: scale(1);
pointer-events: auto;
visibility: visible;
transition:
opacity var(--motion-hero-fade) ease,
transform var(--motion-hero-zoom) ease,
visibility 0s linear 0s;
}
.hero-slide:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(10, 13, 12, .9) 0, rgba(20, 25, 22, .66) 45%, rgba(20, 25, 22, .18) 100%),
linear-gradient(0deg, rgba(0, 0, 0, .38), transparent 38%);
background:
linear-gradient(90deg,
color-mix(in srgb, var(--hero-overlay, #0a0d0c) 92%, transparent) 0,
color-mix(in srgb, var(--hero-overlay, #0a0d0c) 64%, transparent) 45%,
color-mix(in srgb, var(--hero-overlay, #0a0d0c) 18%, transparent) 100%),
linear-gradient(0deg, rgba(0, 0, 0, .38), transparent 38%);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 760px;
padding: clamp(8.8rem, 15vw, 10.8rem) clamp(1.25rem, 6vw, 5.4rem) 3.9rem;
color: var(--hero-text, #fff);
}
/* The page's single is a decoupled sr-only heading (see Index.cshtml); every visible slide
title is a
. The legacy .hero-content h1 selector is kept only so any
stray heading still inherits the same hero typography. */
.hero-content h1,
.hero-content .hero-title {
max-width: 15ch;
margin: 0 0 .2rem;
font-family: var(--font-heading, inherit);
font-size: var(--fs-h1-hero);
font-weight: 900;
line-height: 1.06;
text-wrap: balance;
color: var(--hero-text, #fff);
}
/* Image-only slide: the slide carries no text, so drop the left-to-right readability gradient
(.hero-slide:before) that only exists to make text legible. The arrows, dots and pause control
stay visible on their own styling. */
.hero-slide--image-only:before {
background: none;
}
/* --------------------------------------------------------------------------
Staggered text entrance
Keyed to .is-active so it replays every time a text slide becomes active and needs no JS:
when a slide loses .is-active its children stop matching this selector, so re-activating it
starts a fresh animation. Image-only slides have no .hero-content, so nothing animates. The
synchronous remove+add in the slider's init show(0) nets to no change at style-recalc time,
so the first slide animates exactly once (no double flash). Content stays in the accessibility
tree throughout (opacity/transform never remove it), so screen-reader access is not delayed.
-------------------------------------------------------------------------- */
.hero-content > * {
opacity: 0;
transform: translateY(14px);
}
.hero-slide.is-active .hero-content > * {
animation: heroContentIn .6s cubic-bezier(.22, .61, .36, 1) both;
}
.hero-slide.is-active .hero-content > *:nth-child(1) { animation-delay: .04s; }
.hero-slide.is-active .hero-content > *:nth-child(2) { animation-delay: .13s; }
.hero-slide.is-active .hero-content > *:nth-child(3) { animation-delay: .22s; }
.hero-slide.is-active .hero-content > *:nth-child(4) { animation-delay: .31s; }
@keyframes heroContentIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* Reduced motion and the app-level "animations off / light" settings: text appears immediately
and is NEVER left hidden by the entrance animation. These selectors match or exceed the
specificity of the .is-active rule above so they reliably win. */
@media (prefers-reduced-motion: reduce) {
.hero-content > *,
.hero-slide.is-active .hero-content > * {
opacity: 1;
transform: none;
animation: none;
}
}
.animation-kapali .hero-content > *,
.animation-kapali .hero-slide.is-active .hero-content > *,
.animation-premium-hafif .hero-content > *,
.animation-premium-hafif .hero-slide.is-active .hero-content > * {
opacity: 1;
transform: none;
animation: none;
}
.hero-content p,
.page-hero p,
.section-head p {
max-width: 36rem;
font-size: var(--fs-lg);
line-height: var(--lh-relaxed);
}
.hero-content p,
.page-hero p {
color: rgba(255, 255, 255, .78);
color: color-mix(in srgb, var(--hero-muted, #e4ddd4) 82%, transparent);
}
.hero-trust-row {
margin-top: 1rem;
}
.hero-trust-row span {
background: rgba(255, 255, 255, .09);
color: var(--hero-text, #fff);
border-color: rgba(199, 155, 75, .32);
border-color: color-mix(in srgb, var(--hero-accent, #c79b4b) 32%, transparent);
backdrop-filter: blur(10px);
}
.hero-side-note {
position: absolute;
z-index: 3;
right: clamp(1rem, 5vw, 4rem);
bottom: 4.7rem;
display: grid;
gap: .12rem;
padding: .8rem 1rem;
border-left: 1px solid rgba(199, 155, 75, .72);
color: var(--hero-text, #fff);
text-align: right;
}
.hero-side-note span {
color: rgba(255, 255, 255, .68);
font-size: .68rem;
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
}
.hero-side-note strong {
font: 700 1.3rem var(--font-heading);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: .68rem;
margin-top: 1.25rem;
}
/* Hero CTA colours only apply OVER dark hero imagery. On light sections that
reuse .hero-actions (e.g. .contact-preview) the themed .btn rules win. */
.hero-slider .hero-actions .btn.primary,
.page-hero .hero-actions .btn.primary {
background: var(--hero-btn-bg, #8a542f);
color: var(--hero-btn-text, #fff);
border-color: var(--hero-btn-bg, #8a542f);
}
.hero-slider .hero-actions .btn.secondary,
.page-hero .hero-actions .btn.secondary {
background: var(--hero-secondary-bg, #fff);
color: var(--hero-secondary-text, #17120f);
border-color: rgba(255, 255, 255, .48);
border-color: color-mix(in srgb, var(--hero-secondary-bg, #fff) 62%, transparent);
}
/* Slider controls */
.slider-arrow,
.slider-pause {
position: absolute;
z-index: 3;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 999px;
background: rgba(255, 255, 255, .1);
color: var(--hero-control, #fff);
font-size: 1.48rem;
cursor: pointer;
backdrop-filter: blur(12px);
transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.slider-arrow:hover,
.slider-pause:hover {
background: rgba(0, 0, 0, .42);
border-color: var(--accent);
}
.slider-arrow.prev {
top: 50%;
left: 1.2rem;
}
.slider-arrow.next {
top: 50%;
right: 1.2rem;
}
/* The pause control carries a WORD ("Duraklat"/"Devam Et"), so it must be a pill sized to its
text — not the fixed 2.75rem circle the arrows use (which clipped/overflowed the label). */
.slider-pause {
right: clamp(1.25rem, 6vw, 5.4rem);
bottom: 1.72rem;
width: auto;
height: auto;
min-height: 2.2rem;
padding: 0 1rem;
border-radius: 999px;
font-size: .68rem;
font-weight: 900;
letter-spacing: .04em;
white-space: nowrap;
line-height: 1;
}
.slider-dots {
position: absolute;
z-index: 3;
bottom: 2rem;
left: clamp(1.25rem, 6vw, 5.4rem);
display: flex;
gap: .4rem;
}
.slider-dots button {
position: relative;
width: 2.1rem;
height: 2px;
border: 0;
border-radius: 10px;
background: rgba(255, 255, 255, .28);
cursor: pointer;
}
/* The dot is a 2px rule by design; the target around it is not. */
.slider-dots button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2.75rem;
height: 2.75rem;
transform: translate(-50%, -50%);
}
.slider-dots button.active {
background: var(--hero-control, #fff);
}
/* --------------------------------------------------------------------------
9. Sections, section heads, breadcrumb
-------------------------------------------------------------------------- */
.section {
max-width: var(--container-max);
margin: auto;
padding: var(--section-padding) var(--section-x);
}
.section.alt {
max-width: none;
border-top: 1px solid var(--color-border, #d8d4c9);
border-bottom: 1px solid var(--color-border, #d8d4c9);
background: linear-gradient(180deg, var(--secondary), #f4eadb);
}
.public-site .section.alt {
background: var(--section-light-bg, #fbfaf6);
}
.section.alt > * {
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
}
.section-head {
margin-bottom: 1.45rem;
}
.section-head.rowed {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--space-md);
}
.section-head h2 {
color: var(--section-title, var(--color-text, #201915));
text-wrap: balance;
}
.section-head p,
.rich-text {
color: var(--section-text, var(--color-muted, #6a5c50));
}
.breadcrumb {
max-width: var(--container-max);
margin: 0 auto;
padding: .85rem clamp(1rem, 3.8vw, 3.2rem) 0;
font-size: var(--fs-xs);
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem;
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumb li {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
gap: .35rem;
color: var(--section-text, var(--color-muted, #6a5c50));
}
.breadcrumb li + li:before {
content: "/";
opacity: .5;
}
.breadcrumb a {
display: inline-flex;
align-items: center;
align-self: stretch;
color: var(--section-text, var(--color-muted, #6a5c50));
font-weight: 700;
}
.breadcrumb a:hover {
color: var(--primary);
text-decoration: underline;
}
.breadcrumb [aria-current] {
color: var(--section-title, var(--color-text, #201915));
font-weight: 800;
}
/* --------------------------------------------------------------------------
10. Category tiles
-------------------------------------------------------------------------- */
.category-grid,
.product-grid,
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .9rem;
}
/* Testimonials: 3×2 on desktop. Also a plain list (role=list on
), so it degrades
to a keyboard-reachable scroll-snap row on mobile without any JavaScript. */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
margin: 0;
padding: 0;
list-style: none;
}
.category-grid {
grid-template-columns: 1.15fr .92fr .92fr;
gap: 1.1rem;
}
.category-tile {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: end;
min-height: 260px;
padding: 1.08rem;
overflow: hidden;
border-radius: 16px;
background-size: cover;
background-position: center;
color: #fff;
box-shadow: 0 18px 44px rgba(31, 37, 34, .1);
}
.category-tile:first-child {
grid-row: span 2;
min-height: 536px;
}
.category-tile:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .78));
}
.category-tile span {
font: 700 1.35rem var(--font-heading);
}
.category-tile small {
color: rgba(255, 255, 255, .82);
font-size: var(--fs-sm);
line-height: 1.45;
}
/* --------------------------------------------------------------------------
11. Product cards
-------------------------------------------------------------------------- */
.product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.product-card {
overflow: hidden;
border: 1px solid var(--card-border, var(--color-border, #d2c5b2));
border-radius: 16px;
background: var(--card-bg, var(--color-surface, #fffdf9));
color: var(--card-text, #201915);
box-shadow: 0 14px 34px rgba(31, 37, 34, .08);
box-shadow: 0 14px 34px color-mix(in srgb, var(--card-shadow, #1f2522) 8%, transparent);
transition: transform var(--motion-med) ease, box-shadow var(--motion-med) ease, border-color var(--motion-med) ease;
}
.product-card:hover {
transform: translateY(-5px);
border-color: rgba(199, 155, 75, .5);
box-shadow: 0 24px 60px rgba(31, 37, 34, .16);
box-shadow: 0 24px 60px color-mix(in srgb, var(--card-shadow, #1f2522) 16%, transparent);
}
.product-image {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #17120f;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--motion-slow) ease;
}
.product-card:hover img,
.gallery-item:hover img {
transform: scale(1.035);
}
.product-image:after {
content: "";
position: absolute;
inset: auto 0 0;
height: 45%;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45));
opacity: 0;
transition: opacity var(--motion-med) ease;
}
.product-card:hover .product-image:after {
opacity: 1;
}
.product-image-action {
position: absolute;
z-index: 2;
right: .74rem;
bottom: .74rem;
padding: .42rem .62rem;
border-radius: 999px;
background: rgba(255, 255, 255, .9);
color: #1f2522;
font-size: .68rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
opacity: 0;
transform: translateY(8px);
transition: opacity var(--motion-med) ease, transform var(--motion-med) ease;
}
.product-card:hover .product-image-action {
opacity: 1;
transform: none;
}
.badge {
position: absolute;
top: .65rem;
left: .65rem;
padding: .28rem .48rem;
border-radius: 999px;
background: var(--badge-bg, #f0e3c9);
color: var(--badge-text, #211712);
box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
font-size: .68rem;
font-weight: 900;
}
.badge.inline {
position: static;
display: inline-block;
margin-bottom: .75rem;
}
.product-body {
padding: 1rem;
}
.product-body .eyebrow {
font-size: .66rem;
color: var(--accent-on-card, var(--accent-on-bg, var(--accent)));
}
.product-body h3 {
margin-bottom: .45rem;
color: var(--section-title, var(--color-text, #201915));
font-size: 1.18rem;
line-height: 1.08;
}
.product-body p {
min-height: 2.65rem;
color: var(--section-text, var(--color-muted, #6a5c50));
font-size: var(--fs-sm);
line-height: 1.48;
}
.product-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
margin-bottom: .45rem;
}
.product-meta strong {
color: var(--price-color, #1f2522);
font-size: var(--fs-sm);
font-weight: 900;
white-space: nowrap;
}
.product-price {
padding: .34rem .55rem;
border: 1px solid #ead9be;
border-radius: 999px;
background: #f7f0e4;
color: var(--price-color, #1f2522);
font: 800 .86rem var(--font-body);
white-space: nowrap;
}
.product-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .42rem;
margin-top: .8rem;
padding-top: .8rem;
border-top: 1px solid var(--card-border, var(--color-border, #eee1cf));
}
.product-actions strong {
margin-right: auto;
color: var(--offer-color, #8a542f);
font-size: var(--fs-sm);
letter-spacing: var(--tracking-soft);
}
.product-actions a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
gap: .32rem;
padding: .38rem .8rem;
border: 1px solid #e7d6bf;
border-radius: 999px;
font-size: .7rem;
font-weight: 800;
transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.product-actions a:hover {
background: #f7efe3;
border-color: var(--accent);
}
.product-actions .product-cta {
background: var(--section-dark-bg, #202822);
border-color: var(--section-dark-bg, #202822);
color: #fff;
}
.product-actions .product-wa {
margin-left: auto;
background: var(--whatsapp-bg, #202822);
color: var(--whatsapp-text, #fff);
border-color: var(--whatsapp-bg, #202822);
}
.product-actions .product-wa:hover {
background: var(--btn-primary-hover, #17120f);
border-color: var(--btn-primary-hover, #17120f);
color: var(--whatsapp-text, #fff);
}
/* Card titles duplicate a link the card already offers twice (the image and the CTA),
so they follow the WCAG 2.2 AA minimum of 24px rather than the 44px used for controls.
Growing a heading to 44px would visibly loosen every card for no added reach. */
.product-body h3 a,
.project-body h3 a {
display: inline-block;
min-height: 1.5rem;
padding-block: .12rem;
}
.compact-products .product-body p {
min-height: auto;
}
/* --------------------------------------------------------------------------
12. Product filter panel
-------------------------------------------------------------------------- */
.products-section {
padding-top: 2.15rem;
}
.product-filter-panel {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: .92rem;
margin-bottom: 1.45rem;
padding: .88rem;
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(255, 255, 255, .74);
box-shadow: 0 18px 46px rgba(31, 37, 34, .08);
backdrop-filter: blur(14px);
}
.category-chips {
grid-column: 1 / -1;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .48rem;
}
.filter-chip,
.tag {
display: inline-flex;
align-items: center;
/* Both are links, so both need a real touch target rather than text-height. */
min-height: 2.75rem;
padding: .38rem .95rem;
border: 1px solid var(--chip-border, var(--color-border, #d8d4c9));
border-radius: 999px;
background: var(--chip-bg, #fff);
color: var(--chip-text, #29302d);
font-size: .78rem;
font-weight: 800;
box-shadow: 0 7px 18px rgba(47, 29, 16, .045);
transition: background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}
/* Count badge inside a filter chip: secondary information, so it is quieter than the label
but still inherits the chip's contrast-checked colour rather than fading below it. */
.tag-count {
margin-left: .4rem;
opacity: .72;
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.filter-chip:hover,
.tag:hover {
transform: translateY(-1px);
background: var(--chip-hover-bg, #f7f0e4);
border-color: var(--accent);
}
.filter-chip.active,
.tag.active {
background: var(--chip-active-bg, #202822);
color: var(--chip-active-text, #fff);
border-color: var(--chip-active-bg, #202822);
}
.tag-row {
display: flex;
flex-wrap: wrap;
gap: .48rem;
margin-bottom: 1.12rem;
}
.filter-summary {
color: var(--section-text, var(--color-muted, #66584f));
font-size: var(--fs-sm);
}
.filter-summary strong {
color: var(--section-title, var(--color-text, #201915));
}
.filter-summary span {
margin-left: .5rem;
color: var(--offer-color, #9a7042);
}
.product-search {
display: flex;
align-items: center;
justify-self: end;
gap: .55rem;
width: min(360px, 100%);
max-width: 32rem;
}
.product-search .btn {
min-width: 4.35rem;
border-radius: 999px;
}
/* --------------------------------------------------------------------------
13. Form controls
-------------------------------------------------------------------------- */
.product-search input,
.contact-form input,
.contact-form textarea {
width: 100%;
min-height: 2.75rem;
padding: .62rem .72rem;
border: 1px solid var(--input-border, #dcc9af);
border-radius: var(--radius-md);
background: var(--input-bg, #fff);
color: var(--input-text, #201915);
font: inherit;
font-size: var(--fs-sm);
}
.product-search input {
border-radius: 999px;
}
.product-search input:focus,
.contact-form input:focus,
.contact-form textarea:focus {
border-color: var(--input-focus-border, #c79b4b);
}
.product-search input::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: var(--input-placeholder, #8a7b6e);
}
.contact-form {
padding: 1.15rem;
border: 1px solid var(--card-border, var(--color-border, #d2c5b2));
border-radius: var(--radius-lg);
background: var(--card-bg, var(--color-surface, #fffdf9));
color: var(--card-text, #201915);
box-shadow: var(--shadow-card);
}
.contact-form label {
display: block;
margin-bottom: .65rem;
font-size: var(--fs-sm);
font-weight: 800;
}
.contact-form span {
color: #9e2d20;
font-size: var(--fs-xs);
}
.success {
margin-bottom: .9rem;
padding: .68rem;
border-radius: var(--radius-md);
background: #e6f6e8;
color: #24582a;
font-size: var(--fs-sm);
}
/* Inline validation, written by form-validate.js */
.form-error {
display: block;
margin-top: .35rem;
color: #b42318;
font-size: var(--fs-xs);
font-weight: 700;
}
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
border-color: #b42318;
box-shadow: 0 0 0 3px rgba(180, 35, 24, .14);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus-border, #c79b4b) 22%, transparent);
}
/* Honeypot: must stay off-screen no matter what the theme does. */
.hp-field {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
}
/* --------------------------------------------------------------------------
14. Empty states
-------------------------------------------------------------------------- */
.empty-state {
padding: clamp(1.7rem, 4.5vw, 3rem);
border: 1px dashed var(--color-border, #d8bd95);
border-radius: var(--radius-lg);
background: var(--color-surface, #fffdf9);
box-shadow: var(--shadow-soft);
text-align: center;
}
.empty-state h2 {
font-size: 1.7rem;
}
.empty-state p {
max-width: 33rem;
margin-left: auto;
margin-right: auto;
}
.section-empty {
display: grid;
place-items: center;
gap: .35rem;
padding: clamp(2rem, 5vw, 3.4rem);
border: 1px dashed var(--color-border, #d8d4c9);
border-radius: var(--radius-lg);
background: transparent;
color: var(--section-text, var(--color-muted, #6a5c50));
font-size: var(--fs-sm);
text-align: center;
}
/* --------------------------------------------------------------------------
15. Feature bands
-------------------------------------------------------------------------- */
.custom-band,
.counter-band,
.offer-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
margin: 0 clamp(1rem, 3.8vw, 3.2rem);
padding: clamp(1.55rem, 4vw, 3rem);
border-radius: var(--radius-lg);
}
/* Dark bands: white text on the dark section colour. */
.custom-band,
.offer-banner {
background: var(--section-dark-bg, #202822);
color: #fff;
}
.custom-band p,
.offer-banner p {
max-width: 44rem;
color: rgba(255, 255, 255, .76);
}
/* Counter band sits on the LIGHT accent colour, so its text must be dark. */
.counter-band {
display: grid;
/* Six counters in one row on desktop; steps down to 3×2 on tablet and 2×3 on mobile. */
grid-template-columns: repeat(6, 1fr);
gap: .6rem 1rem;
background: var(--section-accent-bg, #f0e3c9);
color: var(--section-title, #201915);
text-align: center;
}
.counter strong {
color: var(--section-title, #201915);
font-family: var(--font-heading);
font-size: 2.35rem;
line-height: 1;
}
.counter span {
color: var(--offer-color, #8a542f);
font-size: 1.38rem;
}
.counter p {
margin: .28rem 0 0;
color: var(--section-text, #6a5c50);
font-size: var(--fs-sm);
}
/* --------------------------------------------------------------------------
16. Cards: why / testimonial / service / contact
-------------------------------------------------------------------------- */
.why-card,
blockquote,
.contact-card,
.service-card {
padding: 1.12rem;
border: 1px solid var(--card-border, var(--color-border, #d8d4c9));
border-radius: var(--radius-lg);
background: var(--card-bg, var(--color-surface, #fffdf9));
color: var(--card-text, #201915);
box-shadow: var(--shadow-soft);
}
.why-card span {
color: var(--accent);
font-size: var(--fs-xs);
font-weight: 900;
text-transform: uppercase;
}
.why-card h3,
.service-card h2 {
font-size: 1.3rem;
}
.service-list {
display: grid;
gap: .9rem;
}
.contact-card {
background: linear-gradient(180deg, #fffdf9, #f6efe4);
background: linear-gradient(180deg, var(--color-surface, #fffdf9), var(--section-light-bg, #f6efe4));
}
.contact-card p {
margin-bottom: .58rem;
font-size: var(--fs-sm);
}
.contact-actions {
display: flex;
flex-wrap: wrap;
gap: .58rem;
margin-top: .9rem;
}
/* --------------------------------------------------------------------------
17. FAQ (accessible disclosure list)
-------------------------------------------------------------------------- */
.faq {
display: grid;
gap: .6rem;
}
.faq details {
padding: .85rem 1rem;
border: 1px solid var(--color-border, #d8d4c9);
border-radius: var(--radius-lg);
background: var(--color-surface, #fffdf9);
}
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
list-style: none;
color: var(--section-title, var(--color-text, #201915));
font-weight: 800;
cursor: pointer;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary:after {
content: "+";
color: var(--accent);
font-size: 1.15rem;
font-weight: 700;
line-height: 1;
}
.faq details[open] summary:after {
content: "\2013";
}
.faq p {
margin: .65rem 0 0;
color: var(--section-text, var(--color-muted, #6a5c50));
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
}
/* --------------------------------------------------------------------------
18. Map embed (responsive 16:9)
-------------------------------------------------------------------------- */
.map-embed {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid var(--color-border, #d8d4c9);
border-radius: var(--radius-lg);
background: var(--color-surface, #fffdf9);
}
.map-embed iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* --------------------------------------------------------------------------
19. Pagination
-------------------------------------------------------------------------- */
.pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: .4rem;
margin: 1.6rem 0 0;
padding: 0;
list-style: none;
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: .35rem .6rem;
border: 1px solid var(--color-border, #d8d4c9);
border-radius: var(--radius-md);
background: var(--color-surface, #fffdf9);
color: var(--section-title, var(--color-text, #201915));
font-size: var(--fs-sm);
font-weight: 700;
transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.pagination a:hover {
background: var(--chip-hover-bg, #f7f0e4);
border-color: var(--accent);
}
.pagination span.current {
background: var(--chip-active-bg, #202822);
color: var(--chip-active-text, #fff);
border-color: var(--chip-active-bg, #202822);
}
/* Not opacity: a 45% wash pushed this below 3:1 even as an inactive control. A muted
colour keeps the "unavailable" reading while staying legible. */
.pagination .disabled {
color: var(--color-muted, #6b635b);
border-color: color-mix(in srgb, var(--color-border, #d8d4c9) 60%, transparent);
pointer-events: none;
}
/* --------------------------------------------------------------------------
20. Gallery
-------------------------------------------------------------------------- */
.gallery-grid {
columns: 3 240px;
column-gap: 1rem;
}
.gallery-grid.preview {
display: grid;
grid-template-columns: repeat(3, 1fr);
columns: unset;
}
.gallery-item {
position: relative;
display: block;
break-inside: avoid;
margin: 0 0 .9rem;
overflow: hidden;
border-radius: 16px;
background: #000;
color: #fff;
box-shadow: 0 16px 40px rgba(31, 37, 34, .1);
}
.gallery-item img {
width: 100%;
height: auto;
transition: transform var(--motion-slow) ease, opacity var(--motion-med);
}
.gallery-grid.preview img {
height: 205px;
object-fit: cover;
}
.gallery-item:after {
content: "";
position: absolute;
inset: auto 0 0;
height: 45%;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72));
pointer-events: none;
}
.gallery-item span {
position: absolute;
z-index: 2;
left: .82rem;
bottom: .68rem;
font-size: var(--fs-sm);
font-weight: 800;
text-shadow: 0 2px 16px #000;
}
.gallery-item em {
position: absolute;
z-index: 2;
right: .75rem;
top: .75rem;
padding: .34rem .52rem;
border-radius: 999px;
background: rgba(255, 255, 255, .9);
color: #1f2522;
font-size: .68rem;
font-style: normal;
font-weight: 900;
opacity: 0;
transform: translateY(-6px);
transition: opacity var(--motion-med) ease, transform var(--motion-med) ease;
}
.gallery-item:hover em {
opacity: 1;
transform: none;
}
/* --------------------------------------------------------------------------
21. Inner page hero
-------------------------------------------------------------------------- */
.page-hero {
position: relative;
isolation: isolate;
padding: clamp(6.8rem, 12vw, 8.1rem) clamp(1rem, 5vw, 4rem) clamp(2.55rem, 5.4vw, 3.8rem);
background: linear-gradient(135deg, #1f2522, #2f4638);
background:
radial-gradient(circle at 14% 0, color-mix(in srgb, var(--hero-accent, #c79b4b) 20%, transparent), transparent 46%),
linear-gradient(135deg, var(--hero-overlay, #0a0d0c), var(--section-dark-bg, #202822));
color: var(--hero-text, #fff);
}
.page-hero.compact {
padding-bottom: 2.85rem;
}
.page-hero:after {
content: "";
position: absolute;
z-index: -1;
inset: auto 0 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.page-hero-cues {
margin-top: 1rem;
}
.page-hero-cues span {
background: rgba(255, 255, 255, .1);
color: var(--hero-text, #fff);
border-color: rgba(255, 255, 255, .18);
}
/* --------------------------------------------------------------------------
22. Product detail
-------------------------------------------------------------------------- */
.product-detail {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, .86fr);
gap: 2.2rem;
padding-top: 6.85rem;
}
.detail-gallery {
position: sticky;
top: 6rem;
align-self: start;
}
.detail-gallery-frame {
padding: .58rem;
border: 1px solid var(--card-border, var(--color-border, #d8d4c9));
border-radius: 22px;
background: var(--card-bg, var(--color-surface, #fff));
box-shadow: 0 20px 54px rgba(31, 37, 34, .12);
}
.detail-gallery > a img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.detail-main-image {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 16px;
background: #17120f;
}
.detail-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
box-shadow: none;
}
.gallery-open-hint {
position: absolute;
right: .85rem;
bottom: .85rem;
padding: .42rem .62rem;
border-radius: 999px;
background: rgba(255, 255, 255, .88);
color: #1f2522;
font-size: var(--fs-xs);
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
.thumbs {
display: flex;
gap: .48rem;
margin-top: .62rem;
padding: .2rem;
overflow-x: auto;
}
.thumbs img {
width: 4.15rem;
height: 4.15rem;
object-fit: cover;
border-radius: var(--radius-md);
}
.thumbs a {
flex: 0 0 auto;
padding: 2px;
border: 2px solid transparent;
border-radius: var(--radius-md);
background: var(--card-bg, var(--color-surface, #fff));
opacity: .7;
transition: opacity var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.thumbs a:hover,
.thumbs a.active {
opacity: 1;
transform: translateY(-1px);
}
/* Clear premium selected state: accent border + ring, visible on desktop and mobile. */
.thumbs a.active {
border-color: var(--accent, #c79b4b);
box-shadow: 0 0 0 2px var(--accent, #c79b4b), 0 6px 16px rgba(20, 15, 10, .12);
}
.thumbs a:focus-visible {
outline: 2px solid var(--accent, #c79b4b);
outline-offset: 2px;
}
.detail-kicker {
display: flex;
flex-wrap: wrap;
gap: .42rem;
margin-bottom: .72rem;
}
.detail-kicker span {
padding: .34rem .56rem;
border: 1px solid var(--color-border, #e4d4bc);
border-radius: 999px;
background: var(--section-light-bg, #f5efe5);
font-size: .68rem;
font-weight: 900;
letter-spacing: .06em;
}
.price-line {
margin: .85rem 0;
color: var(--price-color, #1f2522);
font: 800 1.55rem var(--font-heading);
}
.detail-info {
padding: 1rem;
border: 1px solid var(--card-border, var(--color-border, #d8d4c9));
border-radius: 20px;
background: rgba(255, 255, 255, .62);
background: color-mix(in srgb, var(--card-bg, var(--color-surface, #fff)) 62%, transparent);
}
.detail-info h1 {
color: var(--section-title, var(--color-text, #201915));
}
.detail-info dl {
display: grid;
grid-template-columns: 5.45rem 1fr;
gap: .36rem .7rem;
padding: .88rem;
border: 1px solid var(--color-border, #d8d4c9);
border-radius: var(--radius-lg);
background: var(--card-bg, var(--color-surface, #fffdf9));
font-size: var(--fs-sm);
}
.detail-info dt {
color: var(--section-title, #5b4638);
font-weight: 800;
}
.detail-info dd {
margin: 0;
color: var(--section-text, var(--color-muted, #6b5b4d));
}
.detail-actions {
display: flex;
flex-wrap: wrap;
gap: .55rem;
margin: 1rem 0;
}
.detail-actions .btn.primary {
background: var(--section-dark-bg, #202822);
border-color: var(--section-dark-bg, #202822);
}
.image-info-badge {
display: inline-flex;
align-items: center;
width: max-content;
max-width: 100%;
margin: -.2rem 0 .8rem;
padding: .34rem .56rem;
border: 1px solid var(--color-border, #e4d4bc);
border-radius: 999px;
background: var(--section-light-bg, #f8f2e8);
color: var(--section-text, var(--color-muted, #6a5c50));
font-size: .68rem;
font-weight: 900;
letter-spacing: .06em;
}
.image-info-badge.is-hidden {
display: none;
}
.rich-text {
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
}
.related-strip {
margin: 1rem 0;
padding: .88rem;
border: 1px solid var(--color-border, #d8d4c9);
border-radius: 18px;
background: var(--card-bg, var(--color-surface, #fff));
color: var(--card-text, #201915);
box-shadow: 0 14px 40px rgba(31, 37, 34, .08);
box-shadow: 0 14px 40px color-mix(in srgb, var(--card-shadow, #1f2522) 8%, transparent);
}
.related-strip h2 {
font-size: 1.38rem;
}
.related-mini-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .52rem;
}
.related-mini-card {
display: grid;
gap: .38rem;
padding: .4rem;
border: 1px solid var(--color-border, #ecdcca);
border-radius: 12px;
background: var(--card-bg, var(--color-surface, #fff));
color: var(--card-text, #3c2c22);
font-size: .7rem;
font-weight: 800;
}
.related-mini-card img {
width: 100%;
aspect-ratio: 1.15 / 1;
object-fit: cover;
border-radius: var(--radius-sm);
}
.related-section {
padding-top: 2.8rem;
padding-bottom: 3.3rem;
}
/* --------------------------------------------------------------------------
23. About / contact layouts
-------------------------------------------------------------------------- */
.about-layout,
.contact-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.75rem;
}
.about-image img {
height: 100%;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
/* --------------------------------------------------------------------------
24. Footer
-------------------------------------------------------------------------- */
/* Auto-fit rather than four fixed tracks: the contact column is omitted entirely while the
business details are unset, and the remaining panels must still fill the row evenly. */
.site-footer {
padding: clamp(2.4rem, 5vw, 4.4rem) clamp(1rem, 3.8vw, 3.2rem) 1.2rem;
background:
radial-gradient(circle at 18% 0, rgba(255, 255, 255, .08), transparent 24%),
var(--footer-bg, #120e0c);
color: var(--footer-text, #fff);
font-size: var(--fs-sm);
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: 1.55rem 1.8rem;
max-width: var(--container-max);
margin: 0 auto;
}
/* Brand column is a touch wider so the description reads on one comfortable measure. */
.footer-brand { grid-column: span 2; }
@media (min-width: 1001px) {
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1fr; }
.footer-brand { grid-column: auto; }
.footer-projects-panel { grid-column: 2 / -1; }
}
.site-footer h2 {
margin-bottom: .75rem;
color: var(--footer-link-hover, #c79b4b);
font-family: var(--font-body);
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.site-footer p,
.site-footer address,
.footer-bottom {
color: rgba(255, 255, 255, .72);
color: color-mix(in srgb, var(--footer-muted, #c9beb4) 86%, transparent);
}
.site-footer p {
max-width: 26rem;
}
.site-footer address {
display: grid;
gap: .42rem;
font-style: normal;
}
.footer-panel {
min-width: 0;
}
.footer-brand-link {
margin-bottom: .9rem;
}
.footer-links {
display: grid;
gap: .48rem;
}
.footer-links a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
color: var(--footer-link, #ede3d3);
font-weight: 700;
}
.footer-links a:hover {
color: var(--footer-link-hover, #c79b4b);
}
.footer-cta {
display: inline-flex;
align-items: center;
gap: .45rem;
margin-top: .35rem;
padding: .55rem .76rem;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: var(--radius-md);
background: var(--footer-cta-bg, #8a542f);
color: var(--footer-cta-text, #fff);
font-weight: 800;
}
.footer-mini-proof {
margin: .9rem 0;
}
.footer-mini-proof span {
background: rgba(255, 255, 255, .07);
color: rgba(255, 255, 255, .78);
border-color: rgba(255, 255, 255, .1);
}
.contact-panel address span {
display: flex;
align-items: flex-start;
gap: .45rem;
}
.footer-social {
display: flex;
gap: .46rem;
margin-top: .8rem;
}
.footer-social a {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
background: rgba(255, 255, 255, .08);
color: var(--footer-text, #fff);
transition: background var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.footer-social a:hover {
transform: translateY(-2px);
background: var(--accent);
color: #1b120b;
}
.footer-bottom {
max-width: var(--container-max);
margin: 1.6rem auto 0;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, .1);
border-top-color: color-mix(in srgb, var(--footer-border, #3a3028) 72%, transparent);
font-size: var(--fs-xs);
}
/* --------------------------------------------------------------------------
25. Floating WhatsApp button
-------------------------------------------------------------------------- */
.whatsapp-float {
position: fixed;
z-index: 45;
right: 1rem;
bottom: 1rem;
padding: .6rem .82rem;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
background: var(--whatsapp-bg, #202822);
color: var(--whatsapp-text, #fff);
font-size: var(--fs-sm);
font-weight: 900;
box-shadow: 0 18px 42px rgba(31, 37, 34, .18);
}
.whatsapp-float:before {
content: "";
display: inline-block;
width: .5rem;
height: .5rem;
margin-right: .42rem;
border-radius: 50%;
background: #65d58b;
}
/* --------------------------------------------------------------------------
26. Page-load overlay and reveal-on-scroll
-------------------------------------------------------------------------- */
.site-header,
main,
.site-footer {
transition: filter var(--motion-med) ease, opacity var(--motion-med) ease, transform var(--motion-med) ease;
}
body.is-page-transitioning .site-header,
body.is-page-transitioning main,
body.is-page-transitioning .site-footer {
filter: blur(5px);
opacity: .82;
transform: scale(.998);
}
.page-transition {
position: fixed;
z-index: 100;
inset: 0;
display: grid;
place-items: center;
overflow: hidden;
background: transparent;
color: #fff;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--motion-fast) ease, visibility var(--motion-fast) ease;
}
.page-transition.is-leaving,
.page-transition.is-entering {
opacity: 1;
visibility: visible;
}
.page-transition.is-entering {
animation: loading-fade-out .5s ease forwards;
}
.transition-loader {
position: relative;
z-index: 2;
display: grid;
place-items: center;
gap: .68rem;
mix-blend-mode: difference;
opacity: 0;
transform: translateY(8px) scale(.985);
transition: opacity .22s ease, transform .22s ease;
}
.page-transition.is-leaving .transition-loader {
opacity: 1;
transform: none;
}
.page-transition.is-entering .transition-loader {
animation: loading-loader-out .42s ease forwards;
}
.transition-logo {
display: grid;
place-items: center;
width: 4.15rem;
height: 4.15rem;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .56);
border-radius: 18px;
background: rgba(255, 255, 255, .08);
box-shadow: 0 18px 44px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.transition-logo img {
width: 100%;
height: 100%;
padding: .34rem;
object-fit: contain;
filter: grayscale(1) contrast(1.05);
}
.transition-logo > span {
color: #fff;
font: 900 1.05rem var(--font-body);
letter-spacing: .12em;
}
.transition-brand {
color: #fff;
font: 700 clamp(1.05rem, 2.5vw, 1.55rem) var(--font-heading);
letter-spacing: .075em;
}
.transition-track {
position: relative;
width: min(280px, 58vw);
height: 2px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, .28);
}
.transition-track span {
position: absolute;
inset: 0;
width: 48%;
border-radius: inherit;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), #fff, rgba(255, 255, 255, .75), transparent);
animation: workshop-line .82s cubic-bezier(.72, 0, .2, 1) infinite;
}
.reveal {
opacity: 0;
transform: translateY(var(--reveal-shift, 16px));
transition: opacity var(--motion-reveal) ease, transform var(--motion-reveal) ease;
}
.reveal.visible {
opacity: 1;
transform: none;
}
/* --------------------------------------------------------------------------
27. Lightbox
-------------------------------------------------------------------------- */
.lightbox {
position: fixed;
z-index: 90;
inset: 0;
display: grid;
grid-template-rows: 1fr auto;
place-items: center;
padding: 1.3rem;
background: rgba(10, 7, 5, .9);
}
.lightbox img {
max-width: min(1100px, 92vw);
max-height: 88vh;
border-radius: var(--radius-lg);
}
body.lightbox-open {
overflow: hidden;
}
.gallery-lightbox {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: 1fr auto;
gap: 1rem;
background: rgba(12, 13, 12, .94);
backdrop-filter: blur(10px);
touch-action: pan-y;
}
.gallery-lightbox figure {
display: grid;
place-items: center;
min-width: 0;
margin: 0;
}
.gallery-lightbox img {
max-width: min(1120px, 82vw);
max-height: 82vh;
object-fit: contain;
}
.lightbox-caption {
margin-top: .8rem;
color: rgba(255, 255, 255, .8);
font-weight: 800;
text-align: center;
}
.lightbox-close {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 4;
width: 2.85rem;
height: 2.85rem;
border: 1px solid rgba(255, 255, 255, .5);
border-radius: 999px;
background: rgba(15, 12, 10, .55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: #fff;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}
/* High-contrast, always-visible navigation. A dark translucent disc with a light ring reads
clearly over both dark and light images; the SVG chevron fills most of the disc. */
.lightbox-nav {
display: grid;
place-items: center;
width: 3.35rem;
height: 3.35rem;
border: 1px solid rgba(255, 255, 255, .55);
border-radius: 999px;
background: rgba(15, 12, 10, .55);
color: #fff;
cursor: pointer;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.lightbox-nav svg {
width: 58%;
height: 58%;
stroke: currentColor;
}
.lightbox-nav:hover {
transform: scale(1.06);
background: rgba(15, 12, 10, .78);
border-color: var(--accent);
}
.lightbox-nav:focus-visible {
outline: 2px solid var(--accent, #c79b4b);
outline-offset: 3px;
}
.lightbox-count {
grid-column: 1 / -1;
color: rgba(255, 255, 255, .7);
font-size: var(--fs-xs);
font-weight: 900;
letter-spacing: .08em;
text-align: center;
}
.lightbox-info {
width: min(760px, 88vw);
max-height: 24vh;
margin: .65rem auto 0;
padding: .72rem .9rem;
overflow: auto;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .84);
text-align: left;
}
.lightbox-info[hidden] {
display: none;
}
.lightbox-info p {
margin: 0 0 .5rem;
color: inherit;
font-size: var(--fs-sm);
line-height: 1.55;
}
.lightbox-info p:last-child {
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
28. Maintenance page
-------------------------------------------------------------------------- */
.maintenance-page {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--maintenance-bg, #17120f);
color: var(--maintenance-text, #fff);
}
/* Pure CSS gradient — no remote imagery. */
.premium-maintenance {
background: linear-gradient(135deg, #17120f, #241a14);
background:
radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--maintenance-accent, #c79b4b) 20%, transparent), transparent 42%),
linear-gradient(135deg, var(--maintenance-bg, #17120f), var(--maintenance-card-bg, #241a14));
}
.maintenance-panel {
max-width: 42rem;
padding: 3rem;
background: rgba(36, 26, 20, .82);
background: color-mix(in srgb, var(--maintenance-card-bg, #241a14) 82%, transparent);
text-align: center;
}
.maintenance-logo {
width: 5rem;
height: 5rem;
margin: 0 auto 1rem;
object-fit: contain;
}
.maintenance-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: .7rem;
margin-top: 1.2rem;
}
.maintenance-page .eyebrow {
color: var(--maintenance-accent, #c79b4b);
}
/* --------------------------------------------------------------------------
29. Focus visibility
-------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
.lightbox-close:focus-visible,
.lightbox button:focus-visible {
outline: 3px solid rgba(181, 138, 74, .6);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
30. Animation intensity (body class written by the server from the theme)
-------------------------------------------------------------------------- */
/* Etkileyici — full motion. Explicit so the class is a real, documented state. */
.animation-etkileyici {
--motion-fast: .18s;
--motion-med: .24s;
--motion-slow: .5s;
--motion-reveal: .48s;
--motion-hero-fade: .85s;
--motion-hero-zoom: 4.2s;
--reveal-shift: 16px;
}
/* Premium hafif — short, subtle transitions, no overlay, no hero parallax. */
.animation-premium-hafif {
--motion-fast: .15s;
--motion-med: .15s;
--motion-slow: .15s;
--motion-reveal: .15s;
--motion-hero-fade: .15s;
--motion-hero-zoom: .15s;
--reveal-shift: 8px;
}
.animation-premium-hafif .page-transition {
display: none;
}
.animation-premium-hafif .hero-slide,
.animation-premium-hafif .hero-slide.is-active {
transform: none;
}
.animation-premium-hafif .mega-card:hover,
.animation-premium-hafif .product-card:hover,
.animation-premium-hafif .btn:hover,
.animation-premium-hafif .nav-cta:hover {
transform: none;
}
/* Kapalı — no motion at all. Zeroed durations plus the overlay removed, which
also removes the only keyframe animations in this sheet. */
.animation-kapali {
--motion-fast: 0s;
--motion-med: 0s;
--motion-slow: 0s;
--motion-reveal: 0s;
--motion-hero-fade: 0s;
--motion-hero-zoom: 0s;
--reveal-shift: 0px;
}
.animation-kapali .page-transition {
display: none;
}
.animation-kapali .reveal {
opacity: 1;
transform: none;
}
.animation-kapali .hero-slide,
.animation-kapali .hero-slide.is-active {
transform: none;
}
.animation-kapali .mega-card:hover,
.animation-kapali .product-card:hover,
.animation-kapali .btn:hover,
.animation-kapali .nav-cta:hover,
.animation-kapali .product-card:hover img,
.animation-kapali .gallery-item:hover img,
.animation-kapali .mega-card.product:hover img {
transform: none;
}
html:has(body.animation-kapali) {
scroll-behavior: auto;
}
/* --------------------------------------------------------------------------
31. Keyframes
-------------------------------------------------------------------------- */
@keyframes workshop-line {
0% {
transform: translateX(-110%);
}
100% {
transform: translateX(230%);
}
}
@keyframes loading-fade-out {
0%,
35% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
@keyframes loading-loader-out {
0%,
45% {
opacity: 1;
transform: none;
}
100% {
opacity: 0;
transform: translateY(-8px) scale(.985);
}
}
/* ==========================================================================
32. BREAKPOINTS — the only three in this file, and they come last so they
always win over the unconditional rules above.
========================================================================== */
/* --- Tablet / mobile ------------------------------------------------------ */
@media (max-width: 1000px) {
/* Header */
.premium-header {
padding: var(--nav-mobile-py, .55rem) var(--nav-mobile-px, .9rem);
}
.premium-header .header-inner {
position: relative;
}
.menu-toggle {
display: block;
}
/* Nav becomes a drop-down panel: panel radius, not the desktop pill. */
.site-nav {
position: fixed;
inset: 3.8rem .85rem auto;
display: grid;
gap: .18rem;
padding: .82rem;
border-radius: 18px;
border: 1px solid var(--nav-mobile-border, #3a3028);
background: var(--nav-mobile-bg, #17120f);
color: var(--nav-mobile-text, #fff);
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: transform .2s ease, opacity .2s ease;
}
.site-nav.open {
opacity: 1;
pointer-events: auto;
transform: none;
}
.site-nav a {
display: flex;
align-items: center;
min-height: 44px;
}
.site-nav > a,
.site-nav .nav-link-main {
padding: .4rem .6rem;
border-radius: 12px;
color: var(--nav-mobile-text, #fff);
}
.site-nav .brand-copy small,
.site-nav .mega-toggle {
color: var(--nav-mobile-muted, #c9beb4);
}
.site-nav a.active,
.site-nav a[aria-current="page"] {
background: var(--nav-mobile-active-bg, #2e241d);
color: var(--nav-mobile-active-text, #efe3d0);
}
/* Scrim behind the open mobile drawer. Colour is theme-owned (MobileNavScrimColor). */
body:has(.site-nav.open):before {
content: "";
position: fixed;
inset: 0;
z-index: 40;
background: color-mix(in srgb, var(--nav-scrim, #0a0705) 55%, transparent);
}
.site-nav {
z-index: 60;
}
.site-nav .nav-item {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
.site-nav .nav-link-main {
min-height: 44px;
padding-top: 0;
padding-bottom: 0;
}
.mega-toggle {
width: 2.4rem;
height: 2.4rem;
}
.has-mega.pinned .mega-toggle {
background: transparent;
}
/* Mega menu becomes an inline accordion panel. */
.mega-menu {
position: static;
grid-column: 1 / -1;
display: none;
grid-template-columns: 1fr;
width: 100%;
margin: .15rem 0 .4rem;
padding: .56rem;
border-radius: 14px;
background: var(--nav-dropdown-bg, #fffdf8);
box-shadow: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu {
transform: none;
}
.has-mega.open .mega-menu {
display: grid;
transform: none;
}
.mega-menu:before,
.mega-intro {
display: none;
}
.mega-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .45rem;
}
.mega-mobile-all {
display: flex;
}
.mega-card {
min-height: 82px;
padding: .58rem;
border-radius: 8px;
}
.mega-card strong {
font-size: .95rem;
}
.mega-card small {
display: none;
}
.mega-card.mobile-collapsed {
display: none;
}
.mega-card.product img {
opacity: .74;
}
/* Hero — .hero-slider height/min-height are intentionally left to the base rule (100dvh + 560px
floor) so the hero fills the viewport; only content padding is adjusted here. */
.hero-content {
padding-top: 7.6rem;
}
.hero-trust-row {
gap: .32rem;
}
.hero-side-note,
.slider-arrow {
display: none;
}
/* Grids */
.category-grid,
.why-grid,
.testimonial-grid {
grid-template-columns: repeat(2, 1fr);
}
/* 6 sayaç tablette 3×2 düzende dengeli durur. */
.counter-band {
grid-template-columns: repeat(3, 1fr);
}
.product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.category-tile:first-child {
grid-row: auto;
min-height: 260px;
}
.product-detail,
.about-layout,
.contact-layout {
grid-template-columns: 1fr;
}
.detail-gallery {
position: static;
}
.section-head.rowed,
.custom-band {
align-items: flex-start;
flex-direction: column;
}
.related-mini-list {
grid-template-columns: repeat(3, minmax(130px, 1fr));
overflow-x: auto;
}
/* Lightbox */
.gallery-lightbox {
grid-template-columns: 1fr;
}
.gallery-lightbox img {
max-width: 92vw;
}
.lightbox-nav {
position: fixed;
top: 50%;
z-index: 2;
}
.lightbox-prev {
left: .75rem;
}
.lightbox-next {
right: .75rem;
}
.lightbox-count {
position: fixed;
bottom: 1rem;
left: 0;
right: 0;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-brand { grid-column: 1 / -1; }
}
/* --- Small mobile --------------------------------------------------------- */
@media (max-width: 640px) {
:root {
/* Heading sizes are clamp-based now and scale down on their own, so no per-token
mobile override is needed. Body stays comfortably above the 0.875rem floor. */
--fs-base: .95rem;
--fs-lg: 1.0rem;
--section-padding: 2.45rem;
}
/* NOTE: header padding is NOT hardcoded here on purpose — it stays under
--nav-mobile-py / --nav-mobile-px from the 1000px block above. */
.brand {
font-size: .76rem;
}
.premium-header .brand-logo {
width: 3rem;
height: 3rem;
}
.premium-header .brand-copy strong {
font-size: .86rem;
}
.brand-copy small {
display: none;
}
.menu-toggle {
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
background: rgba(255, 255, 255, .08);
}
.mega-grid {
grid-template-columns: 1fr;
}
/* .hero-slider height is intentionally NOT overridden on phones: the base rule's 100dvh (with
svh/vh fallbacks) + 560px floor must win so the hero fills the full mobile viewport, including
as the browser toolbars collapse. Do not re-add a fixed vh/px height here. */
.hero-content {
padding-top: 7.35rem;
padding-left: 1rem;
padding-right: 1rem;
}
.hero-content h1,
.hero-content .hero-title {
max-width: 12ch;
}
.hero-trust-row span {
min-height: 1.65rem;
font-size: .62rem;
}
.category-grid,
.product-grid,
.why-grid,
.gallery-grid.preview,
.footer-grid {
grid-template-columns: 1fr;
}
.footer-brand { grid-column: auto; }
/* Mobile testimonials: accessible horizontal scroll-snap. No JS, keyboard reachable,
each card ~86% wide so the next one peeks (a clear "more to the side" cue) without
cutting a card meaninglessly. Respects reduced-motion via smooth-scroll opt-out below. */
.testimonial-grid {
grid-template-columns: none;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: .8rem;
padding-bottom: .6rem;
-webkit-overflow-scrolling: touch;
}
.testimonial-card {
flex: 0 0 86%;
scroll-snap-align: start;
}
/* 6 sayaç mobilde 2 sütun (2×3), son satır dengeli. */
.counter-band {
grid-template-columns: repeat(2, 1fr);
}
.site-footer {
gap: 1rem;
}
.footer-panel {
padding-bottom: .3rem;
}
.category-chips {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: .2rem;
scrollbar-width: thin;
}
.filter-chip {
white-space: nowrap;
}
.product-search {
display: grid;
grid-template-columns: 1fr auto;
max-width: none;
}
.product-card {
border-radius: 14px;
}
.product-image {
aspect-ratio: 1.16 / 1;
}
.product-image-action {
opacity: 1;
transform: none;
}
.product-body p {
min-height: auto;
}
.custom-band,
.counter-band,
.offer-banner {
margin-left: .85rem;
margin-right: .85rem;
}
.product-detail {
padding-top: 5.95rem;
}
.detail-info {
padding: .82rem;
}
.detail-actions .btn {
width: 100%;
}
.related-mini-list {
grid-template-columns: repeat(3, 132px);
}
.page-hero {
padding-left: 1rem;
padding-right: 1rem;
}
.gallery-item em {
opacity: 1;
transform: none;
}
.gallery-open-hint {
right: .6rem;
bottom: .6rem;
font-size: .65rem;
}
.lightbox-nav {
width: 2.9rem;
height: 2.9rem;
}
.whatsapp-float {
right: .85rem;
bottom: .85rem;
}
.transition-logo {
width: 3.35rem;
height: 3.35rem;
border-radius: 14px;
}
.transition-brand {
font-size: 1.08rem;
}
.transition-track {
width: min(220px, 64vw);
}
}
/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
.reveal {
opacity: 1;
transform: none;
}
.page-transition {
display: none;
}
}
/* --------------------------------------------------------------------------
26. Construction process + service areas (data-driven home sections)
-------------------------------------------------------------------------- */
.process-track {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: .9rem;
counter-reset: stage;
}
.process-step {
position: relative;
border-radius: var(--radius-md, 14px);
overflow: hidden;
background: var(--surface-2, #f2f2f2);
aspect-ratio: 4 / 3;
}
.process-step img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.process-step-number {
position: absolute;
z-index: 2;
top: .55rem;
left: .55rem;
min-width: 1.9rem;
height: 1.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 .45rem;
border-radius: 999px;
font-weight: 700;
font-size: .9rem;
background: var(--cta-bg, #1f2933);
color: var(--cta-text, #ffffff);
}
.area-chip-row {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: .6rem;
}
.area-chip {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem .95rem;
border-radius: 999px;
border: 1px solid var(--border, rgba(0, 0, 0, .12));
background: var(--surface, #ffffff);
color: var(--text, #1f2933);
font-weight: 600;
}
/* Project cards reuse the product grid rhythm. */
.project-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
}
.project-card {
display: flex;
flex-direction: column;
border-radius: var(--radius-md, 14px);
overflow: hidden;
background: var(--surface, #ffffff);
border: 1px solid var(--border, rgba(0, 0, 0, .1));
}
.project-image {
position: relative;
display: block;
aspect-ratio: 16 / 10;
background: var(--surface-2, #f2f2f2);
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.project-image-count {
position: absolute;
right: .6rem;
bottom: .6rem;
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .25rem .6rem;
border-radius: 999px;
font-size: .82rem;
font-weight: 600;
background: rgba(0, 0, 0, .62);
color: #fff;
}
.project-body {
display: flex;
flex-direction: column;
gap: .5rem;
padding: 1rem 1.1rem 1.2rem;
}
.project-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
}
.project-type {
font-size: .82rem;
font-weight: 600;
padding: .15rem .55rem;
border-radius: 999px;
background: var(--surface-2, #f2f2f2);
}
.project-body h3 {
margin: 0;
font-size: 1.05rem;
line-height: 1.35;
}
.project-cta {
margin-top: auto;
display: inline-flex;
align-items: center;
/* A standalone card action, not a link inside a sentence, so it carries a real target. */
min-height: 2.75rem;
gap: .35rem;
font-weight: 600;
}
@media (max-width: 1024px) {
.project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.project-grid { grid-template-columns: 1fr; }
.process-track { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
/* ==========================================================================
Icons
Icons come from the local sprite at /img/icons.svg (Tabler Icons, MIT — see
wwwroot/img/ICONS-LICENSE.txt). Stroke properties live here rather than on each
symbol so the icon inherits the surrounding text colour, exactly like the webfont
glyph it replaced. `stroke` and `fill` are inherited SVG properties, so they reach
the shadow tree created by