/* =====================================================================
   UST MENU SAYFALARI - BASLIK BOLUMLERI (Plan fb9e7d9a, 04.11.2026, handoff K1-K9)
   Kapsam: /tum-oyunlar (all-games), /urun-turu/{slug} (product-category-list),
   /yayincilar (streamer-list-new). Ortak <header class="bsBaslik">: solda h1 satiri
   (h1 + soluk sayi + canli hapi) ve aciklama, sagda arama (.bsArama); Tum Kategoriler'de
   altinda cip satirlari (.bsCipler). style.css'teki ortak .titleArea / .formControl
   DEGISTIRILMEDI (Sepet vb. kullaniyor); bu sayfalar yalniz bu siniflari kullanir.
   Renkler handoff README'sinden; koyu varsayilan, body.light acik.
   ===================================================================== */
.bsBaslik, .bsCipler, .bsBosSonuc {
    --bsZemin: #181820;
    --bsKart: #20212B;
    --bsInput: #111117;
    --bsKenar: #333444;
    --bsKenarBelirgin: #4E4F5C;
    --bsBaslikRenk: #EDEEF2;
    --bsMetin: #C8C9D8;
    --bsGovde: #ABACB5;
    --bsUcuncul: #8B8C99;
    --bsNane: #80F1B1;
    --bsNaneUstu: #181820;
    --bsNaneZemin: rgba(128,241,177,.12);
    --bsNaneKenar: rgba(128,241,177,.32);
    --bsCivit: #A8ACFF;
    --bsCivitZemin: rgba(92,97,214,.16);
    --bsCivitKenar: rgba(92,97,214,.38);
}
body.light .bsBaslik, body.light .bsCipler, body.light .bsBosSonuc {
    --bsZemin: #FAF9F5;
    --bsKart: #FFFFFF;
    --bsInput: #FFFFFF;
    --bsKenar: #E3E1D9;
    --bsKenarBelirgin: #C7C5BC;
    --bsBaslikRenk: #1F1E1D;
    --bsMetin: #1F1E1D;
    --bsGovde: #6B6A65;
    --bsUcuncul: #5F5E58;
    --bsNane: #137E4C;
    --bsNaneUstu: #FFFFFF;
    --bsNaneZemin: rgba(19,126,76,.10);
    --bsNaneKenar: rgba(19,126,76,.30);
    --bsCivit: #4A50C9;
    --bsCivitZemin: rgba(74,80,201,.08);
    --bsCivitKenar: rgba(74,80,201,.30);
}

/* ---- Baslik: sol blok + sag arama (K1) ---- */
.bsBaslik { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; width: 100%; color: var(--bsMetin); }
.bsSol { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.bsH1Satir { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bsBaslik h1 { margin: 0; padding: 0; background: none; font-size: 28px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; color: var(--bsBaslikRenk); display: inline; }
.bsSayi { font-size: 13px; font-weight: 700; color: var(--bsUcuncul); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bsCanli { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--bsNaneZemin); border: 1px solid var(--bsNaneKenar); color: var(--bsNane); font-size: 11.5px; font-weight: 800; white-space: nowrap; align-self: center; }
.bsCanli i { width: 7px; height: 7px; border-radius: 50%; background: var(--bsNane); animation: bsYanip 1.6s ease-in-out infinite; }
@keyframes bsYanip { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .bsCanli i { animation: none; } }
.bsAciklama { margin: 0; max-width: 760px; font-size: 14px; line-height: 1.55; color: var(--bsGovde); }
.bsAciklamaKap { display: flex; flex-direction: column; gap: 4px; max-width: 760px; }
.bsAciklama.bsKisa { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bsDevam { align-self: flex-start; min-height: 24px; padding: 0; border: 0; background: transparent; color: var(--bsNane); font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-family: inherit; }
.bsDevam svg { transition: transform .2s ease; }
.bsDevam[aria-expanded="true"] svg { transform: rotate(180deg); }
.bsRozet, .bsBaslik a.bsRozet { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--bsCivitZemin); border: 1px solid var(--bsCivitKenar); color: var(--bsCivit); font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.bsBaslik a.bsRozet:hover { color: var(--bsCivit); border-color: var(--bsCivit); }

/* ---- Arama (K5) ---- */
.bsArama { flex: none; display: flex; flex-direction: column; gap: 5px; width: 360px; }
.bsAramaKutu { position: relative; display: flex; align-items: center; }
.bsAramaKutu > svg { position: absolute; left: 13px; color: var(--bsUcuncul); pointer-events: none; }
.bsAramaInput, .bsBaslik input.bsAramaInput {
    width: 100%; height: 42px; box-sizing: border-box; padding: 0 44px 0 40px; margin: 0;
    border-radius: 12px; background: var(--bsInput); border: 1px solid var(--bsKenar); box-shadow: none;
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--bsBaslikRenk); -webkit-appearance: none; appearance: none;
}
.bsAramaInput::placeholder { color: var(--bsUcuncul); opacity: 1; }
.bsAramaInput:focus, .bsBaslik input.bsAramaInput:focus { outline: none; border-color: var(--bsNane); box-shadow: 0 0 0 3px var(--bsNaneZemin); background: var(--bsInput); color: var(--bsBaslikRenk); }
.bsAramaInput::-webkit-search-cancel-button, .bsAramaInput::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.bsAramaTemizle { position: absolute; right: 4px; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--bsGovde); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bsAramaTemizle:hover { color: var(--bsBaslikRenk); background: var(--bsKart); }
.bsAramaTemizle[hidden] { display: none; }
.bsSonuc { min-height: 16px; padding-left: 2px; font-size: 12px; font-weight: 700; color: var(--bsUcuncul); font-variant-numeric: tabular-nums; }
.bsBaslik button:focus-visible, .bsBaslik a:focus-visible, .bsCipler button:focus-visible, .bsBosSonuc button:focus-visible { outline: 2px solid var(--bsNane); outline-offset: 2px; }

/* ---- Cipler: Bolum / Tur (K6) ---- */
.bsCipler { display: flex; flex-direction: column; gap: 8px; }
.bsCipSatir { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bsCipEtiket { flex: none; font-size: 12px; font-weight: 700; color: var(--bsUcuncul); }
.bsCipKap { position: relative; flex: 1; min-width: 0; }
.bsCipSerit { display: flex; gap: 6px; flex-wrap: wrap; }
.bsCip {
    flex: none; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--bsKenar); background: var(--bsKart);
    color: var(--bsMetin); font-size: 13px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; white-space: nowrap; font-family: inherit; transition: background-color .15s ease, border-color .15s ease;
}
.bsCip:hover { border-color: var(--bsKenarBelirgin); color: var(--bsBaslikRenk); }
.bsCip span { font-size: 11.5px; font-weight: 800; color: var(--bsUcuncul); font-variant-numeric: tabular-nums; }
.bsCip.active { background: var(--bsNane); border-color: var(--bsNane); color: var(--bsNaneUstu); font-weight: 800; }
.bsCip.active span { color: var(--bsNaneUstu); opacity: .7; }
.bsCipKucuk .bsCip { height: 30px; padding: 0 11px; font-size: 12.5px; }
.bsSolma { display: none; }

/* ---- Sonuc yok kutusu (K5) ---- */
.bsBosSonuc { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 14px; border-radius: 14px; border: 1px dashed var(--bsKenarBelirgin); text-align: center; color: var(--bsMetin); }
.bsBosSonuc span { font-size: 14px; font-weight: 700; color: var(--bsMetin); }
.bsBosSonuc button { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--bsKenarBelirgin); background: transparent; color: var(--bsMetin); font-size: 12.5px; font-weight: 800; cursor: pointer; font-family: inherit; }
.bsBosSonuc button:hover { border-color: var(--bsNane); color: var(--bsNane); }

/* ---- Mobil (K8): dikey, sola yasli, arama tam genislik 46px, cipler yana kayar + sag solma ---- */
@media (max-width: 767.98px) {
    .bsBaslik { flex-direction: column; gap: 12px; }
    .bsBaslik h1 { font-size: 22px; }
    .bsAciklama { font-size: 13px; }
    .bsAciklama.bsMobilKisa { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .bsDevam { min-height: 36px; }
    .bsArama { width: 100%; }
    .bsAramaInput, .bsBaslik input.bsAramaInput { height: 46px; font-size: 16px; } /* iOS yakinlastirma yok */
    .bsAramaTemizle { width: 40px; height: 40px; right: 3px; }
    .bsCipSerit { flex-wrap: nowrap; overflow-x: auto; margin-right: -12px; padding: 2px 12px 6px 0; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
    .bsCipSerit::-webkit-scrollbar { display: none; }
    .bsCipSerit .bsCip { scroll-snap-align: start; }
    .bsCip { height: 40px; }
    .bsCipKucuk .bsCip { height: 36px; }
    .bsSolma { display: block; position: absolute; right: -12px; top: 0; bottom: 6px; width: 44px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bsZemin)); transition: opacity .2s ease; opacity: 0; }
    .bsCipKap.dahaVar .bsSolma { opacity: 1; }
    .bsBosSonuc button { min-height: 44px; }
}