/*!
 * Galata User — kullanici vitrin sayfalari
 *
 * Eski sayfa satin alinmis bir Bootstrap temasi uzerine kuruluydu (usercams.css +
 * categorycams.css + bootstrap + jQuery + lazysizes + modal). Burada hicbiri yok;
 * duz CSS ve ~120 satir JS.
 *
 * Iki gorunum var, ayni isaretlemeyi kullanirlar — fark yalnizca bu dosyada:
 *     .gu[data-view="grid"]   izgara: buyuk kapak gorselleri
 *     .gu[data-view="list"]   liste: satir satir, kucuk kapak + ayrinti
 */

.gu {
    --gu-accent: #00b1ff;
    --gu-bg: #0b0e12;
    --gu-card: #161b22;
    --gu-line: #232b35;
    --gu-text: #e6edf3;
    --gu-muted: #8b9bab;
    --gu-radius: 12px;

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

.gu a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------- arka plan gorseli */

/*  Kategori secilince tanitim gorselleri arkada yavasca degisir.
    Icerigin okunurlugu her zaman once gelir: uzerine koyu bir perde koyuyoruz. */
.gu-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.gu-bg img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.2s ease;
}
.gu-bg img.is-on { opacity: 1; }
.gu-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(11, 14, 18, .82), rgba(11, 14, 18, .94));
}
.gu--has-bg { background: transparent; }
.gu__inner { position: relative; z-index: 1; }

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

.gu__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px 12px;
}
/*  contain + serbest genislik: buraya hem kare profil fotografi hem GENIS bir
    kurumsal logo gelebiliyor. Daire + cover ile kelime logolari kirpiliyor,
    okunmaz hale geliyordu.  */
.gu__logo {
    height: 40px; width: auto; max-width: 132px;
    object-fit: contain; flex: 0 0 auto;
    border-radius: 8px;
    background: var(--gu-card);
    padding: 3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.gu__titles { min-width: 0; }
.gu__title {
    margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gu__sub { margin: 2px 0 0; font-size: 12px; color: var(--gu-muted); }

/* --------------------------------------------------------- kategori cipleri */

/*  Eski sayfada kategori bir <select> idi; dokunmatikte kotu ve kac kamera
    oldugunu gostermiyordu. Cipler hem gorunur hem sayiyi tasiyor. */
.gu-cats {
    display: flex; gap: 8px; padding: 0 18px 10px;
    overflow-x: auto; scrollbar-width: none;
}
.gu-cats::-webkit-scrollbar { display: none; }
.gu-cat {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--gu-card); border: 1px solid var(--gu-line);
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.gu-cat:hover { border-color: var(--gu-accent); }
.gu-cat.is-on { background: var(--gu-accent); border-color: var(--gu-accent); color: #04222f; }
.gu-cat img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.gu-cat b {
    font-size: 11px; font-weight: 700; opacity: .65;
    padding-left: 2px;
}

/* ------------------------------------------------------------------ arac cubugu */

.gu-bar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    background: color-mix(in srgb, var(--gu-bg) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--gu-line);
}

.gu-search {
    position: relative; flex: 1 1 auto; min-width: 0; max-width: 340px;
}
.gu-search input {
    width: 100%; box-sizing: border-box;
    padding: 8px 30px 8px 32px;
    border-radius: 8px; border: 1px solid var(--gu-line);
    background: var(--gu-card); color: var(--gu-text);
    font: inherit; font-size: 13px;
}
.gu-search input::placeholder { color: var(--gu-muted); }
.gu-search input:focus { outline: none; border-color: var(--gu-accent); }
.gu-search svg {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; stroke: var(--gu-muted); fill: none; stroke-width: 2;
    pointer-events: none;
}
.gu-search__clear {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border: 0; border-radius: 5px;
    background: none; color: var(--gu-muted); cursor: pointer;
    font-size: 17px; line-height: 1;
}
.gu-search__clear:hover { background: var(--gu-line); color: var(--gu-text); }
.gu-search__clear[hidden] { display: none; }

.gu-bar__count { font-size: 12px; color: var(--gu-muted); white-space: nowrap; }
.gu-bar__spacer { flex: 1 1 auto; }

.gu-sort {
    padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--gu-line); background: var(--gu-card);
    color: var(--gu-text); font: inherit; font-size: 12.5px; cursor: pointer;
}
.gu-sort:focus { outline: none; border-color: var(--gu-accent); }

/*  Gorunum anahtari */
.gu-views { display: inline-flex; border: 1px solid var(--gu-line); border-radius: 8px; overflow: hidden; }
.gu-views button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 0; background: var(--gu-card); color: var(--gu-muted); cursor: pointer;
}
.gu-views button + button { border-left: 1px solid var(--gu-line); }
.gu-views button:hover { color: var(--gu-text); }
.gu-views button.is-on { background: var(--gu-accent); color: #04222f; }
.gu-views svg { width: 16px; height: 16px; fill: currentColor; }

/* -------------------------------------------------------------------- kartlar */

.gu-items { padding: 14px 18px 24px; }

.gu[data-view="grid"] .gu-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}
.gu[data-view="list"] .gu-items {
    display: flex; flex-direction: column; gap: 8px;
}

.gu-item {
    position: relative; display: block;
    background: var(--gu-card);
    border: 1px solid var(--gu-line);
    border-radius: var(--gu-radius);
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.gu-item:hover { transform: translateY(-2px); border-color: var(--gu-accent); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.gu-item:focus-visible { outline: 2px solid var(--gu-accent); outline-offset: 2px; }
.gu-item[hidden] { display: none; }

.gu-item__thumb {
    position: relative;
    background: #05070a;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.gu-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/*  Kucuk resim gelmezse (kamera hic yayin yapmamis olabilir) kirik gorsel
    ikonu yerine sade bir yer tutucu kalsin. */
.gu-item__thumb img.is-broken { opacity: 0; }

.gu-item__body { padding: 10px 12px; }
.gu-item__name {
    font-size: 13.5px; font-weight: 600; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gu-item__meta {
    margin-top: 4px; font-size: 11.5px; color: var(--gu-muted);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.gu-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 999px;
    background: rgba(4, 6, 9, .72);
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.gu-badge--live { color: #fff; }
.gu-badge--live i { width: 6px; height: 6px; border-radius: 50%; background: #ff2d46; animation: gu-blink 1.4s infinite; }
@keyframes gu-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.gu-badge--off { color: var(--gu-muted); }
.gu-badge--clip { color: var(--gu-text); }

/*  Izgarada rozetler kapak gorselinin uzerinde durur; listede satir icinde. */
.gu[data-view="grid"] .gu-item__thumb .gu-badge { position: absolute; top: 8px; left: 8px; }
.gu[data-view="grid"] .gu-item__thumb .gu-badge--clip { left: auto; right: 8px; }

/* Liste gorunumu: yatay satir */
.gu[data-view="list"] .gu-item {
    display: grid;
    grid-template-columns: 128px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px;
}
.gu[data-view="list"] .gu-item:hover { transform: none; }
.gu[data-view="list"] .gu-item__thumb { border-radius: 8px; }
.gu[data-view="list"] .gu-item__body { padding: 0; min-width: 0; }
.gu[data-view="list"] .gu-item__name { -webkit-line-clamp: 1; }
.gu[data-view="list"] .gu-item__side {
    display: flex; align-items: center; gap: 8px; padding-right: 6px;
}
.gu[data-view="grid"] .gu-item__side { display: none; }
.gu[data-view="list"] .gu-item__thumb .gu-badge { display: none; }

/*  Cok dar ekranda liste de tek sutuna duser (128px kapak + metin sigmaz). */
@media (max-width: 420px) {
    .gu[data-view="list"] .gu-item { grid-template-columns: 92px 1fr; }
    .gu[data-view="list"] .gu-item__side { display: none; }
}

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

.gu-empty {
    padding: 44px 18px; text-align: center; color: var(--gu-muted); font-size: 13px;
}
.gu-empty b { display: block; color: var(--gu-text); font-size: 14px; margin-bottom: 5px; }
.gu-empty[hidden] { display: none; }

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

/* --------------------------------------------------------------- alt sayfalar */

/*  Geri baglantisi — kamera, klip listesi ve klip sayfalarinin ustunde. */
.gu-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 9px; margin: 14px 18px 0;
    border-radius: 999px; border: 1px solid var(--gu-line);
    background: var(--gu-card); color: var(--gu-text);
    font-size: 12.5px; font-weight: 600;
}
.gu-back:hover { border-color: var(--gu-accent); }
.gu-back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/*  width:auto SART: player kapsayicisi .gp sinifini da tasiyor ve .gp { width:100% }
    yaziyor. Yuzde genislik kenar bosluklarindan ETKILENMEZ; 12px 18px margin ile
    birlikte sayfa tam 36px yatay tasiyor ve kaydirma cubugu cikiyordu.  */
.gu-player {
    margin: 12px 18px; width: auto;
    border-radius: var(--gu-radius); overflow: hidden; background: #000;
}

.gu-section { padding: 4px 18px 22px; }
.gu-section__title { font-size: 13px; font-weight: 700; margin: 0 0 10px; letter-spacing: .01em; }

/*  Gun secici — klip listesi */
.gu-days { display: flex; gap: 7px; padding: 0 18px 12px; overflow-x: auto; scrollbar-width: none; }
.gu-days::-webkit-scrollbar { display: none; }
.gu-day {
    flex: 0 0 auto; padding: 6px 12px; border-radius: 999px;
    background: var(--gu-card); border: 1px solid var(--gu-line);
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.gu-day:hover { border-color: var(--gu-accent); }
.gu-day.is-on { background: var(--gu-accent); border-color: var(--gu-accent); color: #04222f; }

/*  Klip kartlari — kamera kartlariyla ayni izgara, ama sure rozeti tasirlar. */
.gu-clips {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px; padding: 0 18px 24px;
}
.gu-clip__time { position: absolute; right: 8px; bottom: 8px; }

/*  Genel eylem dugmesi (ornegin "Kaydedilen klipler"). Adi eskiden gu-dl idi;
    indirme ozelligi kaldirilinca yaniltici hale geldi.  */
.gu-action {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 8px;
    background: var(--gu-accent); color: #04222f;
    font-size: 12.5px; font-weight: 700;
}
.gu-action:hover { filter: brightness(1.1); }
.gu-action svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }