/* ==========================================================================
   ANASAYFA YENI TASARIM (Claude Design aktarimi, 24.08.2026)
   Anasayfaya ozel yeni tasarim bloklari; home-new.blade.php yukler.
   Renk sistemi header-yeni.css ile ayni: koyu tema site paletiyle birebir,
   acik tema tasarimin krem paleti blok kapsaminda scope'lanir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ORTAK - Bolum arasi bosluk standardi (25.08): anasayfadaki her bolum kabi
   ayni dikey aralikla biter. Bootstrap mb-* yerine tek kaynak burasi;
   deger degisecekse yalniz bu iki kural guncellenir.
   -------------------------------------------------------------------------- */
.anaBolum {
    margin-bottom: 40px;
}
@media (max-width: 767.98px) {
    .anaBolum {
        margin-bottom: 28px;
    }
}

/* --------------------------------------------------------------------------
   ORTAK - Bolum basligi (x-ui.bolum-baslik): baslik + alt metin + cizgi +
   "Tumunu Gor" dugmesi. Anasayfanin tum yeni bolumleri bunu kullanir.
   -------------------------------------------------------------------------- */
.bolumBaslik {
    --bbMetin: #C8C9D8;
    --bbSoluk: #8B8C99;
    --bbCizgi: #333444;
    --bbInceCizgi: #2A2B38;
    display: flex;
    /* Bar dikeyde ortali: en uzun oge (Tumunu Gor dugmesi) bari uzatinca
       baslik yukari kaymasin (25.08). Baslik-alt metin taban cizgisi hizasi
       .bolumBaslikSol icinde surer. */
    align-items: center;
    gap: 14px;
    padding: 0 2px 2px;
    margin-bottom: 16px;
    font-family: "Archivo", "Wix Madefor Display", sans-serif;
}
.bolumBaslikSol {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}
body.light .bolumBaslik {
    --bbMetin: #1F1E1D;
    --bbSoluk: #6B6A65;
    --bbCizgi: #E3E1D9;
    --bbInceCizgi: #EBE9E1;
}
.bolumBaslikAd {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--bbMetin);
    white-space: nowrap;
    margin: 0;
}
.bolumBaslikAlt {
    font-size: 12.5px;
    color: var(--bbSoluk);
    white-space: nowrap;
}
.bolumBaslikCizgi {
    flex: 1;
    height: 1px;
    background: var(--bbInceCizgi);
}
.bolumBaslikSag {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bolumBaslikTumu {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid var(--bbCizgi);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bbSoluk);
    white-space: nowrap;
    transition: color .18s, border-color .18s;
}
.bolumBaslikTumu:hover {
    color: var(--bbMetin);
    border-color: var(--bbSoluk);
}
@media (max-width: 767px) {
    .bolumBaslikAlt {
        display: none;
    }
}
/* Dar ekran (25.08, mobil 8): baslik + sag kontroller (Tumunu Gor, sayac,
   oklar) tek satira sigmazsa tasmak yerine kontroller alt satira sarar.
   Sigan bolumlerde gorunum degismez (wrap yalniz tasmada devreye girer). */
@media (max-width: 575.98px) {
    .bolumBaslik {
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

/* --------------------------------------------------------------------------
   3/9 - "Sizin Icin Sectiklerimiz" karti (banner solu, 300px kolon)
   -------------------------------------------------------------------------- */
.heroPicks {
    --hpYuzey: #20212B;
    --hpKutu: #272834;
    --hpCizgi: #333444;
    --hpMetin: #C8C9D8;
    --hpSoluk: #8B8C99;
    --hpVurgu: #80F1B1;
    --hpVurguZemin: rgba(128, 241, 177, 0.09);
    --hpVurguCizgi: rgba(128, 241, 177, 0.22);
    position: relative;
    height: 300px;
    box-sizing: border-box;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--hpCizgi);
    background: var(--hpYuzey);
    display: flex;
    flex-direction: column;
    font-family: "Archivo", "Wix Madefor Display", sans-serif;
}
body.light .heroPicks {
    --hpYuzey: #FFFFFF;
    --hpKutu: #F5F4EE;
    --hpCizgi: #E3E1D9;
    --hpMetin: #1F1E1D;
    --hpSoluk: #5F5E58;
    --hpVurgu: #343891;
    --hpVurguZemin: rgba(52, 56, 145, 0.05);
    --hpVurguCizgi: rgba(52, 56, 145, 0.10);
}
.heroPicksUst {
    flex: none;
    height: 30px;
    background: var(--hpVurguZemin);
    border-bottom: 1px solid var(--hpVurguCizgi);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--hpVurgu);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.heroPicksBaslik {
    flex: none;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 13px;
    background: var(--hpYuzey);
    border-bottom: 1px solid var(--hpCizgi);
}
.heroPicksLogo {
    display: flex;
    align-items: center;
    min-width: 0;
}
.heroPicksLogo img {
    height: 22px;
    max-width: 160px;
    object-fit: contain;
    display: block;
}
/* Oyun logolari koyu zemine gore hazirlanmis; acik temada tasarimdaki filtre */
body.light .heroPicksLogo img {
    filter: grayscale(100%) invert(1) brightness(.55) contrast(1.15);
}
.heroPicksTumu {
    flex: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--hpSoluk);
    white-space: nowrap;
    transition: color .18s;
}
.heroPicksTumu:hover {
    color: var(--hpMetin);
}
.heroPicksListe {
    flex: 1;
    min-height: 0;
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.heroPicksSatir {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: 9px;
    background: var(--hpKutu);
    transition: background .18s;
}
.heroPicksSatir:hover {
    background: var(--hpCizgi);
}
.heroPicksBilgi {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.heroPicksAd {
    font-size: 13px;
    font-weight: 700;
    color: var(--hpMetin);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.heroPicksPuan {
    font-size: 11px;
    color: var(--hpSoluk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.heroPicksFiyat {
    flex: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hpVurgu);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.heroPicksOk {
    font-size: 16px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   3/9 - Sekmeli oyun paneli (banner sagi)
   -------------------------------------------------------------------------- */
.heroTabs {
    --htYuzey: #20212B;
    --htKutu: #272834;
    --htCizgi: #333444;
    --htMetin: #C8C9D8;
    --htSoluk: #8B8C99;
    --htVurgu: #80F1B1;
    height: 300px;
    box-sizing: border-box;
    background: var(--htYuzey);
    border: 1px solid var(--htCizgi);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: "Archivo", "Wix Madefor Display", sans-serif;
}
body.light .heroTabs {
    --htYuzey: #FFFFFF;
    --htKutu: #F5F4EE;
    --htCizgi: #E3E1D9;
    --htMetin: #1F1E1D;
    --htSoluk: #5F5E58;
    --htVurgu: #343891;
}
.heroTabsBaslik {
    display: grid;
    /* sekme sayisi panelden gelir (2-4 arasi olabilir); sutunlar kayit
       sayisina uyar, bos kolon kalmaz */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-bottom: 1px solid var(--htCizgi);
    flex: none;
}
.heroTabsSekme {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0 6px;
    transition: background .18s, border-color .18s;
    min-width: 0;
}
.heroTabsSekme img {
    height: 20px;
    max-width: 104px;
    object-fit: contain;
    opacity: .45;
    transition: opacity .18s;
}
body.light .heroTabsSekme img {
    filter: grayscale(100%) invert(1) brightness(.55) contrast(1.15);
}
.heroTabsSekme:hover img {
    opacity: .8;
}
.heroTabsSekme.aktif {
    background: var(--htKutu);
    border-bottom-color: var(--htVurgu);
}
.heroTabsSekme.aktif img {
    opacity: 1;
}
.heroTabsGovde {
    display: none;
    flex: 1;
    min-height: 0;
    padding: 14px 16px 12px;
    gap: 10px;
}
.heroTabsGovde.aktif {
    display: flex;
}
.heroTabsKapak {
    width: 42%;
    max-width: 178px;
    flex: none;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--htCizgi);
    display: block;
}
.heroTabsKapak img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.heroTabsListe {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.heroTabsSatir {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border-radius: 8px;
    background: var(--htKutu);
    transition: background .18s;
}
.heroTabsSatir:hover {
    background: var(--htCizgi);
}
.heroTabsSatirAd {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--htMetin);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.heroTabsOk {
    flex: none;
    font-size: 14px;
    color: var(--htSoluk);
    transition: color .18s, transform .18s;
}
.heroTabsSatir:hover .heroTabsOk {
    color: var(--htMetin);
    transform: translateX(2px);
}
/* Mobil (25.08): 300px sabit boy tam genislikte cok buyuk kaldi — kapak
   gorseli gizlenir, yukseklik iceriga birakilir, baglanti satirlari 2'li
   izgarada yan yana dizilir (Ozgur karari). */
@media (max-width: 767.98px) {
    .heroTabs {
        height: auto;
    }
    .heroTabsKapak {
        display: none;
    }
    .heroTabsGovde.aktif {
        flex: none;
    }
    .heroTabsListe {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .heroTabsSatir {
        flex: none;
        min-height: 44px;
        padding: 10px 12px;
    }
}

/* --------------------------------------------------------------------------
   4/9 - Ziyaret seridi: SON ZIYARET haplari + degerlendirme CTA'si
   -------------------------------------------------------------------------- */
.ziyaretSeritKap {
    display: none;
}
.ziyaretSeritKap.on {
    display: block;
}
.ziyaretSerit {
    --zsYuzey: #20212B;
    --zsKutu: #272834;
    --zsCizgi: #333444;
    --zsMetin: #C8C9D8;
    --zsSoluk: #ABACB5;
    --zsVurgu: #80F1B1;
    --zsVurguCerceve: rgba(128, 241, 177, 0.35);
    --zsCtaZemin: rgba(52, 56, 145, 0.30);
    --zsCtaCerceve: rgba(52, 56, 145, 0.70);
    --zsCtaZeminH: rgba(52, 56, 145, 0.55);
    --zsCtaRozetMetin: #10241A;
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: "Archivo", "Wix Madefor Display", sans-serif;
}
body.light .ziyaretSerit {
    --zsYuzey: #FFFFFF;
    --zsKutu: #F5F4EE;
    --zsCizgi: #E3E1D9;
    --zsMetin: #1F1E1D;
    --zsSoluk: #6B6A65;
    --zsVurgu: #1B6B3C;
    --zsVurguCerceve: rgba(52, 56, 145, 0.32);
    --zsCtaZemin: rgba(27, 107, 60, 0.10);
    --zsCtaCerceve: rgba(27, 107, 60, 0.40);
    --zsCtaZeminH: rgba(27, 107, 60, 0.20);
    --zsCtaRozetMetin: #FFFFFF;
}
.ziyaretSol {
    flex: 1 1 auto;
    min-width: 0;
    display: none;
    align-items: center;
    gap: 16px;
}
.ziyaretSol.dolu {
    display: flex;
}
.ziyaretEtiket {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--zsSoluk);
    white-space: nowrap;
}
.ziyaretHaplar {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    gap: 10px;
}
.ziyaretHap {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 300px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px;
    background: var(--zsYuzey);
    border: 1px solid var(--zsCizgi);
    border-radius: 999px;
    transition: background .18s, border-color .18s;
}
.ziyaretHap:hover {
    background: var(--zsKutu);
    border-color: var(--zsVurguCerceve);
}
.ziyaretAd {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--zsMetin);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* uyenin son siparisindeki urun: kucuk vurgu rozeti */
.ziyaretRozet {
    flex: none;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--zsVurgu);
    color: var(--zsCtaRozetMetin);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;
    white-space: nowrap;
}
.ziyaretFiyat {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--zsVurgu);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Haplar ve CTA birlikteyken yer paylasilir; taraflardan biri yoksa digeri
   TAM genislige yayilir (Ozgur 24.08):
   - CTA yokken (.ctasiz) .ziyaretSol flex:1 ile zaten tum seridi kaplar.
   - Haplar bosken (.ziyaretSol.dolu degil) CTA asagidaki kardes secicilerle buyur. */
.ziyaretCta {
    flex: none;
    min-width: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ziyaretSol:not(.dolu) + .ziyaretCta {
    flex: 1 1 auto;
}
.ziyaretSol:not(.dolu) + .ziyaretCta .ziyaretCtaLink {
    flex: 1 1 auto;
}
.ziyaretSol:not(.dolu) + .ziyaretCta .ziyaretCtaAciklama {
    flex: 1 1 auto;
}
.ziyaretCtaLink {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 11px 16px 11px 13px;
    background: var(--zsCtaZemin);
    border: 1px solid var(--zsCtaCerceve);
    border-radius: 999px;
    transition: background .18s, border-color .18s;
}
.ziyaretCtaLink:hover {
    background: var(--zsCtaZeminH);
}
.ziyaretCtaYildiz {
    flex: none;
    display: block;
    fill: var(--zsVurgu);
}
.ziyaretCtaAdet {
    flex: none;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--zsVurgu);
    color: var(--zsCtaRozetMetin);
    font-size: 11.5px;
    font-weight: 800;
}
.ziyaretCtaMetin {
    flex: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--zsMetin);
    white-space: nowrap;
}
.ziyaretCtaAciklama {
    min-width: 0;
    font-size: 12px;
    color: var(--zsSoluk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ziyaretCtaOk {
    flex: none;
    font-size: 13px;
    color: var(--zsVurgu);
}
.ziyaretCtaKapat {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--zsCizgi);
    background: transparent;
    color: var(--zsSoluk);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: color .18s, border-color .18s;
}
.ziyaretCtaKapat:hover {
    color: var(--zsMetin);
    border-color: var(--zsSoluk);
}
@media (max-width: 991px) {
    .ziyaretSerit {
        flex-wrap: wrap;
    }
    .ziyaretCtaAciklama {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   5/9 - Cok Satanlar: 4 kolonlu tek kart (sekmelerin yerine)
   -------------------------------------------------------------------------- */
.cokSatanKap {
    --csYuzey: #20212B;
    --csKutu: #272834;
    --csCizgi: #333444;
    --csInceCizgi: #2A2B38;
    --csMetin: #C8C9D8;
    --csSoluk: #8B8C99;
    --csVurgu: #80F1B1;
    --csVurguCerceve: rgba(128, 241, 177, 0.40);
    --csVurguZemin: rgba(128, 241, 177, 0.12);
    font-family: "Archivo", "Wix Madefor Display", sans-serif;
}
body.light .cokSatanKap {
    --csYuzey: #FFFFFF;
    --csKutu: #F5F4EE;
    --csCizgi: #E3E1D9;
    --csInceCizgi: #EBE9E1;
    --csMetin: #1F1E1D;
    --csSoluk: #6B6A65;
    --csVurgu: #1B6B3C;
    --csVurguCerceve: rgba(27, 107, 60, 0.40);
    --csVurguZemin: rgba(27, 107, 60, 0.10);
}
.cokSatanKart {
    padding: 20px 18px;
    box-sizing: border-box;
    background: var(--csYuzey);
    border: 1px solid var(--csCizgi);
    border-radius: 14px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0 20px;
}
.cokSatanKolon {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cokSatanKolon + .cokSatanKolon {
    padding-left: 20px;
    border-left: 1px solid var(--csCizgi);
}
.cokSatanKolonBaslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 9px 11px;
    border-bottom: 1px solid var(--csCizgi);
}
.cokSatanKolonBaslik span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--csMetin);
}
.cokSatanKolonBaslik a {
    font-size: 11px;
    font-weight: 700;
    color: var(--csSoluk);
    white-space: nowrap;
    transition: color .18s;
}
.cokSatanKolonBaslik a:hover {
    color: var(--csMetin);
}
.cokSatanListe {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cokSatanUrun {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 9px;
    border-radius: 8px;
    transition: background .16s;
}
.cokSatanUrun:hover {
    background: var(--csKutu);
}
.cokSatanGorsel {
    flex: none;
    display: block;
}
.cokSatanGorsel img {
    width: 44px;
    height: 55px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}
.cokSatanBilgi {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    /* Gorsel yuksekligine sabit: yorum satiri olmayan urunlerde de her satir
       ayni boyda kalir (25.08). */
    height: 55px;
}
.cokSatanUrunAd {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 16px;
    color: var(--csMetin);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cokSatanUrunAd:hover {
    color: var(--csMetin);
}
.cokSatanPuan {
    font-size: 10px;
    line-height: 13px;
    color: var(--csSoluk);
}
.cokSatanFiyat {
    font-size: 12.5px;
    font-weight: 800;
    line-height: 16px;
    color: var(--csVurgu);
    font-variant-numeric: tabular-nums;
}
.cokSatanAl {
    width: 28px;
    height: 28px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid var(--csVurguCerceve);
    color: var(--csVurgu);
    font-size: 13px;
    transition: background .16s;
}
.cokSatanAl:hover {
    background: var(--csVurguZemin);
    color: var(--csVurgu);
}
/* dar masaustu: 4 kolon sigmayinca 2x2 */
@media (max-width: 1199px) {
    .cokSatanKart {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .cokSatanKolon + .cokSatanKolon {
        padding-left: 0;
        border-left: none;
    }
    .cokSatanAlt {
        display: none;
    }
}
/* Mobil (25.08, mobil 1. parca): eski sekmeli owl yerine ayni kart — kolonlar
   yatay kaydirmali, her kolon bir "sayfa" (scroll-snap, JS'siz). Kolon %84
   genislikte ki sonraki kolonun ucu gorunsun, kaydirilabilirlik belli olsun. */
@media (max-width: 767.98px) {
    .cokSatanKart {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 14px;
        scrollbar-width: none;
    }
    .cokSatanKart::-webkit-scrollbar {
        display: none;
    }
    .cokSatanKolon {
        flex: 0 0 84%;
        scroll-snap-align: start;
    }
}

/* --------------------------------------------------------------------------
   MOBIL 4. PARCA - Kisayol kartlari (Claude Design "Oyuneks Mobil" aktarimi):
   fotografli 2x2 izgara — kapak + alt karartma degradesi + ortali baslik.
   Karartma fotograf ustunde her iki temada da ayni kalir; yalniz cerceve
   rengi temaya uyar.
   -------------------------------------------------------------------------- */
.kisayolIzgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-family: "Archivo", "Wix Madefor Display", sans-serif;
}
.kisayolKart {
    position: relative;
    height: 116px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #333444;
    display: block;
    transition: border-color .18s;
}
body.light .kisayolKart {
    border-color: #E3E1D9;
}
.kisayolKart:hover,
.kisayolKart:active {
    border-color: #4E4F5C;
}
body.light .kisayolKart:hover,
body.light .kisayolKart:active {
    border-color: #BDBBB1;
}
.kisayolKart img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kisayolGolge {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(24,24,32,0.94) 0%, rgba(24,24,32,0.35) 55%, rgba(24,24,32,0.05) 100%);
}
.kisayolAd {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 11px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   6/9 - Yayincilarimiz: kare avatar kartlari (8'li izgara)
   -------------------------------------------------------------------------- */
.yayinciIzgara,
.yayinciMobil {
    --yyKutu: #272834;
    --yyCizgi: #333444;
    --yySoluk: #ABACB5;
    --yyVurgu: #80F1B1;
    --yyCanliCerceve: rgba(128, 241, 177, 0.30);
    font-family: "Archivo", "Wix Madefor Display", sans-serif;
}
.yayinciIzgara {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
}
body.light .yayinciIzgara,
body.light .yayinciMobil {
    --yyKutu: #F5F4EE;
    --yyCizgi: #E3E1D9;
    --yyCanliCerceve: rgba(52, 56, 145, 0.28);
}
/* Mobil (25.08, mobil 5. parca): owl carousel kaldi, yalniz kart dili
   masaustuyle ortak (yayinciKart). Iskelet boyu kare karta gore; noktalar
   karta yakin, bolum alti boslugu .anaBolum standardindan gelir. */
.yayinciMobil .owl-dots {
    padding: 12px 0 0;
}
.yayinciMobil.loading {
    min-height: 205px;
}
.yayinciKart {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--yyCizgi);
    background: var(--yyKutu);
    transition: transform .18s, border-color .18s;
    min-width: 0;
}
.yayinciKart.canli {
    border-color: var(--yyCanliCerceve);
}
.yayinciKart:hover {
    transform: translateY(-2px);
}
/* tum karti tiklanir yapan gorunmez katman; sosyal linkler ustunde kalir */
.yayinciKapla {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.yayinciGorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* gradyan iki temada da koyu: yazi daima gorselin ustunde beyaz okunur */
.yayinciGolge {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(24,24,32,0.95) 0%, rgba(24,24,32,0.35) 45%, transparent 75%);
    pointer-events: none;
}
.yayinciRozet {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(24, 24, 32, 0.72);
    border: 1px solid var(--yyCizgi);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .7px;
    color: var(--yySoluk);
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
}
.yayinciNokta {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8B8C99;
    flex: none;
}
.yayinciKart.canli .yayinciRozet {
    border-color: rgba(128, 241, 177, 0.50);
    color: #A8F6CE;
}
.yayinciKart.canli .yayinciNokta {
    background: #80F1B1;
}
.yayinciAltBilgi {
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 11px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}
.yayinciAd {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.yayinciAltSatir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.yayinciPlatform {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #ABACB5;
    white-space: nowrap;
}
.yayinciSosyal {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
}
.yayinciSosyal a {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 9px;
    color: #C8C9D8;
    transition: background .18s, color .18s;
}
.yayinciSosyal a:hover {
    background: rgba(255, 255, 255, 0.30);
    color: #FFFFFF;
}
/* dar masaustu: kolon sayisi kademeli dusur */
@media (max-width: 1399px) {
    .yayinciIzgara {
        grid-template-columns: repeat(6, 1fr);
    }
    /* TAM SIRA: sunucu 16 kart veriyor; 8 ve 4 kolonda tam bolunuyor ama
       6 kolonda 6+6+4 kalip son sirada 2 bosluk aciliyordu (Hakan 25.08:
       "anasayfada yayincilar 2 tane eksik geliyor"). Bu genislikte 13-16.
       kartlar gizlenir, 2 tam sira kalir. Sunucu sayisini 12'ye cekmek
       8 kolonda tek sira birakirdi; 24'e cekmek sayfayi agirlastirirdi. */
    .yayinciIzgara .yayinciKart:nth-child(n+13) {
        display: none;
    }
}
@media (max-width: 1199px) {
    .yayinciIzgara {
        grid-template-columns: repeat(4, 1fr);
    }
}