@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Dancing+Script:wght@600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --paper:#FBFAF6;
  --paper-dim:#F4EFEF;
  --ink:#1B1517;
  --ink-soft:#6B5D60;
  --deep:#7A1F30;
  --deep-dark:#3B0F18;
  --aqua:#E9CDD3;
  --aqua-soft:#F7EEEF;
  --gold:#C9A24B;
  --line: rgba(27,21,23,0.12);
  --topbar-h: 40px;
  --header-h: 84px;
  --bordo-gradient: radial-gradient(135% 130% at 15% 100%, #B64D52 0%, #8C303B 24%, #5F1722 46%, #2E0911 70%, #090001 100%);
  --bordo-gradient-x: linear-gradient(90deg, #2B030B 0%, #5F1722 48%, #8C303B 78%, #A2424D 100%);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

h1,h2,h3,.serif{ font-family:'Cormorant Garamond', serif; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:700;
  color:var(--deep);
}
.wrap{ max-width:1180px; margin:0 auto; padding:0 6vw; }
section{ position:relative; }

/* ---------- ripple / droplet background ---------- */
.ripple-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.ripple-field svg{ position:absolute; width:100%; height:100%; }
.ring{
  fill:none; stroke:var(--deep); stroke-width:1; opacity:0;
  transform-origin:center; animation:ripple-out 6s ease-out infinite;
}
.ring.r2{ animation-delay:1.4s; stroke:var(--deep); }
.ring.r3{ animation-delay:2.9s; }
.ring.r4{ animation-delay:4.3s; stroke:var(--deep); }
@keyframes ripple-out{
  0%{ transform:scale(0.15); opacity:0; }
  12%{ opacity:.45; }
  100%{ transform:scale(1.05); opacity:0; }
}

/* ---------- top bar ---------- */
.topbar{
  height:var(--topbar-h);
  background:var(--bordo-gradient-x);
  color:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 6vw; font-size:.75rem; letter-spacing:.04em;
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:transform .4s ease;
}
.topbar.hide{ transform:translateY(-100%); }
.topbar .tb-msg{ opacity:.85; }

/* ---------- Kaçamam YouTube badge ---------- */
.yt-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.4rem 1rem .4rem .4rem;
  border-radius:100px;
  background:linear-gradient(135deg, rgba(95,23,34,.88), rgba(43,11,19,.9));
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 24px -10px rgba(59,15,24,.55);
  animation:badge-glow 2.4s ease-in-out infinite;
  transition:background .3s ease, transform .3s ease;
  flex-shrink:0;
}
.yt-badge:hover{ background:rgba(122,31,48,.92); transform:translateY(-1px); }
.yt-badge .yt-ico{
  width:22px; height:22px; border-radius:50%; background:#FF0000;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  animation:badge-blink 2.4s ease-in-out infinite;
}
.yt-badge .yt-ico svg{ width:11px; height:11px; fill:#fff; }
.yt-badge .yt-song{
  font-family:'Dancing Script', cursive; font-size:1.08rem; font-weight:700;
  color:#fff; letter-spacing:.01em; line-height:1;
}
@keyframes badge-glow{
  0%,100%{ box-shadow:0 0 0 rgba(201,162,75,0); border-color:rgba(255,255,255,.22); }
  50%{ box-shadow:0 0 16px rgba(201,162,75,.45); border-color:rgba(201,162,75,.6); }
}
@keyframes badge-blink{
  0%,100%{ opacity:1; }
  50%{ opacity:.4; }
}
@media (max-width:480px){
  .header-left, .header-right{ min-width:0; }
  .logo img{ height:30px; }
  .yt-badge{ padding:.28rem .7rem .28rem .28rem; gap:.4rem; flex-shrink:1; min-width:0; }
  .yt-badge .yt-ico{ width:18px; height:18px; flex-shrink:0; }
  .yt-badge .yt-ico svg{ width:9px; height:9px; }
  .yt-badge .yt-song{ font-size:.88rem; white-space:nowrap; }
  header.site-header{ padding-left:4vw; padding-right:4vw; }
}
@media (max-width:360px){
  .yt-badge .yt-song{ font-size:.78rem; }
  .logo img{ height:26px; }
}
.topbar .tb-social{ display:flex; gap:1.1rem; }
.topbar .tb-social a{ display:flex; align-items:center; gap:.4rem; opacity:.85; transition:opacity .3s ease, transform .3s ease; }
.topbar .tb-social a:hover{ opacity:1; transform:translateY(-1px); }
.topbar .tb-social svg{ width:14px; height:14px; fill:currentColor; }

/* ---------- main header ---------- */
header.site-header{
  position:fixed; top:var(--topbar-h); left:0; right:0; z-index:55;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 6vw;
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease, top .4s ease;
}
header.site-header.scrolled{
  background:rgba(251,250,246,0.86);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  padding:1rem 6vw;
}
header.site-header.topbar-hidden{ top:0; }

.logo{
  display:flex; align-items:center; z-index:2; flex-shrink:0;
}
.logo img{
  height:55px; width:auto; display:block;
  transition:height .3s ease;
}
header.site-header.scrolled .logo img{ height:34px; }

/* mobilde (860px altı) daha küçük göster */
@media (max-width:860px), (max-device-width:860px){
  .logo img{ height:44px; }
}

.header-right{ display:flex; align-items:center; gap:1rem; }

/* ---------- icon rail (desktop one-page nav) ---------- */
.icon-rail{
  position:fixed; right:1.7rem; top:50%; transform:translateY(-50%);
  z-index:70; display:flex; flex-direction:column; gap:.5rem;
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.65);
  border-radius:100px; padding:.8rem .5rem;
  box-shadow:0 25px 55px -22px rgba(59,15,24,.35);
}
.icon-rail a{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--deep); color:#fff; position:relative; transition:.3s ease;
}
.icon-rail a svg{ width:16px; height:16px; fill:currentColor; transition:.3s ease; }
.icon-rail a:hover, .icon-rail a.active{ background:#fff; color:var(--deep); box-shadow:0 6px 16px -6px rgba(59,15,24,.4); }
.icon-rail a .tooltip{
  position:absolute; right:calc(100% + 14px); top:50%;
  transform:translateY(-50%) translateX(6px);
  background:var(--deep); color:#fff; font-size:.7rem; font-weight:600;
  letter-spacing:.04em; padding:.42rem .8rem; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:.25s ease;
}
.icon-rail a:hover .tooltip{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ---------- hero ---------- */
.hero{
  min-height:100svh; position:relative; overflow:hidden;
}
.hero-photo{
  position:absolute; z-index:1; bottom:0; left:50%;
  height:86%; max-height:820px; width:auto;
  transform:translateX(-50%) translateY(50px) scale(.97);
  -webkit-mask-image:linear-gradient(to bottom, black 82%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 82%, transparent 100%);
  opacity:0;
  animation:photo-rise 1.5s cubic-bezier(.2,.85,.25,1) .5s forwards;
  pointer-events:none;
}
@keyframes photo-rise{
  from{ opacity:0; transform:translateX(-50%) translateY(60px) scale(.96); }
  to{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}
.hero-inner{
  position:absolute; z-index:2; left:6vw; top:50%;
  transform:translateY(-52%); text-align:left; max-width:420px;
}
.hero-inner::before{
  content:''; position:absolute; left:-50px; right:-50px; top:-40px; bottom:-40px;
  background:radial-gradient(closest-side, rgba(251,250,246,.6), transparent 72%);
  z-index:-1; filter:blur(3px); pointer-events:none;
}

/* ---------- instagram highlights ---------- */
.ig-highlights{
  position:relative; z-index:3;
  display:flex; justify-content:flex-start; gap:1.4rem;
  margin:8rem 0 0; padding:.6rem 6vw 1rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ig-highlights::-webkit-scrollbar{ display:none; }
.ig-item{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  flex-shrink:0; text-decoration:none; background:none; border:none; cursor:pointer;
  font-family:inherit; color:inherit;
}
.ig-ring{
  position:relative; width:64px; height:64px; border-radius:50%; flex-shrink:0;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  transition:transform .35s ease, box-shadow .35s ease;
}
.ig-ring::before{
  content:''; position:absolute; inset:-35%;
  background:conic-gradient(from 0deg, #B64D52, #3B0F18, #7A1F30, #C9A24B, #B64D52);
  animation:ig-ring-spin 5s linear infinite;
}
.ig-item:hover .ig-ring{ transform:scale(1.08); box-shadow:0 10px 24px -10px rgba(122,31,48,.5); }
.ig-item:hover .ig-ring::before{ animation-duration:1.6s; }
@keyframes ig-ring-spin{ to{ transform:rotate(360deg); } }
.ig-ring img{
  position:relative; z-index:1;
  width:calc(100% - 3.5px); height:calc(100% - 3.5px); border-radius:50%; object-fit:cover;
  border:2px solid var(--paper); display:block;
}
.ig-label{
  font-size:.66rem; color:var(--ink-soft); letter-spacing:.02em;
  max-width:72px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hero .eyebrow{ opacity:0; animation:rise .9s ease .2s forwards; }
.hero h1{
  font-size:clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight:500; line-height:1; letter-spacing:-.01em;
  margin:.6rem 0 1.1rem;
  opacity:0; animation:rise 1.1s ease .4s forwards;
}
.hero h1 i{ color:var(--deep); font-style:italic; }
.hero p.tag{
  font-size:1.05rem; color:var(--ink-soft); max-width:34ch;
  margin:0 0 2.4rem;
  opacity:0; animation:rise .9s ease .65s forwards;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:translateY(0); }
}
.scroll-cue{
  position:absolute; bottom:2.6rem; right:6vw; left:auto; transform:none;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  opacity:0; animation:rise .9s ease 1.1s forwards;
}
.scroll-cue .stem{ width:1px; height:38px; background:linear-gradient(var(--ink-soft), transparent); position:relative; overflow:hidden; }
.scroll-cue .stem::after{
  content:''; position:absolute; left:0; top:-38px; width:100%; height:38px;
  background:var(--deep); animation:drip 2.2s ease-in-out infinite;
}
@keyframes drip{ 0%{ top:-38px; } 60%{ top:38px; } 100%{ top:38px; } }
.scroll-cue span{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- wave divider ---------- */
.wave-divider{ width:100%; line-height:0; }
.wave-divider svg{ width:100%; height:60px; display:block; }
.wave-divider path{ fill:var(--paper-dim); }
.wave-divider.flip path{ fill:var(--paper); }
.wave-divider.on-dark path{ fill:var(--deep-dark); }

/* ---------- reveal utility ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }

/* ---------- about / hakkımda ---------- */
.about{ padding:7rem 0; background:var(--paper); }
.about .wrap{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:4rem; align-items:center; }
.about-portrait{ position:relative; aspect-ratio:4/5; border-radius:4px; overflow:hidden; }
.about-portrait img{ width:100%; height:100%; object-fit:cover; }
.about-copy p{ color:var(--ink-soft); line-height:1.85; margin-bottom:1.2rem; max-width:56ch; }
.stat-row{ display:flex; gap:2.6rem; margin-top:2rem; flex-wrap:wrap; }
.stat-row .stat h3{ font-size:2.4rem; font-weight:500; color:var(--deep); }
.stat-row .stat span{ font-size:.75rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }

/* ---------- single promo ---------- */
.single{ background:var(--paper-dim); padding:7rem 0 8rem; }
.single .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.player-card{
  position:relative; border-radius:2px; background:var(--paper);
  border:1px solid var(--line); padding:2.2rem;
  box-shadow:0 30px 60px -30px rgba(122,31,48,.25);
}
.player-card::before{
  content:''; position:absolute; top:0; left:2.2rem; right:2.2rem; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.8;
}
.player-card .cover{
  aspect-ratio:1/1; border-radius:2px; margin-bottom:1.6rem; position:relative; overflow:hidden;
}
.player-card .cover img{ width:100%; height:100%; object-fit:cover; }
.track-row{ display:flex; align-items:center; justify-content:space-between; }
.track-row h3{ font-size:1.35rem; font-weight:600; }
.track-row .eyebrow{ margin-bottom:.35rem; }
.eq{ display:flex; align-items:flex-end; gap:3px; height:22px; }
.eq i{ width:3px; background:var(--deep); border-radius:2px; animation:eq 1.1s ease-in-out infinite; display:block; }
.eq.paused i{ animation-play-state:paused; transform:scaleY(.25); }
.eq i:nth-child(1){ height:40%; animation-delay:0s; }
.eq i:nth-child(2){ height:80%; animation-delay:.15s; }
.eq i:nth-child(3){ height:55%; animation-delay:.3s; }
.eq i:nth-child(4){ height:95%; animation-delay:.45s; }
.eq i:nth-child(5){ height:35%; animation-delay:.6s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }
.platforms{ display:flex; gap:.9rem; margin-top:1.8rem; flex-wrap:wrap; }
.platforms a{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); padding:.6rem 1rem; border-radius:100px;
  transition:.3s ease; display:flex; align-items:center; gap:.5rem;
}
.platforms a:hover{ background:var(--deep); color:#fff; border-color:var(--deep); transform:translateY(-2px); }
.platforms a .dot{ width:6px; height:6px; border-radius:50%; background:var(--deep); }
.platforms a:hover .dot{ background:#fff; }
.single-copy h2{ font-size:clamp(2.2rem, 4vw, 3.2rem); font-weight:500; line-height:1.08; margin:.6rem 0 1.2rem; }
.single-copy p{ color:var(--ink-soft); font-size:1.02rem; max-width:44ch; line-height:1.7; }

/* ---------- songs / player ---------- */
.songs{ padding:8rem 0; background:var(--paper); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:3.4rem; flex-wrap:wrap; gap:1rem; }
.section-head h2{ font-size:clamp(2.2rem,4vw,3.2rem); font-weight:500; }

/* ---------- now playing (player view) ---------- */
.now-playing{
  display:flex; align-items:center; gap:2.2rem;
  background:var(--paper-dim); border:1px solid var(--line);
  border-radius:4px; padding:1.8rem; margin-bottom:3.4rem;
  box-shadow:0 30px 60px -35px rgba(122,31,48,.28);
  position:relative; overflow:hidden;
}
.now-playing::before{
  content:''; position:absolute; top:0; left:1.8rem; right:1.8rem; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.8;
}
.np-cover{
  width:150px; height:150px; flex-shrink:0; border-radius:3px; overflow:hidden;
  box-shadow:0 20px 45px -18px rgba(59,15,24,.55);
}
.np-cover img{ width:100%; height:100%; object-fit:cover; transition:opacity .3s ease; }
.np-info{ flex:1; min-width:0; }
.np-info .eyebrow{ margin-bottom:.3rem; }
.np-info h3{ font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-weight:600; line-height:1.1; }
.np-year{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em; }
.np-controls{ display:flex; align-items:center; gap:.85rem; margin-top:1.2rem; flex-wrap:wrap; }
.np-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:.3s ease; flex-shrink:0; background:var(--paper);
}
.np-btn svg{ width:13px; height:13px; fill:var(--ink); transition:.3s ease; }
.np-btn:hover{ background:var(--deep); border-color:var(--deep); }
.np-btn:hover svg{ fill:#fff; }
.np-play{ width:48px; height:48px; background:var(--deep); border-color:var(--deep); }
.np-play svg{ fill:#fff; }
.np-play .icon-pause{ display:none; }
.np-play.is-playing .icon-play{ display:none; }
.np-play.is-playing .icon-pause{ display:block; }
.np-progress{ display:flex; align-items:center; gap:.7rem; flex:1; min-width:180px; }
.np-time{ font-size:.7rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; flex-shrink:0; }
.np-bar{ flex:1; height:3px; background:var(--line); border-radius:2px; position:relative; overflow:hidden; cursor:pointer; }
.np-bar-fill{ height:100%; width:0%; background:var(--gold); }

.song-list{ border-top:1px solid var(--line); }
.song-row{
  display:grid; grid-template-columns:64px 1fr auto auto; gap:1.6rem; align-items:center;
  padding:1.6rem 0; border-bottom:1px solid var(--line); position:relative;
  transition:padding-left .35s ease;
}
.song-row::before{
  content:''; position:absolute; left:-1.4rem; top:0; bottom:0; width:2px; background:var(--deep);
  transform:scaleY(0); transform-origin:top; transition:transform .4s ease;
}
.song-row:hover, .song-row.playing{ padding-left:1.4rem; }
.song-row:hover::before, .song-row.playing::before{ transform:scaleY(1); }
.song-row .idx{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.3rem; color:var(--ink-soft); }
.song-row .title{ font-size:1.25rem; font-weight:600; }
.song-row .year{ color:var(--ink-soft); font-size:.85rem; letter-spacing:.05em; }
.song-row .play-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:.3s ease; position:relative;
}
.song-row:hover .play-btn, .song-row.playing .play-btn{ background:var(--deep); border-color:var(--deep); }
.song-row .play-btn svg{ width:12px; height:12px; fill:var(--ink); transition:.3s ease; }
.song-row:hover .play-btn svg, .song-row.playing .play-btn svg{ fill:#fff; }
.song-row .play-btn .icon-pause{ display:none; }
.song-row.playing .play-btn .icon-play{ display:none; }
.song-row.playing .play-btn .icon-pause{ display:block; }
.song-row .progress-track{
  position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent;
}
.song-row .progress-fill{ height:100%; width:0%; background:var(--gold); transition:width .1s linear; }

/* ---------- bio ---------- */
.bio{ background:var(--paper-dim); padding:8rem 0; }
.bio .wrap{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:5rem; align-items:center; }
.portrait{ position:relative; aspect-ratio:4/5; border-radius:2px; overflow:hidden; }
.portrait img{ width:100%; height:100%; object-fit:cover; }
.portrait .ripple-mini{ position:absolute; inset:0; }
.portrait .caption{
  position:absolute; left:1.4rem; bottom:1.4rem; color:#fff;
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.1rem; opacity:.9;
}
.bio-copy .eyebrow{ margin-bottom:.8rem; }
.bio-copy h2{ font-size:clamp(2.2rem,4vw,3rem); font-weight:500; margin-bottom:1.4rem; line-height:1.1; }
.bio-copy p{ color:var(--ink-soft); line-height:1.85; margin-bottom:1.2rem; max-width:56ch; }
.bio-copy .sig{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.6rem; color:var(--deep); margin-top:1.6rem; }

/* ---------- gallery ---------- */
.gallery{ padding:8rem 0; background:var(--paper); }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0; transition:opacity .4s ease, visibility .4s ease;
}
.lightbox.open{ visibility:visible; opacity:1; }
.lightbox .lb-bg{
  position:absolute; inset:0; background:rgba(20,8,10,0.88); backdrop-filter:blur(6px);
}
.lightbox .lb-stage{ position:relative; z-index:2; max-width:82vw; max-height:82vh; }
.lightbox .lb-stage img{
  max-width:82vw; max-height:82vh; border-radius:2px; box-shadow:0 40px 90px rgba(0,0,0,.5);
  transform:scale(.85); opacity:0; transition:transform .45s cubic-bezier(.2,.9,.25,1), opacity .4s ease;
}
.lightbox.open .lb-stage img{ transform:scale(1); opacity:1; }
.lightbox .lb-close, .lightbox .lb-arrow{
  position:absolute; z-index:3; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; transition:.3s ease;
}
.lightbox .lb-close:hover, .lightbox .lb-arrow:hover{ background:rgba(255,255,255,.28); }
.lightbox .lb-close{ top:2rem; right:2rem; }
.lightbox .lb-close svg{ width:16px; height:16px; }
.lightbox .lb-arrow svg{ width:18px; height:18px; }
.lightbox .lb-arrow.prev{ left:2rem; top:50%; transform:translateY(-50%); }
.lightbox .lb-arrow.next{ right:2rem; top:50%; transform:translateY(-50%); }
.lightbox .lb-arrow svg, .lightbox .lb-close svg{ fill:#fff; }
.lightbox .lb-counter{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.75); font-size:.78rem; letter-spacing:.08em;
}
@media (max-width:700px){
  .lightbox .lb-arrow{ width:38px; height:38px; }
  .lightbox .lb-arrow.prev{ left:.6rem; } .lightbox .lb-arrow.next{ right:.6rem; }
  .lightbox .lb-close{ top:1rem; right:1rem; }
}

/* ---------- youtube / videos ---------- */
.videos{ background:var(--bordo-gradient); color:var(--paper); padding:8rem 0; position:relative; overflow:hidden; }
.videos .eyebrow{ color:var(--aqua); }
.videos .section-head h2{ color:#fff; }
.videos .section-head .yt-link{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; font-weight:700; color:#fff; border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:3px; transition:.3s ease;
}
.videos .section-head .yt-link:hover{ border-color:#fff; gap:.8rem; }
.videos .section-head .yt-link svg{ width:16px; height:16px; fill:#fff; }

.featured-video{
  position:relative; border-radius:4px; overflow:hidden; aspect-ratio:16/8; margin-bottom:1.4rem;
  cursor:pointer;
}
.featured-video img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.featured-video:hover img{ transform:scale(1.04); }
.featured-video .overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,4,7,.75), rgba(15,4,7,.05) 55%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:2rem;
}
.featured-video .play-circle{
  width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem;
  transition:.35s ease;
}
.featured-video:hover .play-circle{ background:#fff; transform:scale(1.06); }
.featured-video .play-circle svg{ width:22px; height:22px; fill:#fff; margin-left:3px; transition:.3s ease; }
.featured-video:hover .play-circle svg{ fill:var(--deep-dark); }
.featured-video .fv-title{ font-family:'Cormorant Garamond', serif; font-size:1.2rem; font-style:italic; }

.video-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.video-card{ cursor:pointer; }
.video-card .thumb{ position:relative; aspect-ratio:18/10; border-radius:3px; overflow:hidden; margin-bottom:.7rem; }
.video-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.video-card:hover .thumb img{ transform:scale(1.08); }
.video-card .thumb .mini-play{
  position:absolute; inset:0; margin:auto; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; transition:.3s ease;
}
.video-card:hover .mini-play{ background:#fff; }
.video-card .thumb .mini-play svg{ width:12px; height:12px; fill:#fff; margin-left:2px; transition:.3s ease; }
.video-card:hover .mini-play svg{ fill:var(--deep-dark); }
.video-card .v-title{ font-size:.92rem; font-weight:600; color:#fff; }
.video-card .v-meta{ font-size:.72rem; color:rgba(255,255,255,.55); margin-top:.2rem; }

/* video modal */
.video-modal{
  position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0; transition:opacity .4s ease, visibility .4s ease;
}
.video-modal.open{ visibility:visible; opacity:1; }
.video-modal .vm-bg{ position:absolute; inset:0; background:rgba(12,4,6,.9); backdrop-filter:blur(8px); }
.video-modal .vm-stage{
  position:relative; z-index:2; width:min(94vw, 1200px); aspect-ratio:16/9; background:#000;
  border-radius:4px; overflow:hidden; transform:scale(.92); transition:transform .4s ease;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); text-align:center; padding:2rem;
}
.video-modal.open .vm-stage{ transform:scale(1); }
.video-modal .vm-close{
  position:absolute; top:-52px; right:0; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
}
.video-modal .vm-close svg{ width:14px; height:14px; fill:#fff; }
@media (max-width:860px), (max-device-width:860px){
  .video-modal .vm-stage{
    width:100vw; height:100svh; max-width:none; aspect-ratio:auto;
    border-radius:0; padding:0;
  }
  .video-modal .vm-close{ top:1.2rem; right:1.2rem; z-index:5; background:rgba(0,0,0,.4); }
  .vm-fallback{ bottom:1rem; }
}
.vm-fallback{
  display:none; position:absolute; bottom:-2.6rem; left:50%; transform:translateX(-50%);
  font-size:.78rem; color:rgba(255,255,255,.7); text-decoration:underline;
  white-space:nowrap;
}
.vm-fallback:hover{ color:#fff; }

/* ---------- story viewer (ig highlights, vertical) ---------- */
.story-modal{
  position:fixed; inset:0; z-index:220; display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0; transition:opacity .4s ease, visibility .4s ease;
}
.story-modal.open{ visibility:visible; opacity:1; }
.story-bg{ position:absolute; inset:0; background:rgba(12,4,6,.92); backdrop-filter:blur(10px); }
.story-stage{
  position:relative; z-index:2; height:min(84vh, 780px); aspect-ratio:9/16;
  border-radius:14px; overflow:hidden; background:#000;
  transform:scale(.94); transition:transform .4s ease;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.story-modal.open .story-stage{ transform:scale(1); }
.story-progress{
  position:absolute; top:.8rem; left:.8rem; right:.8rem; z-index:4;
  display:flex; gap:4px;
}
.story-progress .seg{
  flex:1; height:2.5px; border-radius:2px; background:rgba(255,255,255,.3); overflow:hidden;
}
.story-progress .seg::after{
  content:''; display:block; height:100%; width:0%; background:#fff;
}
.story-progress .seg.done::after{ width:100%; }
.story-progress .seg.active::after{ width:100%; }
.story-head{
  position:absolute; top:1.6rem; left:.9rem; right:.9rem; z-index:4;
  display:flex; align-items:center; gap:.6rem; color:#fff;
}
.story-avatar{ width:26px; height:26px; border-radius:50%; overflow:hidden; border:1.5px solid rgba(255,255,255,.6); flex-shrink:0; }
.story-avatar img{ width:100%; height:100%; object-fit:cover; }
.story-name{ font-size:.78rem; font-weight:700; }
.story-label{ font-size:.72rem; color:rgba(255,255,255,.6); }
.story-close{
  position:absolute; top:1.5rem; right:.9rem; z-index:5;
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12);
}
.story-close svg{ width:12px; height:12px; fill:#fff; }
.story-frame{ position:absolute; inset:0; }
.story-frame img{ width:100%; height:100%; object-fit:cover; transition:opacity .25s ease; }
.story-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; transition:.3s ease;
}
.story-arrow:hover{ background:rgba(255,255,255,.28); }
.story-arrow svg{ width:16px; height:16px; fill:#fff; }
.story-arrow.prev{ left:-52px; }
.story-arrow.next{ right:-52px; }
.story-tap-left, .story-tap-right{ position:absolute; top:0; bottom:0; width:35%; z-index:3; cursor:pointer; }
.story-tap-left{ left:0; }
.story-tap-right{ right:0; }
@media (max-width:860px), (max-device-width:860px){
  .story-arrow.prev{ left:.6rem; }
  .story-arrow.next{ right:.6rem; }
  .story-stage{ height:min(78vh, 720px); border-radius:10px; }
}

/* ---------- contact ---------- */
.contact{ background:var(--bordo-gradient); color:#F3F1EA; padding:8rem 0; text-align:center; position:relative; overflow:hidden; }
.contact .eyebrow{ color:var(--aqua); }
.contact h2{ font-size:clamp(2.4rem,5vw,4rem); font-weight:500; margin:.8rem 0 2rem; }
.contact .cta{
  display:inline-flex; align-items:center; gap:.7rem; border:1px solid rgba(255,255,255,.35);
  padding:1rem 2.2rem; border-radius:100px; font-size:.85rem; letter-spacing:.06em; text-transform:none; font-weight:700;
  transition:.35s ease;
}
.contact .cta:hover{ background:#fff; color:var(--deep); }

/* ---------- footer ---------- */
footer.site-footer{ background:var(--bordo-gradient); color:rgba(243,241,234,.82); padding:6rem 6vw 0; }
.footer-grid{
  max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:3rem;
  padding-bottom:4rem; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand .logo{ color:#fff; margin-bottom:1rem; }
.footer-brand p{ font-size:.9rem; line-height:1.8; color:rgba(243,241,234,.65); max-width:32ch; }
.footer-social{ display:flex; gap:.9rem; margin-top:1.6rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; transition:.3s ease;
}
.footer-social a:hover{ background:var(--gold); border-color:var(--gold); transform:translateY(-3px); }
.footer-social svg{ width:15px; height:15px; fill:#fff; }
.footer-col h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:#fff; margin-bottom:1.4rem; font-weight:700; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:.85rem; }
.footer-col a{ font-size:.9rem; color:rgba(243,241,234,.68); transition:.25s ease; }
.footer-col a:hover{ color:var(--gold); padding-left:4px; }
.footer-col .fc-item{ font-size:.9rem; color:rgba(243,241,234,.68); display:block; margin-bottom:.85rem; }
.footer-col .fc-item b{ display:block; color:#fff; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.25rem; }
.footer-bottom{
  max-width:1180px; margin:0 auto; padding:1.8rem 0; display:flex; justify-content:space-between;
  align-items:center; font-size:.75rem; color:rgba(243,241,234,.5); flex-wrap:wrap; gap:.8rem;
}
.footer-bottom .fb-links{ display:flex; gap:1.4rem; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed; right:1.8rem; bottom:1.8rem; z-index:80;
  width:50px; height:50px; border-radius:50%;
  background:rgba(251,250,246,.75); backdrop-filter:blur(10px);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .4s ease, transform .4s ease, visibility .4s ease, background .3s ease;
  box-shadow:0 12px 30px -12px rgba(122,31,48,.35);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.back-to-top:hover{ background:var(--deep); }
.back-to-top svg{ width:16px; height:16px; fill:var(--deep); transition:.3s ease; }
.back-to-top:hover svg{ fill:#fff; }

/* ---------- responsive ---------- */
@media (max-width:860px), (max-device-width:860px){
  .hero{
    display:flex; flex-direction:column; align-items:center;
    justify-content:flex-start; text-align:center;
    padding-top:0; padding-bottom:1.5rem;
  }
  .hero-photo{ height:70%; }
  .hero-inner{ display:none; }
  .ig-highlights{ margin:9rem auto 2.2rem; gap:1.1rem; justify-content:center; }
  .ig-ring{ width:56px; height:56px; }
  .header-right{ gap:.7rem; }
  .logo{ font-size:1.25rem; }
  .single .wrap, .bio .wrap{ grid-template-columns:1fr; gap:2.4rem; }
  .now-playing{ flex-direction:column; text-align:center; }
  .np-controls{ justify-content:center; }
  .np-progress{ width:100%; min-width:0; margin-top:.4rem; }
  .video-grid{ grid-template-columns:repeat(2,1fr); }
  .topbar{ font-size:.68rem; padding:0 5vw; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:540px), (max-device-width:540px){
  .footer-grid{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:1fr 1fr; }
  .back-to-top{ right:1.1rem; bottom:1.1rem; width:44px; height:44px; }
  .hero-photo{ height:60%; }
  .hero{ padding-top:0; }
  .ig-highlights{ margin:8.4rem auto 1.8rem; gap:.9rem; justify-content:center; }
  .ig-ring{ width:50px; height:50px; }
  .ig-label{ font-size:.62rem; max-width:56px; }
  .icon-rail{ right:.8rem; padding:.6rem .4rem; gap:.35rem; }
  .icon-rail a{ width:32px; height:32px; }
  .icon-rail a svg{ width:14px; height:14px; }
  .icon-rail a .tooltip{ display:none; }
}

.story{
  padding:9.5rem 0 8.5rem; background:var(--paper);
  position:relative; overflow:hidden;
}
.story::before{
  content:'Hikayem';
  position:absolute; top:1.6rem; left:50%; transform:translateX(-50%);
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:clamp(6rem, 17vw, 13rem); line-height:1;
  color:var(--paper-dim); white-space:nowrap; z-index:0; pointer-events:none;
  letter-spacing:-.02em;
}
.story-wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:.82fr 1.18fr; gap:5.5rem; align-items:start;
}

/* görsel taraf */
.story-visual{ position:relative; padding:0 1.6rem 2.2rem 0; }
.story-frame-bg{
  position:absolute; inset:1.6rem -1.2rem -1.4rem 1.2rem;
  background:var(--bordo-gradient); border-radius:4px;
  transform:rotate(-3deg);
  box-shadow:0 40px 80px -30px rgba(59,15,24,.45);
}
.story-portrait{
  position:relative; aspect-ratio:4/5; border-radius:4px; overflow:hidden;
  box-shadow:0 30px 60px -25px rgba(59,15,24,.35);
}
.story-portrait img{ width:100%; height:100%; object-fit:cover; }
.story-plate{
  position:absolute; left:-.6rem; bottom:0; z-index:2;
  background:var(--paper); border:1px solid var(--line);
  padding:.9rem 1.5rem; border-radius:3px;
  box-shadow:0 22px 44px -20px rgba(59,15,24,.35);
  display:flex; flex-direction:column; gap:.15rem;
}
.story-plate-label{ font-size:.6rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); font-weight:700; }
.story-plate-name{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.35rem; }

/* metin taraf */
.story-eyebrow{
  display:flex; align-items:center; gap:.9rem;
  font-size:.75rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--deep); margin-bottom:1.3rem;
}
.story-eyebrow .line{ width:34px; height:1px; background:var(--deep); opacity:.5; }
.story-title{
  font-family:'Cormorant Garamond',serif; font-size:clamp(2.4rem,4vw,3.4rem);
  font-weight:500; line-height:1.1; margin-bottom:2.2rem;
}
.story-title em{ font-style:italic; color:var(--deep); }

.story-timeline{
  display:flex; flex-direction:column; gap:1.7rem;
  margin:0 0 2.4rem; position:relative; padding-left:1.7rem;
}
.story-timeline::before{
  content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--gold), var(--deep) 55%, var(--deep-dark));
}
.story-milestone{ display:flex; position:relative; }
.story-milestone .dot{
  position:absolute; left:-1.7rem; top:.2rem; width:12px; height:12px; border-radius:50%;
  background:var(--paper); border:2px solid var(--gold); box-shadow:0 0 0 4px var(--paper);
}
.milestone-body h3{
  font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-weight:600;
  color:var(--deep); line-height:1; margin-bottom:.35rem;
}
.milestone-body p{ font-size:.86rem; color:var(--ink-soft); line-height:1.65; max-width:40ch; }

.story-text{
  color:var(--ink-soft); line-height:1.9; font-size:1.02rem; max-width:52ch;
  position:relative; padding-left:1.9rem;
}
.story-text::before{
  content:'"'; position:absolute; left:-.4rem; top:-1.3rem;
  font-family:'Cormorant Garamond',serif; font-size:4.6rem; font-style:italic;
  color:var(--gold); opacity:.55; line-height:1;
}
.story-sign{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.5rem;
  color:var(--deep); margin-top:1.7rem;
}

@media (max-width:860px), (max-device-width:860px){
  .story{ padding:6.5rem 0 5.5rem; }
  .story::before{ font-size:clamp(4rem,22vw,7rem); top:0.6rem; }
  .story-wrap{ grid-template-columns:1fr; gap:3.2rem; }
  .story-visual{ max-width:320px; margin:0 auto; padding:0 0 2rem 0; }
  .story-frame-bg{ inset:1.2rem -.8rem -1rem .8rem; }
  .story-plate{ left:50%; transform:translateX(-50%); text-align:center; align-items:center; }
}

.gallery{ padding:8rem 0; background:var(--paper); }

/* ---------- filter pills ---------- */
.gallery-filter{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2.6rem; }
.gf-btn{
  font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.04em;
  color:var(--ink-soft); background:var(--paper); border:1px solid var(--line);
  padding:.55rem 1.2rem; border-radius:100px; cursor:pointer; transition:.3s ease;
}
.gf-btn:hover{ border-color:var(--deep); color:var(--deep); }
.gf-btn.active{ background:var(--deep); border-color:var(--deep); color:#fff; }

/* ---------- bento grid ---------- */
.bento-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:170px; grid-auto-flow:dense; gap:.9rem;
}
.bento-cell{
  position:relative; grid-column:span 1; grid-row:span 1;
  border-radius:4px; overflow:hidden; cursor:pointer;
  transition:transform .5s ease, box-shadow .5s ease, opacity .4s ease;
  box-shadow:0 0 0 rgba(59,15,24,0);
}
.bento-cell.big{ grid-column:span 2; grid-row:span 2; }
.bento-cell.tall{ grid-row:span 2; }
.bento-cell.wide{ grid-column:span 2; }
.bento-cell.hide{ display:none; }

.bento-cell img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease; }

/* gold hairline frame that draws in on hover */
.bento-cell::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  border:1px solid var(--gold); border-radius:4px;
  opacity:0; transform:scale(1.05); transition:opacity .4s ease, transform .4s ease;
}
.bento-cell:hover::before{ opacity:1; transform:scale(1); }

/* dark gradient scrim so caption is always legible */
.bento-cell::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(20,8,10,.72) 0%, rgba(20,8,10,.15) 45%, transparent 65%);
  opacity:.75; transition:opacity .4s ease;
}
.bento-cell:hover::after{ opacity:.92; }
.bento-cell:hover img{ transform:scale(1.08); }
.bento-cell:hover{ transform:translateY(-4px); box-shadow:0 30px 50px -22px rgba(59,15,24,.4); }

/* museum-plate style caption */
.bento-caption{
  position:absolute; left:1rem; right:1rem; bottom:.9rem; z-index:3;
  display:flex; flex-direction:column; gap:.15rem;
  transform:translateY(6px); transition:transform .4s ease;
}
.bento-cell:hover .bento-caption{ transform:translateY(0); }
.bc-label{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.16em; font-weight:700;
  color:var(--gold);
}
.bc-title{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.2rem;
  color:#fff; line-height:1.1;
}

.zoom-icon{
  position:absolute; right:12px; top:12px; z-index:3; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(-8px) scale(.8); transition:.35s ease;
}
.zoom-icon svg{ width:13px; height:13px; fill:var(--ink); }
.bento-cell:hover .zoom-icon{ opacity:1; transform:translateY(0) scale(1); }

@media (max-width:860px), (max-device-width:860px){
  .bento-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:150px; }
  .bento-cell.big{ grid-column:span 2; grid-row:span 2; }
  .bento-cell.wide{ grid-column:span 2; grid-row:span 1; }
  .bento-cell.tall{ grid-column:span 1; grid-row:span 2; }
}
@media (max-width:540px), (max-device-width:540px){
  .bento-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:140px; gap:.6rem; }
  .bento-cell.big{ grid-column:span 2; grid-row:span 2; }
  .bento-cell.wide{ grid-column:span 2; grid-row:span 1; }
  .bento-cell.tall{ grid-column:span 1; grid-row:span 2; }
}