/**
 * P7/B6 — arka plan CSS'i (OTOMATIK CIKARILDI: renderPageBackground).
 * Onceden bu ~90 satir HER istekte PHP icinde string uretiliyordu; ne
 * bicimlendirilebiliyor ne onbeleklenebiliyordu. Artik statik ve uzun
 * omurlu onbellekle servis ediliyor. .fp-* ogeleri olmadan etkisiz,
 * arka plani olmayan sayfada da zararsiz. Sayfayi etkileyen TEK kural
 * (html,body{background:transparent}) hala renderPageBackground icinde,
 * yalniz arka plan VARKEN basiliyor.
 */
  /* Klavye açılınca arka plan ne kaymalı ne ölçeklenmeli.
     Salt CSS ile ikisi birden olmuyor:
       - resizes-visual (varsayılan): fixed öğe layout viewport'a çakılı kalır,
         görünür alan yukarı kayınca arka plan gözden çıkar.
       - resizes-content: görünür alanda kalır ama viewport kısaldığı için
         cover görsel yeniden kırpılır → "yeri değişti" hissi.
     Çözüm: yükseklik JS ile bir kez sabitlenir (fpBgPin), sonra yalnızca
     translate ile görünür alana takip ettirilir. Yeniden boyutlanma yok →
     kırpma da yok. lvh, JS çalışmazsa makul bir başlangıç verir. */
  .fp-bg { position:fixed; top:0; left:0; width:100vw; height:100vh; height:100lvh;
           z-index:-2; overflow:hidden; background:#000; will-change:transform; }
  /* contain: görselin TAMAMI görünür, kırpılmaz (kullanıcı tercihi).
     cover denendi ve geri alındı — görseli kırpıyordu. */
  .fp-bg-media { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
  .fp-bg-img { background-size:contain; background-position:center; background-repeat:no-repeat; }
  .fp-bg-overlay { position:absolute; inset:0; z-index:1; }

  /* Video ses butonu */
  .fp-sound { --neon:#21f3ff; position:fixed; bottom:18px; left:18px; z-index:60; display:flex; align-items:center; gap:8px;
    padding:9px 16px; cursor:pointer; border-radius:999px; color:#eafdff; font:600 .82rem/1 'Space Grotesk',system-ui,sans-serif; letter-spacing:.4px;
    background:rgba(8,10,14,.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(33,243,255,.45); box-shadow:0 0 18px rgba(33,243,255,.3); transition:box-shadow .2s, transform .12s, border-color .2s; }
  .fp-sound:hover { transform:translateY(-1px); box-shadow:0 0 26px rgba(33,243,255,.55); }
  .fp-sound.on { border-color:rgba(57,255,20,.6); box-shadow:0 0 24px rgba(57,255,20,.5); }

  /* Mini müzik bar (siyah cam + neon) */
  .fp-music { --neon:#21f3ff; position:fixed; bottom:18px; right:18px; z-index:60; display:none; align-items:center; gap:10px;
    padding:8px 14px 8px 8px; max-width:min(80vw,300px); border-radius:999px; color:#eafdff;
    background:rgba(8,10,14,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(33,243,255,.45); box-shadow:0 0 18px rgba(33,243,255,.28); }
  .fp-music.ready { display:flex; }
  .fp-music-btn { flex:0 0 auto; width:40px; height:40px; border-radius:50%; cursor:pointer; color:#bff9ff; font-size:.95rem;
    display:flex; align-items:center; justify-content:center; border:1px solid rgba(33,243,255,.6);
    background:radial-gradient(circle at 30% 30%, rgba(33,243,255,.28), rgba(8,10,14,.2)); box-shadow:0 0 14px rgba(33,243,255,.4); transition:transform .12s, box-shadow .2s; }
  .fp-music-btn:hover { transform:scale(1.06); box-shadow:0 0 22px rgba(33,243,255,.7); }
  .fp-music.playing .fp-music-btn { animation:fp-pulse 1.6s ease-in-out infinite; }
  .fp-music-meta { display:flex; align-items:center; gap:9px; min-width:0; cursor:pointer; }
  .fp-mini-caret { color:rgba(191,249,255,.7); font-size:.7rem; flex:0 0 auto; }
  .fp-stop { flex:0 0 auto; width:24px; height:24px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:rgba(234,253,255,.8); font-size:.72rem; transition:background .15s, color .15s; }
  .fp-stop:hover { background:rgba(229,83,75,.25); color:#ffd9d5; border-color:rgba(229,83,75,.5); }
  .fp-eq { display:flex; align-items:flex-end; gap:2px; height:16px; width:18px; flex:0 0 auto; opacity:.35; }
  .fp-eq span { width:3px; height:30%; background:var(--neon); border-radius:2px; box-shadow:0 0 6px var(--neon); }
  .fp-music.playing .fp-eq { opacity:1; }
  .fp-music.playing .fp-eq span { animation:fp-eq .9s ease-in-out infinite; }
  .fp-music.playing .fp-eq span:nth-child(2){animation-delay:.15s}.fp-music.playing .fp-eq span:nth-child(3){animation-delay:.3s}.fp-music.playing .fp-eq span:nth-child(4){animation-delay:.45s}

  /* Kayan yazı (uzun isim) */
  .fp-marquee { overflow:hidden; white-space:nowrap; max-width:150px; }
  .fp-marq-inner { display:inline-flex; gap:42px; will-change:transform; }
  .fp-marq-inner span { flex:0 0 auto; font:600 .85rem/1.3 'Space Grotesk',system-ui,sans-serif; color:#eafdff; text-shadow:0 0 8px rgba(33,243,255,.45); }
  .fp-marq-inner.scroll { animation:fp-marq 11s linear infinite; }
  @keyframes fp-marq { from{transform:translateX(0)} to{transform:translateX(calc(-50% - 21px))} }

  /* Liquid glass genişletilmiş panel */
  .fp-player { position:fixed; right:18px; bottom:74px; z-index:70; width:min(92vw,360px);
    opacity:0; transform:translateY(16px) scale(.96); pointer-events:none; transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1); }
  .fp-player.open { opacity:1; transform:none; pointer-events:auto; }
  .fp-player-card { position:relative; overflow:hidden; padding:22px; border-radius:26px; color:#fff;
    background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
    backdrop-filter:blur(28px) saturate(170%); -webkit-backdrop-filter:blur(28px) saturate(170%);
    border:1px solid rgba(255,255,255,.18); box-shadow:0 10px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.28), 0 0 30px rgba(33,243,255,.16); }
  .fp-player-card::before { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:radial-gradient(130% 90% at 0% 0%, rgba(33,243,255,.20), transparent 55%); }
  .fp-close { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; cursor:pointer;
    border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#eafdff; display:flex; align-items:center; justify-content:center; }
  .fp-close:hover { background:rgba(255,255,255,.16); }
  .fp-art { position:relative; width:84px; height:84px; margin:6px auto 16px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#9bf6ff;
    background:radial-gradient(circle at 30% 25%, rgba(33,243,255,.4), rgba(8,10,14,.25)); border:1px solid rgba(33,243,255,.45); box-shadow:0 0 26px rgba(33,243,255,.35); }
  .fp-player.playing .fp-art { animation:fp-spin 7s linear infinite; }
  .fp-title-wrap { max-width:100%; text-align:center; margin-bottom:14px; }
  .fp-title-wrap .fp-marq-inner { justify-content:center; }
  .fp-title-wrap .fp-marq-inner span { font-size:1rem; }
  .fp-seek { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; cursor:pointer; outline:none; background:rgba(255,255,255,.18); }
  .fp-seek::-webkit-slider-thumb { -webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:#eafdff; box-shadow:0 0 10px rgba(33,243,255,.9); cursor:pointer; }
  .fp-seek::-moz-range-thumb { width:15px; height:15px; border:none; border-radius:50%; background:#eafdff; box-shadow:0 0 10px rgba(33,243,255,.9); cursor:pointer; }
  .fp-times { display:flex; justify-content:space-between; font:500 .72rem/1 'Space Grotesk',system-ui,sans-serif; color:rgba(234,253,255,.75); margin:7px 2px 16px; }
  .fp-controls { display:flex; align-items:center; justify-content:center; gap:22px; }
  .fp-ctrl { width:46px; height:46px; border-radius:50%; cursor:pointer; color:#eafdff; font-size:1rem; display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); transition:transform .12s, background .15s, box-shadow .2s; }
  .fp-ctrl:hover { background:rgba(255,255,255,.16); transform:scale(1.07); }
  .fp-play-main { width:60px; height:60px; font-size:1.35rem; color:#04121a; border:none; background:linear-gradient(135deg,#7df9ff,#21f3ff); box-shadow:0 0 24px rgba(33,243,255,.7); }
  .fp-play-main:hover { box-shadow:0 0 32px rgba(33,243,255,.95); }

  @keyframes fp-eq { 0%,100%{height:25%} 50%{height:100%} }
  @keyframes fp-pulse { 0%,100%{box-shadow:0 0 14px rgba(33,243,255,.4)} 50%{box-shadow:0 0 26px rgba(33,243,255,.85)} }
  @keyframes fp-spin { to{transform:rotate(360deg)} }
  @media (max-width:600px){ .fp-player{ right:10px; left:10px; width:auto; } .fp-marquee{ max-width:120px; } .fp-sound-txt{ display:none } }
  @media (prefers-reduced-motion:reduce){ .fp-marq-inner.scroll,.fp-music.playing .fp-music-btn,.fp-music.playing .fp-eq span,.fp-player.playing .fp-art{ animation:none } }