/* ─── Apple-style Design System ─────────────────────────────────────── */

:root {
    --bg: #fbfbfd;
    --surface: #fff;
    --text: #1d1d1f;
    --muted: #86868b;
    --accent: #0071e3;
    /* Vurgu zemini üstü metin/ikon rengi, hover tonu, logo filtresi ve font token'ları —
       Ayarlar → Görünüm seçimi (GorunumKatalogu.StilEtiketi) bunları ezer; header ve tam ekran
       menü yalnız bu token'ları kullanır. */
    --on-accent: #fff;
    --accent-2: color-mix(in srgb, var(--accent) 55%, #fff);
    --mn-hover: var(--accent-2);
    --logo-filter: brightness(0) invert(1);
    --font-ui: 'Inter', var(--bs-font-sans-serif);
    --font-display: var(--font-ui);
    --border: rgba(0, 0, 0, .08);
    --radius: 18px;
    --shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);

    --bs-primary: var(--accent);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
    --bs-border-radius: var(--radius);
    --bs-card-border-color: var(--border);
    --bs-card-bg: var(--surface);
}

/* ─── Base ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background .3s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color .25s cubic-bezier(.4, 0, .2, 1);
}

a:hover { color: var(--accent); opacity: .8; }

img { max-width: 100%; display: block; }

/* ─── Glass effect ───────────────────────────────────────────────────── */

.glass {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--border);
}

/* ─── Bootstrap overrides ────────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

.card-body { padding: 1.75rem; }

.btn {
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: -.01em;
    padding: .55rem 1.4rem;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1), background .2s, border-color .2s;
}

.btn:hover { transform: scale(1.02); }
.btn:active { transform: scale(.98); }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    border-radius: 999px;
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    opacity: .88;
    box-shadow: 0 4px 16px rgba(0, 113, 227, .35);
}

.btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
    border-radius: 999px;
}

.btn-outline-primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.02);
}

.btn-secondary {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    border-radius: 999px;
}

.btn-secondary:hover {
    background: var(--bg);
    border-color: var(--muted);
    color: var(--text);
    transform: scale(1.02);
}

/* ─── Form controls ──────────────────────────────────────────────────── */

.form-control,
.form-select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    transition: border-color .25s, box-shadow .25s;
}

.form-control:focus,
.form-select:focus {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, .15);
}

.form-control::placeholder { color: var(--muted); }

/* ─── Navbar ─────────────────────────────────────────────────────────── */

.navbar {
    background: rgba(255, 255, 255, .8) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border);
    transition: background .3s;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text) !important;
}

.nav-link {
    color: var(--text) !important;
    font-weight: 400;
    opacity: .85;
    transition: opacity .2s;
    border-radius: 8px;
    padding: .4rem .75rem !important;
}

.nav-link:hover { opacity: 1; background: var(--border); }
.nav-link.active { opacity: 1; font-weight: 600; }

/* ─── Dropdown ───────────────────────────────────────────────────────── */

.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: .5rem;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.dropdown-item {
    color: var(--text);
    border-radius: 8px;
    padding: .45rem .85rem;
    font-size: .9375rem;
    transition: background .15s;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--bg);
    color: var(--text);
}

/* ─── Section / Container helpers ───────────────────────────────────── */

section {
    padding: 5rem 0;
}

.section-sm { padding: 3rem 0; }
.section-lg { padding: 8rem 0; }

.section-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--text);
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ─── Typography ─────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--text);
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.375rem, 2.5vw, 2rem); }
h4 { font-size: 1.375rem; }

p { line-height: 1.75; }

.text-muted { color: var(--muted) !important; }

/* ─── Hero ───────────────────────────────────────────────────────────── */

.hero {
    padding: 7rem 0 6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0, 113, 227, .12) 0%, transparent 70%);
    pointer-events: none;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1.05;
}

.hero-lead {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--muted);
    max-width: 640px;
    margin: 1.25rem auto 2.5rem;
    line-height: 1.6;
}

/* ─── Product card ───────────────────────────────────────────────────── */

.product-card {
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}

.product-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .12) !important;
    transform: translateY(-4px);
}

.product-card img {
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.product-card:hover img { transform: scale(1.04); }

/* ─── Category card ──────────────────────────────────────────────────── */

.category-card {
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}

.category-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .14) !important;
}

/* ─── Badge ──────────────────────────────────────────────────────────── */

.badge {
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: .01em;
    padding: .35em .75em;
}

.badge-accent {
    background: rgba(0, 113, 227, .1);
    color: var(--accent);
}

/* ─── Blog ───────────────────────────────────────────────────────────── */
/* Blog detay gövdesi (.blog-content.pd-prose) ürün açıklamasıyla AYNI prose kuralını kullanır → "Ürün detay (pd-)" › .pd-prose.
   Sayfaya özel parçalar (kapak görseli, sağ sütun) dosya sonundaki "Blog detay (bd-)" bloğunda. */

/* ─── Prose ──────────────────────────────────────────────────────────── */

.prose img { border-radius: 14px; }

/* ─── Footer ─────────────────────────────────────────────────────────── */

footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 3.5rem 0 2rem;
    color: var(--muted);
    font-size: .9375rem;
}

footer a { color: var(--muted); transition: color .2s; }
footer a:hover { color: var(--text); }

/* ─── Divider ────────────────────────────────────────────────────────── */

hr {
    border: none;
    border-top: 1px solid var(--border);
    opacity: 1;
}

/* ─── Scrollbar (webkit) ─────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ─── Utilities ──────────────────────────────────────────────────────── */

.surface { background: var(--surface); }
.bg-surface { background: var(--surface) !important; }
.text-accent { color: var(--accent) !important; }
.border-subtle { border-color: var(--border) !important; }
.radius { border-radius: var(--radius) !important; }
.radius-sm { border-radius: 10px !important; }
.radius-xs { border-radius: 6px !important; }
.shadow-card { box-shadow: var(--shadow) !important; }

/* ─── Alert ──────────────────────────────────────────────────────────── */

.alert {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
}

/* ─── Table ──────────────────────────────────────────────────────────── */

.table {
    color: var(--text);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--border);
    color: var(--text);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, .02);
    color: var(--text);
}

/* ─── Modal ──────────────────────────────────────────────────────────── */

.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .25);
}

.modal-header {
    border-bottom-color: var(--border);
}

.modal-footer {
    border-top-color: var(--border);
}

/* ─── Pagination ─────────────────────────────────────────────────────── */

.page-link {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    border-radius: 8px !important;
    margin: 0 2px;
    transition: background .2s, color .2s;
}

.page-link:hover {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--accent);
}

.page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
}

/* ─── Responsive grid helpers ────────────────────────────────────────── */

@media (max-width: 575.98px) {
    section { padding: 3rem 0; }
    .hero { padding: 4rem 0 3rem; }
    .card-body { padding: 1.25rem; }
    h1 { letter-spacing: -.03em; }
}

@media (max-width: 767.98px) {
    .section-lg { padding: 5rem 0; }
    .navbar .btn { display: none; }
}

@media (min-width: 992px) {
    .hero { padding: 9rem 0 7rem; }
}

/* ─── Smooth page transition ─────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    .fade-up {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .5s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1);
    }

    .fade-up.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ─── Floating Header ────────────────────────────────────────────────── */
/* Renk ve yazı tipi SİSTEMDEN gelir: Ayarlar → Görünüm (palet + font çifti) GorunumKatalogu.StilEtiketi
   ile :root token'larını ezer → --accent (vurgu / header + menü zemini), --on-accent (vurgu üstü
   metin-ikon rengi; açık vurguda koyu, koyuda beyaz), --mn-hover (menü hover tonu), --logo-filter,
   --font-ui / --font-display. "Tema Varsayılanı" seçiliyse :root'taki varsayılanlar geçerlidir. */

:root { --header-h: 68px; --ann-h: 0px; }
@media (min-width: 992px) { :root { --header-h: 88px; } }

/* --ann-h: header üstü duyuru çubuğu yüksekliği. Çubuk yoksa 0 (DuyuruCubugu bileşeni aktifken
   :root'u 44px'e çeker; kapatılınca JS 0'a döndürür). Header ve body bu değişkenle kayar. */
body { padding-top: calc(var(--header-h) + var(--ann-h)); }

.site-header-float {
    position: fixed;
    top: var(--ann-h);
    left: 0;
    right: 0;
    z-index: 1040;
    padding-top: 8px;
}

/* Üstteyken zemin YOK (şeffaf; hero görünür); kaydırınca vurgu tonlu koyu cam kapsül.
   Metin ve ikonlar her iki durumda vurgu üstü renkte (--on-accent). */
.site-header-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1rem;
    color: var(--on-accent);
    border-radius: 24px;
    border: 1px solid transparent;
    transition: background .35s cubic-bezier(.4, 0, .2, 1), border-color .35s, box-shadow .35s, backdrop-filter .35s;
}
.site-header-float.scrolled .site-header-inner {
    background: color-mix(in srgb, color-mix(in srgb, var(--accent) 26%, #0a0f1a) 86%, transparent);
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    transition: padding .35s;
}

@media (min-width: 992px) {
    .site-header-inner {
        padding: 0 2rem;
    }
 }



/* Sol ana menü · orta logo · sağ aksiyonlar — üç sütun.
   Mobilde ana menü gizli (tam ekran menü var): logo solda, aksiyonlar sağda. */
.site-header-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: .5rem 0;
    transition: padding .2s cubic-bezier(.4,0,.2,1);
}
.site-header-nav { display: none; }

@media (min-width: 992px) {
    .site-header-row { grid-template-columns: 1fr auto 1fr; padding: .875rem 0; gap: 1.5rem; }
    .site-header-float.scrolled .site-header-row { padding: .5rem 0; }
    .site-header-nav { display: block; justify-self: start; min-width: 0; }
    .site-header-logo { justify-self: center; }
}

.site-header-logo {
    flex-shrink: 0;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    color: var(--on-accent);
    font-family: var(--font-display);
}
/* Logo vurgu zemininde tek renk (--logo-filter: beyaz metinli vurguda beyaz, açık vurguda dokunulmaz) */
.site-header-logo img { display: block; max-height: 42px; width: auto; filter: var(--logo-filter); }
@media (min-width: 992px) { .site-header-logo img { max-height: 52px; } }

.site-header-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.75rem;
    align-items: center;
}

.site-header-link {
    font-family: var(--font-ui);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--on-accent) 82%, transparent);
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .15s;
}
.site-header-link:hover { color: var(--on-accent); opacity: 1; }
.site-header-link:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 4px; border-radius: 4px; }

/* ── Hakkımızda dropdown ("Ayrı Sayfalar" düzeni) — hover/klavye odağıyla açılır ── */
.site-header-dd { position: relative; }
.site-header-dd-toggle { display: inline-flex; align-items: center; gap: .3rem; }
.site-header-dd-caret { transition: transform .2s; }
.site-header-dd:hover .site-header-dd-caret,
.site-header-dd:focus-within .site-header-dd-caret { transform: rotate(180deg); }

.site-header-dd-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 10px);
    min-width: 230px;
    margin: 0;
    padding: .5rem;
    list-style: none;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 1050;
}
/* Link ile panel arasındaki boşlukta hover kopmasın (görünmez köprü) */
.site-header-dd-menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}
.site-header-dd:hover .site-header-dd-menu,
.site-header-dd:focus-within .site-header-dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 4px);
}

.site-header-dd-link {
    display: block;
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.site-header-dd-link:hover { background: var(--border); color: var(--accent); }

.site-header-actions {
    display: flex;
    align-items: center;
    gap: .125rem;
    justify-self: end;
}

/* İkon düğmeleri — 44px dokunma alanı, klavye odağı görünür */
.hdr-ic {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: 44px;
    height: 44px;
    padding: 0 .5rem;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--on-accent);
    font-family: var(--font-ui);
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.hdr-ic:hover { background: color-mix(in srgb, var(--on-accent) 14%, transparent); color: var(--on-accent); }
.hdr-ic:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 2px; }
.hdr-ic svg { width: 22px; height: 22px; flex: none; }
.hdr-ic-txt { display: none; font-size: .8125rem; font-weight: 500; white-space: nowrap; }
@media (min-width: 1200px) { .hdr-ic-txt { display: inline; } }
.hdr-badge {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--on-accent);
    color: var(--accent);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* Hamburger: üç çizgi */
.hdr-burger { flex-direction: column; gap: 5px; }
.hdr-burger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

/* ─── Tam ekran menü (overlay) ─────────────────────────────────────── */

.mn-overlay {
    /* Menü tokenları sistem paletinden türetilir (zemin = vurgu rengi, metin = vurgu üstü renk) */
    --mn-bg: var(--accent);
    --mn-text: var(--on-accent);
    --mn-muted: color-mix(in srgb, var(--on-accent) 72%, transparent);
    --mn-line: color-mix(in srgb, var(--on-accent) 18%, transparent);
    --mn-marquee: color-mix(in srgb, var(--on-accent) 28%, transparent);
    --mn-accent: var(--mn-hover);
    --mn-icon: var(--mn-hover);

    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--mn-bg);
    color: var(--mn-text);
    font-family: var(--font-ui);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}
.mn-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
html.mn-lock { overflow: hidden; }

.mn-inner {
    max-width: 1600px;
    margin: 0 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 1.25rem 1.5rem;
}
@media (min-width: 992px) { .mn-inner { padding: 0 4rem 2.5rem; } }

.mn-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-h);
    padding-top: .5rem;
}
.mn-logo { display: inline-flex; align-items: center; text-decoration: none !important; color: var(--mn-text); }
.mn-logo img { display: block; max-height: 48px; width: auto; } /* filtre YOK: tam ekran menü FooterLogo (açık renkli) kullanır */
.mn-logo-text { font: 700 1.35rem/1 var(--font-display); color: var(--mn-text); letter-spacing: .02em; }
.mn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: -.5rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--mn-text);
    cursor: pointer;
    transition: background .15s, transform .2s;
    -webkit-tap-highlight-color: transparent;
}
.mn-close:hover { background: color-mix(in srgb, var(--on-accent) 14%, transparent); transform: rotate(90deg); }
.mn-close:focus-visible { outline: 2px solid var(--mn-text); outline-offset: 3px; }

.mn-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 1.5rem 0 2rem;
}
@media (min-width: 992px) {
    .mn-body {
        grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
        gap: 4rem;
        align-items: center;
        padding: 2.5rem 0;
    }
}

/* Büyük başlık-fontlu linkler (font çifti: Başlık) */
.mn-nav { position: relative; }
.mn-list { list-style: none; margin: 0; padding: 0; }
.mn-item {
    position: relative;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .45s ease var(--mn-d, 0s), transform .55s cubic-bezier(.2, .8, .2, 1) var(--mn-d, 0s);
}
.is-open .mn-item { opacity: 1; transform: none; }
.mn-item:nth-child(1) { --mn-d: .08s; }
.mn-item:nth-child(2) { --mn-d: .13s; }
.mn-item:nth-child(3) { --mn-d: .18s; }
.mn-item:nth-child(4) { --mn-d: .23s; }
.mn-item:nth-child(5) { --mn-d: .28s; }
.mn-item:nth-child(6) { --mn-d: .33s; }
.mn-item:nth-child(7) { --mn-d: .38s; }
.mn-item:nth-child(n+8) { --mn-d: .43s; }

.mn-link {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: .2rem 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 8.5vw, 3.2rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--mn-text);
    text-decoration: none !important;
    transition: color .2s;
}
@media (min-width: 992px) { .mn-link { font-size: clamp(3rem, 4.6vw, 5.25rem); padding: .3rem 0; } }
.mn-item:hover .mn-link,
.mn-item:focus-within .mn-link { color: var(--mn-accent); }
.mn-link:focus-visible { outline: 2px solid var(--mn-text); outline-offset: 6px; border-radius: 4px; }

.mn-sub { list-style: none; margin: -.15rem 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.mn-sub a { color: var(--mn-muted); font-size: .95rem; text-decoration: none; }
.mn-sub a:hover, .mn-sub a:focus-visible { color: var(--mn-accent); }

/* Hover'da linkin arkasında kayan "AD / AD / AD" şeridi — ekranın sol kenarından sağ sütuna kadar */
.mn-marquee {
    position: absolute;
    left: -100vw;
    right: -4rem;
    top: 50%;
    z-index: 0;
    display: flex;
    transform: translateY(-50%);
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    color: var(--mn-marquee);
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: opacity .2s;
}
.mn-marquee-track {
    flex: none;
    animation: mn-marquee 32s linear infinite;
    animation-play-state: paused;
}
.mn-item:hover .mn-marquee,
.mn-item:focus-within .mn-marquee { opacity: 1; }
.mn-item:hover .mn-marquee-track,
.mn-item:focus-within .mn-marquee-track { animation-play-state: running; }
@keyframes mn-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (hover: none), (max-width: 991.98px) { .mn-marquee { display: none; } }

/* Sağ sütun: Ofis / İletişim / Sosyal */
.mn-info {
    border-top: 1px solid var(--mn-line);
    padding-top: 2rem;
    display: grid;
    gap: 2rem;
}
@media (min-width: 992px) {
    .mn-info {
        border-top: 0;
        border-left: 1px solid var(--mn-line);
        padding: .5rem 0 .5rem 4.5rem;
        gap: 2.5rem;
        align-self: center;
    }
}
.mn-h {
    margin: 0 0 .65rem;
    font: 600 1.6rem/1.2 var(--font-display);
    color: var(--mn-text);
}
.mn-addr { margin: 0; font-style: normal; color: var(--mn-muted); font-size: 1rem; line-height: 1.65; max-width: 22rem; }
.mn-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.mn-contact a {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 34px;
    color: var(--mn-muted);
    font-size: 1rem;
    text-decoration: none;
    transition: color .15s;
}
.mn-contact a:hover, .mn-contact a:focus-visible { color: var(--mn-text); }
.mn-contact i { color: var(--mn-icon); font-size: 1.05rem; width: 1.25rem; text-align: center; }
.mn-social { list-style: none; margin: 0 0 0 -.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem; }
.mn-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--mn-muted);
    font-size: 1.1rem;
    text-decoration: none;
    transition: color .15s, background .15s;
}
.mn-social a:hover, .mn-social a:focus-visible { color: var(--mn-text); background: color-mix(in srgb, var(--on-accent) 12%, transparent); }

/* Alt sıra: "Üst Menü" işaretli linkler */
.mn-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mn-line);
}
@media (min-width: 768px) {
    .mn-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-top: 2rem; }
}
.mn-bottom-h { margin: 0 0 .4rem; font: 600 1.35rem/1.2 var(--font-display); }
.mn-bottom-h a { color: var(--mn-text); text-decoration: none; }
.mn-bottom-h a:hover, .mn-bottom-h a:focus-visible { color: var(--mn-accent); }
.mn-bottom-p { margin: 0; color: var(--mn-muted); font-size: .95rem; line-height: 1.6; max-width: 20rem; }
.mn-bottom-p a { color: var(--mn-text); text-decoration: underline; text-underline-offset: 3px; }
.mn-bottom-p a:hover { color: var(--mn-accent); }

@media (prefers-reduced-motion: reduce) {
    .mn-overlay, .mn-item, .mn-marquee, .mn-link, .mn-close, .hdr-ic { transition: none; }
    .mn-marquee-track { animation: none; }
}

/* ─── Hero v2 (video / image background) ────────────────────────────── */

.hero-v2 {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    margin-top: calc(-1 * var(--header-h));
    padding-top: calc(var(--header-h) + 3rem);
    padding-bottom: 5rem;
    min-height: 100vh;
}

@media (min-width: 768px)  { .hero-v2 { padding-top: calc(var(--header-h) + 5rem); padding-bottom: 7rem; } }
@media (min-width: 992px)  { .hero-v2 { padding-top: calc(var(--header-h) + 10rem); padding-bottom: 9rem; } }

.hero-v2-bg {
    position: absolute;
    inset: 4px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(0,0,0,.08);
}
@media (min-width: 992px) { .hero-v2-bg { border-radius: 48px; } }

.hero-v2-bg video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: .5; filter: invert(1);
}

.hero-v2-bg img {
    width: 100%; height: 100%; object-fit: cover; display: block; opacity: .3;
}

.hero-v2-content {
    position: relative;
    z-index: 10;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 992px) { .hero-v2-content { padding: 0 3rem; } }

.hero-v2-text { max-width: 42rem; text-align: center; margin: 0 auto; }
@media (min-width: 992px) { .hero-v2-text { text-align: left; margin: 0; max-width: 100%; } }

.hero-v2-h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1.05;
    max-width: 32rem;
    margin: 0 auto 2rem;
    color: var(--text);
}
@media (min-width: 992px) { .hero-v2-h1 { margin: 0 0 2rem; } }

.hero-v2-lead {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 36rem;
    margin: 0 auto 2.5rem;
}
@media (min-width: 992px) { .hero-v2-lead { margin: 0 0 2.5rem; } }

.hero-v2-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-bottom: 0;
}
@media (min-width: 576px) { .hero-v2-btns { flex-direction: row; justify-content: center; } }
@media (min-width: 992px) { .hero-v2-btns { justify-content: flex-start; } }

/* ─── Hero carousel caption (premium) ────────────────────────────────── */
/* Sol altta: sayaç · eyebrow (AltBaslik) · büyük başlık (Baslik) · açıklama · efektli CTA.
   Renk/font sistem token'larından (--accent, --on-accent, --accent-2, --font-display, --font-ui).
   Slayt aktif olunca öğeler sırayla belirir; hareket azaltma tercihinde animasyon yok. */

#heroSlider .hero-cap {
    position: absolute;
    inset: 0;                      /* tüm hero'yu kaplar; içerik DİKEY ORTADA */
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header-h, 0px) + 1rem) 0 clamp(2rem, 7vh, 4.5rem); /* üstte şeffaf header payı */
    pointer-events: none;
}
/* Okunabilirlik: hero gölgesinden bağımsız, alttan yukarı zayıflayan geçiş (orta hizadaki metin de örtülür) */
#heroSlider .hero-cap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 85%;
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}
#heroSlider .hero-cap-inner {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
@media (min-width: 768px) { #heroSlider .hero-cap-inner { padding-right: min(440px, 38vw); } }
@media (min-width: 992px) { #heroSlider .hero-cap-inner { padding-left: 2.5rem; } }
#heroSlider .hero-cap-inner > * { pointer-events: auto; }

.hero-cap-count {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.1rem;
    font: 500 .78rem/1 var(--font-ui);
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .72);
    font-variant-numeric: tabular-nums;
}
.hero-cap-count i { display: block; width: 40px; height: 1px; background: rgba(255, 255, 255, .38); }
.hero-cap-count b { color: #fff; font-weight: 600; }

.hero-cap-kicker {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 .9rem;
    font: 600 .78rem/1.3 var(--font-ui);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent-2, #fff);
}
.hero-cap-kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; flex: none; }

.hero-cap-title {
    margin: 0 0 1rem;
    max-width: 14ch;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.1rem, 5.2vw, 4.75rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero-cap-text {
    margin: 0 0 1.75rem;
    max-width: 34rem;
    font-family: var(--font-ui);
    font-size: clamp(.95rem, 1.1vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}

/* CTA: cam pil → hover'da vurgu rengi soldan dolar, parlama süpürür, ok ilerler */
.hero-cta {
    --cta-h: 56px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    height: var(--cta-h);
    padding: 0 6px 0 1.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: #fff;
    font: 600 .95rem/1 var(--font-ui);
    letter-spacing: .01em;
    text-decoration: none !important;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, color .25s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.hero-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--accent);
    transform: translateX(-101%);
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.hero-cta::after {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -60%;
    width: 40%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .38) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left .5s ease;
    pointer-events: none;
}
.hero-cta:hover, .hero-cta:focus-visible { color: var(--on-accent); border-color: transparent; transform: translateY(-2px); opacity: 1; }
.hero-cta:hover::before, .hero-cta:focus-visible::before { transform: translateX(0); }
.hero-cta:hover::after { left: 130%; }
.hero-cta:active { transform: translateY(0) scale(.98); }
.hero-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-cta-label { position: relative; z-index: 1; white-space: nowrap; }
.hero-cta-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--cta-h) - 12px);
    height: calc(var(--cta-h) - 12px);
    border-radius: 50%;
    background: #fff;
    color: #111;
    transition: background .25s, color .25s;
}
.hero-cta-icon svg { width: 18px; height: 18px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.hero-cta:hover .hero-cta-icon, .hero-cta:focus-visible .hero-cta-icon { background: var(--on-accent); color: var(--accent); }
.hero-cta:hover .hero-cta-icon svg { transform: translateX(3px); }

/* Giriş animasyonu: aktif slaytta sırayla belirir (yalnız transform/opacity) */
#heroSlider .carousel-item .hero-cap-inner > * { opacity: 0; transform: translateY(18px); }
#heroSlider .carousel-item.active .hero-cap-inner > * { animation: hero-cap-in .7s cubic-bezier(.2, .8, .2, 1) forwards; }
#heroSlider .carousel-item.active .hero-cap-inner > :nth-child(1) { animation-delay: .15s; }
#heroSlider .carousel-item.active .hero-cap-inner > :nth-child(2) { animation-delay: .25s; }
#heroSlider .carousel-item.active .hero-cap-inner > :nth-child(3) { animation-delay: .35s; }
#heroSlider .carousel-item.active .hero-cap-inner > :nth-child(4) { animation-delay: .45s; }
#heroSlider .carousel-item.active .hero-cap-inner > :nth-child(5) { animation-delay: .55s; }
@keyframes hero-cap-in { to { opacity: 1; transform: none; } }

/* Önceki / sonraki: kenarda cam daire */
#heroSlider .carousel-control-prev, #heroSlider .carousel-control-next { width: 7%; min-width: 72px; opacity: .9; }
#heroSlider .carousel-control-prev-icon, #heroSlider .carousel-control-next-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-size: 42% 42%;
    transition: background-color .2s, transform .2s;
}
#heroSlider .carousel-control-prev:hover .carousel-control-prev-icon,
#heroSlider .carousel-control-next:hover .carousel-control-next-icon { background-color: rgba(255, 255, 255, .28); transform: scale(1.06); }
#heroSlider .carousel-control-prev:focus-visible, #heroSlider .carousel-control-next:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

@media (max-width: 767.98px) {
    /* Sabit WhatsApp düğmesi (sol alt, 52px + 16px) CTA'nın üstüne binmesin */
    #heroSlider .hero-cap { padding-bottom: 6.5rem; }
    .hero-cta { --cta-h: 52px; }
    .hero-cap-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    #heroSlider .carousel-item .hero-cap-inner > * { opacity: 1; transform: none; animation: none; }
    .hero-cta, .hero-cta::before, .hero-cta::after, .hero-cta-icon, .hero-cta-icon svg,
    #heroSlider .carousel-control-prev-icon, #heroSlider .carousel-control-next-icon { transition: none; }
}

/* ─── Section 1: hero altı bant (Banner Yönetimi → anasayfa-section1) ─────── */
/* Solda görsel, sağda hero caption'ın aynı yapısı (.hero-cap-kicker/-title/-text + .hero-cta).
   Zemin: sayfa (body) rengi — caption sınıflarının beyaz metni burada koyu tona çevrilir. */

.sec1 {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 8vh, 6rem) 0;
    background: var(--bg);
    color: var(--text);
}
.sec1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(55% 70% at 88% 12%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
    pointer-events: none;
}
.sec1-inner {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 992px) {
    .sec1-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4.5rem; padding: 0 2.5rem; }
}
.sec1-inner--tek { grid-template-columns: 1fr !important; }

.sec1-media {
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 5 / 4;
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
    background: var(--surface);
}
.sec1-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.sec1-media:hover .sec1-img { transform: scale(1.04); }

.sec1-body { min-width: 0; }
/* Bölüm altı buton (SectionCta): ürün ızgarasının altında ortalı; Section 1 ile aynı açık-zemin CTA */
.sec-cta { text-align: center; margin-top: -1rem; padding: 0 0 clamp(3rem, 7vh, 4.5rem); }
/* Açık zemin varyantı: caption sınıfları koyu metne, CTA koyu pile döner (hover'da vurgu rengiyle dolar) */
.sec1 .hero-cap-kicker { color: var(--accent); }
.sec1 .hero-cap-title { font-size: clamp(2rem, 4vw, 3.75rem); max-width: 16ch; color: var(--text); text-shadow: none; }
.sec1 .hero-cap-text { color: var(--muted); }
.sec1 .hero-cta, .sec-cta .hero-cta {
    background: var(--text);
    border-color: transparent;
    color: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}
.sec1 .hero-cta:hover, .sec1 .hero-cta:focus-visible, .sec-cta .hero-cta:hover, .sec-cta .hero-cta:focus-visible { color: var(--on-accent); }
.sec1 .hero-cta:focus-visible, .sec-cta .hero-cta:focus-visible { outline-color: var(--accent); }
.sec1 .hero-cta-icon, .sec-cta .hero-cta-icon { background: var(--bg); color: var(--text); }
.sec1 .hero-cta:hover .hero-cta-icon, .sec1 .hero-cta:focus-visible .hero-cta-icon, .sec-cta .hero-cta:hover .hero-cta-icon, .sec-cta .hero-cta:focus-visible .hero-cta-icon { background: var(--on-accent); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .sec1-img { transition: none; }
    .sec1-media:hover .sec1-img { transform: none; }
}

/* ─── Section 2: kategori bandı (Banner Yönetimi → anasayfa-section2 + Kategoriler) ── */
/* Tam genişlik arka plan görseli (yoksa vurgu rengi) üstünde yuvarlatılmış kare kategori kartları.
   4'e kadar sabit sıra; 4'ten fazlası yatay kaydırıcı (JS otomatik döndürür). */

.sec2 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(3.5rem, 9vh, 6.5rem) 0;
    background: var(--accent);
    color: #fff;
}
.sec2-bg { position: absolute; inset: 0; z-index: -2; }
.sec2-bg picture, .sec2-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Marka tonu: yüklenen fotoğraf vurgu rengiyle boyanır (doku kalır, beyaz metin okunur) */
.sec2-bg-img { filter: saturate(.55); }
.sec2-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--accent) 95%, transparent);
}
.sec2--duz::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(60% 80% at 85% 15%, color-mix(in srgb, #fff 12%, transparent), transparent 70%);
    pointer-events: none;
}

.sec2-inner { position: relative; max-width: 1320px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 992px) { .sec2-inner { padding: 0 2.5rem; } }

.sec2-head { margin-bottom: 2rem; }
.sec2 .hero-cap-kicker { color: rgba(255, 255, 255, .85); }
.sec2 .hero-cap-title { font-size: clamp(1.75rem, 3.2vw, 3rem); max-width: 20ch; margin-bottom: 0; }

/* Kart rayı: yatay, kaydırmaya duyarlı; kaydırma çubuğu gizli */
.sec2-track {
    --sec2-gap: 1.5rem;
    display: flex;
    gap: var(--sec2-gap);
    margin: 0 -1.25rem;
    padding: .5rem 1.25rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sec2-track::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .sec2-track { margin: 0; padding: .5rem 0; } }

.sec2-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
}
@media (min-width: 576px)  { .sec2-card { flex-basis: calc((100% - var(--sec2-gap)) / 2); } }
@media (min-width: 992px)  { .sec2-card { flex-basis: calc((100% - 3 * var(--sec2-gap)) / 4); } }
/* 4 ve altı: masaüstünde ortalı sabit sıra */
@media (min-width: 992px)  { .sec2-track--sabit { justify-content: center; } }

.sec2-card a {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    overflow: hidden;
    background: rgba(0, 0, 0, .18);
    color: #fff;
    text-decoration: none !important;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.sec2-card a:hover { transform: translateY(-4px); opacity: 1; }
.sec2-card a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.sec2-fig { margin: 0; position: absolute; inset: 0; }
.sec2-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.sec2-card a:hover .sec2-img { transform: scale(1.05); }
.sec2-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.75rem 1.1rem 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
    font: 700 1.05rem/1.2 var(--font-display);
    letter-spacing: -.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* Görseli olmayan kategori: vurgu tonlu yer tutucu kart, ad ortada */
.sec2-card--bos a { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 65%, #000), color-mix(in srgb, var(--accent) 80%, #fff)); }
.sec2-card--bos .sec2-cap {
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    background: none;
    font-size: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .sec2-track { scroll-behavior: auto; }
    .sec2-card a, .sec2-img { transition: none; }
    .sec2-card a:hover { transform: none; }
    .sec2-card a:hover .sec2-img { transform: none; }
}

/* ─── Bölüm başlığı (SectionHead): sec2-head tasarımı, açık zemin, ortalı ────── */
.sec-head { padding: clamp(2.5rem, 6vh, 4rem) 0 .5rem; }
.sec-head--orta { text-align: center; }
.sec-head--orta .hero-cap-kicker { justify-content: center; }
.sec-head .hero-cap-kicker { color: var(--accent); }
.sec-head .hero-cap-title {
    margin: 0 auto;
    max-width: 22ch;
    font-size: clamp(1.75rem, 3.2vw, 3rem);
    color: var(--text);
    text-shadow: none;
}

/* ─── Hero üstü kategori slider'ı (sağ alt buzlu panel) ─────────────── */
/* Sağ alt köşe. Zemin: site vurgu rengi buzlu cam. Panel 768px altında gizlenir (hero'yu kapatmasın);
   kategoriler altta CategoryGrid bölümünde zaten listelenir. */

.hero-kat {
    position: absolute;
    bottom: 2.5rem;
    right: 1.5rem;
    z-index: 11;
    width: min(380px, 34vw);
    padding: .75rem;
    border-radius: 24px;
    background: color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, .10));
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    color: #fff;
}
@media (max-width: 767.98px) { .hero-kat { display: none; } }
@media (min-width: 992px) { .hero-kat { right: 2.5rem; } }

/* Slayt yığını: görsel (4:3) + altındaki ad/buton satırı (--hk-cap-h) */
.hero-kat-viewport {
    --hk-cap-h: 62px;
    position: relative;
    aspect-ratio: 4 / 3;
    padding-bottom: var(--hk-cap-h);
    box-sizing: content-box;
}

.hero-kat-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}
.hero-kat-slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .6s ease, visibility 0s; }

.hero-kat-figure { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; }
.hero-kat-img {
    width: 100%;
    height: auto;              /* width/height öznitelikleri (CLS) oranı ezmesin */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    background: rgba(0, 0, 0, .25);
}

/* Resmin altındaki satır: solda ad, sağda hero CTA (.hero-cta) küçük boy */
.hero-kat-cap {
    height: var(--hk-cap-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 .15rem;
    color: #fff;
}
.hero-kat-name {
    margin: 0;
    color: #fff;
    font: 700 1rem/1.2 var(--font-display);
    letter-spacing: -.01em;
    min-width: 0;
    overflow-wrap: anywhere;
}
.hero-kat .hero-cta { --cta-h: 44px; flex: none; gap: .6rem; padding: 0 4px 0 1.1rem; font-size: .85rem; }
.hero-kat .hero-cta-icon svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
    .hero-kat-slide { transition: none; }
}

/* ─── Logo Slider ────────────────────────────────────────────────────── */

.logo-slider-section {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: .25rem 0 .75rem;
}

.logo-slider-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
@media (min-width: 768px) {
    .logo-slider-wrap { flex-direction: row; padding: 0 3rem; }
}

.logo-slider-label {
    font-size: .8125rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .logo-slider-label { min-width: 8rem; text-align: right; padding-right: 1.5rem; border-right: 1px solid var(--border); }
}

.logo-slider-track-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 1.25rem 0;
    min-width: 0;
}

.logo-slider-track {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: max-content;
    animation: logo-scroll 36s linear infinite;
}
.logo-slider-track:hover { animation-play-state: paused; }

@keyframes logo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.logo-slider-track img {
    height: 20px;
    width: auto;
    flex-shrink: 0;
    display: inline-block;
    opacity: .55;
    filter: grayscale(1);
    transition: opacity .2s, filter .2s;
}
.logo-slider-track img:hover { opacity: 1; filter: none; }

.logo-slider-fade-l {
    position: absolute; inset-y: 0; left: 0; width: 4rem;
    background: linear-gradient(to right, var(--bg), transparent);
    pointer-events: none; z-index: 1;
}
.logo-slider-fade-r {
    position: absolute; inset-y: 0; right: 0; width: 4rem;
    background: linear-gradient(to left, var(--bg), transparent);
    pointer-events: none; z-index: 1;
}

/* ─── Faz 8.5: Accessibility (WCAG AA) ─────────────────────────── */
/* Focus ring — keyboard kullanıcıları için belirgin */
:focus-visible {
    outline: 3px solid #0071e3;
    outline-offset: 2px;
    border-radius: 2px;
}
/* Mouse click'te outline gözükmesin */
:focus:not(:focus-visible) {
    outline: none;
}
/* Skip-link odaklanınca görünür */
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
    position: fixed !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}
/* Reduced motion — kullanıcı animasyon istemiyorsa kapat */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* Form input renk kontrastı — light mode */
input::placeholder, textarea::placeholder {
    color: #6c757d;
    opacity: 1;
}

/* ── WhatsApp yüzen buton efekti (SET projesindeki .wa-fab'dan) ──
   Hafif yukarı-aşağı süzülme + yeşil nabız halkası */
.wa-fab { animation: waFloat 3s ease-in-out infinite; }
.wa-fab::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid #25d366; animation: waPulse 2.4s ease-out infinite; pointer-events: none;
}
@keyframes waFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes waPulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.75); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-fab, .wa-fab::before { animation: none; } }

/* Tekil kurumsal sayfa (/sayfa/*): bölüm partial'larının col-lg-9 daralmasını kaldır —
   içerik tam genişlik akar (kullanıcı kararı, "Ayrı Sayfalar" düzeni) */
.icerik-tam .col-lg-9 { flex: 0 0 100%; max-width: 100%; width: 100%; margin-left: 0 !important; margin-right: 0 !important; }

/* Kart görsel placeholder'ı — bg-light yerine tema yüzeyi */
.kart-gorsel-bos {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    color: var(--muted);
}

/* Filtre hapları (tekil sayfa iç-link navigasyonu) — 44px dokunma hedefi */
.filtre-hap {
    border-radius: 999px;
    padding: .55rem 1.25rem;
    min-height: 44px;
    font-weight: 500;
}

/* ─── Bölüm başlığı açıklaması (p · h2 · p) — SectionHead + Section 2 ─────────── */
.sec-head-text {
    margin: .9rem auto 0;
    max-width: 40rem;
    font-family: var(--font-ui);
    font-size: clamp(.95rem, 1.1vw, 1.1rem);
    line-height: 1.6;
    color: var(--muted);
}
.sec2 .hero-cap-text.sec2-text { margin: .9rem 0 0; max-width: 40rem; }

/* ─── Ürün kartı: kategori adı (açık ton) + fiyatsız üründe 2 satır açıklama ──── */
.product-card .pc-kat {
    margin: 0 0 .35rem;
    font-size: .75rem;
    letter-spacing: .01em;
    color: var(--muted);
}
.product-card .pc-desc {
    margin: .35rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Section 4: Form Bölümü (fb-) — Promotürk FormBolumu portu (aifusionx data-id=6068080) ──
   Kavisli çerçeve + tam arka plan görseli; solda koyu cam panel, sağda form kartı.
   Tipografi/renkler sistem token'larından (--font-display/--font-ui, --accent, --surface, --text, --muted). */

.fb-section {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    margin: 2rem .5rem;
    /* Kavisli çentik çerçevesi (aifusionx orijinal clip-path'i): üst kenar ~102px
       içeride başlar, sol üstte yükselen tırnak + sol altta içe kavis. İçerik
       çentik bölgelerine taşmasın diye üst/alt boşluk şekle göre verilir. */
    padding: calc(102px + 1.5rem) 0 calc(104px + 1.5rem);
    /* Görsel yüklenmediyse vurgu renginden koyu degrade */
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, #14141f), #14141f);
    -webkit-clip-path: polygon(.132812px 0, .132812px 0, .61064843px 2.55056851px, 1.58741478px 6.30721088px, 3.21633588px 10.92261537px, 5.65063651px 16.04947024px, 9.0435415px 21.34046375px, 13.54827565px 26.44828416px, 19.31806376px 31.02561973px, 26.50613066px 34.72515872px, 35.26570113px 37.19958939px, 45.75px 38.1016px, 197.25px 38.1016px, 197.25px 38.1016px, 198.02325px 38.1234093px, 200.196px 38.2760624px, 203.54775px 38.6903971px, 207.858px 39.4972512px, 212.90625px 40.8274625px, 218.472px 42.8118688px, 224.33475px 45.5813079px, 230.274px 49.2666176px, 236.06925px 53.9986357px, 241.5px 59.9082px, 241.5px 59.9082px, 242.06175px 60.4691575px, 243.654px 62.049764px, 246.13725px 64.4966205px, 249.372px 67.656328px, 253.21875px 71.3754875px, 257.538px 75.5007px, 262.19025px 79.8785665px, 267.036px 84.355688px, 271.93575px 88.7786655px, 276.75px 92.9941px, 276.75px 92.9941px, 281.167501px 95.9212029px, 285.570008px 98.1588512px, 289.957527px 99.7968643px, 294.330064px 100.9250616px, 298.687625px 101.6332625px, 303.030216px 102.0112864px, 307.357843px 102.1489527px, 311.670512px 102.1360808px, 315.968229px 102.0624901px, 320.251px 102.018px, calc(100% - 0.232px) 102.018px, calc(100% - 0.232px) calc(100% - 0.982px), 320.251px calc(100% - 0.982px), 320.251px calc(100% - 0.982px), 315.968473px calc(100% - 0.93751px), 311.670904px calc(100% - 0.86392px), 307.358311px calc(100% - 0.85105px), 303.030712px calc(100% - 0.98872px), 298.688125px calc(100% - 1.36675px), 294.330568px calc(100% - 2.07496px), 289.958059px calc(100% - 3.20317px), 285.570616px calc(100% - 4.8412px), 281.168257px calc(100% - 7.07887px), 276.751px calc(100% - 10.006px), 276.751px calc(100% - 10.006px), 271.947901px calc(100% - 14.211477px), 267.059368px calc(100% - 18.623936px), 262.223947px calc(100% - 23.091019px), 257.580184px calc(100% - 27.460368px), 253.266625px calc(100% - 31.579625px), 249.421816px calc(100% - 35.296432px), 246.184303px calc(100% - 38.458431px), 243.692632px calc(100% - 40.913264px), 242.085349px calc(100% - 42.508573px), 241.501px calc(100% - 43.092px), 241.501px calc(100% - 43.092px), 236.070222px calc(100% - 49.001426px), 230.274896px calc(100% - 53.733328px), 224.335534px calc(100% - 57.418542px), 218.472648px calc(100% - 60.187904px), 212.90675px calc(100% - 62.17225px), 207.858352px calc(100% - 63.502416px), 203.547966px calc(100% - 64.309238px), 200.196104px calc(100% - 64.723552px), 198.023278px calc(100% - 64.876194px), 197.25px calc(100% - 64.898px), 45.75px calc(100% - 64.898px), 45.75px calc(100% - 64.898px), 34.26303159px calc(100% - 65.993099px), 24.86404992px calc(100% - 68.964992px), 17.34605733px calc(100% - 73.344473px), 11.50205616px calc(100% - 78.662336px), 7.12504875px calc(100% - 84.449375px), 4.00803744px calc(100% - 90.236384px), 1.94402457px calc(100% - 95.554157px), .72601248px calc(100% - 99.933488px), .14700351px calc(100% - 102.905171px), 1.38671763E-31px calc(100% - 104px), 0 0, .132812px 0);
    clip-path: polygon(.132812px 0, .132812px 0, .61064843px 2.55056851px, 1.58741478px 6.30721088px, 3.21633588px 10.92261537px, 5.65063651px 16.04947024px, 9.0435415px 21.34046375px, 13.54827565px 26.44828416px, 19.31806376px 31.02561973px, 26.50613066px 34.72515872px, 35.26570113px 37.19958939px, 45.75px 38.1016px, 197.25px 38.1016px, 197.25px 38.1016px, 198.02325px 38.1234093px, 200.196px 38.2760624px, 203.54775px 38.6903971px, 207.858px 39.4972512px, 212.90625px 40.8274625px, 218.472px 42.8118688px, 224.33475px 45.5813079px, 230.274px 49.2666176px, 236.06925px 53.9986357px, 241.5px 59.9082px, 241.5px 59.9082px, 242.06175px 60.4691575px, 243.654px 62.049764px, 246.13725px 64.4966205px, 249.372px 67.656328px, 253.21875px 71.3754875px, 257.538px 75.5007px, 262.19025px 79.8785665px, 267.036px 84.355688px, 271.93575px 88.7786655px, 276.75px 92.9941px, 276.75px 92.9941px, 281.167501px 95.9212029px, 285.570008px 98.1588512px, 289.957527px 99.7968643px, 294.330064px 100.9250616px, 298.687625px 101.6332625px, 303.030216px 102.0112864px, 307.357843px 102.1489527px, 311.670512px 102.1360808px, 315.968229px 102.0624901px, 320.251px 102.018px, calc(100% - 0.232px) 102.018px, calc(100% - 0.232px) calc(100% - 0.982px), 320.251px calc(100% - 0.982px), 320.251px calc(100% - 0.982px), 315.968473px calc(100% - 0.93751px), 311.670904px calc(100% - 0.86392px), 307.358311px calc(100% - 0.85105px), 303.030712px calc(100% - 0.98872px), 298.688125px calc(100% - 1.36675px), 294.330568px calc(100% - 2.07496px), 289.958059px calc(100% - 3.20317px), 285.570616px calc(100% - 4.8412px), 281.168257px calc(100% - 7.07887px), 276.751px calc(100% - 10.006px), 276.751px calc(100% - 10.006px), 271.947901px calc(100% - 14.211477px), 267.059368px calc(100% - 18.623936px), 262.223947px calc(100% - 23.091019px), 257.580184px calc(100% - 27.460368px), 253.266625px calc(100% - 31.579625px), 249.421816px calc(100% - 35.296432px), 246.184303px calc(100% - 38.458431px), 243.692632px calc(100% - 40.913264px), 242.085349px calc(100% - 42.508573px), 241.501px calc(100% - 43.092px), 241.501px calc(100% - 43.092px), 236.070222px calc(100% - 49.001426px), 230.274896px calc(100% - 53.733328px), 224.335534px calc(100% - 57.418542px), 218.472648px calc(100% - 60.187904px), 212.90675px calc(100% - 62.17225px), 207.858352px calc(100% - 63.502416px), 203.547966px calc(100% - 64.309238px), 200.196104px calc(100% - 64.723552px), 198.023278px calc(100% - 64.876194px), 197.25px calc(100% - 64.898px), 45.75px calc(100% - 64.898px), 45.75px calc(100% - 64.898px), 34.26303159px calc(100% - 65.993099px), 24.86404992px calc(100% - 68.964992px), 17.34605733px calc(100% - 73.344473px), 11.50205616px calc(100% - 78.662336px), 7.12504875px calc(100% - 84.449375px), 4.00803744px calc(100% - 90.236384px), 1.94402457px calc(100% - 95.554157px), .72601248px calc(100% - 99.933488px), .14700351px calc(100% - 102.905171px), 1.38671763E-31px calc(100% - 104px), 0 0, .132812px 0);
}
@media (min-width: 992px) { .fb-section { margin: 2.5rem 1rem; padding: calc(102px + 2rem) 0 calc(104px + 2rem); } }

/* Dar ekranda piksel-sabit sol süsleme genişliğin çoğunu kaplar → çentiği kapat,
   düz oval çerçeveye dön (içerik boşlukları da normale iner). */
@media (max-width: 575.98px) {
    .fb-section {
        -webkit-clip-path: none;
        clip-path: none;
        padding: 3rem 0;
    }
}

.fb-bg { position: absolute; inset: 0; z-index: 0; }
.fb-bg picture, .fb-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fb-wrap {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 992px) { .fb-wrap { padding: 0 3rem; } }

.fb-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 992px) { .fb-grid { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; } }

/* ── Sol: koyu cam panel ── */
.fb-sol {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    padding: 2rem;
    color: #fff;
    background: rgba(12, 12, 24, .45);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 992px) { .fb-sol { padding: 2.75rem; } }

.fb-eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-family: var(--font-ui);
    font-size: .8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 1rem;
}

.fb-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -.03em;
    color: #fff;
    margin: 0 0 1rem;
    max-width: 26rem;
}

.fb-lead {
    color: rgba(255, 255, 255, .88);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
    max-width: 30rem;
}

/* Alt yarı çizgiyle ayrılır ve panelin dibine itilir (aradaki BOŞLUK esner). */
.fb-alt { margin-top: auto; padding-top: 2.5rem; }

.fb-cizgi {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .25);
    margin: 0 0 1.5rem;
    opacity: 1;
}

.fb-aciklama2 {
    color: rgba(255, 255, 255, .88);
    font-size: .9688rem;
    line-height: 1.65;
    margin: 0 0 1.75rem;
}

.fb-iletisim {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 576px) { .fb-iletisim { grid-template-columns: 1fr 1fr; } }

.fb-kutu {
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.fb-kutu-etiket {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .7188rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
}

.fb-kutu-deger {
    color: #fff !important;
    font-weight: 600;
    font-size: .9688rem;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}
.fb-kutu-deger:hover { opacity: .85; }

/* ── Sağ: form kartı ── */
.fb-sag {
    background: var(--surface);
    border-radius: 20px;
    padding: 2rem;
    color: var(--text);
}
@media (min-width: 992px) { .fb-sag { padding: 2.75rem; } }

.fb-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    color: var(--text);
}

.fb-sag-baslik {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    letter-spacing: -.02em;
    text-align: center;
    color: var(--text);
    margin: 0 0 .75rem;
}

.fb-sag-desc {
    color: var(--muted);
    font-size: .9688rem;
    line-height: 1.6;
    text-align: center;
    max-width: 30rem;
    margin: 0 auto 2rem;
}

.fb-durum {
    border-radius: 10px;
    padding: .875rem 1.125rem;
    font-size: .9375rem;
    margin-bottom: 1.5rem;
}
.fb-durum--ok { background: rgba(25, 135, 84, .12); color: #146c43; border: 1px solid rgba(25, 135, 84, .3); }
.fb-durum--hata { background: rgba(220, 53, 69, .1); color: #b02a37; border: 1px solid rgba(220, 53, 69, .3); }

.fb-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125rem 1.25rem;
}
@media (min-width: 576px) { .fb-form { grid-template-columns: 1fr 1fr; } }

.fb-alan { min-width: 0; }
@media (min-width: 576px) { .fb-alan--tam { grid-column: 1 / -1; } }

.fb-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .375rem;
}

.fb-yardim { color: var(--muted); font-size: .7813rem; margin-top: .375rem; }

.fb-not { color: var(--muted); font-size: .8438rem; margin: 0; grid-column: 1 / -1; }

/* Gönder butonu (kaynak projedeki .ju-btn standardı, bölüme özel ad): vurgu zemini, 8px köşe, ok ikonu */
.fb-btn {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.375rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--accent);
    color: var(--on-accent) !important;
    font-family: var(--font-ui);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    transition: filter .2s, background .2s;
}
.fb-btn:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.fb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Honeypot: görsel olarak tamamen gizli, ekran okuyucudan da saklı */
.fb-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ─── Section 5: Blog listesi (bl-) ───────────────────────────────────────────
   Çentikli yuvarlatılmış görsel + sol üstte kategori pili + başlık + özet.
   3'e kadar sabit sıra; fazlası yatay kaydırıcı (JS otomatik döndürür). */

.bl { padding: 0 0 clamp(3rem, 8vh, 5.5rem); background: var(--bg); }
.bl-inner { position: relative; }

.bl-track {
    --bl-gap: 1.75rem;
    display: flex;
    gap: var(--bl-gap);
    margin: 0 -.75rem;
    padding: 1.25rem .75rem .5rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.bl-track::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .bl-track { margin: 0; padding: 1.5rem 0 .5rem; } }

.bl-card {
    flex: 0 0 86%;
    min-width: 0;
    scroll-snap-align: start;
}
@media (min-width: 576px)  { .bl-card { flex-basis: calc((100% - var(--bl-gap)) / 2); } }
@media (min-width: 992px)  { .bl-card { flex-basis: calc((100% - 2 * var(--bl-gap)) / 3); } }
/* 3 ve altı: masaüstünde ortalı sabit sıra */
@media (min-width: 992px)  { .bl-track--sabit { justify-content: center; } }

/* Görsel: 3 köşe yuvarlak, sağ altta sayfa zemini renginde çentik (iki ters kavisle) */
.bl-media {
    --bl-r: 26px;        /* dış köşe */
    --bl-cr: 20px;       /* çentik kavisi */
    --bl-notch-h: 44px;  /* çentik yüksekliği */
    --bl-notch-w: 34%;   /* çentik genişliği */
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    /* Sağ alt köşe düz: o köşeyi zaten sayfa zeminindeki çentik bloğu örter. Yuvarlak kırpılırsa görselin
       kırpma kenarıyla çentiğin kenarı aynı eğride üst üste binip ince gri bir çizgi (AA dikişi) bırakıyordu. */
    border-radius: var(--bl-r) var(--bl-r) 0 var(--bl-r);
    overflow: hidden;
    background: transparent;
    text-decoration: none !important;
}
.bl-media picture { position: absolute; inset: 0; display: block; }
.bl-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.bl-img--bos { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface)); }
.bl-card:hover .bl-img { transform: scale(1.04); }
/* Çentik bloğu (sayfa zemini) */
.bl-media::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: var(--bl-notch-w);
    height: var(--bl-notch-h);
    background: var(--bg);
    border-top-left-radius: var(--bl-cr);
}
/* Ters kavisler: sağ kenarda çentiğin üstü (::before) ve alt kenarda çentiğin solu (.bl-notch) */
.bl-media::before,
.bl-notch {
    content: "";
    position: absolute;
    z-index: 1;
    width: calc(var(--bl-cr) * 2);
    height: calc(var(--bl-cr) * 2);
    border-bottom-right-radius: var(--bl-cr);
    box-shadow: var(--bl-cr) var(--bl-cr) 0 0 var(--bg);
    pointer-events: none;
}
.bl-media::before { right: 0; bottom: var(--bl-notch-h); }
.bl-notch { right: var(--bl-notch-w); bottom: 0; }

.bl-pill {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: 600 .72rem/1 var(--font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.bl-title {
    margin: 1.25rem 0 .6rem;
    font: 600 clamp(1.25rem, 1.6vw, 1.5rem)/1.25 var(--font-display);
    letter-spacing: -.02em;
}
.bl-title a { color: var(--text); text-decoration: none; }
.bl-title a:hover, .bl-title a:focus-visible { color: var(--accent); opacity: 1; }

.bl-text {
    margin: 0;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .bl-track { scroll-behavior: auto; }
    .bl-img { transition: none; }
    .bl-card:hover .bl-img { transform: none; }
}

/* ─── Footer (ft-) — açık zemin; logo · iletişim · linkler · sağ görsel · telif/sosyal · yukarı çık ─────
   Renk/font sistem token'larından (--accent, --text, --muted, --surface, --font-display, --font-ui). */

footer.ft {
    position: relative;
    overflow: hidden;              /* sağ figür mobilde kenardan taşar, kırpılır (referans yapı) */
    margin-top: 0;                 /* üst boşluk sayfa içeriğinden gelir (bölümlerin kendi alt boşluğu) */
    padding: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: .9375rem;
}
.ft-inner {
    position: static;              /* figür ve yukarı çık düğmesi FOOTER'a göre konumlanır */
    max-width: 1320px;
    margin: 0 auto;
    padding: 3.5rem 1.25rem 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "logo"
        "iletisim"
        "menu"
        "gorsel"
        "alt";
    gap: 2.5rem;
}
@media (max-width: 991.98px) {
    /* Mobil: alt bant figüre ayrılır (referanstaki büyük alt boşluk); figür yüksekliğiyle (≈ genişlik × .9) orantılı */
    .ft-inner { padding-bottom: clamp(16rem, 70vw, 21rem); }
}
@media (min-width: 992px) {
    .ft-inner {
        padding: 4.5rem 2.5rem 3rem;
        gap: 3rem 3.5rem;
        /* Üçüncü sütun boş kalır: sağ alttaki figür için pay */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
        grid-template-areas:
            "logo     logo   gorsel"
            "iletisim menu   gorsel"
            "alt      alt    gorsel";
    }
}
/* İçerik figürün ÜSTÜNDE kalır (.ft-alt hariç: yukarı çık düğmesi footer'a göre konumlanmalı) */
.ft-inner > :not(.ft-alt), .ft-alt-sol { position: relative; z-index: 1; }

.ft-logo {
    grid-area: logo;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    color: var(--text);
}
.ft-logo img { display: block; max-height: 64px; width: auto; }
.ft-logo-text { font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -.02em; color: var(--text); }

.ft-iletisim { grid-area: iletisim; }
.ft-addr { margin: 0 0 1rem; font-style: normal; line-height: 1.7; color: var(--text); max-width: 24rem; }
.ft-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ft-contact a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 32px;
    color: var(--text);
    text-decoration: none;
    transition: color .15s;
}
.ft-contact a:hover, .ft-contact a:focus-visible { color: var(--accent); opacity: 1; }
.ft-contact i { color: var(--accent); width: 1.25rem; text-align: center; }

.ft-menu { grid-area: menu; display: grid; gap: 2rem; align-content: start; }
.ft-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2rem; }
.ft-h {
    margin: 0 0 .9rem;
    font: 600 1.05rem/1.25 var(--font-display);
    letter-spacing: -.01em;
    color: var(--text);
}
.ft-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ft-group a { color: var(--text); text-decoration: none; transition: color .15s; }
.ft-group a:hover, .ft-group a:focus-visible { color: var(--accent); opacity: 1; }

/* Sağ figür — lepiantagionidelcaffe.com footer'ıyla birebir yapı:
   <figure> konteynerin dışında, footer'ın sağ alt köşesine demirli (right:0 / bottom:0), içeriğin ARKASINDA;
   masaüstünde sabit 600px yükseklik (genişlik orana göre), mobilde tam genişlik ve 1.25rem sağa taşma. */
.ft-figur {
    position: absolute;
    right: -1.25rem;
    bottom: 0;
    z-index: 0;
    margin: 0;
    width: 74%;
    max-width: 360px;
    pointer-events: none;
}
.ft-figur a { display: block; pointer-events: auto; }
.ft-figur picture, .ft-img { display: block; width: 100%; height: auto; }
@media (min-width: 992px) {
    .ft-figur { right: 0; width: auto; max-width: none; }
    .ft-figur picture, .ft-img { width: auto; height: 600px; }
}

.ft-alt {
    grid-area: alt;
    align-self: end;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}
.ft-alt-sol { display: grid; gap: .75rem; }
.ft-telif { margin: 0; font-size: .875rem; color: var(--muted); }
.ft-social { list-style: none; margin: 0 0 0 -.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.ft-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--text);
    font-size: 1.25rem;
    text-decoration: none;
    transition: color .15s, background .15s;
}
.ft-social a:hover, .ft-social a:focus-visible { color: var(--accent); background: var(--border); opacity: 1; }

/* Yukarı çık: mobilde alt sıranın sağında, masaüstünde footer'ın sağ alt köşesinde (görselin üstünde) */
.ft-top-btn {
    flex: none;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--text);
    color: var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    transition: transform .2s, background .2s, color .2s;
    -webkit-tap-highlight-color: transparent;
}
.ft-top-btn svg { width: 22px; height: 22px; }
.ft-top-btn:hover, .ft-top-btn:focus-visible { background: var(--accent); color: var(--on-accent); transform: translateY(-3px); }
@media (min-width: 992px) {
    /* Footer'ın sağ alt köşesi (figürün üstüne biner) */
    .ft-top-btn { position: absolute; right: 2.5rem; bottom: 3rem; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .ft-top-btn { transition: none; }
    .ft-top-btn:hover { transform: none; }
}

/* ─── Hakkımızda sayfası (hk-page) — Klasik düzen bölümlerine tema tipografisi ────────────
   Bölümler panelden gelir (CorporateAdmin → Bölüm Tipi: Görselli Metin / Sayaç / Özellik / Alıntı / CTA…);
   burada yalnız görünüm: başlık = --font-display, gövde açık ton, görsel/kart köşeleri site yarıçapında. */
.hk-page { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); }
.hk-page .row.mb-5 { margin-bottom: clamp(3rem, 7vw, 6rem) !important; }
.hk-page .row.mb-5:last-child { margin-bottom: 0 !important; }
.hk-page h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--text);
    text-wrap: balance;
}
.hk-page .prose { color: var(--muted); font-size: 1.0625rem; line-height: 1.75; }
.hk-page .prose p:last-child { margin-bottom: 0; }
.hk-page .prose .lead {
    color: var(--accent);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.hk-page .prose strong { color: var(--text); }
.hk-page img.img-fluid { border-radius: 24px; box-shadow: var(--shadow); }
.hk-page .card { border-radius: 20px; background: var(--surface); box-shadow: var(--shadow) !important; }
.hk-page .card h3 { letter-spacing: -.01em; }
.hk-page .card .bi { color: var(--accent) !important; }
.hk-page .sayac-deger { font-family: var(--font-display); letter-spacing: -.04em; line-height: 1; }
.hk-page .blockquote p {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--text);
    text-wrap: balance;
}
.hk-page .blockquote-footer { color: var(--muted); }
.hk-page .rounded-4 {
    border-radius: 28px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), color-mix(in srgb, var(--accent) 3%, var(--surface))) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}
.hk-page .rounded-4 .btn-primary { border-radius: 999px; padding: .75rem 1.75rem; font-weight: 600; }

/* ─── İletişim sayfası (il-) — anasayfa Section 4 (fb-) çerçevesi, çentiksiz ─────────────── */
.fb-section--sayfa {
    -webkit-clip-path: none;
    clip-path: none;
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    margin-top: 2.5rem;
}
.fb-section--sayfa::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(60% 80% at 88% 8%, rgba(255, 255, 255, .14), transparent 70%);
}
.fb-section--sayfa .fb-sol { min-width: 0; }
.il-liste { display: grid; gap: .75rem; }
.il-satir {
    display: flex; gap: .875rem; align-items: flex-start;
    background: rgba(255, 255, 255, .12); border-radius: 12px; padding: .8rem .95rem; min-width: 0;
}
.il-ikon {
    flex: none; width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.05rem;
}
.il-satir > div { min-width: 0; }
.il-satir .fb-kutu-etiket { display: block; margin-bottom: .2rem; }
.il-deger { margin: 0; font-style: normal; color: #fff; font-weight: 600; font-size: .9688rem; line-height: 1.5; overflow-wrap: anywhere; }
.il-deger a, .il-deger span { display: block; color: #fff !important; text-decoration: none !important; }
.il-deger a:hover { opacity: .85; }
.il-sosyal { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.il-sosyal a {
    display: inline-flex; width: 42px; height: 42px; border-radius: 50%; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.05rem; text-decoration: none;
    transition: background .2s, transform .2s;
}
.il-sosyal a:hover, .il-sosyal a:focus-visible { background: #fff; color: var(--accent); transform: translateY(-2px); opacity: 1; }
.il-form .form-control { border-radius: 10px; padding: .7rem .9rem; border-color: var(--border); }
.il-form .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.il-hata { display: block; color: #b02a37; font-size: .8125rem; margin-top: .3rem; }
.il-hata:empty { display: none; }
.il-harita { padding: 0 .5rem clamp(3rem, 6vw, 5rem); }
@media (min-width: 992px) { .il-harita { padding: 0 1rem clamp(3rem, 6vw, 5rem); } }
.il-harita-kart {
    position: relative; border-radius: 28px; overflow: hidden;
    box-shadow: var(--shadow); border: 1px solid var(--border); background: var(--surface);
}
.il-harita-kart iframe { display: block; width: 100%; height: 440px; border: 0; }
.il-harita-btn { position: absolute; left: 1.25rem; bottom: 1.25rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.il-harita-btn .bi { font-size: 1.1rem; }

/* ─── Ürün detay (pd-) — premium düzen ─────────────────────────────────────────
   Sol yarı: dikey küçük resim şeridi + tam görsel (#urunSlider). Sağ yarı: kategori eyebrow'u,
   başlık, puan, fiyat, kısa açıklama, pill aksiyonlar, öne çıkan özellik şeridi. Altta tam
   genişlik sekmeler (Açıklama / Teknik Özellikler / Video), SSS, Benzer Ürünler, Yorumlar.
   Renk/font sistem token'larından (--accent, --on-accent, --font-display, --font-ui). */
.pd-page { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem); }

/* Galeri */
.pd-gallery { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 768px) { .pd-gallery { grid-template-columns: 84px minmax(0, 1fr); gap: 1rem; align-items: start; } }
.pd-gallery--tek { grid-template-columns: 1fr !important; }
.pd-thumbs { display: flex; gap: .6rem; order: 2; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.pd-thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .pd-thumbs { flex-direction: column; order: 0; overflow: visible; max-height: 640px; overflow-y: auto; } }
.pd-thumb {
    flex: none; width: 72px; height: 72px; padding: 0; border-radius: 14px; overflow: hidden;
    border: 2px solid var(--border); background: var(--surface); cursor: pointer;
    transition: border-color .2s, transform .2s;
}
@media (min-width: 768px) { .pd-thumb { width: 84px; height: 84px; } }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb:hover { transform: translateY(-2px); }
.pd-thumb.is-active { border-color: var(--accent); }
.pd-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-thumb--video { display: grid; place-items: center; background: #0f172a; color: #fff; font-size: 1.6rem; }
.pd-main {
    position: relative; border-radius: 24px; overflow: hidden;
    background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border: 1px solid var(--border);
}
.pd-main .carousel-item { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .pd-main .carousel-item { aspect-ratio: 1 / 1; max-height: 640px; } }
.pd-main-link { display: block; width: 100%; height: 100%; }
.pd-main-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.pd-main:hover .pd-main-img { transform: scale(1.03); }
.pd-main-video { width: 100%; height: 100%; display: grid; place-items: center; background: #0f172a; }
.pd-play {
    width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .92); color: var(--accent); font-size: 2.4rem; text-decoration: none;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .35); transition: transform .2s;
}
.pd-play:hover { transform: scale(1.06); opacity: 1; }
.pd-ctrl {
    width: 44px; height: 44px; top: 50%; bottom: auto; transform: translateY(-50%); opacity: 1;
    border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--text); font-size: 1.1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18); transition: background .2s, color .2s;
}
.pd-ctrl.carousel-control-prev { left: 1rem; }
.pd-ctrl.carousel-control-next { right: 1rem; }
.pd-ctrl:hover { background: var(--accent); color: var(--on-accent); opacity: 1; }
.pd-pill--float { position: absolute; top: 1rem; left: 1rem; z-index: 2; }

/* Bilgi sütunu */
.pd-info { max-width: 40rem; }
.pd-kicker {
    display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 .9rem;
    font: 600 .78rem/1.3 var(--font-ui); letter-spacing: .2em; text-transform: uppercase;
    color: var(--accent); text-decoration: none !important;
}
.pd-kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; flex: none; }
.pd-kicker:hover { opacity: .8; }
.pd-title {
    margin: 0 0 .75rem; font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.1; letter-spacing: -.03em; color: var(--text); text-wrap: balance;
}
.pd-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; color: var(--muted); font-size: .875rem; margin-bottom: .9rem; }
.pd-meta strong { color: var(--text); font-weight: 600; }
.pd-stars { display: inline-flex; gap: .15rem; color: #f5a524; font-size: .95rem; }
.pd-stars .bi.is-off { color: color-mix(in srgb, var(--muted) 45%, transparent); }
.pd-rating { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; color: var(--muted); font-size: .875rem; text-decoration: none !important; }
.pd-rating:hover { color: var(--accent); opacity: 1; }
.pd-price { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .25rem 0 1.25rem; }
.pd-price-now { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -.02em; color: var(--text); line-height: 1; }
.pd-price-now small { font-size: .95rem; font-weight: 500; color: var(--muted); margin-left: .35rem; }
.pd-price del { color: var(--muted); font-size: 1rem; }
.pd-kdv { font-size: .8rem; color: var(--muted); }
.pd-pill {
    display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; letter-spacing: .02em;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent);
}
.pd-pill--stok { background: #1d1d1f; color: #fff; }
.pd-desc { color: var(--muted); font-size: 1.0313rem; line-height: 1.7; margin-bottom: 1.5rem; }
.pd-desc p:last-child { margin-bottom: 0; }

/* Aksiyonlar (pill) */
.pd-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.5rem; }
.pd-cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; flex: 1 1 100%; }
.pd-qty { display: inline-flex; align-items: center; height: 54px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.pd-qty-btn { width: 44px; height: 100%; border: 0; background: none; color: var(--text); font-size: 1.25rem; cursor: pointer; border-radius: 999px; }
.pd-qty-btn:hover { color: var(--accent); }
.pd-qty-input { width: 48px; height: 100%; border: 0; background: none; text-align: center; font: 600 1rem var(--font-ui); color: var(--text); -moz-appearance: textfield; }
.pd-qty-input::-webkit-outer-spin-button, .pd-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-qty-input:focus { outline: none; }
.pd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 54px; padding: 0 1.75rem; border-radius: 999px; border: 1px solid transparent;
    font: 600 .95rem/1 var(--font-ui); letter-spacing: .02em; text-decoration: none !important; cursor: pointer;
    transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.pd-btn .bi { font-size: 1.15rem; }
.pd-btn--primary { background: var(--accent); color: var(--on-accent) !important; flex: 1 1 200px; }
.pd-btn--primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); transform: translateY(-1px); opacity: 1; }
.pd-btn--ghost { background: var(--surface); color: var(--text) !important; border-color: var(--border); }
.pd-btn--ghost:hover { border-color: var(--accent); color: var(--accent) !important; opacity: 1; }
.pd-btn--icon { width: 54px; padding: 0; }
.pd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Öne çıkan özellikler (ilk 4 teknik özellik) */
.pd-highlights {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    background: var(--border); border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
}
@media (min-width: 576px) { .pd-highlights { grid-template-columns: repeat(4, 1fr); } }
.pd-hl { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); padding: 1.1rem .75rem; text-align: center; min-width: 0; }
.pd-hl .bi { display: block; font-size: 1.5rem; color: var(--accent); margin-bottom: .5rem; }
.pd-hl-etiket { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.pd-hl-deger { display: block; font-size: .85rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; line-height: 1.35; }

/* Sekmeler */
.pd-tabs { margin-top: clamp(2.5rem, 5vw, 4rem); }
.pd-tabnav { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.pd-tabnav::-webkit-scrollbar { display: none; }
.pd-tabnav .nav-link {
    position: relative; background: none; border: 0; border-radius: 0; padding: .95rem 1.25rem;
    font: 600 .95rem/1 var(--font-ui); color: var(--muted); opacity: 1; white-space: nowrap;
}
.pd-tabnav .nav-link::after {
    content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: -1px; height: 2px;
    background: var(--accent); transform: scaleX(0); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.pd-tabnav .nav-link:hover { background: none; color: var(--text); }
.pd-tabnav .nav-link.active { color: var(--text); font-weight: 600; }
.pd-tabnav .nav-link.active::after { transform: scaleX(1); }
.pd-tabpane { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.pd-prose { max-width: 62rem; color: color-mix(in srgb, var(--text) 78%, var(--muted)); font-size: 1.0313rem; line-height: 1.75; overflow-wrap: anywhere; }
/* Ortak prose: ürün açıklaması (Product/Detail) + blog gövdesi (Blog/Detail .blog-content) — tek kaynak */
.pd-prose h2, .pd-prose h3, .pd-prose h4 {
    font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; color: var(--text);
    font-size: 1.25rem; margin: 1.75rem 0 .6rem;
}
.pd-prose h2 { font-size: 1.45rem; margin-top: 2.25rem; }
.pd-prose h4 { font-size: 1.1rem; }
.pd-prose > :first-child { margin-top: 0; }
.pd-prose p { margin-bottom: 1rem; }
.pd-prose strong { color: var(--text); font-weight: 600; }
.pd-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pd-prose a:hover { opacity: .8; }
.pd-prose ul, .pd-prose ol { padding-left: 1.25rem; margin-bottom: 1.1rem; }
.pd-prose li { margin-bottom: .35rem; }
.pd-prose li::marker { color: var(--accent); }
.pd-prose img { border-radius: 14px; max-width: 100%; height: auto; margin: 1.5rem 0; }
.pd-prose figure { margin: 1.5rem 0; }
.pd-prose figure img { margin: 0; }
.pd-prose figcaption { margin-top: .5rem; font-size: .85rem; color: var(--muted); }
.pd-prose blockquote {
    margin: 1.5rem 0; padding: 1rem 1.25rem; color: var(--text);
    border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0;
    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.pd-prose blockquote p:last-child { margin-bottom: 0; }
.pd-prose hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--border); opacity: 1; }
/* Tablo — teknik özellik kartlarıyla (pd-spec-row) aynı dil: yuvarlak çerçeve, küçük büyük-harf başlık */
.pd-prose table {
    width: 100%; margin: 1.25rem 0 1.5rem; font-size: .95rem; background: var(--surface);
    border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.pd-prose th, .pd-prose td { padding: .8rem 1rem; text-align: left; vertical-align: top; }
.pd-prose thead th { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.pd-prose tbody th, .pd-prose td { border-top: 1px solid var(--border); color: var(--text); }
.pd-prose tbody tr:first-child > * { border-top: 0; }
.pd-prose thead + tbody tr:first-child > * { border-top: 1px solid var(--border); }
.pd-prose td:first-child, .pd-prose tbody th { font-weight: 600; }
.pd-prose td p:last-child { margin: 0; }
@media (max-width: 575.98px) {
    .pd-prose table { font-size: .875rem; }
    .pd-prose th, .pd-prose td { padding: .6rem .7rem; }
}

/* Teknik özellikler — duyarlı özellik ızgarası (dl) */
.pd-spec { display: grid; grid-template-columns: 1fr; gap: .75rem 1rem; margin: 0; max-width: 62rem; }
@media (min-width: 768px) { .pd-spec { grid-template-columns: 1fr 1fr; } }
.pd-spec-row {
    display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: .25rem 1rem; align-items: start;
    padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
@media (max-width: 575.98px) { .pd-spec-row { grid-template-columns: 1fr; gap: .15rem; } }
.pd-spec-row dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-top: .2rem; }
.pd-spec-row dd { margin: 0; font-weight: 600; color: var(--text); font-size: .95rem; overflow-wrap: anywhere; }
.pd-spec-row dd p:last-child { margin: 0; }
.pd-video { border-radius: 20px; overflow: hidden; max-width: 62rem; }

/* Alt bölümler */
.pd-section { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--border); }
.pd-section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; margin: 0 0 1.25rem; }
.pd-benzer .py-5 { padding-top: 0 !important; padding-bottom: 0 !important; }
.pd-faq .accordion-item { border: 1px solid var(--border); border-radius: 14px !important; margin-bottom: .6rem; overflow: hidden; background: var(--surface); }
.pd-faq .accordion-button { font-weight: 600; background: var(--surface); box-shadow: none; padding: 1rem 1.25rem; color: var(--text); }
.pd-faq .accordion-button:not(.collapsed) { color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.pd-faq .accordion-body { color: var(--muted); line-height: 1.7; }

/* Yorumlar */
.pd-reviews-head { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center; margin-bottom: 1rem; }
@media (min-width: 768px) { .pd-reviews-head { grid-template-columns: 1fr auto; } }
.pd-score {
    display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-radius: 20px;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid var(--border);
}
.pd-score-num { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; letter-spacing: -.04em; line-height: 1; }
.pd-review { padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.pd-review-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: .35rem; }
.pd-review-head strong { font-weight: 600; }
.pd-review-head time { color: var(--muted); font-size: .8rem; }
.pd-review p { margin: .5rem 0 0; color: color-mix(in srgb, var(--text) 78%, var(--muted)); line-height: 1.65; }
.pd-review-form { margin-top: 1.5rem; }
.pd-review-form summary { list-style: none; display: inline-flex; }
.pd-review-form summary::-webkit-details-marker { display: none; }
.pd-review-form .form-control { border-radius: 10px; padding: .6rem .85rem; }

/* ─── Blog detay (bd-) — ürün detayı (pd-) sistemini paylaşır: başlık bloğu pd-kicker/pd-title/pd-meta/pd-desc,
   gövde pd-prose, SSS pd-section+pd-faq. Burada yalnız sayfaya özel parçalar var. ───────────────────────── */
.bd-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.bd-head .pd-title { margin-bottom: 1rem; }
.bd-head .pd-desc { margin-bottom: 0; }
.bd-cover {
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); border-radius: 24px; overflow: hidden;
    border: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.bd-cover-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.bd-aside { padding: 1.25rem 1.25rem .5rem; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
@media (min-width: 992px) { .bd-aside { position: sticky; top: calc(var(--header-h) + var(--ann-h) + 1.5rem); } }
.bd-aside .pd-kicker { margin-bottom: .35rem; }
.bd-aside-list { list-style: none; margin: 0; padding: 0; }
.bd-aside-list li + li { border-top: 1px solid var(--border); }
.bd-aside-item { display: flex; gap: .85rem; align-items: center; padding: .8rem 0; color: var(--text); text-decoration: none !important; }
.bd-aside-item:hover { opacity: 1; }
.bd-aside-item:hover .bd-aside-baslik { color: var(--accent); }
.bd-aside-thumb {
    flex: none; width: 60px; height: 60px; border-radius: 14px; object-fit: cover;
    border: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.bd-aside-thumb--bos { display: grid; place-items: center; color: var(--accent); font-size: 1.3rem; }
.bd-aside-body { min-width: 0; }
.bd-aside-baslik { display: block; font-weight: 600; font-size: .92rem; line-height: 1.35; transition: color .2s; }
.bd-aside-tarih { display: block; margin-top: .25rem; font-size: .78rem; color: var(--muted); }