/* =========================================================
   Root vars (tek kaynaktan boyut)
========================================================= */
:root{
  --size: 220px;     /* kapak boyutu */
  --radius: 16px;
  --shadow: 0 8px 22px rgba(0,0,0,.48);
}

/* Tablet / Telefon kırılımları */
@media (max-width:1024px){ :root{ --size:180px; } }
@media (max-width:640px) { :root{ --size:min(38vw,140px); } }
@media (max-width:360px) { :root{ --size:min(42vw,120px); } }

/* =========================================================
   Reset / Base
========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; padding:0; overflow-x:hidden; }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  color:#fff;
  background:#0a0a0a;
  position:relative;
}

/* =========================================================
   Arka plan (parallax blur daireler)
========================================================= */
.bg-layer{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
.bg-circle{
  position:absolute; border-radius:50%; opacity:.4;
  filter:blur(100px); /* optimize edildi */
  animation:floaty 15s infinite alternate ease-in-out;
  will-change: transform; /* GPU optimizasyonu */
}
.bg-circle.c1{
  width:700px; height:700px; top:-200px; left:-200px;
  background:radial-gradient(circle, rgba(236,72,153,.7), transparent 70%);
}
.bg-circle.c2{
  width:600px; height:600px; bottom:-250px; right:-250px;
  background:radial-gradient(circle, rgba(56,189,248,.7), transparent 70%);
  animation-delay:10s;
}
.bg-circle.c3{
  width:500px; height:500px; top:40%; left:30%;
  background:radial-gradient(circle, rgba(34,197,94,.7), transparent 70%);
  animation-delay:20s;
}
@keyframes floaty{
  from{ transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(120px,-160px,0) scale(1.4) rotate(10deg); }
  to  { transform:translate3d(-120px,120px,0) scale(1.2) rotate(-10deg); }
}


/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .bg-circle{ animation:none !important; }
}

/* =========================================================
   Hero
========================================================= */
#siteHeader.hero{
  position:relative; height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; background:transparent; z-index:1;
}
.hero-inner{ max-width:800px; padding:0 20px; position:relative; z-index:2; }
#siteHeader h1, #siteHeader p{
  opacity:0; transform:translateY(20px); animation:fadeUp 1s ease forwards;
}
#siteHeader h1{
  margin:0; font-size:clamp(24px,6vw,64px); font-weight:800; font-family:'Poppins', sans-serif;
  background:linear-gradient(90deg,#38bdf8,#ec4899,#22c55e);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 3px 18px rgba(0,0,0,.4); animation-delay:.2s;
}
#siteHeader p{
  margin-top:16px; font-size:clamp(16px,3vw,22px); color:rgba(255,255,255,.85);
  animation-delay:.6s;
}

/* Aşağı ok + renkli çizgi */
.scroll-down{
  position:absolute; bottom:calc(24px + env(safe-area-inset-bottom,0px));
  left:50%; transform:translateX(-50%); opacity:1; cursor:pointer;
  transition:opacity .5s ease, transform .5s ease; z-index:3;
  will-change: transform, opacity; /* ✅ */
}
.scroll-down svg{
  width:40px; height:40px; stroke:#fff; stroke-width:2.5;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.9));
  animation:bob 1.8s ease-in-out infinite;
}
.scroll-down:hover svg{
  filter:drop-shadow(0 0 14px rgba(255,255,255,1)) drop-shadow(0 0 22px rgba(255,255,255,.9));
}
.hero-line{
  position:absolute; bottom:calc(24px + env(safe-area-inset-bottom,0px));
  left:50%; transform:translateX(-50%) scaleX(0); transform-origin:center;
  width:160px; max-width:300px; min-width:80px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,#38bdf8,#ec4899,#22c55e);
  transition:transform .5s ease, opacity .5s ease; opacity:0; overflow:hidden; z-index:3;
  will-change: transform, opacity; /* ✅ */
}
.hero-line::after{
  content:""; position:absolute; inset:0; left:-50%;
  background:linear-gradient(90deg, rgba(255,255,255,.8), transparent);
  transform:skewX(-20deg); opacity:0;
}
.hero-line.active{ transform:translateX(-50%) scaleX(1); opacity:1; }
.hero-line.active::after{ animation:shine 2s infinite; }

@keyframes shine{
  0%{ left:-40%; opacity:.6; }
  50%{ left:110%; opacity:.35; }
  100%{ left:110%; opacity:0; }
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* =========================================================
   Stage (GRID ONLY)
========================================================= */
#stage{
  width:100%; min-height:100vh; padding:40px 16px;
}
#stage.grid-mode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--size), 1fr));
  column-gap: calc(var(--size) * 0.08); /* yatay */
  row-gap: calc(var(--size) * 0.16);    /* dikey (yarıya indirdik) */
  justify-content: center;
  justify-items: center;
  align-items: start;
  align-content: start; /* tüm satırı yukarı yapıştır */
}

/* =========================================================
   Albüm kartı
========================================================= */
.album{
  width:var(--size); height:var(--size);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); cursor:pointer;
  opacity:0; transform:scale(.95);
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  user-select:none;
}
.album.show{ animation:fadeInAlbum .45s ease forwards; }
@keyframes fadeInAlbum{ from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);} }
.album:hover{ transform:scale(1.02); box-shadow:0 10px 26px rgba(0,0,0,.5); }
.album img{ width:100%; height:100%; object-fit:cover; display:block; will-change: transform, opacity; }

/* Alt overlay */
.overlay{
  position:absolute; inset:auto 0 0 0; padding:8px 10px;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  font-size:13px; font-weight:600; opacity:0; transition:opacity .25s ease;
}
.album:hover .overlay, .album:focus-visible .overlay{ opacity:1; }
.overlay .title{ font-weight:700; font-size:14px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.overlay .artist{ margin-top:2px; font-weight:500; font-size:12px; line-height:1.15; color:rgba(255,255,255,.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 6px rgba(0,0,0,.35); }

@media (max-width:640px){ .album .overlay{ display:none !important; } }
.album:focus{ outline:none; }
.album:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* =========================================================
   Panel (detay)
========================================================= */
.panel{
  background: var(--panel-gradient, linear-gradient(to bottom,#111,#000));
  position:fixed; z-index:5000; display:flex; flex-direction:column; color:#fff;
  transition: background .35s ease, box-shadow .35s ease, color .2s ease, transform .3s ease;
  background-size:200% 200%; animation:panelShift 15s ease-in-out infinite alternate;
}
@keyframes panelShift{ from{background-position:0% 0%;} to{background-position:100% 100%;} }

@media (max-width:767px){ .panel{ left:0; right:0; bottom:0; width:100%; height:min(80vh,700px); border-top-left-radius:16px; border-top-right-radius:16px; box-shadow:0 -4px 12px rgba(0,0,0,.3); transform:translateY(100%);} .panel.open{ transform:translateY(0); } }
@media (min-width:768px){ .panel{ top:0; right:0; width:min(92vw,420px); height:100vh; transform:translateX(100%);} .panel.open{ transform:translateX(0); } }

.panel header{ position:relative; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.1); backdrop-filter:blur(2px); }
#panelTitle{ margin:0; font-size:1.05rem; line-height:1.3; font-weight:600; padding-right:40px; }
#panelMetaLine{ margin-top:2px; font-size:.85rem; line-height:1.2; opacity:.7; }
#panelClose{ position:absolute; top:10px; right:14px; background:none; border:none; font-size:22px; color:#fff; cursor:pointer; line-height:1; }

#panelContent{ padding:14px; overflow:auto; flex:1; transition:transform .3s ease; }
.panel img.album-cover{ width:100%; height:auto; display:block; margin:0 auto; border-radius:12px; }

#panelOverlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:4999; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
@media (max-width:767px){ #panelOverlay.open{ opacity:1; visibility:visible; transition:opacity .3s ease;} }
@media (min-width:768px){ #panelOverlay{ display:none !important; transition:opacity .3s ease;} }

body.no-scroll{ overflow:hidden; }
.drag-handle{ display:none; }
@media (max-width:767px){ .drag-handle{ display:block; width:40px; height:5px; border-radius:3px; background:rgba(255,255,255,.45); margin:8px auto; cursor:grab;} .drag-handle:active{ cursor:grabbing; } }

/* =========================================================
   Loader
========================================================= */
#loader{ width:100%; margin-top:40px; display:flex; flex-direction:column; align-items:center; }
#loader-stage{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
#loader-stage .album{ pointer-events:none; cursor:default; transform:scale(.7); opacity:1; }
#loader-stage .album img{ width:var(--size); height:var(--size); border-radius:var(--radius); object-fit:cover; }
#loader-stage .overlay{ display:none; }

.panel-skeleton{ width:100%; aspect-ratio:1/1; background:linear-gradient(90deg,#222 25%,#333 50%,#222 75%); background-size:200% 100%; animation:skeleton-loading 1.2s infinite; border-radius:8px; }
@keyframes skeleton-loading{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* =========================================================
   Play buttons
========================================================= */
.play-buttons{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.play-button{ width:36px; height:36px; border-radius:50%; display:inline-block; background-size:100%; background-repeat:no-repeat; background-position:center; transition:transform .2s ease, box-shadow .2s ease; }
.play-button:hover{ transform:scale(1.1); box-shadow:0 3px 8px rgba(0,0,0,.3); }
.play-button.spotify{ background-image:url('icons/spotify.png'); }
.play-button.yt{ background-image:url('icons/yt-music.png'); }
.play-button.apple{ background-image:url('icons/apple-music.png'); }

/* =========================================================
   Custom Cursor (masaüstü)
========================================================= */
@media (pointer:fine){
  body.cursor-hide{ cursor:none; }
  input,textarea,select,[contenteditable="true"]{ cursor:text; }
  #cursor{ position:fixed; top:0; left:0; width:18px; height:18px; border:2px solid rgba(255,255,255,.9); border-radius:50%; pointer-events:none; transform:translate3d(-50%,-50%,0); transition: width .18s ease, height .18s ease, border-color .18s ease, background-color .18s ease, opacity .18s ease; opacity:0; z-index:9999; will-change:transform; mix-blend-mode:difference; }
  #cursor.is-hover{ width:36px; height:36px; background-color:rgba(255,255,255,.08); border-color:#fff; }
  #cursor.is-down{ width:14px; height:14px; background-color:rgba(255,255,255,.2); }
  #cursor.is-visible{ opacity:1; }
  #cursor.is-hidden{ opacity:0; }
  html,body{ cursor:none !important; }
  body.cursor-hide *:not(input):not(textarea):not(select):not([contenteditable="true"]){ cursor:none !important; }
  a,button,.play-button,.album,.album-overlay button,#panel,#panel *{ cursor:inherit !important; }
  svg, svg *{ cursor:inherit !important; }
  #cursor.is-aim{ width:22px; height:22px; border:none; background: linear-gradient(currentColor,currentColor) center / 2px 100% no-repeat, linear-gradient(currentColor,currentColor) center / 100% 2px no-repeat; color:#fff; opacity:1; }
  #cursor.is-aim::after{ content:""; position:absolute; inset:50%; width:4px; height:4px; transform:translate(-50%,-50%); background:currentColor; border-radius:50%; }
}

body{ overflow-y:scroll; scrollbar-width:none; }
body::-webkit-scrollbar{ display:none; }

.scroll-down.intro { animation: sdFadeIn .9s ease-out .9s both; }
@keyframes sdFadeIn { from { opacity: 0; } to { opacity: 1; } }

body.no-scroll { overscroll-behavior: none; }

#panelOverlay{ transition: opacity 250ms ease, backdrop-filter 250ms ease; will-change: opacity, backdrop-filter; }

@media (min-width: 768px) { .panel { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }

@media (pointer: fine) { .album img { transition: transform 0.35s ease; } .album:hover img { transform: scale(1.08); } .album:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.55); } }

/* Panel Custom Scrollbar */
#panelContent {
  padding: 14px;
  overflow: auto;
  flex: 1;
  transition: transform .3s ease;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}

#panelContent::-webkit-scrollbar {
  width: 6px;
}
#panelContent::-webkit-scrollbar-track {
  background: transparent;
}
#panelContent::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
}
#panelContent::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.4);
}

/* Panel Genel */
.panel {
  background: var(--panel-gradient, linear-gradient(to bottom,#111,#000));
  position: fixed;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  color: #fff;
  transition: background .35s ease, box-shadow .35s ease, color .2s ease, transform .3s ease;
  background-size: 200% 200%;
  animation: panelShift 15s ease-in-out infinite alternate;
}

.panel-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  position: absolute;
  top: 10px;
  right: 14px;
}

.play-button.share {
  background-image: url('icons/share.png'); /* kendi ikonunu icons klasörüne koy */
  background-position: center;
  background-repeat: no-repeat;
}

/* Error message style */
.error{ color:#fca5a5; margin:12px auto; text-align:center; font-size:.95rem; }