/* B4 ajanı (4 Kas 2026 WhaynsChat revizyonu): Katalog (ürün + seçenek) ve Bilgi merkezi. Yalnız .b4 kabının içi; renkler uyg.css
   değişkenlerinden. Dokunma hedefi 44 px, telefonda yana kaydırma yok. */
.b4 .dugme,.b4 .dugme.kucuk{min-height:44px}
.b4 .dugme{white-space:normal;text-align:center}
.b4-bas h2{display:flex;align-items:center;gap:9px}
.b4-bas h2 .ik{color:var(--vurgu)}
.b4-sayac{font-size:17px;margin-top:6px}
.b4-birim{margin-top:4px;max-width:78ch}
.b4-alt-bas{display:flex;align-items:center;gap:8px;margin:18px 0 6px}
.b4-tamam{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--vurgu-koyu)}
.rozet.b4-bilinmiyor{background:transparent;border:1px dashed var(--cizgi-2);color:var(--metin-2)}
.b4-adres{overflow-wrap:anywhere;margin-top:2px}
.b4-metin{white-space:pre-wrap;font-size:14px;color:var(--metin-2);margin-top:8px;max-height:220px;overflow:auto;overflow-wrap:anywhere}
.b4-ayrinti{margin-top:10px}
.b4-ayrinti>summary{min-height:44px;display:inline-flex;align-items:center;gap:6px;color:var(--vurgu-koyu);font-weight:600;list-style:none}
.b4-ayrinti>summary::-webkit-details-marker{display:none}
.b4-ayrinti>summary .ik{transition:transform .15s}
.b4-ayrinti[open]>summary .ik{transform:rotate(180deg)}

/* kaynak sağlığı şeridi */
.b4-kaynaklar{position:relative;margin-top:16px;padding:12px 14px;border:1px solid var(--cizgi);border-radius:var(--r);background:var(--yuzey-2)}
.b4-serit-bas{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--metin-3);min-height:44px;display:flex;align-items:center;margin:-6px 0 4px}
.b4-serit{list-style:none;margin:0;padding:0}
.b4-kaynak{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:6px 14px;padding:8px 0;border-top:1px solid var(--cizgi)}
.b4-kaynak-bilgi{flex:1 1 420px;min-width:0}
.b4-kaynak:first-child{border-top:0;padding-top:0}
.b4-kaynak-ust{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.b4-kaynak-ad{min-width:0;overflow-wrap:anywhere}
.b4-kaynak-not{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin-top:8px;font-size:13.5px;line-height:1.45;padding:9px 11px;border-radius:10px;background:var(--yuzey)}
.b4-kaynak-not>.ik{flex:none;font-size:17px;margin-top:1px}
.b4-kaynak-not>span{flex:1 1 220px;min-width:0}
.b4-kaynak-not.hata{background:var(--tehlike-acik);color:var(--tehlike)}
.b4-kaynak-not.uyari{background:var(--uyari-acik);color:var(--uyari)}
.b4-kaynak-eylem{flex:0 0 auto}
.b4-bk-ic .b4-kaynak-eylem{margin-top:8px}

/* açılır panel (kaynak ekle / bilgi ekle) */
.b4-panel{margin-top:12px}
.b4-panel>summary{list-style:none;display:inline-flex;color:var(--metin);font-size:15px}
.b4-kaynaklar>.b4-panel{margin:0}
.b4-kaynaklar>.b4-panel>summary{position:absolute;top:6px;right:10px}
.b4-kaynaklar>.b4-panel[open]>.b4-panel-ic{margin:4px 0 12px}
.b4-panel>summary::-webkit-details-marker{display:none}
.b4-panel[open]>summary{background:var(--yuzey)}
.b4-panel-ic{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:22px;margin-top:12px;padding:16px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r)}
.b4-panel-bolum h3{font-size:16px}
.b4-rehber{margin:8px 0 0;padding-left:20px;font-size:14px;color:var(--metin-2)}
.b4-rehber li+li{margin-top:4px}

/* dosya seçici: tarayıcının İngilizce düğmesi yerine Türkçe etiketli düğme + seçilen dosyanın adı */
.b4-etiket{font-weight:550;font-size:14px}
.b4-dosya{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.b4-dosya-girdi{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden}
.b4-dosya-girdi:focus-visible+label{outline:3px solid var(--vurgu);outline-offset:2px}
.b4-dosya label{cursor:pointer;font-weight:600}
.b4-dosya-ad{color:var(--metin-2);font-size:14px;overflow-wrap:anywhere;min-width:0;flex:1 1 160px}

/* arama ve süzgeç */
.b4-suzgec{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:18px}
.b4-suzgec .alan{flex:1 1 180px}
.b4-suzgec .b4-ara{flex:2 1 260px}
.b4-suzgec-dugme{flex:0 0 auto}
#ara-yardim{margin-top:6px}
.b4-sonuc{margin:8px 0 4px;font-size:14.5px}
.b4-sonuc:empty{display:none}
.b4-temizle{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-left:6px;font-weight:600}

/* ürün listesi: satır = ürün (grup); açılınca seçenek tablosu */
.b4-urunler{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--cizgi)}
.b4-urun{border-bottom:1px solid var(--cizgi)}
.b4-urun>details>summary{display:grid;grid-template-columns:48px minmax(0,2fr) minmax(0,1.6fr) minmax(0,1.5fr) auto;grid-template-areas:"gorsel ad fiyat stok secenek";
  gap:12px;align-items:center;padding:10px 6px;min-height:64px;color:var(--metin);font-size:14.5px;list-style:none;border-radius:10px}
.b4-urun>details>summary::-webkit-details-marker{display:none}
.b4-urun>details>summary:hover{background:var(--yuzey-2)}
.b4-urun>details>summary:focus-visible{outline:3px solid var(--vurgu);outline-offset:-3px}
.b4-gorsel{grid-area:gorsel;width:48px;height:48px;border-radius:8px;background:var(--yuzey-2);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--metin-3)}
.b4-gorsel img{width:100%;height:100%;object-fit:cover;display:block}
.b4-urun-ad{grid-area:ad;display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.b4-urun-fiyat{grid-area:fiyat;min-width:0}
.b4-urun-stok{grid-area:stok;display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.b4-urun-secenek{grid-area:secenek;white-space:nowrap;color:var(--metin-2);display:inline-flex;align-items:center;gap:4px;justify-self:end}
.b4-urun-secenek .ik{transition:transform .15s}
.b4-urun>details[open]>summary .b4-urun-secenek>.ik{transform:rotate(180deg)}
.b4-urun-ic{padding:2px 6px 14px 66px}
.b4-urun-ic>p{margin-bottom:8px;overflow-wrap:anywhere}
.b4-urun-ic a{display:inline-flex;align-items:center;gap:4px;min-height:32px}
.b4-varyant td{vertical-align:middle}
.b4-pasif td{color:var(--metin-3)}
.b4-sayfa{margin-top:14px;justify-content:center}

/* içe aktarma önizlemesi */
.b4-onizleme{border-color:var(--vurgu);margin-bottom:16px}
.b4-etki{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.b4-etki li{flex:1 1 150px;padding:10px 12px;border:1px solid var(--cizgi);border-radius:var(--r);background:var(--yuzey-2);font-size:14px}
.b4-etki li.b4-etki-uyari{border-color:var(--uyari);background:var(--uyari-acik);color:var(--uyari)}
.b4-etki-sayi{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.b4-kucuk-tablo{margin-top:6px}
.b4-onizleme-eylem{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:18px}
.b4-onay{display:flex;gap:10px;align-items:flex-start;font-weight:500;max-width:70ch}
.b4-onay input{width:22px;height:22px;flex:none;margin-top:1px}

/* bilgi merkezi */
.b4-kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:14px;margin-top:16px}
.b4-kart{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:16px;border:1px solid var(--cizgi);border-radius:var(--r);background:var(--yuzey);min-width:0}
.b4-kart h3{display:flex;align-items:center;gap:8px;font-size:16px}
.b4-kart h3 .ik{color:var(--vurgu)}
.b4-kart>p{margin:0}
.b4-kart .b4-ayrinti{width:100%;margin-top:0}
.b4-kart-alt{display:flex;align-items:center;gap:6px;font-size:14px;margin-top:8px;padding-top:10px;border-top:1px solid var(--cizgi);width:100%}
.b4-saatler{list-style:none;margin:0;padding:0;font-size:14px;font-variant-numeric:tabular-nums}
.b4-rozetler{display:flex;flex-wrap:wrap;gap:4px}
.b4-kart>.dugme{margin-top:auto}
.b4-kart>.b4-kart-alt~.dugme{margin-top:0}
.b4-bk-liste{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--cizgi)}
.b4-bk{border-bottom:1px solid var(--cizgi)}
.b4-bk>details>summary{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;padding:10px 4px;min-height:56px;color:var(--metin);font-size:14.5px}
.b4-bk-ad{min-width:0;overflow-wrap:anywhere;display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.b4-bk-durum{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.b4-bk-ic{padding:0 4px 14px}
.b4-adres-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:10px}
.b4-adres-form .alan{flex:1 1 260px}

@media (max-width:760px){
  .b4-varyant tr{padding:6px 12px}
  .b4-varyant td{padding:3px 0}
  .b4-kaynak-eylem{width:100%}
  .b4-urun>details>summary{grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"gorsel ad ad" "gorsel fiyat fiyat" "stok stok secenek";gap:6px 12px}
  .b4-urun-ic{padding:2px 2px 14px}
  .b4-suzgec-dugme,.b4-suzgec-dugme .dugme{width:100%}
  .b4-kaynaklar{padding:10px 12px}
  .b4-onizleme-eylem>form,.b4-onizleme-eylem .dugme{width:100%}
}
@media (prefers-reduced-motion:reduce){.b4-urun-secenek .ik{transition:none}}