/* ============================================================
   EGZOTÜRK — AI Music Community
   style.css  |  Tailwind (CDN) üzerine özel katman
   ============================================================ */

:root{
  --eg-bg:            #ffffff;
  --eg-bg-soft:       #f6f5fb;
  --eg-surface:       #ffffff;
  --eg-border:        rgba(17,12,46,.10);
  --eg-text:          #14121f;
  --eg-text-soft:     #565272;
  --eg-brand:         #6d28d9;
  --eg-brand-2:       #a855f7;
  --eg-accent:        #06b6d4;
  --eg-gold:          #f5b642;
  --eg-shadow:        0 18px 50px -22px rgba(48,20,120,.45);
  --eg-glass:         rgba(255,255,255,.72);
  --eg-particle:      109,40,217;
  --eg-nav:           rgba(255,255,255,.78);
}

.dark{
  --eg-bg:            #08060f;
  --eg-bg-soft:       #0d0a18;
  --eg-surface:       #120f1f;
  --eg-border:        rgba(255,255,255,.10);
  --eg-text:          #f4f2ff;
  --eg-text-soft:     #a7a2c4;
  --eg-brand:         #a78bfa;
  --eg-brand-2:       #c084fc;
  --eg-accent:        #22d3ee;
  --eg-gold:          #fbbf24;
  --eg-shadow:        0 22px 60px -25px rgba(0,0,0,.85);
  --eg-glass:         rgba(18,15,31,.72);
  --eg-particle:      167,139,250;
  --eg-nav:           rgba(10,8,18,.72);
}

*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  background:var(--eg-bg);
  color:var(--eg-text);
  font-family:'Plus Jakarta Sans','Inter',ui-sans-serif,system-ui,sans-serif;
  transition:background-color .5s cubic-bezier(.16,1,.3,1), color .5s cubic-bezier(.16,1,.3,1);
  overflow-x:hidden;
}
body.eg-lock{ overflow:hidden; }

.font-display{ font-family:'Sora','Plus Jakarta Sans',sans-serif; letter-spacing:-.02em; }

/* ---------- Yardımcı yüzeyler ---------- */
.eg-surface{ background:var(--eg-surface); border:1px solid var(--eg-border); }
.eg-soft{ background:var(--eg-bg-soft); }
.eg-muted{ color:var(--eg-text-soft); }
.eg-bd{ border-color:var(--eg-border); }
.eg-shadow{ box-shadow:var(--eg-shadow); }

.eg-gradient-text{
  background:linear-gradient(100deg,var(--eg-brand) 0%,var(--eg-brand-2) 45%,var(--eg-accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:eg-shimmer 7s linear infinite;
}
@keyframes eg-shimmer{ to{ background-position:200% center; } }

.eg-glass{
  background:var(--eg-glass);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--eg-border);
}

/* ---------- Butonlar ---------- */
.eg-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.6rem; border-radius:999px; font-weight:600; font-size:.95rem;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, background-color .35s, color .35s;
  overflow:hidden; white-space:nowrap; cursor:pointer;
}
.eg-btn:hover{ transform:translateY(-3px); }
.eg-btn:active{ transform:translateY(-1px) scale(.985); }
.eg-btn-primary{
  color:#fff;
  background:linear-gradient(120deg,var(--eg-brand) 0%,var(--eg-brand-2) 55%,var(--eg-accent) 130%);
  background-size:200% auto;
  box-shadow:0 14px 34px -14px rgba(109,40,217,.85);
}
.eg-btn-primary:hover{ background-position:right center; box-shadow:0 20px 44px -14px rgba(109,40,217,.95); }
.eg-btn-ghost{ color:var(--eg-text); border:1px solid var(--eg-border); background:transparent; }
.eg-btn-ghost:hover{ background:var(--eg-bg-soft); }

/* ---------- Loading / Ekolayzer ---------- */
#eg-loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.75rem;
  background:var(--eg-bg);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), visibility .8s;
}
#eg-loader.eg-loader-out{ opacity:0; visibility:hidden; }
#eg-loader::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 55% at 50% 45%,rgba(var(--eg-particle),.20),transparent 70%);
  animation:eg-pulse 2.6s ease-in-out infinite;
}
@keyframes eg-pulse{ 0%,100%{opacity:.5; transform:scale(1);} 50%{opacity:1; transform:scale(1.08);} }

.eg-eq{ display:flex; align-items:flex-end; gap:6px; height:96px; position:relative; z-index:2; }
.eg-eq span{
  width:9px; height:14%; border-radius:99px;
  background:linear-gradient(180deg,var(--eg-accent),var(--eg-brand-2),var(--eg-brand));
  animation:eg-eq-bounce 1.1s ease-in-out infinite;
  box-shadow:0 0 16px rgba(var(--eg-particle),.6);
}
@keyframes eg-eq-bounce{
  0%,100%{ height:14%; opacity:.55; }
  50%    { height:100%; opacity:1; }
}
@media (max-width:480px){ .eg-eq{ height:70px; gap:5px; } .eg-eq span{ width:7px; } }

.eg-loader-bar{ width:210px; height:3px; border-radius:99px; background:var(--eg-border); overflow:hidden; position:relative; z-index:2; }
.eg-loader-bar i{ display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--eg-brand),var(--eg-accent)); transition:width .25s ease; }

/* ---------- Particles ---------- */
.eg-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.eg-particles canvas{ display:block; width:100%; height:100%; }

/* ---------- Reveal ---------- */
[data-reveal]{
  opacity:0; transform:translate3d(0,38px,0) scale(.985);
  transition:opacity .95s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1), filter .9s;
  will-change:opacity,transform;
}
[data-reveal="left"]{ transform:translate3d(-46px,0,0); }
[data-reveal="right"]{ transform:translate3d(46px,0,0); }
[data-reveal="zoom"]{ transform:scale(.9); }
[data-reveal="blur"]{ filter:blur(14px); transform:translate3d(0,26px,0); }
.eg-in[data-reveal]{ opacity:1; transform:none; filter:none; }

/* ---------- Bölüm geçişleri ---------- */
.eg-section{ position:relative; }
.eg-wave{ position:absolute; left:0; right:0; width:100%; height:90px; z-index:2; pointer-events:none; display:block; }
.eg-wave path{ fill:var(--eg-bg); transition:fill .5s; }
.eg-wave-soft path{ fill:var(--eg-bg-soft); }

.eg-aurora{
  position:absolute; inset:-20%; z-index:0; pointer-events:none; filter:blur(90px); opacity:.5;
  background:
    radial-gradient(30% 30% at 20% 25%, rgba(109,40,217,.55), transparent 60%),
    radial-gradient(28% 28% at 78% 18%, rgba(6,182,212,.42), transparent 60%),
    radial-gradient(32% 32% at 55% 82%, rgba(168,85,247,.42), transparent 60%);
  animation:eg-aurora 22s ease-in-out infinite alternate;
}
@keyframes eg-aurora{
  0%{ transform:translate3d(0,0,0) scale(1) rotate(0deg); }
  50%{ transform:translate3d(-3%,2%,0) scale(1.12) rotate(6deg); }
  100%{ transform:translate3d(3%,-2%,0) scale(1.05) rotate(-5deg); }
}

/* ---------- Header ---------- */
/* Yapışkan menü: sayfa boyunca hep ekranda kalır, yalnızca zemini değişir. */
#eg-header{ position:fixed; top:0; left:0; right:0; z-index:60; }
#eg-header .eg-nav-shell{ transition:background-color .4s, box-shadow .4s, backdrop-filter .4s, border-color .4s; border-bottom:1px solid transparent; }
#eg-header.eg-stuck .eg-nav-shell{ background:var(--eg-nav); backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%); box-shadow:0 10px 34px -22px rgba(20,10,60,.55); border-bottom-color:var(--eg-border); }

/* Şeffaf header koyu hero'nun üzerindeyken (anasayfa, sayfa başı):
   açık temada koyu metinler görünmez oluyordu. */
#eg-header.eg-over .font-display,
#eg-header.eg-over .eg-navlink:hover,
#eg-header.eg-over .eg-navlink.eg-active{ color:#fff; }
#eg-header.eg-over .eg-navlink,
#eg-header.eg-over .eg-muted{ color:rgba(255,255,255,.72); }
#eg-header.eg-over .eg-theme-btn{ color:#fff; border-color:rgba(255,255,255,.28); }
#eg-header.eg-over .eg-theme-btn:hover{ background:rgba(255,255,255,.14); }
/* Açılır kategori paneli kendi (açık) zeminini korur */
#eg-header.eg-over .eg-mega{ color:var(--eg-text); }
#eg-header.eg-over .eg-mega .eg-muted{ color:var(--eg-text-soft); }

.eg-navlink{ position:relative; padding:.5rem .1rem; font-weight:500; color:var(--eg-text-soft); transition:color .3s; }
.eg-navlink:hover,.eg-navlink.eg-active{ color:var(--eg-text); }
.eg-navlink::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--eg-brand),var(--eg-accent));
  transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.eg-navlink:hover::after,.eg-navlink.eg-active::after{ transform:scaleX(1); transform-origin:left; }

/* Info ticker */
.eg-ticker{ overflow:hidden; }
.eg-ticker-track{ display:flex; gap:3rem; width:max-content; animation:eg-ticker 34s linear infinite; }
.eg-ticker:hover .eg-ticker-track{ animation-play-state:paused; }
@keyframes eg-ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.eg-mega{ transform-origin:top center; }

/* ---------- Kartlar ---------- */
.eg-card{
  position:relative; border-radius:1.5rem; overflow:hidden;
  background:var(--eg-surface); border:1px solid var(--eg-border);
  transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s, border-color .5s;
}
.eg-card:hover{ transform:translateY(-8px); box-shadow:var(--eg-shadow); border-color:rgba(var(--eg-particle),.45); }
.eg-card .eg-img{ transition:transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s; }
.eg-card:hover .eg-img{ transform:scale(1.09); }

.eg-play{
  position:absolute; inset:0; display:grid; place-items:center; opacity:0;
  background:linear-gradient(0deg,rgba(10,5,25,.75),rgba(10,5,25,.15));
  transition:opacity .45s;
}
.eg-card:hover .eg-play{ opacity:1; }
.eg-play i{ font-size:2.8rem; color:#fff; transform:scale(.7); transition:transform .5s cubic-bezier(.16,1,.3,1); }
.eg-card:hover .eg-play i{ transform:scale(1); }

/* ---------- Slider ---------- */
.eg-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.2s cubic-bezier(.16,1,.3,1), visibility 1.2s; }
.eg-slide.is-active{ opacity:1; visibility:visible; }
.eg-slide .eg-img{ transform:scale(1.14); transition:transform 8s linear; }
.eg-slide.is-active .eg-img{ transform:scale(1); }

.eg-slide-content > *{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.eg-slide.is-active .eg-slide-content > *{ opacity:1; transform:none; }
.eg-slide.is-active .eg-slide-content > *:nth-child(1){ transition-delay:.25s; }
.eg-slide.is-active .eg-slide-content > *:nth-child(2){ transition-delay:.40s; }
.eg-slide.is-active .eg-slide-content > *:nth-child(3){ transition-delay:.55s; }
.eg-slide.is-active .eg-slide-content > *:nth-child(4){ transition-delay:.70s; }

.eg-dot{ width:28px; height:4px; border-radius:99px; background:rgba(255,255,255,.30); overflow:hidden; position:relative; transition:width .5s, background-color .4s; }
.eg-dot.is-active{ width:60px; }
.eg-dot i{ position:absolute; inset:0; width:0; background:#fff; display:block; }
.eg-dot.is-active i{ animation:eg-dotfill 5s linear forwards; }
@keyframes eg-dotfill{ to{ width:100%; } }

/* Yatay carousel */
.eg-rail{ display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:1rem; -ms-overflow-style:none; scrollbar-width:none; }
.eg-rail::-webkit-scrollbar{ display:none; }
.eg-rail > *{ scroll-snap-align:start; flex:0 0 auto; }

/* ---------- Marquee ---------- */
.eg-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.eg-marquee-track{ display:flex; gap:2.5rem; width:max-content; animation:eg-ticker 42s linear infinite; }

/* ---------- Ses dalgası ---------- */
.eg-bars{ display:inline-flex; align-items:flex-end; gap:3px; height:18px; }
.eg-bars i{ width:3px; height:30%; border-radius:9px; background:currentColor; animation:eg-eq-bounce 1s ease-in-out infinite; }

/* ---------- Scroll progress ---------- */
#eg-progress{ position:fixed; top:0; left:0; height:3px; z-index:70; width:0;
  background:linear-gradient(90deg,var(--eg-brand),var(--eg-brand-2),var(--eg-accent)); box-shadow:0 0 12px rgba(var(--eg-particle),.7); }

.eg-stat{ font-variant-numeric:tabular-nums; }

/* ---------- Footer ---------- */
.eg-footer-link{ color:var(--eg-text-soft); transition:color .3s, transform .3s; display:inline-block; }
.eg-footer-link:hover{ color:var(--eg-text); transform:translateX(5px); }

.eg-social{
  width:42px; height:42px; display:grid; place-items:center; border-radius:14px;
  border:1px solid var(--eg-border); color:var(--eg-text-soft);
  transition:transform .45s cubic-bezier(.16,1,.3,1), color .35s, background-color .35s, box-shadow .45s;
}
.eg-social:hover{ transform:translateY(-5px) rotate(-6deg); color:#fff;
  background:linear-gradient(120deg,var(--eg-brand),var(--eg-accent)); box-shadow:0 14px 30px -14px rgba(109,40,217,.9); }

/* ---------- Form ---------- */
.eg-input{
  width:100%; border-radius:14px; padding:.9rem 1.05rem; font-size:.95rem;
  background:var(--eg-bg-soft); border:1px solid var(--eg-border); color:var(--eg-text);
  transition:border-color .35s, box-shadow .35s, background-color .35s;
}
.eg-input:focus{ outline:none; border-color:var(--eg-brand); box-shadow:0 0 0 4px rgba(var(--eg-particle),.16); }
.eg-input::placeholder{ color:var(--eg-text-soft); opacity:.8; }

/* ---------- Accordion ---------- */
.eg-acc-body{ overflow:hidden; transition:height .55s cubic-bezier(.16,1,.3,1), opacity .45s; }

/* ---------- Tema toggle ---------- */
.eg-theme-btn{ position:relative; width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  border:1px solid var(--eg-border); color:var(--eg-text); overflow:hidden; transition:background-color .35s, transform .4s; }
.eg-theme-btn:hover{ transform:rotate(18deg) scale(1.06); background:var(--eg-bg-soft); }
.eg-theme-btn i{ position:absolute; transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .4s; font-size:1.25rem; }
.eg-theme-btn .ph-sun{ opacity:0; transform:translateY(120%) rotate(90deg); }
.dark .eg-theme-btn .ph-sun{ opacity:1; transform:none; }
.dark .eg-theme-btn .ph-moon-stars{ opacity:0; transform:translateY(-120%) rotate(-90deg); }

/* ---------- Modal ---------- */
.eg-modal-enter{ animation:eg-modal .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes eg-modal{ from{ opacity:0; transform:scale(.94) translateY(20px);} to{ opacity:1; transform:none;} }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--eg-bg-soft); }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--eg-brand),var(--eg-accent)); border-radius:99px; border:2px solid var(--eg-bg-soft); }

::selection{ background:rgba(var(--eg-particle),.28); color:var(--eg-text); }

[x-cloak]{ display:none !important; }

/* ---------- Noise ---------- */
.eg-noise::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.035; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Sayfa giriş ----------
   DİKKAT: Bu sınıf <body> üzerinde duruyor; burada ASLA transform/filter/
   perspective kullanmayın. Transform'lu bir öğe, içindeki position:fixed
   elemanlar için kapsayıcı blok oluşturur ve yapışkan menü (#eg-header)
   sayfayla birlikte yukarı kayar. Bu yüzden giriş efekti sadece opacity. */
.eg-page-enter{ animation:eg-page .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes eg-page{ from{ opacity:0; } to{ opacity:1; } }

.eg-float{ animation:eg-float 6s ease-in-out infinite; }
@keyframes eg-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

.eg-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem; border-radius:99px;
  font-size:.78rem; font-weight:600; letter-spacing:.02em; border:1px solid var(--eg-border); background:var(--eg-bg-soft); }

/* ---------- Aspect ----------
   Yalnızca medya ve tam kaplayan katmanlar gerilir. Rozet/etiket gibi
   konumlanmış çocuklar kendi boyutlarını korur. */
.eg-16x9{ position:relative; width:100%; padding-top:56.25%; overflow:hidden; }
.eg-16x9 > img,
.eg-16x9 > video,
.eg-16x9 > iframe,
.eg-16x9 > .eg-play,
.eg-16x9 > .eg-fill{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }