/* ============================================================
ENDER HEDIYELIK — Toptan Hediyelik Katalog Tasarim Sistemi
Beyaz + Turuncu + Nötr Gri — sade ticari katalog dili
============================================================ */
:root {
/* Marka */
--brand: #ee5a1c;
--brand-dark: #c8470d;
--brand-darker: #a83708;
--brand-soft: #fff1ea;
--brand-soft-2: #ffe2d2;
/* Metin & arka plan */
--ink: #1a1a1a;
--ink-2: #404040;
--muted: #6b7280;
--muted-2: #9ca3af;
--line: #e5e7eb;
--line-strong: #d1d5db;
--bg: #ffffff;
--bg-soft: #f7f8fa;
--bg-soft-2: #eef0f3;
--bg-dark: #1a1a1a;
--bg-dark-2: #2a2a2a;
/* Aksiyon */
--whatsapp: #25d366;
--whatsapp-dark: #128c7e;
--success: #16a34a;
--success-soft: #dcfce7;
--danger: #dc2626;
--danger-soft: #fee2e2;
--info: #2563eb;
--info-soft: #dbeafe;
--warn: #f59e0b;
--warn-soft: #fef3c7;
/* Gölge & yuvarlatma */
--shadow-xs: 0 1px 2px rgba(0,0,0,.04);
--shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--shadow: 0 4px 12px rgba(0,0,0,.08);
--shadow-lg: 0 12px 28px rgba(0,0,0,.10);
--shadow-xl: 0 24px 48px rgba(0,0,0,.14);
--radius-xs: 3px;
--radius-sm: 4px;
--radius: 6px;
--radius-lg: 10px;
--radius-xl: 14px;
/* Layout */
--container: 1400px;
--header-h: 78px;
/* Geçiş */
--t: 180ms ease;
--t-md: 280ms cubic-bezier(.4, 0, .2, 1);
}
/* ============================================================
RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size: 14.5px;
line-height: 1.6;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'cv11', 'ss01', 'kern';
}
a {
color: inherit;
text-decoration: none;
transition: color var(--t), background var(--t), border-color var(--t), opacity var(--t);
}
a:hover { color: var(--brand); }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea {
font: inherit;
color: inherit;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 {
margin: 0 0 .5em;
font-family: inherit;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.25;
}
h1 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
h3 { font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
h4 { font-size: 1rem; }
p { margin: 0 0 1rem; }
::selection { background: var(--brand); color: #fff; }
/* ============================================================
LAYOUT HELPERS
============================================================ */
.container-x {
max-width: var(--container);
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 32px);
}
.py-8 { padding: clamp(28px, 4vw, 44px) 0 clamp(48px, 6vw, 72px); }
.text-muted { color: var(--muted); }
.hidden { display: none !important; }
.skip-link {
position: absolute;
top: -40px;
left: 8px;
background: var(--brand);
color: #fff;
padding: 8px 14px;
border-radius: var(--radius);
font-size: 13px;
z-index: 9999;
}
.skip-link:focus { top: 8px; }
/* ============================================================
ALERTS — sade kart, sol ikon, soft renkli
============================================================ */
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
border-radius: var(--radius);
border: 1px solid transparent;
background: var(--info-soft);
color: #1e40af;
font-size: 14px;
line-height: 1.55;
margin-bottom: 18px;
}
.alert::before {
content: '';
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.alert-info { border-color: rgba(37, 99, 235, 0.22); background: var(--info-soft); color: #1e40af; }
.alert-success { border-color: rgba(22, 163, 74, 0.22); background: var(--success-soft); color: #166534; }
.alert-success::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.alert-error { border-color: rgba(220, 38, 38, 0.22); background: var(--danger-soft); color: #991b1b; }
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }
.alert a:hover { opacity: 0.85; }
/* ============================================================
FORMS
============================================================ */
.form-group { margin-bottom: 16px; }
.form-group label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 500;
color: var(--ink-2);
}
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
width: 100%;
padding: 10px 14px;
font-size: 14px;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: #fff;
color: var(--ink);
transition: border-color var(--t), box-shadow var(--t);
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(238, 90, 28, 0.14);
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder { color: var(--muted-2); }
textarea.form-control { min-height: 120px; resize: vertical; }
.form-error {
margin-top: 6px;
color: var(--danger);
font-size: 12.5px;
}
/* ============================================================
BUTTONS
============================================================ */
.btn-primary,
.btn-secondary,
.btn-wa-primary,
.btn-sm,
.btn-link-pill,
.catalog-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
font-size: 13.5px;
letter-spacing: 0.015em;
border-radius: var(--radius);
padding: 11px 22px;
transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
color 200ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
line-height: 1;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.btn-primary:active,
.btn-secondary:active,
.btn-wa-primary:active,
.btn-sm:active { transform: scale(0.97); }
.btn-primary {
background: var(--brand);
color: #fff;
box-shadow: 0 1px 3px rgba(238, 90, 28, 0.20);
}
.btn-primary:hover {
background: var(--brand-dark);
color: #fff;
box-shadow: 0 4px 10px rgba(238, 90, 28, 0.32);
transform: translateY(-1px);
}
.btn-secondary {
background: #fff;
color: var(--ink);
border-color: var(--line-strong);
}
.btn-secondary:hover {
background: var(--brand-soft);
border-color: var(--brand);
color: var(--brand-dark);
}
.btn-wa-primary {
background: var(--whatsapp);
color: #fff;
box-shadow: 0 1px 3px rgba(37, 211, 102, 0.22);
}
.btn-wa-primary:hover {
background: var(--whatsapp-dark);
color: #fff;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.36);
transform: translateY(-1px);
}
.btn-wa-primary svg,
.btn-primary svg,
.btn-secondary svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.btn-sm {
padding: 8px 14px;
font-size: 12.5px;
background: var(--brand);
color: #fff;
}
.btn-sm:hover { background: var(--brand-dark); }
.btn-link-pill,
.catalog-link {
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
background: var(--bg-soft);
color: var(--ink-2);
border: 1px solid var(--line);
}
.btn-link-pill:hover,
.catalog-link:hover {
background: var(--brand-soft);
color: var(--brand-dark);
border-color: var(--brand);
}
/* ============================================================
SECTION HEADING
============================================================ */
.section,
.section-shell {
padding: clamp(36px, 5vw, 64px) 0;
background: var(--bg);
}
.section.alt,
.section-shell.alt {
background: var(--bg-soft);
}
/* Ardışık aynı renk section'lar arasındaki çift boşluğu azalt */
.section-shell + .section-shell:not(.alt) { padding-top: 0; }
.section-shell.alt + .section-shell.alt { padding-top: 0; }
.section-head,
.section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 26px;
flex-wrap: wrap;
}
.section-head.center,
.section-heading.center {
justify-content: center;
text-align: center;
}
.section-head.center > div,
.section-heading.center > div {
max-width: 720px;
}
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 12px;
}
.section-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--brand-soft);
color: var(--brand);
font-size: 11px;
font-weight: 800;
box-shadow: inset 0 0 0 1px rgba(238, 90, 28, 0.15);
}
.section-kicker {
color: var(--muted);
letter-spacing: 0.18em;
}
.section-title {
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
font-weight: 700;
margin: 0 0 8px;
color: var(--ink);
}
.section-title em {
font-style: normal;
color: var(--brand);
}
.section-desc {
margin: 0;
color: var(--muted);
font-size: 14px;
max-width: 640px;
}
.section-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--brand);
padding: 8px 0;
border-bottom: 1.5px solid var(--brand);
}
.section-more::after {
content: '→';
transition: transform var(--t);
}
.section-more:hover { color: var(--brand-dark); }
.section-more:hover::after { transform: translateX(3px); }
/* ============================================================
TOP BAR — myros tarzı: sol iletişim, orta duyuru, sağ ikon-pill
============================================================ */
.top-bar {
background: var(--ink);
color: rgba(255, 255, 255, 0.85);
font-size: 12px;
border-bottom: 0;
}
.top-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0;
min-height: 36px;
}
.top-contact {
display: flex;
align-items: center;
gap: 18px;
}
.top-contact-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
transition: color var(--t);
}
.top-contact-link:hover { color: var(--brand); }
.top-contact-link svg { opacity: 0.7; }
.announce {
flex: 1;
text-align: center;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
letter-spacing: 0.01em;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 0;
}
.announce strong,
.announce .announce-prefix {
color: var(--brand);
font-weight: 700;
flex: 0 0 auto;
}
/* Ticker — dikey kayan mesajlar */
.announce-ticker { overflow: hidden; }
.announce-track {
display: inline-flex;
flex-direction: column;
align-items: center;
height: 1.5em;
overflow: hidden;
position: relative;
flex: 0 1 auto;
min-width: 0;
}
.announce-item {
display: inline-block;
height: 1.5em;
line-height: 1.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
opacity: 1;
transform: translateY(0);
transition: transform .55s cubic-bezier(.32, .72, .4, 1),
opacity .35s ease;
}
/* Sabit (tek mesaj) */
.announce-ticker:not(.is-rotating) .announce-item.active {
position: static;
opacity: 1;
transform: none;
}
/* Rotating: tek bir görünür item, JS class değişimleriyle yönetir */
.announce-ticker.is-rotating .announce-item {
position: absolute;
inset: 0;
text-align: center;
opacity: 0;
transform: translateY(100%);
pointer-events: none;
}
.announce-ticker.is-rotating .announce-item.active {
position: relative;
opacity: 1;
transform: translateY(0);
}
.announce-ticker.is-rotating .announce-item.exiting {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(-100%);
}
.top-quick {
display: flex;
align-items: center;
gap: 4px;
}
.top-quick-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 4px;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.01em;
transition: background var(--t), color var(--t);
}
.top-quick-pill:hover {
background: rgba(255, 255, 255, 0.10);
color: #fff;
}
.top-quick-pill svg {
opacity: 0.85;
flex-shrink: 0;
}
/* ============================================================
HEADER
============================================================ */
.site-header {
background: #fff;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
}
.header-main {
display: flex;
align-items: center;
gap: 32px;
padding: 16px 0;
min-height: var(--header-h);
}
.brand-logo {
display: flex;
align-items: center;
font-family: inherit;
font-size: 22px;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.02em;
flex-shrink: 0;
}
.brand-logo span {
color: var(--brand);
margin-left: 2px;
}
.brand-logo img {
max-height: var(--logo-h, 48px);
width: auto;
}
.search-form {
flex: 1;
position: relative;
max-width: 680px;
display: flex;
align-items: center;
}
.search-form input {
width: 100%;
padding: 12px 56px 12px 18px;
font-size: 14px;
border: 1.5px solid var(--brand);
border-radius: var(--radius);
background: #fff;
color: var(--ink);
}
.search-form input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(238, 90, 28, 0.15);
}
.search-form button {
position: absolute;
right: 4px;
top: 4px;
bottom: 4px;
width: 46px;
display: flex;
align-items: center;
justify-content: center;
background: var(--brand);
color: #fff;
border-radius: var(--radius-sm);
transition: background var(--t);
}
.search-form button:hover { background: var(--brand-dark); }
/* ============================================================
LIVE SEARCH — autocomplete dropdown
============================================================ */
.search-suggest {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
z-index: 200;
max-height: 480px;
overflow-y: auto;
animation: suggestFadeIn .15s ease;
}
@keyframes suggestFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.search-suggest[hidden] { display: none; }
.suggest-list { display: flex; flex-direction: column; }
.suggest-item {
display: grid;
grid-template-columns: 48px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: inherit;
transition: background .14s ease;
}
.suggest-item:last-child { border-bottom: 0; }
.suggest-item:hover,
.suggest-item.is-active {
background: var(--brand-soft);
}
.suggest-img {
width: 48px; height: 48px;
border-radius: var(--radius-sm);
background: var(--bg-soft);
border: 1px solid var(--line);
overflow: hidden;
display: grid; place-items: center;
color: var(--muted-2);
flex: 0 0 auto;
}
.suggest-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suggest-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.suggest-name {
font-size: 14px;
font-weight: 600;
color: var(--ink);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.suggest-name mark {
background: rgba(238, 90, 28, .18);
color: var(--brand-dark);
font-weight: 800;
padding: 0 1px;
border-radius: 2px;
}
.suggest-meta {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px;
color: var(--muted);
font-weight: 500;
}
.suggest-meta code {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 10.5px;
background: var(--bg-soft);
border: 1px solid var(--line);
padding: 1px 6px;
border-radius: 3px;
color: var(--muted);
}
.suggest-tag {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff;
font-size: 9.5px;
font-weight: 800;
padding: 1px 6px;
border-radius: 999px;
letter-spacing: 0.04em;
}
.suggest-price {
font-size: 13.5px;
font-weight: 800;
color: var(--brand-dark);
font-variant-numeric: tabular-nums;
text-align: right;
line-height: 1.2;
}
.suggest-price .muted { color: var(--muted-2); font-weight: 500; font-size: 12px; }
.suggest-price small {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--muted-2);
text-decoration: line-through;
}
.suggest-empty {
padding: 22px 16px;
text-align: center;
color: var(--muted);
font-size: 13.5px;
}
.suggest-empty strong { color: var(--ink); font-weight: 700; }
.suggest-empty a {
display: inline-block;
margin-top: 8px;
color: var(--brand);
font-weight: 700;
font-size: 13px;
}
.suggest-all {
display: flex; align-items: center; justify-content: center;
gap: 6px;
padding: 11px 14px;
background: var(--bg-soft);
border-top: 1px solid var(--line);
color: var(--brand);
font-weight: 700;
font-size: 13px;
text-decoration: none;
transition: background .14s ease;
}
.suggest-all:hover {
background: var(--brand-soft);
color: var(--brand-dark);
}
.header-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.header-action {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 14px;
border-radius: var(--radius);
font-size: 11.5px;
font-weight: 500;
color: var(--ink-2);
text-align: center;
min-width: 68px;
transition: background var(--t), color var(--t);
}
.header-action:hover {
background: var(--bg-soft);
color: var(--brand);
}
.header-action svg {
width: 22px;
height: 22px;
stroke-width: 1.8;
}
.header-action .badge {
position: absolute;
top: 4px;
right: 8px;
background: var(--brand);
color: #fff;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
line-height: 18px;
border-radius: 9px;
text-align: center;
padding: 0 5px;
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* Header CTA — sağda turuncu pill (Bayi Başvurusu vb.) */
.header-cta,
.header-quote {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--brand);
color: #fff;
padding: 11px 20px;
border-radius: var(--radius);
font-size: 13.5px;
font-weight: 700;
margin-left: 8px;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(238, 90, 28, 0.28);
transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.header-cta:hover,
.header-quote:hover {
background: var(--brand-dark);
color: #fff;
box-shadow: 0 4px 12px rgba(238, 90, 28, 0.4);
transform: translateY(-1px);
}
.header-cta svg,
.header-quote svg {
width: 17px;
height: 17px;
flex-shrink: 0;
}
/* Eski WhatsApp varyantı — gerek olursa */
.header-quote.is-whatsapp {
background: var(--whatsapp);
box-shadow: 0 2px 6px rgba(37, 211, 102, 0.28);
}
.header-quote.is-whatsapp:hover {
background: var(--whatsapp-dark);
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}
.mobile-menu-toggle {
display: none;
width: 42px;
height: 42px;
border-radius: var(--radius);
background: var(--bg-soft);
color: var(--ink);
align-items: center;
justify-content: center;
}
.mobile-menu-toggle:hover { background: var(--brand-soft); color: var(--brand); }
.mobile-menu-toggle svg { width: 22px; height: 22px; }
/* Mobil header'a sade ikon — telefon, fav vb. (masaüstünde gizli) */
.header-mobile-icon {
display: none;
width: 42px;
height: 42px;
border-radius: var(--radius);
background: var(--bg-soft);
color: var(--ink);
align-items: center;
justify-content: center;
transition: background var(--t), color var(--t);
position: relative;
-webkit-tap-highlight-color: transparent;
}
.header-mobile-icon:hover,
.header-mobile-icon:active {
background: var(--brand-soft);
color: var(--brand);
}
.header-mobile-icon svg { width: 20px; height: 20px; }
.header-mobile-icon .badge {
position: absolute;
top: 2px;
right: 2px;
background: var(--brand);
color: #fff;
font-size: 9.5px;
font-weight: 700;
min-width: 17px;
height: 17px;
line-height: 17px;
border-radius: 9px;
text-align: center;
padding: 0 5px;
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
/* ============================================================
SITE NAV (Mega Menu)
============================================================ */
.site-nav {
background: var(--brand);
color: #fff;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.site-nav .container-x {
display: flex;
align-items: stretch;
}
.nav-list {
display: flex;
flex-wrap: nowrap;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
width: 100%;
align-items: stretch;
}
.nav-list > li {
position: relative;
display: flex;
align-items: stretch;
}
.nav-list > li > a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 16px;
height: 44px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
position: relative;
white-space: nowrap;
transition: background var(--t), color var(--t);
}
.nav-list > li > a::after {
content: '';
position: absolute;
left: 16px;
right: 16px;
bottom: 0;
height: 3px;
background: #fff;
transform: scaleX(0);
transform-origin: center;
transition: transform var(--t);
}
.nav-list > li > a:hover {
background: rgba(0, 0, 0, 0.10);
color: #fff;
}
.nav-list > li.active > a {
background: rgba(0, 0, 0, 0.12);
color: #fff;
}
.nav-list > li.active > a::after,
.nav-list > li > a:hover::after {
transform: scaleX(1);
}
.nav-list > li.has-mega > a > .caret {
margin-left: 2px;
opacity: 0.85;
}
/* B2B item — sağa yaslı outline pill */
.nav-list .nav-b2b {
margin-left: auto;
}
.nav-list .nav-b2b > a {
margin: 6px 0;
padding: 0 14px;
height: 32px;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.14);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.5);
font-size: 11.5px;
letter-spacing: 0.06em;
align-self: center;
}
.nav-list .nav-b2b > a::after { display: none; }
.nav-list .nav-b2b > a:hover {
background: #fff;
color: var(--brand-dark);
border-color: #fff;
}
.nav-list .nav-b2b > a svg {
width: 14px;
height: 14px;
}
.nav-list .nav-b2b.active > a {
background: #fff;
color: var(--brand-dark);
border-color: #fff;
}
.caret {
transition: transform var(--t);
opacity: 0.85;
}
.has-mega:hover .caret {
transform: rotate(180deg);
}
.mega {
position: absolute;
top: 100%;
left: 0;
width: 100%;
min-width: 980px;
max-width: var(--container);
background: #fff;
color: var(--ink);
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
box-shadow: var(--shadow-lg);
padding: 26px;
display: none;
grid-template-columns: repeat(3, 1fr) 280px;
gap: 24px;
z-index: 200;
}
.catalog-mega { /* alias */ }
.has-mega:hover .mega,
.has-mega:focus-within .mega {
display: grid;
}
.mega-col h4 {
font-size: 12px;
font-weight: 700;
color: var(--brand);
text-transform: uppercase;
letter-spacing: 0.1em;
padding-bottom: 10px;
margin: 0 0 12px;
border-bottom: 1px solid var(--line);
}
.mega-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.mega-col li {
padding: 4px 0;
border: 0;
}
.mega-col li:hover { background: transparent; }
.mega-col a {
display: block;
padding: 5px 0;
font-size: 13px;
color: var(--ink-2);
font-weight: 500;
border: 0;
transition: color var(--t), padding var(--t);
}
.mega-col li > a:first-child {
font-weight: 600;
color: var(--ink);
}
.mega-col a:hover {
color: var(--brand);
padding-left: 4px;
}
.catalog-mega .mega-promo,
.mega-promo {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-darker) 100%);
background-size: cover;
background-position: center;
color: #fff;
padding: 22px;
border-radius: var(--radius);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
isolation: isolate;
}
.mega-promo::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(238, 90, 28, 0.92) 0%, rgba(168, 55, 8, 0.85) 100%);
z-index: 0;
}
.mega-promo.has-image::before {
background: linear-gradient(135deg, rgba(168, 55, 8, 0.85) 0%, rgba(26, 26, 26, 0.55) 100%);
}
.mega-promo::after {
content: '';
position: absolute;
right: -40px;
bottom: -40px;
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
z-index: 0;
}
.mega-promo > * { position: relative; z-index: 1; }
.mega-promo h4 {
color: #fff;
font-size: 16px;
margin: 0 0 8px;
border: 0;
padding: 0;
letter-spacing: -0.01em;
text-transform: none;
}
.mega-promo p {
font-size: 13px;
margin: 0 0 14px;
opacity: 0.92;
line-height: 1.5;
}
.mega-promo .btn-sm {
background: #fff;
color: var(--brand);
align-self: flex-start;
}
.mega-promo .btn-sm:hover { background: var(--ink); color: #fff; }
/* ============================================================
MOBILE DRAWER
============================================================ */
.mobile-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
transition: opacity var(--t-md), visibility var(--t-md);
z-index: 998;
}
.mobile-drawer-backdrop.open {
opacity: 1;
visibility: visible;
}
.mobile-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(360px, 88vw);
background: #fff;
z-index: 999;
transform: translateX(-100%);
transition: transform var(--t-md);
display: flex;
flex-direction: column;
overflow: hidden;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
background: var(--brand);
color: #fff;
border-bottom: 1px solid var(--brand-dark);
flex-shrink: 0;
}
.mobile-drawer-header .title {
font-weight: 700;
font-size: 15px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.mobile-drawer-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
color: #fff;
background: rgba(255,255,255,0.15);
}
.mobile-drawer-close:hover { background: rgba(255,255,255,0.28); }
.mobile-drawer-search {
padding: 14px 18px;
background: var(--bg-soft);
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.mobile-drawer-search .search-form input { padding: 10px 50px 10px 14px; }
.mobile-drawer-search .search-form button { width: 40px; }
.mobile-drawer-nav {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-drawer-nav li {
border-bottom: 1px solid var(--line);
}
.mobile-drawer-nav a,
.mobile-accordion-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 20px;
font-size: 14px;
font-weight: 500;
color: var(--ink);
background: #fff;
text-align: left;
}
.mobile-drawer-nav a:hover,
.mobile-accordion-toggle:hover {
background: var(--brand-soft);
color: var(--brand);
}
.mobile-accordion-toggle svg {
width: 16px;
height: 16px;
transition: transform var(--t);
color: var(--muted);
flex-shrink: 0;
}
.mobile-accordion.open .mobile-accordion-toggle svg {
transform: rotate(180deg);
}
.mobile-subnav {
display: none;
background: var(--bg-soft);
padding: 4px 0;
}
.mobile-accordion.open .mobile-subnav { display: block; }
.mobile-subnav a {
padding: 10px 32px;
font-size: 13px;
color: var(--ink-2);
background: transparent;
font-weight: 400;
}
.mobile-subnav a strong {
color: var(--brand);
font-weight: 600;
}
.mobile-drawer-cta {
padding: 16px 20px;
background: #fff;
border-top: 1px solid var(--line);
flex-shrink: 0;
}
.mobile-drawer-cta .btn-wa-primary {
width: 100%;
padding: 14px;
}
/* ============================================================
HERO
============================================================ */
.home-hero {
background: var(--bg-soft);
padding: 24px 0;
}
.hero-grid {
display: grid;
grid-template-columns: 2.5fr 1fr;
gap: 18px;
min-height: 380px;
}
.hero-slider {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--ink);
box-shadow: var(--shadow);
}
.hero-slider-track {
position: relative;
width: 100%;
height: 100%;
min-height: 380px;
}
.hero-main,
.hero-side-card {
position: relative;
display: block;
border-radius: var(--radius-lg);
overflow: hidden;
isolation: isolate;
}
.hero-slider .hero-main {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transform: scale(1.04);
transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
transform 1200ms cubic-bezier(0.4, 0, 0.2, 1),
visibility 700ms;
}
.hero-slider .hero-main.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.hero-slider .hero-main.active .hero-main-body {
animation: heroSlideUp 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes heroSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-main.text-center.active .hero-main-body {
animation: heroSlideUpCenter 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes heroSlideUpCenter {
from { opacity: 0; transform: translate(-50%, -40%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-slider .hero-main { transition: opacity 300ms; transform: none; }
.hero-slider .hero-main.active .hero-main-body { animation: none; }
}
.hero-main-img,
.hero-main-bg,
.hero-side-bg,
.category-tile-img,
.showcase-tile-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-size: cover;
background-position: center;
transition: transform 600ms ease;
z-index: -1;
}
.hero-main:hover .hero-main-bg,
.hero-main:hover .hero-main-img,
.hero-side-card:hover .hero-side-bg,
.category-tile:hover .category-tile-img,
.showcase-tile:hover .showcase-tile-img {
transform: scale(1.05);
}
/* Standart overlay: sol-üst koyu, sağ-alt açık (metin sol bottomda okunsun) */
.hero-main::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
rgba(0, 0, 0, 0.62) 0%,
rgba(0, 0, 0, 0.32) 50%,
rgba(0, 0, 0, 0.05) 100%
);
z-index: 0;
}
.hero-side-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.78) 100%);
z-index: 0;
}
.hero-main.theme-light::after {
background: linear-gradient(100deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.55) 55%, transparent);
}
.hero-main.theme-light,
.hero-main.theme-light h1 { color: var(--ink); }
.hero-main.theme-light p { color: var(--ink-2); }
.hero-main.theme-brand::after {
background: linear-gradient(100deg, rgba(238, 90, 28, 0.88) 0%, rgba(238, 90, 28, 0.45) 55%, rgba(0, 0, 0, 0.15) 100%);
}
.hero-main.text-center .hero-main-body {
text-align: center;
align-items: center;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
right: auto;
bottom: auto;
max-width: 720px;
}
.hero-main.text-right .hero-main-body {
text-align: right;
align-items: flex-end;
left: auto;
right: 6%;
}
.hero-main-body {
position: absolute;
left: 6%;
bottom: 12%;
top: auto;
z-index: 1;
color: #fff;
max-width: 540px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.hero-badge {
display: inline-block;
background: var(--brand);
color: #fff;
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 12px;
}
.hero-main.text-center .hero-badge,
.hero-main.text-right .hero-badge { align-self: inherit; }
.hero-eyebrow,
.eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
margin-bottom: 10px;
}
.hero-main.theme-light .hero-eyebrow { color: var(--brand); }
.hero-main h1 {
font-size: clamp(1.6rem, 3.2vw, 2.6rem);
font-weight: 700;
margin: 0 0 14px;
color: inherit;
letter-spacing: -0.02em;
line-height: 1.15;
}
.hero-main h1 em {
font-style: normal;
color: var(--brand);
}
.hero-main p {
font-size: 14.5px;
margin: 0 0 22px;
opacity: 0.92;
max-width: 520px;
line-height: 1.55;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hero-stats {
display: flex;
gap: 24px;
margin-top: 18px;
flex-wrap: wrap;
}
.hero-stat {
display: flex;
flex-direction: column;
}
.hero-stat strong {
font-size: 22px;
font-weight: 700;
color: var(--brand);
line-height: 1;
}
.hero-stat span {
font-size: 12px;
color: rgba(255,255,255,0.85);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 4px;
}
.hero-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
color: var(--ink);
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
border: 0;
box-shadow: var(--shadow);
transition: background var(--t), color var(--t);
}
.hero-slider-arrow:hover { background: var(--brand); color: #fff; }
.hero-slider-arrow.prev { left: 14px; }
.hero-slider-arrow.next { right: 14px; }
.hero-slider-dots {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 3;
}
.hero-slider-dots button {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.55);
border: 0;
transition: background var(--t), width var(--t);
}
.hero-slider-dots button.active {
background: #fff;
width: 26px;
border-radius: 5px;
}
.hero-side {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 18px;
}
.hero-side-card {
position: relative;
min-height: 180px;
background: var(--ink);
color: #fff;
box-shadow: var(--shadow);
transition: transform var(--t);
}
.hero-side-card:hover { transform: translateY(-2px); }
.hero-side-card::after {
background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.7) 100%);
}
.hero-side-body {
position: absolute;
left: 18px;
right: 18px;
bottom: 16px;
z-index: 1;
}
.hero-side-body span {
display: inline-block;
background: var(--brand);
color: #fff;
padding: 3px 10px;
border-radius: 3px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 6px;
}
.hero-side-body h3 {
color: #fff;
font-size: 16px;
margin: 0 0 4px;
font-weight: 700;
}
.hero-side-body p {
font-size: 12.5px;
color: rgba(255,255,255,0.85);
margin: 0;
}
/* ============================================================
BENEFIT BAR
============================================================ */
.benefit-bar {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 22px 0;
}
.benefit-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.benefit {
display: flex;
align-items: center;
gap: 14px;
}
.benefit-icon {
width: 46px;
height: 46px;
flex-shrink: 0;
background: var(--brand-soft);
color: var(--brand);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.benefit-icon svg { width: 22px; height: 22px; }
.benefit-text { display: flex; flex-direction: column; }
.benefit-text .t {
font-weight: 700;
font-size: 14px;
color: var(--ink);
line-height: 1.2;
}
.benefit-text .s {
font-size: 12px;
color: var(--muted);
margin-top: 2px;
}
/* ============================================================
CATEGORY WALL
============================================================ */
.category-wall,
.catalog-wall {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
}
.category-tile {
position: relative;
display: block;
aspect-ratio: 1 / 1;
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-soft);
isolation: isolate;
transition: transform var(--t), box-shadow var(--t);
}
.category-tile:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
}
.category-tile.featured {
grid-column: span 2;
grid-row: span 2;
aspect-ratio: auto;
}
.category-tile::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.78) 100%);
z-index: 0;
}
.category-tile-body {
position: absolute;
left: 16px;
right: 16px;
bottom: 14px;
z-index: 1;
color: #fff;
}
.category-tile .meta {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
padding: 3px 8px;
border-radius: 3px;
margin-bottom: 6px;
}
.category-tile .name {
display: block;
font-size: 15px;
font-weight: 700;
color: #fff;
line-height: 1.25;
letter-spacing: -0.005em;
}
.category-tile.featured .name {
font-size: 26px;
margin-bottom: 8px;
letter-spacing: -0.015em;
}
.category-tile .desc {
font-size: 13px;
margin: 6px 0 10px;
color: rgba(255, 255, 255, 0.88);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.category-tile .sub-links {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.category-tile .sub-links span {
background: rgba(255,255,255,0.18);
backdrop-filter: blur(6px);
padding: 3px 8px;
border-radius: 3px;
font-size: 10.5px;
font-weight: 500;
color: #fff;
}
.placeholder-gradient,
.category-tile-img.placeholder,
.showcase-tile-img.placeholder {
background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg-soft) 50%, var(--brand-soft-2) 100%);
}
/* ============================================================
QUICK LINKS
============================================================ */
.quick-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
/* ============================================================
SHOWCASE GRID (esnek katalog grid)
============================================================ */
.showcase-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.showcase-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.showcase-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.showcase-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.showcase-tile {
position: relative;
display: block;
aspect-ratio: 1 / 1;
border-radius: var(--radius);
overflow: hidden;
isolation: isolate;
background: var(--bg-soft);
}
.showcase-tile.featured { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.showcase-tile::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
z-index: 0;
}
.showcase-tile-body {
position: absolute;
left: 14px;
right: 14px;
bottom: 12px;
z-index: 1;
color: #fff;
}
.showcase-tile .ek {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.85);
display: block;
}
.showcase-tile .nm {
font-size: 13.5px;
font-weight: 700;
color: #fff;
}
.showcase-tile .arrow {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
background: rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
z-index: 1;
}
/* ============================================================
LIFESTYLE / KAMPANYA BANNER (anasayfa mid section)
============================================================ */
.lifestyle-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.lifestyle-grid.single { grid-template-columns: 1fr; }
.lifestyle-card {
position: relative;
display: block;
min-height: 280px;
border-radius: var(--radius-lg);
overflow: hidden;
isolation: isolate;
background-color: var(--ink);
background-size: cover;
background-position: center;
color: #fff;
box-shadow: var(--shadow-sm);
transition: transform var(--t), box-shadow var(--t);
}
.lifestyle-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
color: #fff;
}
.lifestyle-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.32) 60%, rgba(0, 0, 0, 0.05) 100%);
z-index: 0;
}
.lifestyle-body {
position: absolute;
left: 8%;
bottom: 10%;
right: 8%;
z-index: 1;
max-width: 80%;
}
.lifestyle-eyebrow {
display: inline-block;
background: var(--brand);
color: #fff;
padding: 4px 10px;
border-radius: 3px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 10px;
}
.lifestyle-card h3 {
color: #fff;
font-size: clamp(1.1rem, 1.8vw, 1.5rem);
margin: 0 0 8px;
line-height: 1.2;
font-weight: 700;
}
.lifestyle-card p {
color: rgba(255, 255, 255, 0.92);
margin: 0 0 12px;
font-size: 13.5px;
line-height: 1.55;
max-width: 480px;
}
.lifestyle-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: #fff;
border-bottom: 2px solid var(--brand);
padding-bottom: 4px;
transition: color var(--t), gap var(--t);
}
.lifestyle-card:hover .lifestyle-cta { gap: 10px; color: var(--brand-soft-2); }
/* ============================================================
STAT BAND
============================================================ */
.stat-band {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-darker) 100%);
color: #fff;
padding: 36px 0;
text-align: center;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.stat {
padding: 8px;
}
.stat .num {
display: block;
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
}
.stat .num span {
font-size: 0.55em;
margin-left: 4px;
opacity: 0.85;
}
.stat .lbl {
display: block;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.92;
margin-top: 8px;
}
/* ============================================================
B2B PANEL
============================================================ */
.b2b-panel {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 32px;
background: #fff;
padding: 32px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
position: relative;
}
.b2b-panel-content {}
.b2b-panel h2 {
font-size: clamp(1.3rem, 2vw, 1.7rem);
margin: 8px 0 12px;
}
.b2b-panel p {
color: var(--muted);
font-size: 14.5px;
margin-bottom: 18px;
}
.b2b-checks {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 22px;
}
.b2b-checks span {
position: relative;
padding-left: 28px;
font-size: 13.5px;
color: var(--ink-2);
line-height: 1.45;
}
.b2b-checks span::before {
content: '\2713';
position: absolute;
left: 0;
top: -1px;
width: 20px;
height: 20px;
background: var(--brand);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.b2b-panel-aside {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--bg-soft);
border-radius: var(--radius);
padding: 22px;
}
.b2b-mini {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px;
background: #fff;
border-radius: var(--radius);
border-left: 3px solid var(--brand);
box-shadow: var(--shadow-xs);
font-size: 13px;
color: var(--ink-2);
}
.b2b-mini strong {
color: var(--brand);
font-size: 15px;
font-weight: 800;
}
.b2b-mini span { line-height: 1.45; }
.b2b-mini .btn-wa-primary { width: 100%; margin-top: 10px; }
/* ============================================================
SEO COPY
============================================================ */
.seo-copy {}
.seo-copy h2 {
font-size: clamp(1.3rem, 2vw, 1.7rem);
margin: 8px 0 12px;
}
.seo-copy h3 {
font-size: 15px;
font-weight: 700;
margin: 0 0 8px;
color: var(--ink);
}
.seo-copy p {
color: var(--muted);
font-size: 14px;
line-height: 1.65;
}
.seo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 22px;
}
.seo-card,
.premium-card {
background: #fff;
padding: 22px;
border-radius: var(--radius);
border: 1px solid var(--line);
transition: border-color var(--t), box-shadow var(--t);
}
.seo-card:hover,
.premium-card:hover {
border-color: var(--brand);
box-shadow: var(--shadow-sm);
}
.seo-card p { font-size: 13.5px; margin: 0; }
/* ============================================================
PRODUCT CARD & GRID
============================================================ */
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.product-grid.compact {
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
.product-card {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover {
border-color: var(--brand);
box-shadow: 0 8px 20px rgba(238, 90, 28, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
transform: translateY(-3px);
}
.product-media {
position: relative;
background: var(--bg-soft);
overflow: hidden;
}
.product-image {
display: block;
aspect-ratio: 1 / 1;
width: 100%;
position: relative;
}
.product-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms ease;
}
.product-card:hover .product-image img { transform: scale(1.06); }
.placeholder-img {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: var(--bg-soft);
background-image: url('/assets/uploads/products/placeholder.webp');
background-size: cover;
background-position: center;
color: transparent;
font-size: 0;
}
.product-badges {
position: absolute;
top: 8px;
left: 8px;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 2;
}
.p-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
padding: 4px 9px;
border-radius: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
background: var(--ink);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
backdrop-filter: blur(4px);
}
.p-badge.new { background: #2563eb; } /* mavi — yeni */
.p-badge.sale { background: var(--danger); }
.p-badge.featured { background: var(--brand); }
.product-fav {
position: absolute;
top: 10px;
right: 10px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(6px);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--muted);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.product-fav:active { transform: scale(0.92); }
.product-fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.product-fav:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.product-fav.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.product-fav.active svg { fill: #fff; stroke: #fff; }
.product-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62));
padding: 28px 12px 12px;
display: flex;
align-items: flex-end;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--t), visibility var(--t), transform var(--t);
z-index: 1;
}
.product-card:hover .product-overlay {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.product-overlay-actions {
display: flex;
gap: 6px;
width: 100%;
}
.overlay-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.95);
color: var(--ink);
border-radius: var(--radius-sm);
font-size: 11.5px;
font-weight: 600;
transition: background var(--t), color var(--t);
backdrop-filter: blur(4px);
}
.overlay-btn:hover { background: var(--brand); color: #fff; }
.overlay-btn.wa { background: var(--whatsapp); color: #fff; }
.overlay-btn.wa:hover { background: var(--whatsapp-dark); }
.overlay-btn svg { width: 13px; height: 13px; }
/* Mobil/dokunmatik cihazlarda overlay gizli — anlamsız hover state'i kaldır */
@media (hover: none) {
.product-overlay { display: none !important; }
}
.product-body {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px 14px;
flex: 1;
}
.product-sku {
font-size: 11px;
color: var(--muted);
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.product-name {
font-size: 13.5px;
font-weight: 500;
margin: 0;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 36px;
}
.product-name a { color: var(--ink); }
.product-name a:hover { color: var(--brand); }
.product-price {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 4px;
flex-wrap: wrap;
}
.product-price .current {
font-size: 16px;
font-weight: 800;
color: var(--brand);
}
.product-price .old {
font-size: 12.5px;
color: var(--muted);
text-decoration: line-through;
font-weight: 500;
}
.product-price .ask {
font-size: 13px;
color: var(--ink-2);
font-weight: 600;
font-style: italic;
}
.product-card-foot {
margin-top: 8px;
}
.product-mini-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
padding: 8px 10px;
background: var(--bg-soft);
color: var(--ink-2);
font-size: 11.5px;
font-weight: 600;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
transition: all var(--t);
}
.product-mini-cta::before {
content: '';
width: 13px;
height: 13px;
background-color: var(--whatsapp);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.product-mini-cta:hover {
background: var(--brand-soft);
border-color: var(--brand);
color: var(--brand-dark);
}
/* ============================================================
BREADCRUMB
============================================================ */
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 16px 0 10px;
font-size: 12.5px;
color: var(--muted);
}
.breadcrumb a {
color: var(--muted);
}
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep {
color: var(--muted-2);
font-size: 11px;
}
.breadcrumb .current {
color: var(--ink);
font-weight: 600;
}
/* ============================================================
CATEGORY PAGE
============================================================ */
.category-banner {
position: relative;
margin: 8px 0 24px;
padding: 38px 32px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-darker) 100%);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.category-banner::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0,0,0,0.45), transparent 70%);
z-index: 0;
}
.category-banner > * { position: relative; z-index: 1; }
.category-banner .eyebrow {
display: inline-block;
background: rgba(255,255,255,0.18);
backdrop-filter: blur(6px);
padding: 4px 12px;
border-radius: 14px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #fff;
margin-bottom: 12px;
}
.category-banner h1 {
color: #fff;
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
margin: 0 0 10px;
}
.category-banner p {
color: rgba(255,255,255,0.92);
font-size: 14.5px;
max-width: 720px;
margin: 0 0 16px;
}
.category-meta-row {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
align-items: center;
}
.category-meta-row span,
.category-meta-row a {
font-size: 13px;
color: rgba(255,255,255,0.92);
font-weight: 600;
}
.category-meta-row a {
background: #fff;
color: var(--brand);
padding: 8px 16px;
border-radius: var(--radius);
margin-left: 4px;
}
.category-meta-row a:hover { background: var(--ink); color: #fff; }
.subcat-strip {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 14px;
margin-bottom: 28px;
}
.subcat-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 18px 12px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
transition: border-color var(--t), box-shadow var(--t), transform var(--t);
color: var(--ink);
position: relative;
}
.subcat-card:hover {
border-color: var(--brand);
transform: translateY(-3px);
box-shadow: var(--shadow);
color: var(--brand);
}
.subcat-card-img {
width: 92px;
height: 92px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg-soft) 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 2px solid var(--bg-soft);
transition: border-color var(--t), transform var(--t);
}
.subcat-card:hover .subcat-card-img {
border-color: var(--brand-soft-2);
transform: scale(1.04);
}
.subcat-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-md);
}
.subcat-card:hover .subcat-card-img img { transform: scale(1.08); }
.subcat-card-initial {
font-size: 32px;
font-weight: 800;
color: var(--brand);
letter-spacing: -0.02em;
line-height: 1;
}
.subcat-card strong {
font-size: 13.5px;
font-weight: 700;
color: inherit;
line-height: 1.3;
}
.subcat-count {
font-size: 11px;
color: var(--muted);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cat-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 24px;
margin-top: 8px;
}
.cat-sidebar {
display: flex;
flex-direction: column;
gap: 16px;
position: sticky;
top: calc(var(--header-h) + 12px);
align-self: flex-start;
max-height: calc(100vh - var(--header-h) - 24px);
overflow-y: auto;
}
.filter-panel,
.cat-panel {
background: #fff;
padding: 18px;
border: 1px solid var(--line);
border-radius: var(--radius);
}
.filter-panel h4,
.cat-panel h4 {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 12px;
padding-bottom: 10px;
border-bottom: 2px solid var(--brand);
}
.cat-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.cat-list a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--ink-2);
transition: background var(--t), color var(--t);
}
.cat-list a small {
font-size: 11px;
background: var(--bg-soft);
color: var(--muted);
padding: 2px 6px;
border-radius: 8px;
}
.cat-list a:hover,
.cat-list a.active {
background: var(--brand-soft);
color: var(--brand);
font-weight: 600;
}
.cat-list a.active small { background: var(--brand); color: #fff; }
.filter-form { display: flex; flex-direction: column; gap: 12px; }
.filter-form label {
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 4px;
display: block;
}
.filter-form input,
.filter-form select {
padding: 8px 12px;
font-size: 13px;
}
.filter-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.filter-actions {
display: flex;
gap: 8px;
margin-top: 6px;
}
.filter-actions .btn-primary,
.filter-actions .btn-secondary {
flex: 1;
padding: 10px;
font-size: 12.5px;
}
/* ============================================================
KATALOG (arama sayfası): hero search, filtre tabs, pagination
============================================================ */
.hero-search {
position: relative;
display: flex; align-items: center; gap: 0;
margin-top: 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 6px 6px 6px 16px;
max-width: 560px;
box-shadow: var(--shadow-sm);
}
.hero-search svg { color: var(--muted); flex: 0 0 auto; }
.hero-search input {
flex: 1;
border: 0;
outline: none;
background: transparent;
padding: 12px 14px;
font-size: 14px;
color: var(--ink);
min-width: 0;
}
.hero-search input::placeholder { color: var(--muted-2); }
.hero-search button {
border: 0;
background: var(--brand);
color: #fff;
padding: 10px 22px;
border-radius: var(--radius);
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: background var(--t);
}
.hero-search button:hover { background: var(--brand-dark); }
/* Filtre çubuğu */
.catalog-filters {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 14px;
padding: 8px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.catalog-quick-tabs {
display: inline-flex; align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.catalog-quick-tabs a {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 14px;
border-radius: var(--radius);
font-size: 13.5px;
font-weight: 600;
color: var(--ink-2);
border: 1px solid transparent;
transition: var(--t);
}
.catalog-quick-tabs a:hover {
background: var(--bg-soft);
color: var(--brand);
}
.catalog-quick-tabs a.active {
background: var(--brand);
color: #fff;
border-color: var(--brand-dark);
}
.catalog-quick-tabs a svg { opacity: .85; }
.catalog-controls {
display: inline-flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.catalog-controls select {
appearance: none;
-webkit-appearance: none;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 8px 32px 8px 12px;
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
outline: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 9px center;
background-size: 14px;
transition: border-color var(--t);
}
.catalog-controls select:hover { border-color: var(--line-strong); }
.catalog-controls select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(238, 90, 28, .14); }
/* Pagination */
.catalog-pagination {
display: flex; align-items: center; justify-content: center;
gap: 4px;
flex-wrap: wrap;
margin-top: 28px;
}
.catalog-pagination .pg {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px;
padding: 0 12px;
border-radius: var(--radius);
border: 1px solid var(--line);
background: #fff;
color: var(--ink);
font-weight: 600;
font-size: 13.5px;
transition: var(--t);
}
.catalog-pagination .pg:hover { border-color: var(--brand); color: var(--brand); }
.catalog-pagination .pg.current {
background: var(--brand);
border-color: var(--brand);
color: #fff;
box-shadow: 0 4px 10px rgba(238, 90, 28, .25);
}
.catalog-pagination .pg-gap {
padding: 0 6px;
color: var(--muted-2);
font-weight: 700;
}
.cat-tools {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: 16px;
}
.cat-tools .total {
font-size: 13px;
color: var(--muted);
}
.cat-tools .total strong {
color: var(--brand);
font-size: 16px;
margin-right: 4px;
}
.cat-tools form {
display: flex;
align-items: center;
gap: 8px;
}
.cat-tools form label {
font-size: 12.5px;
color: var(--muted);
font-weight: 600;
margin: 0;
}
.cat-tools form select {
padding: 8px 12px;
font-size: 13px;
width: auto;
min-width: 200px;
}
.pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin: 32px 0 8px;
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 10px;
border-radius: var(--radius);
border: 1px solid var(--line);
background: #fff;
color: var(--ink-2);
font-size: 13px;
font-weight: 600;
transition: all var(--t);
}
.pagination a:hover {
background: var(--brand-soft);
border-color: var(--brand);
color: var(--brand);
}
.pagination .active {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
/* ============================================================
PRODUCT DETAIL
============================================================ */
.product-detail {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 36px;
margin: 16px 0 32px;
align-items: start;
}
.pd-gallery { display: flex; flex-direction: column; gap: 10px; max-width: 500px; }
.pd-gallery-main {
position: relative;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 1 / 1;
}
.pd-gallery-main img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Inner zoom — hover'da görselin kendisi büyür, fare pozisyonuna göre kaydırılır */
.pd-gallery-main[data-zoom-wrap] { cursor: zoom-in; }
.pd-gallery-main.is-zooming { cursor: crosshair; }
.pd-gallery-main.is-zooming img {
opacity: 0;
}
.pd-gallery-main .pd-zoom-bg {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: 250%;
opacity: 0;
pointer-events: none;
z-index: 2;
transition: opacity .1s;
}
.pd-gallery-main.is-zooming .pd-zoom-bg {
opacity: 1;
}
@media (max-width: 600px) {
.pd-gallery-main[data-zoom-wrap] { cursor: default; }
.pd-gallery-main .pd-zoom-bg { display: none !important; }
}
.pd-gallery-thumbs {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.pd-thumb {
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
cursor: pointer;
background: var(--bg-soft);
aspect-ratio: 1 / 1;
transition: border-color var(--t);
}
.pd-thumb.active { border-color: var(--brand); }
.pd-thumb:hover { border-color: var(--brand); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-info { display: flex; flex-direction: column; }
.pd-info .section-eyebrow { margin-bottom: 8px; }
.pd-info h1 {
font-size: clamp(1.4rem, 2.4vw, 1.85rem);
margin: 0 0 10px;
line-height: 1.2;
}
.pd-sku {
font-size: 12.5px;
color: var(--muted);
margin-bottom: 6px;
}
.pd-sku strong {
color: var(--ink);
letter-spacing: 0.04em;
}
.pd-short {
font-size: 14px;
color: var(--ink-2);
margin-bottom: 14px;
line-height: 1.55;
}
.pd-stock {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 18px;
align-self: flex-start;
}
.pd-stock::before {
content: '\25cf';
font-size: 10px;
}
.pd-stock.in { background: var(--success-soft); color: #166534; }
.pd-stock.out { background: var(--danger-soft); color: #991b1b; }
.pd-stock.req { background: var(--warn-soft); color: #92400e; }
.pd-price {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 18px;
padding: 16px 18px;
background: var(--bg-soft);
border-radius: var(--radius);
border-left: 4px solid var(--brand);
flex-wrap: wrap;
}
.pd-price .current {
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 800;
color: var(--brand);
letter-spacing: -0.02em;
line-height: 1;
}
.pd-price .old {
font-size: 16px;
color: var(--muted);
text-decoration: line-through;
}
.pd-price .badge {
background: var(--danger);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.wa-notice {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: rgba(37, 211, 102, 0.08);
border: 1px solid rgba(37, 211, 102, 0.25);
border-radius: var(--radius);
margin-bottom: 18px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.5;
}
.wa-notice svg {
width: 22px;
height: 22px;
color: var(--whatsapp);
flex-shrink: 0;
margin-top: 1px;
}
.pd-qty {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}
.pd-qty label {
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.qty-stepper {
display: inline-flex;
align-items: center;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
background: #fff;
}
.qty-stepper button {
width: 38px;
height: 38px;
font-size: 18px;
font-weight: 600;
color: var(--ink);
background: var(--bg-soft);
transition: background var(--t);
}
.qty-stepper button:hover { background: var(--brand-soft); color: var(--brand); }
.qty-stepper input {
width: 56px;
height: 38px;
border: 0;
text-align: center;
font-size: 14px;
font-weight: 600;
background: #fff;
-moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.pd-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.pd-actions .btn-wa-primary {
flex: 1;
min-width: 240px;
padding: 14px 22px;
font-size: 15px;
}
.pd-actions .btn-secondary {
padding: 14px 22px;
}
.pd-share {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: 13px;
color: var(--muted);
}
.pd-share span { font-weight: 600; }
.pd-share a {
color: var(--ink-2);
font-weight: 500;
}
.pd-share a:hover { color: var(--brand); }
.pd-tabs {
margin: 32px 0;
}
.pd-tab-nav {
display: flex;
gap: 0;
border-bottom: 2px solid var(--line);
margin-bottom: 22px;
overflow-x: auto;
}
.pd-tab-btn {
padding: 12px 22px;
font-size: 13.5px;
font-weight: 600;
color: var(--muted);
background: transparent;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
transition: color var(--t), border-color var(--t);
}
.pd-tab-btn:hover { color: var(--brand); }
.pd-tab-btn.active {
color: var(--brand);
border-color: var(--brand);
}
.pd-tab-content {
font-size: 14px;
color: var(--ink-2);
line-height: 1.65;
}
.pd-attrs {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
}
.pd-attrs td {
padding: 10px 14px;
border-bottom: 1px solid var(--line);
color: var(--ink-2);
}
.pd-attrs td:first-child {
font-weight: 600;
color: var(--ink);
background: var(--bg-soft);
width: 200px;
}
.pd-attrs a { color: var(--brand); font-weight: 500; }
/* ============================================================
FOOTER
============================================================ */
.site-footer {
background: var(--bg-soft);
color: var(--ink-2);
border-top: 1px solid var(--line);
margin-top: 48px;
}
.footer-cta {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-darker) 100%);
padding: 28px 32px;
margin: 0 0 36px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
color: #fff;
flex-wrap: wrap;
margin-top: 28px;
}
.footer-cta h3 {
color: #fff;
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
margin: 0 0 4px;
}
.footer-cta p {
margin: 0;
font-size: 14px;
opacity: 0.92;
}
.footer-cta .btn-wa-primary {
background: #fff;
color: var(--whatsapp-dark);
padding: 14px 26px;
font-size: 14px;
}
.footer-cta .btn-wa-primary:hover {
background: var(--ink);
color: #fff;
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr repeat(4, 1fr) 1.3fr;
gap: 28px;
padding: 16px 0 36px;
}
.footer-grid:has(.branch-list) { grid-template-columns: 1.6fr repeat(4, 1fr) 1.3fr; }
.footer-logo {
display: flex;
align-items: center;
font-family: inherit;
font-size: 22px;
font-weight: 800;
color: var(--ink);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.footer-logo span {
color: var(--brand);
margin-left: 2px;
}
.footer-logo img { max-height: 44px; }
.footer-about p {
font-size: 13px;
line-height: 1.6;
color: var(--muted);
margin-bottom: 14px;
}
.footer-col h3 {
color: var(--ink);
font-size: 13px;
font-weight: 700;
margin-bottom: 14px;
text-transform: uppercase;
letter-spacing: 0.08em;
position: relative;
padding-bottom: 10px;
}
.footer-col h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 28px;
height: 2px;
background: var(--brand);
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-col a {
color: var(--ink-2);
font-size: 13px;
transition: color var(--t), padding var(--t);
}
.footer-col a:hover {
color: var(--brand);
padding-left: 4px;
}
.trust-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
.trust-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 600;
color: var(--ink-2);
}
.trust-badge svg { width: 12px; height: 12px; color: var(--brand); }
.footer-social {
display: flex;
gap: 8px;
}
.footer-social a {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-2);
transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.footer-social a:hover {
background: var(--brand);
color: #fff;
border-color: var(--brand);
transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; }
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
font-size: 13px;
color: var(--ink-2);
}
.footer-contact-item .icn {
width: 30px;
height: 30px;
flex-shrink: 0;
background: var(--brand-soft);
color: var(--brand);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.footer-contact-item svg { width: 14px; height: 14px; }
.footer-contact-item a { color: var(--ink-2); }
.footer-contact-item a:hover { color: var(--brand); }
.newsletter {
margin-top: 12px;
}
.newsletter p {
font-size: 12px;
color: var(--muted);
margin: 0 0 8px;
}
.newsletter-form {
display: flex;
gap: 6px;
}
.newsletter-form input {
flex: 1;
padding: 9px 12px;
font-size: 12.5px;
}
.newsletter-form button {
padding: 9px 14px;
background: var(--brand);
color: #fff;
border-radius: var(--radius);
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
}
.newsletter-form button:hover { background: var(--brand-dark); }
.footer-bottom {
padding: 18px 0;
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 12.5px;
color: var(--muted);
}
.footer-bottom a {
color: var(--muted);
}
.footer-bottom a:hover { color: var(--brand); }
/* Şube listesi */
.branch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.branch-list li {
font-size: 12.5px;
line-height: 1.5;
padding-left: 18px;
position: relative;
color: var(--muted);
}
.branch-list li::before {
content: '';
position: absolute;
left: 0;
top: 4px;
width: 12px;
height: 12px;
background: var(--brand-soft);
border: 2px solid var(--brand);
border-radius: 50%;
}
.branch-list li strong {
display: block;
color: var(--ink);
font-size: 13px;
font-weight: 600;
margin-bottom: 1px;
}
.branch-list li span { color: var(--muted); }
/* Ödeme & güven logoları */
.footer-payments {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 18px 0;
border-top: 1px solid var(--line);
}
.payments-label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.payment-logos {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.pay-logo {
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
min-width: 50px;
padding: 0 10px;
background: #fff;
border: 1px solid var(--line);
border-radius: 4px;
}
.pay-logo svg { max-height: 16px; width: auto; }
.pay-cert {
gap: 5px;
font-size: 11px;
font-weight: 700;
color: var(--success);
letter-spacing: 0.04em;
padding: 0 12px;
}
.pay-cert svg { color: var(--success); }
/* ============================================================
PAGE HERO (iç sayfalar — opsiyonel görsel arka plan + overlay)
============================================================ */
.page-hero {
position: relative;
background: var(--bg-soft);
padding: 56px 0 40px;
border-bottom: 1px solid var(--line);
overflow: hidden;
isolation: isolate;
}
.page-hero.has-image {
background-color: var(--ink);
background-size: cover;
background-position: center;
border-bottom: 0;
padding: 80px 0 64px;
}
.page-hero.has-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 100%);
z-index: 0;
}
.page-hero > .container-x {
position: relative;
z-index: 1;
}
.page-hero-card { max-width: 760px; }
.page-hero-card h1 {
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
margin: 6px 0 10px;
color: var(--ink);
}
.page-hero-card p {
color: var(--muted);
margin: 0;
font-size: 14.5px;
line-height: 1.6;
max-width: 640px;
}
.page-hero-card .hero-eyebrow { color: var(--brand); }
.page-hero.has-image .page-hero-card h1 { color: #fff; }
.page-hero.has-image .page-hero-card p { color: rgba(255, 255, 255, 0.88); }
.page-hero.has-image .page-hero-card .hero-eyebrow { color: rgba(255, 255, 255, 0.9); }
.page-shell {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 36px;
}
.page-content {
font-size: 14.5px;
line-height: 1.7;
color: var(--ink-2);
}
.page-content h2 { margin-top: 28px; font-size: 1.4rem; }
.page-content h3 { margin-top: 22px; font-size: 1.15rem; }
.page-content ul, .page-content ol { padding-left: 22px; }
.page-content li { margin-bottom: 6px; }
.page-content a { color: var(--brand); font-weight: 500; }
/* ============================================================
CONTACT / DEALER LAYOUT
============================================================ */
.contact-layout,
.dealer-layout {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 24px;
}
.contact-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px;
}
.contact-card h3 {
font-size: 16px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--brand);
display: inline-block;
}
.info-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.info-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 13.5px;
color: var(--ink-2);
}
.info-item strong {
display: block;
color: var(--ink);
font-size: 13px;
margin-bottom: 2px;
font-weight: 700;
}
.info-item a { color: var(--ink-2); }
.info-item a:hover { color: var(--brand); }
.info-icon {
width: 38px;
height: 38px;
flex-shrink: 0;
background: var(--brand-soft);
color: var(--brand);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
}
.info-icon svg { width: 16px; height: 16px; }
/* ============================================================
FAVORITES — boş ekran kart, toolbar
============================================================ */
.fav-toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: 18px;
}
.fav-toolbar .btn-wa-primary { padding: 12px 22px; }
.empty-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 56px 32px;
text-align: center;
max-width: 560px;
margin: 24px auto;
box-shadow: var(--shadow-sm);
}
.empty-card .empty-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--brand-soft);
color: var(--brand);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.empty-card .empty-icon svg { width: 36px; height: 36px; }
.empty-card h2 {
font-size: 1.4rem;
margin: 0 0 10px;
color: var(--ink);
}
.empty-card p {
color: var(--muted);
font-size: 14.5px;
line-height: 1.6;
margin: 0 auto 22px;
max-width: 440px;
}
.empty-card p strong { color: var(--brand); font-weight: 700; }
.empty-card .empty-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================================
FLOAT WHATSAPP & BACK TO TOP
============================================================ */
.back-to-top {
position: fixed;
bottom: 88px;
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ink);
color: #fff;
border: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: opacity var(--t-md), visibility var(--t-md), transform var(--t-md), background var(--t);
z-index: 90;
box-shadow: var(--shadow-lg);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover { background: var(--brand); }
.back-to-top svg { width: 20px; height: 20px; }
.float-wa {
position: fixed;
bottom: 24px;
right: 24px;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--whatsapp);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 91;
box-shadow: 0 6px 18px rgba(37, 211, 102, 0.42);
transition: transform var(--t), background var(--t), box-shadow var(--t);
animation: pulseWa 2.6s ease-in-out infinite;
}
.float-wa:hover {
background: var(--whatsapp-dark);
transform: scale(1.06);
color: #fff;
box-shadow: 0 10px 24px rgba(37, 211, 102, 0.55);
}
.float-wa:active { transform: scale(0.96); }
.float-wa svg { width: 30px; height: 30px; }
@keyframes pulseWa {
0%, 100% { box-shadow: 0 6px 18px rgba(37, 211, 102, 0.42), 0 0 0 0 rgba(37, 211, 102, 0.45); }
50% { box-shadow: 0 6px 18px rgba(37, 211, 102, 0.42), 0 0 0 14px rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) {
.float-wa { animation: none; }
}
/* ============================================================
MOBILE BOTTOM NAV — 5 item + ortada FAB-style WhatsApp butonu
============================================================ */
.mobile-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1px solid var(--line);
z-index: 90;
padding: 6px 4px max(6px, env(safe-area-inset-bottom));
box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.07);
align-items: stretch;
gap: 0;
overflow: visible; /* FAB üstten taşacak */
}
.mobile-bottom-nav a,
.mobile-bottom-nav button {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 2px 4px;
font-size: 10px;
font-weight: 500;
color: var(--muted);
background: transparent;
border: 0;
border-radius: var(--radius-lg);
text-align: center;
min-height: 54px;
transition: color var(--t), transform var(--t);
position: relative;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Standart item ikonu — daire içine alınabilir */
.mobile-bottom-nav a > svg,
.mobile-bottom-nav button > svg {
width: 22px;
height: 22px;
stroke-width: 1.9;
padding: 5px;
border-radius: 50%;
box-sizing: content-box;
transition: background var(--t), color var(--t), transform var(--t);
}
.mobile-bottom-nav a:active,
.mobile-bottom-nav button:active { transform: scale(0.94); }
.mobile-bottom-nav a:hover { color: var(--brand); }
.mobile-bottom-nav a:hover > svg,
.mobile-bottom-nav button:hover > svg { background: var(--brand-soft); }
.mobile-bottom-nav a.active,
.mobile-bottom-nav button.active {
color: var(--brand);
font-weight: 700;
}
.mobile-bottom-nav a.active > svg {
background: var(--brand);
color: #fff;
}
/* === ORTADA FAB-STYLE WHATSAPP === */
.mobile-bottom-nav .mb-fab {
position: relative;
padding-top: 30px;
color: var(--whatsapp-dark);
font-weight: 700;
}
.mobile-bottom-nav .mb-fab > svg { display: none; } /* default ikon kuralını iptal */
.mb-fab-circle {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--whatsapp);
color: #fff;
border: 4px solid #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
background var(--t), box-shadow var(--t);
animation: mbFabPulse 2.6s ease-in-out infinite;
}
.mb-fab-circle svg {
width: 26px !important;
height: 26px !important;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
.mb-fab:hover .mb-fab-circle {
background: var(--whatsapp-dark);
transform: translateX(-50%) scale(1.06);
box-shadow: 0 8px 22px rgba(18, 140, 126, 0.55);
}
.mb-fab:active .mb-fab-circle {
transform: translateX(-50%) scale(0.94);
}
.mb-fab .mb-fab-label {
font-size: 10px;
font-weight: 700;
color: var(--whatsapp-dark);
letter-spacing: 0.02em;
margin-top: 2px;
}
@keyframes mbFabPulse {
0%, 100% { box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.4); }
50% { box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45), 0 0 0 12px rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) {
.mb-fab-circle { animation: none; }
}
/* Fav badge — kalp ikonunun sağ üstünde küçük turuncu dot */
.mobile-bottom-nav .badge {
position: absolute;
top: 4px;
right: calc(50% - 20px);
background: var(--brand);
color: #fff;
font-size: 9.5px;
font-weight: 700;
min-width: 17px;
height: 17px;
line-height: 17px;
border-radius: 9px;
text-align: center;
padding: 0 5px;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
/* ============================================================
404 PAGE — büyük illüstrasyon, arama, popüler kategoriler
============================================================ */
.error-404 {
padding: 64px 0 80px;
background:
radial-gradient(circle at 80% 20%, rgba(238, 90, 28, 0.06), transparent 40%),
radial-gradient(circle at 10% 90%, rgba(238, 90, 28, 0.05), transparent 40%),
var(--bg);
min-height: 60vh;
display: flex;
align-items: center;
}
.error-404-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.error-404-art {
display: flex;
justify-content: center;
}
.error-404-art svg { width: 100%; max-width: 380px; height: auto; }
.error-404-body { max-width: 520px; }
.error-404-body h1 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
margin: 8px 0 14px;
line-height: 1.2;
color: var(--ink);
}
.error-404-body > p {
color: var(--muted);
font-size: 14.5px;
line-height: 1.6;
margin: 0 0 22px;
}
.error-404-search {
position: relative;
display: flex;
margin-bottom: 16px;
background: #fff;
border: 1.5px solid var(--brand);
border-radius: var(--radius);
overflow: hidden;
max-width: 480px;
}
.error-404-search input {
flex: 1;
border: 0;
padding: 12px 16px;
font-size: 14px;
background: transparent;
color: var(--ink);
}
.error-404-search input:focus { outline: none; }
.error-404-search button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 20px;
background: var(--brand);
color: #fff;
font-size: 13.5px;
font-weight: 600;
border: 0;
cursor: pointer;
transition: background var(--t);
}
.error-404-search button:hover { background: var(--brand-dark); }
.error-404-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.error-404-suggest { padding-top: 22px; border-top: 1px dashed var(--line); }
.suggest-label {
display: block;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 10px;
}
.suggest-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
@media (max-width: 768px) {
.error-404-grid {
grid-template-columns: 1fr;
gap: 24px;
text-align: center;
}
.error-404-body { margin: 0 auto; }
.error-404-search { margin-left: auto; margin-right: auto; }
.error-404-actions { justify-content: center; }
.suggest-pills { justify-content: center; }
}
/* legacy class — eski koddan kalma kullanım için korunur */
.lifestyle-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 26px;
background: var(--brand);
color: #fff;
border-radius: var(--radius);
font-size: 14px;
font-weight: 600;
transition: background var(--t);
}
.lifestyle-cta:hover { background: var(--brand-dark); color: #fff; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px) {
.product-grid.compact { grid-template-columns: repeat(4, 1fr); }
.category-wall, .catalog-wall { grid-template-columns: repeat(4, 1fr); }
.b2b-panel { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1.4fr; }
.footer-grid > .footer-col:nth-child(4) { display: none; }
.header-action span:not(.badge) { display: none; }
.header-action { min-width: 44px; }
.mega { min-width: 760px; grid-template-columns: repeat(3, 1fr) 240px; }
}
@media (max-width: 1100px) {
.footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; }
.footer-grid > .footer-col:nth-child(6) { display: none; }
}
@media (max-width: 992px) {
.top-bar { display: none; }
.lifestyle-grid { grid-template-columns: 1fr; }
.lifestyle-card { min-height: 220px; }
.footer-payments { flex-direction: column; align-items: flex-start; gap: 10px; }
/* Mobil header — sade: Logo | Hamburger (üst), Arama (alt satır) */
.site-header { box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06); }
.header-main { padding: 12px 0; min-height: 60px; gap: 12px; }
.brand-logo { font-size: 19px; }
.brand-logo img { max-height: calc(var(--logo-h, 48px) * 0.8); }
/* Mobilde alt nav + drawer'da bulunan tüm header link'lerini gizle */
.header-action,
.header-quote,
.header-cta { display: none !important; }
/* Mobilde aktive olan ikonlar (telefon + fav) */
.header-mobile-icon { display: inline-flex; }
/* Mobilde header içindeki arama tamamen gizli — alt bardaki Ara butonu search sheet açar */
.header-main > .search-form { display: none !important; }
.header-actions { gap: 0; margin-left: auto; }
.header-main {
flex-wrap: wrap;
gap: 14px;
}
.search-form {
order: 3;
flex: 1 0 100%;
max-width: 100%;
}
.header-actions {
margin-left: auto;
}
.header-action { min-width: 0; padding: 6px 8px; }
.header-action span:not(.badge) { display: none; }
.header-quote {
padding: 9px 14px;
font-size: 12.5px;
}
.mobile-menu-toggle { display: flex; }
.site-nav { display: none; }
.hero-grid { grid-template-columns: 1fr; }
.hero-side {
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
}
.hero-side-card { min-height: 140px; }
.benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.category-wall, .catalog-wall { grid-template-columns: repeat(3, 1fr); }
.product-grid, .product-grid.compact { grid-template-columns: repeat(3, 1fr); }
.seo-grid { grid-template-columns: 1fr; }
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.cat-layout { grid-template-columns: 1fr; }
.cat-sidebar {
position: static;
max-height: none;
overflow: visible;
}
.product-detail { grid-template-columns: 1fr; gap: 20px; }
.pd-actions .btn-wa-primary { min-width: 0; width: 100%; }
.contact-layout, .dealer-layout { grid-template-columns: 1fr; }
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.footer-grid > .footer-col:nth-child(4) { display: block; }
.footer-cta {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.footer-cta .btn-wa-primary { width: 100%; }
.mobile-bottom-nav { display: flex; }
body { padding-bottom: 70px; }
.float-wa { display: none; } /* Mobil FAB orta nav'da — sağ alt gereksiz */
.back-to-top { bottom: 84px; right: 16px; } /* Bottom nav üstüne otur */
}
@media (max-width: 640px) {
.home-hero { padding: 16px 0; }
.hero-grid { gap: 14px; }
.hero-side { grid-template-columns: 1fr; }
.hero-slider-track,
.hero-slider { min-height: 240px; }
.hero-main-body { left: 5%; right: 5%; bottom: 8%; }
.hero-main h1 { font-size: 1.4rem; }
.hero-main p { font-size: 13px; }
.section,
.section-shell { padding: 32px 0; }
.section-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
.benefit-grid { grid-template-columns: 1fr; }
.category-wall, .catalog-wall {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.category-tile.featured {
grid-column: span 2;
grid-row: span 1;
aspect-ratio: 16 / 9;
}
.category-tile.featured .name { font-size: 18px; }
.product-grid, .product-grid.compact {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.product-name { font-size: 12.5px; min-height: 30px; line-height: 1.3; }
.product-price .current { font-size: 14.5px; }
.product-fav { width: 36px; height: 36px; top: 8px; right: 8px; } /* touch target */
.product-fav svg { width: 16px; height: 16px; }
.product-body { padding: 10px 12px 12px; gap: 3px; }
.p-badge { font-size: 9.5px; padding: 3px 7px; }
.stat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.stat .num { font-size: 1.6rem; }
.b2b-panel { padding: 22px; gap: 18px; }
.category-banner {
padding: 24px 20px;
}
.pd-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
.pd-tab-nav {
overflow-x: auto;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.pd-tab-btn { padding: 10px 16px; font-size: 13px; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.footer-col h3 { font-size: 13px; }
.footer-cta { padding: 22px; }
.page-shell { padding: 22px; }
.brand-logo { font-size: 18px; }
.brand-logo img { max-height: calc(var(--logo-h, 48px) * 0.75); }
.container-x { padding: 0 14px; }
}
@media (max-width: 420px) {
.hero-main h1 { font-size: 1.2rem; }
.hero-main p { display: none; }
.hero-actions .btn-secondary { display: none; }
.header-quote { padding: 8px 12px; font-size: 12px; }
.header-quote svg { width: 14px; height: 14px; }
}
/* ============================================================
CAPTCHA — sade, tek satır, modern
============================================================ */
.captcha-block {
position: relative;
display: inline-flex; align-items: center;
gap: 10px;
padding: 10px 14px;
margin: 14px 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
white-space: nowrap;
font-size: 13px;
transition: border-color var(--t), box-shadow var(--t);
}
.captcha-block:focus-within {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(238, 90, 28, .12);
}
.captcha-block:has(.captcha-input:valid:not(:placeholder-shown)) {
border-color: var(--success);
background: var(--success-soft);
}
.captcha-shield {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--brand-soft);
color: var(--brand);
flex: 0 0 auto;
transition: var(--t);
}
.captcha-block:has(.captcha-input:valid:not(:placeholder-shown)) .captcha-shield {
background: var(--success);
color: #fff;
}
.captcha-text {
color: var(--muted);
font-weight: 600;
white-space: nowrap;
}
.captcha-block:has(.captcha-input:valid:not(:placeholder-shown)) .captcha-text {
color: #166534;
}
.captcha-equation {
display: inline-flex; align-items: center;
gap: 6px;
padding-left: 8px;
margin-left: 4px;
border-left: 1px solid var(--line);
white-space: nowrap;
}
.captcha-q {
font-size: 14px;
font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.captcha-eq {
font-size: 14px;
font-weight: 700;
color: var(--muted);
}
.captcha-input {
width: 52px;
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg-soft);
font-size: 14px;
font-weight: 700;
text-align: center;
color: var(--ink);
outline: none;
transition: var(--t);
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.captcha-input::-webkit-outer-spin-button,
.captcha-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.captcha-input::placeholder { color: var(--muted-2); font-weight: 500; }
.captcha-input:focus {
background: #fff;
border-color: var(--brand);
}
.captcha-input:valid:not(:placeholder-shown) {
background: #fff;
border-color: var(--success);
color: #166534;
}
/* Honeypot — ekrandan tamamen gizle */
.captcha-honeypot {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 1px; height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.captcha-honeypot input { position: absolute; left: -9999px; }
.captcha-error {
display: inline-flex; align-items: center; gap: 8px;
margin: 0 0 14px;
padding: 9px 14px;
background: var(--danger-soft);
border: 1px solid #fecaca;
border-radius: 999px;
color: #991b1b;
font-size: 12.5px;
font-weight: 600;
}
.captcha-error::before {
content: '⚠';
font-size: 14px;
}
@media (max-width: 480px) {
.captcha-block {
flex-wrap: wrap;
border-radius: var(--radius);
padding: 10px 12px;
}
.captcha-equation { padding-left: 0; margin-left: 0; border-left: 0; width: 100%; justify-content: space-between; }
}
/* ============================================================
MOBİL UYUMLULUK — KRİTİK İYİLEŞTİRMELER
(Mevcut breakpoint kurallarının üzerine geçen ek kurallar)
============================================================ */
/* iOS Safari otomatik metin yeniden boyutlandırmayı kapat */
html { -webkit-text-size-adjust: 100%; }
/* iOS Safari'da input focus'ta otomatik zoom'u önlemek için
tüm form alanları mobilde minimum 16px font olmalı */
@media (max-width: 992px) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
select,
textarea,
.form-control { font-size: 16px; }
/* Header arama: spesifik kuralın font-size'ını ezer */
.search-form input { font-size: 16px; }
}
/* Hover-only efektleri sadece gerçek hover destekleyen cihazlarda göster
(Touch'ta yapışıp kalan hover state'leri önler) */
@media (hover: none) {
.product-card:hover,
.product-card a:hover { transform: none; }
}
/* Hero slider yükseklik: landscape ve küçük ekran adaptasyonu */
@media (max-width: 640px) {
.hero-slider-track,
.hero-slider {
min-height: clamp(220px, 42vh, 360px);
}
/* Ürün detay aksiyon butonları dikey stack ve büyük dokunma alanı */
.pd-actions {
flex-direction: column;
gap: 10px;
}
.pd-actions .btn-wa-primary,
.pd-actions .btn-secondary {
width: 100%;
min-height: 48px;
justify-content: center;
}
/* Favori (kalp) butonu: 30→38px (daha touch-friendly) */
.product-fav { width: 38px; height: 38px; }
.product-fav svg { width: 16px; height: 16px; }
/* Ürün adı/fiyat min font: okunaklı kalsın */
.product-name { font-size: 13.5px; line-height: 1.35; }
.product-price .current { font-size: 15px; }
/* Mini CTA (WhatsApp Teklif) full-width ve touch hedefi */
.product-mini-cta {
width: 100%;
text-align: center;
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* En küçük ekran (iPhone SE 320-375px) — stat ve tab compaction */
@media (max-width: 380px) {
.container-x { padding-left: 12px; padding-right: 12px; }
.product-grid,
.product-grid.compact { grid-template-columns: 1fr 1fr; gap: 8px; }
.product-name { font-size: 13px; }
.pd-tab-btn { padding: 8px 10px; font-size: 13px; }
}
/* Pagination wrap için güvenlik */
@media (max-width: 480px) {
.pagination-bar,
.pagination { flex-wrap: wrap; gap: 4px; justify-content: center; }
}
/* ============================================================
COOKIE CONSENT (KVKK)
============================================================ */
.cookie-consent {
position: fixed;
left: 16px; right: 16px; bottom: 16px;
z-index: 9000;
background: var(--bg, #fff);
color: var(--ink, #1a1a1a);
border: 1px solid var(--line, #e5e7eb);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,.18);
animation: cookieIn .3s ease;
}
.cookie-consent[hidden] { display: none; }
.cookie-consent-inner {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
flex-wrap: wrap;
}
.cookie-consent-text { flex: 1 1 280px; min-width: 0; }
.cookie-consent-text strong { display: block; font-size: 14px; margin-bottom: 4px; }
.cookie-consent-text p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted, #5a5f69); }
.cookie-consent-text a { color: var(--brand, #ee5a1c); text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
@keyframes cookieIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.cookie-consent { animation: none; }
}
@media (max-width: 640px) {
.cookie-consent { left: 8px; right: 8px; bottom: 8px; }
.cookie-consent-inner { padding: 12px; gap: 10px; }
.cookie-consent-actions { width: 100%; justify-content: stretch; }
.cookie-consent-actions .btn { flex: 1; min-height: 44px; }
}
/* ============================================================
FAVORITES STATUS
============================================================ */
#fav-status {
text-align: center;
padding: 32px 20px;
color: var(--muted, #6b7280);
font-size: 14px;
line-height: 1.6;
}
/* ============================================================
PRINT
============================================================ */
@media print {
.top-bar, .site-nav, .mobile-drawer, .mobile-drawer-backdrop,
.mobile-bottom-nav, .float-wa, .back-to-top, .footer-cta,
.cookie-consent { display: none !important; }
body { background: #fff; padding: 0; }
}
/* ============================================================
MOBİL ARAMA SHEET — alttan kayan tam genişlik arama paneli
============================================================ */
.search-sheet-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,.5);
z-index: 9998;
opacity: 0; visibility: hidden;
transition: opacity .25s ease, visibility .25s ease;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.search-sheet-backdrop.open { opacity: 1; visibility: visible; }
.search-sheet {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 9999;
background: var(--bg, #fff);
border-radius: 18px 18px 0 0;
box-shadow: 0 -8px 40px rgba(0,0,0,.18);
transform: translateY(100%);
transition: transform .3s cubic-bezier(.32,.72,0,1);
padding: 0;
max-height: 85vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.search-sheet.open { transform: translateY(0); }
.search-sheet-handle {
display: flex;
justify-content: center;
padding: 10px 0 2px;
cursor: grab;
flex-shrink: 0;
}
.search-sheet-handle::after {
content: '';
width: 36px; height: 4px;
background: var(--line-strong, #d1d5db);
border-radius: 99px;
}
.search-sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 18px 12px;
flex-shrink: 0;
}
.search-sheet-head h3 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--ink, #1a1a1a);
}
.search-sheet-close {
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line, #e5e7eb);
border-radius: 50%;
background: var(--bg-soft, #f7f8fa);
color: var(--ink-2, #404040);
cursor: pointer;
transition: background .15s, border-color .15s;
-webkit-tap-highlight-color: transparent;
}
.search-sheet-close:hover { background: var(--line, #e5e7eb); }
.search-sheet-body {
padding: 0 18px 24px;
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
}
.search-sheet-body .search-form {
max-width: 100%;
display: flex;
}
.search-sheet-body .search-form input {
font-size: 16px;
padding: 14px 52px 14px 16px;
border-radius: 12px;
border: 2px solid var(--brand, #ee5a1c);
background: var(--bg-soft, #f7f8fa);
}
.search-sheet-body .search-form input:focus {
background: #fff;
box-shadow: 0 0 0 4px rgba(238, 90, 28, 0.12);
}
.search-sheet-body .search-form button {
position: absolute;
right: 4px; top: 50%;
transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 10px;
background: var(--brand, #ee5a1c);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.search-sheet-quick {
margin-top: 18px;
}
.search-sheet-quick h4 {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted, #6b7280);
margin: 0 0 10px;
}
.search-sheet-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.search-sheet-tags a {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 14px;
background: var(--bg-soft, #f7f8fa);
border: 1px solid var(--line, #e5e7eb);
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: var(--ink-2, #404040);
text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
-webkit-tap-highlight-color: transparent;
}
.search-sheet-tags a:hover,
.search-sheet-tags a:active {
background: var(--brand-soft, #fff1ea);
border-color: var(--brand, #ee5a1c);
color: var(--brand-dark, #c8470d);
}
.search-sheet-tags a svg { flex-shrink: 0; }
/* Search sheet sadece mobilde görünür */
@media (min-width: 993px) {
.search-sheet-backdrop,
.search-sheet { display: none !important; }
}