/* =========================================================
   Önder Bakır — Portfolio
   ========================================================= */

:root{
  --black:#000;
  --ink:#f4f2ef;
  --dim:rgba(244,242,239,.5);
  --dimmer:rgba(244,242,239,.28);
  --line:rgba(244,242,239,.14);
  --card:#0b0b0b;

  --font-sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(16px,3.2vw,44px);
  --gap:clamp(12px,1.6vw,24px);

  --smooth:cubic-bezier(.38,.005,.215,1);
  --expo:cubic-bezier(.19,1,.22,1);
  --power4:cubic-bezier(.23,1,.32,1);

  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--black);
}
html.is-loading{overflow:hidden}
html.menu-open{overflow:hidden}
html.lb-open{overflow:hidden}

body{
  margin:0;
  min-height:100vh;
  background:var(--black);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:500;
  font-size:16px;
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,iframe,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:#000}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- typography helpers ---------- */
.label{
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
  margin:0 0 10px;
}
.p-200{font-size:clamp(14px,1.05vw,16px);line-height:1.45;margin:0}
.p-400{font-size:clamp(18px,2.1vw,30px);line-height:1.28;margin:0 0 22px;letter-spacing:-.015em}
.dim{color:var(--dim)}

.dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#39d98a;margin-right:8px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(57,217,138,.6);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(57,217,138,.5)}
  70%{box-shadow:0 0 0 8px rgba(57,217,138,0)}
  100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}
}

/* underline link */
.link{position:relative;display:inline-block}
.link::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .5s var(--expo);
}
.link:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* icons, icon buttons, link pills */
.icon{width:16px;height:16px;flex:0 0 auto}
.icon-btn{
  width:34px;height:34px;border:1px solid rgba(244,242,239,.45);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .35s var(--smooth),color .35s,border-color .35s;
}
.icon-btn .icon{width:15px;height:15px}
.icon-btn:hover{background:var(--ink);color:#000;border-color:var(--ink)}

.links{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 16px;border:1px solid rgba(244,242,239,.3);border-radius:999px;
  color:var(--ink);font-size:14px;line-height:1;letter-spacing:-.005em;white-space:nowrap;
  transition:background .35s var(--smooth),color .35s,border-color .35s;
}
.pill:hover{background:var(--ink);color:#000;border-color:var(--ink)}

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position:fixed;inset:0;z-index:1000;background:#000;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);
  transition:opacity .6s var(--smooth),visibility .6s;
}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.preloader__inner{
  display:flex;justify-content:space-between;align-items:flex-end;
  font-family:var(--font-mono);text-transform:uppercase;
  font-size:clamp(11px,1vw,13px);letter-spacing:.12em;margin-bottom:14px;
}
.preloader__count{font-size:clamp(48px,12vw,140px);line-height:.85;letter-spacing:-.04em;font-family:var(--font-sans);font-weight:600}
.preloader__bar{height:1px;width:100%;background:rgba(255,255,255,.16);overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0%;background:var(--ink)}

/* =========================================================
   GRAIN + CURSOR
   ========================================================= */
.grain{
  position:fixed;inset:-150%;z-index:900;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grain 8s steps(6) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-5%,-10%)}20%{transform:translate(-15%,5%)}
  30%{transform:translate(7%,-25%)}40%{transform:translate(-5%,25%)}50%{transform:translate(-15%,10%)}
  60%{transform:translate(15%,0)}70%{transform:translate(0,15%)}80%{transform:translate(3%,35%)}
  90%{transform:translate(-10%,10%)}100%{transform:translate(0,0)}
}

.cursor{
  position:fixed;top:0;left:0;z-index:950;pointer-events:none;
  width:12px;height:12px;border-radius:50%;background:var(--ink);
  transform:translate(-50%,-50%);
  transition:width .4s var(--expo),height .4s var(--expo),background .3s;
  display:none;mix-blend-mode:difference;
  align-items:center;justify-content:center;
}
.cursor span{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#000;opacity:0;transition:opacity .3s;white-space:nowrap;mix-blend-mode:normal;
}
.cursor.is-hover{width:44px;height:44px}
.cursor.is-text{width:96px;height:96px}
.cursor.is-text span{opacity:1}
.cursor.is-off{opacity:0}
@media(hover:hover) and (pointer:fine){ .cursor{display:flex} }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:600;
  padding:var(--pad) var(--pad) calc(var(--pad) * 1.6);
  pointer-events:none;
}
.nav a,.nav button{pointer-events:auto}
/* kaydırınca açılan arka plan: başlıklar menü yazılarının altından okunaksız geçmesin */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,0) 100%);
  opacity:0;transition:opacity .4s;
}
html.is-scrolled .nav::before{opacity:1}
html.menu-open .nav::before{opacity:0}
.nav__grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start;
}
.nav__logo{
  grid-column:span 3;
  font-size:clamp(13px,1.05vw,15px);font-weight:600;letter-spacing:-.01em;
}
.nav__menu{grid-column:5 / span 5}
.nav__menu ul{display:flex;gap:clamp(14px,2vw,30px)}
.nav__menu a{font-size:clamp(13px,1.05vw,15px)}
.nav__social{grid-column:11 / span 2;display:flex;gap:8px;justify-content:flex-end;align-items:center}
.nav__burger{display:none}

@media(max-width:900px){
  .nav__grid{grid-template-columns:1fr auto}
  .nav__logo{grid-column:auto}
  .nav__menu,.nav__social{display:none}
  .nav__burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end;
    width:44px;height:44px;padding:0 9px;margin:-12px -9px 0 0;
  }
  .nav__burger span{display:block;height:1px;width:100%;background:currentColor;transition:transform .4s var(--expo),opacity .3s}
  .nav__burger span:last-child{width:60%}
  html.menu-open .nav__burger span:first-child{transform:translateY(3px) rotate(45deg)}
  html.menu-open .nav__burger span:last-child{width:100%;transform:translateY(-3px) rotate(-45deg)}
}

/* mobile menu */
.menu{
  position:fixed;inset:0;z-index:550;background:#0a0a0a;
  padding:calc(var(--pad) * 3) var(--pad) var(--pad);
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--expo),visibility 0s .8s;
  pointer-events:none;visibility:hidden;
}
html.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto;visibility:visible;transition:clip-path .8s var(--expo)}
.menu__list li{overflow:hidden;border-bottom:1px solid var(--line)}
.menu__list a{
  display:block;padding:18px 0;
  font-size:clamp(38px,11vw,72px);line-height:1;letter-spacing:-.04em;font-weight:600;
}
.menu__list a span{display:block;transform:translateY(110%);transition:transform .7s var(--expo)}
html.menu-open .menu__list a span{transform:translateY(0)}
html.menu-open .menu__list li:nth-child(2) a span{transition-delay:.06s}
html.menu-open .menu__list li:nth-child(3) a span{transition-delay:.12s}
html.menu-open .menu__list li:nth-child(4) a span{transition-delay:.18s}
.menu__foot{gap:8px}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;
  padding:calc(var(--nav-h) + var(--pad)) var(--pad) var(--pad);
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;filter:blur(90px);opacity:.5}
.hero__bg i{position:absolute;display:block;border-radius:50%}
.hero__bg i:first-child{
  width:46vw;height:46vw;left:-8vw;top:8vh;
  background:radial-gradient(circle,rgba(60,90,255,.5),transparent 65%);
  animation:float1 22s ease-in-out infinite alternate;
}
.hero__bg i:last-child{
  width:38vw;height:38vw;right:-6vw;bottom:0;
  background:radial-gradient(circle,rgba(255,91,46,.42),transparent 65%);
  animation:float2 26s ease-in-out infinite alternate;
}
@keyframes float1{to{transform:translate(14vw,-8vh) scale(1.2)}}
@keyframes float2{to{transform:translate(-12vw,6vh) scale(1.15)}}

.hero__grid{position:relative;z-index:1}

.hero__title{
  margin:0 0 clamp(30px,6vh,64px);
  font-size:clamp(56px,13.5vw,220px);
  line-height:.86;
  letter-spacing:-.05em;
  font-weight:600;
}
.hero__title .line{display:block}
.hero__title .line--indent{padding-left:.14em;color:var(--dim)}

.hero__meta{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  padding-top:clamp(18px,3vh,30px);border-top:1px solid var(--line);
}
.hero__col:nth-child(1){grid-column:span 3}
.hero__col:nth-child(2){grid-column:5 / span 3}
.hero__col:nth-child(3){grid-column:9 / span 4}
.hero__col b{font-weight:600}
.hero__col .links{margin-top:16px}

@media(max-width:900px){
  .hero__meta{grid-template-columns:1fr;gap:18px}
  .hero__col:nth-child(1),.hero__col:nth-child(2),.hero__col:nth-child(3){grid-column:auto}
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:14px 0;white-space:nowrap;
}
.marquee__track{display:inline-flex;align-items:center;gap:26px;animation:marquee 34s linear infinite;padding-right:26px}
.marquee__track span{font-size:clamp(14px,1.6vw,20px);letter-spacing:-.01em}
.marquee__track em{font-style:normal;color:var(--dimmer);font-size:9px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =========================================================
   SECTION SHELL
   ========================================================= */
.section{padding:clamp(70px,12vh,150px) var(--pad)}
.section__head{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  align-items:end;margin-bottom:clamp(34px,6vh,66px);
}
.section__head > .label{grid-column:span 12;margin-bottom:clamp(18px,3vh,34px)}
.section__title{
  grid-column:span 6;margin:0;
  font-size:clamp(38px,7vw,110px);line-height:.9;letter-spacing:-.045em;font-weight:600;
}
.section__aside{grid-column:8 / span 5;display:flex;flex-direction:column;gap:16px}
.section__aside .p-200{color:var(--dim);max-width:46ch}

@media(max-width:900px){
  .section__title{grid-column:span 12}
  .section__aside{grid-column:span 12;margin-top:24px}
}

/* =========================================================
   RAIL (works)
   ========================================================= */
.rail{
  margin:0 calc(var(--pad) * -1);
  padding:0 var(--pad);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--pad);
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{display:none}
.rail__list{display:flex;gap:var(--gap);padding-bottom:4px}
.work-block + .work-block{margin-top:clamp(64px,11vh,120px)}
.work-block__note{margin:0 0 clamp(18px,3vh,30px);color:var(--dim);max-width:56ch}
.rail__title{
  margin:0 0 clamp(16px,2.6vh,26px);
  font-size:clamp(22px,2.3vw,34px);line-height:1;letter-spacing:-.03em;font-weight:600;
}

.card{
  position:relative;flex:0 0 auto;
  scroll-snap-align:start;
}
.card__media{
  position:relative;
  height:clamp(300px,56vh,600px);
  width:auto;
  aspect-ratio:var(--ar,9/16);
  background:var(--card);border:1px solid var(--line);
  overflow:hidden;cursor:pointer;
  transition:border-color .5s var(--smooth);
}
.card__media:hover{border-color:rgba(244,242,239,.36)}
.card__media:focus-visible{outline-offset:-3px}

/* telefonda kart ekrandan taşmasın: yükseklik hepsinde aynı, genişlik ekranla sınırlı
   (yatay görsel kartın içinde ortalanır, boşluğu bulanık zemin doldurur) */
@media(max-width:700px){
  .card__media{max-width:calc(100vw - var(--pad) * 2)}
}

.card__blur{
  position:absolute;inset:-12%;width:124%;height:124%;
  object-fit:cover;filter:blur(26px) saturate(1.25);opacity:.5;transform:scale(1.06);
}
.card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:transform .8s var(--expo),opacity .4s;
}
.card__media:hover .card__img{transform:scale(1.03)}
.card__fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#141414,#0a0a0a);padding:18px;text-align:center;
  font-size:clamp(15px,1.4vw,20px);font-weight:600;letter-spacing:-.02em;color:rgba(244,242,239,.4);
}
.card__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  width:64px;height:64px;border-radius:50%;
  background:rgba(10,10,10,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(244,242,239,.35);
  display:flex;align-items:center;justify-content:center;
  transition:transform .55s var(--expo),background .4s,opacity .4s;
}
.card__play svg{width:18px;height:18px;margin-left:2px}
.card__media:hover .card__play{transform:translate(-50%,-50%) scale(1);background:rgba(244,242,239,.92);color:#000;border-color:transparent}
.card__fallback[hidden]{display:none}
.card.is-playing .card__play,
.card.is-playing .card__img,
.card.is-playing .card__fallback{opacity:0;pointer-events:none}
.card__media :is(iframe,video){position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:contain}
.card__media video{background:transparent} /* kartın boş kısmını bulanık kapak doldurur (oynamadan önceki gibi) */
/* Drive oynatıcısı (yedek) ~340px'ten darda görüntüyü sağa kaydırıp kesiyor: o açıkken alan en az 360px */
.card.is-playing .card__media:has(iframe){min-width:min(360px,calc(100vw - var(--pad) * 2))}

.card__foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-top:12px;
  width:0;min-width:100%;   /* uzun başlık kartı genişletmez, alt satıra geçer */
}
.card__title{font-size:clamp(14px,1.15vw,17px);letter-spacing:-.01em;margin:0}
.card__tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.card__expand{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);transition:color .3s;
  padding:14px 0 14px 14px;margin:-14px 0;
}
.card__expand:hover{color:var(--ink)}

.rail__nav{display:flex;align-items:center;gap:18px;margin-top:clamp(22px,4vh,38px)}
.rbtn{
  width:48px;height:48px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:background .4s var(--smooth),color .4s,border-color .4s,transform .4s;
}
.rbtn svg{width:20px;height:20px}
.rbtn:hover{background:var(--ink);color:#000;border-color:var(--ink)}
.rbtn:disabled{opacity:.28;cursor:default}
.rbtn:disabled:hover{background:none;color:inherit;border-color:var(--line)}
.rail__progress{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.rail__progress i{position:absolute;left:0;top:0;height:100%;width:10%;background:var(--ink);transition:width .3s var(--smooth),transform .3s var(--smooth)}

/* =========================================================
   ACCOUNTS (social)
   ========================================================= */
.accounts{border-top:1px solid var(--line)}
.account{position:relative;border-bottom:1px solid var(--line)}
.account > a{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr auto 40px;align-items:center;gap:var(--gap);
  padding:clamp(20px,3.4vw,38px) 0;
  transition:padding .6s var(--expo),color .4s;
}
.account:hover > a{padding-left:clamp(14px,2vw,32px);padding-right:clamp(14px,2vw,32px)}
.account__name{font-size:clamp(26px,5.2vw,74px);line-height:1;letter-spacing:-.045em;font-weight:600}
.account__role{margin:0;text-align:right}
.account__arrow{font-size:22px;text-align:right;transition:transform .55s var(--expo);color:var(--dim)}
.account:hover .account__arrow{transform:translate(4px,-4px);color:var(--ink)}

.account__preview{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  background:linear-gradient(115deg,var(--a),var(--b) 78%);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--expo);
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:clamp(180px,18vw,300px);gap:16px;
}
.account:hover .account__preview{clip-path:inset(0 0 0 0)}
.account__preview b{
  font-size:clamp(30px,6vw,86px);letter-spacing:-.05em;line-height:1;
  color:rgba(255,255,255,.16);font-weight:700;
}

@media(max-width:700px){
  .account > a{grid-template-columns:1fr 26px;gap:8px 12px}
  .account__name{grid-column:1;grid-row:1}
  .account__role{grid-column:1;grid-row:2;text-align:left}
  .account__arrow{grid-column:2;grid-row:1 / span 2}
  .account__preview{padding-right:40px}
}

/* =========================================================
   ABOUT
   ========================================================= */
.about__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.about__text{grid-column:span 6}
.about__lists{grid-column:8 / span 5;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.about__list ul{display:flex;flex-direction:column;gap:8px}
.about__list li{
  font-size:clamp(14px,1.05vw,16px);color:var(--dim);
  padding-bottom:8px;border-bottom:1px solid var(--line);
  transition:color .3s,padding-left .4s var(--expo);
}
.about__list li:hover{color:var(--ink);padding-left:6px}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
  margin-top:clamp(50px,9vh,110px);padding-top:clamp(24px,4vh,44px);border-top:1px solid var(--line);
}
.stat b{display:block;font-size:clamp(44px,7vw,110px);line-height:.9;letter-spacing:-.05em;font-weight:600}
.stat .label{margin:12px 0 0}

@media(max-width:900px){
  .about__text,.about__lists{grid-column:span 12}
  .about__lists{margin-top:34px}
  .stats{grid-template-columns:1fr;gap:26px}
}

/* =========================================================
   CONTACT + FOOTER
   ========================================================= */
.contact{padding-bottom:clamp(40px,6vh,70px)}
.contact__title{margin:0;font:inherit}
.contact__cta{
  display:block;margin:clamp(10px,2vh,20px) 0 clamp(50px,9vh,110px);
  font-size:clamp(52px,12.5vw,200px);line-height:.86;letter-spacing:-.05em;font-weight:600;
}
.contact__cta .line{display:block;transition:transform .7s var(--expo),color .5s}
.contact__cta .line--indent{padding-left:.14em;color:var(--dim)}
.contact__cta:hover .line{transform:translateX(.05em)}
.contact__cta:hover .line--indent{color:var(--ink)}

.contact__grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:28px var(--gap);
  padding-top:clamp(20px,3vh,34px);border-top:1px solid var(--line);
}
.contact__grid > div:nth-child(1){grid-column:span 3}
.contact__grid > div:nth-child(2){grid-column:5 / span 4}
.contact__grid > div:nth-child(3){grid-column:10 / span 3}
.contact__grid a{color:var(--dim);transition:color .3s}
.contact__grid a:hover{color:var(--ink)}
.contact__grid .pill{color:var(--ink)}
.contact__grid .pill:hover{color:#000}

@media(max-width:900px){
  .contact__grid{grid-template-columns:1fr 1fr}
  .contact__grid > div:nth-child(1),
  .contact__grid > div:nth-child(2),
  .contact__grid > div:nth-child(3){grid-column:span 1}
}

.footer{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px var(--pad);border-top:1px solid var(--line);
}
.footer .label{margin:0}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.94);
  backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--pad) * 2.4) var(--pad);
  opacity:0;visibility:hidden;transition:opacity .5s var(--smooth),visibility .5s;
}
/* açılışta görünürlük anında gelsin ki odak Kapat düğmesine taşınabilsin */
.lightbox.is-open{opacity:1;visibility:visible;transition:opacity .5s var(--smooth)}
.lightbox__head{
  position:absolute;top:var(--pad);left:var(--pad);right:calc(var(--pad) + 70px);
  display:flex;justify-content:space-between;gap:16px;
}
.lightbox__head .label{margin:0;color:var(--ink)}
.lightbox__close{
  position:absolute;top:var(--pad);right:var(--pad);
  width:44px;height:44px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .35s,color .35s;
}
.lightbox__close svg{width:20px;height:20px}
.lightbox__close:hover{background:var(--ink);color:#000}
.lightbox__frame{
  /* en az 360px (Drive oynatıcısı daha darda kayıyor); kısa ekranda yükseklik sınırlı, video kutu içinde ortalanır */
  width:min(100%,calc(min(70vh,760px) * var(--ar,9/16)));
  height:auto;aspect-ratio:var(--ar,9/16);max-height:min(70vh,760px);
  background:#000;border:1px solid var(--line);position:relative;
}
.lightbox__frame:has(iframe){min-width:min(360px,100%)} /* Drive oynatıcısı (yedek) daha darda kayıyor */
.lightbox__frame :is(iframe,video){position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:contain}
.lightbox__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lightbox__nav{display:flex;gap:12px;margin-top:20px}

/* =========================================================
   ANIMATION PRIMITIVES
   ========================================================= */
/* reveals hide only when JS runs — without JS everything stays visible */
[data-split-lines]{display:block}
.sl-line{display:block;overflow:hidden;padding:.08em 0 .22em;margin:-.08em 0 -.22em}
.sl-inner{display:block;transition:transform 1s var(--expo)}
.js .sl-inner{transform:translateY(130%)}
.js .is-in .sl-inner{transform:translateY(0)}

[data-reveal]{transition:opacity .9s var(--smooth),transform .9s var(--expo)}
.js [data-reveal]{opacity:0;transform:translateY(24px)}
.js [data-reveal].is-in{opacity:1;transform:none}

.card{transition:opacity .8s var(--smooth),transform .8s var(--expo)}
.js .card{opacity:0;transform:translateY(30px)}
.js .card.is-in{opacity:1;transform:none}

/* without JS the preloader must not cover the page */
html:not(.js) .preloader{display:none}
html.pl-skip .preloader{display:none}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .preloader{display:none}
  .js [data-reveal],.js .card{opacity:1;transform:none}
  .js .sl-inner{transform:none}
}