/*!
 * Galata Playlist — dort gorunum tipi
 *
 *   1 Listing           kart izgarasi, oynatici yok
 *   2 Carousel          oynatici + tek siralik serit
 *   3 CarouselMultiRow  oynatici + iki siralik serit
 *   4 WithPlayer        oynatici + yandan liste paneli
 *
 * Splide YOK. Serit, CSS scroll-snap ile kuruluyor: dokunmatikte native kaydirma,
 * masaustunde ok tuslariyla sayfa sayfa. Eski projede bunun icin Splide + grid
 * eklentisi + jQuery yukleniyordu (wwwroot/lib'in buyuk kismi bu ucluydu).
 */

.gpl {
    --gpl-accent: #ff4c60;
    /*  --gpl-bg ve --gpl-text sayfadan (musterinin ?back / ?fore secimi) satir ici
        stille geliyor; buradakiler yalnizca yedek.  */
    --gpl-bg: #0b0e12;
    --gpl-text: #e6edf3;
    --gpl-radius: 12px;

    /*  Kart yuzeyi, cizgiler ve soluk metin SABIT renk olamaz: arka plan artik
        musterinin sectigi herhangi bir renk. Yari saydam katmanlar her zeminde
        dogru yonde calisir — koyu zeminde acar, acik zeminde koyultur.  */
    --gpl-card: rgba(255, 255, 255, .07);
    --gpl-line: rgba(255, 255, 255, .14);
    --gpl-muted: color-mix(in srgb, var(--gpl-text) 62%, transparent);

    background: var(--gpl-bg);
    color: var(--gpl-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    min-height: 100%;
}

/*  Arka plan aydinlik oldugunda katmanlarin yonu ters cevrilir. Ton, sunucuda
    ITU-R BT.601 parlakligiyla belirlenip data-tone olarak basiliyor
    (bkz. EmbedOptions.IsLightBackground).  */
.gpl[data-tone="light"] {
    --gpl-card: rgba(0, 0, 0, .05);
    --gpl-line: rgba(0, 0, 0, .14);
}

/* ------------------------------------------------------------------- baslik */

/*  Logo secilen kosede, baslik onun yaninda ORTALANMIS. Ikisinden yalnizca biri
    varsa yerlesim yine dogru: logo yoksa baslik tek basina ortalanir, baslik yoksa
    logo kosesinde kalir.  */
.gpl__head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px 10px;
}
.gpl__head--rt { flex-direction: row-reverse; }

/*  contain + serbest genislik: buraya kare bir profil fotografi de, genis bir
    kelime logosu da gelebiliyor. Sabit daire + cover ile kelime logolari
    kirpilirdi.  */
.gpl__logo {
    height: 38px; width: auto; max-width: 128px;
    object-fit: contain; flex: 0 0 auto;
}

.gpl__titles { flex: 1 1 auto; min-width: 0; text-align: center; }
.gpl__title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.gpl__desc { margin: 3px 0 0; font-size: 12px; color: var(--gpl-muted); line-height: 1.45; }

/* --------------------------------------------------------------- kart (ortak) */

.gpl-card {
    position: relative;
    display: block;
    border: 0;
    padding: 0;
    background: var(--gpl-card);
    border-radius: var(--gpl-radius);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    aspect-ratio: 16 / 9;
    width: 100%;
    transition: transform .18s ease, box-shadow .18s ease;
}
.gpl-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.gpl-card:focus-visible { outline: 2px solid var(--gpl-accent); outline-offset: 2px; }

.gpl-card__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    background: #05070a;
    transition: opacity .18s ease, transform .35s ease;
    opacity: .82;
}
.gpl-card:hover .gpl-card__img { opacity: 1; transform: scale(1.03); }

/* Alt karartma — baslik her zaman okunur kalsin */
.gpl-card::after {
    content: "";
    position: absolute; inset: auto 0 0 0; height: 62%;
    background: linear-gradient(to top, rgba(4, 6, 9, .92), rgba(4, 6, 9, .35) 55%, transparent);
    pointer-events: none;
}

/*  Kart adi FOTOGRAF uzerindeki koyu gecisin uzerinde duruyor; sayfa yazi rengini
    devralamaz. Acik temada devralsaydi koyu metin koyu gecise binerdi.  */
.gpl-card__name {
    color: #fff;
    position: absolute; left: 10px; right: 10px; bottom: 9px;
    z-index: 2;
    font-size: 12.5px; font-weight: 600; line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Oynat rozeti */
.gpl-card__play {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .18s ease;
    pointer-events: none;
}
.gpl-card:hover .gpl-card__play { opacity: 1; }
.gpl-card__play span {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--gpl-accent);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
/*  Ortak simge (Views/Shared/_PlayIcon.cshtml) stroke tabanli ve currentColor
    kullaniyor; rengi buradaki "color" belirler.  */
.gpl-card__play span { color: #fff; }
.gpl-card__play .gp-play-icon { width: 20px; height: 20px; }

/* Su an oynayan kart */
.gpl-card.is-active { box-shadow: 0 0 0 2px var(--gpl-accent); }
.gpl-card.is-active .gpl-card__img { opacity: 1; }

/* Oynatilamayan kamera (abonelik yok / kapali) */
.gpl-card.is-off { cursor: default; }
.gpl-card.is-off:hover { transform: none; box-shadow: none; }
.gpl-card.is-off .gpl-card__img { opacity: .35; filter: grayscale(1); }
.gpl-card.is-off .gpl-card__play { display: none; }
.gpl-card__off {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    /*  Rozet KOYU bir zemine sahip ve fotografin uzerinde duruyor; metni sayfa
        yazi renginden BAGIMSIZ olmali. Devralsaydi acik temada koyu metin koyu
        rozete binip okunmaz olurdu.  */
    background: rgba(4, 6, 9, .8); color: rgba(255, 255, 255, .72);
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    padding: 3px 7px; border-radius: 999px;
}

/* ------------------------------------------------------- 1) Listing: izgara */

.gpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px;
    padding: 16px 18px;
}

/* ----------------------------------------- 2/3) Carousel: scroll-snap seridi */

.gpl-strip { position: relative; padding: 0 16px 16px; }

.gpl-strip__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.gpl-strip__track::-webkit-scrollbar { display: none; }
.gpl-strip__track > * { scroll-snap-align: start; }

/* Iki siralik varyant — kartlar daha kucuk ki iki sira birden sigsin */
.gpl-strip--rows2 .gpl-strip__track {
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: minmax(158px, 1fr);
}

/* Sayfa oklari */
.gpl-strip__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: rgba(4, 6, 9, .82);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
    opacity: 0; transition: opacity .18s ease, background .18s ease;
}
.gpl-strip:hover .gpl-strip__nav { opacity: 1; }
.gpl-strip__nav:hover { background: var(--gpl-accent); }
.gpl-strip__nav:disabled { opacity: 0 !important; pointer-events: none; }
.gpl-strip__nav--prev { left: 4px; }
.gpl-strip__nav--next { right: 4px; }
.gpl-strip__nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Dokunmatikte oklar yerine parmakla kaydirma */
@media (hover: none) {
    .gpl-strip__nav { display: none; }
}

/* ------------------------------------------ 4) WithPlayer: yandan liste paneli */

.gpl-split { display: flex; gap: 12px; padding: 16px; align-items: flex-start; }
.gpl-split__main { flex: 1 1 auto; min-width: 0; }
.gpl-split__side {
    flex: 0 0 236px;
    max-height: 62vh;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
    scrollbar-width: thin;
}

/* Yandaki liste satirlari yatay kart */
.gpl-split__side .gpl-card {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 9px;
    align-items: center;
    padding: 6px;
    border-radius: 9px;
    /*  Panel bir flex sutunu; shrink acik kalirsa 8 kart 190px'e sikisip
        kucuk resimler serit haline geliyor. Kartlar boyunu korur, panel kayar. */
    flex: 0 0 auto;
}
.gpl-split__side .gpl-card::after { display: none; }
.gpl-split__side .gpl-card__img {
    position: static; width: 92px; height: 52px;
    border-radius: 6px; opacity: 1;
}
.gpl-split__side .gpl-card__name {
    position: static; font-size: 12px; text-shadow: none;
    left: auto; right: auto; bottom: auto;
}
.gpl-split__side .gpl-card__play { display: none; }
/*  Rozet, kucuk resmin UZERINDE durur. Izgara akisina birakilirsa kendi hucresini
    kapip kamera adini alt satira itiyor ve ad kirpiliyordu. */
.gpl-split__side .gpl-card__off {
    position: absolute; top: 9px; left: 9px;
    font-size: 9px; padding: 2px 5px;
}

/* Dar gomlemede panel oynaticinin altina gecer.
   Portal bu tipi 640x660 iframe olarak uretiyor. */
@media (max-width: 720px) {
    .gpl-split {
        flex-direction: column;
        /*  Izgara kalan yuksekligi alsin diye kapsayici da yukseklik almali. */
        min-height: 0;
        /*  Sutun modunda flex-start CAPRAZ eksende (yatayda) hizalar ve cocuklari
            icerik genisligine daraltir. Oynatici kutusu JS calisana kadar BOS
            oldugu icin genisligi ~0 kaliyor, video.js'in 16:9 dolgusu da sifira
            dusup player 21px'e cokuyordu.  */
        align-items: stretch;
    }
    /*  Dar alanda dikey liste kotu duruyor: 8 kart ya sikisiyor ya da uzun bir
        kaydirma cikiyor. Yatay serit de iyi degildi — ayni anda yalnizca 3-4 kart
        gorunuyor, oynaticinin altinda buyuk bir bosluk kaliyordu (640x660'ta
        ~230px). Panel burada IZGARAYA donusur: bos dikey alani kullanir ve bir
        bakista daha cok kamera gosterir.  */
    .gpl-split__side {
        flex: 1 1 auto; width: 100%; max-height: none; min-height: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        align-content: start;
        overflow-x: hidden; overflow-y: auto;
        gap: 8px; padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .gpl-split__side .gpl-card {
        display: block; padding: 0;
        aspect-ratio: 16 / 9;
        border-radius: var(--gpl-radius);
    }
    .gpl-split__side .gpl-card::after { display: block; }
    .gpl-split__side .gpl-card__img {
        position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0;
    }
    .gpl-split__side .gpl-card__name {
        position: absolute; left: 8px; right: 8px; bottom: 7px;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
    }
    .gpl-split__side .gpl-card__off { top: 6px; left: 6px; }
}

/* ------------------------------------------------------------------ oynatici */

/*  Oynatici 16:9 kalir (video.js fluid). Yukseklik sinirlamiyoruz: portalin
    urettigi gomleme olculerinde (640x600 / 640x680 / 640x660) oynatici + serit
    zaten sigiyor ve videoyu kutuya sigdirmak yanlarda siyah bant birakip
    logo/CANLI rozetini videonun DISINDA gosteriyordu.  */
.gpl__player { border-radius: var(--gpl-radius); overflow: hidden; background: #000; }


/* --------------------------------------------------------------------- bos */

.gpl-empty {
    padding: 40px 16px; text-align: center;
    color: var(--gpl-muted); font-size: 13px;
}

.gpl-error { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 1.5rem; }
.gpl-error__box { text-align: center; max-width: 34rem; }
.gpl-error__box h1 { font-size: 1.05rem; margin: 0 0 .5rem; }
.gpl-error__box p { font-size: .85rem; color: var(--gpl-muted); margin: 0; line-height: 1.5; }

/* ------------------------------------------------ tek kamera (listeden gelen) */

/*  Listing gorunumunde bir karta tiklaninca acilan sayfa. Ayni renk belirteclerini
    kullanir; iki sayfa arasinda gecis yaparken gomleme tek parca gorunsun.  */
/*  Bu sayfa gomleme kutusunun TAMAMINI oynaticiya birakir: baslik satiri yok
    (kamera adi zaten oynaticinin uzerinde) ve kenar boslugu da yok.  */
.gpl--single { min-height: 0; padding: 12px;}
.gpl-single { position: relative; }

/*  TAM KAPLAMA (fillMode=1): oynatici gomleme kutusunun TAMAMINI alir.
    Yuksekligin zincir boyunca tanimli olmasi sart — .gp--fill "height: 100%"
    veriyor ve ust kutularin yuksekligi yoksa bu sifira cozuluyordu.
    Kenar bosluklari da kalkiyor: bu kipte istenen sey kenardan kenara goruntu.  */
.gpl--fill { height: 100%; padding: 0; box-sizing: border-box; }
.gpl--fill .gpl-single { height: 100%; }
.gpl--fill .gpl__player { border-radius: 0; }

/*  Geri dugmesi oynaticinin UZERINDE, sol ustte. Sayfa akisinda yer kaplamiyor;
    metin de yok, yalnizca ikon — gomleme kutusu kucuk oldugunda her piksel
    videoya kalsin.  */
.gpl-back {
    position: absolute; top: 10px; left: 10px; z-index: 6;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: rgba(9, 12, 16, .72);
    color: #fff;
    backdrop-filter: blur(4px);
}
.gpl-back:hover { background: var(--gpl-accent); }
.gpl-back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gpl-back svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }

/*  Oynaticinin kendi logosu da sol ustte duruyor (.gp-logo--lt, left:12px).
    Geri dugmesi varken ustune binmesin diye saga kaydiriliyor.  */
.gp--has-back .gp-logo--lt { left: 56px; }

/* ==================================================== kamera secici (tip 4) */

/*  Kameralar eskiden oynaticinin YANINDA bir panelde duruyor ve videodan ~236px
    caliyordu. Gomleme kutusu zaten dar (portal 640px uretiyor). Artik liste
    oynaticinin ICINDE aciliyor; video butun genisligi kullaniyor.  */

/*  Tetikleyici — alt seritte, saga yanasik. CANLI rozeti ve baslik ile ayni
    chip dili: satir tek bir sistem gibi okunsun.  */
/*  Dugme, oynaticinin kendi rozetleriyle AYNI chip: gorunumu galata-player.css
    icindeki .gp-chip veriyor (dugme her iki sinifi da tasiyor). Burada yalnizca
    chip'te olmayan seyler var — tiklanabilirlik, acikken vurgu, sayi rozeti.  */
.gpl-pick__btn {
    flex: 0 0 auto;
    border: 0; cursor: pointer;
    /*  Yalnizca yazi tipi devralinir. "font: inherit" kisayolu satir yuksekligini
        de ezip dugmeyi komsu chip'lerden bir tik alcak birakiyordu.  */
    font-family: inherit;
    transition: background .18s ease;
}
.gpl-pick__btn:hover { --gp-chip-bg: rgba(9, 12, 16, .92); }
/*  Panel acikken dugme de acik kalsin: izleyici listeyi hangi dugmenin actigini
    gorur, ikinci tikta kapatacagini bilir.  */
.gpl-pick__btn[aria-expanded="true"] { --gp-chip-bg: var(--gpl-accent); }
.gpl-pick__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gpl-pick__btn svg { width: 13px; height: 13px; flex: 0 0 auto; fill: currentColor; }
/*  Kamera sayisi: chip icinde kendi kucuk rozeti. Dar gomlemede etiket gizlenince
    tek basina kalir ve dugme yine "kac kamera var" bilgisini tasir.  */
.gpl-pick__btn b {
    padding: 0 5px; border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-weight: 700; font-variant-numeric: tabular-nums;
}
/*  Cok dar gomlemede metin dusuyor, simge ve sayi kaliyor.  */
@media (max-width: 420px) {
    .gpl-pick__btn span { display: none; }
}

/*  Panel oynaticinin ICINDE. Tam ekran bir kutu degil: alttan acilan bir tabaka,
    arkasinda video gorunmeye devam ediyor — izleyici secim yaparken neyi
    izledigini gormeyi surduruyor.  */
.gpl-pick {
    position: absolute; inset: 0; z-index: 7;
    display: flex; align-items: flex-end;
    background: rgba(4, 6, 9, 0);
    transition: background .24s ease;
}
.gpl-pick[hidden] { display: none; }
.gpl-pick.is-open { background: rgba(4, 6, 9, .42); }

.gpl-pick__sheet {
    width: 100%;
    max-height: 72%;
    display: flex; flex-direction: column;
    background: rgba(11, 14, 18, .93);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 34px rgba(0, 0, 0, .45);
    /*  Kapaliyken asagi cekilir; acilirken yerine oturur.  */
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.22, .8, .3, 1);
}
.gpl-pick.is-open .gpl-pick__sheet { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .gpl-pick, .gpl-pick__sheet { transition: none; }
}

.gpl-pick__head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 8px;
}
.gpl-pick__title { font-size: 12px; font-weight: 700; color: #e6edf3; letter-spacing: .02em; }
.gpl-pick__close {
    width: 26px; height: 26px;
    border: 0; border-radius: 6px;
    background: none; color: #8b9bab; cursor: pointer;
    font-size: 20px; line-height: 1;
}
.gpl-pick__close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.gpl-pick__close:focus-visible { outline: 2px solid var(--gpl-accent); outline-offset: 1px; }

/*  Kartlar dikey kayan bir izgarada. Dar gomlemede iki sutun, genisledikce artar. */
.gpl-pick__grid {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
    scrollbar-width: thin;
}

.gpl-pick__item {
    display: block; padding: 0; border: 0;
    background: none; color: #e6edf3; cursor: pointer;
    text-align: left; font: inherit;
}
.gpl-pick__item:focus-visible { outline: 2px solid var(--gpl-accent); outline-offset: 2px; border-radius: 9px; }

.gpl-pick__thumb {
    position: relative; display: block;
    aspect-ratio: 16 / 9;
    border-radius: 8px; overflow: hidden;
    background: #05070a;
    border: 1px solid transparent;
    transition: border-color .16s ease, transform .16s ease;
}
.gpl-pick__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.gpl-pick__item:hover .gpl-pick__thumb { transform: translateY(-2px); border-color: rgba(255, 255, 255, .3); }
.gpl-pick__item:hover .gpl-pick__thumb img { opacity: 1; }

.gpl-pick__name {
    display: block; margin-top: 5px;
    font-size: 11.5px; font-weight: 600; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/*  "IZLENIYOR" rozeti yalnizca o an oynayan kamerada. Kart ayrica vurgu rengiyle
    cerceveleniyor ki listede goz hemen bulsun.  */
.gpl-pick__now {
    position: absolute; left: 6px; top: 6px;
    padding: 2px 6px; border-radius: 999px;
    background: var(--gpl-accent); color: #04222f;
    font-size: 9px; font-weight: 700; letter-spacing: .05em;
    opacity: 0; transition: opacity .16s ease;
}
.gpl-pick__item.is-now .gpl-pick__now { opacity: 1; }
.gpl-pick__item.is-now .gpl-pick__thumb { border-color: var(--gpl-accent); }

.gpl-pick__off {
    position: absolute; left: 6px; top: 6px;
    padding: 2px 6px; border-radius: 999px;
    background: rgba(4, 6, 9, .8); color: rgba(255, 255, 255, .72);
    font-size: 9px; font-weight: 700; letter-spacing: .04em;
}
.gpl-pick__item.is-off { cursor: default; }
.gpl-pick__item.is-off .gpl-pick__thumb img { opacity: .32; filter: grayscale(1); }
.gpl-pick__item.is-off:hover .gpl-pick__thumb { transform: none; border-color: transparent; }
.gpl-pick__item.is-off .gpl-pick__name { color: var(--gpl-muted); }

/*  Cok kisa oynaticida (ornegin 640x200) tabaka neredeyse tamami kaplayabilir;
    baslik satiri kalabalik etmesin diye kucultuluyor.  */
@media (max-height: 260px) {
    .gpl-pick__sheet { max-height: 86%; }
    .gpl-pick__head { padding: 6px 10px 4px; }
    .gpl-pick__grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
}

/*  Tip 4 artik tam genislik: yan panel yok, kameralar oynaticinin icinde.

    Oynatici videonun en-boy oranina gore olceklenir, gomleme kutusunun yuksekligi
    ise musterinin sectigi sabit bir deger. Ikisi tutmadiginda artan bosluk hep
    ALTTA kaliyordu ve "icerik bitti" gibi duruyordu. Sayfa dikeyde ortalaniyor:
    bosluk simetrik olunca kutuya oturtulmus gibi okunuyor.  */
.gpl-page--full { display: flex; flex-direction: column; min-height: 100vh; }
.gpl-full {
    flex: 1 1 auto;
    display: flex; align-items: center;
    padding: 0 16px;
}
.gpl-full .gpl__player { width: 100%; }

/*  TAM KAPLAMA (fillMode=1): oynatici .gpl-full'un TAMAMINI kaplar.
    Uc sey gerekiyor — (1) zincirde tanimli yukseklik, cunku "fill" kipinde
    video.js yuksekligini kapsayicidan aliyor; (2) ortalama yerine gerdirme,
    yoksa esnek oge icerigi kadar kaliyor; (3) kenar bosluklarinin kalkmasi,
    bu kipte istenen sey kenardan kenara goruntu.  */
.gpl--fill.gpl-page--full { height: 100%; min-height: 0; }
.gpl--fill .gpl-full { align-items: stretch; padding: 0; min-height: 0; }
.gpl--fill .gpl-full .gpl__player { height: 100%; }

/*  KISA oynatici: izgara yerine tek siralik yatay serit.
    Izgara 8 kamerayi iki sirada gosteriyor ve ~240px istiyor; 272px'lik bir
    oynaticida bu, videonun neredeyse tamamini kapatiyordu. Serit ~110px'e
    siginiyor, arkada video gorunmeye devam ediyor. Esik JS'te olculuyor
    (bkz. galata-playlist.js bicimSec) cunku medya sorgulari OYNATICI
    yuksekligini degil gorunum alanini olcer.  */
.gpl-pick--strip .gpl-pick__sheet { max-height: none; }
.gpl-pick--strip .gpl-pick__grid {
    display: flex;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 10px;
}
.gpl-pick--strip .gpl-pick__item {
    flex: 0 0 128px;
    scroll-snap-align: start;
}
.gpl-pick--strip .gpl-pick__head { padding: 8px 12px 6px; }