/* Çeyiz Ajandası — "Deniz-Teal Güven" teması: ferah beyaz + teal (güven+ferahlık) aksan.
   --gul token'ı artık TEAL ana-aksan (isim korundu, ~155 yerde kullanılıyor). Deals=amber (semantik pop). */
:root {
  --paper: #f6f9fb;        /* ferah cool-beyaz */
  --surface: #ffffff;      /* kart */
  --surface-2: #eaf1f5;    /* hafif teal-gri */
  --ink: #12222b;          /* koyu deniz (neredeyse-siyah, mavi eğilimli) */
  --text: #3a4c55;
  --muted: #46606f;        /* Ayşe-fix: güçlendirilmiş kontrast (~5.9:1, 52+ göz) */
  --hair: #dbe6ec;         /* cool hairline */
  --gul: #0e7490;          /* TEAL — ana aksan (token adı korundu) */
  --gul-soft: #d9eef2;     /* teal-tint (çip zemini) */
  --gul-ink: #0b5563;      /* koyu teal (tint üstü metin) */
  --altin: #b26a08;        /* fırsat vurgusu = amber (teal'e karşı semantik pop) */
  --yesil: #157f5f;        /* en ucuz/olumlu (teal-yeşil uyumu) */
  --sari: #a86a10;         /* indirim rozeti (amber) */
  --kirmizi: #b3402f;      /* uyarı (cool palete karşı sıcak kırmızı) */
  --gol-w: 460px;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: "SF Mono", Menlo, Consolas, monospace;
  --golge: 0 1px 2px rgba(18,34,43,.05), 0 10px 26px -12px rgba(18,34,43,.14);
  --golge-sm: 0 1px 2px rgba(18,34,43,.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1a20; --surface: #16242c; --surface-2: #1d2f38; --ink: #eaf4f8;
    --text: #b8c8d0; --muted: #9bb0ba; --hair: #2a3d46; --gul: #38b6c9;
    --gul-soft: #10323c; --gul-ink: #7fd4e0; --altin: #d69a3e; --yesil: #57b08a;
    --sari: #d0a24e; --kirmizi: #d97a6e;
    --golge: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -12px rgba(0,0,0,.5);
    --golge-sm: 0 1px 3px rgba(0,0,0,.35);
  }
}
:root[data-theme="light"] {
  --paper:#f6f9fb;--surface:#ffffff;--surface-2:#eaf1f5;--ink:#12222b;--text:#3a4c55;
  --muted:#46606f;--hair:#dbe6ec;--gul:#0e7490;--gul-soft:#d9eef2;--gul-ink:#0b5563;
  --altin:#b26a08;--yesil:#157f5f;--sari:#a86a10;--kirmizi:#b3402f;
  --golge:0 1px 2px rgba(18,34,43,.05),0 10px 26px -12px rgba(18,34,43,.14);--golge-sm:0 1px 2px rgba(18,34,43,.07);
}
:root[data-theme="dark"] {
  --paper:#0f1a20;--surface:#16242c;--surface-2:#1d2f38;--ink:#eaf4f8;--text:#b8c8d0;
  --muted:#9bb0ba;--hair:#2a3d46;--gul:#38b6c9;--gul-soft:#10323c;--gul-ink:#7fd4e0;
  --altin:#d69a3e;--yesil:#57b08a;--sari:#d0a24e;--kirmizi:#d97a6e;
  --golge:0 1px 2px rgba(0,0,0,.3),0 10px 28px -12px rgba(0,0,0,.5);--golge-sm:0 1px 3px rgba(0,0,0,.35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow-x: hidden; max-width: 100%; }
body {
  background: var(--paper); color: var(--text); font-family: var(--sans);
  line-height: 1.5; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100dvh;
  max-width: var(--gol-w); margin: 0 auto; position: relative;
  overflow-x: hidden;
}
@media (min-width: 461px) { body { border-inline: 1px solid var(--hair); } }

/* ---- Üst bar ---- */
.ust {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
  justify-content: space-between; padding: calc(.6rem + env(safe-area-inset-top)) 1.1rem .6rem;
  background: var(--paper); border-bottom: 1px solid var(--hair);
}
.marka-blok { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.marka-rozet { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; background: var(--gul-soft);
  display: flex; align-items: center; justify-content: center; }
.marka-logo { display: block; width: 26px; height: 26px; flex: 0 0 auto; }
.marka-yazi { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.marka { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.marka-slogan { font-size: .66rem; color: var(--gul-ink); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: .12rem; }
.ust-aksiyon { display: flex; gap: .4rem; align-items: center; }
.tema { background: none; border: 1px solid var(--hair); color: var(--muted); width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; cursor: pointer; flex: 0 0 auto; }
.guven-panel { display: flex; flex-direction: column; gap: .9rem; }
.guven-ust { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.guven-kutu { background: var(--surface-2); border-radius: 12px; padding: .7rem .8rem; }
.guven-kutu .say { font-size: 1.35rem; font-weight: 800; color: var(--gul); font-variant-numeric: tabular-nums; }
.guven-kutu .etk { font-size: .74rem; color: var(--muted); margin-top: .1rem; }
.guven-not { font-size: .86rem; color: var(--text); line-height: 1.5; background: color-mix(in srgb, var(--altin) 10%, var(--surface)); border-radius: 10px; padding: .6rem .75rem; }
.guven-aksiyon { display: flex; flex-direction: column; gap: .5rem; margin-top: .2rem; }
.guven-aksiyon button { width: 100%; padding: .7rem; border-radius: 10px; border: 1px solid var(--hair); background: var(--surface); color: var(--ink); font-size: .9rem; font-weight: 600; cursor: pointer; }

.gorunum { flex: 1; padding: 1rem 1.1rem 6.5rem; }
h2.baslik { font-family: var(--serif); color: var(--ink); font-size: 1.35rem; font-weight: 600; margin: .3rem 0 1rem; letter-spacing: -.01em; }
.altbaslik { font-size: .82rem; color: var(--muted); margin: 1.4rem 0 .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; display:flex; align-items:center; gap:.5rem;}
.altbaslik::after { content:""; flex:1; height:1px; background:var(--hair); }

/* ---- Arama ---- */
.arama-kutu { display: flex; gap: .5rem; margin-bottom: .5rem; }
.arama-kutu input {
  flex: 1; min-width: 0; padding: .85rem 1rem; border: 1.5px solid var(--hair); border-radius: 13px;
  background: var(--surface); color: var(--ink); font-size: 1rem; font-family: var(--sans);
}
.arama-kutu input:focus { outline: none; border-color: var(--gul); }
.arama-kutu button, .buyuk-btn {
  border: none; background: var(--gul); color: #fff; border-radius: 13px;
  padding: 0 1.1rem; font-size: 1rem; font-weight: 600; cursor: pointer; font-family: var(--sans);
}
.foto-buyuk {
  width: 100%; margin-top: .6rem; padding: 1rem; border-radius: 14px;
  background: var(--gul-soft); color: var(--gul-ink); border: 1.5px dashed var(--gul);
  font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: .6rem; font-family: var(--sans);
}
/* (ölü CSS temizlendi: .foto-buyuk .b, .cipler/.cip, .kart bloğu — app.js'te 0 kullanım) */
.pill {
  font-size: .7rem; padding: .16rem .5rem; border-radius: 20px; background: var(--surface-2);
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
.pill.kaynak { background: var(--gul-soft); color: var(--gul-ink); }
.pill.ind { background: color-mix(in srgb, var(--altin) 18%, transparent); color: var(--altin); }
.pill.ucuz { background: color-mix(in srgb, var(--yesil) 18%, transparent); color: var(--yesil); }
.pill.stoksuz-pill { background: color-mix(in srgb, var(--kirmizi) 16%, transparent); color: var(--kirmizi); }
.taze { font-size: .7rem; color: var(--muted); }

/* ---- Mod A/B başlıkları ---- */
.mod-baslik { display: flex; align-items: center; gap: .5rem; margin: 1.5rem 0 .7rem; }
.mod-baslik .rozet { font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 7px; }
.rozet.a { background: color-mix(in srgb,var(--yesil) 16%,transparent); color: var(--yesil); }
.rozet.b { background: var(--surface-2); color: var(--muted); }
.mod-baslik h3 { margin: 0; font-size: .98rem; color: var(--ink); font-weight: 650; }
.mod-not { font-size: .8rem; color: var(--muted); margin: -.3rem 0 .8rem; }

/* ---- Ürün detay ---- */
.detay-hero { background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; padding: 1rem; box-shadow: var(--golge); margin-bottom: 1rem; }
.detay-hero .gorsel { width: 100%; height: 210px; object-fit: contain; background: var(--surface-2); border-radius: 12px; margin-bottom: .8rem; }
/* Trendyol foto galerisi (kaydırmalı, nokta göstergeli) */
.detay-galeri { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; border-radius: 12px; background: var(--surface-2); }
.detay-galeri::-webkit-scrollbar { display: none; }
.detay-galeri .gkare { flex: 0 0 100%; scroll-snap-align: center; height: 240px; display: flex; align-items: center; justify-content: center; }
.detay-galeri .gkare img { max-width: 100%; max-height: 100%; object-fit: contain; }
.galeri-nokta { display: flex; justify-content: center; gap: .35rem; margin: .5rem 0 .8rem; }
.galeri-nokta span { width: 6px; height: 6px; border-radius: 50%; background: var(--hair); transition: all .2s; }
.galeri-nokta span.aktif { background: var(--gul); width: 18px; border-radius: 3px; }
.detay-hero .ad { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); font-weight: 600; line-height: 1.25; }
.detay-hero .fiyat-buyuk { font-size: 1.9rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: .3rem; }
.detay-hero .fiyat-buyuk .list { font-size: 1rem; color: var(--muted); text-decoration: line-through; font-weight: 400; margin-inline-start: .5rem; }

/* Hüküm rozeti */
.hukum { border-radius: 13px; padding: .8rem .9rem; margin: .9rem 0; font-size: .92rem; font-weight: 550; display: flex; gap: .6rem; align-items: flex-start; line-height: 1.4; }
.hukum .nokta { width: 10px; height: 10px; border-radius: 50%; margin-top: .35rem; flex-shrink: 0; }
.hukum.yesil { background: color-mix(in srgb,var(--yesil) 12%,transparent); color: var(--yesil); }
.hukum.yesil .nokta { background: var(--yesil); }
.hukum.sari { background: color-mix(in srgb,var(--sari) 13%,transparent); color: var(--sari); }
.hukum.sari .nokta { background: var(--sari); }
.hukum.kirmizi { background: color-mix(in srgb,var(--kirmizi) 12%,transparent); color: var(--kirmizi); }
.hukum.kirmizi .nokta { background: var(--kirmizi); }
.hukum.notr { background: var(--surface-2); color: var(--text); }
.hukum.notr .nokta { background: var(--muted); }
/* İyileştirme #1: fiyat-konumu şeridi — solda ucuz(yeşil)→sağda pahalı(kırmızı); işaretçi 'şu an' */
.fiyat-konum { margin: -.4rem 0 .9rem; }
.fiyat-konum .fk-cizgi { position: relative; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--yesil) 60%, transparent), color-mix(in srgb, var(--altin) 45%, transparent), color-mix(in srgb, var(--kirmizi) 60%, transparent)); }
.fiyat-konum .fk-nokta { position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--ink); transform: translate(-50%, -50%); box-shadow: var(--golge-sm); }
.fiyat-konum .fk-uc { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: .35rem; }
.fiyat-konum .fk-uc b { color: var(--ink); font-variant-numeric: tabular-nums; }

.kalite-kutu { background: var(--surface-2); border-radius: 12px; padding: .75rem .9rem; font-size: .88rem; color: var(--text); margin-bottom: .5rem; display:flex; gap:.55rem; align-items:flex-start;}
.kalite-kutu .ik { color: var(--gul); }

.taksit { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 0 .5rem; }
.taksit .t { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--hair); border-radius: 11px; padding: .5rem .8rem; text-align: center; min-width: 84px; }
.taksit .t .ay { font-size: .72rem; color: var(--muted); }
.taksit .t .ay-tl { font-size: .98rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.taksit-not { font-size: .74rem; color: var(--muted); margin-top: -.2rem; }

/* On-demand pazaryeri kıyası (Trendyol/HB canlı) */
.pazar-blok { margin: 1.1rem 0 .3rem; }
.pazar-btn { width: 100%; padding: .85rem; border-radius: 13px; border: 1.5px dashed var(--gul);
  background: var(--gul-soft); color: var(--gul-ink); font-weight: 700; font-size: .95rem; cursor: pointer;
  font-family: var(--sans); display: flex; align-items: center; justify-content: center; gap: .5rem; }
.pazar-btn svg { width: 18px; height: 18px; }
.pazar-btn:disabled { opacity: .6; cursor: default; }
/* Keşfet canlı-ara (Fikir 2): boş/az sonuçta pazaryerlerinde arayıp kataloğa ekle */
.canli-ara-kutu { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); }
.canli-ara-kutu p { font-size: .88rem; color: var(--text); line-height: 1.5; margin: 0 0 .7rem; }
.canli-ara-btn { width: 100%; padding: .8rem; border-radius: 12px; border: 1.5px dashed var(--gul); background: var(--gul-soft); color: var(--gul-ink); font-weight: 700; font-size: .92rem; cursor: pointer; font-family: var(--sans); display: flex; align-items: center; justify-content: center; gap: .5rem; }
.canli-ara-btn svg { width: 18px; height: 18px; }
.canli-ara-btn:disabled { opacity: .6; cursor: default; }
.canli-ara-durum { margin-top: .6rem; }
.pazar-yukleniyor { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .88rem; padding: .8rem .2rem; }
.spin { width: 15px; height: 15px; border: 2px solid var(--hair); border-top-color: var(--gul); border-radius: 50%; animation: don .7s linear infinite; flex: 0 0 auto; }
@keyframes don { to { transform: rotate(360deg); } }
.pazar-baslik { font-weight: 800; font-size: .82rem; color: var(--gul-ink); margin: .7rem 0 .35rem; text-transform: uppercase; letter-spacing: .03em; }
.pazar-satir { display: grid; grid-template-columns: 46px 1fr auto; gap: .6rem; align-items: center;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 11px; padding: .5rem .6rem; margin-bottom: .4rem; text-decoration: none; }
.pazar-satir:active { background: var(--surface-2); }
.pazar-satir img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: var(--surface-2); }
.pazar-satir .pz-yok { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--surface-2); border-radius: 8px; }
.pazar-satir .pz-govde { min-width: 0; }
.pazar-satir .pz-ad { font-size: .82rem; color: var(--text); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pazar-satir .pz-chip { display: inline-block; margin-top: .25rem; font-size: .64rem; font-weight: 700; color: var(--gul-ink); background: var(--gul-soft); padding: .08rem .4rem; border-radius: 6px; }
.pazar-satir .pz-fytblok { text-align: right; }
.pazar-satir .pz-fyt { font-size: 1rem; font-weight: 800; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Koşullu (üye/sepet/kupon) fiyat — küçük + soluk, "herkesin fiyatı" ile karışmasın (dürüstlük) */
.pazar-satir .pz-av { font-size: .64rem; font-weight: 700; color: var(--muted); white-space: nowrap; margin-top: .12rem; font-variant-numeric: tabular-nums; }
.pazar-baslik .rozet.a, .pazar-baslik .rozet.b { font-size: .7rem; padding: .12rem .5rem; }
/* Async arama kuyruğa alındı notu */
.pazar-kuyruk-not { display: flex; gap: .5rem; align-items: flex-start; font-size: .84rem; color: var(--gul-ink); background: var(--gul-soft); border-radius: 11px; padding: .7rem .8rem; line-height: 1.35; }
.pazar-kuyruk-not svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .1rem; }
/* Pazaryeri Aramalarım kartları (Listem) */
.arama-kart { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: .6rem .7rem; margin-bottom: .6rem; }
.arama-kart.hazir { border-color: color-mix(in srgb, var(--yesil) 45%, var(--hair)); }
.arama-kart .ak-bas { display: grid; grid-template-columns: 42px 1fr 28px; gap: .6rem; align-items: center; }
.arama-kart .ak-bas > img, .arama-kart .ak-bas .pz-yok { width: 42px; height: 42px; object-fit: contain; border-radius: 9px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.arama-kart .ak-bilgi { min-width: 0; cursor: pointer; }
.arama-kart .ak-ad { font-size: .86rem; font-weight: 600; color: var(--ink); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.arama-kart .ak-durum { display: flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--muted); margin-top: .1rem; }
.arama-kart .ak-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--sari); }
.arama-kart.hazir .ak-nokta { background: var(--yesil); }
.arama-kart.hata .ak-nokta { background: var(--kirmizi); }
/* Marka İsteği: facet-satırı takip (☆) butonu + Listem kartı */
.marka-takip { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--muted); min-width: 44px; min-height: 44px; }
.marka-takip.on { color: var(--altin); }
.istek-kart { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: .6rem .7rem; margin-bottom: .6rem; cursor: pointer; }
.istek-kart .ik-bas { display: grid; grid-template-columns: 42px 1fr 44px; gap: .6rem; align-items: center; }
.istek-kart .ik-bas > img, .istek-kart .ik-bas .pz-yok { width: 42px; height: 42px; object-fit: contain; border-radius: 9px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.istek-kart .ik-ad { font-weight: 700; font-size: .9rem; color: var(--text); }
.istek-kart .ik-alt { font-size: .82rem; color: var(--muted); margin-top: .15rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.istek-kart .ik-alt b { color: var(--text); font-variant-numeric: tabular-nums; }
.ik-yok { color: var(--muted); font-style: italic; }   /* marka bu üründe yok — dürüst, çıkınca bildirilir */
.istek-kart .ik-sil { background: none; border: none; color: var(--muted); cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.istek-rz { font-size: .72rem; font-weight: 700; padding: .1rem .4rem; border-radius: 6px; }
.istek-rz.ucuz { background: color-mix(in srgb, var(--altin) 16%, transparent); color: var(--altin); }
.istek-rz.yeni { background: color-mix(in srgb, var(--gul) 16%, transparent); color: var(--gul-ink); }
.istek-rz.yok { color: var(--muted); }
/* Listem'de yazarak marka favorisi: başlık butonu + autocomplete sheet */
.marka-favori-ekle { margin-left: auto; background: none; border: 1px dashed var(--gul); color: var(--gul-ink); font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 8px; cursor: pointer; font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.ik-scope { font-size: .72rem; color: var(--muted); font-weight: 600; margin-left: .4rem; }
.mf-input { width: 100%; padding: .7rem .85rem; border: 1px solid var(--hair); border-radius: 11px; background: var(--surface-2); color: var(--ink); font-size: .95rem; font-family: var(--sans); margin-bottom: .6rem; }
.mf-liste { max-height: 46vh; overflow-y: auto; }
.mf-oneri { display: flex; align-items: center; gap: .6rem; padding: .55rem .3rem; border-bottom: 1px solid var(--hair); cursor: pointer; min-height: 44px; }
.mf-oneri .mf-kutu { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--hair); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .78rem; font-weight: 800; }
.mf-oneri .lbl { font-size: .95rem; color: var(--text); flex: 1; min-width: 0; }
.mf-oneri .cnt { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.mf-oneri.sec .mf-kutu { background: var(--gul); border-color: var(--gul); }
.mf-oneri.sec .lbl { color: var(--ink); font-weight: 600; }
.mf-not-min { font-size: .78rem; color: var(--muted); margin: -.2rem 0 .5rem; }
.mf-altbar { display: flex; gap: .5rem; align-items: stretch; }
.mf-altbar #mf-ara { flex: 1; }   /* birincil dolu 'Seçtiklerimi Ara' — .uygula stilini kullanır */
.mf-kaydet-ikincil { flex: 0 0 auto; padding: .95rem 1rem; border-radius: 13px; border: 1.5px solid var(--gul); background: none; color: var(--gul-ink); font-size: .95rem; font-weight: 700; cursor: pointer; font-family: var(--sans); white-space: nowrap; }
.mf-altbar button:disabled { opacity: .45; cursor: default; }
.arama-kart .ak-sil { background: none; border: none; color: var(--muted); cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.arama-kart .ak-sil svg { width: 15px; height: 15px; }
.arama-kart .ak-sonuc { margin-top: .3rem; }
.arama-kart .ak-sonuc:empty { display: none; }
/* Kontrol maddesi açılır ürün paneli */
.ko-urunler { display: none; padding: .1rem 0 .4rem 2.1rem; }
.ko-urunler.acik { display: block; }
.ko-urun { display: grid; grid-template-columns: 38px 1fr 44px; gap: .5rem; align-items: center; padding: .35rem 0; border-top: 1px dashed var(--hair); }
.ko-urun img, .ko-urun .pz-yok { width: 38px; height: 38px; object-fit: contain; border-radius: 7px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ko-urun .ku-bilgi { min-width: 0; cursor: pointer; }
.ko-urun .ku-ad { font-size: .78rem; color: var(--ink); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ko-urun .ku-fiyat { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.ko-urun .ku-sil { background: none; border: none; color: var(--muted); cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.ko-urun .ku-sil svg { width: 14px; height: 14px; }

/* 'Birkaç seçenek' mini listesi (marka hedefi/isteği — fiyat-artan, dokun→detay) */
.secenek-liste { margin-top: .5rem; border-top: 1px dashed var(--hair); }
.secenek-satir { display: grid; grid-template-columns: 42px 1fr; gap: .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
.secenek-satir:last-child { border-bottom: none; }
.secenek-satir:active { background: var(--surface-2); }
.secenek-satir img, .secenek-satir .pz-yok { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ss-bilgi { min-width: 0; }
.ss-ad { font-size: .82rem; color: var(--ink); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ss-fiyat { font-size: .78rem; color: var(--muted); margin-top: .12rem; }
.ss-fiyat b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.ku-enucuz { display: inline-block; margin-left: .35rem; font-size: .62rem; font-weight: 800; color: var(--yesil); background: color-mix(in srgb, var(--yesil) 14%, transparent); padding: .05rem .35rem; border-radius: 5px; vertical-align: middle; }

/* Trendyol imzası: detay sabit alt CTA çubuğu (alt-nav'ın üstünde) */
.detay-cta { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--gol-w); display: flex; align-items: center; gap: .5rem;
  background: var(--surface); border-top: 1px solid var(--hair); z-index: 40;
  padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom)); box-shadow: 0 -3px 14px rgba(0,0,0,.06); }
.cta-ikon { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; border: 1.5px solid var(--hair);
  background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cta-ikon.on { color: var(--gul); border-color: var(--gul); }
.cta-ikon svg { width: 22px; height: 22px; }
/* Görünür etiketli Kaydet butonu — 'Listeme ekle' (toast diliyle tutarlı), kayıtlıyken dolu teal */
.cta-kaydet { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; padding: .7rem .8rem; border-radius: 12px;
  border: 1.5px solid var(--gul); background: var(--gul-soft); color: var(--gul-ink); font-weight: 750; font-size: .9rem;
  cursor: pointer; font-family: var(--sans); white-space: nowrap; }
.cta-kaydet svg { width: 20px; height: 20px; flex: 0 0 auto; }
.cta-kaydet.on { background: var(--gul); color: #fff; border-color: var(--gul); }
.cta-ana { flex: 1; min-width: 0; text-align: center; padding: .9rem; border-radius: 12px; background: var(--gul); color: #fff;
  font-weight: 750; font-size: .96rem; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--gul) 40%, transparent); }
.cta-bosluk { height: 84px; }

/* ---- Fırsatlar / katalog ---- */
.katalog-serit { display: flex; gap: .5rem; overflow-x: auto; padding: .3rem 0 .8rem; margin: -.2rem 0 .5rem; }
.katalog-serit .k { flex: 0 0 auto; background: var(--gul-soft); color: var(--gul-ink); border-radius: 11px; padding: .5rem .8rem; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.katalog-serit .k small { display: block; font-size: .68rem; color: var(--muted); font-weight: 500; }

/* ---- Liste / bütçe ---- */
.butce { background: var(--surface); border: 1px solid var(--hair); border-radius: 15px; padding: 1rem; box-shadow: var(--golge-sm); margin-bottom: 1rem; }
.butce .satir { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .4rem; }
.butce .satir.toplam { font-size: 1.15rem; font-weight: 700; color: var(--ink); border-top: 1px solid var(--hair); padding-top: .6rem; margin-top: .5rem; }
.butce .cubuk { height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; margin-top: .6rem; }
.butce .cubuk > i { display: block; height: 100%; background: var(--gul); border-radius: 5px; }
.liste-oge { display: grid; grid-template-columns: auto 54px 1fr auto; gap: .7rem; align-items: center; background: var(--surface); border: 1px solid var(--hair); border-radius: 13px; padding: .6rem; margin-bottom: .55rem; }
.liste-oge img { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; background: var(--surface-2); }
.liste-oge .cek { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--hair); background: none; cursor: pointer; }
.liste-oge .cek.on { background: var(--yesil); border-color: var(--yesil); color:#fff; }
.liste-oge.alindi .ad { text-decoration: line-through; color: var(--muted); }
.liste-oge .sil { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: .3rem; }

/* ---- Genel ---- */
.bos { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.bos .em { font-size: 2.5rem; display: block; margin-bottom: .6rem; opacity: .6; }
.yukleniyor { text-align: center; color: var(--muted); padding: 2.5rem; }
.geri { background: none; border: none; color: var(--gul-ink); font-weight: 600; cursor: pointer; padding: .3rem 0 .8rem; font-size: .92rem; }
.toast { position: fixed; left: 50%; bottom: 6rem; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; border-radius: 12px; font-size: .9rem; box-shadow: var(--golge); z-index: 50; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 88%; }
.toast.gor { opacity: 1; transform: translateX(-50%) translateY(-6px); }

/* ---- Alt sekmeler ---- */
.sekmeler {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--gol-w); display: flex; align-items: center;
  justify-content: space-around; background: var(--surface); border-top: 1px solid var(--hair);
  padding: .4rem .3rem calc(.4rem + env(safe-area-inset-bottom)); z-index: 30;
}
.sekme { position: relative; background: none; border: none; color: var(--muted); font-size: .68rem; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: .12rem; cursor: pointer; padding: .35rem .6rem; font-family: var(--sans); flex: 1; }
.sekme .ikon { font-size: 1.25rem; line-height: 1; }
.sekme.etkin { color: var(--gul); }
.nav-rozet { position: absolute; top: .1rem; right: 50%; transform: translateX(1.05rem);
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--kirmizi); color: #fff;
  font-size: .64rem; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; }
.nav-rozet[hidden] { display: none; }
.fab { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; margin-top: -1.4rem; flex: 0 0 auto; padding: 0; }
.fab-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--gul); color: #fff; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px color-mix(in srgb,var(--gul) 45%,transparent); }
.fab-yz { font-size: .62rem; color: var(--muted); font-weight: 600; }   /* Ayşe-fix: etiketsiz kamera butonuna yazı */

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============ PROFESYONEL FİLTRE + YOĞUN LİSTE (v2) ============ */

/* Yapışkan sonuç araç çubuğu */
.arac-cubugu {
  position: sticky; top: calc(55px + env(safe-area-inset-top)); z-index: 15; display: flex; align-items: center; gap: .5rem;
  padding: .55rem 0; margin: 0 -1.1rem; padding-inline: 1.1rem;
  background: var(--paper); border-bottom: 1px solid var(--hair);
}
.arac-btn {
  display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .8rem; min-height: 40px;
  border: 1px solid var(--hair); background: var(--surface); color: var(--ink);
  border-radius: 11px; font-size: .86rem; font-weight: 600; cursor: pointer; font-family: var(--sans); white-space: nowrap;
}
.arac-btn[hidden] { display: none; }   /* Ayşe-fix: boşken "Karşılaştır 0" görünmesin (.arac-btn display'i [hidden]'ı eziyordu) */
.arac-btn.aktif { border-color: var(--gul); color: var(--gul-ink); background: var(--gul-soft); }
.arac-btn .rz { background: var(--gul); color: #fff; border-radius: 20px; font-size: .68rem; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .3rem; }
.arac-btn svg { width: 17px; height: 17px; }
.hizli-cipler { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; flex: 1;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }   /* Ayşe-fix: sağ-kenar solması → "kaydır, devamı var" ipucu */
.hizli-cipler::-webkit-scrollbar { display: none; }
.hcip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .75rem; min-height: 40px;
  border: 1px solid var(--hair); background: var(--surface); color: var(--text);
  border-radius: 20px; font-size: .84rem; font-weight: 550; cursor: pointer; white-space: nowrap; font-family: var(--sans);
}
.hcip.aktif { border-color: var(--gul); background: var(--gul-soft); color: var(--gul-ink); }
.hcip svg { width: 14px; height: 14px; }

/* Uygulanan filtre pill'leri */
.pill-serit { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .55rem 0 .1rem; }
.pill-serit::-webkit-scrollbar { display: none; }
.fpill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .3rem .35rem .7rem;
  background: var(--gul-soft); color: var(--gul-ink); border-radius: 20px; font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.fpill button { position: relative; background: none; border: none; color: var(--gul-ink); cursor: pointer; width: 22px; height: 22px; border-radius: 50%; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; }
.fpill button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }   /* #19 görsel 22px, dokunma alanı 44px */
.fpill button:hover { background: color-mix(in srgb, var(--gul) 20%, transparent); }
.fpill.temizle { background: none; color: var(--muted); padding-inline: .5rem; text-decoration: underline; cursor: pointer; }

/* Sonuç başlığı */
.sonuc-basI { display: flex; align-items: baseline; justify-content: space-between; margin: .8rem 0 .6rem; }
.sonuc-basI .n { font-size: .92rem; color: var(--ink); font-weight: 650; }
.sonuc-basI .s { font-size: .78rem; color: var(--muted); }

/* Yoğun sonuç satırı */
.satir {
  display: grid; grid-template-columns: 56px 1fr auto; gap: .75rem; align-items: center;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 13px;
  padding: .6rem .7rem; margin-bottom: .5rem; cursor: pointer; width: 100%; text-align: start;
  font-family: inherit; color: inherit; min-height: 76px;
}
.satir:active { background: var(--surface-2); }
.satir.alarm-yeni { border-color: var(--gul); background: var(--gul-soft); }
.satir .th { width: 56px; height: 56px; border-radius: 9px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--hair); }
.satir .th.yok { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.satir .mrk { font-size: .68rem; color: var(--gul-ink); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.satir .isim { font-size: .87rem; color: var(--ink); line-height: 1.28; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.satir .alt { display: flex; gap: .4rem; align-items: center; margin-top: .2rem; flex-wrap: wrap; }
.satir .sag { text-align: end; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.satir .fyt { font-size: 1.05rem; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.satir .fyt .l { display: block; font-size: .72rem; color: var(--muted); text-decoration: line-through; font-weight: 400; }
.rozet-ind { background: color-mix(in srgb,var(--yesil) 16%,transparent); color: var(--yesil); font-size: .68rem; font-weight: 700; padding: .1rem .4rem; border-radius: 6px; white-space: nowrap; }

/* Bottom-sheet */
.perde { position: fixed; inset: 0; background: rgba(18,34,43,.48); z-index: 40; opacity: 0; transition: opacity .22s; }   /* teal-ink scrim (eski sıcak-ton kalıntısı düzeltildi) */
.perde.gor { opacity: 1; }
.sheet {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%);
  width: 100%; max-width: var(--gol-w); max-height: 88dvh; background: var(--surface);
  border-radius: 20px 20px 0 0; z-index: 41; transition: transform .28s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; box-shadow: 0 -8px 40px rgba(18,34,43,.28);
}
.sheet.gor { transform: translateX(-50%) translateY(0); }
.sheet .tut { width: 40px; height: 4px; background: var(--hair); border-radius: 4px; margin: .6rem auto .2rem; }
.sheet .sbas { display: flex; align-items: center; justify-content: space-between; padding: .5rem 1.1rem .8rem; border-bottom: 1px solid var(--hair); }
.sheet .sbas h3 { margin: 0; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }
.sheet .sbas .tmz { background: none; border: none; color: var(--gul-ink); font-weight: 600; cursor: pointer; font-size: .88rem; }
.sheet .icerik { overflow-y: auto; padding: .3rem 1.1rem 1rem; flex: 1; }
.sheet .salt { padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); }
.sheet .uygula { width: 100%; padding: .95rem; border: none; border-radius: 13px; background: var(--gul); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: var(--sans); }

/* Facet accordion */
.facet { border-bottom: 1px solid var(--hair); }
.facet > .fbas { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; cursor: pointer; font-weight: 650; color: var(--ink); font-size: .96rem; }
.facet > .fbas .ok { color: var(--muted); transition: transform .2s; }
.facet.acik > .fbas .ok { transform: rotate(180deg); }
.facet .fgovde { display: none; padding-bottom: .8rem; }
.facet.acik .fgovde { display: block; }
.frow { display: flex; align-items: center; gap: .65rem; padding: .5rem 0; cursor: pointer; min-height: 44px; }
.frow .box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--hair); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.frow.on .box { background: var(--gul); border-color: var(--gul); }
.frow .lbl { flex: 1; font-size: .92rem; color: var(--text); }
.frow .cnt { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 2px; }
.frow .cnt i { font-size: .72em; opacity: .6; font-style: normal; }   /* Ayşe-fix: sayı fiyat değil ADET (ör. "166 ürün") */
.frow.pasif { opacity: .4; }
.facet-ara { width: 100%; padding: .6rem .8rem; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface-2); color: var(--ink); font-size: .9rem; margin-bottom: .4rem; font-family: var(--sans); }
.tumu-gor { background: none; border: none; color: var(--gul-ink); font-weight: 600; cursor: pointer; font-size: .86rem; padding: .5rem 0; }

/* Fiyat bantları + toggle */
.bantlar { display: flex; flex-wrap: wrap; gap: .5rem; padding: .3rem 0 .6rem; }
.bant { padding: .5rem .8rem; border: 1px solid var(--hair); border-radius: 20px; background: var(--surface); font-size: .85rem; cursor: pointer; color: var(--text); }
.bant.on { border-color: var(--gul); background: var(--gul-soft); color: var(--gul-ink); font-weight: 600; }
.aralik-giris { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; }
.aralik-giris input { flex: 1; min-width: 0; padding: .6rem .7rem; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); color: var(--ink); font-family: var(--sans); font-variant-numeric: tabular-nums; }
/* F2: sayısal input'larda tarayıcı spinner ok'larını (▲▼ tek-tek artır/azalt) gizle. Fiyat kutuları
   artık type=text; bu kural kalan #alh (hedef) + #butce-input için savunma + tutarlılık. Yalnız appearance → reduced-motion güvenli. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* F1: katalog-dışı marka — "'X' ile ara" satırı + uygulanan serbest-marka pill'i + boş-durum takip */
.frow.serbest-ara { color: var(--gul-ink); font-weight: 600; }
.frow.serbest-ara .box svg { width: 16px; height: 16px; }
.serbest-pill { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .1rem 0 .5rem; padding: .5rem .7rem; border: 1.5px solid var(--gul); border-radius: 10px; background: var(--gul-soft); color: var(--gul-ink); font-weight: 600; font-size: .88rem; }
.serbest-pill button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: none; color: var(--gul-ink); cursor: pointer; }
.serbest-pill button svg { width: 14px; height: 14px; }
.bos-takip { display: flex; justify-content: center; margin-top: .5rem; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: .8rem 0; }
.toggle-row .lbl { font-size: .96rem; font-weight: 650; color: var(--ink); }
.tgl { width: 48px; height: 28px; border-radius: 20px; background: var(--hair); border: none; position: relative; cursor: pointer; flex-shrink: 0; transition: background .2s; }
.tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.tgl.on { background: var(--gul); }
.tgl.on::after { transform: translateX(20px); }

/* Sıralama radio */
.radyo { display: flex; align-items: center; gap: .7rem; padding: .85rem .2rem; cursor: pointer; min-height: 48px; border-bottom: 1px solid var(--hair); }
.radyo:last-child { border-bottom: none; }
.radyo .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--hair); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.radyo.on .dot { border-color: var(--gul); }
.radyo.on .dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--gul); }
.radyo .lbl { font-size: .95rem; color: var(--ink); }

/* İskelet + durumlar */
.iskelet { display: grid; grid-template-columns: 56px 1fr; gap: .75rem; padding: .6rem .7rem; margin-bottom: .5rem; border: 1px solid var(--hair); border-radius: 13px; }
.iskelet .sh { background: linear-gradient(90deg, var(--surface-2) 25%, var(--hair) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shim 1.3s infinite; border-radius: 7px; }
.iskelet .sh.thumb { width: 56px; height: 56px; }
.iskelet .sh.l1 { height: 12px; width: 80%; margin-bottom: 8px; }
.iskelet .sh.l2 { height: 12px; width: 45%; }
@keyframes shim { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }
@media (prefers-reduced-motion: reduce) { .iskelet .sh { animation: none } }

/* SVG ikon boyutu (alt sekme + genel) */
.sekme svg, .fab-ic svg { width: 22px; height: 22px; }
.fab-ic svg { width: 26px; height: 26px; }

/* SVG ikon boyut disiplini (boyutsuz inline svg'leri sabitle) */
button svg, .geri svg { width: 20px; height: 20px; flex-shrink: 0; }
.arama-kutu button { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; }
.foto-buyuk svg { width: 24px; height: 24px; }
.geri { display: inline-flex; align-items: center; gap: .2rem; }
.fpill button svg, .liste-oge .sil svg { width: 14px; height: 14px; }
.satir .th-box { width: 56px; height: 56px; border-radius: 9px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--hair); position: relative; }
.satir .th-box img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.satir .th-box .th-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.satir .th-box .th-ph svg { width: 24px; height: 24px; }

/* ---- Marka logosu (Sandık) — satır-içi SVG, tema değişkenlerine bağlı (◐ düğmesini takip eder) ---- */
.marka-logo .st { stroke: var(--gul); fill: none; stroke-width: 3.1; stroke-linecap: round; stroke-linejoin: round; }
.marka-logo .cl { fill: var(--altin); }
.tema svg { width: 18px; height: 18px; }

/* ---- Fiyat tazelik dürüstlüğü ---- */
/* (.tazelik-not ölü CSS temizlendi) */
.taze-ok { color: var(--yesil); font-weight: 600; }

/* ---- Kategori seksiyonları + sayfalama + düşük-uç performans ---- */
.kat-bas { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 1.5rem 0 .7rem; }
.kat-bas:first-child { margin-top: .4rem; }
.kat-bas h3 { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); margin: 0; font-weight: 600; letter-spacing: -.01em; }
.kat-bas .tumu-gor { font-size: .82rem; white-space: nowrap; padding: 0; }
.daha { min-height: 30px; }
/* Ekran dışı satırları render etme (düşük GPU/CPU'da akıcılık) */
.satir { content-visibility: auto; contain-intrinsic-size: auto 76px; }

/* ---- Bayat (yaşlı fiyat) yumuşatma — dürüstlük ---- */
.rozet-soluk { background: var(--surface-2); color: var(--muted); font-size: .68rem; font-weight: 700; padding: .1rem .4rem; border-radius: 6px; white-space: nowrap; }
.satir .fyt .l.soluk { opacity: .5; }
.taze.bayat { color: var(--altin); font-weight: 600; }

/* ---- Çeyiz Listem 2'li segment (Kontrol Listem | Eklediklerim) ---- */
/* #5 'Bugün senin için' özet kartı — 4 sinyal, rozetler derin-link */
.ozet-kart { background: var(--gul-soft); border: 1px solid var(--hair); border-radius: 15px; padding: .8rem .9rem; margin-bottom: 1rem; }
.ozet-kart .oz-bas { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--gul-ink); margin-bottom: .5rem; }
.ozet-kart .oz-rozetler { display: flex; flex-wrap: wrap; gap: .4rem; }
.oz-rozet { padding: .45rem .7rem; border-radius: 20px; border: none; font-size: .8rem; font-weight: 700; cursor: pointer; font-family: var(--sans); min-height: 40px; }
.oz-rozet.hazir { background: color-mix(in srgb, var(--gul) 16%, transparent); color: var(--gul-ink); }
.oz-rozet.ucuz { background: color-mix(in srgb, var(--yesil) 16%, transparent); color: var(--yesil); }
.oz-rozet.pazar { background: color-mix(in srgb, var(--altin) 18%, transparent); color: var(--altin); }
.oz-rozet.alarm { background: color-mix(in srgb, var(--sari) 18%, transparent); color: var(--sari); }
.oz-nudge { display: block; width: 100%; text-align: left; background: var(--gul-soft); border: 1px dashed var(--gul); border-radius: 13px; padding: .8rem .9rem; margin-bottom: 1rem; color: var(--gul-ink); font-weight: 700; font-size: .9rem; cursor: pointer; font-family: var(--sans); }
/* #6 Paylaş / Yazdır */
.paylas-satir { display: flex; gap: .5rem; margin-bottom: .9rem; }
.paylas-btn { flex: 1; padding: .6rem; border-radius: 11px; border: 1px solid var(--hair); background: var(--surface); color: var(--gul-ink); font-weight: 700; font-size: .88rem; cursor: pointer; font-family: var(--sans); min-height: 44px; }
.paylas-btn:active { background: var(--gul-soft); }
/* #7 tasarruf takibi: satır ↓kazanç + bütçe toplam kazanç */
.lo-kazanc { color: var(--yesil); font-weight: 800; font-size: .78rem; white-space: nowrap; }
.butce-kazanc { background: color-mix(in srgb, var(--yesil) 12%, transparent); color: var(--yesil); border-radius: 11px; padding: .6rem .8rem; margin-bottom: 1rem; font-size: .88rem; font-weight: 600; }
.butce-kazanc b { color: var(--yesil); font-weight: 800; }
/* #10 keyif paketi: kalp-pop · oda kutlama · son aramalar (hareket-azalt korumalı) */
@keyframes kalp-pat { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
.urun-kart .fav.pop { animation: kalp-pat .34s ease; }
@keyframes oda-kutla { 0% { box-shadow: 0 0 0 0 transparent; } 22% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--yesil) 45%, transparent); transform: scale(1.012); } 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); } }
.kontrol-oda.kutla { animation: oda-kutla .7s ease; }
.son-ara { margin-top: 1rem; }
.son-ara-bas { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .5rem; }
.son-ara-cipler { display: flex; flex-wrap: wrap; gap: .4rem; }
.son-ara-cip { padding: .5rem .8rem; border-radius: 20px; border: 1px solid var(--hair); background: var(--surface-2); color: var(--gul-ink); font-size: .82rem; font-weight: 600; cursor: pointer; font-family: var(--sans); min-height: 40px; }
.son-ara-cip:active { background: var(--gul-soft); }
@media (prefers-reduced-motion: reduce) { .urun-kart .fav.pop, .kontrol-oda.kutla { animation: none; } }
/* #8 kıyas sepeti: kart terazi · araç-çubuğu çip · detay toggle · yan-yana kolonlar */
.urun-kart .kiyas-toggle { position: absolute; top: .4rem; left: .4rem; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--ink) 20%, var(--hair)); box-shadow: var(--golge-sm); color: var(--ink); font-size: 1.05rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.urun-kart .kiyas-toggle.on { background: var(--gul); color: #fff; border-color: var(--gul); }
.kiyas-btn b { color: var(--gul); }
.kiyas-detay { width: 100%; margin: .2rem 0 1rem; padding: .7rem; border-radius: 12px; border: 1.5px solid var(--gul); background: none; color: var(--gul-ink); font-weight: 700; font-size: .92rem; cursor: pointer; font-family: var(--sans); }
.kiyas-detay.on { background: var(--gul); color: #fff; }
/* F4: kıyas ÖZELLİK TABLOSU — sol etiket kolonu sabit (sticky), ürün kolonları yatay kayar (eski .kiyas-serit/.kiyas-kol yerine) */
.kiyas-tablo { display: grid; grid-template-columns: 92px repeat(var(--kol), minmax(118px, 1fr)); overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.kiyas-tablo > div { padding: .5rem .55rem; border-bottom: 1px solid var(--hair); min-width: 0; overflow-wrap: anywhere; font-size: .82rem; display: flex; align-items: center; }
.kt-kose { position: sticky; left: 0; z-index: 3; background: var(--surface); }
.kt-etiket { position: sticky; left: 0; z-index: 2; background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; }
.kt-etiket.alt { background: color-mix(in srgb, var(--surface-2) 60%, var(--hair)); }
.kt-hucre { color: var(--text); font-variant-numeric: tabular-nums; }
.kt-hucre.alt { background: var(--surface-2); }
.kt-ozellik.kt-etiket { color: var(--gul-ink); }
.kiyas-tablo .kt-kart { position: relative; flex-direction: column; align-items: flex-start; gap: .2rem; padding-top: 1.7rem; background: var(--surface); cursor: pointer; }
.kt-kart.enucuz { background: color-mix(in srgb, var(--yesil) 8%, var(--surface)); }
.kt-kart img, .kt-kart .pz-yok { width: 100%; height: 78px; object-fit: contain; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.kt-kart .kk-marka { font-size: .68rem; font-weight: 800; text-transform: uppercase; color: var(--gul-ink); }
.kt-kart .kk-ad { font-size: .76rem; color: var(--ink); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kt-kart .kiyas-cikar { position: absolute; top: .3rem; right: .3rem; width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; }
.kt-kart .kiyas-cikar svg { width: 13px; height: 13px; }
.kt-kart .kiyas-rozet { position: absolute; top: .3rem; left: .3rem; background: var(--yesil); color: #fff; font-size: .62rem; font-weight: 800; padding: .1rem .35rem; border-radius: 6px; z-index: 1; }
.kt-fiyat { font-size: .95rem; font-weight: 800; color: var(--ink); }
.kt-vurgu { background: color-mix(in srgb, var(--yesil) 18%, transparent); color: var(--yesil); font-size: .64rem; font-weight: 700; padding: .05rem .3rem; border-radius: 5px; margin-inline-start: .25rem; white-space: nowrap; }
.kt-not { margin-top: .6rem; }
/* Ayşe-fix: kıyasta farklı boyut/kapsam uyarısı + yanıltıcı olmayan nötr rozet */
.kiyas-uyari { background: color-mix(in srgb, #b45309 14%, var(--surface)); border: 1px solid color-mix(in srgb, #b45309 40%, transparent); color: var(--ink); border-radius: 10px; padding: .55rem .7rem; font-size: .82rem; margin-bottom: .6rem; line-height: 1.35; }
.kt-kart .kiyas-rozet.notr { background: var(--surface-2); color: var(--muted); border: 1px solid var(--hair); }
/* Ayşe-fix: çevrimdışı şeridi (internet yokken üstte net uyarı) */
#cevrimdisi-serit { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: #b45309; color: #fff; text-align: center; padding: .45rem .6rem; font-size: .85rem; font-weight: 700; }
.liste-segment { display: flex; gap: .3rem; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 13px; padding: .3rem; margin: 0 0 1.1rem; }
.lseg { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .58rem .4rem; border: none; background: none; border-radius: 10px; color: var(--muted); font-family: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; transition: background .12s; }
.lseg.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.lseg-rz { font-size: .66rem; font-weight: 800; padding: .06rem .42rem; border-radius: 8px; background: var(--gul-soft); color: var(--gul-ink); font-variant-numeric: tabular-nums; }
.lseg.on .lseg-rz { background: var(--gul); color: #fff; }

/* ---- Çeyiz kontrol listesi ---- */
.kontrol-ozet { background: var(--gul-soft); border: 1px solid var(--hair); border-radius: 15px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.ko-bas { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--serif); color: var(--ink); font-size: 1.08rem; font-weight: 600; }
.ko-bas b { color: var(--gul-ink); font-variant-numeric: tabular-nums; }
.kontrol-ozet .cubuk { height: 8px; background: color-mix(in srgb, var(--gul) 20%, transparent); border-radius: 5px; overflow: hidden; margin: .6rem 0 .4rem; }
.kontrol-ozet .cubuk i { display: block; height: 100%; background: var(--gul); border-radius: 5px; }
.ko-alt { font-size: .76rem; color: var(--gul-ink); opacity: .85; line-height: 1.4; }
.kontrol-oda { border: 1px solid var(--hair); border-radius: 13px; margin-bottom: .5rem; overflow: hidden; background: var(--surface); }
.ko-oda-bas { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: .96rem; font-weight: 650; color: var(--ink); }
.ko-say { font-size: .82rem; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: .3rem; }
.ko-say .ok { transition: transform .2s; }
.kontrol-oda.acik .ko-say .ok { transform: rotate(180deg); }
.ko-maddeler { display: none; padding: 0 .5rem .5rem; }
.kontrol-oda.acik .ko-maddeler { display: block; }
.ko-madde { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: .5rem; padding: .45rem .5rem; border-top: 1px solid var(--hair); }
.ko-check { width: 24px; height: 24px; justify-self: center; border-radius: 7px; border: 2px solid var(--hair); background: none; cursor: pointer; color: #fff; font-size: .8rem; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ko-check.on { background: var(--gul); border-color: var(--gul); }
.ko-check::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }   /* görsel 24px kalır, dokunma alanı 44px */
.ko-ad { font-size: .9rem; color: var(--text); }
.ko-madde.alindi .ko-ad { color: var(--muted); text-decoration: line-through; }
.ko-ara { min-width: 54px; height: 46px; border-radius: 8px; border: 1px solid var(--hair); background: var(--surface-2); color: var(--gul-ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 4px; }
.ko-ara svg { width: 15px; height: 15px; }
.ko-ara-yz { font-size: .58rem; font-weight: 700; line-height: 1; }   /* Ayşe-fix: etiketsiz büyütece 'Fiyat bul' */
/* Kontrol maddesi 3-in-1: istiyorum(☆) + marka(🏷) + adet çip şeridi + hedef bloğu */
.ko-orta { display: flex; flex-direction: column; min-width: 0; gap: .3rem; }
.ko-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ko-chip { font-size: .72rem; font-weight: 700; padding: .35rem .7rem; min-height: 38px; display: inline-flex; align-items: center; border-radius: 10px; border: 1px solid var(--hair); background: var(--surface-2); color: var(--muted); cursor: pointer; font-family: var(--sans); white-space: nowrap; }
.ko-chip.istiyorum.on { background: color-mix(in srgb, var(--altin) 16%, transparent); color: var(--altin); border-color: color-mix(in srgb, var(--altin) 40%, transparent); }
.ko-chip.marka.on { background: var(--gul-soft); color: var(--gul-ink); border-color: var(--gul); }
.ko-chip.adet { color: var(--gul-ink); }
.ko-madde.hedef { background: color-mix(in srgb, var(--altin) 6%, transparent); }
.kb-bas { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin: .5rem 0 .3rem; }

/* ---- Bütçe (temiz) ---- */
.butce { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--golge-sm); margin-bottom: .8rem; }
.butce .bsat { display: flex; justify-content: space-between; font-size: .92rem; color: var(--text); margin-bottom: .3rem; }
.butce .bsat b { color: var(--ink); }
.butce .bsat.toplam { font-size: 1.15rem; font-weight: 700; color: var(--ink); border-top: 1px solid var(--hair); padding-top: .6rem; margin-top: .5rem; }
.butce .cubuk { height: 7px; background: var(--surface-2); border-radius: 5px; overflow: hidden; margin-top: .6rem; }
.butce .cubuk i { display: block; height: 100%; background: var(--yesil); }
/* #2 Bütçem: düzenle/belirle + kalan-bütçe aşımı + dürüstlük ipucu */
.butce .butce-duzenle { background: none; border: none; color: var(--gul-ink); cursor: pointer; font: inherit; padding: 0; }
.butce .butce-duzenle b { color: var(--ink); }
.butce .b-asim { color: var(--kirmizi); }
.butce .cubuk.asim i { background: var(--kirmizi); }
.butce .butce-not { font-size: .74rem; color: var(--muted); margin-top: .5rem; }
.butce .butce-not b { color: var(--ink); }
.butce-belirle { width: 100%; margin-top: .7rem; padding: .6rem; border-radius: 10px; border: 1.5px dashed var(--gul); background: none; color: var(--gul-ink); font-weight: 700; font-size: .86rem; cursor: pointer; font-family: var(--sans); }
.liste-oge { display: grid; grid-template-columns: 44px 54px 1fr 44px; gap: .6rem; align-items: center; background: var(--surface); border: 1px solid var(--hair); border-radius: 13px; padding: .55rem .65rem; margin-bottom: .5rem; }
.liste-oge img { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; background: var(--surface-2); }
.liste-oge .cek { width: 24px; height: 24px; justify-self: center; border-radius: 7px; border: 2px solid var(--hair); background: none; cursor: pointer; color: #fff; position: relative; display: flex; align-items: center; justify-content: center; }
.liste-oge .cek.on { background: var(--yesil); border-color: var(--yesil); }
.liste-oge .cek::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }   /* görsel 24px, dokunma 44px — 'aldıkça işaretle' ekranı */
.liste-oge.alindi .lo-bilgi .ad { text-decoration: line-through; color: var(--muted); }
.lo-bilgi { cursor: pointer; min-width: 0; }
.lo-bilgi .ad { font-size: .88rem; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lo-fiyat { font-size: .82rem; color: var(--muted); margin-top: .15rem; }
.liste-oge .sil { width: 44px; height: 44px; justify-self: center; border: none; background: none; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ============ TRENDYOL TARZI ÜRÜN KARTI + IZGARA (v3) ============ */
/* 2 sütun ürün ızgarası (arama sonuçları / kategori tümü) */
.urun-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
@media (min-width: 440px) { .urun-izgara { grid-template-columns: 1fr 1fr 1fr; } }

.urun-kart { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px;
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column; text-align: start;
  font-family: inherit; color: inherit; padding: 0; }
.urun-kart:active { border-color: var(--gul); }
.urun-kart .foto { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.urun-kart .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.urun-kart .foto .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.urun-kart .foto .ph svg { width: 34px; height: 34px; }
/* Kırık ürün görseli → theme-aware placeholder (gorselYok). Bağlam-özel .pz-yok kuralları
   boyutlandırır; aşağısı taban + eksik bağlamlar (detay) + grid kartta "Görsel yok" etiketi. */
.pz-yok { display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--surface-2); }
.pz-yok svg { width: 28px; height: 28px; }
.detay-hero .pz-yok { width: 100%; height: 210px; border-radius: 12px; margin-bottom: .8rem; }
.detay-galeri .gkare .pz-yok { width: 100%; height: 100%; }
.detay-hero .pz-yok svg, .detay-galeri .gkare .pz-yok svg { width: 44px; height: 44px; }
.urun-kart .foto .ph { flex-direction: column; gap: .35rem; }
.urun-kart .foto .ph::after { content: "Görsel yok"; font-size: .72rem; letter-spacing: .01em; }
.urun-kart .fav { position: absolute; top: .4rem; right: .4rem; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--ink) 22%, var(--hair)); box-shadow: var(--golge-sm);
  display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; }
.urun-kart .fav.on { color: var(--gul); border-color: var(--gul); background: var(--surface); }   /* teal+dolu kalp SADECE kayıtlıyken → 'zaten listemde' yanılgısı olmaz */
.urun-kart .fav svg { width: 20px; height: 20px; }
.urun-kart .ind-rozet { position: absolute; left: 0; bottom: .5rem; background: var(--yesil); color: #fff;
  font-size: .7rem; font-weight: 800; padding: .12rem .5rem .12rem .4rem; border-radius: 0 8px 8px 0; }
.urun-kart.stoksuz .foto img { opacity: .45; filter: grayscale(.4); }
.urun-kart .tukendi { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: rgba(18, 34, 43, .82); color: #fff; font-size: .72rem; font-weight: 800;   /* #6 temadan bağımsız koyu zemin (dark'ta --ink beyaza döndüğü için rozet görünmez oluyordu) */
  padding: .2rem .6rem; border-radius: 8px; letter-spacing: .02em; white-space: nowrap; }
.urun-kart .govde { padding: .5rem .55rem .6rem; display: flex; flex-direction: column; gap: .12rem; flex: 1; }
.urun-kart .mrk { font-size: .73rem; font-weight: 800; color: var(--ink); text-transform: none; letter-spacing: 0; }
.urun-kart .ad { font-size: .8rem; color: var(--text); line-height: 1.25; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2em; }
/* (.urun-kart .kiyas ölü CSS temizlendi) */
.urun-kart .ind-rozet.firsat { background: var(--altin); }   /* çapraz fırsat = AMBER (killer sinyal teal krom + yeşil site-indiriminden ayrışsın) */
.urun-kart .firsat-satir { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 800;
  color: var(--altin); background: color-mix(in srgb, var(--altin) 13%, var(--surface)); padding: .1rem .4rem; border-radius: 6px; margin-top: .25rem; align-self: flex-start; }
.urun-kart .kume-satir { display: flex; align-items: center; gap: .22rem; font-size: .69rem; color: var(--muted);
  margin-top: .2rem; font-weight: 600; }
.urun-kart .kume-satir svg { width: 13px; height: 13px; flex-shrink: 0; }
.urun-kart .kume-satir .en-ucuz { color: var(--yesil); font-weight: 800; }
.urun-kart .fyt-blok { margin-top: auto; padding-top: .3rem; }
.urun-kart .eski-satir { display: flex; align-items: center; gap: .35rem; min-height: 1em; }
.urun-kart .eski { font-size: .72rem; color: var(--muted); text-decoration: line-through; }
.urun-kart .ind-yuz { font-size: .72rem; color: var(--yesil); font-weight: 800; }
/* bayat (yaşlı) fiyat: indirim iddiasını yumuşat — yeşil yerine nötr, 'son:' önekiyle (dürüstlük) */
.urun-kart .ind-rozet.soluk { background: var(--muted); }
.urun-kart .ind-yuz.soluk { color: var(--muted); font-weight: 600; }
.urun-kart .fyt { font-size: 1.05rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.urun-kart .kaynak { font-size: .67rem; color: var(--muted); margin-top: .1rem; }

/* Kampanya banner karuseli (Trendyol ana sayfa üstü) */
.banner-serit { display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
  margin: 0 -1.1rem .9rem; padding: .2rem 1.1rem; }
.banner-serit::-webkit-scrollbar { display: none; }
.banner { flex: 0 0 84%; scroll-snap-align: start; display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--hair); border-radius: 6px; padding: 1rem 1.1rem 1rem 1.3rem; cursor: pointer; color: var(--ink);
  text-align: start; font-family: inherit; min-height: 92px; background: var(--surface); box-shadow: var(--golge-sm);
  position: relative; overflow: hidden; }
.banner::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gul); }
.banner:active { transform: scale(.985); }
.banner .banner-ust { font-family: var(--serif); font-size: 1.14rem; font-weight: 600; letter-spacing: .005em; color: var(--ink); }
.banner .banner-alt { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.banner .banner-ikon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--gul-soft); color: var(--gul-ink); flex-shrink: 0; }
.banner .banner-ikon svg { width: 22px; height: 22px; }
/* Tema-güvenli hafif teal-tint (gul-soft her temada doğru): koyuda açık-bant bug'ı yok */
.banner.b1, .banner.b2, .banner.b3 { background: linear-gradient(180deg, var(--gul-soft), var(--surface)); }

/* Yatay kategori şeridi (Trendyol ana sayfa) */
.kat-serit { display: flex; gap: .55rem; overflow-x: auto; scrollbar-width: none; padding: .1rem 0 .3rem; margin: 0 -1.1rem; padding-inline: 1.1rem; }
.kat-serit::-webkit-scrollbar { display: none; }
.kat-serit .kc { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 68px; cursor: pointer; background: none; border: none; padding: 0; color: inherit; font-family: inherit; }
.kat-serit .kc .yuvarlak { width: 60px; height: 60px; border-radius: 50%; background: var(--gul-soft);
  display: flex; align-items: center; justify-content: center; color: var(--gul-ink); border: 1px solid var(--hair); font-size: 26px; }
.kat-serit .kc .yuvarlak svg { width: 26px; height: 26px; }
.kat-serit .kc span { font-size: .68rem; color: var(--text); text-align: center; line-height: 1.15; }

/* Ana sayfa kategori satırı: başlık + yatay ürün kaydırıcı (Trendyol home) */
.ev-satir { margin-bottom: 1.4rem; }
.ev-satir .basi { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .6rem; }
.ev-satir .basi h3 { font-family: var(--serif); font-size: 1.08rem; color: var(--ink); margin: 0; font-weight: 600; }
.ev-satir .basi .basi-not { font-size: .68rem; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
.ev-satir .basi .tumu-gor { font-size: .82rem; white-space: nowrap; }
/* Editoryal koleksiyon rafı — dergi-tarzı kicker + serif başlık + altın hairline */
.editoryal-raf { margin-bottom: 1.7rem; padding-top: .5rem; }
.editoryal-raf .er-bas { position: relative; margin-bottom: .75rem; padding-top: .7rem; }
.editoryal-raf .er-bas::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--gul); }
.editoryal-raf .er-kick { font-family: var(--serif); font-style: italic; font-size: .82rem; color: var(--gul-ink); margin-bottom: .15rem; }
.editoryal-raf .er-baslik { font-family: var(--serif); font-size: 1.32rem; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: .005em; }
.editoryal-raf .er-gor { margin-top: .55rem; background: none; border: none; border-bottom: 1px solid var(--gul-soft); color: var(--ink);
  font-family: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; padding: 0 0 .25rem; }
.editoryal-raf .er-gor:active { color: var(--gul-ink); }
.yatay-urun { display: flex; gap: .55rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1.1rem; padding: 0 1.1rem .2rem; }
.yatay-urun::-webkit-scrollbar { display: none; }
.yatay-urun .urun-kart { flex: 0 0 46%; max-width: 170px; }

/* ---------- İlk açılış onboarding (Editoryal) ---------- */
.onboard { position: fixed; inset: 0; z-index: 200; background: var(--paper);
  display: flex; flex-direction: column; padding: max(2.2rem, env(safe-area-inset-top)) 1.5rem max(1.6rem, env(safe-area-inset-bottom));
  animation: onb-in .35s ease; }
@keyframes onb-in { from { opacity: 0; } to { opacity: 1; } }
.onb-atla { align-self: flex-end; background: none; border: none; color: var(--muted);
  font: inherit; font-size: .82rem; letter-spacing: .04em; padding: .3rem .2rem; cursor: pointer; }
.onb-govde { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .55rem;
  overflow-y: auto; text-align: left; max-width: 460px; width: 100%; margin: 0 auto; }
.onb-gorsel { margin-bottom: 1.4rem; }
.onb-kicker { font-family: var(--serif); font-style: italic; font-size: .88rem; color: var(--gul-ink); }
.onb-baslik { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.15;
  color: var(--ink); margin: 0; letter-spacing: .005em; text-wrap: balance; }
.onb-baslik::after { content: ""; display: block; width: 40px; height: 2px; background: var(--gul); margin: .7rem 0 0; }
.onb-metin { color: var(--text); font-size: 1.02rem; line-height: 1.5; margin: .35rem 0 0; }
.onb-alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 460px; width: 100%; margin: 1.2rem auto 0; min-height: 48px; }
.onb-noktalar { display: flex; gap: .4rem; }
.onb-noktalar span { width: 7px; height: 7px; border-radius: 50%; background: var(--hair); transition: all .25s; }
.onb-noktalar span.aktif { background: var(--gul); width: 20px; border-radius: 4px; }
.onb-ileri { background: var(--gul); color: #fff; border: none; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: .98rem; padding: .8rem 1.9rem; cursor: pointer; box-shadow: var(--golge-sm); }
.onb-ileri:active { transform: translateY(1px); }
/* Ekran 1: monogram */
.onb-mono { display: flex; }
.marka-rozet.onb-rozet { width: 84px; height: 84px; border-radius: 22px; }
.marka-rozet.onb-rozet svg { width: 52px; height: 52px; }
/* Ekran 2: kıyas kartı mock */
.onb-kart { background: var(--surface); border: 1px solid var(--hair); border-radius: 16px;
  box-shadow: var(--golge); padding: 1rem 1.1rem; }
.onb-k-ad { font-family: var(--serif); font-size: .98rem; font-weight: 600; color: var(--ink); margin-bottom: .7rem; }
.onb-k-satir { display: flex; justify-content: space-between; align-items: center; padding: .42rem 0;
  border-top: 1px solid var(--hair); color: var(--text); font-size: .92rem; }
.onb-k-satir b { font-variant-numeric: tabular-nums; color: var(--ink); }
.onb-k-satir.vur { color: var(--ink); font-weight: 600; }
.onb-k-satir.vur b { color: var(--yesil); font-weight: 800; }
.onb-rozet-en { font-style: normal; font-size: .64rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--yesil); background: color-mix(in srgb, var(--yesil) 14%, transparent);
  padding: .1rem .4rem; border-radius: 5px; margin-left: .35rem; }
.onb-k-hukum { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid var(--gul-soft); font-size: .82rem; color: var(--gul-ink); font-style: italic; font-family: var(--serif); }
.onb-nokta { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gul); }
/* Ekran 3: üç yol */
.onb-yollar { display: flex; flex-direction: column; }
.onb-yol { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--hair); }
.onb-yol:first-child { border-top: none; }
.onb-yi { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gul-soft);
  display: grid; place-items: center; color: var(--gul-ink); }
.onb-yi svg { width: 21px; height: 21px; }
.onb-yol b { display: block; color: var(--ink); font-size: .98rem; }
.onb-yol small { color: var(--muted); font-size: .82rem; }
/* Ekran 4: giriş butonları */
.onb-basla { display: flex; flex-direction: column; gap: .7rem; }
.onb-b { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  border-radius: 14px; font: inherit; font-weight: 700; font-size: 1rem; padding: 1rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hair); color: var(--ink); }
.onb-b svg { width: 20px; height: 20px; }
.onb-b.ana { background: var(--gul); color: #fff; border-color: var(--gul); box-shadow: var(--golge-sm); }
.onb-b:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .onboard { animation: none; } .onb-noktalar span { transition: none; } }

/* ---------- Fotoğrafla ara — 3 durumlu dürüst akış ---------- */
.foto-eko { display: flex; align-items: center; gap: .6rem; margin: .3rem 0 1rem; }
.foto-eko img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; border: 1px solid var(--hair); opacity: .9; }
.foto-eko span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.foto-bas { margin: .2rem 0 .9rem; }
.foto-bas h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: .005em; }
.foto-bas h2::after { content: ""; display: block; width: 36px; height: 2px; background: var(--gul); margin: .5rem 0 0; }
.foto-bas p { color: var(--text); font-size: .95rem; margin: .5rem 0 0; line-height: 1.5; }
.foto-enucuz { display: flex; align-items: center; gap: .5rem; margin: .7rem 0 .2rem; padding: .7rem .9rem;
  background: color-mix(in srgb, var(--altin) 12%, var(--surface)); border-radius: 12px; color: var(--altin); font-size: .92rem; }   /* killer en-ucuz = amber pop */
.foto-enucuz svg { width: 1em; height: 1em; flex: none; }
.foto-enucuz b { color: var(--ink); }
.foto-enucuz i { font-style: normal; color: var(--yesil); font-weight: 700; }
a.foto-enucuz { text-decoration: none; cursor: pointer; }
a.foto-enucuz:active { filter: brightness(.97); }
/* #4 alarm hızlı-hedef çipleri */
.alarm-cipler { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.al-cip { padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--hair); background: var(--surface-2); color: var(--gul-ink); font-size: .8rem; font-weight: 700; cursor: pointer; font-family: var(--sans); min-height: 40px; }
.al-cip:active { background: var(--gul-soft); }
.foto-kopru { display: block; width: 100%; margin-top: .8rem; padding: .85rem 1rem; border-radius: 12px;
  background: none; border: 1px solid var(--gul); color: var(--gul-ink); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
.foto-kopru:active { background: var(--gul-soft); }
.foto-tahmin-sar { position: relative; }
.foto-tahmin-sar .satir { border: 1px dashed var(--hair); border-radius: 12px; opacity: .96; }
.foto-tahmin-et { position: absolute; top: -.5rem; left: .8rem; z-index: 1; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--muted); background: var(--paper); padding: 0 .4rem; }
.foto-yaz { display: flex; gap: .5rem; margin: 1rem 0 .3rem; }
.foto-yaz input { flex: 1; min-width: 0; padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--hair);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; }
.foto-yaz input:focus { outline: none; border-color: var(--gul); }
.foto-yaz button { flex: none; width: 48px; border-radius: 12px; border: none; background: var(--gul); color: #fff; cursor: pointer; }
.foto-yaz button svg { width: 20px; height: 20px; }
.foto-ipucu { color: var(--muted); font-size: .84rem; margin: .1rem 0 .8rem; line-height: 1.45; }
.foto-hizli, .foto-tip-cip { display: flex; flex-wrap: wrap; gap: .45rem; }
.foto-hizli .hcip, .ftip { background: var(--surface); border: 1px solid var(--hair); color: var(--ink);
  border-radius: 999px; padding: .5rem .9rem; font: inherit; font-size: .86rem; cursor: pointer; }
.foto-hizli .hcip:active, .ftip:active { background: var(--gul-soft); }
.ftip.aktif { background: var(--gul); border-color: var(--gul); color: #fff; font-weight: 600; }
.foto-tip { margin: 1.1rem 0 .3rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.foto-tip-bas { font-size: .82rem; color: var(--muted); margin-bottom: .55rem; }
.foto-mini-not { font-size: .74rem; color: var(--muted); margin: -.5rem 0 .8rem; line-height: 1.4; }
.foto-riza p { color: var(--text); line-height: 1.55; margin: 0 0 .7rem; }
.foto-riza p b { color: var(--ink); }
.foto-riza .ipucu { color: var(--gul-ink); font-size: .9rem; }
.foto-riza .mini { color: var(--muted); font-size: .8rem; }