/* ==========================================================================
   toptancınız — tasarım sistemi
   Depo dili: lacivert mürekkep, uyarı sarısı eylemler, kraft karton yalnızca koli için.
   Yazı: Archivo (genişlik ekseni) — başlıklar dar ve kalın, gövde normal.
   ========================================================================== */

:root {
    /* Renkler */
    --murekkep: #1B2536;
    --murekkep-2: #364256;
    --soluk: #5B6577;
    --zemin: #FFFFFF;
    --yuzey: #F2F4F6;
    --yuzey-2: #E8EBEF;
    --cizgi: #DADFE5;
    --cizgi-koyu: #B9C0CA;

    --sari: #FFC21A;
    --sari-koyu: #EBAD00;
    --kraft: #C69A5B;
    --kraft-acik: #F5EBDB;
    --kraft-koyu: #6E4B1F;

    --yesil: #17704A;
    --yesil-acik: #E4F3EB;
    --kirmizi: #B42318;
    --kirmizi-acik: #FDECEA;

    /* Yazı */
    --yazi: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --boy-xs: 0.8125rem;   /* 13 */
    --boy-s: 0.875rem;     /* 14 */
    --boy-m: 1rem;         /* 16 */
    --boy-l: 1.25rem;      /* 20 */
    --boy-xl: 1.5625rem;   /* 25 */
    --boy-2xl: 1.953rem;   /* 31 */
    --boy-3xl: 2.441rem;   /* 39 */

    /* Ölçüler */
    --kap: 1320px;
    --kenar: 16px;
    --r-kucuk: 4px;
    --r: 8px;
    --r-buyuk: 12px;
    --ust-yukseklik: 72px;
    --alt-menu: 64px;
    --gecis: 160ms cubic-bezier(.2, .7, .3, 1);
}

@media (min-width: 768px) {
    :root { --kenar: 24px; }
}
@media (min-width: 1200px) {
    :root { --kenar: 32px; }
}

/* --- Temel ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
    margin: 0;
    font-family: var(--yazi);
    font-size: var(--boy-m);
    line-height: 1.5;
    color: var(--murekkep);
    background: var(--zemin);
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; font-stretch: 85%; letter-spacing: -0.005em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; background: var(--yuzey); padding: .1em .35em; border-radius: var(--r-kucuk); }

:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; border-radius: 2px; }
main:focus { outline: none; }

.gizli {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.atla {
    position: absolute; left: 8px; top: -60px; z-index: 100;
    background: var(--murekkep); color: #fff; padding: 10px 14px; border-radius: var(--r);
}
.atla:focus { top: 8px; }

.kap { width: 100%; max-width: var(--kap); margin-inline: auto; padding-inline: var(--kenar); }
.ikon { width: 22px; height: 22px; flex: none; }

/* --- Düğmeler ------------------------------------------------------------- */
.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    border: 1.5px solid transparent; border-radius: var(--r);
    font-weight: 650; font-size: var(--boy-m); text-decoration: none; white-space: nowrap;
    transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}
.dugme--buyuk { min-height: 52px; padding: 0 24px; font-size: 1.0625rem; }
.dugme--sari { background: var(--sari); color: var(--murekkep); }
.dugme--sari:hover { background: var(--sari-koyu); }
.dugme--koyu { background: var(--murekkep); color: #fff; }
.dugme--koyu:hover { background: var(--murekkep-2); }
.dugme--cizgi { background: transparent; border-color: var(--cizgi-koyu); color: var(--murekkep); }
.dugme--cizgi:hover { border-color: var(--murekkep); }
.dugme--metin { background: none; padding-inline: 4px; color: var(--murekkep); text-decoration: underline; text-decoration-color: var(--cizgi-koyu); }
.dugme--metin:hover { text-decoration-color: currentColor; }

/* --- Bildirimler ---------------------------------------------------------- */
.bildirim { margin: 16px 0; padding: 12px 16px; border-radius: var(--r); border-left: 4px solid; font-size: var(--boy-s); }
.bildirim p + p { margin-top: 4px; }
.bildirim--basari { background: var(--yesil-acik); border-color: var(--yesil); }
.bildirim--hata { background: var(--kirmizi-acik); border-color: var(--kirmizi); }
.bildirim--bilgi { background: var(--yuzey); border-color: var(--murekkep); }

/* --- Üst şerit ------------------------------------------------------------ */
.serit { background: var(--murekkep); color: #E6E9EE; font-size: var(--boy-xs); }
.serit__ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.serit__mesaj { display: flex; align-items: center; gap: 8px; }
.serit__mesaj .ikon { width: 18px; height: 18px; color: var(--sari); }
.serit__baglantilar { display: none; gap: 20px; }
.serit__baglantilar a { text-decoration: none; color: #E6E9EE; }
.serit__baglantilar a:hover { color: #fff; text-decoration: underline; }
@media (min-width: 900px) { .serit__baglantilar { display: flex; } }

/* --- Üst bölüm ------------------------------------------------------------ */
.ust { position: sticky; top: 0; z-index: 40; background: var(--zemin); border-bottom: 1px solid var(--cizgi); }
.ust__ic {
    display: grid; align-items: center; gap: 10px 12px;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "menu marka islem" "arama arama arama";
    padding-block: 10px;
}
.ust__menu-dugme {
    grid-area: menu; display: grid; place-items: center; width: 40px; height: 40px;
    border: 0; background: none; border-radius: var(--r); margin-left: -8px;
}
.ust__menu-dugme:hover { background: var(--yuzey); }

.ust__ic .marka { grid-area: marka; }
.marka { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--murekkep); }
.marka__isaret { width: 32px; height: 32px; }
.marka__ad {
    font-size: 1.5rem; font-weight: 800; font-stretch: 72%; letter-spacing: -0.02em; line-height: 1;
}
.marka--acik { color: #fff; }

.arama { grid-area: arama; position: relative; display: flex; }
.arama__kutu {
    width: 100%; height: 46px; padding: 0 52px 0 16px;
    background: var(--yuzey); border: 1.5px solid var(--yuzey); border-radius: var(--r);
    font-size: var(--boy-m); appearance: none;
    transition: border-color var(--gecis), background-color var(--gecis);
}
.arama__kutu::placeholder { color: var(--soluk); }
.arama__kutu:hover { border-color: var(--cizgi-koyu); }
.arama__kutu:focus { outline: none; background: var(--zemin); border-color: var(--murekkep); }
.arama__kutu::-webkit-search-cancel-button { display: none; }
.arama__dugme {
    position: absolute; right: 4px; top: 4px; width: 38px; height: 38px;
    display: grid; place-items: center; border: 0; border-radius: 6px;
    background: var(--murekkep); color: #fff;
}
.arama__dugme .ikon { width: 20px; height: 20px; }

.ust__islemler { grid-area: islem; display: flex; align-items: center; gap: 4px; }
.ust__islem {
    display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--r);
    text-decoration: none; font-weight: 600; font-size: var(--boy-s);
}
.ust__islem:hover { background: var(--yuzey); }
.ust__islem > span:last-child { display: none; }
.ust__islem--hesap { display: none; }
.ust__sepet-ikon, .alt-menu__ikon { position: relative; display: inline-flex; }
.sayac {
    position: absolute; top: -6px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 10px;
    background: var(--sari); color: var(--murekkep); font-size: 11px; font-weight: 800; line-height: 1;
    border: 2px solid var(--zemin);
}
.sayac[hidden] { display: none; }

@media (min-width: 900px) {
    .ust__ic {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "marka arama islem";
        gap: 32px; min-height: var(--ust-yukseklik);
    }
    .ust__menu-dugme { display: none; }
    .marka__isaret { width: 36px; height: 36px; }
    .marka__ad { font-size: 1.75rem; }
    .arama { max-width: 680px; }
    .arama__kutu { height: 48px; }
    .arama__dugme { width: 40px; height: 40px; }
    .ust__islem--hesap { display: flex; }
    .ust__islem > span:last-child { display: inline; }
    .ust__islem { padding: 8px 12px; }
}

/* Kategori şeridi: mobilde yatay kayar */
.kategori-seridi { border-top: 1px solid var(--cizgi); }
.kategori-seridi__liste {
    display: flex; gap: 4px; list-style: none; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--kenar) * -1); padding-inline: var(--kenar);
    scroll-snap-type: x proximity;
}
.kategori-seridi__liste::-webkit-scrollbar { display: none; }
.kategori-seridi__liste a {
    display: block; padding: 12px 12px; white-space: nowrap; text-decoration: none;
    font-size: var(--boy-s); font-weight: 600; color: var(--murekkep-2);
    border-bottom: 3px solid transparent; scroll-snap-align: start;
}
.kategori-seridi__liste a:hover { color: var(--murekkep); border-bottom-color: var(--cizgi-koyu); }
.kategori-seridi__liste a[aria-current="page"] { color: var(--murekkep); border-bottom-color: var(--sari); }
@media (max-width: 899px) { .kategori-seridi { display: none; } }

/* --- Çekmece (mobil kategori menüsü) ------------------------------------- */
.cekmece {
    margin: 0; padding: 0; border: 0; width: min(88vw, 380px); max-width: none; height: 100dvh; max-height: none;
    background: var(--zemin); color: var(--murekkep);
    display: flex; flex-direction: column;
}
.cekmece:not([open]) { display: none; }
.cekmece::backdrop { background: rgba(27, 37, 54, .55); }
.cekmece[open] { animation: cekmece-ac 220ms cubic-bezier(.2, .8, .2, 1); }
@keyframes cekmece-ac { from { transform: translateX(-100%); } to { transform: none; } }
.cekmece__baslik {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px var(--kenar); border-bottom: 1px solid var(--cizgi);
}
.cekmece__baslik h2 { font-size: var(--boy-l); }
.cekmece__kapat { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r); margin-right: -8px; }
.cekmece__kapat:hover { background: var(--yuzey); }
.cekmece__liste { list-style: none; overflow-y: auto; flex: 1; }
.cekmece__liste a {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 15px var(--kenar); border-bottom: 1px solid var(--yuzey-2);
    text-decoration: none; font-weight: 600;
}
.cekmece__liste a:hover { background: var(--yuzey); }
.cekmece__sayi { font-size: var(--boy-xs); font-weight: 500; color: var(--soluk); font-variant-numeric: tabular-nums; }
.cekmece__bos { padding: 24px var(--kenar); color: var(--soluk); flex: 1; }
.cekmece__alt { display: grid; padding: 12px var(--kenar) calc(16px + env(safe-area-inset-bottom)); background: var(--yuzey); }
.cekmece__alt a { padding: 10px 0; text-decoration: none; font-size: var(--boy-s); color: var(--murekkep-2); }

/* --- Giriş bölümü (banner yokken) ---------------------------------------- */
.giris { background: var(--yuzey); border-bottom: 1px solid var(--cizgi); overflow: hidden; }
.giris__ic {
    display: grid; gap: 40px; align-items: center;
    padding-block: 40px 48px;
}
.giris__baslik {
    font-size: clamp(2.6rem, 9vw, 4.75rem);
    font-weight: 800; font-stretch: 68%; line-height: .95; letter-spacing: -0.025em;
    max-width: 11ch;
}
.giris__alt { margin-top: 20px; max-width: 46ch; font-size: 1.125rem; color: var(--murekkep-2); }
.giris__eylemler { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

@media (min-width: 900px) {
    .giris__ic { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; padding-block: 72px 80px; }
}

/* Gönderi etiketi: sitenin imzası */
.etiket {
    margin: 0; justify-self: center; width: min(100%, 400px);
    background: #fff; border: 2px solid var(--murekkep); border-radius: 6px;
    transform: rotate(-2deg);
    box-shadow: 10px 10px 0 var(--kraft);
}
.etiket__ust {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 2px solid var(--murekkep);
}
.etiket__marka { font-weight: 800; font-stretch: 72%; font-size: 1.25rem; letter-spacing: -0.02em; }
.etiket__damga {
    padding: 3px 10px; border: 2px solid var(--kraft-koyu); border-radius: 3px;
    color: var(--kraft-koyu); font-weight: 800; font-stretch: 75%; font-size: var(--boy-s);
    transform: rotate(4deg);
}
.etiket__alanlar { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.etiket__alanlar > div { padding: 12px 16px; border-bottom: 1px solid var(--cizgi-koyu); }
.etiket__alanlar > div:nth-child(odd) { border-right: 1px solid var(--cizgi-koyu); }
.etiket__alanlar dt { font-size: 11.5px; color: var(--soluk); }
.etiket__alanlar dd { margin: 2px 0 0; font-weight: 700; font-stretch: 88%; font-size: .975rem; line-height: 1.25; }
.etiket__barkod {
    height: 56px; margin: 14px 16px 6px;
    background:
        repeating-linear-gradient(90deg,
            var(--murekkep) 0 2px, transparent 2px 4px,
            var(--murekkep) 4px 7px, transparent 7px 8px,
            var(--murekkep) 8px 9px, transparent 9px 12px,
            var(--murekkep) 12px 15px, transparent 15px 16px,
            var(--murekkep) 16px 17px, transparent 17px 20px);
}
.etiket__alt { padding: 0 16px 12px; font-size: 11.5px; color: var(--soluk); }

/* --- Bölümler ------------------------------------------------------------- */
.bolum { padding-block: 36px; }
.bolum + .bolum { padding-top: 8px; }
.bolum__baslik { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.bolum__baslik h2 { font-size: var(--boy-xl); font-stretch: 78%; font-weight: 750; }
.bolum__baslik a { font-size: var(--boy-s); font-weight: 600; }
@media (min-width: 900px) {
    .bolum { padding-block: 56px; }
    .bolum__baslik h2 { font-size: var(--boy-2xl); }
    .bolum__baslik { margin-bottom: 24px; }
}

/* Kategori ızgarası */
.kategori-izgara { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .kategori-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kategori-izgara { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } }
.kategori-karo {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
    min-height: 104px; padding: 14px; border-radius: var(--r);
    background: var(--yuzey); text-decoration: none; overflow: hidden;
    border: 1px solid transparent; transition: border-color var(--gecis), background-color var(--gecis);
}
.kategori-karo::before {
    content: ""; position: absolute; top: 0; right: 14px; width: 18px; height: 26px;
    background: var(--kraft); border-radius: 0 0 2px 2px; opacity: .9;
}
.kategori-karo:hover { background: var(--kraft-acik); border-color: var(--kraft); }
.kategori-karo img { width: 56px; height: 56px; object-fit: contain; margin-bottom: auto; }
.kategori-karo__ad { font-weight: 700; font-stretch: 85%; line-height: 1.2; }
.kategori-karo__sayi { font-size: var(--boy-xs); color: var(--soluk); font-variant-numeric: tabular-nums; }

/* --- Ürün ızgarası ve kartı ---------------------------------------------- */
.urun-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .urun-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .urun-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

.kart {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk);
    overflow: hidden; transition: border-color var(--gecis);
}
.kart:hover { border-color: var(--cizgi-koyu); }
.kart__gorsel { position: relative; display: block; aspect-ratio: 1; background: #fff; border-bottom: 1px solid var(--yuzey-2); }
.kart__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.kart__gorsel-yok { position: absolute; inset: 0; display: grid; place-items: center; background: var(--yuzey); color: var(--cizgi-koyu); }
.kart__gorsel-yok .ikon { width: 44px; height: 44px; }
.kart__etiket {
    position: absolute; left: 8px; top: 8px; padding: 4px 8px;
    background: var(--kraft-acik); color: var(--kraft-koyu); border: 1px solid var(--kraft);
    border-radius: var(--r-kucuk); font-size: 11.5px; font-weight: 700; line-height: 1.2;
}
.kart__govde { padding: 12px 12px 10px; flex: 1; }
.kart__marka { font-size: var(--boy-xs); color: var(--soluk); margin-bottom: 2px; }
.kart__ad { font-size: .9375rem; font-weight: 600; font-stretch: 100%; line-height: 1.35; letter-spacing: 0; }
.kart__ad a {
    text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.7em;
}
.kart__ad a:hover { text-decoration: underline; }
.kart__ad a::after { content: ""; position: absolute; inset: 0; } /* tüm üst alan tıklanır */
.kart__govde { position: relative; }

.kart__fiyatlar { display: grid; gap: 6px; padding: 0 8px 8px; }
.fiyat-satiri {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
    min-height: 48px; padding: 6px 6px 6px 10px; border-radius: var(--r);
    background: var(--yuzey);
}
.fiyat-satiri__birim { font-size: var(--boy-xs); font-weight: 650; color: var(--murekkep-2); line-height: 1.15; }
.fiyat-satiri__birim small { display: block; font-weight: 500; color: var(--soluk); font-size: 11.5px; }
.fiyat-satiri__tutar {
    justify-self: end; text-align: right; font-weight: 750; font-stretch: 90%; font-size: 1.0625rem;
    font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap;
}
.fiyat-satiri__tutar small { display: block; font-weight: 500; font-stretch: 100%; font-size: 11.5px; color: var(--kraft-koyu); }
.fiyat-satiri__ekle {
    width: 36px; height: 36px; display: grid; place-items: center;
    border: 0; border-radius: 6px; background: var(--sari); color: var(--murekkep);
    transition: background-color var(--gecis), transform 90ms;
}
.fiyat-satiri__ekle:hover { background: var(--sari-koyu); }
.fiyat-satiri__ekle:active { transform: scale(.94); }
.fiyat-satiri__ekle .ikon { width: 18px; height: 18px; }
.fiyat-satiri--koli { background: var(--kraft-acik); box-shadow: inset 3px 0 0 var(--kraft); }
.fiyat-satiri--koli .fiyat-satiri__birim { color: var(--kraft-koyu); }

/* Dar kartta (iki sütunlu mobil) fiyat altta, birim üstte; düğme sağda */
.kart { container-type: inline-size; }
@container (max-width: 230px) {
    .kart__govde { padding: 10px 10px 8px; }
    .kart__fiyatlar { padding: 0 6px 6px; }
    .fiyat-satiri {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "birim ekle" "tutar ekle";
        gap: 2px 6px; padding: 7px 6px 7px 9px;
    }
    .fiyat-satiri__birim { grid-area: birim; }
    .fiyat-satiri__birim small { display: inline; margin-left: 4px; }
    .fiyat-satiri__tutar { grid-area: tutar; justify-self: start; text-align: left; font-size: 1rem; }
    .fiyat-satiri__ekle { grid-area: ekle; width: 34px; height: 34px; }
}

/* --- Kaydırıcı (banner) -------------------------------------------------- */
.vitrin-banner { padding-top: 16px; }
.kaydirici { position: relative; }
.kaydirici__ray {
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-buyuk);
}
.kaydirici__ray::-webkit-scrollbar { display: none; }
.kaydirici__oge { scroll-snap-align: start; display: block; border-radius: var(--r-buyuk); overflow: hidden; background: var(--yuzey); }
.kaydirici__oge img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
@media (max-width: 640px) { .kaydirici__oge img { aspect-ratio: 4 / 3; } }
.kaydirici__ok {
    position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px;
    display: none; place-items: center; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--murekkep);
}
.kaydirici__ok--sol { left: 12px; }
.kaydirici__ok--sag { right: 12px; }
@media (min-width: 900px) { .kaydirici__ok { display: grid; } }

/* --- Boş durum ------------------------------------------------------------ */
.bos { max-width: 460px; margin: 24px auto; text-align: center; display: grid; justify-items: center; gap: 12px; }
.bos .ikon { width: 56px; height: 56px; color: var(--kraft); }
.bos h1, .bos h2 { font-size: var(--boy-2xl); font-stretch: 75%; font-weight: 800; }
.bos p { color: var(--murekkep-2); }
.bos .dugme { margin-top: 8px; }

/* --- Güvence şeridi ------------------------------------------------------- */
.guvence { border-top: 1px solid var(--cizgi); background: var(--zemin); }
.guvence__ic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; padding-block: 28px; }
@media (min-width: 1000px) { .guvence__ic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 36px; } }
.guvence__madde { display: flex; gap: 12px; align-items: flex-start; }
.guvence__madde .ikon { width: 28px; height: 28px; color: var(--murekkep); margin-top: 1px; }
.guvence__madde strong { display: block; font-size: var(--boy-s); font-weight: 700; }
.guvence__madde span { display: block; font-size: var(--boy-xs); color: var(--soluk); line-height: 1.4; margin-top: 2px; }
@media (max-width: 520px) {
    .guvence__ic { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Alt bölüm ------------------------------------------------------------ */
.alt { background: var(--murekkep); color: #C9CFD9; padding-bottom: calc(var(--alt-menu) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .alt { padding-bottom: 0; } }
.alt a { color: #E6E9EE; text-decoration: none; }
.alt a:hover { color: #fff; text-decoration: underline; }
.alt__ic { display: grid; gap: 32px; padding-block: 40px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alt__marka { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; }
.alt__marka p { font-size: var(--boy-s); max-width: 40ch; line-height: 1.55; }
.alt__iletisim { list-style: none; display: grid; gap: 6px; font-size: var(--boy-s); }
.alt__sutun h2 { font-size: var(--boy-s); font-stretch: 100%; font-weight: 700; color: #fff; margin-bottom: 12px; }
.alt__sutun ul { list-style: none; display: grid; gap: 9px; font-size: var(--boy-s); }
.alt__sutun:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
    .alt__ic { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; padding-block: 56px 40px; }
    .alt__marka, .alt__sutun:last-child { grid-column: auto; }
}
.alt__dip {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
    padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--boy-xs);
}
.odeme-isaretleri { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.odeme-isaretleri li {
    padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-kucuk);
    font-weight: 700; font-size: 11.5px; color: #E6E9EE;
}

/* --- Mobil alt menü ------------------------------------------------------- */
.alt-menu {
    position: fixed; inset: auto 0 0 0; z-index: 45;
    display: grid; grid-template-columns: repeat(4, 1fr);
    height: calc(var(--alt-menu) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--zemin); border-top: 1px solid var(--cizgi);
}
.alt-menu > a, .alt-menu > button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; text-decoration: none; font-size: 11.5px; font-weight: 600; color: var(--soluk);
}
.alt-menu [aria-current="page"] { color: var(--murekkep); }
.alt-menu [aria-current="page"] .ikon { color: var(--murekkep); }
.alt-menu [aria-current="page"]::before {
    content: ""; position: absolute; top: 0; width: 28px; height: 3px; background: var(--sari); border-radius: 0 0 3px 3px;
}
.alt-menu > a { position: relative; }
@media (min-width: 900px) { .alt-menu { display: none; } }

/* --- Çerez bildirimi ------------------------------------------------------ */
.cerez {
    position: fixed; z-index: 50; left: 8px; right: 8px; bottom: calc(var(--alt-menu) + env(safe-area-inset-bottom) + 8px);
    display: grid; gap: 12px; padding: 16px; max-width: 560px;
    background: var(--zemin); border: 1px solid var(--cizgi-koyu); border-radius: var(--r-buyuk);
    box-shadow: 0 12px 32px rgba(27, 37, 54, .18); font-size: var(--boy-s);
}
.cerez[hidden] { display: none; }
.cerez a { font-weight: 600; }
.cerez__dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.cerez__dugmeler .dugme { flex: 1; min-height: 42px; font-size: var(--boy-s); }
@media (min-width: 900px) { .cerez { left: 24px; right: auto; bottom: 24px; } }

/* --- Formlar -------------------------------------------------------------- */
.form { display: grid; gap: 20px; }
.form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 16px; }
.form legend { padding: 0; margin-bottom: 12px; font-weight: 750; font-stretch: 85%; font-size: var(--boy-l); }
.form__satir { display: grid; gap: 16px; }
@media (min-width: 640px) {
    .form__satir--iki { grid-template-columns: 1fr 1fr; }
    .form__satir--iki:has(.alan--dar) { grid-template-columns: 1fr 120px; }
    .form__satir--uc { grid-template-columns: repeat(3, 1fr); }
    .form__satir--dort { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 639px) { .form__satir--dort { grid-template-columns: 1fr 1fr; } }
.alan { display: grid; gap: 6px; align-content: start; }
.alan label { font-size: var(--boy-s); font-weight: 650; }
.alan input, .alan select, .alan textarea {
    width: 100%; min-height: 46px; padding: 10px 14px;
    background: var(--zemin); border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r);
    font-size: var(--boy-m); appearance: none;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan input:hover, .alan select:hover { border-color: var(--soluk); }
.alan input:focus, .alan select:focus, .alan textarea:focus {
    outline: none; border-color: var(--murekkep); box-shadow: 0 0 0 3px rgba(255, 194, 26, .55);
}
.alan__ipucu { font-size: var(--boy-xs); color: var(--soluk); line-height: 1.45; }
.secim { display: flex; gap: 10px; align-items: flex-start; font-size: var(--boy-s); cursor: pointer; }
.secim input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--murekkep); flex: none; }

/* --- Kurulum -------------------------------------------------------------- */
.kurulum { background: var(--yuzey); min-height: 100vh; }
.kurulum__cerceve { display: grid; min-height: 100vh; }
.kurulum__yan { background: var(--murekkep); color: #C9CFD9; padding: 20px var(--kenar); display: grid; gap: 14px; align-content: start; }
.kurulum__yan-not { font-size: var(--boy-s); }
.kurulum__adimlar { list-style: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; font-size: var(--boy-s); }
.kurulum__adimlar li { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 6px 10px 6px 6px; border-radius: 20px; }
.kurulum__adimlar li:not(.simdi) { font-size: 0; gap: 0; padding: 6px; }
.kurulum__no {
    width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .35); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.kurulum__adimlar .simdi { background: rgba(255, 255, 255, .08); color: #fff; }
.kurulum__adimlar .simdi .kurulum__no { background: var(--sari); border-color: var(--sari); color: var(--murekkep); }
.kurulum__adimlar .bitti .kurulum__no { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; }
.kurulum__ana { padding: 28px var(--kenar) 48px; max-width: 760px; width: 100%; }
.kurulum__ana h1 { font-size: var(--boy-2xl); font-stretch: 75%; font-weight: 800; margin-bottom: 10px; }
.kurulum__aciklama { color: var(--murekkep-2); margin-bottom: 28px; max-width: 62ch; }
.kurulum__eylem { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--cizgi); }
.kurulum__eylem > :only-child { margin-left: auto; }
@media (min-width: 900px) {
    .kurulum__cerceve { grid-template-columns: 300px 1fr; }
    .kurulum__yan { padding: 40px 32px; gap: 18px; position: sticky; top: 0; height: 100vh; }
    .kurulum__adimlar { flex-direction: column; gap: 4px; overflow: visible; margin-top: 16px; }
    .kurulum__adimlar li, .kurulum__adimlar li:not(.simdi) { font-size: var(--boy-s); gap: 12px; padding: 8px 12px 8px 8px; border-radius: var(--r); }
    .kurulum__ana { padding: 64px 56px; }
}
.kontrol-tablosu { width: 100%; border-collapse: collapse; background: var(--zemin); border-radius: var(--r); overflow: hidden; font-size: var(--boy-s); }
.kontrol-tablosu th, .kontrol-tablosu td { padding: 12px 14px; border-bottom: 1px solid var(--yuzey-2); text-align: left; }
.kontrol-tablosu th { font-weight: 600; }
.kontrol-tablosu th small { font-weight: 400; color: var(--soluk); }
.kontrol-tablosu td { color: var(--soluk); font-variant-numeric: tabular-nums; }
.kontrol-tablosu__durum { text-align: right !important; font-weight: 700; white-space: nowrap; }
.kontrol-tablosu .tamam .kontrol-tablosu__durum { color: var(--yesil); }
.kontrol-tablosu .eksik { background: var(--kirmizi-acik); }
.kontrol-tablosu .eksik .kontrol-tablosu__durum { color: var(--kirmizi); }
.kontrol-tablosu .uyari .kontrol-tablosu__durum { color: var(--kraft-koyu); }
.kurulum .form { background: var(--zemin); padding: 24px; border-radius: var(--r-buyuk); border: 1px solid var(--cizgi); }
.kurulum .form fieldset + fieldset { padding-top: 20px; border-top: 1px solid var(--yuzey-2); }
.kurulum .form .kurulum__eylem { margin-top: 4px; }

.anahtar-kutusu { background: var(--zemin); border: 2px solid var(--murekkep); border-radius: var(--r-buyuk); padding: 24px; display: grid; gap: 14px; }
.anahtar-kutusu h2 { font-size: var(--boy-l); }
.anahtar-kutusu p { color: var(--murekkep-2); font-size: var(--boy-s); }
.anahtar-kutusu__deger { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.anahtar-kutusu__deger code { flex: 1 1 280px; padding: 12px; font-size: 13px; word-break: break-all; background: var(--kraft-acik); border: 1px dashed var(--kraft); }
.anahtar-kutusu__bilgi { margin: 0; display: grid; gap: 8px; font-size: var(--boy-s); }
.anahtar-kutusu__bilgi div { display: flex; gap: 12px; }
.anahtar-kutusu__bilgi dt { color: var(--soluk); min-width: 96px; }
.anahtar-kutusu__bilgi dd { margin: 0; font-weight: 600; }

/* ==========================================================================
   Vitrin sayfaları (3. adım)
   ========================================================================== */

/* --- Kırıntı ---------------------------------------------------------------- */
.kirinti { padding-block: 14px 4px; font-size: var(--boy-xs); color: var(--soluk); overflow-x: auto; scrollbar-width: none; }
.kirinti::-webkit-scrollbar { display: none; }
.kirinti ol { list-style: none; display: flex; gap: 6px; white-space: nowrap; }
.kirinti li + li::before { content: "/"; margin-right: 6px; color: var(--cizgi-koyu); }
.kirinti a { text-decoration: none; color: var(--murekkep-2); }
.kirinti a:hover { text-decoration: underline; }
.kirinti [aria-current] { color: var(--soluk); }

/* --- Liste başlığı ve çipler --------------------------------------------- */
.liste-sayfasi { padding-bottom: 48px; }
.liste-baslik { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-block: 8px 14px; }
.liste-baslik h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); font-stretch: 72%; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.liste-baslik__sayi { color: var(--soluk); font-size: var(--boy-s); font-variant-numeric: tabular-nums; }

.cip-listesi, .secili-filtreler { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.cip-listesi { margin-bottom: 18px; }
.cip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
    border: 1px solid var(--cizgi-koyu); border-radius: 18px; background: var(--zemin);
    font-size: var(--boy-s); font-weight: 600; text-decoration: none; color: var(--murekkep);
}
.cip small { color: var(--soluk); font-weight: 500; font-variant-numeric: tabular-nums; }
.cip:hover { border-color: var(--murekkep); }
.cip--secili { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.cip--secili .ikon { width: 14px; height: 14px; }
.cip--secili:hover { background: var(--murekkep-2); }
.secili-filtreler { margin-bottom: 16px; align-items: center; }
.secili-filtreler__temizle { font-size: var(--boy-s); font-weight: 600; margin-left: 4px; }

/* --- Liste düzeni: filtre sütunu + ürünler -------------------------------- */
.liste-duzen { display: block; }
.liste-duzen__yan { display: none; }
@media (min-width: 1000px) {
    .liste-duzen { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 32px; align-items: start; }
    .liste-duzen__yan { display: block; position: sticky; top: calc(var(--ust-yukseklik) + 64px); max-height: calc(100vh - var(--ust-yukseklik) - 80px); overflow-y: auto; padding-right: 4px; }
    .liste-duzen__yan .filtre__eylem { display: none; }
    .arac-cubugu__filtre { display: none !important; }
}
@media (min-width: 1100px) { .urun-izgara--liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .urun-izgara--liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

.arac-cubugu {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px;
    position: sticky; top: 117px; z-index: 5; background: var(--zemin); padding-block: 8px;
}
@media (min-width: 900px) { .arac-cubugu { position: static; justify-content: flex-end; padding-block: 0; } }
.arac-cubugu__filtre { min-height: 42px; flex: 1; max-width: 50%; }
.rozet { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--sari); font-size: 12px; font-weight: 800; }
.siralama { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }
.siralama label { font-size: var(--boy-s); color: var(--soluk); white-space: nowrap; }
.siralama select {
    min-height: 42px; padding: 0 36px 0 12px; max-width: 100%; border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r);
    background: var(--zemin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%231B2536' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center / 18px;
    appearance: none; font-size: var(--boy-s); font-weight: 600;
}
@media (max-width: 520px) { .siralama label { display: none; } .siralama select { width: 100%; } }

/* --- Filtre formu --------------------------------------------------------- */
.filtre { display: grid; gap: 4px; }
.filtre__grup { margin: 0; padding: 16px 0; border: 0; border-bottom: 1px solid var(--yuzey-2); display: grid; gap: 10px; }
.filtre__grup:first-of-type { padding-top: 4px; }
.filtre__grup legend { padding: 0; margin-bottom: 10px; font-weight: 750; font-stretch: 85%; font-size: var(--boy-m); }
.filtre__liste { display: grid; gap: 10px; }
.filtre__liste--uzun { max-height: 290px; overflow-y: auto; padding-right: 6px; }
.filtre .secim small { color: var(--soluk); font-variant-numeric: tabular-nums; margin-left: 2px; }
.secim--koli span { color: var(--kraft-koyu); font-weight: 650; }
.filtre__fiyat { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }
.filtre__fiyat > span { padding-bottom: 12px; color: var(--soluk); }
.filtre__fiyat .alan input { min-height: 42px; font-size: var(--boy-s); }
.filtre__fiyat .alan label { font-size: var(--boy-xs); font-weight: 600; color: var(--soluk); }
.filtre__eylem { padding-top: 16px; }
.filtre__eylem .dugme { width: 100%; }

/* Sağdan açılan çekmece (mobil filtre) */
.cekmece--sag { margin-left: auto; }
.cekmece--sag[open] { animation-name: cekmece-sag; }
@keyframes cekmece-sag { from { transform: translateX(100%); } to { transform: none; } }
.cekmece__icerik { flex: 1; overflow-y: auto; padding: 4px var(--kenar) calc(16px + env(safe-area-inset-bottom)); }
.cekmece__icerik .filtre__eylem { position: sticky; bottom: 0; background: var(--zemin); padding-bottom: 8px; }

/* --- Sayfalama ------------------------------------------------------------ */
.sayfalama { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.sayfalama__liste { list-style: none; display: flex; gap: 4px; }
.sayfalama a, .sayfalama span[aria-current] {
    display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 8px;
    border-radius: var(--r); text-decoration: none; font-weight: 650; font-variant-numeric: tabular-nums;
}
.sayfalama__liste a:hover { background: var(--yuzey); }
.sayfalama span[aria-current] { background: var(--murekkep); color: #fff; }
.sayfalama__ok { display: inline-flex !important; gap: 4px; border: 1.5px solid var(--cizgi-koyu); padding: 0 12px !important; }
.sayfalama__ok:hover { border-color: var(--murekkep); }
.sayfalama__bosluk { display: grid; place-items: center; width: 24px; color: var(--soluk); }
@media (max-width: 520px) { .sayfalama__ok span { display: none; } }

.bos--sol { text-align: left; justify-items: start; margin: 24px 0; }
.kategori-aciklama { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--cizgi); max-width: 75ch; color: var(--murekkep-2); font-size: var(--boy-s); }
.kategori-aciklama p + p { margin-top: 10px; }

/* --- Ürün sayfası ------------------------------------------------------- */
.urun-sayfa { padding-bottom: 32px; }
.urun-ust { display: grid; gap: 20px; padding-top: 6px; }
@media (min-width: 900px) {
    .urun-ust { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; padding-top: 12px; }
    .galeri { position: sticky; top: calc(var(--ust-yukseklik) + 64px); }
}
@media (min-width: 1200px) { .urun-ust { gap: 64px; } }

.galeri { min-width: 0; }
.galeri__ray {
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    background: #fff; border-block: 1px solid var(--cizgi);
    margin-inline: calc(var(--kenar) * -1);
}
@media (min-width: 640px) { .galeri__ray { margin-inline: 0; border-radius: var(--r-buyuk); border: 1px solid var(--cizgi); } }
.galeri__ray::-webkit-scrollbar { display: none; }
.galeri__oge { margin: 0; scroll-snap-align: start; aspect-ratio: 1; display: grid; place-items: center; }
.galeri__oge img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.galeri__oge--bos { background: var(--yuzey); color: var(--cizgi-koyu); gap: 8px; align-content: center; }
.galeri__oge--bos .ikon { width: 72px; height: 72px; }
.galeri__oge--bos figcaption { font-size: var(--boy-s); color: var(--soluk); }
.galeri__kucukler { list-style: none; display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.galeri__kucukler button { width: 64px; height: 64px; padding: 4px; border: 1.5px solid var(--cizgi); border-radius: var(--r); background: #fff; }
.galeri__kucukler button[aria-current="true"] { border-color: var(--murekkep); }
.galeri__kucukler img { width: 100%; height: 100%; object-fit: contain; }

.urun-bilgi__marka { font-size: var(--boy-s); color: var(--soluk); font-weight: 600; margin-bottom: 4px; }
.urun-bilgi__ad { font-size: clamp(1.5rem, 4.4vw, 2.25rem); font-stretch: 78%; font-weight: 800; line-height: 1.08; letter-spacing: -0.015em; }
.urun-bilgi__kod { margin-top: 8px; font-size: var(--boy-xs); color: var(--soluk); font-variant-numeric: tabular-nums; }
.urun-bilgi__ozet { margin-top: 14px; color: var(--murekkep-2); max-width: 60ch; }

.satin-al { margin-top: 20px; display: grid; gap: 14px; }
.birim-secimi { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.birim-secimi legend { padding: 0; margin-bottom: 10px; font-weight: 700; font-size: var(--boy-s); }
.birim-secenek {
    position: relative; display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: "radyo ad fiyat" "radyo not not";
    align-items: center; gap: 2px 12px; padding: 14px 16px; cursor: pointer;
    border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r-buyuk); background: var(--zemin);
    transition: border-color var(--gecis), box-shadow var(--gecis), background-color var(--gecis);
}
.birim-secenek:hover { border-color: var(--murekkep-2); }
.birim-secenek input { grid-area: radyo; width: 20px; height: 20px; margin: 0; accent-color: var(--murekkep); }
.birim-secenek__ad { grid-area: ad; font-weight: 750; font-stretch: 88%; font-size: 1.0625rem; }
.birim-secenek__ad small { font-weight: 500; font-stretch: 100%; color: var(--soluk); font-size: var(--boy-s); margin-left: 4px; }
.birim-secenek__fiyat { grid-area: fiyat; font-weight: 800; font-stretch: 85%; font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.birim-secenek__not { grid-area: not; font-size: var(--boy-s); color: var(--soluk); }
.birim-secenek:has(input:checked) { border-color: var(--murekkep); box-shadow: 0 0 0 1px var(--murekkep); }
.birim-secenek--koli { background: var(--kraft-acik); border-color: var(--kraft); }
.birim-secenek--koli .birim-secenek__not { color: var(--kraft-koyu); }
.birim-secenek--koli .birim-secenek__not strong { font-weight: 750; }
.birim-secenek--koli:has(input:checked) { border-color: var(--kraft-koyu); box-shadow: 0 0 0 1px var(--kraft-koyu); }

.satin-al__alt { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sayac-kutusu { display: inline-flex; align-items: stretch; height: 52px; border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r); overflow: hidden; }
.sayac-kutusu button { width: 48px; border: 0; background: var(--zemin); font-size: 1.375rem; font-weight: 600; color: var(--murekkep); }
.sayac-kutusu button:hover { background: var(--yuzey); }
.sayac-kutusu input {
    width: 56px; border: 0; border-inline: 1px solid var(--cizgi); text-align: center; font-weight: 700; font-size: 1.0625rem;
    font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield;
}
.sayac-kutusu input::-webkit-outer-spin-button, .sayac-kutusu input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sayac-kutusu input:focus { outline: none; background: var(--kraft-acik); }
.satin-al__toplam { text-align: right; line-height: 1.15; }
.satin-al__toplam-etiket { display: block; font-size: var(--boy-xs); color: var(--soluk); }
.satin-al__toplam strong { font-size: 1.5rem; font-weight: 800; font-stretch: 85%; font-variant-numeric: tabular-nums; }
.satin-al__dugme { width: 100%; }
.satin-al__kdv { font-size: var(--boy-xs); color: var(--soluk); text-align: center; margin-top: -4px; }

.teslimat-bilgisi { list-style: none; margin-top: 20px; border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); }
.teslimat-bilgisi li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; font-size: var(--boy-s); color: var(--murekkep-2); }
.teslimat-bilgisi li + li { border-top: 1px solid var(--yuzey-2); }
.teslimat-bilgisi .ikon { width: 20px; height: 20px; color: var(--murekkep); margin-top: 1px; }
.teslimat-bilgisi strong { color: var(--murekkep); }

.satista-degil { margin-top: 20px; padding: 16px; border-radius: var(--r-buyuk); background: var(--yuzey); border-left: 4px solid var(--cizgi-koyu); }
.satista-degil p { font-size: var(--boy-s); color: var(--soluk); margin-top: 4px; }

.urun-ayrinti { display: grid; gap: 32px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--cizgi); }
@media (min-width: 900px) { .urun-ayrinti { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; margin-top: 64px; } }
.urun-ayrinti__bolum h2 { font-size: var(--boy-l); font-stretch: 80%; font-weight: 750; margin-bottom: 14px; }
.urun-ayrinti__bolum:only-child { grid-column: 1 / -1; max-width: 640px; }
.ozellik-tablosu { margin: 0; border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); overflow: hidden; font-size: var(--boy-s); }
.ozellik-tablosu div { display: grid; grid-template-columns: 40% 1fr; }
.ozellik-tablosu div:nth-child(odd) { background: var(--yuzey); }
.ozellik-tablosu dt { padding: 10px 14px; color: var(--soluk); }
.ozellik-tablosu dd { margin: 0; padding: 10px 14px; font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-word; }

/* Uzun metin (açıklamalar, yasal sayfalar) */
.metin { max-width: 72ch; line-height: 1.65; color: var(--murekkep-2); }
.metin h1 { font-size: clamp(1.75rem, 5vw, 2.4rem); font-stretch: 75%; font-weight: 800; color: var(--murekkep); line-height: 1.05; margin-bottom: 20px; }
.metin h2 { font-size: var(--boy-l); color: var(--murekkep); margin: 28px 0 10px; }
.metin h3 { font-size: var(--boy-m); color: var(--murekkep); margin: 20px 0 8px; }
.metin p, .metin ul, .metin ol { margin-bottom: 12px; }
.metin ul, .metin ol { padding-left: 22px; }
.metin li + li { margin-top: 4px; }
.metin table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: var(--boy-s); }
.metin th, .metin td { border: 1px solid var(--cizgi); padding: 8px 10px; text-align: left; }
.metin__bos { padding: 16px; background: var(--yuzey); border-radius: var(--r); }
.metin__tarih { margin-top: 32px; font-size: var(--boy-xs); color: var(--soluk); }

.bolum--dar { padding-block: 40px 8px; }
/* Mobilde benzer ürünler yatay kayar */
@media (max-width: 719px) {
    .urun-izgara--kaydir {
        grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%;
        overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
        margin-inline: calc(var(--kenar) * -1); padding-inline: var(--kenar);
    }
    .urun-izgara--kaydir::-webkit-scrollbar { display: none; }
    .urun-izgara--kaydir > * { scroll-snap-align: start; }
}

/* Mobil: ürün sayfasında alt menü yerine yapışkan sepet çubuğu */
.yapiskan-sepet { display: none; }
@media (max-width: 899px) {
    body.urun-sayfasi .alt-menu { display: none; }
    body.urun-sayfasi .alt { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    body.urun-sayfasi .cerez { bottom: calc(84px + env(safe-area-inset-bottom)); }
    .yapiskan-sepet {
        position: fixed; inset: auto 0 0 0; z-index: 45;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 10px var(--kenar) calc(10px + env(safe-area-inset-bottom));
        background: var(--zemin); border-top: 1px solid var(--cizgi);
        box-shadow: 0 -6px 18px rgba(27, 37, 54, .08);
        transform: translateY(110%); transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
    }
    .yapiskan-sepet.gorunur { transform: none; }
    .yapiskan-sepet__fiyat { line-height: 1.15; }
    .yapiskan-sepet__fiyat span { display: block; font-size: var(--boy-xs); color: var(--soluk); }
    .yapiskan-sepet__fiyat strong { font-size: 1.25rem; font-weight: 800; font-stretch: 85%; font-variant-numeric: tabular-nums; }
    .yapiskan-sepet .dugme { min-height: 48px; padding: 0 28px; }
}

/* --- Kurumsal/yasal sayfa düzeni ---------------------------------------- */
.sayfa-duzen { padding-bottom: 56px; }
.sayfa-duzen__ic { display: grid; gap: 24px; padding-top: 12px; }
@media (min-width: 900px) { .sayfa-duzen__ic { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding-top: 24px; } }
.sayfa-duzen__ic > :only-child { grid-column: 1 / -1; }
.sayfa-duzen__yan ul { list-style: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 900px) { .sayfa-duzen__yan ul { flex-direction: column; position: sticky; top: calc(var(--ust-yukseklik) + 64px); } }
.sayfa-duzen__yan a { display: block; padding: 9px 12px; border-radius: var(--r); text-decoration: none; font-size: var(--boy-s); font-weight: 600; color: var(--murekkep-2); white-space: nowrap; }
.sayfa-duzen__yan a:hover { background: var(--yuzey); }
.sayfa-duzen__yan a[aria-current] { background: var(--murekkep); color: #fff; }

/* --- Arama önerileri ------------------------------------------------------ */
.oneri {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
    background: var(--zemin); border: 1px solid var(--cizgi-koyu); border-radius: var(--r-buyuk);
    box-shadow: 0 16px 40px rgba(27, 37, 54, .16); overflow: hidden;
}
.oneri[hidden] { display: none; }
.oneri__baslik { padding: 10px 14px 4px; font-size: var(--boy-xs); color: var(--soluk); font-weight: 600; }
.oneri__liste { list-style: none; }
.oneri a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 8px 14px; text-decoration: none; }
.oneri a:hover, .oneri a.secili { background: var(--yuzey); }
.oneri__gorsel { width: 44px; height: 44px; border-radius: 6px; background: var(--yuzey); object-fit: contain; display: grid; place-items: center; color: var(--cizgi-koyu); }
.oneri__gorsel .ikon { width: 22px; height: 22px; }
.oneri__ad { font-size: var(--boy-s); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oneri__fiyat { font-weight: 750; font-size: var(--boy-s); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.oneri__fiyat small { display: block; font-weight: 500; color: var(--soluk); font-size: 11.5px; }
.oneri__kategori a { grid-template-columns: 1fr; padding-block: 9px; font-size: var(--boy-s); font-weight: 600; }
.oneri a.oneri__tumu { display: block; padding: 12px 14px; border-top: 1px solid var(--yuzey-2); font-size: var(--boy-s); font-weight: 700; text-align: center; }

/* ==========================================================================
   Formlar (ortak eklemeler)
   ========================================================================== */
.alan select {
    padding-right: 40px; cursor: pointer;
    background: var(--zemin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231B2536' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
}
.alan select:disabled, .alan input:disabled { background-color: var(--yuzey); color: var(--soluk); cursor: not-allowed; }
.alan textarea { min-height: 72px; resize: vertical; line-height: 1.45; }
.alan [aria-invalid="true"] { border-color: var(--kirmizi); background-color: #FFFBFA; }
.alan__hata { font-size: var(--boy-xs); color: var(--kirmizi); font-weight: 600; line-height: 1.4; }
.secim + .alan__hata { margin-top: -10px; }
.alan__ust { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.alan__ust a { font-size: var(--boy-xs); font-weight: 600; }
.alan__istege { font-weight: 500; color: var(--soluk); font-size: var(--boy-xs); margin-left: 4px; }
.form__eylem { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; padding-top: 8px; }
.form__ayrac { margin-top: 8px !important; padding-top: 20px !important; border-top: 1px solid var(--yuzey-2) !important; }
.dugme--tam { width: 100%; }
.dugme--kucuk { min-height: 34px; padding: 0 12px; font-size: var(--boy-s); }
.baglanti { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.yesil { color: var(--yesil); font-weight: 700; }
.satir-ici { display: inline; }

/* Bölümlü seçim (bireysel / kurumsal) */
.bolumlu-secim { justify-self: start; display: inline-flex; padding: 3px; gap: 3px; background: var(--yuzey); border-radius: var(--r); }
.bolumlu-secim label { position: relative; cursor: pointer; }
.bolumlu-secim input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bolumlu-secim span { display: block; padding: 8px 16px; border-radius: 6px; font-size: var(--boy-s); font-weight: 650; color: var(--murekkep-2); }
.bolumlu-secim input:checked + span { background: var(--zemin); color: var(--murekkep); box-shadow: 0 1px 3px rgba(27, 37, 54, .14); }
.bolumlu-secim input:focus-visible + span { outline: 3px solid var(--sari); }
.fatura-turu { margin: 0; padding: 0; border: 0; display: grid; gap: 14px; }
.fatura-turu legend { padding: 0; margin-bottom: 10px; font-weight: 700; font-size: var(--boy-s); }
.fatura-turu__kurumsal { display: grid; gap: 14px; }
.fatura-turu__kurumsal[hidden], .fatura-turu__bireysel[hidden] { display: none; }
.adres-alanlari { display: grid; gap: 16px; }

/* Kutu ve dar sayfa */
.kutu { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); padding: 20px; }
@media (min-width: 640px) { .kutu { padding: 28px; } }
.kutu > h1, .kutu > h2:first-child { font-size: var(--boy-2xl); font-stretch: 76%; font-weight: 800; margin-bottom: 8px; }
.kutu__aciklama { color: var(--murekkep-2); margin-bottom: 20px; }
.dar-sayfa { max-width: 520px; padding-block: 32px 64px; }

/* --- Bildirim kutucuğu (sepete eklendi) ----------------------------------- */
.tost {
    position: fixed; z-index: 70; left: 50%; bottom: calc(var(--alt-menu) + env(safe-area-inset-bottom) + 12px);
    translate: -50% 0; width: min(calc(100% - 24px), 420px);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
    padding: 12px 12px 12px 16px; border-radius: var(--r-buyuk);
    background: var(--murekkep); color: #fff; box-shadow: 0 14px 34px rgba(27, 37, 54, .28);
    animation: tost-gel 220ms cubic-bezier(.2, .8, .2, 1);
}
.tost[hidden] { display: none; }
.tost .ikon { color: var(--sari); }
.tost__metin { font-size: var(--boy-s); line-height: 1.35; }
.tost__metin strong { display: block; }
.tost__metin small { color: #C9CFD9; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tost a { white-space: nowrap; padding: 8px 12px; border-radius: 6px; background: var(--sari); color: var(--murekkep); font-weight: 700; font-size: var(--boy-s); text-decoration: none; }
.tost--hata { background: var(--kirmizi); }
.tost--hata .ikon { color: #fff; }
@keyframes tost-gel { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .tost { bottom: 24px; left: auto; right: 24px; translate: none; } }
.fiyat-satiri__ekle.ekleniyor, .satin-al__dugme.ekleniyor { opacity: .6; pointer-events: none; }

/* ==========================================================================
   Giriş ve hesap
   ========================================================================== */
.giris-sayfa { padding-block: 24px 64px; }
.giris-sayfa__ic { display: grid; gap: 20px; align-items: start; }
.giris-sayfa__sekmeler { display: flex; gap: 4px; margin-bottom: 16px; padding: 4px; background: var(--yuzey); border-radius: var(--r); }
.giris-sayfa__sekmeler button { flex: 1; min-height: 42px; border: 0; border-radius: 6px; background: none; font-weight: 700; color: var(--murekkep-2); }
.giris-sayfa__sekmeler [aria-selected="true"] { background: var(--zemin); color: var(--murekkep); box-shadow: 0 1px 3px rgba(27, 37, 54, .14); }
@media (max-width: 899px) {
    .giris-sayfa__ic[data-sekme-alani="giris"] #panel-kayit,
    .giris-sayfa__ic[data-sekme-alani="kayit"] #panel-giris { display: none; }
}
@media (min-width: 900px) {
    .giris-sayfa { padding-top: 48px; }
    .giris-sayfa__sekmeler { display: none; }
    .giris-sayfa__ic { grid-template-columns: 1fr 1.15fr; gap: 32px; max-width: 1040px; margin-inline: auto; }
}
.giris-sayfa__panel h1, .giris-sayfa__panel h2 { font-size: var(--boy-2xl); }
.giris-sayfa__misafir { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--yuzey-2); font-size: var(--boy-s); color: var(--murekkep-2); }
.giris-sayfa__misafir a { font-weight: 700; }

.hesap-sayfa { padding-block: 20px 64px; }
.hesap-sayfa__ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.hesap-sayfa__selam { font-weight: 700; font-stretch: 85%; font-size: var(--boy-l); }
.hesap-sayfa__ic { display: grid; gap: 20px; }
@media (min-width: 900px) { .hesap-sayfa__ic { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; } }
.hesap-sayfa__icerik > h1 { font-size: var(--boy-2xl); font-stretch: 76%; font-weight: 800; margin-bottom: 18px; }
.hesap-menu ul { list-style: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 900px) { .hesap-menu ul { flex-direction: column; position: sticky; top: calc(var(--ust-yukseklik) + 64px); } }
.hesap-menu a { display: block; padding: 10px 14px; border-radius: var(--r); text-decoration: none; font-weight: 650; font-size: var(--boy-s); color: var(--murekkep-2); white-space: nowrap; background: var(--yuzey); }
@media (min-width: 900px) { .hesap-menu a { background: none; } }
.hesap-menu a:hover { background: var(--yuzey-2); }
.hesap-menu a[aria-current] { background: var(--murekkep); color: #fff; }

.siparis-listesi { list-style: none; display: grid; gap: 10px; }
.siparis-satiri {
    display: grid; grid-template-columns: 1fr auto 20px; grid-template-areas: "no durum ok" "tutar tutar ok";
    align-items: center; gap: 6px 12px; padding: 14px 16px; text-decoration: none;
    border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); background: var(--zemin);
}
.siparis-satiri:hover { border-color: var(--cizgi-koyu); }
.siparis-satiri__no { grid-area: no; display: grid; }
.siparis-satiri__no small { color: var(--soluk); font-size: var(--boy-xs); }
.siparis-satiri .durum { grid-area: durum; }
.siparis-satiri__tutar { grid-area: tutar; font-weight: 750; font-variant-numeric: tabular-nums; }
.siparis-satiri .ikon { grid-area: ok; color: var(--soluk); width: 18px; height: 18px; }
@media (min-width: 640px) {
    .siparis-satiri { grid-template-columns: 1fr auto 130px 20px; grid-template-areas: "no durum tutar ok"; }
    .siparis-satiri__tutar { text-align: right; }
}

/* Sipariş durumu rozetleri */
.durum { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: var(--boy-xs); font-weight: 700; white-space: nowrap; background: var(--yuzey); color: var(--murekkep-2); }
.durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.durum--alindi, .durum--onaylandi { background: #E8EEF9; color: #23468F; }
.durum--hazirlaniyor { background: var(--kraft-acik); color: var(--kraft-koyu); }
.durum--kargoda { background: #FFF4D1; color: #7A5A00; }
.durum--teslim_edildi { background: var(--yesil-acik); color: var(--yesil); }
.durum--iptal, .durum--iade { background: var(--kirmizi-acik); color: var(--kirmizi); }
.durum--odeme_bekliyor { background: var(--yuzey); color: var(--soluk); }

.adres-izgara { display: grid; gap: 12px; }
@media (min-width: 720px) { .adres-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adres-karti { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); background: var(--zemin); font-size: var(--boy-s); line-height: 1.5; color: var(--murekkep-2); }
.adres-karti--varsayilan { border-color: var(--murekkep); }
.adres-karti header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.adres-karti h2 { font-size: var(--boy-m); color: var(--murekkep); }
.adres-karti strong { color: var(--murekkep); }
.adres-karti__fatura { padding-top: 8px; border-top: 1px dashed var(--cizgi); }
.adres-karti footer { margin-top: auto; display: flex; gap: 8px; align-items: center; }
.adres-karti--yeni { align-items: center; justify-content: center; min-height: 160px; border-style: dashed; border-width: 1.5px; text-decoration: none; font-weight: 700; color: var(--murekkep); }
.adres-karti--yeni:hover { background: var(--yuzey); }
.rozet--acik { background: var(--yuzey); color: var(--murekkep-2); font-size: 11.5px; font-weight: 700; height: 22px; padding: 0 8px; }

/* ==========================================================================
   Sepet
   ========================================================================== */
.sepet-sayfa { padding-block: 8px 64px; }
.sepet-sayfa .liste-baslik { padding-top: 20px; }
.sepet-duzen { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .sepet-duzen { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; } }
.sepet-listesi { list-style: none; border-top: 1px solid var(--cizgi); }
.sepet-kalemi {
    display: grid; grid-template-columns: 72px 1fr auto; grid-template-areas: "gorsel bilgi bilgi" "gorsel miktar tutar" "gorsel sil sil";
    gap: 6px 14px; padding: 16px 0; border-bottom: 1px solid var(--cizgi); align-items: center;
}
.sepet-kalemi__gorsel { grid-area: gorsel; align-self: start; width: 72px; height: 72px; display: grid; place-items: center; border-radius: var(--r); background: var(--yuzey); color: var(--cizgi-koyu); overflow: hidden; }
.sepet-kalemi__gorsel img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sepet-kalemi__bilgi { grid-area: bilgi; min-width: 0; }
.sepet-kalemi__ad { font-weight: 650; line-height: 1.35; text-decoration: none; }
.sepet-kalemi__ad:hover { text-decoration: underline; }
.sepet-kalemi__birim { margin-top: 4px; font-size: var(--boy-xs); color: var(--soluk); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.birim-rozeti { padding: 2px 7px; border-radius: var(--r-kucuk); background: var(--yuzey-2); color: var(--murekkep-2); font-weight: 700; font-size: 11px; }
.birim-rozeti--koli { background: var(--kraft-acik); color: var(--kraft-koyu); box-shadow: inset 2px 0 0 var(--kraft); }
.sepet-kalemi__miktar { grid-area: miktar; display: flex; align-items: center; gap: 8px; }
.sepet-kalemi__toplam-adet { font-size: var(--boy-xs); color: var(--soluk); }
.sepet-kalemi__tutar { grid-area: tutar; font-weight: 800; font-stretch: 88%; font-size: 1.0625rem; font-variant-numeric: tabular-nums; text-align: right; }
.sepet-kalemi__sil { grid-area: sil; }
.sepet-kalemi__sil .dugme { min-height: 28px; font-size: var(--boy-xs); color: var(--soluk); }
@media (min-width: 720px) {
    .sepet-kalemi { grid-template-columns: 88px minmax(0, 1fr) auto 120px auto; grid-template-areas: "gorsel bilgi miktar tutar sil"; gap: 16px; }
    .sepet-kalemi__gorsel { width: 88px; height: 88px; align-self: center; }
}
.sayac-kutusu--kucuk { height: 40px; }
.sayac-kutusu--kucuk button { width: 38px; font-size: 1.125rem; display: grid; place-items: center; }
.sayac-kutusu--kucuk button .ikon { width: 15px; height: 15px; }
.sayac-kutusu--kucuk input { width: 46px; font-size: var(--boy-m); }
.sepet-duzen__devam { margin-top: 16px; }
.sepet-duzen__devam .ikon { width: 18px; height: 18px; }
[data-sepet-icerik].yukleniyor { opacity: .55; pointer-events: none; transition: opacity 120ms; }

.sepet-ozet { display: grid; gap: 16px; }
@media (min-width: 1000px) { .sepet-ozet { position: sticky; top: calc(var(--ust-yukseklik) + 64px); } }
.sepet-ozet__guvence { list-style: none; display: grid; gap: 8px; font-size: var(--boy-xs); color: var(--murekkep-2); }
.sepet-ozet__guvence li { display: flex; align-items: center; gap: 8px; }
.sepet-ozet__guvence .ikon { width: 17px; height: 17px; }

/* Ücretsiz kargo çubuğu: koli bandı gibi */
.kargo-cubugu p { font-size: var(--boy-s); margin-bottom: 8px; color: var(--murekkep-2); }
.kargo-cubugu p strong { color: var(--murekkep); }
.kargo-cubugu__ray { height: 12px; border-radius: 2px; background: var(--yuzey-2); overflow: hidden; }
.kargo-cubugu__ray span {
    display: block; height: 100%; border-radius: 2px; transition: width 300ms cubic-bezier(.2, .8, .2, 1);
    background: repeating-linear-gradient(-45deg, var(--kraft) 0 8px, #B98A4C 8px 16px);
}

.tutar-listesi { margin: 0; display: grid; gap: 8px; font-size: var(--boy-s); }
.tutar-listesi div { display: flex; justify-content: space-between; gap: 12px; }
.tutar-listesi dt { color: var(--murekkep-2); }
.tutar-listesi dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.tutar-listesi__toplam { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--cizgi); align-items: baseline; }
.tutar-listesi__toplam dt { font-weight: 750; color: var(--murekkep); font-size: var(--boy-m); }
.tutar-listesi__toplam dd { font-size: 1.5rem; font-weight: 800; font-stretch: 85%; }
.tutar-listesi__kdv dt, .tutar-listesi__kdv dd { font-size: var(--boy-xs); color: var(--soluk); font-weight: 500; }

/* ==========================================================================
   Ödeme
   ========================================================================== */
.odeme-sayfasi { background: var(--yuzey); }
.odeme-ust { background: var(--zemin); border-bottom: 1px solid var(--cizgi); }
.odeme-ust__ic { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.odeme-ust__guvenli { display: none; align-items: center; gap: 6px; margin-left: auto; font-size: var(--boy-s); font-weight: 650; color: var(--yesil); }
.odeme-ust__guvenli .ikon { width: 18px; height: 18px; }
.odeme-ust__sepet { margin-left: auto; font-size: var(--boy-s); font-weight: 650; }
@media (min-width: 640px) { .odeme-ust__guvenli { display: flex; } .odeme-ust__sepet { margin-left: 16px; } }
.odeme-alt { padding-block: 24px 40px; font-size: var(--boy-xs); color: var(--soluk); }
.odeme-alt .kap { display: grid; gap: 8px; }
.odeme-alt nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.odeme { padding-block: 20px 40px; }
.odeme__duzen { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1000px) { .odeme__duzen { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; } .odeme-mobil-ozet { display: none; } }
.odeme__adimlar { display: grid; gap: 14px; }
.odeme-adim { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); padding: 18px; display: grid; gap: 16px; }
@media (min-width: 640px) { .odeme-adim { padding: 24px 28px; } }
.odeme-adim h2 { display: flex; align-items: center; gap: 12px; font-size: var(--boy-l); font-stretch: 82%; font-weight: 800; }
.odeme-adim__no {
    width: 28px; height: 28px; display: grid; place-items: center; flex: none;
    border-radius: 50%; background: var(--murekkep); color: #fff; font-size: var(--boy-s); font-weight: 800; font-stretch: 100%;
}
.odeme-adim__bilgi { font-size: var(--boy-s); color: var(--murekkep-2); }
.odeme-adim__bilgi a { font-weight: 700; }

.secim-karti { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r-buyuk); cursor: pointer; background: var(--zemin); transition: border-color var(--gecis), box-shadow var(--gecis); }
.secim-karti:hover { border-color: var(--murekkep-2); }
.secim-karti input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--murekkep); flex: none; }
.secim-karti:has(input:checked) { border-color: var(--murekkep); box-shadow: 0 0 0 1px var(--murekkep); }
.secim-karti__govde { display: grid; gap: 2px; font-size: var(--boy-s); color: var(--murekkep-2); line-height: 1.45; }
.secim-karti__govde strong { color: var(--murekkep); font-size: var(--boy-m); }
.secim-karti--yeni .secim-karti__govde strong { color: var(--murekkep); }
.adres-secimi, .odeme-yontemleri { display: grid; gap: 10px; }
@media (min-width: 720px) { .adres-secimi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .odeme-yontemleri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.yeni-adres, .fatura-adresi { display: grid; gap: 14px; }
.yeni-adres[hidden], .fatura-adresi[hidden], [data-odeme-paneli][hidden] { display: none; }

.kart-formu { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-buyuk); background: var(--yuzey); }
.kart-formu .alan input, .kart-formu .alan select { background-color: var(--zemin); }
.kart-formu__alt { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 480px) { .kart-formu__alt { grid-template-columns: 1fr; } }
.kart-formu__skt { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; }
.kart-formu [data-kart-no] { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.kart-formu__not { display: flex; gap: 8px; align-items: flex-start; font-size: var(--boy-xs); color: var(--murekkep-2); }
.kart-formu__not .ikon { width: 16px; height: 16px; color: var(--yesil); margin-top: 1px; }

.havale-bilgisi { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-buyuk); background: var(--yuzey); font-size: var(--boy-s); color: var(--murekkep-2); }
.iban-listesi { list-style: none; display: grid; gap: 10px; }
.iban-listesi li { display: grid; gap: 2px; padding: 12px 14px; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--r); }
.iban-listesi strong { color: var(--murekkep); }
.iban-listesi code { justify-self: start; font-size: 14px; letter-spacing: .03em; background: none; padding: 0; margin-top: 4px; color: var(--murekkep); }
.iban-listesi .dugme { justify-self: start; margin-top: 6px; }
.odeme__not { margin-top: 4px; }

.odeme-ozet { display: grid; gap: 16px; }
.odeme-ozet > h2 { font-size: var(--boy-l) !important; }
@media (min-width: 1000px) { .odeme__ozet { position: sticky; top: 20px; } }
.odeme-ozet__kalemler { max-height: 300px; overflow-y: auto; margin-right: -8px; padding-right: 8px; }
.odeme-ozet__sozlesme { font-size: var(--boy-s); line-height: 1.45; }
.odeme-ozet__not { font-size: var(--boy-xs); color: var(--soluk); text-align: center; }
.ozet-kalemleri { list-style: none; display: grid; gap: 12px; }
.ozet-kalemleri li { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }
.ozet-kalemleri__gorsel { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r); background: var(--yuzey); color: var(--cizgi-koyu); }
.ozet-kalemleri__gorsel img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r); background: #fff; }
.ozet-kalemleri__gorsel b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: var(--murekkep); color: #fff; font-size: 11px; }
.ozet-kalemleri__ad { font-size: var(--boy-s); font-weight: 600; line-height: 1.3; }
.ozet-kalemleri__ad small { display: block; font-weight: 500; color: var(--soluk); font-size: var(--boy-xs); }
.ozet-kalemleri__tutar { font-size: var(--boy-s); font-weight: 700; font-variant-numeric: tabular-nums; }

.odeme-mobil-ozet { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); }
.odeme-mobil-ozet summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 650; font-size: var(--boy-s); }
.odeme-mobil-ozet summary::-webkit-details-marker { display: none; }
.odeme-mobil-ozet summary span::after { content: " ▾"; color: var(--soluk); }
.odeme-mobil-ozet[open] summary span::after { content: " ▴"; }
.odeme-mobil-ozet summary strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.odeme-mobil-ozet .ozet-kalemleri { padding: 4px 16px 16px; }
.odeme-hata { display: grid; gap: 14px; }

/* Sözleşme penceresi */
.pencere {
    width: min(calc(100% - 24px), 760px); max-height: min(86vh, 900px); padding: 0; border: 0; border-radius: var(--r-buyuk);
    color: var(--murekkep); background: var(--zemin); box-shadow: 0 24px 64px rgba(27, 37, 54, .3);
}
.pencere[open] { display: flex; flex-direction: column; }
.pencere::backdrop { background: rgba(27, 37, 54, .55); }
.pencere__baslik { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--cizgi); }
.pencere__baslik h2 { font-size: var(--boy-l); }
.pencere__icerik { padding: 20px; overflow-y: auto; max-width: none; }
.pencere__alt { padding: 12px 20px; border-top: 1px solid var(--cizgi); display: flex; justify-content: flex-end; }
.sozlesme { font-size: var(--boy-s); }
.sozlesme h2 { font-size: var(--boy-m); margin: 20px 0 6px; }
.sozlesme table td, .sozlesme table th { font-size: var(--boy-xs); }
.sozlesme__tarih { margin-top: 20px; font-size: var(--boy-xs); color: var(--soluk); }

/* ==========================================================================
   Sipariş sayfası
   ========================================================================== */
.siparis-sayfa { padding-block: 8px 64px; }
.tesekkur { display: flex; gap: 16px; align-items: flex-start; margin: 20px 0; padding: 22px; border-radius: var(--r-buyuk); background: var(--kraft-acik); border: 1px solid var(--kraft); }
.tesekkur .ikon { width: 44px; height: 44px; color: var(--kraft-koyu); flex: none; }
.tesekkur h1 { font-size: clamp(1.4rem, 4vw, 2rem); font-stretch: 76%; font-weight: 800; }
.tesekkur p { margin-top: 6px; color: var(--murekkep-2); }
.siparis-duzen { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1000px) { .siparis-duzen { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; } }
.siparis-duzen__ana, .siparis-duzen__yan { display: grid; gap: 16px; }
.havale-kutusu { border: 2px solid var(--murekkep); display: grid; gap: 12px; }
.havale-kutusu h2 { font-size: var(--boy-l) !important; }
.havale-kutusu p { color: var(--murekkep-2); font-size: var(--boy-s); }
.siparis-durum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.siparis-durum .durum { font-size: var(--boy-s); padding: 6px 12px; }
.siparis-durum__kargo { font-size: var(--boy-s); color: var(--murekkep-2); }
.siparis-durum__kargo a { font-weight: 700; }
.ilerleme { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; counter-reset: adim; }
.ilerleme li { position: relative; padding-top: 26px; font-size: 11.5px; font-weight: 650; color: var(--soluk); text-align: center; line-height: 1.25; }
.ilerleme li::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 4px; background: var(--yuzey-2); }
.ilerleme li:first-child::before { left: 50%; }
.ilerleme li:last-child::before { right: 50%; }
.ilerleme li::after { content: ""; position: absolute; top: 2px; left: 50%; translate: -50% 0; width: 14px; height: 14px; border-radius: 50%; background: var(--zemin); border: 3px solid var(--cizgi-koyu); }
.ilerleme li.tamam { color: var(--murekkep); }
.ilerleme li.tamam::before { background: var(--kraft); }
.ilerleme li.tamam::after { border-color: var(--kraft-koyu); background: var(--kraft); }
.ilerleme li.simdi::after { border-color: var(--murekkep); background: var(--sari); }
@media (min-width: 640px) { .ilerleme li { font-size: var(--boy-xs); } }
.siparis-kalemleri { list-style: none; border-top: 1px solid var(--cizgi); margin-bottom: 14px; }
.siparis-kalemleri li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ad tutar" "miktar miktar"; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--yuzey-2); font-size: var(--boy-s); }
.siparis-kalemleri__ad { grid-area: ad; font-weight: 650; }
.siparis-kalemleri__ad small, .siparis-kalemleri__miktar small { display: block; font-weight: 500; color: var(--soluk); font-size: var(--boy-xs); }
.siparis-kalemleri__miktar { grid-area: miktar; color: var(--murekkep-2); }
.siparis-kalemleri__tutar { grid-area: tutar; font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) {
    .siparis-kalemleri li { grid-template-columns: 1fr 180px 110px; grid-template-areas: "ad miktar tutar"; }
    .siparis-kalemleri__miktar small { display: inline; margin-left: 6px; }
}
.bilgi-kutusu { display: grid; gap: 6px; font-size: var(--boy-s); }
.bilgi-kutusu h2 { font-size: var(--boy-s) !important; font-stretch: 100% !important; font-weight: 750 !important; margin: 10px 0 0 !important; color: var(--soluk); }
.bilgi-kutusu h2:first-child { margin-top: 0 !important; }
.bilgi-kutusu p { color: var(--murekkep-2); line-height: 1.5; }
.belge-listesi { list-style: none; display: grid; gap: 6px; }
.belge-listesi a { font-weight: 650; }
.siparis-sayfa__devam { margin-top: 24px; text-align: center; }

/* --- Hareket azaltma ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* --- Mobilde içerik alt menünün altında kalmasın ------------------------- */
@media (max-width: 899px) {
    body { padding-bottom: 0; }
}