/* ═══════════════════════════════════════════════════════
   FONTS — Poppins (body) + Cormorant Garamond (display)
   Cormorant Garamond: Joliet benzeri, Türkçe destekli
   ═══════════════════════════════════════════════════════ */
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Thin.ttf')       format('truetype'); font-weight:100; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-ExtraLight.ttf') format('truetype'); font-weight:200; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Light.ttf')      format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Regular.ttf')    format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Medium.ttf')     format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-SemiBold.ttf')   format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Bold.ttf')       format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-ExtraBold.ttf')  format('truetype'); font-weight:800; font-display:swap; }

/* Horizon font (hero başlığı) — horizon.otf, index.html ile AYNI dizinde
   (css/ klasörünün bir üstünde), o yüzden yol ../horizon.otf */
@font-face {
  font-family:'Horizon';
  src:url('../horizon.otf') format('opentype');
  font-weight:400; font-display:swap;
}

/* ═══════════════════════════════════════════════════════
   RESET & VARIABLES
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --gold:  #C9A96E;
  --gold2: #E8C97A;
  --black: #0a0a0a;
  --dark:  #0e0e0e;
  --white: #ffffff;
  --muted: rgba(255,255,255,.56);
  /* Display font: Cormorant Garamond — Türkçe destekli Joliet alternatifi */
  --df:    'Cinzel Decorative', 'Georgia', serif;
  /* Hero başlık fontu: Horizon (horizon.otf) — Anton sadece dosya
     yüklenemezse devreye giren güvenlik yedeği */
  --hf:    'Horizon', 'Anton', sans-serif;
  --pf:    'Poppins', sans-serif;
  --ease:  cubic-bezier(.4,0,.2,1);
  --nh:    72px;
}
html  { scroll-behavior:smooth; overflow-x:hidden; }
body  { background:var(--black); color:var(--white); font-family:var(--pf); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img   { display:block; max-width:100%; }
a     { text-decoration:none; color:inherit; }
button{ cursor:pointer; border:none; background:none; font-family:var(--pf); }
ul    { list-style:none; }

/* Display font utility class */
.disp-title {
  font-family: var(--df);
  font-weight: 400;
  letter-spacing:.04em;
}

/* ═══════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════ */
#navbar {
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--nh);
  background:rgba(8,8,8,.9);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(201,169,110,.13);
  transition:background .3s;
}
#navbar.scrolled { background:rgba(3,3,3,.97); }

.nav-inner {
  max-width:1440px; margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 36px; gap:12px;
}

.nav-left-slot { display:flex; align-items:center; flex-shrink:0; }
/* Desktop: track thumblar görünür */
.nav-thumbs { display:flex; align-items:center; }
/* Mobil sosyal ikonlar: desktop'ta gizli */
.nav-socials-mob { display:none; align-items:center; gap:6px; }
.nsm { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:transform .25s, filter .25s; }
.nsm img { width:34px; height:34px; }
.nsm:hover { transform:scale(1.1); filter:brightness(1.15); }
.nav-th {
  width:42px; height:42px; border-radius:50%; object-fit:cover;
  border:2px solid var(--gold); margin-left:-10px; flex-shrink:0;
  box-shadow:0 0 10px rgba(201,169,110,.3); cursor:pointer;
  background:rgba(201,169,110,.12); display:block; visibility:visible;
  transition:transform .25s, box-shadow .25s;
}
.nav-th:first-child { margin-left:0; }
.nav-th:hover { transform:scale(1.1) translateY(-2px); z-index:2; box-shadow:0 4px 16px rgba(201,169,110,.4); }

.nav-links {
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:28px;
}
.nav-link {
  font-size:11px; font-weight:600; letter-spacing:.12em;
  color:rgba(255,255,255,.62); position:relative; transition:color .2s; white-space:nowrap;
}
.nav-link::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:1px; background:var(--gold);
  transform:scaleX(0); transition:transform .25s; transform-origin:left;
}
.nav-link:hover, .nav-link.active { color:var(--white); }
.nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); }
.nav-cta {
  background:var(--white) !important; color:var(--black) !important;
  padding:7px 18px; border-radius:6px; font-weight:700;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover  { background:var(--gold) !important; }

.hamburger { display:none; flex-direction:column; gap:5px; padding:4px; flex-shrink:0; }
.hamburger span { display:block; width:26px; height:2px; background:var(--white); border-radius:2px; transition:.3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mob-menu { display:none; flex-direction:column; background:rgba(5,5,5,.98); border-top:1px solid rgba(201,169,110,.1); }
.mob-menu.open { display:flex; }
.mob-link { font-size:12px; font-weight:600; letter-spacing:.12em; padding:15px 36px; color:rgba(255,255,255,.7); border-bottom:1px solid rgba(255,255,255,.05); transition:color .2s; }
.mob-link:hover { color:var(--gold); }
.mob-cta { color:var(--gold) !important; font-weight:700; }

/* ═══════════════════════════════════════════════════════
   1. HERO — sadece 1.4.png, sol metin sağda görsel
   ═══════════════════════════════════════════════════════ */
#hero {
  position:relative; width:100%;
  height:78vh; height:78svh; min-height:560px;
  overflow:hidden; display:flex; align-items:center;
}

/* 1.4.png tam ekran — görsel zaten artistleri içeriyor */
.hero-bg {
  position:absolute; z-index:0;
  width:100%; height:120%; min-height:120%;
  top:-10%; left:0; right:0;
  object-fit:cover;
  object-position:65% center;
  will-change:transform;
  transform:translateY(0);
}
/* Ortalı metin bloğu için simetrik karartma */
.hero-vignette {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(0,0,0,.62) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.05) 70%, rgba(0,0,0,.4) 100%);
}

/* Ortalı blok: thumblar + isimler + butonlar — tıpkı referans görseldeki gibi */
.hero-center {
  position:relative; z-index:4; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 24px;
}
.hero-thumbs {
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.hero-th {
  width:68px; height:68px; border-radius:50%; object-fit:cover;
  border:2.5px solid rgba(201,169,110,.6); margin-left:-18px;
  box-shadow:0 4px 18px rgba(0,0,0,.55); cursor:pointer;
  background:rgba(201,169,110,.1); flex-shrink:0; display:block; visibility:visible;
  transition:transform .3s, box-shadow .3s;
}
.hero-th:first-child { margin-left:0; }
.hero-th:hover { transform:scale(1.1) translateY(-3px); z-index:6; box-shadow:0 6px 24px rgba(201,169,110,.35); }

.hero-names { display:flex; flex-direction:column; margin-bottom:36px; gap:0; align-items:center; }

/* Horizon (Anton fallback) hero başlıkları */
.hero-name {
  font-family:var(--hf);
  font-weight:400;
  font-size:clamp(40px, 6vw, 64px);
  color:var(--gold); line-height:1.12;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
  opacity:0; transform:translateY(26px);
  animation:fadeUp .9s var(--ease) forwards;
}
.hero-name-sila  { animation-delay:0s; }
.hero-name-samet { animation-delay:.15s; }
@keyframes fadeUp { to { opacity:1; transform:none; } }

.hero-btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hbtn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 36px; border-radius:50px;
  font-size:11px; font-weight:700; letter-spacing:.14em;
  transition:background .25s, color .25s;
}
.hbtn-border { border:2px solid var(--gold); color:var(--white); }
.hbtn-border:hover { background:var(--gold); color:var(--black); }
.hbtn-gold   { border:2px solid var(--gold); background:var(--gold); color:var(--black); }
.hbtn-gold:hover { background:transparent; color:var(--white); }

/* ═══════════════════════════════════════════════════════
   SHARED DOTS
   ═══════════════════════════════════════════════════════ */
.dots-row { display:flex; justify-content:center; gap:8px; padding:18px 0; }
.dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.28); cursor:pointer; transition:background .25s,transform .25s; }
.dot.on { background:var(--gold); transform:scale(1.3); }

/* ═══════════════════════════════════════════════════════
   SHARED MODAL
   ═══════════════════════════════════════════════════════ */
.yt-modal { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; }
.yt-modal.open { display:flex; }
.yt-bg { position:absolute; inset:0; background:rgba(0,0,0,.94); cursor:pointer; }
.yt-box { position:relative; z-index:1; width:min(92vw,940px); background:#000; border-radius:12px; overflow:hidden; animation:popIn .28s var(--ease); }
@keyframes popIn { from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1} }
.modal-close { position:absolute; top:10px; right:14px; z-index:2; font-size:34px; color:var(--white); opacity:.65; transition:opacity .2s; }
.modal-close:hover { opacity:1; }
.modal-ratio { position:relative; padding-bottom:56.25%; height:0; }
.modal-ratio iframe { position:absolute; inset:0; width:100%; height:100%; }

/* ═══════════════════════════════════════════════════════
   2. POPULAR TRACKS
   ═══════════════════════════════════════════════════════ */
#popular-tracks { position:relative; background:var(--black); padding:80px 0 50px; overflow:hidden; }
#popular-tracks::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 15% 65%,rgba(55,55,55,.2) 0,transparent 300px),
             radial-gradient(circle at 85% 30%,rgba(55,55,55,.17) 0,transparent 270px);
}
.pt-outer { max-width:920px; margin:0 auto; display:flex; align-items:center; gap:0; padding:0 8px; }
.pt-stage { flex:1; position:relative; height:480px; display:flex; align-items:center; justify-content:center; overflow:visible; }

.pt-card { position:absolute; border-radius:14px; overflow:hidden; cursor:pointer; transition:transform .55s var(--ease),opacity .55s var(--ease),width .55s var(--ease),height .55s var(--ease),box-shadow .55s var(--ease); will-change:transform,opacity; user-select:none; }
.pt-card img { width:100%; height:100%; object-fit:cover; display:block; background:rgba(30,30,30,1); }
.pt-info { position:absolute; bottom:0; left:0; right:0; padding:22px 18px 16px; background:linear-gradient(to top,rgba(0,0,0,.82),transparent); opacity:0; transition:opacity .25s; }
.pt-card.pos-c .pt-info { opacity:1; }
.pt-ititle  { font-size:20px; font-weight:600; color:var(--white); letter-spacing:.02em; }
.pt-iartist { font-size:11px; color:var(--gold); margin-top:4px; letter-spacing:.06em; }

.pt-card.pos-c  { width:380px; height:430px; z-index:3; transform:translate(0) scale(1);       box-shadow:0 24px 72px rgba(0,0,0,.82); }
.pt-card.pos-l  { width:275px; height:322px; z-index:2; transform:translateX(-244px) scale(.87); opacity:.55; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.pt-card.pos-r  { width:275px; height:322px; z-index:2; transform:translateX(244px)  scale(.87); opacity:.55; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.pt-card.pos-hl { width:190px; height:240px; z-index:1; transform:translateX(-450px) scale(.72); opacity:0; pointer-events:none; }
.pt-card.pos-hr { width:190px; height:240px; z-index:1; transform:translateX(450px)  scale(.72); opacity:0; pointer-events:none; }

.pt-arr { font-size:48px; color:var(--gold); line-height:1; display:flex; align-items:center; width:52px; flex-shrink:0; transition:color .2s,transform .2s; }
.pt-arr:hover { color:var(--white); transform:scale(1.15); }

/* ═══════════════════════════════════════════════════════
   3. ABOUT — ovals arası padding artırıldı, çakışmıyor
   ═══════════════════════════════════════════════════════ */
#about { position:relative; background:var(--black); padding:88px 0; overflow:hidden; }
#about::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 10% 50%,rgba(55,42,12,.15) 0,transparent 420px),
             radial-gradient(circle at 90% 50%,rgba(55,42,12,.15) 0,transparent 420px);
}
.about-wrap {
  max-width:1440px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  padding:0 4%; position:relative; z-index:2; gap:0;
}
.about-col { flex:1; display:flex; flex-direction:column; min-width:0; }
.about-col-l { align-items:flex-end; padding-right:24px; }
.about-col-r { align-items:flex-start; padding-left:24px; }

/* Cormorant Garamond about isim */
.about-name-svg {
  font-size:clamp(36px, 4.8vw, 74px);
  color:var(--gold); line-height:1.1; margin-bottom:18px;
  letter-spacing:-.01em;
}
.about-name-r { text-align:left; }
.about-name-l { text-align:right; }

.about-bio { font-size:13px; font-weight:300; color:var(--muted); line-height:1.88; max-width:280px; }
.about-bio-l { text-align:right; }
.about-bio-r { text-align:left; }

/* Ovaller — artık GAP ile ayırılıyor, çakışmıyor */
.about-photos {
  position:relative; flex-shrink:0;
  /* Gap için: gap değişkeni */
  --oval-gap: 28px;
  width:clamp(380px, 38vw, 580px);
  height:clamp(420px, 48vw, 640px);
  display:flex; align-items:flex-end; gap:var(--oval-gap);
  /* absolute konumlamayı kaldırdık, flex kullanıyoruz */
}
.about-oval {
  flex:1; overflow:hidden; border-radius:200px;
  background:#C9854A; min-width:0;
  /* Her oval kendi height'ını alıyor */
  align-self:flex-end;
}
.about-oval img { width:100%; height:100%; object-fit:cover; object-position:top; }

/* Sıla: biraz alçak */
.about-oval-l { height:clamp(320px, 38vw, 510px); }
/* Samet: biraz uzun */
.about-oval-r { height:clamp(350px, 41vw, 540px); }

/* ═══════════════════════════════════════════════════════
   4. STREAMS — yükseklik artırıldı
   ═══════════════════════════════════════════════════════ */
#streams { background:var(--dark); padding:72px 40px; }
.streams-wrap { max-width:1280px; margin:0 auto; }

.stream-tabs { display:none; border-radius:8px; overflow:hidden; border:1px solid rgba(201,169,110,.3); margin-bottom:20px; }
.s-tab { flex:1; padding:13px; font-size:11px; font-weight:600; letter-spacing:.08em; color:rgba(255,255,255,.45); text-align:center; transition:background .2s,color .2s; }
.s-active { background:var(--gold); color:var(--black); }

.streams-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.sp { display:block; }
/* Yükseklik artırıldı: 480 → 560 */
.sp iframe { width:100%; height:560px; border-radius:12px; display:block; border:none; }

/* ═══════════════════════════════════════════════════════
   5. KLİPLER
   ═══════════════════════════════════════════════════════ */
#klipler { position:relative; background:var(--black); padding:72px 0 0; overflow:hidden; }
#klipler::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 22% 72%,rgba(55,55,55,.18) 0,transparent 300px),
             radial-gradient(circle at 78% 28%,rgba(55,55,55,.15) 0,transparent 260px);
}
.clips-wrap { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:0 16px; position:relative; z-index:1; }
.clips-vp   { flex:1; overflow:hidden; border-radius:18px; height:500px; }
.clips-track{ display:flex; height:100%; transition:transform .5s var(--ease); }
.clip-card  { min-width:100%; height:100%; flex-shrink:0; position:relative; cursor:pointer; border-radius:18px; overflow:hidden; }
.clip-thumb { width:100%; height:100%; object-fit:cover; transition:transform .5s; background:rgba(20,20,20,1); }
.clip-card { flex: 0 0 100%; width: 100%;  height: 100%; position: relative; cursor: pointer; border-radius: 18px; overflow: hidden;}
.clip-ov { position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .3s; display:flex; align-items:center; justify-content:center; }
.clip-card:hover .clip-ov { background:rgba(0,0,0,.22); }
.clip-play { width:72px; height:72px; border-radius:50%; background:rgba(201,169,110,.9); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.82); transition:opacity .3s,transform .3s; }
.clip-play svg { width:28px; height:28px; fill:var(--black); margin-left:5px; }
.clip-card:hover .clip-play { opacity:1; transform:scale(1); }
.clip-info { position:absolute; bottom:0; left:0; right:0; padding:28px 24px 20px; background:linear-gradient(to top,rgba(0,0,0,.84),transparent); }
.clip-title  { font-size:24px; font-weight:600; color:var(--white); letter-spacing:.02em; }
.clip-artist { font-size:12px; color:var(--gold); margin-top:4px; letter-spacing:.07em; }
.clips-arr { font-size:42px; color:var(--gold); line-height:1; display:flex; align-items:center; width:48px; flex-shrink:0; transition:color .2s,transform .2s; }
.clips-arr:hover { color:var(--white); transform:scale(1.15); }
#klipler .dots-row { padding-bottom:60px; }

/* ═══════════════════════════════════════════════════════
   6. ETKİNLİKLER — tam yeniden tasarım
   ═══════════════════════════════════════════════════════ */
#etkinlikler { background:var(--black); padding:60px 36px 80px; }
.ev-wrap { max-width:1280px; margin:0 auto; }

.ev-card {
  border-radius:22px; overflow:hidden;
  position:relative;
  /* Yükseklik JS tarafından dinamik ayarlanacak */
  min-height:560px;
  transition:min-height .5s var(--ease);
}

/* 3.png background — her zaman dikey+yatay ortalanmış */
.ev-bg { position:absolute; inset:0; overflow:hidden; }
.ev-bg-img {
  width:100%; height:120%; min-height:120%;
  position:absolute; inset:-10% 0;
  object-fit:cover;
  object-position:center center;
  will-change:transform;
}
.ev-shade {
  position:absolute; inset:0;
  background:linear-gradient(105deg,
    rgba(10,8,2,.93) 0%,
    rgba(15,12,3,.88) 22%,
    rgba(20,16,4,.65) 44%,
    rgba(28,22,6,.30) 65%,
    rgba(36,28,8,.08) 100%);
}

/* Overlay: başlık + liste + buton */
.ev-overlay {
  position:relative; z-index:2;
  padding:40px 48px 52px;
  display:flex; flex-direction:column;
  max-width:58%;
  min-height:560px;
  transition:min-height .5s var(--ease);
}

/* ETKİNLİKLER başlık — tam kart genişliği gibi */
.ev-title-row { width:100%; margin-bottom:32px; }
.ev-title-text {
  font-size:clamp(58px, 8.8vw, 128px);
  color:var(--white); line-height:.88; letter-spacing:-.025em;
  /* Tam genişlik için: max-width yok, flow ile dolu */
  display:block; width:100%;
}

.ev-list-wrap { display:flex; flex-direction:column; }

/* Etkinlik satırları */
.ev-list { display:flex; flex-direction:column; }
.ev-item { display:flex; align-items:center; gap:18px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.ev-item:last-child { border-bottom:none; }
.ev-date { display:flex; flex-direction:column; align-items:center; width:52px; flex-shrink:0; }
.ev-day  { font-size:34px; font-weight:700; color:var(--gold); line-height:1; }
.ev-mon  { font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--gold); text-transform:uppercase; margin-top:1px; }
.ev-sep  { width:1px; height:40px; background:rgba(255,255,255,.2); flex-shrink:0; }
.ev-city  { font-size:22px; font-weight:700; letter-spacing:.06em; line-height:1.1; color:var(--white); }
.ev-venue { font-size:12px; font-weight:600; color:var(--gold); margin-top:2px; }

/* Extra items animation */
.ev-extra.showing .ev-item { animation:evFade .38s var(--ease) both; }
.ev-extra.showing .ev-item:nth-child(2) { animation-delay:.07s; }
.ev-extra.showing .ev-item:nth-child(3) { animation-delay:.14s; }
.ev-extra.showing .ev-item:nth-child(4) { animation-delay:.21s; }
.ev-extra.showing .ev-item:nth-child(5) { animation-delay:.28s; }
@keyframes evFade { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none} }

.ev-btn {
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:30px; align-self:flex-start;
  padding:14px 38px; border-radius:50px;
  background:var(--gold); color:var(--black);
  font-size:11px; font-weight:700; letter-spacing:.14em;
  transition:background .25s;
}
.ev-btn:hover { background:var(--white); }

/* ═══════════════════════════════════════════════════════
   7. GALERİ
   ═══════════════════════════════════════════════════════ */
#galeri { position:relative; background:var(--black); padding:72px 36px 80px; overflow:hidden; }
#galeri::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(30,30,30,.3) 0,transparent 700px); }

.galeri-title-wrap { display:flex; justify-content:center; margin-bottom:40px; position:relative; z-index:1; }
/* Cormorant Garamond galeri başlığı */
.galeri-title-text {
  font-size:clamp(58px, 7.5vw, 108px);
  letter-spacing:.08em; color:var(--gold); line-height:1;
}

.galeri-grid {
  max-width:1100px; margin:0 auto; position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1.3fr 1.5fr;
  grid-template-rows:300px 260px 220px; gap:10px;
}
.g-item { overflow:hidden; border-radius:10px; cursor:pointer; position:relative; background:rgba(20,20,20,1); }
.g-item:nth-child(1) { grid-column:1;   grid-row:1/3; }
.g-item:nth-child(2) { grid-column:2;   grid-row:1;   }
.g-item:nth-child(3) { grid-column:3;   grid-row:1;   }
.g-item:nth-child(4) { grid-column:2;   grid-row:2;   }
.g-item:nth-child(5) { grid-column:3;   grid-row:2/4; }
.g-item:nth-child(6) { grid-column:1/3; grid-row:3;   }
.g-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.g-item:hover img { transform:scale(1.06); }
.g-item::after { content:''; position:absolute; inset:0; background:rgba(201,169,110,0); transition:background .3s; }
.g-item:hover::after { background:rgba(201,169,110,.06); }

.lightbox { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lb-bg   { position:absolute; inset:0; background:rgba(0,0,0,.96); cursor:pointer; }
.lb-img  { position:relative; z-index:1; max-height:86vh; max-width:84vw; object-fit:contain; border-radius:8px; animation:popIn .28s var(--ease); }
.lb-nav  { position:relative; z-index:2; font-size:54px; color:var(--gold); padding:0 8px; line-height:1; transition:color .2s; }
.lb-nav:hover { color:var(--white); }
.lb-close { position:absolute; top:18px; right:22px; z-index:2; font-size:38px; color:var(--white); opacity:.65; transition:opacity .2s; }
.lb-close:hover { opacity:1; }

/* ═══════════════════════════════════════════════════════
   8. İLETİŞİM — fade azaltıldı
   ═══════════════════════════════════════════════════════ */
#iletisim { position:relative; overflow:hidden; }
.ct-bg { position:absolute; inset:0; z-index:0; }
.ct-bg-desk { width:100%; height:120%; min-height:120%; position:absolute; inset:-10% 0; object-fit:cover; filter:brightness(.38); will-change:transform; display:block; }
.ct-bg-mob  { display:none; width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center top; filter:brightness(.45); }
/* Fade azaltıldı: .55 → .35 */
.ct-shade {
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.10) 100%);
}
.ct-inner { position:relative; z-index:2; max-width:1440px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; min-height:460px; }
.ct-left  { padding:64px; display:flex; flex-direction:column; justify-content:center; }

/* İletişim başlığı: Horizon fontu (diğer başlıklardan farklı olarak) */
.ct-title-text {
  font-family: var(--hf);
  font-size:clamp(50px, 6.5vw, 96px);
  color:var(--gold); line-height:1.05; margin-bottom:28px;
  letter-spacing:-.01em;
}

.ct-mgr { display:flex; flex-direction:column; gap:12px; }
.ct-mgr-row {
  font-size:14px; letter-spacing:.03em; color:rgba(255,255,255,.6);
  transition:color .25s;
}
.ct-mgr-row span { color:var(--gold); font-weight:600; transition:color .25s; }
.ct-mgr-row:hover { color:rgba(255,255,255,.85); }
.ct-mgr-row:hover span { color:var(--gold2); }
.ct-right { padding:64px 60px 64px 24px; display:flex; align-items:center; }
.ct-form  { width:100%; display:flex; flex-direction:column; }
.ct-field { position:relative; padding-bottom:28px; }
.ct-lbl { display:block; font-size:11px; font-weight:400; letter-spacing:.18em; color:rgba(255,255,255,.36); margin-bottom:6px; font-style:italic; }
.ct-inp { width:100%; background:transparent; border:none; outline:none; font-family:var(--pf); font-size:12px; color:rgba(255,255,255,.85); padding:4px 0; caret-color:var(--gold); }
.ct-bar { display:block; height:1px; background:rgba(201,169,110,.42); transition:background .2s; }
.ct-field:focus-within .ct-bar { background:var(--gold); }
.ct-submit { display:flex; justify-content:flex-end; padding-top:8px; }
.ct-send { padding:14px 52px; border-radius:50px; background:var(--gold); color:var(--black); font-size:11px; font-weight:700; letter-spacing:.15em; transition:background .25s; }
.ct-send:hover { background:var(--white); }
.ct-ok { font-size:12px; color:var(--gold); text-align:right; margin-top:10px; }

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
footer { background:#040404; text-align:center; padding:22px; border-top:1px solid rgba(201,169,110,.07); }
footer p { font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.22); }
footer a { color:rgba(201,169,110,.5); transition:color .2s; }
footer a:hover { color:var(--gold); }

/* ═══════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════ */
.sr   { opacity:0; transform:translateY(40px);  transition:opacity .7s var(--ease),transform .7s var(--ease); }
.sr-l { opacity:0; transform:translateX(-50px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.sr-r { opacity:0; transform:translateX(50px);  transition:opacity .7s var(--ease),transform .7s var(--ease); }
.sr.vis,.sr-l.vis,.sr-r.vis { opacity:1; transform:none; }


/* ═══════════════════════════════════════════════════════
   PARALLAX
   ═══════════════════════════════════════════════════════ */
.parallax-wrap {
  overflow:hidden;
  position:relative;
}
.parallax-img {
  will-change:transform;
  /* Parallax için %20 fazla yükseklik — scroll alanı sağlar */
  min-height:120%;
  position:absolute; inset:-10% 0;
  width:100%; height:120%;
  object-fit:cover;
  transform:translateY(0);
}
/* Parallax sections — overflow hidden ile clip */
#hero, #etkinlikler, #iletisim { overflow:hidden; }

/* Mobilde parallax devre dışı */
@media (prefers-reduced-motion:reduce), (max-width:768px) {
  .parallax-img, .hero-bg { transform:none !important; transition:none !important; }
}

/* Cursor glow — büyütüldü: 300 → 500px */
#cglow {
  position:fixed; pointer-events:none; z-index:9990;
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle,
    rgba(201,169,110,.14) 0%,
    rgba(201,169,110,.08) 25%,
    rgba(201,169,110,.03) 55%,
    transparent 75%);
  transform:translate(-50%,-50%);
  transition:left .06s ease-out, top .06s ease-out, opacity .4s;
  opacity:0;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — TABLET ≤1100px
   ═══════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .nav-inner { padding:0 20px; }
  .nav-links  { gap:18px; }
  .nav-link   { font-size:10.5px; }
  .hero-center { padding:0 28px; }
  .hero-name  { font-size:clamp(36px, 5.5vw, 70px); }
  .about-photos { width:clamp(320px,32vw,480px); }
  .about-oval-l { height:clamp(280px,33vw,440px); }
  .about-oval-r { height:clamp(305px,36vw,470px); }
  .ev-overlay { max-width:62%; }
  .ev-title-text { font-size:clamp(52px,8vw,106px); }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE ≤768px
   ═══════════════════════════════════════════════════════ */
@media (max-width:768px) {
  :root { --nh:58px; }

  .nav-inner { padding:0 16px; }
  .nav-links  { display:none; }
  .hamburger  { display:flex; }

  /* ── HERO MOBİL ── */
  #hero {
    height:60vh; height:60svh; min-height:420px;
    align-items:center;
  }
  /* 1.4.png mobilde: 82% ile her iki artist görünüyor */
  .hero-bg { object-position:82% center; }
  .hero-center { padding:0 16px; }
  .hero-names { margin-bottom:18px; }
  .hero-name  { font-size:clamp(34px, 11vw, 32px); }
  .hbtn { padding:10px 20px; font-size:10px; }
  .hero-btns { gap:8px; justify-content:center; }
  /* Nav: thumblar gizle, sosyal ikonlar göster */
  .nav-thumbs      { display:none; }
  .nav-socials-mob { display:flex; }

  /* Thumblar */
  .hero-thumbs { margin-bottom:14px; }
  .hero-th     { width:48px; height:48px; margin-left:-11px; }

  /* Popular Tracks */
  #popular-tracks { padding:52px 0 36px; }
  .pt-stage  { height:350px; }
  .pt-card.pos-c { width:265px; height:300px; }
  .pt-card.pos-l { width:182px; height:220px; transform:translateX(-155px) scale(.85); }
  .pt-card.pos-r { width:182px; height:220px; transform:translateX(155px)  scale(.85); }
  .pt-arr { font-size:36px; width:38px; }

  /* About */
  #about { padding:56px 16px; }
  .about-wrap   { flex-direction:column; align-items:center; gap:36px; }
  .about-col    { width:100%; align-items:center !important; padding:0 !important; }
  .about-name-svg { text-align:center; font-size:clamp(32px,9vw,52px); }
  .about-name-r { text-align:center; }
  .about-bio    { text-align:center !important; max-width:100%; }
  .about-photos { width:clamp(260px,72vw,360px); height:auto; order:-1; --oval-gap:16px; }
  .about-oval-l { height:clamp(220px,48vw,300px); }
  .about-oval-r { height:clamp(240px,52vw,320px); }

  /* Streams */
  #streams { padding:56px 16px; }
  .stream-tabs  { display:flex; }
  .streams-grid { grid-template-columns:1fr; }
  .sp           { display:none; }
  .sp.active    { display:block; }
  .sp iframe    { height:360px; }

  /* Clips */
  #klipler { padding:52px 0 0; }
  .clips-wrap { gap:6px; padding:0 8px; }
  .clips-vp { height:260px; }
  .clips-arr { font-size:30px; width:32px; }
  .clip-title { font-size:18px; }

  /* Events */
  #etkinlikler { padding:40px 14px 60px; }
  .ev-overlay  { max-width:100%; padding:28px 20px 40px; }
  .ev-title-text { font-size:clamp(42px,11.5vw,68px); }
  .ev-city  { font-size:18px; }
  .ev-day   { font-size:28px; }

  /* Gallery */
  #galeri { padding:56px 12px 60px; }
  .galeri-title-text { font-size:clamp(44px,12vw,72px); }
  .galeri-grid {
    grid-template-columns:1fr 1fr;
    grid-template-rows:155px 145px 155px 145px;
  }
  .g-item:nth-child(1) { grid-column:1; grid-row:1/3; }
  .g-item:nth-child(2) { grid-column:2; grid-row:1;   }
  .g-item:nth-child(3) { grid-column:2; grid-row:2;   }
  .g-item:nth-child(4) { grid-column:1; grid-row:3;   }
  .g-item:nth-child(5) { grid-column:2; grid-row:3/5; }
  .g-item:nth-child(6) { grid-column:1; grid-row:4;   }

  /* Contact */
  .ct-bg-desk { display:none; }
  .ct-bg-mob  { display:block; }
  .ct-shade { background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.7) 100%); }
  .ct-inner  { grid-template-columns:1fr; }
  .ct-left   { padding:44px 20px 20px; }
  .ct-right  { padding:0 20px 44px; }
  .ct-title-text { font-size:clamp(38px,10vw,60px); }
  .ct-submit { justify-content:stretch; }
  .ct-send   { width:100%; text-align:center; }

  /* Lightbox */
  .lb-img { max-width:92vw; max-height:72vh; }
  .lb-nav { font-size:40px; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — SMALL ≤420px
   ═══════════════════════════════════════════════════════ */
@media (max-width:420px) {
  .hero-name { font-size:26px; }
  .pt-card.pos-l, .pt-card.pos-r { opacity:0; }
  .pt-card.pos-c { width:250px; height:282px; }
}