/* Promosyon mağaza teması: açık zemin, beyaz kartlar, yeşil vurgu */
:root {
    --vurgu: #12923f;
    --vurgu-koyu: #0c7431;
    --vurgu-acik: #e8f5ec;
    --metin: #1d2127;
    --soluk: #6b7280;
    --cizgi: #e6e8eb;
    --zemin: #f4f5f7;
    --kart: #ffffff;
    --tehlike: #c62828;
    --uyari: #b45309;
    --yaricap: 12px;
    --golge: 0 1px 2px rgba(16, 24, 40, .04);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; color: var(--metin); background: var(--zemin); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.25; }
/* Geniş ekranda sayfa 1800px'e kadar açılır; kenar boşluğu 1280px üstünde 40px */
.kap { width: 100%; max-width: 1800px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1280px) { .kap { padding: 0 40px; } }
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); }
.soluk { color: var(--soluk); }
[hidden] { display: none !important; }

/* Düğmeler */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 8px; border: 1px solid var(--vurgu); background: var(--vurgu); color: #fff; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.dugme:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); }
.dugme:disabled { opacity: .55; cursor: not-allowed; }
.dugme-cizgi { background: #fff; color: var(--vurgu); }
.dugme-cizgi:hover { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
.dugme-kucuk { padding: 7px 12px; font-size: 13px; }
.dugme-koyu { background: #1d2127; border-color: #1d2127; }
.dugme-koyu:hover { background: #000; border-color: #000; }
.dugme-beyaz { background: #fff; color: var(--vurgu); border-color: #fff; }
.dugme-beyaz:hover { background: var(--vurgu-acik); color: var(--vurgu-koyu); border-color: var(--vurgu-acik); }
.dugme-cizgi-beyaz { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.dugme-cizgi-beyaz:hover { background: rgba(255,255,255,.12); }
.dugme-tam { width: 100%; }

/* Üst şerit ve başlık */
.ust-serit { background: #fff; border-bottom: 1px solid var(--cizgi); font-size: 12px; color: var(--soluk); }
.ust-serit .kap { display: flex; gap: 24px; padding-top: 7px; padding-bottom: 7px; align-items: center; }
.ust-serit a:hover { color: var(--vurgu); }
.ust-serit i { margin-right: 4px; }
.ust-slogan { margin-left: auto; }
.baslik { background: #fff; border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 40; }
.baslik-ic { display: flex; align-items: center; gap: 32px; padding-top: 16px; padding-bottom: 16px; transition: padding .25s ease; }
.logo { display: inline-flex; align-items: center; }
.logo img { max-height: 64px; width: auto; transition: max-height .25s ease; }
/* Masaüstünde arama tam ortada: iki yan sütun eşit genişlikte, logo sola, araçlar sağa yaslanır */
@media (min-width: 1025px) {
    .baslik-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr); }
    .baslik-ic > .logo { justify-self: start; }
    .baslik-ic > .arama-alani { width: 100%; max-width: none; }
    .baslik-ic > .baslik-araclar { justify-self: end; margin-left: 0; }
    .logo img { max-height: 92px; }
    /* Sayfa aşağı kayınca başlık sıkışır: logo küçülür, popüler aramalar gizlenir */
    .baslik.kucuk .baslik-ic { padding-top: 8px; padding-bottom: 8px; }
    .baslik.kucuk .logo img { max-height: 42px; }
    .baslik.kucuk .logo-metin { font-size: 22px; }
    .baslik.kucuk .populer-aramalar { display: none; }
    .baslik.kucuk .menu-satiri { padding-bottom: 8px; }
    .baslik.kucuk { box-shadow: 0 6px 18px rgba(16,24,40,.08); }
}
.logo-metin { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--vurgu); }
.logo-metin.acik { color: #fff; }
.arama { flex: 1; max-width: 640px; display: flex; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 10px; padding: 4px; }
.arama input { flex: 1; border: 0; background: transparent; padding: 8px 12px; outline: none; min-width: 0; }
.arama button { border: 0; background: var(--vurgu); color: #fff; width: 42px; border-radius: 8px; cursor: pointer; font-size: 16px; }
.baslik-araclar { margin-left: auto; display: flex; gap: 22px; }
.arac { display: flex; align-items: center; gap: 8px; position: relative; }
.arac > i { font-size: 22px; color: var(--metin); }
.arac span { display: flex; flex-direction: column; line-height: 1.2; }
.arac b { font-size: 13px; }
.arac small { font-size: 12px; color: var(--soluk); }
.arac:hover small { color: var(--vurgu); }
.sepet-rozet { position: absolute; top: -6px; left: 14px; background: var(--vurgu); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 5px; }
.mobil-menu-dugme { display: none; border: 0; background: none; font-size: 26px; cursor: pointer; padding: 0; }

.menu-satiri { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; }
.kategori-acilir { position: relative; }
.kategori-dugme { display: flex; align-items: center; gap: 10px; background: var(--vurgu); color: #fff; border: 0; border-radius: 10px; padding: 14px 30px; font-weight: 700; text-transform: uppercase; cursor: pointer; font-size: 13px; min-width: 280px; justify-content: center; }
.kategori-dugme i { font-size: 18px; }
.mega-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; }
.mega-menu.acik, .kategori-acilir:hover .mega-menu { display: block; }
.mega-menu > ul { list-style: none; margin: 0; padding: 8px; width: 280px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: 0 16px 40px rgba(16,24,40,.12); max-height: 70vh; overflow: auto; }
.mega-menu li { position: static; }
.mega-menu li > a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-weight: 500; }
.mega-menu li > a .ok { margin-left: auto; font-size: 11px; color: var(--soluk); }
.mega-menu li:hover > a { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
.mega-alt { display: none; position: absolute; top: 0; left: 284px; width: 560px; min-height: 100%; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: 0 16px 40px rgba(16,24,40,.12); padding: 20px; }
.mega-menu li:hover > .mega-alt { display: block; }
.mega-alt h4 { font-size: 16px; margin-bottom: 12px; color: var(--vurgu); }
.mega-alt-liste { columns: 2; column-gap: 24px; }
.mega-alt-liste a { display: block; padding: 5px 0; break-inside: avoid; font-weight: 600; }
.mega-alt-liste a.ikinci { font-weight: 400; color: var(--soluk); padding-left: 10px; }
.mega-alt-liste a:hover { color: var(--vurgu); }
.kat-ikon { width: 22px; height: 22px; object-fit: contain; flex: none; font-size: 16px; color: var(--vurgu); display: inline-grid; place-items: center; }

.ust-menu { display: flex; gap: 4px; overflow: hidden; flex: 1; }
.ust-menu-oge { position: relative; }
.ust-menu-oge > a { display: flex; align-items: center; gap: 6px; padding: 10px 12px; font-weight: 600; white-space: nowrap; border-radius: 8px; }
.ust-menu-oge > a .kat-ikon { width: 18px; height: 18px; font-size: 14px; }
.ust-menu-oge > a .bi-chevron-down { font-size: 10px; }
.ust-menu-oge:hover > a { color: var(--vurgu); }
.ust-menu-alt { display: none; position: fixed; z-index: 50; background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: 0 12px 30px rgba(16,24,40,.12); padding: 8px; min-width: 220px; }
.ust-menu-oge:hover .ust-menu-alt { display: block; }
.ust-menu-alt a { display: block; padding: 8px 10px; border-radius: 6px; }
.ust-menu-alt a:hover { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
/* Hızlı menü alt menüleri: açılır liste, alt öğesi olan satırın listesi yana açılır */
.ust-menu-alt.hm-acilir { padding: 0; min-width: 260px; }
.hm-liste { list-style: none; margin: 0; padding: 6px; }
.hm-oge { position: relative; }
.ust-menu-alt .hm-oge > a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-weight: 500; white-space: nowrap; color: var(--metin); }
.ust-menu-alt .hm-oge:hover > a, .ust-menu-alt .hm-oge:focus-within > a { background: var(--zemin); color: var(--vurgu-koyu); }
.hm-ikon { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--vurgu); color: var(--vurgu); display: grid; place-items: center; font-size: 13px; flex: none; }
.hm-baslik { flex: 1; }
.hm-ok { font-size: 10px; color: var(--soluk); margin-left: 12px; }
.hm-yan { display: none; position: absolute; top: -6px; left: calc(100% + 4px); min-width: 240px; background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: 0 12px 30px rgba(16,24,40,.12); }
.hm-yan.hm-sola { left: auto; right: calc(100% + 4px); }
/* Satırla yan liste arasındaki boşlukta fare geçerken menü kapanmasın */
.hm-yan::before { content: ""; position: absolute; top: 0; bottom: 0; left: -8px; width: 8px; }
.hm-yan.hm-sola::before { left: auto; right: -8px; }
.hm-oge:hover > .hm-yan, .hm-oge:focus-within > .hm-yan { display: block; }

/* Mobil menü */
.mobil-menu { position: fixed; inset: 0 auto 0 0; width: min(340px, 88vw); background: #fff; z-index: 70; transform: translateX(-105%); transition: transform .2s; overflow: auto; padding: 16px; }
.mobil-menu.acik { transform: none; }
.mobil-menu-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 16px; }
.mobil-menu-baslik button { border: 0; background: none; font-size: 18px; cursor: pointer; }
.perde { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 60; display: none; }
.perde.acik { display: block; }

/* Kategori ağacı (yan menü) */
.kat-agac, .kat-agac ul { list-style: none; margin: 0; padding: 0; }
.kat-agac > li { border-bottom: 1px solid var(--cizgi); }
.kat-agac > li:last-child { border-bottom: 0; }
.kat-satir { display: flex; align-items: center; }
.kat-satir a { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 8px; font-weight: 500; border-radius: 8px; }
.kat-satir a:hover { color: var(--vurgu); }
.kat-agac > li > .kat-satir .kat-ikon { width: 30px; height: 30px; border: 1px solid var(--cizgi); border-radius: 8px; padding: 4px; }
.kat-ac { border: 0; background: none; padding: 6px 8px; cursor: pointer; color: var(--soluk); font-size: 11px; transition: transform .15s; }
.kat-agac li ul { display: none; padding-left: 14px; padding-bottom: 6px; }
.kat-agac li.acik > ul { display: block; }
.kat-agac li.acik > .kat-satir .kat-ac { transform: rotate(180deg); }
.kat-agac ul .kat-satir a { font-weight: 400; padding: 6px 8px; font-size: 13px; }
.kat-agac li.secili > .kat-satir a { background: var(--vurgu); color: #fff; font-weight: 600; }
.kat-agac li.secili > .kat-satir a .kat-ikon { color: #fff; border-color: rgba(255,255,255,.4); }

/* Ana sayfa */
.ana-ust { display: grid; grid-template-columns: 270px minmax(0, 1fr) 260px; gap: 20px; margin-top: 20px; align-items: start; }
.yan-kategori { padding: 8px 10px; max-height: 560px; overflow: auto; }
.ana-orta { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Slider: slaytlar yan yana bir şerit üzerinde kayar; görselli slayt banner gibi kırpılır (sol kenar sabit kalır, yazı genelde soldadır) */
.slider { position: relative; border-radius: var(--yaricap); overflow: hidden; background: linear-gradient(120deg, #eef7f1, #f8faf9 60%, #e6f2ea); }
.slider-ray { display: flex; transition: transform .55s cubic-bezier(.25, .8, .25, 1); touch-action: pan-y; }
.slider-ray.surukleniyor { transition: none; }
/* Geniş sayfada slider uzamasın: yükseklik en fazla 440px, görsel bu alana soldan kırpılır */
.slayt { position: relative; flex: 0 0 100%; aspect-ratio: 775 / 440; max-height: 440px; overflow: hidden; }
.slayt picture { position: absolute; inset: 0; }
.slayt picture img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; user-select: none; }
.slayt-baglanti { position: absolute; inset: 0; z-index: 1; }
.slayt-yazi { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); max-width: 52%; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; z-index: 2; pointer-events: none; }
.slayt-yazi a { pointer-events: auto; }
.slayt.gorselli .slayt-yazi { text-shadow: 0 1px 12px rgba(255,255,255,.6); }
.slayt-yazi h2, .slayt-baslik { font-size: clamp(22px, 3vw, 42px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.slayt-ust { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vurgu); }
.slider-oklar { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 2px; z-index: 3; }
.slider-ok { width: 32px; height: 32px; border: 0; background: transparent; color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); transition: transform .15s; }
.slider-ok:hover { transform: scale(1.15); }
.slider-ok:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .slider-ray { transition: none; } }
.hizli-kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hizli-kart { display: flex; align-items: center; gap: 12px; padding: 18px; font-size: 15px; }
.hizli-kart .ok { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cizgi); display: grid; place-items: center; }
.hizli-kart:hover .ok { background: var(--vurgu); color: #fff; border-color: var(--vurgu); }
.yuvarlak-ikon { width: 48px; height: 48px; border-radius: 50%; background: var(--vurgu-acik); color: var(--vurgu); display: grid; place-items: center; font-size: 20px; flex: none; }
.ana-sag { display: flex; flex-direction: column; gap: 16px; }
.hizli-erisim { padding: 18px; display: flex; flex-direction: column; }
.hizli-erisim h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi); }
.hizli-erisim > a { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-weight: 500; }
.hizli-erisim > a > i:first-child { font-size: 16px; color: var(--soluk); }
.hizli-erisim > a > .bi-chevron-right { margin-left: auto; font-size: 11px; }
.hizli-erisim > a:hover { color: var(--vurgu); }
.iletisim-satir > i { width: 36px; height: 36px; border: 1px solid var(--cizgi); border-radius: 8px; display: grid; place-items: center; font-size: 16px !important; }
.iletisim-satir span { display: flex; flex-direction: column; font-weight: 600; }
.iletisim-satir small { font-weight: 400; color: var(--soluk); font-size: 12px; }
.hizli-sosyal { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; }
.hizli-sosyal a { width: 34px; height: 34px; border-radius: 8px; background: var(--zemin); color: var(--metin); display: grid; place-items: center; font-size: 15px; transition: background .15s, color .15s; }
.hizli-sosyal a:hover { background: var(--vurgu); color: #fff; }

.bolum { margin-top: 40px; }
.bolum-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.bolum-baslik h2 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.bolum-baslik.orta { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.bolum-baslik.orta h2 { color: var(--vurgu); font-size: 30px; }
.bolum-baslik p { margin: 0; color: var(--soluk); }
.tumu { color: var(--vurgu); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.kategori-izgara { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.kategori-karti { overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.kategori-karti:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,24,40,.08); }
.kategori-gorsel { aspect-ratio: 4 / 3; background: var(--zemin); display: grid; place-items: center; overflow: hidden; }
.kategori-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kategori-gorsel i { font-size: 40px; color: var(--vurgu); }
.kategori-ad { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-weight: 700; }
.kategori-ad i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--cizgi); display: grid; place-items: center; font-size: 12px; }
.siparis-adimlari { padding: 32px; }
.adimlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 8px; }
.adim { display: flex; gap: 14px; align-items: flex-start; }
.adim b { display: block; font-size: 15px; margin-bottom: 4px; }
.adim p { margin: 0; color: var(--soluk); font-size: 13px; }
.cta-serit { background: var(--vurgu); color: #fff; border-radius: var(--yaricap); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cta-serit h3 { font-size: 22px; font-weight: 800; }
.cta-serit p { margin: 6px 0 0; opacity: .85; }
.cta-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; }
.seo-metin { padding: 28px 32px; color: var(--soluk); }
.seo-metin h2 { color: var(--metin); font-size: 20px; margin-bottom: 10px; }

/* Ürün kartı */
.urun-serit { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.urun-serit > * { scroll-snap-align: start; }
.urun-izgara { display: grid; grid-template-columns: repeat(var(--sutun, 4), minmax(0, 1fr)); gap: 16px; }
.urun-karti { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, border-color .15s; }
.urun-karti:hover { box-shadow: 0 12px 28px rgba(16,24,40,.08); border-color: #d5dad1; }
.kart-ust { display: flex; gap: 6px; min-height: 22px; }
.etiket { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; border: 1px solid; }
.etiket-stok { color: var(--vurgu); border-color: #bfe3cb; background: var(--vurgu-acik); }
.etiket-sor { color: var(--uyari); border-color: #f5d7a8; background: #fff7ea; }
.etiket-firsat { color: #fff; background: var(--tehlike); border-color: var(--tehlike); }
.etiket-yeni { color: #fff; background: #1d2127; border-color: #1d2127; }
.kart-gorsel { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 8px; }
.kart-gorsel img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s; }
.urun-karti:hover .kart-gorsel img { transform: scale(1.04); }
.kart-gorsel > i { font-size: 48px; color: #cfd4da; }
.kart-bilgi { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--soluk); flex: 1; }
.kart-kod b, .kart-stok b { color: var(--vurgu); }
.kart-kod i, .kart-stok i { color: var(--vurgu); margin-right: 2px; }
.kopyala { border: 0; background: none; cursor: pointer; color: var(--soluk); padding: 0 2px; font-size: 12px; }
.kopyala:hover { color: var(--vurgu); }
.kart-ad { font-size: 15px; font-weight: 700; color: var(--metin); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kart-ad a:hover { color: var(--vurgu); }
.kart-alt { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.kart-fiyat { display: flex; flex-direction: column; line-height: 1.15; }
.kart-fiyat b { color: var(--vurgu); font-size: 18px; font-weight: 800; }
.kart-fiyat small { color: var(--vurgu); font-weight: 700; font-size: 12px; }
.kart-fiyat del { color: var(--soluk); font-size: 12px; }
.fiyat-sor { font-size: 14px !important; }

/* Liste sayfası */
.kirinti { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; font-size: 12px; color: var(--soluk); }
.kirinti a:hover { color: var(--vurgu); }
.kirinti b { color: var(--metin); }
.liste-duzen { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
.liste-yan { position: sticky; top: 170px; max-height: calc(100vh - 190px); }
.liste-icerik { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.liste-baslik { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.liste-baslik h1 { font-size: 26px; font-weight: 800; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.liste-baslik h1 small { font-size: 14px; font-weight: 500; color: var(--soluk); }
.liste-baslik h1 small b { color: var(--metin); }
.liste-aciklama { margin: 8px 0 0; color: var(--soluk); max-width: 760px; }
.liste-araclar { display: flex; gap: 10px; align-items: center; flex: none; }
.secim { border: 1px solid var(--cizgi); border-radius: 8px; padding: 9px 12px; background: #fff; min-width: 170px; }
.izgara-secim { display: flex; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; padding: 3px; gap: 2px; }
.izgara-secim button { border: 0; background: none; width: 32px; height: 30px; border-radius: 6px; cursor: pointer; color: var(--soluk); }
.izgara-secim button.secili { background: var(--vurgu); color: #fff; }
.filtre-cubugu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; }
.filtre-acilir { position: relative; }
.filtre-acilir summary { list-style: none; cursor: pointer; border: 1px solid var(--cizgi); border-radius: 8px; padding: 7px 12px; font-weight: 600; font-size: 13px; display: flex; gap: 8px; align-items: center; background: #fff; }
.filtre-acilir summary::-webkit-details-marker { display: none; }
.filtre-acilir summary i { font-size: 10px; }
.filtre-acilir summary em { font-style: normal; background: var(--vurgu); color: #fff; font-size: 11px; border-radius: 9px; padding: 0 6px; }
.filtre-acilir[open] summary { border-color: var(--vurgu); color: var(--vurgu); }
.filtre-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: 0 12px 30px rgba(16,24,40,.12); padding: 10px; min-width: 220px; max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.fiyat-panel { flex-direction: row; gap: 10px; }
.fiyat-panel label { display: flex; flex-direction: column; font-size: 12px; color: var(--soluk); gap: 4px; }
.fiyat-panel input { width: 110px; border: 1px solid var(--cizgi); border-radius: 6px; padding: 7px 8px; }
.filtre-secenek { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; cursor: pointer; }
.filtre-secenek:hover { background: var(--zemin); }
.filtre-secenek small { margin-left: auto; color: var(--soluk); }
.filtre-secenek input, .stok-secim input, .onay input { accent-color: var(--vurgu); }
.renk-nokta { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: none; display: inline-block; object-fit: cover; }
.stok-secim { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }
.temizle { color: var(--soluk); font-size: 13px; text-decoration: underline; }
.secili-filtreler { display: flex; flex-wrap: wrap; gap: 8px; }
.secili-filtreler a { background: var(--vurgu-acik); color: var(--vurgu-koyu); border-radius: 20px; padding: 4px 8px 4px 12px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.sayfalama { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.sayfalama a, .sayfalama span { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--cizgi); background: #fff; font-weight: 600; padding: 0 8px; }
.sayfalama a.secili { background: var(--vurgu); color: #fff; border-color: var(--vurgu); }
.sayfalama a:hover:not(.secili) { border-color: var(--vurgu); color: var(--vurgu); }
.sayfalama span { border: 0; background: none; }
.liste-son { text-align: center; color: var(--soluk); margin: 8px 0 0; }
.bos-durum { text-align: center; padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bos-durum > i { font-size: 44px; color: var(--vurgu); }
.bos-durum h1 { font-size: 24px; }
.bos-durum p { color: var(--soluk); max-width: 520px; margin: 0 0 8px; }
.kap.bos-durum { margin-top: 40px; }

/* Ürün detay */
.urun-ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.galeri { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 14px; position: sticky; top: 170px; }
.galeri-kucukler { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow: auto; }
.galeri-kucukler button { border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; padding: 4px; cursor: pointer; aspect-ratio: 1; }
.galeri-kucukler button.secili { border-color: var(--vurgu); box-shadow: 0 0 0 1px var(--vurgu); }
.galeri-kucukler img { width: 100%; height: 100%; object-fit: contain; }
.galeri-buyuk { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; overflow: hidden; }
.galeri-buyuk img { width: 100%; height: 100%; object-fit: contain; }
.bos-gorsel { font-size: 80px; color: #cfd4da; }
.yakinlas { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--cizgi); display: grid; place-items: center; z-index: 2; }
.galeri-ok { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cizgi); background: #fff; cursor: pointer; }
.galeri-ok.onceki { left: 8px; } .galeri-ok.sonraki { right: 8px; }
.urun-bilgi { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.kod-satiri { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.kod-satiri > span { border: 1px solid var(--cizgi); border-radius: 8px; padding: 5px 10px; color: var(--soluk); }
.kod-satiri b { color: var(--vurgu); }
.urun-bilgi h1 { font-size: 28px; font-weight: 800; letter-spacing: -.01em; }
.marka-baglanti { color: var(--vurgu); font-weight: 600; margin-top: -8px; }
.kisa-aciklama { margin: 0; color: var(--soluk); }
.fiyat-satiri { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fiyat-kutu, .not-kutu { border: 1px solid var(--cizgi); border-radius: 10px; padding: 14px 16px; }
.fiyat-kutu small { color: var(--soluk); }
.fiyat-buyuk b { font-size: 26px; font-weight: 800; color: var(--vurgu); }
.fiyat-buyuk span { color: var(--vurgu); font-weight: 700; }
.fiyat-kutu del { color: var(--soluk); font-size: 13px; }
.not-kutu { background: var(--zemin); display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--soluk); }
.not-kutu i { font-size: 20px; color: var(--metin); }
.secim-alani h4 { font-size: 14px; margin-bottom: 10px; }
.secim-alani h4 span { color: var(--vurgu); }
.deger-kartlari { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.deger-karti { display: flex; align-items: center; gap: 10px; border: 1px solid var(--cizgi); border-radius: 8px; padding: 9px 10px; background: #fff; cursor: pointer; text-align: left; position: relative; }
.deger-karti .renk-nokta { width: 18px; height: 18px; }
.deger-karti span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.deger-karti b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deger-karti small { color: var(--soluk); font-size: 11px; }
.deger-karti.secili { border-color: var(--vurgu); box-shadow: 0 0 0 1px var(--vurgu); }
.deger-karti.secili::after { content: "\F26B"; font-family: "bootstrap-icons"; position: absolute; top: 4px; right: 6px; color: var(--vurgu); font-size: 13px; }
.deger-karti.tukendi, .deger-cip.tukendi { opacity: .5; }
.deger-cipleri { display: flex; flex-wrap: wrap; gap: 8px; }
.deger-cip { border: 1px solid var(--cizgi); border-radius: 8px; padding: 7px 12px; background: #fff; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.deger-cip.secili { border-color: var(--vurgu); color: var(--vurgu); box-shadow: 0 0 0 1px var(--vurgu); }
.deger-cip.yok { opacity: .35; text-decoration: line-through; }
.sepet-formu { display: grid; grid-template-columns: 170px 1fr 1fr; gap: 10px; }
.whatsapp-teklif { min-width: 0; }
.adet { display: flex; border: 1px solid var(--cizgi); border-radius: 8px; overflow: hidden; background: #fff; }
.adet button { border: 0; background: none; width: 40px; cursor: pointer; font-size: 16px; color: var(--soluk); }
.adet button:hover { color: var(--vurgu); background: var(--vurgu-acik); }
.adet input { width: 100%; border: 0; text-align: center; font-weight: 700; outline: none; -moz-appearance: textfield; min-width: 0; }
.adet input::-webkit-inner-spin-button, .adet input::-webkit-outer-spin-button { -webkit-appearance: none; }
.bilgi-serit { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--vurgu-acik); border-radius: 10px; padding: 14px 6px; }
.bilgi-serit > div { display: flex; gap: 10px; align-items: center; padding: 0 12px; border-right: 1px solid #cfe7d6; }
.bilgi-serit > div:last-child { border-right: 0; }
.bilgi-serit i { font-size: 20px; color: var(--vurgu); }
.bilgi-serit span { display: flex; flex-direction: column; line-height: 1.25; }
.bilgi-serit small { font-size: 11px; color: var(--soluk); }
.bilgi-serit b { color: var(--vurgu-koyu); }
.urun-detay-izgara { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-top: 20px; align-items: start; }
.detay-kutu { padding: 16px; }
.detay-kutu.genis:only-child { grid-column: 1 / -1; }
.detay-baslik { background: var(--vurgu); color: #fff; font-size: 14px; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.teknik { margin: 0; }
.teknik div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--cizgi); }
.teknik div:last-child { border-bottom: 0; }
.teknik dt { font-weight: 700; }
.teknik dd { margin: 0; color: var(--soluk); }
.icerik { color: #374151; overflow-wrap: anywhere; }
.icerik img { height: auto; border-radius: 8px; }
.icerik table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.icerik th, .icerik td { border: 1px solid var(--cizgi); padding: 8px 10px; text-align: left; }
.icerik th { background: var(--zemin); }

/* Sepet */
.sepet-duzen { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
.sepet-liste { padding: 22px; }
.sepet-liste h1 { font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.sepet-liste h1 small { font-size: 14px; color: var(--soluk); font-weight: 500; }
.sepet-satir { display: grid; grid-template-columns: 84px 1fr 150px 130px 36px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.sepet-satir.uyarili { background: linear-gradient(90deg, #fff7ea, transparent); }
.sepet-gorsel { width: 84px; height: 84px; border: 1px solid var(--cizgi); border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
.sepet-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.sepet-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sepet-ad { font-weight: 700; font-size: 15px; }
.sepet-ad:hover { color: var(--vurgu); }
.sepet-bilgi small { color: var(--soluk); }
.sepet-baski-dosyasi { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; padding: 9px 10px; border: 1px dashed #a8d8b5; border-radius: 9px; background: #f6fcf7; cursor: pointer; }
.sepet-baski-baslik { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.sepet-baski-baslik > i { color: #dc2626; font-size: 19px; line-height: 1.25; }
.sepet-baski-baslik span { display: flex; flex-direction: column; min-width: 0; }
.sepet-baski-baslik b { font-size: 12.5px; color: var(--metin); }
.sepet-baski-baslik small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sepet-baski-sec { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sepet-baski-giris { position: absolute; inset: 0; z-index: 1; width: 100%; opacity: 0; cursor: pointer; }
.sepet-baski-dugme { display: inline-flex; align-items: center; gap: 6px; flex: none; border: 1px solid var(--vurgu); border-radius: 7px; padding: 6px 9px; background: #fff; color: var(--vurgu); font-size: 12px; font-weight: 700; }
.sepet-baski-dosyasi:hover .sepet-baski-dugme { background: var(--vurgu); color: #fff; }
.sepet-baski-ad { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soluk); font-size: 11.5px; font-weight: 500; }
.sepet-baski-ad.secili { color: var(--vurgu-koyu); }
.adet-kucuk { height: 40px; }
.sepet-tutar { text-align: right; display: flex; flex-direction: column; }
.sepet-tutar b { font-size: 16px; color: var(--vurgu); }
.sepet-tutar small { color: var(--soluk); }
.sil { border: 0; background: none; cursor: pointer; color: var(--soluk); font-size: 16px; }
.sil:hover { color: var(--tehlike); }
.satir-uyari { color: var(--uyari); font-size: 12px; font-weight: 600; margin: 0; }
.sepet-ozet { margin-left: auto; max-width: 380px; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.sepet-ozet > div { display: flex; justify-content: space-between; }
.sepet-ozet .genel { font-size: 18px; border-top: 1px solid var(--cizgi); padding-top: 10px; }
.sepet-ozet .genel b { color: var(--vurgu); }
.sepet-ozet p { margin: 4px 0 0; font-size: 12px; }
.talep-formu { padding: 22px; position: sticky; top: 170px; display: flex; flex-direction: column; gap: 8px; }
.talep-formu h2 { font-size: 18px; }
.talep-formu p { margin: 0 0 4px; font-size: 13px; }
.talep-formu form { display: flex; flex-direction: column; gap: 10px; }
.talep-formu label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.talep-formu input:not([type=checkbox]), .talep-formu textarea { border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 12px; font-weight: 400; outline: none; }
.talep-formu input:focus, .talep-formu textarea:focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-acik); }
.talep-formu .onay { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; color: var(--soluk); font-size: 12px; }
.alan-hata { color: var(--tehlike); font-size: 12px; }
.alan-hata:empty { display: none; }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.uyari { border-radius: 10px; padding: 12px 16px; margin: 16px 0 0; font-weight: 600; }
.uyari-hata { background: #fdecec; color: var(--tehlike); }
.uyari-hata:empty, .uyari-hata.validation-summary-valid { display: none; }
.uyari-hata ul { margin: 0; padding-left: 18px; }
.uyari-bilgi { background: var(--vurgu-acik); color: var(--vurgu-koyu); margin-bottom: 12px; }
.basarili > i { font-size: 56px; }

/* Alt bilgi */
.alt { background: #15191e; color: #c7cbd1; margin-top: 56px; }
.alt-ic { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; padding-top: 48px; padding-bottom: 40px; }
.alt-logo { max-height: 56px; width: auto; margin-bottom: 14px; }
.alt h5 { color: #fff; font-size: 15px; margin: 0 0 14px; }
.alt ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.alt a:hover { color: #fff; }
.alt p { margin: 0 0 14px; font-size: 13px; }
.alt-iletisim li { display: flex; gap: 8px; }
.alt-iletisim i { color: var(--vurgu); }
.sosyal { display: flex; gap: 8px; }
.sosyal a { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.sosyal a:hover { background: var(--vurgu); }
.alt-telif { border-top: 1px solid rgba(255,255,255,.08); padding: 16px 0; font-size: 12px; }

.wa-yuzen { position: fixed; right: 22px; bottom: 22px; width: 54px; height: 54px; border-radius: 50%; background: var(--vurgu); color: #fff; display: grid; place-items: center; font-size: 26px; box-shadow: 0 8px 24px rgba(18,146,63,.35); z-index: 45; }
.yukari { position: fixed; right: 30px; bottom: 90px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cizgi); background: #fff; cursor: pointer; z-index: 45; box-shadow: var(--golge); }
.bildirim { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); background: #1d2127; color: #fff; padding: 12px 18px; border-radius: 10px; z-index: 80; transition: transform .25s; display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 32px); }
.bildirim.acik { transform: translate(-50%, 0); }
.bildirim a { color: #7ddc9d; font-weight: 700; white-space: nowrap; }
.bildirim.hata { background: var(--tehlike); }

.tam-ortala { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.hizmet-disi { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 40px; text-align: center; max-width: 480px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.hizmet-disi p { margin: 0; color: var(--soluk); }
.hizmet-disi .ayrinti { font-family: ui-monospace, monospace; font-size: 12px; background: var(--zemin); padding: 8px 12px; border-radius: 8px; }

/* Duyarlı düzen */
@media (max-width: 1280px) {
    .ana-ust { grid-template-columns: 260px 1fr; }
    .ana-sag { grid-column: 1 / -1; flex-direction: row; }
    .ana-sag > * { flex: 1; }
    .kategori-izgara { grid-template-columns: repeat(4, 1fr); }
    .urun-serit { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
    .deger-kartlari { grid-template-columns: repeat(3, 1fr); }
    .urun-izgara { --sutun: 3 !important; }
}
@media (max-width: 1024px) {
    .kap { padding: 0 16px; }
    .ust-serit .kap { gap: 14px; overflow-x: auto; white-space: nowrap; }
    .ust-slogan { display: none; }
    .baslik-ic { flex-wrap: wrap; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
    .mobil-menu-dugme { display: block; }
    .logo img { max-height: 44px; }
    .logo-metin { font-size: 22px; }
    .arama { order: 3; flex-basis: 100%; max-width: none; }
    .baslik-araclar { gap: 14px; }
    .arac span { display: none; }
    .menu-satiri { display: none; }
    .ana-ust { grid-template-columns: 1fr; }
    .ana-ust > .yan-kategori { display: none; }
    .liste-duzen { grid-template-columns: 1fr; }
    .liste-yan { display: none; }
    .urun-ust { grid-template-columns: 1fr; }
    .galeri { position: static; }
    .urun-detay-izgara { grid-template-columns: 1fr; }
    .sepet-duzen { grid-template-columns: 1fr; }
    .talep-formu { position: static; }
    .adimlar { grid-template-columns: 1fr 1fr; }
    .alt-ic { grid-template-columns: 1fr 1fr; }
    .liste-yan, .galeri, .talep-formu { top: auto; }
}
@media (max-width: 720px) {
    .ana-sag { flex-direction: column; }
    .hizli-kartlar { grid-template-columns: 1fr; }
    /* Dar ekranda görselli slayt kırpılmaz, (mobil) görselin kendi oranında gösterilir */
    .slayt.gorselsiz { aspect-ratio: 4 / 3.4; }
    .slayt.gorselli { aspect-ratio: auto; max-height: none; }
    .slayt.gorselli picture { position: static; }
    .slayt.gorselli picture img { height: auto; }
    .slayt-yazi { max-width: 86%; }
    .kategori-izgara { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .urun-serit { grid-auto-columns: 72%; }
    .urun-izgara { --sutun: 2 !important; gap: 10px; }
    .urun-karti { padding: 10px; }
    .kart-alt { flex-direction: column; align-items: stretch; }
    .kart-ad { font-size: 13px; }
    .izgara-secim { display: none; }
    .liste-baslik { flex-direction: column; }
    .liste-baslik h1 { font-size: 22px; }
    .filtre-panel { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; max-height: 60vh; }
    .galeri { grid-template-columns: 1fr; }
    .galeri-kucukler { flex-direction: row; order: 2; max-height: none; overflow-x: auto; }
    .galeri-kucukler button { width: 64px; flex: none; }
    .urun-bilgi { padding: 16px; }
    .urun-bilgi h1 { font-size: 22px; }
    .fiyat-satiri { grid-template-columns: 1fr; }
    .deger-kartlari { grid-template-columns: repeat(2, 1fr); }
    .sepet-formu { grid-template-columns: 1fr; }
    .adet { height: 46px; }
    .bilgi-serit { grid-template-columns: 1fr 1fr; row-gap: 14px; }
    .bilgi-serit > div:nth-child(2) { border-right: 0; }
    .adimlar { grid-template-columns: 1fr; }
    .cta-serit { flex-direction: column; align-items: flex-start; padding: 22px; }
    .sepet-satir { grid-template-columns: 64px 1fr 30px; grid-template-areas: "g b s" "a a t"; gap: 10px; }
    .sepet-satir > .sepet-gorsel { grid-area: g; width: 64px; height: 64px; }
    .sepet-satir > .sepet-bilgi { grid-area: b; }
    .sepet-satir > .adet { grid-area: a; }
    .sepet-satir > .sepet-tutar { grid-area: t; }
    .sepet-satir > form:last-child { grid-area: s; }
    .sepet-baski-dosyasi { align-items: flex-start; flex-direction: column; }
    .sepet-baski-sec { width: 100%; justify-content: space-between; }
    .sepet-baski-ad { max-width: calc(100% - 100px); }
    .sepet-ozet { max-width: none; }
    .alt-ic { grid-template-columns: 1fr; }
}

/* Üyelik ve hesap */
.uye-duzen { display: grid; grid-template-columns: minmax(0, 560px) 340px; gap: 20px; align-items: start; justify-content: center; padding-bottom: 40px; }
.uye-duzen .talep-formu { position: static; }
.uye-duzen h1 { font-size: 22px; }
.uye-davet { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 10px; background: var(--vurgu-acik); font-size: 13px; margin-bottom: 8px; }
.uye-davet > div { display: flex; gap: 8px; margin-top: 4px; }
.uye-davet-buyuk { padding: 24px; margin: 0; align-items: flex-start; }
.uye-davet-buyuk > i { font-size: 32px; color: var(--vurgu); }
.uye-davet-buyuk b { font-size: 16px; }
.form-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hesap-baslik { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.hesap-baslik h1 { font-size: 22px; margin: 0; }
.tablo-kap { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablo th { text-align: left; font-weight: 600; color: var(--soluk); border-bottom: 1px solid var(--cizgi); padding: 8px 10px; white-space: nowrap; }
.tablo td { border-bottom: 1px solid var(--cizgi); padding: 10px; vertical-align: middle; }
.tablo .sag { text-align: right; white-space: nowrap; }
.durum { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--zemin); color: var(--soluk); }
.durum-bekliyor { background: #fff4e0; color: var(--uyari); }
.durum-hazirlaniyor { background: #e8f0fe; color: #1a56db; }
.durum-teslim_edildi { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
.durum-iptal { background: #fdecec; color: var(--tehlike); }
@media (max-width: 1024px) {
    .uye-duzen { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .form-ikili { grid-template-columns: 1fr; }
    .hesap-baslik { flex-direction: column; align-items: flex-start; }
}

/* Sipariş ekranında adres ve kargo seçimi, hesapta adres defteri */
.secim-grubu { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.secim-grubu legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; display: flex; justify-content: space-between; width: 100%; }
.secim-grubu legend a { font-weight: 500; font-size: 12.5px; }
.secim-kart { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 13.5px; background: #fff; }
.secim-kart:has(input:checked) { border-color: var(--vurgu); background: var(--vurgu-acik); }
.secim-kart input { accent-color: var(--vurgu); margin-top: 3px; }
.secim-kart small { display: block; color: var(--soluk); margin-top: 2px; }
.adres-listesi { display: grid; gap: 10px; margin-bottom: 12px; }
.adres-kart { border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }
.adres-kart b { display: block; margin-bottom: 2px; }
.adres-kart small { display: block; color: var(--soluk); }
.adres-kart .rozet { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--vurgu-acik); color: var(--vurgu); margin: 6px 6px 0 0; }
.adres-kart .adres-islem { display: flex; gap: 8px; margin-top: 8px; }
.adres-kart .adres-islem button { background: none; border: 0; color: #b91c1c; cursor: pointer; font: inherit; padding: 0; }
.fatura-tipi { display: flex; gap: 8px; margin-bottom: 10px; }
.fatura-tipi .secim-kart { flex: 1; }

/* Yasal metinler, alt bilgi bağlantıları ve çerez bildirimi */
.yasal-metin { max-width: 860px; margin: 0 auto 40px; padding: 28px 32px; line-height: 1.65; font-size: 14.5px; }
.yasal-metin h2 { font-size: 22px; margin: 0 0 14px; }
.yasal-metin h3 { font-size: 16px; margin: 20px 0 6px; }
.yasal-metin table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
.yasal-metin th, .yasal-metin td { border: 1px solid var(--cizgi); padding: 6px 8px; text-align: left; }
.alt-yasal { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; }
.alt-yasal a, .alt-yasal button { color: inherit; opacity: .85; }
.alt-yasal button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.cerez-bildirimi { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: 0 10px 30px #0002; padding: 14px 16px; display: flex; gap: 14px; align-items: center; font-size: 13.5px; }
.cerez-bildirimi[hidden] { display: none; }
.cerez-bildirimi p { margin: 0; flex: 1; }
.cerez-bildirimi a { text-decoration: underline; }
.cerez-bildirimi > div { display: flex; gap: 8px; flex-shrink: 0; }
.onay span a { text-decoration: underline; }
@media (max-width: 720px) {
    .cerez-bildirimi { flex-direction: column; align-items: stretch; }
    .yasal-metin { padding: 20px 16px; }
}

/* Başlık: arama alanı ve popüler aramalar (panel > Site Menüleri), favoriler */
.arama-alani { flex: 1; max-width: 640px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.arama-alani .arama { max-width: none; }
.populer-aramalar { display: flex; align-items: center; gap: 10px; font-size: 12px; min-width: 0; }
.populer-etiket { color: var(--soluk); line-height: 1.2; flex-shrink: 0; }
.populer-liste { display: flex; gap: 6px; flex-wrap: wrap; max-height: 26px; overflow: hidden; flex: 1; min-width: 0; }
.populer-aramalar.acik .populer-liste { max-height: none; }
.populer-liste a { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.populer-liste a:hover { border-color: var(--vurgu); color: var(--vurgu); }
.populer-tumu { border: 0; background: none; color: var(--vurgu); font-weight: 700; font-size: 12px; cursor: pointer; flex-shrink: 0; }
.ust-menu-oge > a .bi { font-size: 15px; color: var(--soluk); }
.ust-menu-oge:hover > a .bi { color: var(--vurgu); }
.urun-karti { position: relative; }
.favori-form { margin: 0; }
.urun-karti > .favori-form { position: absolute; top: 10px; right: 10px; z-index: 2; }
.favori-dugme { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cizgi); background: #fff; color: var(--soluk); cursor: pointer; display: grid; place-items: center; font-size: 15px; transition: color .15s, border-color .15s; }
.favori-dugme:hover, .favori-dugme.secili { color: #e11d48; border-color: #fecdd3; }
.urun-karti .kart-ust { padding-right: 40px; }
.urun-baslik-satiri { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.urun-baslik-satiri .favori-dugme { width: 40px; height: 40px; font-size: 18px; flex-shrink: 0; }
.mobil-hesap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.mobil-hesap a { display: flex; align-items: center; gap: 6px; padding: 9px 10px; border: 1px solid var(--cizgi); border-radius: 8px; font-size: 13px; font-weight: 600; }
@media (max-width: 1024px) {
    .arama-alani { order: 3; flex-basis: 100%; max-width: none; }
    .populer-aramalar { display: none; }
}

/* Kayıt ve başvuru sayfası: başlıksız, iki bölmeli */
.yalin-sayfa main { padding: 0; }
.kayit-sayfa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.kayit-gorsel { position: sticky; top: 0; height: 100vh; background: linear-gradient(160deg, var(--vurgu) 0%, #0b5f2a 100%) center / cover no-repeat; padding: 24px; }
.kayit-geri { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px #0002; }
.kayit-icerik { background: var(--zemin); padding: 32px; display: flex; justify-content: center; }
.kayit-kart { width: 100%; max-width: 640px; background: #fff; border: 1px solid var(--cizgi); border-radius: 16px; padding: 28px; align-self: flex-start; }
.kayit-ust { display: block; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--vurgu); margin-bottom: 8px; }
.kayit-kart h1 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; }
.kayit-kart form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.hesap-tipi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kayit-bolum { border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.kayit-bolum legend { display: flex; gap: 10px; align-items: flex-start; padding: 0 6px; }
.kayit-bolum legend > i { font-size: 20px; color: var(--vurgu); }
.kayit-bolum legend span { display: flex; flex-direction: column; }
.kayit-bolum legend b { font-size: 14px; }
.kayit-bolum legend small { font-size: 12px; color: var(--soluk); font-weight: 400; }
.kayit-bolum label em, .kayit-onaylar em { color: #dc2626; font-style: normal; }
.kayit-bolum > label, .kayit-bolum .form-ikili > label { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; font-weight: 600; }
.kayit-bolum input:not([type=checkbox]):not([type=radio]), .kayit-bolum select, .kayit-bolum textarea {
    box-sizing: border-box; width: 100%; min-height: 42px; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; padding: 9px 12px; font-weight: 400; outline: none; transition: border-color .15s, box-shadow .15s;
}
.kayit-bolum textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
.kayit-bolum select { appearance: none; padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2364758b' stroke-width='1.8'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.kayit-bolum input::placeholder, .kayit-bolum textarea::placeholder { color: #94a3b8; }
.kayit-bolum input:not([type=checkbox]):not([type=radio]):focus, .kayit-bolum select:focus, .kayit-bolum textarea:focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-acik); }
.kayit-bolum input:disabled, .kayit-bolum select:disabled, .kayit-bolum textarea:disabled { background: var(--zemin); color: var(--soluk); cursor: not-allowed; }
.ikonlu { position: relative; display: block; }
.ikonlu > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--soluk); pointer-events: none; }
.ikonlu input { padding-left: 36px !important; width: 100%; }
.sifre-goster { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--soluk); cursor: pointer; font-size: 16px; }
.kayit-onaylar { display: flex; flex-direction: column; gap: 6px; }
.kayit-not { text-align: center; font-size: 12.5px; margin: 0; }
.kayit-tamam { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 10vh; }
.kayit-tamam > .bi { font-size: 56px; color: var(--vurgu); }
@media (max-width: 960px) {
    .kayit-sayfa { grid-template-columns: 1fr; }
    .kayit-gorsel { position: relative; height: 140px; }
    .kayit-icerik { padding: 16px; }
    .kayit-kart { padding: 18px; }
    .kayit-kart h1 { font-size: 22px; }
}

/* İletişim sayfası: solda form, sağda iletişim kartları, adres ve harita */
.iletisim-sayfa { padding-bottom: 40px; }
.iletisim-bas h1 { font-size: 28px; margin: 0 0 4px; }
.iletisim-bas p { margin: 0 0 16px; }
.iletisim-duzen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.iletisim-form, .iletisim-bilgi { padding: 24px; }
#iletisim-form { scroll-margin-top: 150px; }
.iletisim-kart-bas { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.iletisim-kart-bas h2 { font-size: 17px; margin: 0; }
.iletisim-kart-bas p { margin: 2px 0 0; font-size: 13px; }
.iletisim-ikon { width: 40px; height: 40px; border-radius: 10px; background: var(--vurgu-acik); color: var(--vurgu); display: grid; place-items: center; font-size: 17px; flex: none; }
.iletisim-form form { display: flex; flex-direction: column; gap: 14px; }
.iletisim-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; font-weight: 600; }
.iletisim-form label em { color: #dc2626; font-style: normal; }
.iletisim-form input:not([type=checkbox]), .iletisim-form select, .iletisim-form textarea {
    box-sizing: border-box; width: 100%; min-height: 44px; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; padding: 10px 12px 10px 38px; font: inherit; font-weight: 400; outline: none; transition: border-color .15s, box-shadow .15s;
}
.iletisim-form select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2364758b' stroke-width='1.6'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.iletisim-form textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.iletisim-form input:focus, .iletisim-form select:focus, .iletisim-form textarea:focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-acik); }
.iletisim-form input::placeholder, .iletisim-form textarea::placeholder { color: #94a3b8; }
.ikonlu-uzun > i { top: 14px; transform: none; }
.karakter-sayac { align-self: flex-end; font-weight: 400; color: var(--soluk); font-size: 12px; }
.iletisim-form .onay { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; color: var(--soluk); font-size: 13px; }
.iletisim-form .onay a { color: var(--vurgu); text-decoration: underline; }
.iletisim-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; padding-bottom: 18px; border-bottom: 1px solid var(--cizgi); }
.iletisim-oge { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; min-width: 0; }
.iletisim-oge > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.iletisim-oge h2 { font-size: 14px; margin: 0; }
.iletisim-oge .kalin { font-weight: 700; overflow-wrap: anywhere; }
.iletisim-oge small { font-size: 12px; }
.iletisim-wa { align-self: flex-start; margin-top: 8px; }
.iletisim-saatler > div:not(:first-child) { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.iletisim-saatler b { white-space: nowrap; }
.iletisim-adres { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.iletisim-sosyal { margin: 0; padding: 0; flex: none; }
.iletisim-harita { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--cizgi); }
.iletisim-harita iframe { display: block; width: 100%; height: 360px; border: 0; }
.harita-ac { position: absolute; top: 12px; left: 12px; z-index: 1; background: #fff; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--vurgu-koyu); box-shadow: 0 2px 8px rgba(16,24,40,.15); }
@media (max-width: 1024px) {
    .iletisim-duzen { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .iletisim-izgara { grid-template-columns: 1fr; }
    .iletisim-form, .iletisim-bilgi { padding: 18px; }
    .iletisim-adres { flex-direction: column; align-items: flex-start; }

}

/* Giriş sayfası: kayıt sayfasının bölünmüş düzeni, kart dikeyde ortalanır */
.giris-icerik { align-items: center; }
.giris-kart { max-width: 520px; align-self: center; }
.giris-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.giris-form > label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.giris-form input:not([type=checkbox]) { box-sizing: border-box; width: 100%; min-height: 46px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; padding: 10px 40px 10px 12px; font: inherit; font-weight: 400; outline: none; transition: border-color .15s, box-shadow .15s; }
.giris-form input:focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-acik); }
.giris-form input::placeholder { color: #94a3b8; }
.giris-satir { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.giris-satir .onay { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soluk); }
.giris-baglanti { color: var(--vurgu); font-weight: 700; font-size: 13px; }
.giris-baglanti:hover { text-decoration: underline; }
.giris-alt { margin: 14px 0 0; font-size: 13px; color: var(--soluk); }

/* Sepet: solda ürün tablosu, sağda sipariş özeti (ziyaretçide giriş çağrısı, üyede sipariş formu) */
.sepet-sayfa { padding-bottom: 40px; }
.sepet-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.sepet-bas h1 { font-size: 26px; margin: 0 0 4px; }
.sepet-bas p { margin: 0; font-size: 13px; }
.sepet-temizle { background: #fff; }
.sepet-sayfa .sepet-duzen { grid-template-columns: minmax(0, 1fr) 360px; }
.sepet-tablo-kart { padding: 0; overflow: hidden; }
.sepet-tablo { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sepet-tablo th:nth-child(2) { width: 120px; } .sepet-tablo th:nth-child(3) { width: 180px; } .sepet-tablo th:nth-child(4) { width: 120px; } .sepet-tablo th:nth-child(5) { width: 76px; }
.sepet-tablo th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); padding: 14px 16px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.sepet-tablo td { padding: 16px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.sepet-tablo tbody tr:last-child td { border-bottom: 0; }
.sepet-tablo tr.uyarili td { background: #fffaf0; }
.sepet-tablo .sag { text-align: right; }
.st-urun-ic { display: flex; gap: 14px; min-width: 0; }
.st-urun .sepet-bilgi { min-width: 0; }
.st-urun .sepet-baski-dosyasi { max-width: 100%; flex-wrap: wrap; }
.st-urun .sepet-baski-dosyasi small, .st-urun .sepet-baski-ad { white-space: normal; overflow-wrap: anywhere; }
.st-urun-ic .sepet-gorsel { width: 78px; height: 78px; flex: none; }
.st-fiyat, .st-toplam { white-space: nowrap; }
.st-fiyat b, .st-toplam b { display: block; font-size: 14px; }
.st-fiyat small { font-size: 12px; }
.st-adet { width: 170px; }
.st-adet .adet { width: 144px; }
.st-adet small { display: block; margin-top: 6px; font-size: 11.5px; white-space: nowrap; }
.st-islem .sil { width: 40px; height: 40px; border: 1px solid var(--cizgi); border-radius: 10px; display: grid; place-items: center; margin-left: auto; transition: color .15s, border-color .15s, background .15s; }
.st-islem .sil:hover { color: var(--tehlike); border-color: #f5c2c2; background: #fdecec; }
.secenek-etiketleri { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.secenek-etiketleri span { border: 1px solid var(--cizgi); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--soluk); background: #fff; }
.sepet-not { margin: 0; padding: 14px 16px; font-size: 12px; border-top: 1px solid var(--cizgi); }
.siparis-ozeti { padding: 22px; position: sticky; top: 150px; display: flex; flex-direction: column; gap: 12px; }
.siparis-ozeti h2 { font-size: 18px; margin: 0 0 4px; }
.ozet-satir { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; color: var(--soluk); }
.ozet-satir b { color: var(--metin); }
.ozet-genel { border-top: 1px solid var(--cizgi); padding-top: 14px; margin-top: 4px; font-size: 16px; color: var(--metin); font-weight: 700; }
.ozet-genel b { color: var(--vurgu); font-size: 18px; }
.ozet-giris-uyari { background: #fdf0f3; border: 1px solid #f6c8d3; color: #b42350; border-radius: 10px; padding: 14px 16px; font-size: 13px; margin-top: 6px; }
.ozet-kayit { margin: 0; font-size: 12.5px; text-align: center; }
.ozet-kayit a { color: var(--vurgu); font-weight: 600; }
.ozet-uyari { margin: 4px 0 0; }
.ozet-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.ozet-hesap { margin: 0; font-size: 13px; }
.ozet-not { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.ozet-not textarea { border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 12px; font: inherit; font-weight: 400; resize: vertical; }
@media (max-width: 1024px) {
    .sepet-sayfa .sepet-duzen { grid-template-columns: 1fr; }
    .siparis-ozeti { position: static; }
}
/* Dar ekranda tablo kartlara dönüşür: ürün üstte, fiyat/adet/toplam başlıklarıyla alt alta */
@media (max-width: 720px) {
    .sepet-bas { flex-direction: column; }
    .sepet-tablo thead { display: none; }
    .sepet-tablo, .sepet-tablo tbody, .sepet-tablo tr { display: block; }
    .sepet-tablo tr { position: relative; padding: 14px; border-bottom: 1px solid var(--cizgi); }
    .sepet-tablo td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border: 0; }
    .sepet-tablo td[data-baslik]::before { content: attr(data-baslik); font-size: 12px; color: var(--soluk); }
    .sepet-tablo { table-layout: auto; }
    .st-urun { display: block !important; padding-right: 48px !important; }
    .st-adet { width: auto; flex-wrap: wrap; }
    .st-adet small { width: 100%; text-align: right; }
    .st-islem { position: absolute; top: 14px; right: 14px; padding: 0 !important; }
    .st-fiyat, .st-toplam { text-align: right; }
}

/* Sipariş adım çubuğu: sepet → adres ve kargo → ödeme */
.adim-cubugu { list-style: none; margin: 0 0 20px; padding: 0; display: flex; }
.adim-cubugu li { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--soluk); font-size: 13.5px; font-weight: 600; }
.adim-cubugu li:last-child { flex: none; }
.adim-cubugu li:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--cizgi); border-radius: 2px; margin-right: 10px; }
.adim-cubugu li.tamam:not(:last-child)::after { background: var(--vurgu); }
.adim-cubugu li > a, .adim-cubugu li > span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.adim-cubugu .adim-no { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--cizgi); background: #fff; font-size: 15px; flex: none; }
.adim-cubugu li.aktif { color: var(--metin); }
.adim-cubugu li.aktif .adim-no { border-color: var(--vurgu); background: var(--vurgu); color: #fff; box-shadow: 0 0 0 4px var(--vurgu-acik); }
.adim-cubugu li.tamam { color: var(--vurgu-koyu); }
.adim-cubugu li.tamam .adim-no { border-color: var(--vurgu); color: var(--vurgu); background: var(--vurgu-acik); }
.adim-cubugu li.tamam a:hover .adim-ad { text-decoration: underline; }

.adim-icerik { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.adim-icerik form { display: flex; flex-direction: column; gap: 16px; }
.adim-kart { padding: 20px 22px; }
.adim-kart-bas { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.adim-kart-bas h2 { font-size: 17px; display: flex; align-items: center; gap: 10px; }
.adim-kart-bas h2 > i { color: var(--vurgu); }
.adim-kart-no { width: 26px; height: 26px; border-radius: 50%; background: var(--vurgu-acik); color: var(--vurgu-koyu); display: grid; place-items: center; font-size: 13px; }
.adim-not { margin: 12px 0 0; font-size: 12.5px; }
.adim-not i { color: var(--vurgu); margin-right: 4px; }
.adim-bos { text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.adim-bos > i { font-size: 38px; color: var(--vurgu); }
.adim-bos p { max-width: 460px; margin: 0 0 6px; }

.adres-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.adres-kart { position: relative; padding: 14px 14px 14px 12px; }
.adres-kart-ic { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 64px; }
.adres-kart-bas { display: flex; align-items: center; gap: 8px; }
.adres-kart-bas em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--vurgu-koyu); background: var(--vurgu-acik); border-radius: 999px; padding: 1px 8px; }
.adres-kart-bas em.kurumsal { color: #1a56db; background: #e8f0fe; }
.adres-kart small { margin-top: 0; overflow-wrap: anywhere; }
.adres-kart .adres-fatura { padding-top: 6px; margin-top: 4px; border-top: 1px dashed var(--cizgi); }
.adres-duzenle { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 600; color: var(--vurgu); }
.adres-duzenle:hover { text-decoration: underline; }
.fatura-ayni { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13.5px; }

.ozet-urunler { list-style: none; margin: 0 0 4px; padding: 0 0 12px; border-bottom: 1px solid var(--cizgi); display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow: auto; }
.ozet-urunler li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ozet-gorsel { width: 44px; height: 44px; flex: none; border: 1px solid var(--cizgi); border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #fff; color: var(--soluk); }
.ozet-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.ozet-urun-ad { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ozet-urun-ad b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ozet-urun-ad small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ozet-urun-tutar { white-space: nowrap; font-size: 12.5px; }
.siparis-ozeti .onay { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--soluk); }
.siparis-ozeti .onay input { margin-top: 3px; }
.sepet-baski-not { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--soluk); }
.sepet-baski-not i { color: #dc2626; }
.adim-kart .sepet-baski-dosyasi + .sepet-baski-dosyasi { margin-top: 10px; }

.secim-ozeti { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.secim-ozeti > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fafbfc; min-width: 0; }
.secim-ozeti span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.secim-ozeti small { color: var(--soluk); overflow-wrap: anywhere; }

/* Ödeme şekli: havale/EFT hesap listesi ya da kart */
.odeme-secenekleri { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.odeme-secenek { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px solid var(--cizgi); border-radius: 12px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.odeme-secenek:has(input:checked) { border-color: var(--vurgu); background: var(--vurgu-acik); }
.odeme-secenek input { accent-color: var(--vurgu); }
.odeme-secenek > i { font-size: 24px; color: var(--vurgu); }
.odeme-secenek span { display: flex; flex-direction: column; }
.odeme-secenek small { color: var(--soluk); font-size: 12px; }
.odeme-alani { border: 0; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--cizgi); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.odeme-alani legend { font-weight: 700; font-size: 14px; padding: 16px 0 0; }
.banka-kart { align-items: center; }
.banka-bilgi { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.iban { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13.5px; letter-spacing: .03em; color: var(--metin); overflow-wrap: anywhere; }
.iban-kopyala { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--cizgi); background: #fff; border-radius: 7px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--vurgu); }
.iban-kopyala:hover { border-color: var(--vurgu); }

.kart-formu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.kart-formu label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.kart-formu .kf-tam { grid-column: 1 / -1; }
.kart-formu input, .kart-formu select { border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 12px; font-weight: 400; outline: none; background: #fff; width: 100%; }
.kart-formu input:focus, .kart-formu select:focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-acik); }
.kf-no { position: relative; display: block; }
.kf-no i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--soluk); font-size: 18px; }
.kf-no input { padding-left: 40px; letter-spacing: .06em; }
.kart-guvenlik { margin: 10px 0 0; font-size: 12px; color: var(--soluk); }
.kart-guvenlik i { color: var(--vurgu); }
.odeme-dugme { margin-top: 16px; min-width: 220px; }
.paytr-kap iframe { width: 100%; min-height: 600px; border: 0; }

/* Sipariş detayında ödeme durumu */
.odeme-kutusu { border: 1px solid var(--cizgi); border-radius: 10px; padding: 14px; margin-bottom: 16px; background: #fafbfc; }
.odeme-kutusu-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.odeme-kutusu-bas h2 { margin: 0; }
.odeme-kutusu p { margin: 6px 0 0; }
.odeme-durum { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: #fff4e0; color: var(--uyari); }
.odeme-odendi { border-color: #a8d8b5; background: #f6fcf7; }
.odeme-odendi .odeme-durum { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
.odeme-basarisiz .odeme-durum { background: #fdecec; color: var(--tehlike); }
.havale-bilgi { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding: 12px; border-radius: 8px; background: #fff; border: 1px dashed var(--cizgi); font-size: 13px; }
.iban-satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.odeme-kutusu .dugme { margin-top: 10px; }

@media (max-width: 720px) {
    .adim-cubugu .adim-ad { display: none; }
    .adim-cubugu li.aktif .adim-ad { display: inline; }
    .adim-kart { padding: 16px; }
    .kart-formu { grid-template-columns: 1fr 1fr; }
    .kart-formu label:last-child { grid-column: 1 / -1; }
    .banka-kart { flex-wrap: wrap; }
}

/* Havale bilgisinde alıcı adı, IBAN ve açıklama ayrı ayrı kopyalanır */
.kopya-satir { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 0; }
.kopya-satir + .kopya-satir { border-top: 1px dashed var(--cizgi); }
.kopya-etiket { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--soluk); }
.kopya-deger { font-size: 13.5px; overflow-wrap: anywhere; }
.banka-bilgi > b small { font-weight: 500; color: var(--soluk); font-size: 12px; margin-left: 4px; }
.banka-bilgi { gap: 4px; }
@media (max-width: 720px) { .kopya-satir { grid-template-columns: 1fr auto; } .kopya-etiket { grid-column: 1 / -1; } }

/* Üye sipariş detayı: üstte sipariş özeti ve durum çizelgesi, bekleyen ödeme için çağrı, altta ürünler ve yan bilgiler */
.sd-sayfa { padding-bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
.sd-sayfa > .kirinti { margin-bottom: 0; }
.sd-sayfa > .uyari { margin: 0; }
.sd-etiket { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soluk); }
.sd-bas { padding: 22px 24px; }
.sd-bas-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sd-bas h1 { font-size: 26px; display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
.sd-bas p { margin: 0; font-size: 13px; }
.sd-bas-sag { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sd-toplam { font-size: 22px; color: var(--vurgu); }
.sd-kopya-ikon { width: 30px; height: 30px; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; display: inline-grid; place-items: center; font-size: 13px; color: var(--soluk); cursor: pointer; }
.sd-kopya-ikon:hover, .sd-kopya-ikon.kopyalandi { color: var(--vurgu); border-color: var(--vurgu); }
.sd-iptal { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: #fdecec; color: var(--tehlike); font-weight: 600; font-size: 13.5px; }
.sd-izleme { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.sd-izleme li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--soluk); }
.sd-izleme li::before { content: ""; position: absolute; top: 18px; right: 50%; width: 100%; height: 3px; background: var(--cizgi); z-index: 0; }
.sd-izleme li:first-child::before { display: none; }
.sd-izleme li.tamam::before { background: var(--vurgu); }
.sd-izleme-ikon { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--cizgi); font-size: 16px; }
.sd-izleme li.tamam { color: var(--vurgu-koyu); }
.sd-izleme li.tamam .sd-izleme-ikon { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.sd-izleme li.siradaki { color: var(--metin); }
.sd-izleme li.siradaki .sd-izleme-ikon { border-color: var(--uyari); color: var(--uyari); box-shadow: 0 0 0 4px #fff4e0; }

.sd-cagri-ikon { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: #fff4e0; color: var(--uyari); }
.sd-cagri { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-color: #f6d9a8; background: #fffaf0; }
.sd-cagri-metin { flex: 1; }
.sd-cagri h2, .sd-havale h2 { font-size: 17px; margin: 0 0 4px; }
.sd-cagri p, .sd-havale-bas p { margin: 0; font-size: 13.5px; color: var(--soluk); }
.sd-havale { padding: 22px 24px; border-color: #f6d9a8; background: linear-gradient(#fffaf0, #fff 120px); }
.sd-havale-bas { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.sd-havale-bas b { color: var(--metin); }
.sd-havale-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sd-bilgi { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border: 1px solid var(--cizgi); border-radius: 12px; background: #fff; min-width: 0; }
.sd-bilgi > b, .sd-bilgi > code { font-size: 15px; overflow-wrap: anywhere; }
.sd-bilgi-genis { grid-column: span 2; }
.sd-bilgi-vurgu { border-color: var(--vurgu); background: var(--vurgu-acik); }
.sd-kopya { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--vurgu); border-radius: 8px; background: #fff; color: var(--vurgu); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.sd-kopya:hover, .sd-kopya.kopyalandi { background: var(--vurgu); color: #fff; }
.sd-havale-not { margin: 14px 0 0; font-size: 13px; color: var(--uyari); }

.sd-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.sd-ana, .sd-yan { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sd-kart { padding: 20px 22px; }
.sd-kart h2 { font-size: 16px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.sd-kart h2 > i { color: var(--vurgu); }
.sd-urunler { list-style: none; margin: 0; padding: 0; }
.sd-urunler li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--cizgi); }
.sd-urun-ikon { width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--zemin); display: grid; place-items: center; color: var(--soluk); font-size: 18px; }
.sd-urun-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sd-urun-bilgi small { font-size: 12.5px; }
.sd-urun-tutar { white-space: nowrap; }
.sd-toplamlar { margin-left: auto; max-width: 340px; padding-top: 14px; border-top: 1px solid var(--cizgi); display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.sd-toplamlar > div { display: flex; justify-content: space-between; gap: 16px; color: var(--soluk); }
.sd-toplamlar b { color: var(--metin); }
.sd-toplamlar .genel { padding-top: 10px; border-top: 1px solid var(--cizgi); font-size: 16px; color: var(--metin); font-weight: 700; }
.sd-toplamlar .genel b { color: var(--vurgu); font-size: 19px; }
.sd-satir { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; font-size: 13.5px; }
.sd-satir + .sd-satir { border-top: 1px dashed var(--cizgi); }
.sd-metin { margin: 0; white-space: pre-line; font-size: 13.5px; line-height: 1.6; }
.sd-not { margin: 10px 0 0; font-size: 12.5px; }
.sd-kart .dugme { margin-top: 12px; }
.odeme-durum.odeme-odendi { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
.odeme-durum.odeme-basarisiz { background: #fdecec; color: var(--tehlike); }
.sd-belge { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 13.5px; font-weight: 600; }
.sd-belge + .sd-belge { border-top: 1px dashed var(--cizgi); }
.sd-belge > i:first-child { color: var(--vurgu); font-size: 17px; }
.sd-belge > i:last-child { margin-left: auto; color: var(--soluk); font-size: 12px; }
.sd-belge:hover { color: var(--vurgu); }
.sd-dosyalar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sd-dosyalar a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 10px; }
.sd-dosyalar a:hover { border-color: var(--vurgu); }
.sd-dosyalar a > i:first-child { color: #dc2626; font-size: 22px; }
.sd-dosyalar a > i:last-child { margin-left: auto; color: var(--vurgu); }
.sd-dosyalar span { display: flex; flex-direction: column; min-width: 0; }
.sd-dosyalar b { overflow-wrap: anywhere; font-size: 13px; }
.sd-eylemler { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sd-eylemler form { width: 100%; }
.sd-iptal-dugme { border: 0; background: none; color: var(--tehlike); font-weight: 600; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px; }
.sd-eylemler small { font-size: 12px; }

@media (max-width: 1024px) {
    .sd-duzen { grid-template-columns: 1fr; }
    .sd-havale-izgara { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .sd-bas, .sd-havale, .sd-kart { padding: 16px; }
    .sd-bas-sag { align-items: flex-start; }
    .sd-izleme li { font-size: 11px; }
    .sd-izleme-ikon { width: 32px; height: 32px; font-size: 14px; }
    .sd-izleme li::before { top: 15px; }
    .sd-cagri { flex-wrap: wrap; }
    .sd-cagri .dugme { width: 100%; }
    .sd-havale-izgara { grid-template-columns: 1fr; }
    .sd-bilgi-genis { grid-column: auto; }
    .sd-urunler li { flex-wrap: wrap; }
    .sd-urun-tutar { margin-left: 58px; }
}

/* Hesap sayfası sekmeleri */
.hesap-dogrulama { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.hesap-kimlik { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hesap-kimlik > div { min-width: 0; overflow-wrap: anywhere; }
.hesap-avatar { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--vurgu-acik); color: var(--vurgu-koyu); font-size: 20px; font-weight: 800; }
.hesap-sekmeler { display: flex; gap: 4px; padding: 6px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.hesap-sekmeler::-webkit-scrollbar { display: none; }
.hesap-sekme { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-weight: 600; color: var(--soluk); white-space: nowrap; transition: background .15s, color .15s; }
.hesap-sekme:hover { background: var(--zemin); color: var(--metin); }
.hesap-sekme[aria-selected=true] { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
.hesap-sekme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }
.hesap-sekme i { font-size: 16px; }
.hesap-sekme-sayi { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--zemin); color: var(--soluk); font-size: 12px; font-weight: 700; text-align: center; }
.hesap-sekme[aria-selected=true] .hesap-sekme-sayi { background: var(--vurgu); color: #fff; }
.hesap-kart { padding: 22px; }
.hesap-kart h2 { font-size: 18px; }
.hesap-kart.talep-formu { position: static; top: auto; }
.hesap-kart > h2 + .tablo-kap { margin-top: 8px; }
.hesap-kart-bas { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; }
.hesap-kart-bas p { margin: 2px 0 0; font-size: 13px; }
.hesap-kart p a { color: var(--vurgu); font-weight: 600; }
.hesap-kart p a:hover { text-decoration: underline; }
.hesap-iki-kolon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.hesap-form { max-width: 720px; margin-top: 6px; }
.hesap-form label { min-width: 0; }
.hesap-form input, .hesap-form textarea { width: 100%; }
.hesap-form > .dugme { align-self: flex-start; }
.hesap-bos { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; text-align: center; color: var(--soluk); }
.hesap-bos > i { font-size: 40px; color: #cfd4da; }
.hesap-bos p { margin: 0; }
.hesap-adresler { margin: 0; }
.hesap-adresler .adres-islem { align-items: center; gap: 14px; }
.hesap-adresler .adres-islem a { color: var(--vurgu); font-weight: 600; }
.hesap-adresler .adres-islem a:hover, .hesap-adresler .adres-islem button:hover { text-decoration: underline; }
.hesap-tehlike h2 { color: var(--tehlike); }
.hesap-tehlike .dugme { color: var(--tehlike); border-color: var(--tehlike); }
.hesap-tehlike .dugme:hover { background: #fdecec; color: var(--tehlike); }
.hesap-izin { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.hesap-izin > div { flex: 1 1 320px; }
.hesap-izin .durum { margin-left: 6px; }
.hesap-izin p { margin: 4px 0 0; }
.talep-formu p.hesap-yasal { margin: 8px 0 0; }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1024px) {
    .hesap-iki-kolon { grid-template-columns: 1fr; }
}
/* Telefonda sipariş tablosu yatay kaydırma yerine kart olarak okunur */
@media (max-width: 720px) {
    .hesap-kart { padding: 16px; }
    .hesap-sekme { padding: 9px 12px; }
    .hesap-baslik > form, .hesap-baslik > form .dugme { width: 100%; }
    .hesap-form > .dugme, .hesap-izin form, .hesap-izin form .dugme, .hesap-bos .dugme { width: 100%; }
    .hesap-siparis-tablo thead { display: none; }
    .hesap-siparis-tablo, .hesap-siparis-tablo tbody { display: block; }
    .hesap-siparis-tablo tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "kod durum" "tarih tutar" "islem islem"; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
    .hesap-siparis-tablo tr:last-child { border-bottom: 0; }
    .hesap-siparis-tablo td { display: block; padding: 0; border: 0; }
    .hs-kod { grid-area: kod; }
    .hs-durum { grid-area: durum; text-align: right; }
    .hs-tarih { grid-area: tarih; color: var(--soluk); }
    .hs-tutar { grid-area: tutar; font-weight: 700; }
    .hs-islem { grid-area: islem; }
    .hs-islem .dugme { width: 100%; }
}

/* Kupon */
.kupon-kutu { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--cizgi); }
.kupon-etiket { font-size: 13px; font-weight: 600; }
.kupon-giris { display: flex; gap: 8px; }
.kupon-giris input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: 8px; font: inherit; }
.kupon-uygulanan { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--vurgu-acik); border-radius: 8px; color: var(--vurgu-koyu); }
.kupon-uygulanan small { display: block; font-weight: 500; }
.kupon-kaldir { border: 0; background: none; padding: 0; color: var(--tehlike); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.kupon-kaldir:hover { text-decoration: underline; }
.kupon-mesaj { margin: 0; font-size: 12.5px; font-weight: 600; }
.kupon-tamam { color: var(--vurgu-koyu); }
.kupon-hata { color: var(--tehlike); }
.ozet-indirim, .ozet-indirim b { color: var(--vurgu-koyu); font-weight: 700; }
.ozet-kazanc { margin: 0; font-size: 12.5px; }
.sd-kupon, .sd-kupon b { color: var(--vurgu-koyu); }