@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  --font-ui: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-body: 'Roboto', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: Consolas, 'Courier New', monospace;
  --accent: #59a9f5;
  --panel-bg: #f3f5f7;
  --bar-h: 72px;
}

* { box-sizing: border-box; }

html {
  background: #0b0c0e; /* video yüklenene kadar fallback zemin */
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  font-family: var(--font-body);
  font-weight: 500;
  overflow-x: hidden;
}

/* body'ye OPAK arka plan vermeyin: arkaplan videosu düşük z-index'te
   duruyor; body opak olursa videoyu tamamen örter (bkz. .bg-video notu). */
body { color: #f2f3f5; background: transparent; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- Arkaplan videosu ----------
   Karartma + blur videonun kendi dosyasına gömülü (bkz. README §3).
   ÖNEMLİ 1: Video en dipte (z-index:0) duruyor, TÜM içerik onun üstünde
   katmanlanıyor (.desktop / .page-shell z-index:1, .explorer-bar z-index:10,
   popup z-index:100). body'ye OPAK arka plan verilmemeli, yoksa videoyu örter.
   (Bu, videoyu 'z-index:-1 + opak body' ile örten önceki hatanın düzeltmesi.)
   ÖNEMLİ 2: Bu videoyu barındıran sayfalarda HİÇBİR yerde `filter` veya
   `backdrop-filter` kullanmayın (videonun üstünde, bir overlay div'inde ya da
   alakasız başka bir elementte bile) — test edilen Chromium sürümlerinde
   videoyu görünmez yapıyor. Karartma/blur değişecekse videoyu ffmpeg ile
   yeniden işleyin, CSS'e filter eklemeyin. */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Video üzerine koyu katman: videoyu koyulaştırır ve soluklaştırır (opaklık
   hissini azaltır) — bu bir renk katmanı, `filter` DEĞİL, o yüzden videoyu
   görünmez yapan compositing sorununu tetiklemez. Karartmayı artırmak/azaltmak
   için sadece alttaki alpha (0.55) değerini değiştir. Bu katman videonun
   üstünde (z-index:1) ama tüm içeriğin altında (içerik z-index:2+). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 12, 0.55);
  z-index: 1;
  pointer-events: none;
}

/* ---------- Windows Gezgini tarzı üst adres çubuğu ---------- */
.explorer-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bar-h);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  /* backdrop-filter KULLANMAYIN: bu bar videonun DOĞRUDAN üstünde duruyor
     (arkasında gerçekten video var), o senaryoda blur videoyu görünmez
     kılıyor — bkz. .bg-video notu ve README §3. */
  background: rgba(15, 16, 19, 0.78);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.explorer-nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: transparent;
  opacity: .4;
  cursor: default;
}

.explorer-nav.active {
  opacity: .85;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}

.explorer-nav.active:hover { background: rgba(255,255,255,.12); opacity: 1; }
.explorer-nav img { width: 18px; height: 18px; filter: brightness(0) invert(1); }

.explorer-icon { flex: none; width: 25px; height: 25px; }

.explorer-path {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 600;
  color: #d7d9dc;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explorer-path a { opacity: .8; transition: opacity .15s ease; }
.explorer-path a:hover { opacity: 1; text-decoration: underline; }
.explorer-path .sep { opacity: .4; }
.explorer-path .current { color: #fff; }

/* ---------- Masaüstü ---------- */
.desktop {
  position: relative;
  z-index: 2; /* video (0) ve karartma katmanının (1) üstünde kalsın */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  /* Sabit (vh'a bağlı olmayan) az bir boşluk: büyük vh tabanlı padding, büyütülmüş
     ikonlarla birleşince gereksiz kaydırma çubuğuna ve ortalamanın bozulmasına
     yol açıyordu — bkz. Polat'ın geri bildirimi. */
  padding: calc(var(--bar-h) + 28px) 6vw 28px;
  gap: 30px;
}

/* Grid + ok'u saran kap. Ok bunun içinde MUTLAK konumlu duracağı için
   (bkz. .expand-arrow-row) yalnızca grid'in yüksekliği kadar yer kaplar —
   ok gizlenince ortalama kaymaz. */
.grid-wrap {
  position: relative;
}

.folder-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(132px, 178px));
  gap: 32px 40px;
  justify-content: center;
}

/* Ok'u tutan satır: grid'in tam altında (top:100%), akışın DIŞINDA. Böylece
   ok gösterilip gizlenmesi grid'in konumunu etkilemez -> zıplama olmaz. */
.expand-arrow-row {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding-top: 12px;
  pointer-events: none; /* boş yan alanlar tıklamayı yakalamasın */
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Simge (klasör) ---------- */
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
  opacity: 0;
  animation: iconIn .5s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes iconIn {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.icon-item:hover { transform: translateY(-4px); }
.icon-item:active { transform: translateY(-1px) scale(.97); }

.icon-visual {
  position: relative;
  width: 116px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
  transition: filter .25s ease;
}

.icon-item:hover .icon-visual { filter: drop-shadow(0 10px 20px rgba(0,0,0,.45)); }

.icon-visual > img { width: 100%; height: 100%; }

/* ---- Klasör içi görseller (Eklentiler.png tarzı, katmanlı) ---- */
.icon-visual.has-images { overflow: visible; }

.folder-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.folder-back { z-index: 1; }
.folder-front { z-index: 3; }

.folder-contents {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.folder-photo {
  position: absolute;
  display: block;
  height: auto;
  border-radius: 8%;
  transform-origin: 50% 100%;
  object-fit: cover;
}

.icon-shortcut-badge {
  position: absolute;
  left: -6px;
  bottom: -6px;
  width: 26px;
  height: 26px;
  pointer-events: none;
}

.icon-label {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.25;
  padding: 3px 9px;
  border-radius: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,.65);
  transition: background-color .2s ease;
}

.icon-item:hover .icon-label,
.icon-item:focus-visible .icon-label {
  background-color: rgba(89, 169, 245, .35);
  outline: 1px solid rgba(255,255,255,.25);
}

.icon-item:focus-visible { outline: none; }

/* ---------- Genişlet oku (çerçevesiz, sadece ok görünür) ---------- */
.expand-arrow {
  background: transparent;
  border: none;
  padding: 11px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto; /* satır pointer-events:none, buton yeniden aktif */
  opacity: .65;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
  animation: arrowBob 2.6s ease-in-out infinite;
}

.expand-arrow:hover { opacity: 1; }
.expand-arrow:active { transform: scale(.9); }

.expand-arrow img {
  width: 36px;
  height: 22px;
}

.expand-arrow.hide {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(.9);
  animation: none;
}

@keyframes arrowBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---------- Popup (Not Defteri tarzı) ---------- */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 5, 7, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  padding: 20px;
}

.popup-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.popup-window {
  width: min(640px, 100%);
  height: min(66vh, 620px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  /* Arka plan ŞEFFAF: üst bar (popup-titlebar) yarı-saydam olduğunda arkasındaki
     (ffmpeg ile blurlanmış) arkaplan videosu görünsün, ana sayfadaki mpolat yazısı
     gibi koyu-cam bir bar oluşsun. Menü çubuğu ve gövde kendi opak zeminlerini
     taşıdığı için metin okunabilirliği bozulmaz. */
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 4px 18px rgba(0,0,0,.35);
  transform: scale(.9) translateY(14px);
  opacity: 0;
  transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .28s ease,
              width .32s cubic-bezier(.22,1,.36,1), height .32s cubic-bezier(.22,1,.36,1),
              border-radius .32s ease;
}

.popup-overlay.visible .popup-window {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.popup-titlebar {
  /* Yarı-saydam koyu bar: pencere arka planı şeffaf olduğu için (bkz. .popup-window)
     bunun arkasında zaten BLURLANMIŞ arkaplan videosu görünür — ana sayfadaki
     mpolat yazısının koyu/saydam arkaplanı gibi. backdrop-filter KULLANILMIYOR:
     video zaten blurlu olduğundan gerek yok, ayrıca video doğrudan arkada
     olduğundan blur eklemek videoyu görünmez yapma riskini getirir (bkz. .bg-video).
     Karartmayı azaltmak/artırmak için sadece alttaki alpha (0.5) değerini değiştir. */
  background: rgba(14, 16, 20, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 10px;
  flex: none;
}

.popup-icon { width: 16px; height: 16px; }

.popup-title {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: #f1f2f4;
  flex: 1;
}

.popup-controls { display: flex; gap: 2px; }

.ctrl-btn {
  width: 34px;
  height: 25px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color .15s ease;
}

.ctrl-btn img { width: 15px; height: 15px; filter: brightness(0) invert(1); }
.ctrl-btn:hover { background: rgba(255,255,255,.14); }
.ctrl-btn.ctrl-close:hover { background: #e0433d; }

.popup-menubar {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: #4b4f56;
  background: #e9ebee;
  padding: 6px 14px;
  display: flex;
  gap: 18px;
  border-bottom: 1px solid #d6d9dd;
  flex: none;
}

.popup-body {
  flex: 1;
  overflow-y: auto;
  border: none;
  outline: none;
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.7;
  color: #23262b;
  background: #ffffff;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}

/* Notlar popup'ında son satır — görünüşte metnin devamıymış gibi, gerçekte
   yazılabilir bir <input> (bkz. main.js renderNotlarPopup). */
.popup-notlar-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.7;
  color: #23262b;
}
.popup-notlar-input::placeholder { color: #9aa0aa; }

.popup-link {
  color: #1a6fd1;
  text-decoration: underline;
  cursor: pointer;
}
.popup-link:hover { color: #0d4ea6; }

.popup-window.maximized {
  width: calc(100vw - 56px);
  height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  border-radius: 16px;
}

/* ---------- Yönlendirme geçişi ---------- */
.desktop.leaving { animation: leaveFade .28s ease forwards; }
@keyframes leaveFade { to { opacity: 0; transform: scale(.98); } }

/* ---------- Alt sayfalar (boş içerik) ---------- */
.page-shell {
  position: relative;
  z-index: 2; /* video (0) ve karartma katmanının (1) üstünde kalsın */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--bar-h) + 24px) 6vw 24px;
}

.page-panel {
  width: 100%;
  max-width: 980px;
  min-height: 55vh;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  animation: fadeSlideIn .5s ease both;
}

/* ---------- Duyarlılık ---------- */
@media (max-width: 640px) {
  :root { --bar-h: 52px; } /* küçük ekranlarda masaüstü büyütmesi uygulanmaz */
  /* Masaüstünde dikey ortalama (justify-content:center) güzel duruyordu ama
     mobilde uzun/dar ekranlarda üstte büyük bir boşluk bırakıyordu (bkz.
     Polat'ın işaretlediği ekran görüntüsü) — mobilde üste yasla. */
  .desktop {
    justify-content: flex-start;
    padding-top: calc(var(--bar-h) + 14px);
  }
  .folder-grid {
    grid-template-columns: repeat(3, minmax(96px, 122px));
    gap: 26px 14px;
  }
  .icon-visual { width: 88px; height: 88px; }
  .icon-label { font-size: 14.5px; }
  .explorer-bar { padding: 0 14px; gap: 8px; }
  .explorer-path { font-size: 12.5px; }
  .popup-window { height: 78vh; max-height: 90vh; }
  /* Mobilde dar/uzun ekran arkaplan videosunu farklı kırpıyor (object-fit:
     cover), bazen arkada olduğundan çok daha parlak bir kare düşüyor —
     yarı-saydam koyu bar (0.5 alpha) o zaman yeterince koyu görünmüyordu.
     Mobilde opaklığı artırıp bunu videonun içeriğinden bağımsız garantiye
     alıyoruz (hâlâ hafif saydam, ama okunaklı). */
  .popup-titlebar { background: rgba(10, 11, 14, 0.88); }
}

@media (max-width: 380px) {
  .folder-grid {
    grid-template-columns: repeat(2, minmax(110px, 140px));
    gap: 28px 18px;
  }
  .icon-visual { width: 96px; height: 96px; }
}

/* ============================================================
   Eklentiler (Pluginler) sayfası — düz siyah zemin + yavaş ışık
   dalgası + YouTube tarzı ürün kartları. Sadece bu sayfaya özel;
   <body class="plugins-page"> ile kapsam alınıyor.
   ============================================================ */
body.plugins-page { background: #000; }
/* Video karartma katmanı bu sayfada gereksiz (video yok) — kapat. */
body.plugins-page::after { display: none; }

/* Arkaplan: düz siyah + üstünde yavaşça gezen iki geniş ışık bandı.
   İki bant farklı hız ve açıda kayıp birbirinin üstünden geçince
   "dalga gibi parıltı" (shine ama dalga) hissi verir. filter/backdrop-filter
   YOK — sadece hareketli gradient, yani bir compositing riski taşımaz. */
.plugins-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #000;
  overflow: hidden;
  pointer-events: none;
}

.plugins-bg::before,
.plugins-bg::after {
  content: "";
  position: absolute;
  inset: -60%;
  will-change: transform;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(70, 100, 170, 0.10) 47%,
    rgba(120, 150, 220, 0.17) 50%,
    rgba(70, 100, 170, 0.10) 53%,
    transparent 62%
  );
  animation: pluginWave 22s ease-in-out infinite;
}

/* İkinci bant: daha yavaş, farklı açı — birinciyle kesişip dalga hissi verir. */
.plugins-bg::after {
  background: linear-gradient(
    68deg,
    transparent 40%,
    rgba(40, 80, 120, 0.08) 49%,
    rgba(90, 130, 190, 0.13) 50%,
    rgba(40, 80, 120, 0.08) 51%,
    transparent 60%
  );
  animation: pluginWave2 34s ease-in-out infinite;
}

@keyframes pluginWave {
  0%   { transform: translate3d(-22%, -14%, 0); }
  50%  { transform: translate3d(22%, 14%, 0); }
  100% { transform: translate3d(-22%, -14%, 0); }
}
@keyframes pluginWave2 {
  0%   { transform: translate3d(18%, 12%, 0); }
  50%  { transform: translate3d(-18%, -12%, 0); }
  100% { transform: translate3d(18%, 12%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .plugins-bg::before, .plugins-bg::after { animation: none; }
}

/* Kartların durduğu alan — grid dikeyde ekranın tam ortasında dursun diye
   flex sütunu + justify-content:center. Üstteki asimetrik padding, sabit üst
   barı hesaba katıp içeriği görsel olarak tam merkeze getirir. */
.plugins-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center; /* çok fazla kart olursa üstten taşıp kesilmesin */
  padding: calc(var(--bar-h) + 40px) 6vw 64px;
}

/* Flex + justify-content:center: her satır ortalanır, yani 5 kartta üstte 3 /
   altta 2 durur ve alttaki 2 kart ORTADA hizalanır (grid'de köşeye yaslanıyordu).
   max-width tam 3 kart (3×300 + 2×30 boşluk) sığacak kadar; 4. kart alta iner. */
.plugins-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px 32px;
}

/* YouTube videosu tarzı kart: 16:9 küçük görsel + altında (ortalanmış) isim */
.plugin-card {
  width: 350px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  animation: fadeSlideIn .5s ease forwards;
}

.plugin-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #111318;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
}

.plugin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}

.plugin-card:hover .plugin-thumb {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
}
.plugin-card:hover .plugin-thumb img { transform: scale(1.06); }
.plugin-card:focus-visible { outline: none; }
.plugin-card:focus-visible .plugin-thumb {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.plugin-meta { padding: 12px 4px 0; text-align: center; }

/* Bazı video/dosya isimleri boşluksuz TEK uzun kelime (örn. TikTok kimlik
   kodları) — bunlar normal kelime kaydırmayla satır kesmediği için kutudan
   taşıp komşu kartın üstüne biniyordu. En fazla 2 satır göster, taşarsa
   "..." ile kes; overflow-wrap:anywhere boşluk olmasa bile GEREKİRSE
   kelimenin ortasından satır kaydırmaya izin verip taşmayı garanti önler. */
.plugin-name {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  color: #f2f3f5;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.plugin-tag {
  margin-top: 3px;
  font-size: 13px;
  color: #8b929b;
}

@media (max-width: 640px) {
  .plugins-shell { padding: calc(var(--bar-h) + 24px) 5vw 44px; }
  .plugins-grid { max-width: 560px; gap: 22px 14px; }
  .plugin-card { width: calc(50% - 7px); }   /* telefonda 2 kart yan yana, ortalı */
  .plugin-name { font-size: 14px; }
}

/* Oynatıcıda (alt bar + kapatma oku) ve Müzikler sayfasının tamamında
   (playlist'ler, şarkı listesi, kapak, isim) metin seçimi kapalı — özellikle
   seek/ses çubuğunu sürüklerken ya da hızlı art arda tıklarken yanlışlıkla
   metin seçilip mavi/mor bir bloğa dönüşmesin diye. */
.player-bar,
.player-close-btn,
body.music-page .music-shell {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* ============================================================
   KALICI (KABUK) ALT PLAYER BARI — HER sayfanın HTML'inde var, #pageRoot'un
   DIŞINDA duruyor; pjax router bunu asla değiştirmiyor (bkz. main.js
   initPlayerShellOnce). Bu yüzden müzik, ana sayfaya dönünce dahil,
   kesintisiz çalmaya devam ediyor. Şarkı ismi ARTIK burada değil — müzikler
   sayfasında büyük kapağın altında gösteriliyor (bkz. .music-now-playing).
   Kontroller (önceki/oynat/sonraki) TAM ORTADA. İzlenen kısım mavi +
   parıltı (shimmer) animasyonlu bir gradyan. Hiç şarkı çalınmadıysa gizli
   durur (.active class'ı ile açılır).
   ============================================================ */
:root { --player-h: 96px; }

.player-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  background: rgba(13, 15, 19, .94);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: var(--player-h);
  box-sizing: border-box;
  padding: 0 24px;
  display: flex;
  align-items: stretch;
}
.player-bar.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Şarkı ismi: bar İÇİNDE ama MUTLAK konumlu (position:absolute) ve üst
   katmanda (z-index:2). Akışta yer kaplamadığı için ortadaki kontrolleri
   İTMEZ / onlarla ÇAKIŞMAZ — sadece soldaki boş alanın üstünde, barın tüm
   yüksekliği boyunca dikey ortalanmış olarak durur. pointer-events:none:
   altındaki (nadir de olsa denk gelen) kontrol tıklamalarını engellemesin. */
.player-nowplaying {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  z-index: 2;
  /* Seek çubuğu ekranın ortasında (max 640px, margin auto) durduğu için sol
     boşluk = 50vw - 320px. İsim, seek'in soluna kadar olan TÜM boşluğu
     kullanır (50vw - 360px; 24px sol + 16px pay düşülmüş): yer varsa isim tam
     görünür, yalnızca gerçekten sığmazsa "..." ile kesilir. Sabit bir üst
     sınır YOK — bu yüzden geniş ekranda uzun isimler de tam yazar. */
  max-width: calc(50vw - 360px);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.player-track-name-mini {
  display: block;
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
  color: #f2f3f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* .player-nowplaying'in tamamı pointer-events:none (barın altındaki
     tıklamaları engellemesin diye) — ismin kendisi burada yeniden AÇILIYOR ki
     tıklanınca Müzikler sayfasına gidip o şarkıya kaydırsın (bkz. main.js
     jumpToPlayingTrack). */
  pointer-events: auto;
  cursor: pointer;
}
.player-track-name-mini:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Tek çocuk: seekrow + controls-row üst üste, barın dikey ortasında. */
.player-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

/* Kontrol satırını seek çubuğuna biraz yaklaştır (azıcık yukarı). */
.player-controls-row { margin-top: -6px; }

.player-seekrow {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 1fr | auto | 1fr grid: ORTA sütun (prev/play/next) ekranın tam ortasında
   kalır — dolayısıyla üstteki (yine ekran-ortalı) seek çubuğuyla hizalıdır.
   Ses ayarı SAĞ sütuna, sola yaslı olarak konur: kontrollerin hemen sağında
   durur ama genişliğiyle ORTA sütunu itip play'i kaydırmaz. */
.player-controls-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.player-controls {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.player-volume {
  grid-column: 3;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
}


.player-btn {
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color .15s ease;
}
.player-btn:hover { background: rgba(255,255,255,.1); }
.player-btn img { width: 19px; height: 19px; }

/* Play/Duraklat düğmesi: büyük, mavi-beyaz GRADYANLI ve ANİMASYONLU yuvarlak
   (gradyan sürekli kayar — bkz. playBtnGradient). İçindeki üçgen artık
   düz BEYAZ ve daha büyük — renk/animasyon üçgende değil, düğmenin
   kendisinde. */
.player-btn-play {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eaf6ff, #2f7fe0, #7cc0ff, #1e63c2);
  background-size: 300% 300%;
  animation: playBtnGradient 4s ease infinite;
  transition: transform .15s ease;
}
.player-btn-play:hover { transform: scale(1.06); }
.player-btn-play .play-icon { width: 28px; height: 28px; }
.player-btn-play .icon-pause-shape { display: none; }
.player-btn-play.is-playing .icon-play-shape { display: none; }
.player-btn-play.is-playing .icon-pause-shape { display: block; }

@keyframes playBtnGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Ses düğmesi + sürüklenebilir seviye çubuğu ---- */
.volume-btn .volume-mute-x { display: none; }
.volume-btn.is-muted .volume-wave { display: none; }
.volume-btn.is-muted .volume-mute-x { display: block; }

.volume-track {
  position: relative;
  width: 76px;
  height: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  flex: none;
}
.volume-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.16);
}
.volume-fill {
  position: absolute;
  left: 0;
  height: 5px;
  border-radius: 3px;
  width: 100%;
  background: #7cc0ff;
}
.volume-thumb {
  position: absolute;
  left: 100%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transform: translateX(-50%);
}

/* ---- Barın sağında duran, çerçevesiz kapatma oku ---- */
.player-close-btn {
  position: fixed;
  right: 22px;
  bottom: calc(var(--player-h) / 2 - 16px);
  z-index: 31;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .82;
  transition: opacity .15s ease, transform .15s ease;
}
.player-close-btn:hover { opacity: 1; transform: translateY(-2px); }
body.player-active:not(.music-page) .player-close-btn { display: flex; }

.player-time {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: #b7bcc3;
  flex: none;
  width: 38px;
}
.player-time:last-child { text-align: right; }

/* Native <input type=range> yerine div tabanlı özel çubuk: izlenen kısmın
   (mavi) KENDİ genişliğine göre parlayan bir gradyanı sorunsuz taşıyabiliyor
   (native range'de "sadece dolu kısmı" animasyonlu boyamak güvenilir değil).
   Kalınlaştırıldı (4px -> 7px) okunabilirlik için. */
.seek-track {
  position: relative;
  flex: 1;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.seek-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 7px;
  border-radius: 3.5px;
  background: rgba(255,255,255,.16);
}
.seek-fill {
  position: absolute;
  left: 0;
  height: 7px;
  border-radius: 3.5px;
  width: 0%;
  background: linear-gradient(90deg, #2f7fe0, #7cc0ff, #2f7fe0);
  background-size: 200% 100%;
  animation: seekShimmer 2.2s linear infinite;
}
@keyframes seekShimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}
.seek-thumb {
  position: absolute;
  left: 0%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transform: translateX(-50%);
  transition: transform .1s ease;
}
.seek-track:hover .seek-thumb { transform: translateX(-50%) scale(1.2); }

@media (prefers-reduced-motion: reduce) {
  .seek-fill { animation: none; }
  .player-btn-play { animation: none; }
}

@media (max-width: 1024px) {
  /* Bu genişliğin altında sol boşluk isim için yeterince ferah değil (isim
     aşırı daralırdı) — gizliyoruz. Müzikler sayfasında isim zaten büyük
     kapağın altında da yazıyor, bilgi kaybı olmuyor. */
  .player-nowplaying { display: none; }
}
@media (max-width: 640px) {
  .player-bar { padding: 0 14px; }
  .player-volume { display: none; } /* mobilde yer kazanmak için ses ayarı gizli */
}

/* Bir şarkı çalınmaya başlayınca <body> bu class'ı alır. NOT: burada
   padding-bottom EKLEMİYORUZ — bu, toplam sayfa yüksekliğini 100vh'nin
   üzerine çıkarıp gereksiz bir dikey scrollbar'a yol açıyordu (ör. ana
   sayfada). Onun yerine, içeriği zaten min-height:100vh ile ortalayan
   kutuların minimum yüksekliğini player barı kadar KISALTIYORUZ — toplam
   belge boyu asla 100vh'yi geçmiyor, scrollbar çıkmıyor. Müzikler sayfası
   hariç: orası zaten kendi düzeninde player-h kadar yer ayırıyor.*/
body.player-active:not(.music-page) .desktop,
body.player-active .plugins-shell,
body.player-active .video-shell,
body.player-active .wallpaper-shell {
  min-height: calc(100vh - var(--player-h));
}

/* ============================================================
   Müzikler sayfası — eski Windows Media Player esintili tema, ÇERÇEVESİZ:
   sol tarafta İKİ ince sütun (playlist kapakları + seçili listenin
   şarkıları) doğrudan sayfa zemini üzerinde duruyor, kutulanmış bir panel
   YOK. Kalan alanda büyük kapak + hemen altında çalan şarkının adı ortada.
   ============================================================ */
body.music-page { background: #1a1d24; }
body.music-page::after { display: none; }

.music-shell {
  position: relative;
  z-index: 2;
  height: 100vh;
  box-sizing: border-box;
  padding: var(--bar-h) 0 var(--player-h);
  display: flex;
  overflow: hidden; /* iç sütunlar kendi overflow-y'sini yönetir, sayfa kaymasın */
}

/* Varsayılan: kapak, rail'den ARTAN alanı ortalıyor (basit flex). "Tam sayfa
   ortası" hesaplaması sadece yeterince geniş pencerelerde (bkz. aşağıdaki
   min-width:1300px grid'i) devreye giriyor — dar/orta pencerede rail'i
   dengelemek için ayrılan boşluk, genişliğin çok büyük bir kısmını kaplayıp
   kapağı sola yapışık gösteriyordu, o yüzden burada basit ve her zaman
   dengeli görünen bu davranış temel alınıyor. */
.music-app {
  --rail-w: 345px; /* playlist-rail(84) + song-rail(260) + kenarlık ~1px */
  /* position:relative (z-index YOK) .music-glow katmanlarının (position:absolute)
     üstünde boyanmasını DOM sırasıyla sağlıyor — açık bir z-index vermek yeni
     bir "stacking context" oluşturup mobildeki .playlist-rail'i (position:fixed,
     z-index:40) içine hapsediyor, bu da onu .playlist-drawer-backdrop'un altında
     bırakıp tıklamaları engelliyordu. */
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

/* Çalan şarkının kapak fotoğrafının ortalama rengine göre otomatik değişen,
   yavaş ve smooth bir arkaplan parıltısı (bkz. main.js setCoverGlow). İki
   katman (A/B) var: renk değişince yeni renk GÖRÜNMEYEN katmana basılıp
   opacity ile üste getiriliyor — CSS "background" gradyanı doğrudan
   interpolate edilemediği için çapraz geçiş bu şekilde smooth oluyor. */
.music-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.6s ease;
}
.music-glow.active { opacity: 1; }

.music-left {
  flex: none;
  display: flex;
  height: 100%;
  border-right: 1px solid rgba(255,255,255,.07);
}

/* ---- Sol dar sütun: SADECE playlist kapakları, hiç yazı yok ---- */
.playlist-rail {
  width: 84px;
  flex: none;
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
}

.playlist-item {
  position: relative;
  width: 56px;
  height: 56px;
  border: none;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  flex: none;
}

.playlist-cover {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(145deg, #3a4150, #1f232b);
  position: relative;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color .15s ease, transform .15s ease;
}
.playlist-item:hover .playlist-cover { transform: scale(1.06); }
.playlist-item.active .playlist-cover { outline-color: #2f7fe0; }

.playlist-cover img { width: 100%; height: 100%; object-fit: cover; display: none; } /* JS onload ile görünür yapılır */
.playlist-cover-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  color: #7c8797;
}
.playlist-cover.no-cover .playlist-cover-fallback { display: flex; }
.playlist-cover.no-cover img { display: none; }

/* Liste ismi: SADECE fare üzerine gelince görünen küçük etiket. */
.playlist-tip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  margin-left: 6px;
  padding: 4px 9px;
  border-radius: 5px;
  background: #0c0d10;
  color: #f2f3f5;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 5;
}
.playlist-item:hover .playlist-tip { opacity: 1; }

/* ---- Sağındaki sütun: seçili listedeki şarkılar ---- */
.song-rail {
  width: 260px;
  flex: none;
  height: 100%;
  padding: 14px 8px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Tarayıcının varsayılan (kalın, gri) scrollbar'ı yerine sitenin koyu temasına
   uyan ince bir çubuk — hem playlist hem şarkı sütununda. */
.playlist-rail,
.song-rail {
  scrollbar-width: thin;
  scrollbar-color: rgba(124,138,161,.45) transparent;
}
.playlist-rail::-webkit-scrollbar,
.song-rail::-webkit-scrollbar { width: 6px; }
.playlist-rail::-webkit-scrollbar-track,
.song-rail::-webkit-scrollbar-track { background: transparent; }
.playlist-rail::-webkit-scrollbar-thumb,
.song-rail::-webkit-scrollbar-thumb {
  background: rgba(124,138,161,.45);
  border-radius: 3px;
}
.playlist-rail::-webkit-scrollbar-thumb:hover,
.song-rail::-webkit-scrollbar-thumb:hover {
  background: rgba(124,138,161,.7);
}

.song-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: #c7cbd1;
  opacity: 0;
  animation: fadeSlideIn .35s ease forwards;
  transition: background-color .15s ease, color .15s ease;
}
.song-row:hover { background: rgba(255,255,255,.05); }
.song-row.playing { background: rgba(47,127,224,.22); color: #7cb4f5; }
.song-row:focus-visible { outline: 1px solid rgba(255,255,255,.3); outline-offset: -1px; }

.song-num {
  width: 18px;
  text-align: center;
  font-size: 11.5px;
  opacity: .55;
  flex: none;
}
.song-name {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Kalan alan: büyük kapak + hemen altında çalan şarkının adı. Kutulanmış
   bir panel YOK, arkaplan sayfa zeminiyle aynı/uyumlu. ---- */
.music-stage {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  background: radial-gradient(circle at 50% 42%, rgba(80,110,160,.14), transparent 62%);
}

/* Yeterince geniş pencerede (rail'i dengelemek için ayrılan boşluk artık
   genişliğin küçük bir kısmı) tam sayfa ortasına hizalayan 3 sütunlu grid'e
   geçiyoruz: [rail] [sahne] [rail genişliğinde hayalet boşluk]. Sağdaki
   hayalet sütun solla AYNI genişlikte olduğu için .music-stage otomatik
   TAM SAYFA ORTASINA denk geliyor, piksel tahmini yok. */
@media (min-width: 1300px) {
  .music-app {
    display: grid;
    grid-template-columns: var(--rail-w) 1fr var(--rail-w);
    grid-template-rows: minmax(0, 1fr);
  }
  .music-left { grid-column: 1; }
  .music-stage { grid-column: 2; }
}

.music-cover {
  position: relative;
  width: min(460px, 78%);
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(150deg, #384158, #191b21 70%);
  box-shadow: 0 28px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
/* Varsayılan GİZLİ: JS (syncBigCover) resim başarıyla yüklenince görünür
   yapıyor. Hiç playlist/kapak yoksa JS hiç dokunmuyor bile — bu durumda
   img'nin boş src'si tarayıcının "kırık resim" ikonunu göstermesin diye
   varsayılan display:none şart. */
.music-cover img { width: 100%; height: 100%; object-fit: cover; display: none; }
.music-cover-fallback {
  font-size: 110px;
  color: rgba(255,255,255,.14);
  line-height: 1;
}

.music-now-playing {
  font-family: var(--font-ui);
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Sabit yer ayrılıyor ki ilk şarkı çalınıp metin boştan doluya geçince
     kapak fotoğrafı yukarı doğru sıçramasın (bkz. main.js syncNowPlayingName —
     metnin kendisi ayrıca yumuşak bir fade-in ile beliriyor). */
  min-height: 1.3em;
  /* Aşırı hafif, zar zor fark edilen mavi bir parıltı yavaşça metnin üzerinde
     kayıyor — beyaza çok yakın bir mavi ton kullanıldığı için göz çok
     zorlanmadan sadece "canlı" bir his veriyor. */
  background: linear-gradient(100deg, #f2f3f5 42%, #bfd9ff 50%, #f2f3f5 58%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: nowPlayingShimmer 8s ease-in-out infinite;
}
@keyframes nowPlayingShimmer {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .music-now-playing { animation: none; }
}

@media (max-width: 900px) {
  .playlist-rail { width: 72px; }
  .song-rail { width: 200px; }
}

/* Sadece mobilde görünür: playlist panelini açan yuvarlak düğme. Masaüstünde
   (bkz. üstteki kural yok = varsayılan) tamamen gizli. */
.playlist-toggle-btn {
  display: none;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background: rgba(20, 22, 27, .88);
}
.playlist-toggle-btn.hidden { display: none !important; } /* panel açıkken ilk listenin üstüne binmesin */
.playlist-drawer-backdrop {
  display: none;
}

@media (max-width: 720px) {
  /* ---- Spotify tarzı mobil düzen ----
     Üstte büyük "şu an çalıyor" kartı (kapak + isim), altında aşağı
     kaydırınca görünen şarkı listesi — normal, tek sütunlu sayfa akışı.
     Playlist seçimi ayrı bir bölüm DEĞİL: soldan kayan bir çekmece (bkz.
     .playlist-toggle-btn / .playlist-rail.open / .playlist-drawer-backdrop),
     main.js'teki initMusicPageContent bunu açıp kapatıyor. */
  .music-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    display: block;
    padding: calc(var(--bar-h) + 8px) 0 calc(var(--player-h) + 20px);
  }
  .music-app {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  /* .music-left artık NORMAL bir blok (100% genişlik) — içindeki
     playlist-rail zaten position:fixed olduğu için akışa hiç katkı vermiyor,
     görünen tek içeriği song-rail oluyor ve ondan doğal genişliğini/
     yüksekliğini alıyor. 'order:2' burada (music-stage'den SONRA) veriliyor
     çünkü flex 'order' sadece #music-app'in DOĞRUDAN çocuklarında işe yarar
     — song-rail kendisi değil, onu saran music-left doğrudan çocuk. */
  .music-left { order: 2; width: 100%; }

  /* Büyük "çalıyor" kartı — sayfanın üst kısmı, DOM sırasından bağımsız
     olarak flex 'order' ile önce gösterilir. */
  .music-stage {
    order: 1;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 60vh;
    padding: 64px 24px 20px;
  }
  .music-cover { width: min(300px, 72vw); margin: 0 auto; }
  .music-now-playing { font-size: 15px; }

  /* Şarkı listesi: kapağın ALTINDA, normal akışta — aşağı kaydırınca
     görünür ve seçilebilir. (order burada değil, ebeveyni .music-left'te —
     bkz. yukarıdaki not.) */
  .song-rail {
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 6px 12px 8px;
  }
  .song-row { padding: 12px 10px; }
  .song-name { font-size: 14.5px; }

  /* Playlist paneli: soldan kayan, tam yükseklikte bir çekmece. Masaüstünde
     .playlist-rail'in kendi arka planı yok çünkü sayfa zeminiyle aynı hizada
     akıyor — burada ise sabit (position:fixed) bir panel olduğu için KOYU BİR
     ZEMİN ŞART, yoksa arkasındaki içerik şeffaf şekilde görünüp hem panel
     okunaksız oluyor hem de (stacking bağlamı karışıklığıyla) tıklamalar
     yanlış elemana gidebiliyordu. */
  .playlist-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 92px;
    z-index: 40;
    flex-direction: column;
    background: #15171c;
    border-right: 1px solid rgba(255,255,255,.08);
    padding: calc(var(--bar-h) + 20px) 0 20px;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.22,1,.36,1);
    box-shadow: 12px 0 30px rgba(0,0,0,.4);
  }
  .playlist-rail.open { transform: translateX(0); }
  .playlist-tip { left: 100%; top: 50%; transform: translateY(-50%) translateX(6px); margin-left: 6px; }

  .playlist-toggle-btn {
    display: flex;
    position: fixed;
    top: calc(var(--bar-h) + 14px);
    left: 16px;
    z-index: 41;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
  }

  .playlist-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .playlist-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
}

/* ============================================================
   Videolar sayfası — YouTube tarzı kart grid (Eklentiler ile aynı
   düzen mantığı: flex + justify-content:center, üstte-ortalı satırlar)
   + tıklayınca ekranı kaplayan büyük oynatıcı (lightbox).
   ============================================================ */
body.video-page { background: #0e0f12; }
body.video-page::after { display: none; }

.video-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  padding: calc(var(--bar-h) + 40px) 6vw 64px;
}

.video-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px 32px;
}

.video-card {
  width: 350px;
  max-width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  opacity: 0;
  animation: fadeSlideIn .5s ease forwards;
  text-align: left;
  font: inherit;
  color: inherit;
}
.video-card:focus-visible { outline: none; }
.video-card:focus-visible .video-thumb {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #111318;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* JS onload ile görünür yapılır, yoksa .video-thumb'ın koyu zemini kalır */
  pointer-events: none;
}
.video-card:hover .video-thumb {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
}

.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.18);
  transition: background-color .2s ease;
}
.video-play-overlay::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  margin-left: 4px;
}
.video-card:hover .video-play-overlay { background: rgba(0,0,0,.34); }

/* Lightbox: karta tıklayınca videoyu ekranı kaplayacak şekilde büyük oynatan katman. */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  padding: 40px;
}
.video-lightbox.visible { opacity: 1; pointer-events: auto; }

/* Tıklanan kartın konum/boyutundan bu kutunun son konum/boyutuna GERÇEK
   top/left/width/height geçişiyle büyüyerek açılır (masaüstündeki metin
   belgesi popup'ının "tüm ekranı kapla" düğmesiyle AYNI teknik) — transform:
   scale() KULLANILMIYOR, çünkü <video controls> içindeki tarayıcı-native
   kontroller ölçeklenince bozuk/gerilmiş görünürdü. position:fixed + JS'in
   hesapladığı piksel değerleri (bkz. main.js computeLightboxTargetRect /
   openVideoLightbox / closeVideoLightbox) ile gerçek bir "pencere büyüyor"
   hissi veriyor. İçinde iki üst üste katman var: tıklanan kartın THUMBNAIL'i
   (büyüme boyunca hep ekranda, boş/siyah bir kutu büyümüyor) ve video — video
   oynatmaya hazır olunca (canplay) VE büyüme animasyonu bitince ikisi
   arasında yumuşak çapraz geçiş yapılıyor. */
.video-lightbox-frame {
  position: fixed;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
  background: #000;
  transition: top .38s cubic-bezier(.22,1,.36,1), left .38s cubic-bezier(.22,1,.36,1),
              width .38s cubic-bezier(.22,1,.36,1), height .38s cubic-bezier(.22,1,.36,1),
              border-radius .38s ease;
}
.video-lightbox-frame img,
.video-lightbox-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.video-lightbox-frame img { object-fit: cover; } /* karttaki thumbnail de cover'la kırpılıyor, büyürken kayma olmasın */
.video-lightbox-frame video {
  object-fit: contain;
  background: #000; /* video'nun en/boy oranı 16:9'dan farklıysa kalan "letterbox" boşluğu SİYAH olsun, video şeffaf zemininden altındaki thumbnail sızmasın */
  opacity: 0;
  transition: opacity .25s ease;
}
.video-lightbox-frame video.ready { opacity: 1; }

/* Başlık + beğen/beğenme + "Not Bırak" şeridi — çerçevenin HEMEN ALTINDA,
   main.js (positionVideoMeta) tarafından çerçevenin o anki konum/genişliğine
   göre position:fixed olarak yerleştiriliyor, çerçeve büyüme animasyonu
   bitince fade-in ile beliriyor (bkz. reveal mantığı main.js'te). */
.video-lightbox-meta {
  position: fixed;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, top .38s cubic-bezier(.22,1,.36,1), left .38s cubic-bezier(.22,1,.36,1), width .38s cubic-bezier(.22,1,.36,1);
}
.video-lightbox-meta.visible { opacity: 1; pointer-events: auto; }

.video-lightbox-title {
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  color: #e6e8ec;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.video-lightbox-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.video-vote-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 16px;
  padding: 7px 12px;
  background: rgba(255,255,255,.08);
  color: #c7cbd1;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.video-vote-btn:hover { background: rgba(255,255,255,.14); }
.video-vote-btn.active { background: rgba(47,127,224,.28); color: #7cb4f5; }

.video-note-btn {
  border: none;
  border-radius: 16px;
  padding: 7px 16px;
  background: #2f7fe0;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.video-note-btn:hover { background: #3a8bee; }

/* Sağdan kayan not paneli — açılınca çerçeve (+ meta şerit) sola kayıyor
   (bkz. main.js toggleVideoNotes -> computeLightboxTargetRect(true)). */
.video-notes-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(360px, 88vw);
  z-index: 102;
  background: #15171c;
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -20px 0 50px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.video-notes-panel.open { transform: translateX(0); }

.video-notes-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: #f2f3f5;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex: none;
}
.video-notes-panel-close {
  border: none;
  background: rgba(255,255,255,.08);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video-notes-panel-close:hover { background: rgba(255,255,255,.16); }

.video-notes-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.video-notes-list .notlar-row { background: #1c1f26; }
.video-notes-empty {
  font-family: var(--font-ui);
  font-size: 13px;
  color: #666c78;
  text-align: center;
  padding: 24px 0;
}

.video-notes-composer {
  flex: none;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.video-notes-composer textarea {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  border: none;
  outline: none;
  background: #1c1f26;
  border-radius: 8px;
  padding: 9px 11px;
  color: #f2f3f5;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.4;
}
.video-notes-composer textarea::placeholder { color: #666c78; }
.video-notes-composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.video-notes-charcount { font-family: var(--font-ui); font-size: 11.5px; color: #666c78; }
.video-notes-submit {
  border: none;
  border-radius: 16px;
  padding: 6px 16px;
  background: #2f7fe0;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.video-notes-submit:hover { background: #3a8bee; }
.video-notes-submit:disabled { opacity: .55; cursor: default; }

.video-notes-status {
  flex: none;
  padding: 0 18px 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: #7cb4f5;
}

@media (max-width: 640px) {
  .video-lightbox-title { display: none; } /* dar ekranda yer yok, sadece butonlar kalsın */
  .video-notes-panel { width: 100vw; }
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease;
}
.lightbox-close img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.lightbox-close:hover { background: rgba(255,255,255,.22); }

@media (max-width: 640px) {
  .video-shell { padding: calc(var(--bar-h) + 24px) 5vw 44px; box-sizing: border-box; }
  /* 2 sütun mobilde dar/yarım görünüyordu — tek sütun, alt alta.
     .video-grid'e AÇIKÇA width:100% veriyoruz: bu olmadan flex içindeki
     genişliği belirsiz kalıyor, .video-card'ın %100'ü de ona bağlı olarak
     taşıyor/ortalanmıyordu. */
  .video-grid {
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    gap: 26px;
  }
  .video-card { width: 100%; max-width: 100%; }
  .video-lightbox { padding: 16px; }
  .lightbox-close { top: 12px; right: 14px; }
}

/* ============================================================
   DuvarKağıtlarım sayfası — kart grid (Eklentiler/Videolar ile aynı
   düzen mantığı) + tıklayınca büyük önizleme + indirme linki.
   ============================================================ */
body.wallpaper-page { background: #0e0f12; }
body.wallpaper-page::after { display: none; }

.wallpaper-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  padding: calc(var(--bar-h) + 40px) 6vw calc(64px + var(--player-h));
}

.wallpaper-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.wallpaper-card {
  width: 360px; /* satır başına 5 yerine 3 kart sığsın diye büyütüldü */
  max-width: 100%;
  aspect-ratio: 16 / 10;
  border: none;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #111318;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0;
  animation: fadeSlideIn .45s ease forwards;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.wallpaper-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 16px 36px rgba(0,0,0,.55); }
.wallpaper-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wallpaper-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wallpaper-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  padding: 40px;
}
.wallpaper-lightbox.visible { opacity: 1; pointer-events: auto; }
.wallpaper-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
}
.wallpaper-download {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 22px;
  border-radius: 20px;
  background: #2f7fe0;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease;
}
.wallpaper-download:hover { background: #3a8bee; }

@media (max-width: 640px) {
  .wallpaper-shell { padding: calc(var(--bar-h) + 24px) 5vw calc(44px + var(--player-h)); }
  .wallpaper-grid { gap: 12px; }
  .wallpaper-card { width: calc(50% - 6px); }
}

/* Not satırı stili — Notlar popup'ında (bkz. renderNotlarPopup, aslında
   düz metin olarak render edilir, bu class'ı KULLANMAZ) DEĞİL, video
   Yorumlar panelinde kullanılıyor (bkz. main.js renderNoteRows,
   .video-notes-list .notlar-row). */
.notlar-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: 10px;
  background: #16181d;
  border: 1px solid rgba(255,255,255,.06);
  opacity: 0;
  animation: fadeSlideIn .35s ease forwards;
}
.notlar-date {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  color: #6b7280;
  flex: none;
  white-space: nowrap;
}
.notlar-text {
  font-family: var(--font-ui);
  font-size: 14px;
  color: #d7dae0;
  word-break: break-word;
}