/* ---------- 1. Token'lar ---------- */
:root {
    --color-background: #faf8f4;
    --color-surface: #fff;
    --color-surface-muted: #f3efe8;
    --color-ink: #1c1815;
    --color-ink-soft: #6c635a;
    --color-ink-faint: #9c9389;
    --color-line: #e8e2d8;
    --color-line-strong: #d7cfc2;
    --color-accent: oklch(0.60 0.13 39);
    --color-accent-hover: oklch(0.53 0.13 38);
    --color-accent-soft: oklch(0.94 0.03 50);
    --color-accent-ink: #fff;
    --color-sale: oklch(0.58 0.16 28);
    --color-star: oklch(0.74 0.13 75);
    --font-display: "Cormorant Garamond",Georgia,"Times New Roman",serif;
    --font-sans: "Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
    --text-xs: .75rem;
    --text-sm: .8125rem;
    --text-base: .9375rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.625rem;
    --radius-sm: 4px;
    --radius: 7px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(28,24,21,.05);
    --shadow: 0 6px 20px rgba(28,24,21,.07);
    --shadow-lg: 0 18px 48px rgba(28,24,21,.12);
    --container-max: 1320px;
    --header-height: 76px;
    --section-gap: 72px;
    --ease: cubic-bezier(.4,0,.2,1);
    --transition: .25s var(--ease);
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--color-ink);
    --bs-body-bg: var(--color-background);
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-ink);
    background: var(--color-background);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition)
}

a:hover {
    color: var(--color-accent)
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-display);
    color: var(--color-ink);
    font-weight: 600 !important;
    line-height: 1.12;
    font-size: 2.4rem;
}

::selection {
    background: var(--color-accent-soft);
    color: var(--color-ink)
}

.theme-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline:auto;padding-inline:24px}

.section {
    padding-block:var(--section-gap)}

.section--tight {
    padding-block: calc(var(--section-gap)*.55)
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px
}

.section-head .section-eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 8px
}

.section-head .section-title {
    font-size: clamp(1.8rem,3.4vw,2.7rem);
    margin: 0
}

.section-head .section-link {
    flex: none;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--color-ink-soft);
    border-bottom: 1px solid var(--color-line-strong);
    padding-bottom: 3px
}

.section-head .section-link:hover {
    color: var(--color-accent);
    border-color: var(--color-accent)
}

/* ---------- 2. Scroll reveal (.reveal) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease),transform .6s var(--ease)
}

.reveal.in {
    opacity: 1;
    transform: none
}

/* ---------- 3. Buton override (Bootstrap .btn ezilir) ---------- */
.btn {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: 0;
    --bs-btn-border-radius: var(--radius);
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 26px;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color var(--transition),color var(--transition),border-color var(--transition),transform var(--transition)
}

.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: none
}

.btn:active {
    transform: translateY(1px)
}

.btn-primary {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff
}

.btn-primary:hover,.btn-primary:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-ink)
}

.btn-outline-plum {
    background: transparent;
    border-color: var(--color-ink);
    color: var(--color-ink)
}

.btn-outline-plum:hover,.btn-outline-plum:focus-visible {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff
}

.btn-accent {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-ink)
}

.btn-accent:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff
}

.btn-lg {
    min-height: 56px;
    padding: 0 34px;
    font-size: var(--text-base)
}

.btn-sm {
    min-height: 40px;
    padding: 0 18px;
    font-size: var(--text-xs)
}

.btn-icon {
    min-height: 0;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    border-color: transparent;
    color: var(--color-ink);
    position: relative
}

.btn-icon:hover {
    background: var(--color-surface-muted);
    color: var(--color-accent)
}

.btn-icon svg {
    width: 21px;
    height: 21px
}
.toggler-button{
    background: var(--color-surface-muted);
}
/* ---------- 4. Header zone ---------- */
header[data-sw-zone="header"] {
    background: var(--color-surface)
}

.announcement-bar {
    background: var(--color-ink);
    color: #f3ede4;
    font-size: var(--text-xs);
    letter-spacing: .08em;
    text-align: center;
    padding: 9px 16px;
    margin: 0
}

.announcement-bar strong {
    color: #fff;
    font-weight: 700
}

.announcement-bar .sep {
    opacity: .4;
    margin-inline:14px}

.main-header {
    border-bottom: 1px solid var(--color-line)
}

.header-inner {
    display: flex;
    align-items: center;
    min-height: var(--header-height)
}

.header-inner>.col-lg-6 {
    flex: 1 1 auto;
    display: flex;
    justify-content: center
}


.site-logo {
    display: inline-flex;
    align-items: center;
    flex: none
}

.site-logo img {
    height: 32px;
    width: auto;
    max-width: 180px
}

.header-search {
    flex: 1 1 auto;
    max-width: 560px;
    position: relative
}

.header-search input {
    width: 100%;
    height: 48px;
    padding: 0 50px 0 20px;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-ink);
    background: var(--color-surface-muted);
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill)
}

.header-search input::placeholder {
    color: var(--color-ink-faint)
}

.header-search input:focus {
    outline: none;
    background: var(--color-surface);
    border-color: var(--color-line-strong)
}

.header-search button {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    color: #fff;
    cursor: pointer
}

.header-search button:hover {
    background: var(--color-accent)
}

.header-search button svg {
    width: 18px;
    height: 18px
}
.action-item {
    position: relative
}

.header-action-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-surface)
}

.header-burger {
    display: none;
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    cursor: pointer
}

/* ---------- 5. Kategori Menüsü (Ecom-Nav) ---------- */
nav[data-sw-module="ecom-nav"] {
    position: relative
}

nav[data-sw-module="ecom-nav"] .sw-nav-toggler {
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
    display: none;
}

.cat-nav-bar {
    border-top: 1px solid var(--color-line);
    background: var(--color-surface)
}

.owl-carousel.owl-theme.hero-owl,nav[data-sw-module="ecom-nav"] .sw-nav-desktop {
    min-width: 0
}

nav[data-sw-module="ecom-nav"] .sw-nav-desktop {
    align-items: center
}

nav[data-sw-module="ecom-nav"] .sw-nav-desktop>.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 52px
}


nav[data-sw-module="ecom-nav"] .navbar-nav>.nav-item::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 6px
}
nav[data-sw-module="ecom-nav"] .navbar-nav>.nav-item {
    position: relative;
    height: 52px;
    display: flex;
    align-items: center;
}
nav[data-sw-module="ecom-nav"] .navbar-nav>.nav-item:first-child a {
    padding-left: 0 !important;
}
nav[data-sw-module="ecom-nav"] .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-ink);
    border-bottom: 2px solid transparent;
    height: 52px
}

nav[data-sw-module="ecom-nav"] .nav-item:hover>.nav-link {
    color: var(--color-accent);
    border-color: var(--color-accent)
}

nav[data-sw-module="ecom-nav"] .ecn-dd-arrow,nav[data-sw-module="ecom-nav"] .ecn-sub-arrow {
    font-size: 10px;
    transition: transform var(--transition)
}

nav[data-sw-module="ecom-nav"] .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 6px 0 0;
    min-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    list-style: none;
    z-index: 10
}

nav[data-sw-module="ecom-nav"] .nav-item.dropdown:hover>.dropdown-menu.ecn-lvl-2 {
    display: block
}

nav[data-sw-module="ecom-nav"] .dropdown-item {
    display: block;
    padding: 9px 12px;
    font-size: var(--text-sm);
    color: var(--color-ink);
    border-radius: var(--radius-sm)
}

nav[data-sw-module="ecom-nav"] .dropdown-item:hover {
    background: var(--color-surface-muted);
    color: var(--color-accent)
}

nav[data-sw-module="ecom-nav"] .dropdown-submenu {
    position: relative
}

nav[data-sw-module="ecom-nav"] .dropdown-submenu::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    width: 6px
}

nav[data-sw-module="ecom-nav"] .dropdown-submenu>.dropdown-menu.ecn-lvl-3 {
    top: 0;
    left: 100%;
    margin: 0 0 0 6px
}

nav[data-sw-module="ecom-nav"] .dropdown-submenu:hover>.dropdown-menu.ecn-lvl-3 {
    display: block
}

nav[data-sw-module="ecom-nav"] .sw-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px,86vw);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--transition);
    z-index: 1050;
    overflow-y: auto;
    /* padding: 20px; */
}

nav[data-sw-module="ecom-nav"] .sw-nav-drawer.sw-open {
    transform: translateX(0)
}

nav[data-sw-module="ecom-nav"] .sw-nav-accordion {
    list-style: none;
    margin: 0;
    padding: 0
}
.all-cats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-ink);
    cursor: pointer
}

.cat-trigger-btn {
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
    font-size: 20px
}

/* ---------- 6. Hero Slider (data-sw-module="hero-slider") ---------- */
.hero-slider-section {
    padding-block:28px}

.hero {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface-muted);
    min-width: 0
}

.hero-slide {
    display: flex;
    align-items: stretch;
    min-height: min(620px,calc(100vh - var(--header-height) - 96px))
}

.hero-slide.hero-fullscreen {
    display: block;
    position: relative;
    min-height: 520px
}

.hero-copy {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px clamp(32px,5vw,88px);
    background: var(--color-surface-muted);
    min-width: 0
}

.hero-copy .eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 20px
}

.hero-copy h2 {
    font-size: clamp(2.6rem,5vw,4.4rem);
    line-height: 1.04;
    margin: 0 0 22px;
    max-width: 13ch
}

.hero-copy h2 em {
    font-style: italic;
    color: var(--color-accent)
}

.hero-copy p {
    font-size: var(--text-md);
    color: var(--color-ink-soft);
    max-width: 42ch;
    margin: 0 0 36px
}

.hero-copy .hero-slider-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px
}

.hero-media {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
    background: var(--color-line);
    min-width: 0
}

.hero-media .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%
}

.hero-media .ph {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg,var(--color-surface-muted),var(--color-surface-muted) 12px,#ece6dc 12px,#ece6dc 24px);
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-faint);
    font-size: var(--text-sm)
}

.hero-badge {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.1;
    transform: rotate(-8deg)
}

.hero-badge b {
    display: block;
    font-size: 1.7rem;
    font-weight: 700
}

.owl-carousel.owl-theme.hero-owl .owl-nav {
    position: absolute;
    bottom: 36px;
    left: clamp(32px,5vw,88px);
    margin: 0;
    display: flex;
    gap: 10px
}

.owl-carousel.owl-theme.hero-owl .owl-nav button.owl-prev,.owl-carousel.owl-theme.hero-owl .owl-nav button.owl-next {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin-right: 10px;
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1.5px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    transition: all var(--transition);
    line-height: 50px;
}

.owl-carousel.owl-theme.hero-owl .owl-nav button:hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff
}

.owl-carousel.owl-theme.hero-owl .owl-nav button span {
    display: none
}

.owl-carousel.owl-theme.hero-owl .owl-dots {
    position: absolute;
    bottom: 52px;
    right: clamp(32px,5vw,88px);
    display: flex;
    gap: 8px
}

.owl-carousel.owl-theme.hero-owl .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    margin: 0;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(28,24,21,.15)
}

.owl-carousel.owl-theme.hero-owl .owl-dots .owl-dot.active span {
    background: var(--color-accent);
    border-color: var(--color-accent);
    width: 26px;
    border-radius: var(--radius-pill)
}
.owl-nav.disabled {
    display: none !important;
}
/* ---------- 7. Advanced-Paragraph — güven şeridi ---------- */
.trust-bar {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    background: #e8e2d800;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    background: var(--color-surface)
}

.trust-item i {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-radius: var(--radius-pill);
    font-size: 18px
}

.trust-item .eyebrow {
    display: block;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--color-ink)
}

.trust-item .text-soft {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-ink-soft)
}

/* ---------- 8. Card modülü — banner ızgaraları ---------- */
.banner-grid {
    display: grid;
    gap: 24px
}

.banner-grid--2 {
    grid-template-columns: repeat(2,1fr)
}

.banner-grid--3 {
    grid-template-columns: repeat(3,1fr)
}

.banner-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-line);
    isolation: isolate;
    min-height: 260px
}

.banner-card .ph {
    aspect-ratio: 16/10;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.banner-grid--3 .banner-card .ph {
    aspect-ratio: 4/5
}

.banner-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(20,16,13,0) 30%,rgba(20,16,13,.62) 100%);
    z-index: 1
}

.banner-card .cap {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 28px 30px;
    color: #fff
}

.banner-card .cap .text-soft {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.82);
    margin-bottom: 8px
}

.banner-card .cap .name {
    display: block;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(1.5rem,2.4vw,2.1rem);
    margin: 0 0 14px
}

.banner-card .cap .cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff
}

.banner-card .cap .cat-btn::after {
    content: "→";
    transition: transform var(--transition)
}

.banner-card:hover .cat-btn::after {
    transform: translateX(5px)
}

/* ---------- 9. Ürün Slider (data-sw-server="product-slider") ---------- */
.sw-server-slider {
    min-width: 0
}

.sw-prod-slider-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px
}

.sw-prod-slider-header h2,.sw-prod-slider-header .sw-title {
    font-size: clamp(1.8rem,3.4vw,2.7rem);
    margin: 0
}

.sw-prod-nav {
    display: flex;
    gap: 10px
}

.sw-prod-nav .sw-prod-nav-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1.5px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition);
    font-size: 0
}

.sw-prod-nav .sw-prod-nav-btn:hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff
}

.sw-prod-nav .sw-prod-nav-btn::after {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    display: inline-block
}

.sw-prod-nav .sw-ps-prev::after {
    transform: rotate(-135deg)
}

.sw-prod-nav .sw-ps-next::after {
    transform: rotate(45deg)
}

.sw-prod-tab-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px
}

.sw-prod-tab-nav .sw-tab-btn {
    padding: 10px 20px;
    border: 1.5px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer
}

.sw-prod-tab-nav .sw-tab-btn.active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff
}

.sw-prod-tab-panel {
    display: none
}

.sw-prod-tab-panel.active {
    display: block
}

.sw-prod-slide {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition),box-shadow var(--transition),transform var(--transition)
}

.sw-prod-slide:hover {
    border-color: var(--color-line-strong);
    box-shadow: var(--shadow);
    transform: translateY(-3px)
}

.sw-prod-img-wrap {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--color-surface-muted)
}

.sw-prod-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease)
}

.sw-prod-slide:hover .sw-prod-img {
    transform: scale(1.04)
}

.sw-prod-img-ph {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg,var(--color-surface-muted),var(--color-surface-muted) 12px,#ece6dc 12px,#ece6dc 24px);
    background-repeat: no-repeat
}

.sw-prod-tags {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sw-prod-tags .sw-prod-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 5px 9px;
    border-radius: var(--radius-sm);
    line-height: 1;
    background: var(--color-ink);
    color: #fff
}

.sw-prod-discount {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 5px 9px;
    border-radius: var(--radius-sm);
    line-height: 1;
    background: var(--color-sale);
    color: #fff
}

.sw-prod-tags+.sw-prod-discount,.sw-prod-discount+.sw-prod-tags {
    top: 38px
}

.sw-prod-img-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sw-prod-cart-btn,.sw-prod-fav-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.92);
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    font-size: 16px;
    transition: all var(--transition)
}

.sw-prod-cart-btn:hover,.sw-prod-fav-btn:hover {
    background: var(--color-ink);
    color: #fff;
    transform: scale(1.06)
}

.sw-prod-body {
    padding: 16px 16px 18px
}

.sw-prod-brand {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    margin-bottom: 5px
}

.sw-prod-name {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 10px;
    color: var(--color-ink);
    display: -webkit-box;
    -webkit-line-clamp: var(--sw-name-lines,2);
    line-clamp: var(--sw-name-lines,2);
    -webkit-box-orient: vertical;
    overflow: hidden
}

.sw-prod-name:hover {
    color: var(--color-accent)
}

.sw-prod-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
    color: var(--color-star);
    font-size: 12px
}

.sw-prod-stars .far {
    color: var(--color-line-strong)
}

.sw-prod-prices {
    display: flex;
    align-items: baseline;
    gap: 9px
}

.sw-prod-price {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-ink)
}

.sw-prod-old {
    font-size: var(--text-sm);
    color: var(--color-ink-faint);
    text-decoration: line-through
}

/* ürün grid/slider yerleşimi (görsel QA amaçlı, backend gerçek satır/kolon sayısını kendi yönetir) */
.owl-carousel .sw-prod-row-group {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.owl-carousel.owl-theme.product-owl .owl-stage-outer {
    padding-block:6px}

.owl-carousel.owl-theme.product-owl .owl-nav button.owl-prev,.owl-carousel.owl-theme.product-owl .owl-nav button.owl-next {
    position: absolute;
    top: -68px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1.5px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    transition: all var(--transition)
}

.owl-carousel.owl-theme.product-owl .owl-nav button.owl-prev {
    right: 56px
}

.owl-carousel.owl-theme.product-owl .owl-nav button.owl-next {
    right: 0
}

.owl-carousel.owl-theme.product-owl .owl-nav button:hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff
}

.owl-carousel.owl-theme.product-owl .owl-nav button span {
    display: none
}

.owl-carousel.owl-theme.product-owl .owl-nav button::after {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor
}

.owl-carousel.owl-theme.product-owl .owl-nav .owl-prev::after {
    transform: rotate(-135deg)
}

.owl-carousel.owl-theme.product-owl .owl-nav .owl-next::after {
    transform: rotate(45deg)
}

/* ---------- 10. Bülten (contact-form varyantı) ---------- */
.newsletter {
    background: var(--color-ink);
    color: #f3ede4;
    border-radius: var(--radius-lg);
    padding: clamp(40px,6vw,72px);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center
}

.newsletter h2 {
    color: #fff;
    font-size: clamp(2rem,3.6vw,3rem);
    margin: 0 0 14px
}

.newsletter p {
    color: rgba(243,237,228,.72);
    max-width: 44ch;
    margin: 0
}

.newsletter-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.newsletter-form input {
    flex: 1 1 240px;
    height: 56px;
    padding: 0 22px;
    font-size: var(--text-base);
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.18);
    border-radius: var(--radius)
}

.newsletter-form input::placeholder {
    color: rgba(243,237,228,.5)
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-accent)
}

/* ---------- 11. Footer zone ---------- */
footer[data-sw-zone="footer"] {
    background: var(--color-surface);
    border-top: 1px solid var(--color-line);
    padding-top: 64px
}

.footer-top {
    display: grid;
    grid-template-columns: 1.4fr repeat(3,1fr) 1.2fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--color-line)
}

.footer-brand .site-logo {
    margin-bottom: 18px
}

.footer-about {
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    max-width: 34ch;
    margin-bottom: 22px
}

.soc-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    transition: all var(--transition)
}

.soc-btn:hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff
}

.footer-col-title {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin-bottom: 18px
}

ul[data-sw-module="list-menu"] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px
}

ul[data-sw-module="list-menu"] a {
    font-size: var(--text-sm);
    color: var(--color-ink-soft)
}

ul[data-sw-module="list-menu"] a:hover {
    color: var(--color-accent)
}

.foot-contact li a {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--color-ink-soft)
}

.foot-contact li a i {
    flex: none;
    color: var(--color-accent);
    margin-top: 2px;
    font-size: 16px
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block:26px;flex-wrap: wrap
}

.footer-payments {
    order: 2;
    margin-inline:auto}

.foot-signature {
    order: 3
}

.footer-copy {
    font-size: var(--text-xs);
    color: var(--color-ink-faint);
    margin: 0
}

.foot-signature p {
    font-size: var(--text-xs);
    color: var(--color-ink-faint);
    margin: 0
}

.foot-signature a {
    color: var(--color-ink);
    font-weight: 700
}

.footer-payments {
    display: flex;
    align-items: center;
    gap: 8px
}

.footer-payments .pay-chip {
    height: 26px;
    padding: 0 10px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--color-ink-soft);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm)
}

/* ---------- 12. Responsive ---------- */
@media (max-width: 1100px) {
    .footer-top {
        grid-template-columns:1fr 1fr 1fr
    }

    .footer-brand,.footer-contact {
        grid-column: 1/-1
    }
}

@media (max-width: 992px) {
    .header-inner .col-lg-6 {
        order:3;
        flex-basis: 100%;
        max-width: none
    }

    .header-inner {
        flex-wrap: wrap;
        padding-block:14px;gap: 16px
    }

    nav[data-sw-module="ecom-nav"] .sw-nav-desktop {
        display: none
    }

    .header-burger,.cat-trigger-btn {
        display: grid;
        place-items: center
    }

    .hero-slide {
        flex-direction: column
    }

    .hero-media {
        min-height: 320px
    }

    .newsletter {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .trust-bar {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 768px) {
    :root {
        --section-gap:52px
    }

    .banner-grid--3 {
        grid-template-columns: 1fr
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }
}

@media (max-width: 560px) {
    .banner-grid--2 {
        grid-template-columns:1fr
    }

    .trust-bar {
        grid-template-columns: 1fr
    }

    .footer-top {
        grid-template-columns: 1fr 1fr
    }

    .hero-copy {
        padding: 44px 24px
    }
}

/* ---------- 12. İç sayfa üst başlık (Page Header — About/Contact vb.) ---------- */
.page-header{padding-block:56px;background:var(--color-surface-muted);text-align:center}
.page-header .eyebrow{display:block;font-size:var(--text-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);margin-bottom:14px}
.page-header h1{font-size:clamp(2.2rem,4vw,3.2rem);margin:0 0 14px}
.page-header p{color:var(--color-ink-soft);max-width:56ch;margin-inline:auto}

/* ---------- 13. İstatistik Sayacı (stat-counter) ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat-card{text-align:center;padding:32px 20px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg)}
.stat-card i{display:inline-grid;place-items:center;width:46px;height:46px;color:var(--color-accent);background:var(--color-accent-soft);border-radius:var(--radius-pill);font-size:19px;margin-bottom:14px}
.stat-card b{font-family:var(--font-display);font-size:2.4rem;font-weight:700;color:var(--color-ink)}
.stat-card [data-sc="suffix"]{font-family:var(--font-display);font-size:2.4rem;font-weight:700;color:var(--color-accent)}
.stat-card [data-sc="text"]{display:block;margin-top:6px;font-size:var(--text-sm);color:var(--color-ink-soft)}

/* ---------- 14. Hikaye + görsel (about) ---------- */
.story-section{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.story-copy .eyebrow{display:block;font-size:var(--text-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);margin-bottom:14px}
.story-copy h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin:0 0 18px}
.story-copy p{color:var(--color-ink-soft);margin:0 0 16px}
.story-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--color-line)}
.story-media img{width:100%;height:100%;object-fit:cover}
.stamp{position:absolute;left:24px;bottom:24px;background:var(--color-surface);border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow-lg);max-width:220px}
.stamp b{display:block;font-family:var(--font-display);font-size:2.2rem;color:var(--color-accent);line-height:1}
.stamp span{display:block;font-size:var(--text-xs);color:var(--color-ink-soft);margin-top:6px}

/* ---------- 15. Değerler (advanced-paragraph üçlüsü) ---------- */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value-card{padding:32px 26px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg)}
.value-card i{display:inline-grid;place-items:center;width:46px;height:46px;color:var(--color-accent);background:var(--color-accent-soft);border-radius:var(--radius-pill);font-size:19px;margin-bottom:16px}
.value-card .eyebrow{display:block;font-family:var(--font-sans);font-weight:700;font-size:var(--text-base);color:var(--color-ink);margin-bottom:8px;text-transform:none;letter-spacing:0}
.value-card .text-soft{display:block;font-size:var(--text-sm);color:var(--color-ink-soft)}

/* ---------- 16. İletişim kartları + form + harita ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:56px}
.contact-card{display:flex;flex-direction:column;gap:10px;padding:28px 24px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);transition:border-color var(--transition),box-shadow var(--transition)}
a.contact-card:hover{border-color:var(--color-line-strong);box-shadow:var(--shadow)}
.contact-card i{display:inline-grid;place-items:center;width:42px;height:42px;color:var(--color-accent);background:var(--color-accent-soft);border-radius:var(--radius-pill);font-size:18px}
.contact-card .cc-heading{font-weight:700;font-size:var(--text-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink)}
.contact-card .cc-text{font-size:var(--text-sm);color:var(--color-ink-soft)}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-form label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-soft);margin-bottom:8px}
.contact-form .form-control{width:100%;height:50px;padding:0 18px;font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-ink);
    background:var(--color-surface-muted);border:1.5px solid transparent;border-radius:var(--radius);margin:0}
.contact-form textarea.form-control{height:auto;padding:14px 18px}
.contact-form .form-control:focus{outline:none;background:var(--color-surface);border-color:var(--color-line-strong)}
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-line)}
.map-wrap iframe{display:block;width:100%}

@media (max-width:992px){
    .stat-grid{grid-template-columns:1fr 1fr}
    .story-section{grid-template-columns:1fr}
    .values-grid{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr 1fr}
    .contact-layout{grid-template-columns:1fr}
}
@media (max-width:560px){
    .stat-grid{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
}

/* ---------- 17. Responsive ---------- */
@media (max-width:1100px){
    .footer-top{grid-template-columns:1fr 1fr 1fr}
    .footer-brand,.footer-contact{grid-column:1/-1}
}
@media (max-width:992px){
    .header-inner .col-lg-6{order:3;flex-basis:100%;max-width:none}
    .header-inner{flex-wrap:wrap;padding-block:14px;gap:16px}
    nav[data-sw-module="ecom-nav"] .sw-nav-desktop{display:none}
    .header-burger,.cat-trigger-btn{display:grid;place-items:center}
    .hero-slide{flex-direction:column}
    .hero-media{min-height:320px}
    .newsletter{grid-template-columns:1fr;gap:28px}
    .trust-bar{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
    :root{--section-gap:52px}
    .banner-grid--3{grid-template-columns:1fr}
    .section-head{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:560px){
    .banner-grid--2{grid-template-columns:1fr}
    .trust-bar{grid-template-columns:1fr}
    .footer-top{grid-template-columns:1fr 1fr}
    .hero-copy{padding:44px 24px}
}