/*!
 * Galata Player — Embed V2 gorunum katmani
 *
 * KURAL: butun bindirmeler pointer-events:none. Tiklama hedefi olmasi gereken
 * tek sey video.js'in kendi kontrolleri. Eski projede gorunmez bir loader
 * katmani (opacity:0 ama z-index:9999) buyuk oynat tusunu tiklanamaz yapmisti.
 */

.gp {
    --gp-accent: #00b1ff;
    --gp-fore: #ffffff;
    --gp-veil: rgba(9, 12, 16, .72);
    --gp-radius: 10px;

    /* ALT YIGIN — asagidan yukari: doviz seridi, kayan altyazi, kontrol cubugu,
       rozet satiri, hava durumu. Kapali olan katmanin yuksekligi 0'dir ve
       ustundekiler kendiliginden asagi iner; tek bir "bottom" hesabi butun
       kombinasyonlari karsiliyor. Eski projede ayni is 16 ayri kural ve
       !important ile yapiliyordu (EmbedWebUi/css/videojs-custom.css:120-175). */
    --gp-marquee-h: 0px;
    --gp-exchange-h: 0px;
    --gp-bar-h: 3.2em;
    /* Rozet satirinin kapladigi yer; hava durumu onun ustune oturuyor. */
    --gp-chip-row-h: 30px;
    /* Kontrol cubugu disindaki sabit alt mobilya. */
    --gp-furniture-h: calc(var(--gp-marquee-h) + var(--gp-exchange-h));

    position: relative;
    width: 100%;
    background: #0b0e12;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    overflow: hidden;
}

/*  TAM KAPLAMA — gomleme kutusunun tamamini oynatici alir.
    video.js'in "fill" kipi player'i kapsayiciya yayiyor; video etiketi ise
    varsayilan "contain" ile ortada duruyor ve kenarlarda siyah serit birakiyordu.
    "fill" ile goruntu kutuya tam yayiliyor. Kutu 16:9 degilse goruntu bir miktar
    esner; musterinin istedigi davranis bu — kirpma (cover) degil.  */
.gp--fill, .gp--fill .gp__video { height: 100%; }
.gp--fill .video-js video { object-fit: fill; }

.gp .video-js {
    width: 100%; height: 100%; background-color: #0b0e12; font-family: inherit;
    /*  KONTROL CUBUGU OLCEGI — tek yerden.
        video.js butun kontrolleri taban puntoya gore em ile olcuyor: dugme 4em
        genislik, simge 1.8em, cubuk 3.2em yukseklik. Varsayilan taban 10px ile
        dugmeler 40x32 px kaliyordu; kucuk gomlemede ve dokunmatikte isabet
        ettirmek zordu. Taban 15px: her sey %50 buyuyor, oranlar bozulmuyor.
        Rozetler ve KVKK etiketi px oldugu icin bu olcekten etkilenmez.  */
    font-size: 15px;
}

/* ------------------------------------------------------------ video.js skin */

.gp .video-js .vjs-control-bar {
    background: linear-gradient(to top, rgba(6, 9, 13, .92), rgba(6, 9, 13, .55) 60%, transparent);
    height: var(--gp-bar-h);
    padding: 0 .35em;
    bottom: var(--gp-furniture-h);
    /* Doviz seridi kapatilinca cubuk asagi iner — sicrama olmasin. */
    transition: bottom .28s ease;
}

/*  Simge, dugmenin icinde ortalanir. Eskiden sabit bir line-height ile
    hizalaniyordu; punto degisince o deger tutmaz, simge asagi kayardi.  */
.gp .video-js .vjs-button > .vjs-icon-placeholder::before {
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.gp .video-js .vjs-control:focus-visible { outline: 2px solid var(--gp-accent); outline-offset: -2px; }

.gp .video-js .vjs-play-progress,
.gp .video-js .vjs-volume-level { background-color: var(--gp-accent); }
.gp .video-js .vjs-play-progress::before { color: var(--gp-accent); }
.gp .video-js .vjs-slider { background-color: rgba(255, 255, 255, .25); }
.gp .video-js .vjs-load-progress > div { background: rgba(255, 255, 255, .18); }

.gp .video-js .vjs-menu li.vjs-selected,
.gp .video-js .vjs-menu li.vjs-menu-item:hover { background-color: var(--gp-accent); color: var(--gp-fore); }

/* Buyuk oynat tusu: yuvarlak, temaya boyali */
.gp .video-js .vjs-big-play-button {
    /*  Punto ACIKCA sabitleniyor: bu dugmenin olculeri px, ama icindeki simge
        em. Taban punto buyudugunde simge daireyi tasardi.  */
    font-size: 30px;
    width: 78px;
    height: 78px;
    line-height: 78px;
    border-radius: 50%;
    border: none;
    background-color: var(--gp-accent);
    color: var(--gp-fore);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
    top: 50%;
    left: 50%;
    /*  video.js tusu KENDI iskeletinde negatif margin ile ortaliyor
        (-1.5em / -0.81666em). Biz transform ile ortaladigimiz icin iki yontem
        ust uste biniyor ve tus 45px sola, 24px yukari kayiyordu (olculdu).
        Margin sifirlaniyor; ortalama tek yerden, transform'dan geliyor.  */
    margin: 0;
    transform: translate(-50%, -50%);
    transition: transform .18s ease, filter .18s ease;
}
.gp .video-js:hover .vjs-big-play-button { filter: brightness(1.08); transform: translate(-50%, -50%) scale(1.04); }
.gp .video-js .vjs-big-play-button .vjs-icon-placeholder::before { line-height: 78px; font-size: 2.4em; }

/* ------------------------------------------------------------- durum ekrani */

.gp-status {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gp-veil);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    pointer-events: none; /* KURAL 4 — asla tiklama yutma */
}
.gp-status.is-visible { opacity: 1; visibility: visible; }

.gp-status__box { text-align: center; padding: 1.25rem 1.5rem; max-width: 88%; }

.gp-status__title {
    color: #fff;
    font-size: clamp(13px, 2.1vw, 17px);
    font-weight: 600;
    letter-spacing: .01em;
}
.gp-status__hint {
    color: rgba(255, 255, 255, .66);
    font-size: clamp(11px, 1.7vw, 13px);
    margin-top: .35rem;
    line-height: 1.45;
}

.gp-status__spinner { display: none; justify-content: center; gap: 6px; margin-bottom: .85rem; }
.gp-status.is-spinning .gp-status__spinner { display: flex; }
.gp-status__spinner span {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--gp-accent);
    animation: gp-bounce 1.1s infinite ease-in-out;
}
.gp-status__spinner span:nth-child(2) { animation-delay: .14s; }
.gp-status__spinner span:nth-child(3) { animation-delay: .28s; }

@keyframes gp-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .45; }
    40% { transform: translateY(-9px); opacity: 1; }
}

/* --------------------------------------------------------------- bindirmeler */

.gp-logo, .gp-bottom, .gp-title, .gp-live, .gp-weather, .gp-marquee { pointer-events: none; }

.gp-logo { position: absolute; top: 12px; z-index: 4; max-width: 22%; }
.gp-logo--lt { left: 12px; }
.gp-logo--rt { right: 12px; }
.gp-logo img { display: block; width: auto; max-width: 100%; max-height: 56px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }

/*  CANLI rozeti + baslik: sol altta, tek serit halinde.
    Baslik eskiden ust-ortada duruyordu; kameranin kendi damgasiyla (saat, ad)
    carpisiyordu. Simdi rozetle ayni cizgide ve ayni chip gorunumunde.  */
/*  z-index 6: durum ekraninin (gp-status, z-index 5) USTUNDE. Serit altinda
    kalinca yayin gelmeyen kamerada rozetler ve ozellikle oynatma listesinin
    kamera dugmesi orti perdenin altinda soluklasip erisilemez GORUNUYORDU
    (tiklama geciyordu ama izleyici dugmeyi pasif saniyordu). Oysa yayin
    acilmadiginda en cok gereken sey baska bir kameraya gecebilmek.  */
.gp-bottom {
    position: absolute; left: 12px; right: 12px; z-index: 6;
    bottom: calc(var(--gp-furniture-h) + var(--gp-bar-h) + 8px);
    display: flex; align-items: center; gap: 7px;
    /*  Kontrol cubugu gizlenince asagi kayar — gecis yumusak olsun.  */
    transition: bottom .28s ease;
}

/*  Kontrol cubugu gizliyken serit onun biraktigi bosluga iner. Kosul, video.js'in
    cubugu gizlerken kullandigi kosulun AYNISI; boylece ikisi hep birlikte hareket
    eder ve altta bicimsiz bir bosluk kalmaz.  */
.gp .video-js.vjs-has-started.vjs-user-inactive.vjs-playing .gp-bottom {
    bottom: calc(var(--gp-furniture-h) + 8px);
}

/*  Hareket azaltma tercihi olan izleyicide kaydirma yapilmaz.  */
@media (prefers-reduced-motion: reduce) {
    .gp-bottom { transition: none; }
}

/*  Alt seritteki rozetlerin ORTAK dili. Uc yerde kullaniliyor: CANLI rozeti,
    kamera adi ve oynatma listesinin kamera secici dugmesi (o dugme baska bir
    dosyada ama ayni sinifi taşır). Tek tanim olsun ki biri degisince digerleri
    geride kalmasin.  */
/*  Ikinci secici video.js icin: kendi sifirlamasinda ".video-js button {
    font: inherit }" var ve bu, tek sinifli .gp-chip kuralini yener — chip bir
    dugmeye takildiginda puntosu kayardi.  */
.gp-chip,
.gp .video-js button.gp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0;
    padding: 3px 9px; border-radius: 999px;
    /*  Zemin bir degiskenden geliyor: kullanan taraf (ornegin secici dugmesinin
        "uzerine gelince" ve "acikken" hali) rengi secici savasina girmeden
        degistirebilsin diye.  */
    background: var(--gp-chip-bg, rgba(9, 12, 16, .74));
    color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.45;
}

/*  Baslik chip'i: uzun kamera adlari seridi tasirmasin diye kisalir, rozet
    sabit kalir.  */
.gp-title { flex: 0 1 auto; }
.gp-title span {
    display: block; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* CANLI rozeti — yayin oynarken gorunur */
.gp-live {
    flex: 0 0 auto;
    display: none;
    letter-spacing: .06em;
}
.gp--live[data-gp-state="playing"] .gp-live { display: inline-flex; }
.gp-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff2d46; animation: gp-blink 1.4s infinite; }
@keyframes gp-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Kayan altyazi — en altta, kontrol cubugunun ALTINDA */
.gp-marquee {
    position: absolute; left: 0; right: 0; bottom: var(--gp-exchange-h); z-index: 3;
    transition: bottom .28s ease;
    height: var(--gp-marquee-h);
    display: flex; align-items: center; overflow: hidden;
    background: color-mix(in srgb, var(--gp-accent) 82%, black);
}
.gp-marquee__track {
    display: inline-flex; gap: 2.5rem; white-space: nowrap; flex: 0 0 auto;
    padding-right: 2.5rem;
    color: var(--gp-fore);
    font-size: 13px; font-weight: 500;
    animation: gp-marquee 32s linear infinite;
}
.gp-marquee__track a { color: var(--gp-fore); text-decoration: none; }
@keyframes gp-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.gp--has-marquee { --gp-marquee-h: 30px; }

/*  Doviz seridinin yuksekligi. Izleyici seridi kapatinca sifirlanir ve
    ustundeki butun katmanlar bu tek degisiklikle asagi iner.  */
.gp--has-exchange { --gp-exchange-h: 50px; }
.gp--exchange-off { --gp-exchange-h: 0px; }

/*  HAVA DURUMU — iki grup: solda yer + hava, sagda sicaklik + nem.
    Koyu bir rozetin icinde degil, dogrudan goruntunun uzerinde duruyor; bu
    eski gomlemenin gorunumu ve musteri onu taniyor. Okunurlugu zemin yerine
    golge sagliyor, boylece goruntuden daha az yer kapatiyor.  */
.gp-weather {
    position: absolute; left: 12px; right: 12px; z-index: 4;
    /* Rozet satirinin BIR USTUNDE; ikisi birlikte inip kalkiyor. */
    bottom: calc(var(--gp-furniture-h) + var(--gp-bar-h) + 8px + var(--gp-chip-row-h));
    display: flex; align-items: flex-end; gap: 10px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .6);
    transition: bottom .28s ease;
}
.gp-weather:empty { display: none; }
.gp-weather[hidden] { display: none; }

.gp .video-js.vjs-has-started.vjs-user-inactive.vjs-playing .gp-weather {
    bottom: calc(var(--gp-furniture-h) + 8px + var(--gp-chip-row-h));
}

/*  Gruplarin zemini rozetlerle ayni: goruntu acik ya da karisikken (kar, gokyuzu,
    beyaz duvar) tek basina golge yetmiyordu.  */
.gp-weather__group {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 4px 10px; border-radius: var(--gp-radius);
    background: rgba(9, 12, 16, .74);
}
/* Sag grup sona yanasir; arada kalan bosluk esnek. */
.gp-weather__group--right { margin-left: auto; text-align: right; }
.gp-weather__icon { width: 52px; height: 52px; flex: 0 0 auto; }
/* Sicaklik simgesi daha dar cizilmis; ayni optik boyut icin biraz kucuk. */
.gp-weather__icon--temp { width: 40px; height: 40px; }
.gp-weather__lines { min-width: 0; line-height: 1.25; }
.gp-weather__city {
    font-size: 13px; font-weight: 700; letter-spacing: .01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-weather__desc { font-size: 11px; font-weight: 500; opacity: .9; }
.gp-weather__num { font-size: 13px; font-weight: 600; white-space: nowrap; }
.gp-weather__close { align-self: flex-start; }

/*  DOVIZ SERIDI — yiginin EN ALTI, goruntunun uzerine biner.
    Eskiden player'in ALTINDA akis icinde bir kutuydu: kapsayici tasinca (ya da
    oynatici tum yuksekligi kaplayinca) gomleme kutusunun disinda kaliyor ve
    hic gorunmuyordu. Artik yerlesimi yigin degiskeni belirliyor.  */
.gp-exchange {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    height: var(--gp-exchange-h);
    overflow: hidden;
    background: rgba(6, 9, 13, .82);
}
.gp-exchange[hidden] { display: none; }
/*  TradingView kendi telif satirini basiyor; 50px'lik seritte ikinci satira
    yer yok ve zaten widget'in kendi baglantilari duruyor.  */
.gp-exchange .tradingview-widget-copyright { display: none !important; }
.gp-exchange__close { position: absolute; top: 3px; right: 5px; z-index: 2; }

/*  KAPATMA DUGMESI — hava durumu ve doviz seridi icin ortak.
    Ikinci secici video.js'in ".video-js button { font: inherit }" sifirlamasi
    icin: tek sinifli kural onu yenemiyor.  */
.gp-x,
.gp .video-js button.gp-x {
    pointer-events: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(9, 12, 16, .74); color: #fff;
    font-size: 15px; font-weight: 400; line-height: 1;
    cursor: pointer; opacity: .8;
    transition: opacity .15s ease, background .15s ease;
}
.gp-x:hover { opacity: 1; background: rgba(9, 12, 16, .95); }
.gp-x:focus-visible { outline: 2px solid var(--gp-accent); outline-offset: 2px; }

/*  Kapatilan seridi geri getiren rozetler — yalnizca simge, metin yok.  */
.gp-chip--icon,
.gp .video-js button.gp-chip--icon { padding: 3px 7px; cursor: pointer; border: 0; }
.gp-chip--icon[hidden],
.gp .video-js button.gp-chip--icon[hidden] { display: none; }
.gp-chip--icon svg { width: 14px; height: 14px; display: block; }
.gp-chip--icon:hover { --gp-chip-bg: rgba(9, 12, 16, .95); }
.gp-chip--icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------------------ mobil */

@media (max-width: 520px) {
    .gp-weather { gap: 6px; }
    .gp-weather__icon { width: 38px; height: 38px; }
    .gp-weather__icon--temp { width: 30px; height: 30px; }
    .gp-weather__city { font-size: 12px; }
    .gp-weather__num { font-size: 11px; }
    .gp-logo img { max-height: 38px; }
    .gp .video-js .vjs-big-play-button { width: 60px; height: 60px; line-height: 60px; }
    .gp .video-js .vjs-big-play-button .vjs-icon-placeholder::before { line-height: 60px; font-size: 2em; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    .gp-marquee__track { animation: none; }
    .gp-status__spinner span { animation: none; }
    .gp-live i { animation: none; }
}

/* --------------------------------------------------------------------- kvkk */

/*  Dugme kontrol cubugunun ICINDE duruyor (bkz. galata-player.js _buildKvkk).
    Bindirme olsaydi pointer-events:none kuralina takilir, ustelik logo sag-altta
    secildiginde uzerine binerdi.  */
.gp .video-js .vjs-control-bar .gp-kvkk-btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    height: 100%; padding: 0 .5em;
    border: 0; background: none; cursor: pointer;
    color: #fff; font: inherit;
}
.gp .video-js .vjs-control-bar .gp-kvkk-btn > span {
    background: var(--gp-accent);
    color: var(--gp-fore);
    /*  Cubuk buyudu; etiket 11px kalsaydi yanindaki simgelerin yaninda kaybolurdu.  */
    font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1;
    padding: .35em .55em; border-radius: 4px;
    white-space: nowrap;
}
.gp .video-js .vjs-control-bar .gp-kvkk-btn:hover > span { filter: brightness(1.15); }
.gp .video-js .vjs-control-bar .gp-kvkk-btn:focus-visible { outline: 2px solid var(--gp-accent); outline-offset: -2px; }

/*  Kutu body'ye eklenir; gomleme iframe icinde oldugu icin "fixed" iframe'i kaplar.

    DIKKAT: display:flex, tarayicinin [hidden] -> display:none kuralini EZER (sinif
    secici daha guclu). O yuzden gizleme kurali ACIKCA yaziliyor; yazilmazsa kutu
    kapatildiktan sonra gorunmez ama TIKLAMALARI YUTMAYA devam eder ve player
    kullanilamaz hale gelir.  */
.gp-kvkk[hidden] { display: none; }

.gp-kvkk {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .62);
    /*  Kutu <body>'ye ekleniyor ve gomleme sayfasinin govdesinde yazi tipi
        tanimli degil; belirtilmezse tarayicinin varsayilan SERIF yazi tipiyle
        cikiyordu.  */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.gp-kvkk__panel {
    position: relative;
    /*  border-box SART: bu sayfada global bir box-sizing sifirlamasi yok. content-box
        iken max-height yalnizca ICERIGE uygulaniyor, 22+22px dikey dolgu bunun
        USTUNE binip panel gorunum alanini tam 44px tasiyordu.  */
    box-sizing: border-box;
    width: 100%; max-width: 620px;
    /*  Kucuk gomlemelerde (ornegin 320x180) da okunabilir kalsin: yukseklik
        gorunum alanina gore sinirli, icerik kendi icinde kayar.  */
    /*  Yukseklik ACIKCA vh ile sinirlanir. 86vh yanlisti (kapsayicinin 16px dolgusu
        bunun DISINDA kalip toplami tasiriyordu); "100%" ise hic sinirlamadi — yuzde
        max-height bu yerlesimde beklendigi gibi cozulmuyor, panel 640x360 gomlemede
        372px kaliyordu. calc(100vh - 32px) dolguyu dusen ve olculen tek bicim.
        Gomleme iframe icinde oldugu icin vh = iframe yuksekligi.  */
    max-height: calc(100vh - 32px);
    /*  Panelin KENDISI kaymaz: baslik sabit kalsin diye kayma yalnizca govdede.  */
    overflow: hidden;
    display: flex; flex-direction: column;
    background: rgba(255, 255, 255, .85);
    /*  Zemin yari saydam; arkasindaki goruntu bulaniklastirilmazsa metin
        okunmuyor. Destegi olmayan tarayicida da %85 beyaz yeterli kaliyor.  */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #222;
    border-radius: 10px;
    padding: 20px 22px;
    box-shadow: 0 14px 46px rgba(0, 0, 0, .4);
    font-size: 13px; line-height: 1.55;
}
/*  Odak panele programla veriliyor; halka gosterilmesi gereksiz.  */
.gp-kvkk__panel:focus { outline: none; }

/*  Baslik SABIT: panelin kayan kismi yalnizca govde.  */
.gp-kvkk__title {
    flex: 0 0 auto;
    margin: 0 0 12px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    font-size: 15px; font-weight: 700; letter-spacing: .01em;
}
.gp-kvkk__body {
    flex: 1 1 auto;
    /*  min-height: 0 olmadan esnek oge icerigi kadar uzar ve panel tasar.  */
    min-height: 0;
    overflow-y: auto;
    padding-right: 10px;
    /*  Ince kaydirma cubugu — Firefox.  */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .26) transparent;
    overscroll-behavior: contain;
}
/*  ...ve WebKit/Blink.  */
.gp-kvkk__body::-webkit-scrollbar { width: 6px; }
.gp-kvkk__body::-webkit-scrollbar-track { background: transparent; }
.gp-kvkk__body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .22); border-radius: 999px;
}
.gp-kvkk__body::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .38); }
.gp-kvkk__body > *:first-child { margin-top: 0; }
.gp-kvkk__body h6 { font-size: 13px; margin: 14px 0 4px; }
.gp-kvkk__body p { margin: 0 0 10px; }
.gp-kvkk__body hr { border: 0; border-top: 1px solid #e3e6ea; margin: 12px 0; }

/*  Onay dugmesi metnin en sonunda duruyor (bkz. _buildKvkk).  */
.gp-kvkk__ok {
    display: block; width: 100%;
    margin: 14px 0 2px; padding: 11px 16px;
    border: 0; border-radius: 8px;
    background: var(--gp-accent, #00b1ff);
    color: var(--gp-fore, #fff);
    font: inherit; font-weight: 700; line-height: 1.2;
    cursor: pointer;
    transition: filter .15s ease;
}
.gp-kvkk__ok:hover { filter: brightness(1.08); }
.gp-kvkk__ok:focus-visible { outline: 2px solid #111; outline-offset: 2px; }