/* =======================================================
   ENTEGRE BURADA — Anasayfa (statik tasarım)
   ======================================================= */

:root {
    --brand: #00a3ff;
    --brand-dark: #0086d6;
    --brand-soft: #e6f5ff;
    --ink: #0d1526;
    --ink-2: #1a2438;
    --text: #263042;
    --muted: #6b7688;
    --line: #e4e8ef;
    --bg: #f5f6f9;
    --white: #fff;
    --ok: #12a150;
    --warn: #e08600;
    --danger: #e03131;
    --radius: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(13, 21, 38, .06), 0 1px 3px rgba(13, 21, 38, .05);
    --shadow-md: 0 6px 20px rgba(13, 21, 38, .08);
    --shadow-lg: 0 18px 45px rgba(13, 21, 38, .14);
    --container: 1360px;
    --stagger: .1s;
    /* mega menü kolonlarının birbirini takip etme gecikmesi */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* iOS Safari (ve iOS Chrome) dar bloklardaki yazıları kendiliğinden
       büyütür; masaüstü tarayıcının cihaz taklidinde bu OLMAZ. Kapatılmazsa
       aynı genişlikte cihazda yazılar taşar, kartlar farklı yükseklikte
       görünür. Sitenin cihazda başka görünmesinin ana sebebi buydu. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* sayfa uçlarındaki lastik (overscroll) beyaz alanı engeller */
    overscroll-behavior-y: none;
    background: var(--ink);
}

body {
    overscroll-behavior-y: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button,
input,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

svg {
    width: 20px;
    height: 20px;
    flex: none;
}

ul {
    list-style: none;
}

[hidden] {
    display: none !important;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    /* Kırılma noktası yok: boşluk genişlikle birlikte akar. */
    padding-left: clamp(14px, 4vw, 20px);
    padding-right: clamp(14px, 4vw, 20px);
}

/* ---------- buton ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    font-weight: 650;
    font-size: 14px;
    white-space: nowrap;
    transition: background .18s, transform .18s;
}

.btn:hover {
    background: var(--brand-dark);
}

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

.btn svg {
    width: 17px;
    height: 17px;
}

.btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .35);
    color: #fff;
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
}

.btn--sm {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
}

.btn--full {
    width: 100%;
}

.btn.is-disabled {
    background: #c9d2e0;
    pointer-events: none;
}

/* =======================================================
   TOP BAR
   ======================================================= */
.topbar {
    background: var(--ink);
    color: #aeb8c9;
    font-size: clamp(11px, 2.9vw, 12.5px);
}

.topbar__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* sabit height değil: içerik sığmazsa kırpılmak yerine büyüsün */
    min-height: 38px;
    /* DİKKAT: bu eleman .container ile aynı düğümde. `padding` kısayolu
       container'ın yatay boşluğunu sıfırlar — hep uzun yazım kullan. */
    padding-top: 5px;
    padding-bottom: 5px;
    gap: clamp(10px, 3vw, 20px);
}

.topbar__note strong {
    color: #fff;
}

.topbar__links {
    display: flex;
    gap: clamp(8px, 2.6vw, 22px);
}

.topbar__links a:hover {
    color: #fff;
}

/* =======================================================
   HEADER
   ======================================================= */
.header {
    background: var(--white);
    border-bottom: 1px solid var(--line);
}

.header__in {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2.6vw, 28px);
    height: 92px;
}

/* =======================================================
   LOGO
   Tek SVG sembol; renkleri değişkenlerle yönetiliyor.
   ======================================================= */
.logo {
    display: flex;
    align-items: center;
    flex: none;
    --logo-ink: #082c5e;
    --logo-blue: #00a3ff;
    --logo-line: #dde3ea;
}

.logo__svg {
    /* iki clamp aynı eğriyi izler -> oran (660/150) her genişlikte sabit */
    width: clamp(107px, 33.6vw, 198px);
    height: clamp(24.3px, 7.64vw, 45px);
    display: block;
    /* Güvenlik ağı: yazı tipi yüklenmeden önce metin viewBox'ı aşarsa
       kırpılmak yerine taşsın (kapsayıcıda yeterli boşluk var). */
    overflow: visible;
}

/* not: renk/tipografi sembolün içinde inline style ile tanımlı,
   çünkü <use> gölge ağacına dışarıdan CSS seçicisi ulaşamaz —
   sadece kalıtsal değerler ve CSS değişkenleri geçer. */

/* koyu zemin (footer, mobil menü başlığı) */
.logo--light {
    --logo-ink: #ffffff;
    --logo-blue: #00a3ff;
    --logo-line: rgba(255, 255, 255, .22);
}

/* search */
.searchwrap {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 720px;
    z-index: 70;
}

form.search {
    width: 100%;
    /* daralabilsin: flex öğelerinin varsayılan min-width:auto değeri
       kutuyu min-content genişliğinde (442px) kilitliyor ve 900-1080px
       arasında header'ı ekran dışına taşırıyordu */
    min-width: 0;
    display: flex;
    align-items: center;
    height: 50px;
    background: var(--white);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .16s, box-shadow .16s;
}

.searchwrap.is-open form.search {
    border-color: var(--brand);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 0 0 4px rgba(0, 163, 255, .18);
}

.search__clear {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--muted);
    flex: none;
    margin-right: 4px;
}

.search__clear:hover {
    background: var(--bg);
    color: var(--ink);
}

.search__clear svg {
    width: 15px;
    height: 15px;
}

.search__cat {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
    border-right: 1px solid var(--line);
    height: 100%;
}

.search__cat select {
    appearance: none;
    border: 0;
    background: transparent;
    max-width: 42vw;
    height: 100%;
    padding: 0 34px 0 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.search__catic {
    position: absolute;
    right: 12px;
    width: 14px;
    height: 14px;
    color: var(--muted);
    pointer-events: none;
}

form.search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0 0 0 16px;
    font-size: 14px;
}

form.search input::placeholder {
    color: #97a0b0;
}

/* tarayıcının kendi temizleme çarpısını gizle — kendi butonumuz var */
form.search input::-webkit-search-cancel-button,
form.search input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.search__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 100%;
    padding: 0 clamp(16px, 2vw, 24px);
    background: var(--ink);
    color: #fff;
    font-weight: 650;
    transition: background .18s;
}

.search__btn:hover {
    background: var(--brand);
}

/* =======================================================
   LIVE SEARCH
   ======================================================= */
.ls {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 2px solid var(--brand);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 80;
    animation: lsIn .18s ease;
}

@keyframes lsIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

.ls[hidden] {
    display: none;
}

.ls__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 650;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--line);
    background: #fbfcfe;
}

.ls__hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 11.5px;
    color: #9aa4b5;
}

@media (max-width: 720px) {
    .ls__hint {
        display: none;
    }
}

.ls__list {
    max-height: min(58vh, 430px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.lsi {
    display: flex;
    align-items: center;
    gap: clamp(10px, 3vw, 13px);
    padding: clamp(10px, 2.6vw, 11px) clamp(13px, 4vw, 16px);
    border-bottom: 1px solid var(--line);
    transition: background .14s;
}

.lsi:last-child {
    border-bottom: 0;
}

.lsi:hover,
.lsi.is-active {
    background: var(--brand-soft);
}

.lsi__thumb {
    width: clamp(46px, 12vw, 54px);
    height: clamp(46px, 12vw, 54px);
    flex: none;
    border-radius: 8px;
    background: linear-gradient(160deg, #f7f9fc, #eaeef5);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
}

.lsi__thumb svg {
    width: 30px;
    height: 30px;
    color: #b8c2d3;
}

.lsi__info {
    flex: 1;
    min-width: 0;
}

.lsi__title {
    display: block;
    font-size: 13.6px;
    font-weight: 620;
    color: var(--ink);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lsi__title mark {
    background: #fff2b8;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.lsi__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 11.8px;
    color: var(--muted);
    flex-wrap: wrap;
}

.lsi__meta i {
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.lsi__meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c3cbd9;
}

.lsi__meta .st {
    font-weight: 650;
}

.lsi__meta .st.is-in {
    color: var(--ok);
}

.lsi__meta .st.is-low {
    color: var(--warn);
}

.lsi__meta .st.is-out {
    color: var(--danger);
}

.lsi__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.lsi__price {
    text-align: right;
    line-height: 1.2;
}

.lsi__price s {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
}

.lsi__price b {
    font-size: 15px;
    font-weight: 750;
    color: var(--ink);
    white-space: nowrap;
}

.lsi__add {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 13px;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
    transition: background .16s, transform .12s;
}

.lsi__add svg {
    width: 15px;
    height: 15px;
}

.lsi__add:hover {
    background: var(--brand-dark);
}

.lsi__add:active {
    transform: scale(.95);
}

.lsi__add.is-done {
    background: var(--ok);
}

.lsi__add:disabled {
    background: #e6e9ef;
    color: var(--muted);
    cursor: not-allowed;
}

.ls__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    background: #fbfcfe;
    border-top: 1px solid var(--line);
    font-size: 13px;
    font-weight: 650;
    color: var(--brand);
}

.ls__foot svg {
    width: 15px;
    height: 15px;
    transition: transform .18s;
}

.ls__foot:hover svg {
    transform: translateX(4px);
}

.ls__empty {
    padding: 34px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
}

.ls__empty b {
    display: block;
    color: var(--ink);
    font-size: 15px;
    margin-bottom: 5px;
}

.ls__empty a {
    color: var(--brand);
    font-weight: 650;
}

/* iskelet (yükleniyor) */
.ls__skel {
    padding: 12px 16px;
}

.ls__skel span {
    display: block;
    height: 54px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #f1f3f7 25%, #e7eaf1 50%, #f1f3f7 75%);
    background-size: 400% 100%;
    animation: shimmer 1.1s infinite;
}

@keyframes shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

/* telefon */
.header__contact {
    display: flex;
    gap: 22px;
    flex: none;
}

.hcall {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hcall__ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    display: grid;
    place-items: center;
    transition: background .18s, color .18s;
}

.hcall:hover .hcall__ic {
    background: var(--brand);
    color: #fff;
}

.hcall--wa .hcall__ic {
    background: #e8f8ee;
    color: #12a150;
}

.hcall--wa:hover .hcall__ic {
    background: #12a150;
    color: #fff;
}

.hcall__txt {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.hcall__txt small {
    font-size: 11.5px;
    color: var(--muted);
}

.hcall__txt b {
    font-size: 15px;
    color: var(--ink);
    letter-spacing: .2px;
}

/* aksiyonlar */
.header__acts {
    display: flex;
    gap: 6px;
    flex: none;
}

.iconbtn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: clamp(46px, 13.5vw, 62px);
    padding: 6px 0;
    border-radius: var(--radius);
    font-size: clamp(10.5px, 2.9vw, 11.5px);
    font-weight: 600;
    color: var(--text);
    transition: background .18s, color .18s;
}

.iconbtn span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iconbtn:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

.badge {
    position: absolute;
    top: 0;
    right: 10px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    display: grid;
    place-items: center;
    padding: 0 5px;
}

.burger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    place-items: center;
}

/* =======================================================
   NAV + MEGA MENU
   ======================================================= */
.nav {
    background: var(--ink);
    position: sticky;
    top: 0;
    z-index: 60;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

.nav__in {
    padding: 0 clamp(14px, 4vw, 20px);
}

.nav__list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

/* not: .nav sticky olduğu için konumlandırma bloğu odur —
   mega menü böylece tüm ekran genişliğine yayılır */
.nav__item {
    position: static;
}

.nav__item>a {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 50px;
    padding: 0 10px;
    color: #d7dde8;
    font-size: 13.4px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .16s, background .16s;
}

.nav__item>a .cv {
    width: 13px;
    height: 13px;
    opacity: .55;
    transition: transform .2s;
}

.nav__item:hover>a {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.nav__item:hover>a .cv {
    transform: rotate(180deg);
    opacity: 1;
}

.nav__item--hot>a {
    color: #ffd166;
}

.nav__item--hot>a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffd166;
    margin-right: 2px;
}

/* mega */
.mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* kolonlar kapalıyken translateX(38px) ile sağda bekliyor; bu offset
       sayfayı yatayda kaydırılabilir yapıyordu. Panel kendi içinde kırpar. */
    overflow: hidden;
    background: var(--white);
    border-top: 3px solid var(--brand);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 50;
}

.has-mega:hover .mega,
.has-mega:focus-within .mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega__in {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 300px;
    gap: 32px;
    padding: 28px clamp(14px, 4vw, 20px) 30px;
}

/* kolonlar sağdan sola, sırayla girer.
   --stagger değerini değiştirerek gecikmeyi ayarlayabilirsin */
.mega__col,
.mega__promo {
    opacity: 0;
    transform: translateX(38px);
    transition: opacity .34s ease, transform .42s cubic-bezier(.22, .8, .3, 1);
}

.has-mega:hover .mega__col,
.has-mega:hover .mega__promo,
.has-mega:focus-within .mega__col,
.has-mega:focus-within .mega__promo {
    opacity: 1;
    transform: none;
}

.has-mega:hover .mega__col:nth-child(1) {
    transition-delay: calc(var(--stagger) * 0);
}

.has-mega:hover .mega__col:nth-child(2) {
    transition-delay: calc(var(--stagger) * 1);
}

.has-mega:hover .mega__col:nth-child(3) {
    transition-delay: calc(var(--stagger) * 2);
}

.has-mega:hover .mega__col:nth-child(4) {
    transition-delay: calc(var(--stagger) * 3);
}

.has-mega:hover .mega__promo {
    transition-delay: calc(var(--stagger) * 4);
}

.mega__col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mega__col h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--brand);
    font-weight: 700;
    margin-bottom: 10px;
}

.mega__col a {
    font-size: 13.5px;
    color: var(--text);
    padding: 5px 0;
    border-radius: 4px;
    transition: color .14s, padding-left .14s;
}

.mega__col a:hover {
    color: var(--brand);
    padding-left: 5px;
}

/* alt kategori ürün sayısı */
.mega__col a i {
    font-style: normal;
    font-size: 11.5px;
    color: #a9b3c2;
    margin-left: 4px;
}

.mega__col a:hover i {
    color: var(--brand);
    opacity: .7;
}

.mega__promo {
    background: linear-gradient(150deg, var(--ink), #16243f);
    border-radius: var(--radius);
    padding: 22px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.mega__promo .tag {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    background: var(--brand);
    padding: 4px 9px;
    border-radius: 5px;
}

.mega__promo h5 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.mega__promo p {
    font-size: 12.5px;
    color: #a9b4c6;
}

.mega__promo .btn {
    align-self: flex-start;
    margin-top: 4px;
}

/* =======================================================
   HERO
   ======================================================= */
.hero {
    padding: 26px 0 0;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
}

/* slider */
.slider {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ink);
    min-height: clamp(320px, 40vw, 380px);
}

.slider__track {
    display: flex;
    height: 100%;
    transition: transform .55s cubic-bezier(.5, .05, .2, 1);
}

.slide {
    flex: 0 0 100%;
    min-height: clamp(320px, 40vw, 380px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* alt boşluk kontrol satırını (ok + pagination) boş bırakır */
    padding: clamp(30px, 5vw, 46px) clamp(22px, 6vw, 52px) clamp(70px, 9.5vw, 86px);
    position: relative;
    overflow: hidden;
}

.slide--1 {
    background: radial-gradient(900px 420px at 88% 20%, #1b45a8 0%, transparent 60%), linear-gradient(120deg, #0d1526, #16233d);
}

/* fotoğraflı slayt: metin tarafı koyu, sağa doğru görsel açılıyor */
.slide--2 {
    background:
        linear-gradient(100deg, #0b1220 8%, rgba(11, 18, 32, .94) 38%, rgba(11, 18, 32, .55) 62%, rgba(11, 18, 32, .2) 100%),
        url('img/slide-2.webp') center right / cover no-repeat;
}

.slide--3 {
    background: radial-gradient(900px 420px at 88% 20%, #6b3a12 0%, transparent 60%), linear-gradient(120deg, #0d1526, #241a2e);
}

.slide__body {
    max-width: 560px;
    color: #fff;
    position: relative;
    z-index: 2;
}

.slide__tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.slide h2 {
    font-size: clamp(25px, 4.4vw, 40px);
    line-height: 1.15;
    letter-spacing: -.8px;
    font-weight: 800;
    margin-bottom: 14px;
}

.slide p {
    font-size: clamp(13.5px, 1.7vw, 15px);
    color: #b9c3d4;
    max-width: 480px;
    margin-bottom: 26px;
}

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

.slide__art {
    position: absolute;
    right: -30px;
    bottom: -40px;
    color: rgba(255, 255, 255, .07);
    pointer-events: none;
}

.slide__art svg {
    width: clamp(230px, 38vw, 340px);
    height: clamp(230px, 38vw, 340px);
}

/* kontrol satırı: solda pagination, sağda oklar — aynı hizada.
   İkisi de aynı --ctrl-h yüksekliğinde ve aynı bottom değerinde
   olduğu için dikey eksende birebir ortalanırlar. */
.slider {
    /* --ctrl-x, .slide yatay padding'i ile birebir aynı eğri olmalı;
       yoksa noktalar ile metin hizası kayar. */
    --ctrl-h: clamp(34px, 4.2vw, 38px);
    --ctrl-b: clamp(18px, 2.7vw, 24px);
    --ctrl-x: clamp(22px, 6vw, 52px);
}

.slider__nav {
    position: absolute;
    top: auto;
    bottom: var(--ctrl-b);
    width: var(--ctrl-h);
    height: var(--ctrl-h);
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    display: grid;
    place-items: center;
    backdrop-filter: blur(6px);
    transition: background .18s, border-color .18s;
    z-index: 4;
}

.slider__nav:hover {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .4);
}

.slider__nav svg {
    width: 18px;
    height: 18px;
}

.slider__nav--prev {
    right: calc(var(--ctrl-x) + var(--ctrl-h) + 8px);
}

.slider__nav--prev svg {
    transform: rotate(90deg);
}

.slider__nav--next {
    right: var(--ctrl-x);
}

.slider__nav--next svg {
    transform: rotate(-90deg);
}

.slider__dots {
    position: absolute;
    left: var(--ctrl-x);
    bottom: var(--ctrl-b);
    height: var(--ctrl-h);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
}

.slider__dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .32);
    transition: width .25s, background .25s;
}

.slider__dots button.is-active {
    width: 26px;
    border-radius: 6px;
    background: #fff;
}

/* finder */
.finder {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--shadow-sm);
}

.finder h3 {
    font-size: 17px;
    color: var(--ink);
    font-weight: 750;
}

.finder__sub {
    font-size: 12.8px;
    color: var(--muted);
    margin-top: -8px;
}

.fld {
    position: relative;
    display: block;
}

.fld span {
    display: block;
    font-size: 11.5px;
    font-weight: 650;
    color: var(--muted);
    margin-bottom: 5px;
}

.fld select {
    appearance: none;
    width: 100%;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfcfe;
    padding: 0 34px 0 13px;
    font-size: 13.5px;
    font-weight: 550;
    cursor: pointer;
    transition: border-color .16s;
}

.fld select:hover,
.fld select:focus {
    border-color: var(--brand);
    outline: 0;
}

.fld svg {
    position: absolute;
    right: 13px;
    bottom: 15px;
    width: 14px;
    height: 14px;
    color: var(--muted);
    pointer-events: none;
}

.finder__foot {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-top: 1px dashed var(--line);
    padding-top: 14px;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
}

.finder__foot svg {
    color: var(--brand);
    width: 22px;
    height: 22px;
}

.finder__foot a {
    color: var(--brand);
    font-weight: 650;
}

.finder__foot a:hover {
    text-decoration: underline;
}

/* =======================================================
   TRUST
   ======================================================= */
.trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 20px;
}

.trust li {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--white);
    padding: 18px 22px;
}

.trust svg {
    width: 26px;
    height: 26px;
    color: var(--brand);
}

.trust b {
    display: block;
    font-size: 14px;
    color: var(--ink);
}

.trust span {
    font-size: 12.5px;
    color: var(--muted);
}

/* =======================================================
   SECTION
   ======================================================= */
.sec {
    margin-top: clamp(28px, 4.4vw, 44px);
}

/* son bölüm ile footer arasında nefes payı */
main {
    padding-bottom: clamp(36px, 5.5vw, 56px);
}

.sec__head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.sec__head h2 {
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -.3px;
    color: var(--ink);
}

.sec__all {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 650;
    color: var(--brand);
}

.sec__all svg {
    width: 15px;
    height: 15px;
    transition: transform .18s;
}

.sec__all:hover svg {
    transform: translateX(3px);
}

.tabs {
    display: flex;
    gap: 6px;
    margin-left: 8px;
}

.tab {
    height: 32px;
    padding: 0 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid var(--line);
    background: var(--white);
    transition: .16s;
}

.tab:hover {
    color: var(--brand);
    border-color: #c9d7fb;
}

.tab.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* =======================================================
   BRANDS
   ======================================================= */
.brands {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.brand {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 14px;
    text-align: center;
    transition: .18s;
}

.brand b {
    display: block;
    font-size: 14.5px;
    color: var(--ink);
    font-weight: 700;
}

.brand span {
    font-size: 12px;
    color: var(--muted);
}

.brand:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* =======================================================
   PRODUCT GRID
   ======================================================= */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 2.4vw, 16px);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.card:hover {
    border-color: #cdd9f7;
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.card__flag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 4px 9px;
    border-radius: 5px;
    color: #fff;
    background: var(--ink);
}

.card__flag--new {
    background: var(--brand);
}

.card__flag--sale {
    background: var(--danger);
}

.card__flag--hot {
    background: var(--warn);
}

/* Oran kutusu padding-top ile kuruluyor (aspect-ratio ile değil):
   Safari'de flex öğesi üzerindeki aspect-ratio içerik boyutuna yenilebiliyor
   ve görsel kutunun dışına taşıyordu. padding-top yöntemi her tarayıcıda
   aynı çalışır. isolation, mix-blend-mode'un kutudan sızmasını engeller —
   WebKit'te blend uygulanan çocuk overflow:hidden sınırını aşabiliyor. */
.card__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    flex: none;
    background: linear-gradient(160deg, #f7f9fc, #eef1f6);
    border-bottom: 1px solid var(--line);
}

.card__thumb::before {
    content: "";
    display: block;
    padding-top: 75%;
    /* 4:3 */
}

/* görselsiz ürün ikonu — kutuda ortalanır (transform hover için serbest kalsın) */
.card__thumb>svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 74px;
    height: 74px;
    color: #c3cbd9;
    transition: transform .25s, color .25s;
}

.card:hover .card__thumb svg {
    transform: scale(1.06);
    color: #a9b6cd;
}

/* fotoğraflı kart — kısayol yerine dört kenar ayrı ayrı yazılıyor;
   inset kısayolu Safari 14.1'den önce desteklenmiyor */
.card__thumb img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    padding: 6px;
    transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}

.card:hover .card__thumb img {
    transform: scale(1.05);
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: clamp(10px, 2.8vw, 14px);
    flex: 1;
}

.card__cat {
    font-size: 11.5px;
    font-weight: 650;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.card h3 {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 620;
    color: var(--ink);
    min-height: 39px;
}

.card h3 a:hover {
    color: var(--brand);
}

.card__sku {
    font-size: 11.8px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.card__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.2px;
    font-weight: 600;
    margin-top: 2px;
}

.card__stock::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.card__stock.is-in {
    color: var(--ok);
}

.card__stock.is-low {
    color: var(--warn);
}

.card__stock.is-out {
    color: var(--muted);
}

.card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.card__price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.card__price s {
    font-size: 12.5px;
    color: var(--muted);
}

.card__price b {
    font-size: clamp(15px, 4vw, 18px);
    color: var(--ink);
    font-weight: 750;
    letter-spacing: -.3px;
}

.card__add {
    width: clamp(34px, 9vw, 40px);
    height: clamp(34px, 9vw, 40px);
    border-radius: var(--radius);
    background: var(--brand-soft);
    color: var(--brand);
    display: grid;
    place-items: center;
    transition: .18s;
}

.card__add:hover {
    background: var(--brand);
    color: #fff;
}

/* =======================================================
   PROMO
   ======================================================= */
.promos {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 16px;
}

.promo {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 30px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 190px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}

.promo:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.promo--a {
    background: linear-gradient(130deg, #00a3ff, #0062a3);
}

.promo--b {
    background: linear-gradient(130deg, #16233d, #0d1526);
}

.promo--c {
    background: linear-gradient(130deg, #0f7357, #0a4a3a);
}

.promo__tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .18);
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 20px;
}

.promo h3 {
    font-size: 23px;
    line-height: 1.25;
    font-weight: 780;
    letter-spacing: -.4px;
}

.promo p {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .78);
    max-width: 320px;
}

.promo__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 13.5px;
}

.promo__cta svg {
    width: 16px;
    height: 16px;
    transition: transform .18s;
}

.promo:hover .promo__cta svg {
    transform: translateX(4px);
}

/* =======================================================
   CHIPS
   ======================================================= */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.chip {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text);
    transition: .16s;
}

.chip:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

/* =======================================================
   FOOTER
   ======================================================= */
.footer {
    background: var(--ink);
    color: #97a3b6;
    font-size: 13.2px;
}

.footer__top {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: clamp(24px, 3.6vw, 34px) clamp(18px, 2.6vw, 34px);
    padding-top: clamp(32px, 5vw, 48px);
    padding-bottom: clamp(26px, 4vw, 40px);
}

.footer__brand p {
    margin: 16px 0 18px;
    line-height: 1.7;
    max-width: 330px;
}

.footer__contact {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer__contact a {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-weight: 650;
    font-size: 15px;
}

.footer__contact svg {
    width: 17px;
    height: 17px;
    color: var(--brand);
}

.footer__col {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer__col h4 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}

.footer__col a:hover {
    color: #fff;
    padding-left: 3px;
}

.footer__col a {
    transition: .14s;
}

.footer__seo {
    padding-top: 26px;
    padding-bottom: 30px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.footer__seo h5 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #66718a;
    margin-bottom: 10px;
    font-weight: 700;
}

.footer__seo p {
    font-size: 12.5px;
    line-height: 2;
    color: #5f6a80;
}

.footer__seo a:hover {
    color: #fff;
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer__bottom-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    /* sabit height, dar ekranda satırlar sarınca içeriği kırpıyordu */
    min-height: 62px;
    /* .container ile aynı düğüm — kısayol değil, uzun yazım. */
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 12.5px;
    flex-wrap: wrap;
}

.pays {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(5px, 1.8vw, 8px);
}

/* rozetler 320px'e kadar tek satırda kalsın diye ölçüler akışkan */
.pays span {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 5px;
    padding: 4px clamp(7px, 2.4vw, 10px);
    font-size: clamp(9.5px, 2.6vw, 10.5px);
    font-weight: 700;
    letter-spacing: clamp(.3px, .15vw, .6px);
    color: #8b97ab;
    white-space: nowrap;
}

/* =======================================================
   MOBİL MENÜ (DRAWER)
   ======================================================= */
.mask {
    position: fixed;
    inset: 0;
    background: rgba(9, 14, 26, .55);
    backdrop-filter: blur(2px);
    z-index: 90;
    opacity: 0;
    transition: opacity .25s;
}

.mask[hidden] {
    display: none;
}

.mask.is-on {
    opacity: 1;
}

.drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(360px, 88vw);
    background: var(--white);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateX(-102%);
    transition: transform .32s cubic-bezier(.3, .8, .3, 1);
    box-shadow: var(--shadow-lg);
}

.drawer.is-open {
    transform: none;
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background: var(--ink);
    flex: none;
}

.drawer__close {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    display: grid;
    place-items: center;
}

.drawer__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.dacc {
    border-bottom: 1px solid var(--line);
}

.dacc__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 18px;
    font-size: 14.5px;
    font-weight: 650;
    color: var(--ink);
    text-align: left;
}

.dacc__btn svg {
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: transform .25s;
    flex: none;
}

.dacc.is-open .dacc__btn {
    color: var(--brand);
}

.dacc.is-open .dacc__btn svg {
    transform: rotate(180deg);
    color: var(--brand);
}

.dacc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
    background: #fafbfd;
}

.dacc.is-open .dacc__panel {
    grid-template-rows: 1fr;
}

.dacc__inner {
    overflow: hidden;
}

.dacc__grp {
    padding: 12px 18px 14px;
    border-top: 1px solid var(--line);
}

.dacc__grp h4 {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--brand);
    margin-bottom: 8px;
}

.dacc__grp a {
    display: block;
    padding: 7px 0;
    font-size: 13.6px;
    color: var(--text);
    /* mobilde de sağdan sola sıralı giriş */
    opacity: 0;
    transform: translateX(20px);
}

.dacc.is-open .dacc__grp a {
    animation: dSlide .34s cubic-bezier(.22, .8, .3, 1) forwards;
}

@keyframes dSlide {
    to {
        opacity: 1;
        transform: none;
    }
}

.drawer__foot {
    flex: none;
    border-top: 1px solid var(--line);
    padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fafbfd;
}

.drawer__foot>a {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.drawer__foot>a svg {
    width: 17px;
    height: 17px;
    color: var(--brand);
}

.drawer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 4px;
}

.drawer__links a {
    font-size: 12.5px;
    color: var(--muted);
}

body.no-scroll {
    overflow: hidden;
}

/* =======================================================
   KATEGORİ SAYFASI
   ======================================================= */
.main--cat {
    padding-top: 26px;
}

/* breadcrumb */
.crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.8px;
    color: var(--muted);
    margin-bottom: 18px;
}

.crumb a {
    color: var(--muted);
    transition: color .15s;
}

.crumb a:hover {
    color: var(--brand);
}

.crumb span {
    color: #cbd3df;
}

.crumb b {
    color: var(--ink);
    font-weight: 650;
}

/* başlık */
.cattitle {
    font-size: clamp(22px, 3.2vw, 28px);
    font-weight: 780;
    color: var(--ink);
    letter-spacing: -.7px;
    margin-bottom: 2px;
}

/* araç çubuğu */
.toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0 22px;
    position: sticky;
    top: 46px;
    z-index: 40;
    background: var(--bg);
    padding: 10px 0;
}

.toolbar__search {
    flex: 1;
    max-width: 520px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .16s, box-shadow .16s;
}

.toolbar__search:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(0, 163, 255, .18);
}

.toolbar__search>svg {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex: none;
}

.toolbar__search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: none;
    font-size: 14px;
    color: var(--ink);
}

.toolbar__search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.toolbar__go {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--muted);
    flex: none;
    transition: background .16s, color .16s;
}

.toolbar__go:hover {
    background: var(--brand);
    color: #fff;
}

.toolbar__go svg {
    width: 15px;
    height: 15px;
}

.toolbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.toolbar__count {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

.toolbar__count b {
    color: var(--ink);
    font-weight: 700;
}

.toolbar__sort {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 14px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.toolbar__sort>span {
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
}

.toolbar__sort select {
    appearance: none;
    border: 0;
    outline: 0;
    background: none;
    font-size: 13.6px;
    font-weight: 650;
    color: var(--ink);
    padding-right: 20px;
    cursor: pointer;
}

.toolbar__sort>svg {
    position: absolute;
    right: 13px;
    width: 14px;
    height: 14px;
    color: var(--muted);
    pointer-events: none;
}

/* sayfalama */
.pg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 34px;
}

.pg__nums {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.pg__num,
.pg__arrow {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 650;
    display: grid;
    place-items: center;
    transition: .16s;
}

a.pg__num:hover,
a.pg__arrow:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.pg__gap {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 40px;
    color: var(--muted);
    font-weight: 650;
}

.pg__num.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.pg__arrow svg {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
}

.pg__arrow--next svg {
    transform: rotate(-90deg);
}

.pg__arrow.is-disabled {
    opacity: .35;
}

/* =======================================================
   FORM ALANLARI (üyelik + hesap ortak)
   ======================================================= */
.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
    margin-bottom: 7px;
}

.field label span {
    font-weight: 500;
    color: var(--muted);
}

.field__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.field__top a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand);
}

.field__top a:hover {
    text-decoration: underline;
}

.field input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 14.5px;
    color: var(--ink);
    outline: 0;
    transition: border-color .16s, box-shadow .16s;
}

.field input::placeholder {
    color: #9aa4b5;
}

.field input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(0, 163, 255, .18);
}

.field__hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

.field__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 20px;
    font-size: 13.2px;
    line-height: 1.55;
    color: var(--text);
    cursor: pointer;
}

/* onay kutusu — native görünümü gizleyip kendi kutumuzu çiziyoruz,
   böylece her tarayıcıda aynı görünür */
.check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.check__box {
    flex: none;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border: 1.5px solid #c2cbd9;
    border-radius: 5px;
    background: var(--white);
    display: grid;
    place-items: center;
    transition: background .14s, border-color .14s;
}

.check__box svg {
    width: 12px;
    height: 12px;
    color: #fff;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .14s, transform .14s;
}

.check:hover .check__box {
    border-color: var(--brand);
}

.check input:checked+.check__box {
    background: var(--brand);
    border-color: var(--brand);
}

.check input:checked+.check__box svg {
    opacity: 1;
    transform: none;
}

.check input:focus-visible+.check__box {
    box-shadow: 0 0 0 4px rgba(0, 163, 255, .25);
}

.check__txt {
    min-width: 0;
}

.check a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* form uyarı kutusu */
.notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 13.4px;
    line-height: 1.65;
}

.notice svg {
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.notice a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.notice--error {
    background: #fdecec;
    color: #a52121;
}

.notice--error svg {
    color: var(--danger);
}

.notice--success {
    background: #e6f6ed;
    color: #10603a;
}

.notice--success svg {
    color: var(--ok);
}

.notice--info {
    background: var(--brand-soft);
    color: #0b5b8a;
}

/* buton yükleniyor durumu */
.btn.is-loading,
.btn[aria-busy="true"] {
    pointer-events: none;
    opacity: .85;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ebspin .6s linear infinite;
    flex: none;
}

/* koyu yazılı butonlarda */
.btn--ghost .spinner,
.wabtn .spinner {
    border-color: rgba(13, 21, 38, .2);
    border-top-color: currentColor;
}

@keyframes ebspin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation-duration: 1.6s;
    }
}

/* gönderimi tamamlanan form gizlenir */
form.is-done>*:not(.notice) {
    display: none;
}

/* yasal metin penceresi */
.legal {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(9, 14, 26, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .22s;
}

.legal.is-open {
    opacity: 1;
}

.legal__card {
    width: 100%;
    max-width: 660px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform: translateY(12px);
    transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}

.legal.is-open .legal__card {
    transform: none;
}

.legal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.legal__title {
    font-size: 16.5px;
    font-weight: 720;
    color: var(--ink);
}

.legal__close {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--muted);
    flex: none;
}

.legal__close:hover {
    background: var(--bg);
    color: var(--ink);
}

.legal__body {
    padding: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text);
}

.legal__body p {
    margin-bottom: 12px;
}

.legal__body h2,
.legal__body h3 {
    color: var(--ink);
    margin: 18px 0 8px;
    font-size: 16px;
}

.legal__body ul,
.legal__body ol {
    margin: 0 0 12px 20px;
    /* genel sıfırlamada list-style:none var, burada geri açıyoruz */
    list-style: revert;
    padding-left: 4px;
}

.legal__body ul {
    list-style: disc;
}

.legal__body ol {
    list-style: decimal;
}

.legal__body li::marker {
    color: var(--brand);
}

.legal__body li {
    margin-bottom: 6px;
}

/* ayarlardan gelen logo görseli */
.logo__img {
    display: block;
    width: auto;
    max-height: clamp(24.3px, 7.64vw, 45px);
}

/* =======================================================
   ÜYELİK SAYFALARI
   ======================================================= */
.main--auth {
    padding-top: 26px;
    padding-bottom: 20px;
}

.auth {
    max-width: 460px;
    margin: 22px auto 0;
}

.auth__card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.auth__card h1 {
    font-size: 24px;
    font-weight: 760;
    color: var(--ink);
    letter-spacing: -.5px;
}

.auth__lead {
    font-size: 13.6px;
    line-height: 1.65;
    color: var(--muted);
    margin: 7px 0 24px;
}

.auth .btn--lg {
    height: 50px;
    margin-top: 4px;
}

.auth__alt {
    text-align: center;
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--muted);
}

.auth__alt a {
    color: var(--brand);
    font-weight: 650;
}

.auth__alt a:hover {
    text-decoration: underline;
}

/* aktivasyon mailini tekrar gönderme paneli */
.resend {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed var(--line);
}

.resend h2 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 5px;
}

.resend>p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 14px;
}

/* =======================================================
   HESAP SAYFALARI
   ======================================================= */
.acc {
    display: grid;
    grid-template-columns: 258px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 20px;
}

.acc__side {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: sticky;
    top: 70px;
}

.acc__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--line);
    background: #fbfcfe;
}

.acc__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14.5px;
    font-weight: 750;
    line-height: 1;
    flex: none;
}

/* avatar hariç — aksi hâlde avatarın grid ortalaması eziliyordu */
.acc__user>span:not(.acc__avatar) {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

.acc__user b {
    font-size: 14px;
    color: var(--ink);
}

.acc__user small {
    font-size: 12.2px;
    color: var(--muted);
}

.acc__nav {
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.acc__nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 9px;
    font-size: 13.8px;
    font-weight: 600;
    color: var(--text);
    transition: background .14s, color .14s;
}

.acc__nav a svg {
    width: 17px;
    height: 17px;
    color: var(--muted);
}

.acc__nav a:hover {
    background: var(--bg);
    color: var(--ink);
}

.acc__nav a.is-active {
    background: var(--brand-soft);
    color: var(--brand);
}

.acc__nav a.is-active svg {
    color: var(--brand);
}

.acc__out {
    margin-top: 4px;
    border-top: 1px solid var(--line);
    border-radius: 0 !important;
    padding-top: 14px !important;
    color: var(--danger) !important;
}

.acc__out svg {
    width: 15px !important;
    height: 15px !important;
    color: var(--danger) !important;
}

.acc__main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* panel */
.panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
}

.panel--flush {
    padding: 0;
    overflow: hidden;
}

.panel h2 {
    font-size: 16.5px;
    font-weight: 720;
    color: var(--ink);
    margin-bottom: 20px;
}

.panel__foot {
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

/* bilgi listesi */
.deflist {
    display: flex;
    flex-direction: column;
}

.deflist li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13.8px;
}

.deflist li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.deflist span {
    color: var(--muted);
}

.deflist b {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 700;
}

/* durum etiketi */
.pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 20px;
    font-size: 11.8px;
    font-weight: 650;
    font-style: normal;
    white-space: nowrap;
}

.pill--ok,
.pill.is-done {
    background: #e6f6ed;
    color: #12703c;
}

.pill.is-prep {
    background: #fff3e0;
    color: #a35c00;
}

.pill.is-ship {
    background: var(--brand-soft);
    color: var(--brand);
}

.pill.is-cancel {
    background: #fdecec;
    color: #b32020;
}

/* siparişler */
.orders {
    display: flex;
    flex-direction: column;
}

.order {
    display: grid;
    grid-template-columns: 1.4fr .9fr .8fr .9fr 1.1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
    transition: background .14s;
}

.order:last-child {
    border-bottom: 0;
}

.order:hover {
    background: #fbfcfe;
}

.order__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.order__col small {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.order__col b {
    font-size: 13.8px;
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.order__col span {
    font-size: 13.4px;
    color: var(--text);
}

.order__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 650;
    color: var(--brand);
    white-space: nowrap;
}

.order__link svg {
    width: 15px;
    height: 15px;
    transition: transform .18s;
}

.order__link:hover svg {
    transform: translateX(3px);
}

/* arşivde aramayı temizle */
.toolbar__clear {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--muted);
    flex: none;
    transition: background .14s, color .14s;
}

.toolbar__clear:hover {
    background: var(--bg);
    color: var(--danger);
}

.toolbar__clear svg {
    width: 13px;
    height: 13px;
}

/* alt kategori kutucukları */
.subcats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.subcat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .16s, box-shadow .16s;
}

.subcat:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.subcat span {
    font-size: 13.8px;
    font-weight: 650;
    color: var(--ink);
}

.subcat i {
    font-style: normal;
    font-size: 11.8px;
    color: var(--muted);
    white-space: nowrap;
}

/* menüde aktif kategori */
.nav__item.is-active>a {
    color: #fff;
}

/* .nav__item position:static olduğu için ::after konumlanamaz;
   alt çizgiyi inset gölgeyle veriyoruz. */
.nav__item.is-active>a {
    box-shadow: inset 0 -2px 0 var(--brand);
}

/* =======================================================
   BLOG — LİSTE
   ======================================================= */
.pagelead {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
    margin-top: 8px;
}

.posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 24px);
}

.post {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.post:hover {
    border-color: #cfd8e6;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.post__thumb {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--bg);
}

.post__thumb::before {
    content: "";
    display: block;
    padding-top: 56.25%;
    /* 16:9 */
}

.post__thumb img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s cubic-bezier(.2, .8, .3, 1);
}

.post:hover .post__thumb img {
    transform: scale(1.04);
}

.post__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
}

.post__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 12.2px;
    color: var(--muted);
}

.post__meta a {
    color: var(--brand);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 11.4px;
}

.post__meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c3cbd9;
}

.post h2 {
    font-size: 17px;
    font-weight: 720;
    line-height: 1.4;
    color: var(--ink);
    margin: 10px 0 9px;
    letter-spacing: -.2px;
}

.post h2 a:hover {
    color: var(--brand);
}

.post p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 16px;
    font-size: 13px;
    font-weight: 650;
    color: var(--brand);
}

.post__more svg {
    width: 15px;
    height: 15px;
    transition: transform .18s;
}

.post__more:hover svg {
    transform: translateX(4px);
}

/* =======================================================
   BLOG — DETAY
   ======================================================= */
.main--entry {
    padding-top: 26px;
}

/* yazı detayı okuma genişliği */
.container--narrow {
    max-width: 820px;
}

.entryhead h1 {
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 780;
    line-height: 1.25;
    color: var(--ink);
    letter-spacing: -.9px;
    margin: 12px 0 14px;
}

.entryhead__lead {
    font-size: clamp(15px, 1.8vw, 16px);
    line-height: 1.75;
    color: var(--muted);
}

.entryhead__media {
    margin: 26px 0 30px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
}

.entryhead__media img {
    width: 100%;
    height: auto;
}

/* -------------------------------------------------------
   EDİTÖR İÇERİĞİ
   Buradaki her kural etiket seçicisidir; içerikte sınıf
   kullanılmaz, WordPress editöründen ne gelirse biçimlenir.
   ------------------------------------------------------- */
.entry {
    font-size: clamp(15.5px, 1.8vw, 16px);
    line-height: 1.8;
    color: var(--text);
}

.entry> :first-child {
    margin-top: 0;
}

.entry p {
    margin: 0 0 20px;
}

.entry h2 {
    font-size: clamp(21px, 2.7vw, 24px);
    font-weight: 760;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -.5px;
    margin: 38px 0 14px;
}

.entry h3 {
    font-size: 19px;
    font-weight: 720;
    line-height: 1.35;
    color: var(--ink);
    letter-spacing: -.3px;
    margin: 30px 0 12px;
}

.entry h4 {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 24px 0 10px;
}

.entry a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.entry a:hover {
    color: var(--brand-dark);
}

.entry strong {
    font-weight: 700;
    color: var(--ink);
}

.entry ul,
.entry ol {
    margin: 0 0 22px;
    padding-left: 22px;
}

.entry ul {
    list-style: none;
    padding-left: 4px;
}

.entry ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
}

.entry ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

.entry ol {
    list-style: none;
    counter-reset: entrynum;
    padding-left: 4px;
}

.entry ol li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 11px;
    counter-increment: entrynum;
}

.entry ol li::before {
    content: counter(entrynum);
    position: absolute;
    left: 0;
    top: 3px;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 750;
    display: grid;
    place-items: center;
}

.entry blockquote {
    margin: 26px 0;
    padding: 18px 22px;
    background: var(--brand-soft);
    border-left: 3px solid var(--brand);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.entry blockquote p {
    margin: 0;
    font-size: 15.5px;
    color: var(--ink);
}

.entry figure {
    margin: 28px 0;
}

.entry img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.entry figcaption {
    margin-top: 10px;
    font-size: 12.8px;
    color: var(--muted);
    text-align: center;
}

.entry table {
    width: 100%;
    border-collapse: collapse;
    margin: 26px 0;
    font-size: 14.5px;
}

.entry thead th {
    color: #fff;
    font-weight: 650;
    text-align: left;
    padding: 12px 16px;
    font-size: 13.5px;
}

.entry thead th:first-child {
    border-radius: var(--radius) 0 0 0;
}

.entry thead th:last-child {
    border-radius: 0 var(--radius) 0 0;
}

.entry tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

.entry tbody tr:nth-child(even) td {
    background: #fbfcfe;
}

.entry code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88em;
    background: #eef1f6;
    color: var(--ink);
    padding: 2px 6px;
    border-radius: 5px;
}

.entry hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 32px 0;
}

.entry em {
    font-style: italic;
}

/* paylaş */
.entryshare {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 34px 0 10px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.entryshare a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--white);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--text);
    transition: .16s;
}

.entryshare a:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.entryshare a svg {
    width: 17px;
    height: 17px;
}

/* düz yazı sayfası */
.entryhead__meta {
    margin-top: 10px;
    font-size: 12.6px;
    color: var(--muted);
}

.main--entry .entryhead {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 28px;
}

.main--entry .entry {
    padding-bottom: 8px;
}

.textfoot {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 34px 0 10px;
    padding: 16px 18px;
    background: var(--brand-soft);
    border-radius: var(--radius);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text);
}

.textfoot svg {
    width: 20px;
    height: 20px;
    color: var(--brand);
    margin-top: 2px;
}

.textfoot a {
    color: var(--brand);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =======================================================
   ÜRÜN DETAY
   ======================================================= */
.main--product {
    padding-top: 26px;
}

.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

/* ---------- galeri (saf CSS) ---------- */
.gallery {
    position: sticky;
    top: 70px;
}

.gallery__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* kart görselindeki ile aynı yaklaşım: oran kutusu padding-top ile,
   blend isolation ile kapsanıyor (Safari uyumu) */
.gallery__main {
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
}

.gallery__main::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.gallery__main img {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 26px;
    mix-blend-mode: multiply;
}

#gal1:checked~.gallery__main img:nth-of-type(1),
#gal2:checked~.gallery__main img:nth-of-type(2),
#gal3:checked~.gallery__main img:nth-of-type(3),
#gal4:checked~.gallery__main img:nth-of-type(4),
#gal5:checked~.gallery__main img:nth-of-type(5),
#gal6:checked~.gallery__main img:nth-of-type(6) {
    display: block;
    animation: galIn .25s ease;
}

@keyframes galIn {
    from {
        opacity: 0;
        transform: scale(.99);
    }
}

.gallery__zoom {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: rgba(13, 21, 38, .78);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

/* görsel sayısı kaç olursa olsun eşit genişlikte dizilsin */
.gallery__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.gallery__thumbs label {
    display: block;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition: border-color .16s;
}

.gallery__thumbs label::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.gallery__thumbs label:hover {
    border-color: #b9c4d6;
}

.gallery__thumbs img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    mix-blend-mode: multiply;
}

#gal1:checked~.gallery__thumbs label:nth-child(1),
#gal2:checked~.gallery__thumbs label:nth-child(2),
#gal3:checked~.gallery__thumbs label:nth-child(3),
#gal4:checked~.gallery__thumbs label:nth-child(4),
#gal5:checked~.gallery__thumbs label:nth-child(5),
#gal6:checked~.gallery__thumbs label:nth-child(6) {
    border-color: var(--brand);
}

/* ---------- bilgi ---------- */
.pinfo__cat {
    display: inline-block;
    font-size: 11.8px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--brand);
}

.pinfo h1 {
    font-size: clamp(21px, 3vw, 27px);
    font-weight: 760;
    line-height: 1.28;
    color: var(--ink);
    letter-spacing: -.5px;
    margin: 8px 0 12px;
}

.pinfo__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.pinfo__meta b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.pinfo__meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c3cbd9;
}

.pinfo__meta .st {
    font-weight: 650;
}

.pinfo__meta .st.is-in {
    color: var(--ok);
}

.pinfo__meta .st.is-low {
    color: var(--warn);
}

.pinfo__meta .st.is-out {
    color: var(--danger);
}

/* ---------- fiyat kutusu ---------- */
.pricebox {
    margin: 20px 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
}

.pricebox__usd {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
}

.pricebox__usd b {
    font-size: clamp(29px, 4.2vw, 38px);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -1.4px;
    line-height: 1;
}

.pricebox__usd em {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.pricebox__usd s {
    font-size: 17px;
    color: var(--muted);
    font-weight: 600;
}

.pricebox__off {
    margin-left: auto;
    background: var(--danger);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    align-self: center;
}

.pricebox__tl {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pricebox__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.4px;
    color: var(--muted);
}

.pricebox__row b {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.pricebox__row--total {
    color: var(--text);
}

.pricebox__row--total b {
    font-size: 20px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -.4px;
}

.pricebox__rate {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 11.8px;
    line-height: 1.55;
    color: var(--muted);
}

.pricebox__rate svg {
    width: 15px;
    height: 15px;
    color: var(--ok);
    margin-top: 1px;
}

.pricebox__rate b {
    color: var(--ink);
    font-weight: 700;
}

/* ---------- adet + sepet ---------- */
.buy {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}

/* iki buton hep aynı satırda ve eşit genişlikte kalsın:
   ayrı bir kapsayıcıda durdukları için dar alanda ikisi birlikte
   alt satıra iner, tek başına biri sarkmaz. */
.buy__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    /* 208px WhatsApp butonunun taşmadan sığdığı en dar ölçü */
    flex: 1 1 428px;
    min-width: 208px;
}

/* flex-basis:0 ile büyüme payı içerik kutusuna gider; bu yüzden
   yatay padding + kenarlık toplamı ikisinde de aynı olmalı (32+2). */
.buy__acts>.btn--lg,
.buy__acts>.wabtn {
    /* daralınca kırpmak yerine alt alta insinler */
    flex: 1 1 208px;
    min-width: 208px;
    padding: 0 14px;
    border: 1px solid transparent;
}

.buy__acts>.wabtn {
    border-color: #bfe7cf;
}

.buy__acts>.btn--lg,
.buy__acts>.wabtn {
    white-space: nowrap;
}

.qty.qty--lg {
    height: 52px;
    border-radius: var(--radius);
    flex: none;
}

.qty--lg button {
    width: 44px;
    font-size: 19px;
}

.qty--lg input {
    width: 54px;
    height: 100%;
    border: 0;
    outline: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    background: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty--lg input::-webkit-outer-spin-button,
.qty--lg input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn--lg {
    height: 52px;
    flex: 1;
    font-size: 15px;
    font-weight: 700;
}

.btn--lg svg {
    width: 19px;
    height: 19px;
}

/* ---------- whatsapp ---------- */
.wabtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 1;
    height: 52px;
    padding: 0 16px;
    border-radius: var(--radius);
    background: #e9f7ef;
    border: 1px solid #bfe7cf;
    color: #12703c;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .16s, border-color .16s;
}

.wabtn:hover {
    background: #d5efe0;
    border-color: #96d9b3;
}

.wabtn svg {
    width: 21px;
    height: 21px;
    color: #1faa5a;
}

/* ---------- açıklama ---------- */
.pdesc {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.pdesc h2 {
    font-size: 15px;
    font-weight: 720;
    color: var(--ink);
    margin-bottom: 12px;
}

/* editörden gelen içerik: p, ul, ol — sınıf yok */
.pdesc p {
    font-size: 13.6px;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 11px;
}

.pdesc> :last-child {
    margin-bottom: 0;
}

.pdesc ul,
.pdesc ol {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 11px;
}

.pdesc a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pdesc strong {
    color: var(--ink);
    font-weight: 700;
}

.pdesc li {
    position: relative;
    padding-left: 20px;
    font-size: 13.6px;
    line-height: 1.65;
    color: var(--text);
}

.pdesc li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

/* ---------- özellik şeridi ---------- */
.pfeat {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 22px;
}

.pfeat li {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
}

.pfeat svg {
    width: 20px;
    height: 20px;
    color: var(--brand);
}

.pfeat span {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.pfeat b {
    font-size: 12.6px;
    color: var(--ink);
    font-weight: 650;
}

.pfeat span span,
.pfeat span {
    font-size: 11.5px;
    color: var(--muted);
}

/* ---------- önerilen ürünler yatay listesi ---------- */
.scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.scroller::-webkit-scrollbar {
    display: none;
}

.scroller>.card {
    scroll-snap-align: start;
}

.scroller__nav {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.scroller__btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--text);
    display: grid;
    place-items: center;
    transition: .16s;
}

.scroller__btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.scroller__btn svg {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
}

.scroller__btn:last-child svg {
    transform: rotate(-90deg);
}

/* =======================================================
   SEPET MODALI
   ======================================================= */
aside.cart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    background: var(--white);
    z-index: 110;
    display: flex;
    flex-direction: column;
    transform: translateX(102%);
    transition: transform .34s cubic-bezier(.3, .8, .3, 1);
    box-shadow: var(--shadow-lg);
}

aside.cart.is-open {
    transform: none;
}

.cart__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: var(--ink);
    color: #fff;
}

.cart__head h3 {
    font-size: 16.5px;
    font-weight: 700;
}

.cart__head span {
    font-weight: 500;
    color: #9aa6ba;
    font-size: 13.5px;
}

.cart__close {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    display: grid;
    place-items: center;
    flex: none;
}

.cart__close:hover {
    background: rgba(255, 255, 255, .2);
}

.cart__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* satır */
.ci {
    display: flex;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    animation: ciIn .25s ease;
}

@keyframes ciIn {
    from {
        opacity: 0;
        transform: translateX(14px);
    }
}

.ci__thumb {
    width: 60px;
    height: 60px;
    flex: none;
    border-radius: 8px;
    background: linear-gradient(160deg, #f7f9fc, #eaeef5);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
}

.ci__thumb svg {
    width: 32px;
    height: 32px;
    color: #b8c2d3;
}

.ci__info {
    flex: 1;
    min-width: 0;
}

.ci__title {
    font-size: 13.4px;
    font-weight: 620;
    color: var(--ink);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ci__code {
    font-size: 11.6px;
    color: var(--muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.ci__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
}

/* adet kutusu */
.qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    height: 32px;
}

.qty button {
    width: 30px;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    transition: background .14s, color .14s;
}

.qty button:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

.qty span {
    min-width: 30px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.ci__price {
    font-size: 15px;
    font-weight: 750;
    color: var(--ink);
    white-space: nowrap;
}

.ci__del {
    color: #b3bccb;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    flex: none;
    align-self: flex-start;
    transition: .14s;
}

.ci__del svg {
    width: 14px;
    height: 14px;
}

.ci__del:hover {
    color: var(--danger);
    background: #fdecec;
}

/* boş sepet */
.cart__empty {
    padding: 60px 30px;
    text-align: center;
    color: var(--muted);
}

.cart__empty svg {
    width: 52px;
    height: 52px;
    color: #ccd4e0;
    margin: 0 auto 14px;
}

.cart__empty b {
    display: block;
    color: var(--ink);
    font-size: 16px;
    margin-bottom: 6px;
}

.cart__empty p {
    font-size: 13.5px;
    line-height: 1.6;
}

/* alt toplam */
.cart__foot {
    flex: none;
    border-top: 1px solid var(--line);
    background: #fbfcfe;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--text);
}

.cart__row--muted {
    color: var(--muted);
    font-size: 12.5px;
}

.cart__row--total {
    border-top: 1px dashed var(--line);
    padding-top: 10px;
    margin-top: 2px;
    font-size: 15px;
}

/* Vergi kapalıyken ara toplam satırı gizleniyor; kesik çizgi ayağın kendi
   üst çizgisiyle çakışmasın diye o durumda kaldırılıyor. */
.cart__row--muted[hidden]+.cart__row--total {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.cart__row--total b {
    font-size: 20px;
    font-weight: 780;
    color: var(--ink);
    letter-spacing: -.4px;
}

/* kur bilgisi — kenarlıklı kutu 109px yer kaplıyordu, düz satıra alındı */
.cart__row--tl {
    color: var(--muted);
    font-size: 13px;
}

.cart__row--tl b {
    font-size: 15px;
    font-weight: 750;
    color: var(--ink);
}

.cart__rate {
    font-size: 11.4px;
    line-height: 1.5;
    color: var(--muted);
}

.cart__rate b {
    color: var(--ink);
    font-weight: 700;
}

.cart__rate-not {
    display: block;
}

.cart__note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.3px;
    color: var(--muted);
    background: #eef6f1;
    border-radius: 8px;
    padding: 9px 11px;
    margin: 4px 0 2px;
}

.cart__note svg {
    width: 18px;
    height: 18px;
    color: var(--ok);
    flex: none;
}

.cart__note b {
    color: var(--ok);
}

.cart__cont {
    height: 38px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.cart__cont:hover {
    color: var(--brand);
}

/* sepet satırındaki gerçek ürün görseli */
.ci__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    mix-blend-mode: multiply;
}

.ci__title {
    display: block;
}

.ci__title:hover {
    color: var(--brand);
}

/* sunucu isteği sürerken */
aside.cart.is-busy .cart__body,
aside.cart.is-busy .cart__foot {
    opacity: .55;
    pointer-events: none;
    transition: opacity .12s;
}

.ci.is-removing {
    opacity: .4;
}

.qty button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.qty button:disabled:hover {
    background: none;
    color: var(--muted);
}

/* hata bildirimi */
.toast--error .toast__ic {
    background: var(--danger);
}

.buy__add.is-loading {
    opacity: .7;
    pointer-events: none;
}

/* =======================================================
   SEPET — MOBİLDE KOMPAKT
   Ayak 402px ile modalın %47'sini kaplıyor, ürün listesine
   378px kalıyordu. Ölçüler daraltıldı; TCMB kur açıklaması
   korundu (fiyatlandırma bilgisi), yalnızca kutusu kalktı.
   ======================================================= */
@media (max-width: 720px) {

    .cart__foot {
        padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
        gap: 5px;
    }

    .cart__row--total {
        padding-top: 7px;
    }

    .cart__row--total b {
        font-size: 19px;
    }

    .cart__note {
        padding: 7px 10px;
        font-size: 11.8px;
        margin: 2px 0 0;
    }

    /* başlıktaki X ve arkadaki karartma zaten kapatıyor */
    .cart__cont {
        display: none;
    }

    /* ürün satırları da daralsın ki ekranda daha çoğu görünsün */
    .ci {
        padding: 11px 16px;
        gap: 10px;
    }

    .ci__thumb {
        width: 52px;
        height: 52px;
    }

    .ci__bottom {
        margin-top: 7px;
    }

    .cart__head {
        padding: 14px 16px;
    }
}

/* =======================================================
   SAĞ ALT SEPET BUTONU
   ======================================================= */
.fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 20px 0 17px;
    border-radius: 30px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 10px 26px rgba(0, 163, 255, .38);
    touch-action: manipulation;
    /* görünmeden önce: aşağıda ve küçük */
    opacity: 0;
    visibility: hidden;
    transform: translateY(90px) scale(.9);
    transition: opacity .28s, transform .34s cubic-bezier(.2, .8, .3, 1), visibility .28s, background .18s;
}

.fab.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.fab:hover {
    background: var(--brand-dark);
}

.fab svg {
    width: 21px;
    height: 21px;
}

.fab__count {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--danger);
    border: 2px solid #fff;
    color: #fff;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.fab__total {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.2px;
}

/* =======================================================
   TOAST
   ======================================================= */
.toast {
    position: fixed;
    right: 22px;
    /* sağ alttaki sepet butonunun üstünde kalsın */
    bottom: 88px;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ink);
    color: #fff;
    border-radius: 12px;
    padding: 13px 18px;
    box-shadow: var(--shadow-lg);
    transform: translateY(140%);
    opacity: 0;
    /* görünmezken tıklamayı yakalamasın — sepet butonunun üstüne denk geliyor */
    visibility: hidden;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.2, .8, .3, 1), opacity .25s, visibility .25s;
    max-width: calc(100vw - 40px);
}

.toast.is-on {
    transform: none;
    opacity: 1;
    visibility: visible;
}

.toast__ic {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ok);
    display: grid;
    place-items: center;
    flex: none;
}

.toast__ic svg {
    width: 17px;
    height: 17px;
}

.toast p {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

.toast b {
    font-size: 13.5px;
}

.toast span {
    font-size: 12.3px;
    color: #a7b2c4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

.badge.is-bump {
    animation: bump .4s ease;
}

@keyframes bump {

    40% {
        transform: scale(1.5);
    }
}

/* =======================================================
   RESPONSIVE
   ======================================================= */
/* 15 başlık dar ekranlarda sığsın diye kademeli daraltma */
@media (max-width: 1440px) {
    .nav__item>a {
        font-size: 13px;
        padding: 0 8px;
    }
}

@media (max-width: 1280px) {
    .header__contact .hcall--wa {
        display: none;
    }

    .nav__item>a {
        font-size: 12.4px;
        padding: 0 6px;
        gap: 3px;
    }

    .nav__item>a .cv {
        width: 11px;
        height: 11px;
    }

    .mega__in {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mega__promo {
        display: none;
    }
}

@media (max-width: 1080px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }

    .brands {
        grid-template-columns: repeat(4, 1fr);
    }

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

    .promos {
        grid-template-columns: 1fr 1fr;
    }

    .promo--a {
        grid-column: span 2;
    }

    .footer__top {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .topbar__note {
        display: none;
    }

    .posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* hesap: yan menü üste */
    .acc {
        grid-template-columns: minmax(0, 1fr);
    }

    .acc__side {
        position: static;
    }

    .acc__nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .acc__out {
        border-top: 0;
        padding-top: 11px !important;
        margin-left: auto;
    }

    /* sipariş satırı kart olur */
    .order {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding: 16px 18px;
    }

    .order__link {
        grid-column: 1 / -1;
        justify-content: center;
        height: 40px;
        border: 1px solid var(--line);
        border-radius: 9px;
    }

    /* ürün detay: tek kolon */
    .product {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .gallery {
        position: static;
        /* tek kolonda galeri sayfayı kaplamasın, ortada dursun */
        width: 100%;
        max-width: 460px;
        margin-inline: auto;
    }

    .pfeat {
        grid-template-columns: 1fr;
    }

    /* kategori sayfası araç çubuğu: arama üstte, sıralama altta */
    .toolbar {
        position: static;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0;
        margin: 18px 0 20px;
    }

    .toolbar__search {
        flex: 1 0 100%;
        max-width: none;
    }

    .toolbar__right {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .toolbar__sort {
        flex: 1;
        max-width: 300px;
        justify-content: space-between;
        padding-right: 34px;
    }

    /* üst menü sağa yaslı */
    .topbar__links {
        flex: 1;
        justify-content: flex-end;
    }

    .header__in {
        height: auto;
        padding-top: 14px;
        padding-bottom: 14px;
        flex-wrap: wrap;
    }

    .searchwrap {
        order: 3;
        flex: 1 0 100%;
        max-width: none;
    }

    /* logo solda; giriş, sepet ve hamburger sağda.
       telefon numaraları mobil menünün altında duruyor. */
    .header__contact {
        display: none;
    }

    .header__acts {
        margin-left: auto;
    }

    .burger {
        display: grid;
    }

    .nav {
        display: none;
    }

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

    .slide__art {
        opacity: .55;
    }
}

@media (max-width: 720px) {
    .pg__num,
    .pg__arrow {
        min-width: 36px;
        height: 36px;
        padding: 0 9px;
        font-size: 12.8px;
    }

    .posts {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth__card {
        padding: 24px 20px;
    }

    .field__row {
        grid-template-columns: minmax(0, 1fr);
    }

    /* tablo dar ekranda kendi içinde kaysın */
    .entry table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* WooCommerce tabloları hariç — bunlar hep tam genişlik kalmalı,
       display:block iç tablo düzenini içeriğe göre daraltıyordu */
    .entry .shop_table,
    .entry .woocommerce-table,
    .entry table.cart {
        display: table;
        width: 100%;
        overflow: visible;
        white-space: normal;
    }

    /* ürün detay — dar ekran */
    .buy {
        flex-wrap: wrap;
    }

    .qty--lg {
        flex: 1 0 100%;
        justify-content: center;
    }

    .buy__acts {
        flex: 1 0 100%;
    }

    .gallery__thumbs {
        gap: 8px;
    }

    .scroller {
        grid-auto-columns: minmax(200px, 1fr);
        gap: 12px;
    }

    .search__cat {
        display: none;
    }

    .search__btn span {
        display: none;
    }

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

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

    .promos {
        grid-template-columns: 1fr;
    }

    .promo--a {
        grid-column: span 1;
    }

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

    /* 5 sütun 2'li ızgaraya girince sonuncusu tek başına kalıp sağda
       büyük boşluk bırakıyordu. Marka bloğunu tam genişliğe alınca
       kalan dört bağlantı sütunu 2x2 oturuyor. */
    .footer__top {
        grid-template-columns: 1fr 1fr;
    }

    .footer__brand {
        grid-column: 1 / -1;
    }

    .footer__brand p {
        max-width: none;
    }

    .sec__head {
        flex-wrap: wrap;
    }

    .tabs {
        order: 3;
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
    }

    /* sepet ve sağ alt buton — mobil */
    .cart {
        width: 100%;
    }

    .fab {
        right: 14px;
        bottom: 14px;
        height: 48px;
        padding: 0 17px 0 15px;
        font-size: 13.5px;
    }

    .toast {
        bottom: 76px;
    }
}

/* =======================================================
   ÇOK DAR EKRANLAR
   Burada ARTIK boyut ezmesi yok. Boşluk / yazı / ikon ölçüleri
   yukarıda clamp() ile tanımlı; genişlikle birlikte sürekli akarlar.
   Aşağıda yalnızca "öğe yerini değiştirir / kaybolur" türü gerçek
   yerleşim kararları var — bunlar kademeli olamaz.
   ======================================================= */
@media (max-width: 400px) {

    /* live search satırı: fiyat + buton alt alta, buton yazısı gizlenir */
    .lsi {
        align-items: flex-start;
    }

    .lsi__right {
        flex-direction: column;
        align-items: flex-end;
        gap: 7px;
    }

    .lsi__add {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .lsi__add span {
        display: none;
    }

    /* bildirim kutusu tam genişliğe yayılır */
    .toast {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }

    .toast span {
        max-width: none;
    }
}

/* =========================================================
   Entegre Burada – Modern Checkout ([woocommerce_checkout])
   ========================================================= */

.back-to-panel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 10px 18px;
    border: 1.5px solid #e6e8f0;
    border-radius: 10px;
    background: #fff;
    color: var(--brand, #2c2d69);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.back-to-panel:hover {
    background: var(--brand, #2c2d69);
    border-color: var(--brand, #2c2d69);
    color: #fff;
}

.back-to-panel svg {
    width: 17px;
    height: 17px;
}

.woocommerce-checkout .page-title {
    margin-bottom: 28px;
}

/* ---------- Bildirimler ---------- */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-NoticeGroup {
    border: 1px solid #dfe1f0;
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 20px;
    list-style: none;
    font-size: 14px;
    background: #f3f4fb;
    color: var(--brand, #2c2d69);
}

.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before {
    display: none;
}

.woocommerce-checkout .woocommerce-message {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #1a7f37;
}

.woocommerce-checkout .woocommerce-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b32d2e;
}

.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

/* ---------- Düzen: 2 sütun ---------- */
@media (min-width: 992px) {
    .woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        grid-template-areas:
            "details review-head"
            "details review";
        grid-template-rows: min-content 1fr;
        column-gap: 36px;
        row-gap: 0;
        align-items: start;
    }

    .woocommerce-checkout #customer_details {
        grid-area: details;
        min-width: 0;
    }

    .woocommerce-checkout #order_review_heading {
        grid-area: review-head;
        margin-bottom: 14px;
    }

    .woocommerce-checkout #order_review {
        grid-area: review;
        position: sticky;
        top: 100px;
        min-width: 0;
    }
}

/* ---------- Kartlar ---------- */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout #order_review {
    background: #fff;
    border: 1px solid #e8e8ef;
    border-radius: 16px;
    padding: 26px 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

.woocommerce-checkout #customer_details .col2-set {
    display: block;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    width: 100%;
    float: none;
    margin: 0 0 20px;
}

/* ---------- Başlıklar ---------- */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 18px;
}

.woocommerce-checkout #order_review_heading {
    margin-top: 0;
}

/* ---------- Form alanları ---------- */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
}

.woocommerce-checkout .form-row {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0 0 16px;
    padding: 0;
}

.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row[id="order_comments_field"] {
    grid-column: 1 / -1;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper>.form-row:last-child,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper>.form-row:last-child,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper>.form-row:last-child {
    margin-bottom: 0;
}

.woocommerce-checkout .woocommerce-account-fields {
    margin-top: 4px;
}

.woocommerce-checkout .woocommerce-account-fields .create-account {
    margin: 4px 0 0;
}

.woocommerce-checkout .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.woocommerce-checkout .form-row .required {
    color: #de1e3e;
    border: 0;
    text-decoration: none;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    width: 100% !important;
    font-size: 15px !important;
    border: 1.5px solid #e6e8f0 !important;
    border-radius: 12px !important;
    background: #f8f9fc !important;
    color: #1f2937 !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease !important;
}

/* Tek satırlı alanlar: select2 ile aynı yükseklik (48px) — textarea hariç */
.woocommerce-checkout input.input-text,
.woocommerce-checkout select {
    height: 48px !important;
    padding: 0 15px !important;
    line-height: 46px !important;
}

.woocommerce-checkout textarea {
    min-height: 110px !important;
    padding: 13px 15px !important;
    line-height: 1.5 !important;
    resize: vertical;
}

.woocommerce-checkout .input-text::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: #aab0bd;
}

.woocommerce-checkout .input-text:hover,
.woocommerce-checkout select:hover,
.woocommerce-checkout textarea:hover {
    border-color: #d3d7e3 !important;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    outline: none !important;
    background: #fff !important;
    border-color: var(--brand, #2c2d69) !important;
    box-shadow: 0 0 0 4px rgba(44, 45, 105, 0.1) !important;
}

/* ---------- select2 (ülke/şehir) ---------- */
/* select2'nin gizlediği orijinal <select>'i stil dışında tut (yatay taşmayı önler) */
.woocommerce-checkout select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    line-height: normal !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.woocommerce-checkout .select2-container {
    max-width: 100% !important;
}

.woocommerce-checkout .select2-container .select2-selection--single {
    height: 48px;
    border: 1.5px solid #e6e8f0;
    border-radius: 12px;
    background: #f8f9fc;
    display: flex;
    align-items: center;
    padding: 0 8px;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.woocommerce-checkout .select2-container .select2-selection--single:hover {
    border-color: #d3d7e3;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4;
    color: #1f2937;
    padding-left: 8px;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
}

.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
    background: #fff;
    border-color: var(--brand, #2c2d69);
    box-shadow: 0 0 0 4px rgba(44, 45, 105, 0.1);
}

/* select2 arama kutusu + açılır liste */
.select2-dropdown {
    border: 1.5px solid #e6e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e6e8f0;
    border-radius: 9px;
    padding: 8px 10px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--brand, #2c2d69);
}

/* ---------- Sipariş tablosu ---------- */
.woocommerce-checkout #order_review .shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
    font-size: 14px;
}

.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
    padding: 12px 2px;
    text-align: left;
    border-bottom: 1px solid #f1f2f4;
    color: #374151;
}

.woocommerce-checkout #order_review .shop_table .product-total,
.woocommerce-checkout #order_review .shop_table td.product-total,
.woocommerce-checkout #order_review .shop_table th.product-total {
    text-align: right;
}

.woocommerce-checkout #order_review .shop_table .product-name {
    font-weight: 500;
    color: #1f2937;
}

.woocommerce-checkout #order_review .shop_table .product-quantity {
    color: #9ca3af;
}

.woocommerce-checkout #order_review .shop_table tfoot th {
    font-weight: 600;
    color: #6b7280;
}

.woocommerce-checkout #order_review .shop_table tfoot .order-total th,
.woocommerce-checkout #order_review .shop_table tfoot .order-total td {
    font-size: 16px;
    color: #111827;
    padding-top: 14px;
}

.woocommerce-checkout #order_review .shop_table tfoot .order-total .amount {
    color: var(--brand, #2c2d69);
    font-weight: 700;
}

/* ---------- Ödeme yöntemleri ---------- */
.woocommerce-checkout #payment {
    background: #f7f8fb;
    border-radius: 14px;
    padding: 4px 0;
    border: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    margin: 0;
    padding: 6px 18px;
    border: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
    margin: 0;
    padding: 13px 0;
    border-bottom: 1px solid #ececf3;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
    border-bottom: 0;
}

.woocommerce-checkout #payment label {
    font-weight: 600;
    color: #1f2937;
    display: inline;
}

.woocommerce-checkout #payment .payment_box {
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13px;
    color: #6b7280;
    margin: 12px 0 0;
}

.woocommerce-checkout #payment .payment_box::before {
    display: none;
}

/* ---------- Şartlar + Sipariş butonu ---------- */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin: 6px 0 16px;
    font-size: 13px;
    color: #6b7280;
}

.woocommerce-checkout #payment .place-order {
    padding: 16px 18px 6px;
}

.woocommerce-checkout #place_order,
.woocommerce-checkout #order_review .button.alt {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    background: var(--brand, #2c2d69);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition:
        background 0.15s ease,
        transform 0.08s ease,
        box-shadow 0.15s ease;
}

.woocommerce-checkout #place_order:hover {
    background: #232456;
    box-shadow: 0 8px 22px rgba(44, 45, 105, 0.25);
}

.woocommerce-checkout #place_order:active {
    transform: translateY(1px);
}

/* ---------- Kupon ---------- */
.woocommerce-checkout .checkout_coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border: 1px solid #e8e8ef;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 24px;
    background: #fff;
}

.woocommerce-checkout .checkout_coupon>p:first-child {
    flex: 1 0 100%;
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.woocommerce-checkout .checkout_coupon .form-row {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-checkout .checkout_coupon .form-row-first {
    flex: 1;
    min-width: 0;
}

.woocommerce-checkout .checkout_coupon .form-row-last {
    flex: 0 0 auto;
}

.woocommerce-checkout .checkout_coupon .clear {
    display: none;
}

#billing_first_name_field,
#billing_last_name_field {
    width: 100% !important;
}

.woocommerce-checkout .checkout_coupon .button {
    height: 48px;
    padding: 0 24px;
    background: var(--brand, #2c2d69);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.woocommerce-checkout .checkout_coupon .button:hover {
    background: #232456;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .woocommerce-checkout #order_review_heading {
        margin-top: 8px;
    }

    .woocommerce-checkout #order_review {
        margin-top: 4px;
    }

    .woocommerce-checkout #customer_details .col-1,
    .woocommerce-checkout #customer_details .col-2 {
        margin-bottom: 16px;
    }
}

@media (max-width: 560px) {

    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: 1fr;
    }

    .woocommerce-checkout #customer_details .col-1,
    .woocommerce-checkout #customer_details .col-2,
    .woocommerce-checkout #order_review {
        padding: 20px;
    }
}

.woocommerce table.shop_table {
    border: none !important;
}

/* özet tablosundaki tüm tutarlar sağa yaslı — vergi satırı da dahil */
.cart-subtotal td,
.order-total td,
.fee td,
.tax-rate td,
.shipping td,
#order_review .shop_table tfoot td {
    text-align: right !important;
}

.woocommerce-form-coupon .form-row {
    margin: 0 !important;
}

#add_payment_method #payment div.form-row,
.woocommerce-cart #payment div.form-row,
.woocommerce-checkout #payment div.form-row {
    padding: 0 1em 1em 1em !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    padding: 0 18px;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout #order_review {
    padding: 26px 28px 26px 28px;
}

/* =========================================================
   Sipariş Alındı (order-received / teşekkür sayfası)
   ========================================================= */
.woocommerce-checkout .woocommerce-order {
    margin: 0 auto;
}

/* Başarı mesajı */
.woocommerce-checkout .woocommerce-thankyou-order-received {
    text-align: center;
    font-size: 19px;
    font-weight: 700;
    color: #1a7f37;
    background: #ecfdf3;
    border: 1px solid #abefc6;
    border-radius: 16px;
    padding: 28px 24px;
    margin: 0 0 24px;
}

.woocommerce-checkout .woocommerce-thankyou-order-received::before {
    content: '';
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #1a7f37 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 26px no-repeat;
}

/* Sipariş özeti listesi (sipariş no, tarih, e-posta, toplam, ödeme) */
.woocommerce-checkout .woocommerce-order-overview.order_details {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    border: 0;
}

/* WooCommerce'in clearfix ::before/::after'ı grid hücresi olup boş kutu yaratmasın */
.woocommerce-checkout .woocommerce-order-overview.order_details::before,
.woocommerce-checkout .woocommerce-order-overview.order_details::after {
    content: none;
    display: none;
}

.woocommerce-checkout .woocommerce-order-overview li {
    flex: 1 1 auto;
    float: none;
    width: auto;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid #e8e8ef;
    border-radius: 12px;
    background: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: #9ca3af;
}

.woocommerce-checkout .woocommerce-order-overview li strong {
    display: block;
    margin-top: 6px;
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
    color: #111827;
    font-weight: 700;
}

/* Sipariş detayları + müşteri bilgileri kartları */
.woocommerce-checkout .woocommerce-order-details,
.woocommerce-checkout .woocommerce-customer-details {
    background: #fff;
    border: 1px solid #e8e8ef;
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.woocommerce-checkout .woocommerce-order-details__title,
.woocommerce-checkout .woocommerce-customer-details h2,
.woocommerce-checkout .woocommerce-column__title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 18px;
}

/* Sipariş ürün tablosu */
.woocommerce-checkout .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.woocommerce-checkout .woocommerce-table--order-details th,
.woocommerce-checkout .woocommerce-table--order-details td {
    padding: 12px 2px;
    text-align: left;
    border-bottom: 1px solid #f1f2f4;
    color: #374151;
}

.woocommerce-checkout .woocommerce-table--order-details td.product-total,
.woocommerce-checkout .woocommerce-table--order-details th.product-total,
.woocommerce-checkout .woocommerce-table--order-details tfoot td,
.woocommerce-checkout .woocommerce-table--order-details tfoot th {
    text-align: right;
}

.woocommerce-checkout .woocommerce-table--order-details tfoot th {
    font-weight: 600;
    color: #6b7280;
    text-align: left;
}

.woocommerce-checkout .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-checkout .woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 16px;
    color: #111827;
    padding-top: 14px;
}

.woocommerce-checkout .woocommerce-table--order-details tfoot tr:last-child .amount {
    color: var(--brand, #2c2d69);
    font-weight: 700;
}

.woocommerce-checkout .woocommerce-table--order-details .product-name a {
    color: #1f2937;
    font-weight: 500;
    text-decoration: none;
}

/* Müşteri adresleri */
.woocommerce-checkout .woocommerce-customer-details .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
}

.woocommerce-checkout .woocommerce-customer-details .woocommerce-column {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}

.woocommerce-checkout .woocommerce-customer-details address {
    font-style: normal;
    border: 1px solid #eceef1;
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
    background: #fafbfc;
}

/* Sipariş detayları + Fatura adresi yan yana (%50) */
@media (min-width: 768px) {
    .woocommerce-checkout .woocommerce-order {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }

    .woocommerce-checkout .woocommerce-thankyou-order-received,
    .woocommerce-checkout .woocommerce-order-overview.order_details {
        grid-column: 1 / -1;
    }

    .woocommerce-checkout .woocommerce-order-details,
    .woocommerce-checkout .woocommerce-customer-details {
        margin-bottom: 0;
    }
}

@media (max-width: 600px) {
    .woocommerce-checkout .woocommerce-order-overview li {
        flex-basis: 100%;
    }

    .woocommerce-checkout .woocommerce-order-details,
    .woocommerce-checkout .woocommerce-customer-details {
        padding: 20px;
    }
}

.woocommerce ul.order_details li {
    margin-right: 0 !important;
    padding-left: 2em !important;
    border: 1px dashed #cfc8d8 !important;
}

/* form doğrulama uyarıları — madde başına ikon payı */
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-NoticeGroup li {
    position: relative;
    padding-left: 22px !important;
    padding-top: 2px;
    margin-bottom: 5px;
}

.woocommerce-error li:last-child,
.woocommerce-message li:last-child,
.woocommerce-info li:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------
   WooCommerce ödeme yöntemi listesindeki clearfix kutuları
   WC şu kuralı basıyor (özgüllük 1,3,3 — ID içerdiği için
   sınıf tabanlı kural onu ezemiyor):
     .woocommerce-checkout #payment ul.payment_methods
       li:not(.woocommerce-notice)::before { content:" "; display:table }
   Aşağısı aynı özgüllükte; bizim stil en son yüklendiği için kazanır.
   ------------------------------------------------------- */
#add_payment_method #payment ul.payment_methods li:not(.woocommerce-notice)::before,
#add_payment_method #payment ul.payment_methods li:not(.woocommerce-notice)::after,
.woocommerce-cart #payment ul.payment_methods li:not(.woocommerce-notice)::before,
.woocommerce-cart #payment ul.payment_methods li:not(.woocommerce-notice)::after,
.woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::before,
.woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::after {
    content: none;
    display: none;
}

/* ödeme kutusunun üstündeki gri üçgen de aynı sebeple ezilemiyordu */
#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
    content: none;
    display: none;
    border: 0;
}

/* toplam satırındaki TL karşılığı */
.eb-try {
    display: inline-block;
    margin-left: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

/* =======================================================
   KARGO TAKİP
   ======================================================= */
.kargo {
    max-width: 720px;
    margin: 0 0 40px;
}

.kargo__form {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
}

.kargo__form.is-busy {
    opacity: .6;
    pointer-events: none;
}

.kargo__row {
    display: flex;
    gap: 10px;
}

.kargo__row input {
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
}

.kargo__hint {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

.kargo__sonuc {
    margin-top: 18px;
}

.kargo__kart {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.kargo__durum {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: var(--brand-soft);
    border-bottom: 1px solid var(--line);
}

.kargo__durum svg {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    color: var(--brand);
}

.kargo__durum b {
    display: block;
    font-size: 16px;
    color: var(--ink);
}

.kargo__durum span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--muted);
}

.kargo__durum.is-ok {
    background: #eaf8f0;
}

.kargo__durum.is-ok svg {
    color: var(--ok);
}

.kargo__detay {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 24px;
    padding: 8px 24px 18px;
}

@media (max-width: 620px) {
    .kargo__detay {
        grid-template-columns: 1fr;
    }

    .kargo__row {
        flex-direction: column;
    }
}

.kargo__satir {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
}

.kargo__satir span {
    color: var(--muted);
    white-space: nowrap;
}

.kargo__satir b {
    color: var(--text);
    text-align: right;
}

.kargo__dis {
    display: block;
    padding: 14px 24px;
    border-top: 1px solid var(--line);
    background: #fafbfc;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
}

.kargo__dis:hover {
    background: var(--brand-soft);
}

/* ---------- galeri okları (6'dan fazla görselde de çalışır) ---------- */
.gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--line);
    color: var(--ink);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transition: opacity .18s, background .18s;
}

.gallery__main:hover .gallery__nav,
.gallery__nav:focus-visible {
    opacity: 1;
}

.gallery__nav:hover {
    background: #fff;
    color: var(--brand);
}

.gallery__nav svg {
    width: 17px;
    height: 17px;
}

.gallery__nav--prev {
    left: 12px;
}

.gallery__nav--prev svg {
    transform: rotate(90deg);
}

.gallery__nav--next {
    right: 12px;
}

.gallery__nav--next svg {
    transform: rotate(-90deg);
}

/* dokunmatikte hover yok — oklar hep görünsün */
@media (hover: none) {
    .gallery__nav {
        opacity: 1;
    }
}

/* çok görselde küçük resimler yatay kaysın, iğne gibi incelmesin */
.gallery__thumbs {
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    padding-bottom: 2px;
}

.gallery__thumbs label {
    flex: 0 0 auto;
    width: calc((100% - 5 * 10px) / 6);
    min-width: 56px;
}

/* =======================================================
   DOKUNMATİK — hover stillerini kapat
   iOS Safari'de dokunulan öğenin :hover stili görünümü
   değiştiriyorsa ilk dokunuş o stili uygulamaya harcanıyor,
   click ancak ikinci dokunuşta tetikleniyor. Sepete ekle
   butonunun "ilk dokunuşta çalışmama" sebebi buydu.
   Fare kullanan cihazlar bu bloktan etkilenmez.
   ======================================================= */
@media (hover: none) {

    .card:hover {
        border-color: var(--line);
        box-shadow: none;
        transform: none;
    }

    .card:hover .card__thumb img,
    .card:hover .card__thumb svg {
        transform: none;
    }

    .card:hover .card__thumb svg {
        color: #c3cbd9;
    }

    .card__add:hover {
        background: var(--brand-soft);
        color: var(--brand);
    }

    .card h3 a:hover,
    .card__cat:hover {
        color: inherit;
    }

    .post:hover {
        border-color: var(--line);
        box-shadow: none;
        transform: none;
    }

    .post:hover .post__thumb img {
        transform: none;
    }

    .brand:hover {
        border-color: var(--line);
        box-shadow: none;
        transform: none;
    }

    .promo:hover {
        transform: none;
        box-shadow: none;
    }

    .promo:hover .promo__cta svg {
        transform: none;
    }

    .subcat:hover {
        border-color: var(--line);
        box-shadow: none;
    }

    .lsi__add:hover {
        background: var(--brand);
    }

    .chip:hover {
        border-color: var(--line);
        color: var(--text);
        background: var(--white);
    }
}